Change "grouping" to "view"

1. *Grouping* becomes *view*. Because *view* is more clear and extensible than *grouping*. It increases flexibility to extend by e.g. adding *flat* as a new view as discussed in #50, in this case "flat *view*" would make more sense than "flat *grouping*".
2. *None* becomes *tree*. Because *tree* is more descriptive than *none*.

Updates labels on top menu. As labels are updated, the file structure/names are refactored to follow the same concept. `TheScriptsList` is renamed to `TheScriptsView`. Also refactors `ViewChanger` so view types are presented in same way.

src/presentation/components/Scripts/Menu/Grouping/Grouping.ts

@@ -1,4 +0,0 @@
-export enum Grouping {
-    Cards = 1,
-    None = 0,
-}

src/presentation/components/Scripts/Menu/Grouping/TheGrouper.vue

@@ -1,66 +0,0 @@
-<template>
-    <div class="container">
-        <MenuOptionList
-            label="Group by"
-            class="part">
-            <MenuOptionListItem
-                label="Cards"
-                :enabled="!cardsSelected"
-                @click="groupByCard()"
-            />
-            <MenuOptionListItem
-                label="None"
-                :enabled="!noneSelected"
-                @click="groupByNone()"
-            />
-        </MenuOptionList>
-        <span class="part">
-        </span>
-    </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import { Grouping } from './Grouping';
-import MenuOptionList from './../MenuOptionList.vue';
-import MenuOptionListItem from './../MenuOptionListItem.vue';
-
-const DefaultGrouping = Grouping.Cards;
-
-@Component({
-  components: {
-    MenuOptionList,
-    MenuOptionListItem,
-  },
-})
-export default class TheGrouper extends Vue {
-    public cardsSelected = false;
-    public noneSelected = false;
-
-    private currentGrouping: Grouping;
-
-    public mounted() {
-        this.changeGrouping(DefaultGrouping);
-    }
-    public groupByCard() {
-        this.changeGrouping(Grouping.Cards);
-    }
-    public groupByNone() {
-        this.changeGrouping(Grouping.None);
-    }
-
-    private changeGrouping(newGrouping: Grouping) {
-        if (this.currentGrouping === newGrouping) {
-            return;
-        }
-        this.currentGrouping = newGrouping;
-        this.cardsSelected = newGrouping === Grouping.Cards;
-        this.noneSelected = newGrouping === Grouping.None;
-        this.$emit('groupingChanged', this.currentGrouping);
-    }
-}
-</script>
-
-<style scoped lang="scss">
-
-</style>

src/presentation/components/Scripts/Menu/MenuOptionListItem.vue

@@ -9,7 +9,7 @@
 
 <script lang="ts">
 import { Component, Prop, Emit, Vue } from 'vue-property-decorator';
-import { NonCollapsing } from '@/presentation/components/Scripts/Cards/NonCollapsingDirective';
+import { NonCollapsing } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';
 
 @Component({
     directives: { NonCollapsing },

src/presentation/components/Scripts/Menu/TheScriptsMenu.vue

@@ -2,9 +2,9 @@
     <div id="container">
         <TheSelector class="item" />
         <TheOsChanger class="item"  />
-        <TheGrouper
+        <TheViewChanger
             class="item"
-            v-on:groupingChanged="$emit('groupingChanged', $event)"
+            v-on:viewChanged="$emit('viewChanged', $event)"
             v-if="!this.isSearching" />
     </div>
 </template>
@@ -13,7 +13,7 @@
 import { Component } from 'vue-property-decorator';
 import TheOsChanger from './TheOsChanger.vue';
 import TheSelector from './Selector/TheSelector.vue';
-import TheGrouper from './Grouping/TheGrouper.vue';
+import TheViewChanger from './View/TheViewChanger.vue';
 import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
@@ -22,7 +22,7 @@ import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
   components: {
     TheSelector,
     TheOsChanger,
-    TheGrouper,
+    TheViewChanger,
   },
 })
 export default class TheScriptsMenu extends StatefulVue {

src/presentation/components/Scripts/Menu/View/TheViewChanger.vue

@@ -0,0 +1,61 @@
+<template>
+    <MenuOptionList
+        label="View"
+        class="part">
+        <MenuOptionListItem
+            v-for="view in this.viewOptions" :key="view.type"
+            :label="view.displayName"
+            :enabled="currentView !== view.type"
+            @click="setView(view.type)"
+        />
+    </MenuOptionList>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import { ViewType } from './ViewType';
+import MenuOptionList from './../MenuOptionList.vue';
+import MenuOptionListItem from './../MenuOptionListItem.vue';
+
+const DefaultView = ViewType.Cards;
+
+@Component({
+  components: {
+    MenuOptionList,
+    MenuOptionListItem,
+  },
+})
+export default class TheViewChanger extends Vue {
+    public readonly viewOptions: IViewOption[] = [
+        { type: ViewType.Cards, displayName: 'Cards' },
+        { type: ViewType.Tree, displayName: 'Tree' },
+    ];
+    public ViewType = ViewType;
+    public currentView?: ViewType = null;
+
+    public mounted() {
+        this.setView(DefaultView);
+    }
+    public groupBy(type: ViewType) {
+        this.setView(type);
+    }
+
+    private setView(view: ViewType) {
+        if (this.currentView === view) {
+            throw new Error(`View is already "${ViewType[view]}"`);
+        }
+        this.currentView = view;
+        this.$emit('viewChanged', this.currentView);
+    }
+}
+
+interface IViewOption {
+    readonly type: ViewType;
+    readonly displayName: string;
+}
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/presentation/components/Scripts/Menu/View/ViewType.ts

@@ -0,0 +1,4 @@
+export enum ViewType {
+    Cards = 1,
+    Tree = 0,
+}