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,
+}

src/presentation/components/Scripts/TheScriptArea.vue

@@ -1,9 +1,9 @@
 <template>
 <div class="scripts">
-    <TheScriptsMenu v-on:groupingChanged="grouping = $event" />
+    <TheScriptsMenu v-on:viewChanged="currentView = $event" />
     <HorizontalResizeSlider class="row">
         <template v-slot:left>
-            <TheScriptsList :grouping="grouping" />
+            <TheScriptsView :currentView="currentView" />
         </template>
         <template v-slot:right>
             <TheCodeArea theme="xcode" />
@@ -15,21 +15,21 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import TheCodeArea from '@/presentation/components/Code/TheCodeArea.vue';
-import TheScriptsList from '@/presentation/components/Scripts/TheScriptsList.vue';
+import TheScriptsView from '@/presentation/components/Scripts/View/TheScriptsView.vue';
 import TheScriptsMenu from '@/presentation/components/Scripts/Menu/TheScriptsMenu.vue';
 import HorizontalResizeSlider from '@/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue';
-import { Grouping } from '@/presentation/components/Scripts/Menu/Grouping/Grouping';
+import { ViewType } from '@/presentation/components/Scripts/Menu/View/ViewType';
 
 @Component({
   components: {
     TheCodeArea,
-    TheScriptsList,
+    TheScriptsView,
     TheScriptsMenu,
     HorizontalResizeSlider,
   },
 })
 export default class TheScriptArea extends Vue {
-    public grouping = Grouping.Cards;
+    public currentView = ViewType.Cards;
 }
 </script>
 

src/presentation/components/Scripts/View/Cards/CardListItem.vue

@@ -33,7 +33,7 @@
 
 <script lang="ts">
 import { Component, Prop, Watch, Emit } from 'vue-property-decorator';
-import ScriptsTree from '@/presentation/components/Scripts/ScriptsTree/ScriptsTree.vue';
+import ScriptsTree from '@/presentation/components/Scripts/View/ScriptsTree/ScriptsTree.vue';
 import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
 
 @Component({

src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter.ts

@@ -1,6 +1,6 @@
 import { ILiquorTreeFilter, ILiquorTreeExistingNode } from 'liquor-tree';
 import { convertExistingToNode } from './NodeTranslator';
-import { INode } from './../../Node/INode';
+import { INode } from '../../Node/INode';
 
 export type FilterPredicate = (node: INode) => boolean;
 

src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater.ts

@@ -1,5 +1,5 @@
 import { ILiquorTreeNode, ILiquorTreeNodeState } from 'liquor-tree';
-import { NodeType } from './../../Node/INode';
+import { NodeType } from '../../Node/INode';
 
 export function getNewState(
     node: ILiquorTreeNode,

src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator.ts

@@ -1,5 +1,5 @@
 import { ILiquorTreeNewNode, ILiquorTreeExistingNode } from 'liquor-tree';
-import { INode } from './../../Node/INode';
+import { INode } from '../../Node/INode';
 
 // Functions to translate INode to LiqourTree models and vice versa for anti-corruption
 

src/presentation/components/Scripts/View/TheScriptsView.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="scripts">
         <div v-if="!isSearching">
-            <CardList v-if="grouping === Grouping.Cards"/>
-            <div class="tree" v-if="grouping === Grouping.None">
+            <CardList v-if="currentView === ViewType.Cards"/>
+            <div class="tree" v-else-if="currentView === ViewType.Tree">
                 <ScriptsTree />
             </div>
         </div>
@@ -29,12 +29,12 @@
 </template>
 
 <script lang="ts">
-import TheGrouper from '@/presentation/components/Scripts/Menu/Grouping/TheGrouper.vue';
-import ScriptsTree from '@/presentation/components/Scripts/ScriptsTree/ScriptsTree.vue';
-import CardList from '@/presentation/components/Scripts/Cards/CardList.vue';
+import TheGrouper from '@/presentation/components/Scripts/Menu/View/TheViewChanger.vue';
+import ScriptsTree from '@/presentation/components/Scripts/View/ScriptsTree/ScriptsTree.vue';
+import CardList from '@/presentation/components/Scripts/View/Cards/CardList.vue';
 import { Component, Prop } from 'vue-property-decorator';
 import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
-import { Grouping } from '@/presentation/components/Scripts/Menu/Grouping/Grouping';
+import { ViewType } from '@/presentation/components/Scripts/Menu/View/ViewType';
 import { IFilterResult } from '@/application/Context/State/Filter/IFilterResult';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import { ApplicationFactory } from '@/application/ApplicationFactory';
@@ -56,14 +56,13 @@ filters: {
     },
 },
 })
-export default class TheScriptsList extends StatefulVue {
-    @Prop() public grouping: Grouping;
-
+export default class TheScriptsView extends StatefulVue {
     public repositoryUrl = '';
-    public Grouping = Grouping; // Make it accessible from the view
     public searchQuery = '';
     public isSearching = false;
     public searchHasMatches = false;
+    @Prop() public currentView: ViewType;
+    public ViewType = ViewType; // Make it accessible from the view
 
     public async created() {
         const app = await ApplicationFactory.Current.getAppAsync();