refactorings

src/global.d.ts

@@ -38,6 +38,18 @@ declare module 'liquor-tree' {
         data: ICustomLiquorTreeData;
     }
     
+    // https://amsik.github.io/liquor-tree/#Component-Options
+    export interface ILiquorTreeOptions {
+        multiple: boolean;
+        checkbox: boolean;
+        checkOnSelect: boolean;
+        autoCheckChildren: boolean;
+        parentSelect: boolean;
+        keyboardNavigation: boolean;
+        deletion: (node: ILiquorTreeExistingNode) => void;
+        filter: ILiquorTreeFilter;
+    }
+
     // https://github.com/amsik/liquor-tree/blob/master/src/lib/Node.js
     interface ILiquorTreeNodeState {
         checked: boolean;
@@ -58,7 +70,7 @@ declare module 'liquor-tree' {
     // https://github.com/amsik/liquor-tree/blob/master/src/components/TreeRoot.vue
     interface ILiquorTreeFilter {
         emptyText: string;
-        matcher(query: string, node: ILiquorTreeNewNode): boolean;
+        matcher(query: string, node: ILiquorTreeExistingNode): boolean;
     }
 
     const LiquorTree: PluginObject<any> & VueClass<any>;

src/presentation/Scripts/Cards/CardListItem.vue

@@ -52,7 +52,6 @@ export default class CardListItem extends StatefulVue {
     this.cardTitle = value ? await this.getCardTitleAsync(value) : undefined;
   }
 
-
   private async getCardTitleAsync(categoryId: number): Promise<string | undefined> {
       const state = await this.getCurrentStateAsync();
       const category = state.app.findCategory(this.categoryId);

src/presentation/Scripts/Grouping/TheGrouper.vue

@@ -20,15 +20,18 @@ import { StatefulVue } from '@/presentation/StatefulVue';
 import { IApplicationState } from '@/application/State/IApplicationState';
 import { Grouping } from './Grouping';
 
+const DefaultGrouping = Grouping.Cards;
+
 @Component
 export default class TheGrouper extends StatefulVue {
+
     public cardsSelected = false;
     public noneSelected = false;
 
     private currentGrouping: Grouping;
 
     public mounted() {
-        this.changeGrouping(Grouping.Cards);
+        this.changeGrouping(DefaultGrouping);
     }
 
     public groupByCard() {

src/presentation/Scripts/ScriptsTree/ScriptNodeParser.ts

@@ -1,22 +1,22 @@
-import { IApplicationState, IUserSelection } from '@/application/State/IApplicationState';
+import { IApplication } from './../../../domain/IApplication';
 import { ICategory, IScript } from '@/domain/ICategory';
 import { INode } from './SelectableTree/INode';
 
-export function parseAllCategories(state: IApplicationState): INode[] | undefined {
+export function parseAllCategories(app: IApplication): INode[] | undefined {
   const nodes = new Array<INode>();
-  for (const category of state.app.categories) {
+  for (const category of app.categories) {
-    const children = parseCategoryRecursively(category, state.selection);
+    const children = parseCategoryRecursively(category);
     nodes.push(convertCategoryToNode(category, children));
   }
   return nodes;
 }
 
-export function parseSingleCategory(categoryId: number, state: IApplicationState): INode[] | undefined {
+export function parseSingleCategory(categoryId: number, app: IApplication): INode[] | undefined {
-  const category = state.app.findCategory(categoryId);
+  const category = app.findCategory(categoryId);
   if (!category) {
     throw new Error(`Category with id ${categoryId} does not exist`);
   }
-  const tree = parseCategoryRecursively(category, state.selection);
+  const tree = parseCategoryRecursively(category);
   return tree;
 }
 
@@ -24,25 +24,23 @@ export function getScriptNodeId(script: IScript): string {
   return script.id;
 }
 export function getCategoryNodeId(category: ICategory): string {
-  return `${category.id}`;
+  return `Category${category.id}`;
 }
 
 function parseCategoryRecursively(
-  parentCategory: ICategory,
+  parentCategory: ICategory): INode[] {
-  selection: IUserSelection): INode[] {
   if (!parentCategory) { throw new Error('parentCategory is undefined'); }
-  if (!selection) { throw new Error('selection is undefined'); }
 
   const nodes = new Array<INode>();
   if (parentCategory.subCategories && parentCategory.subCategories.length > 0) {
     for (const subCategory of parentCategory.subCategories) {
-      const subCategoryNodes = parseCategoryRecursively(subCategory, selection);
+      const subCategoryNodes = parseCategoryRecursively(subCategory);
       nodes.push(convertCategoryToNode(subCategory, subCategoryNodes));
     }
   }
   if (parentCategory.scripts && parentCategory.scripts.length > 0) {
     for (const script of parentCategory.scripts) {
-      nodes.push(convertScriptToNode(script, selection));
+      nodes.push(convertScriptToNode(script));
     }
   }
   return nodes;
@@ -53,17 +51,15 @@ function convertCategoryToNode(
   return {
     id: getCategoryNodeId(category),
     text: category.name,
-    selected: false,
     children,
     documentationUrls: category.documentationUrls,
   };
 }
 
-function convertScriptToNode(script: IScript, selection: IUserSelection): INode {
+function convertScriptToNode(script: IScript): INode {
   return {
     id: getScriptNodeId(script),
     text: script.name,
-    selected: selection.isSelected(script),
     children: undefined,
     documentationUrls: script.documentationUrls,
   };

src/presentation/Scripts/ScriptsTree/ScriptsTree.vue

@@ -2,7 +2,7 @@
     <span id="container">
         <span v-if="nodes != null && nodes.length > 0">
             <SelectableTree 
-                :nodes="nodes"
+                :initialNodes="nodes"
                 :selectedNodeIds="selectedNodeIds"
                 :filterPredicate="filterPredicate"
                 :filterText="filterText"
@@ -20,7 +20,6 @@
   import { IRepository } from '@/infrastructure/Repository/IRepository';
   import { IScript } from '@/domain/IScript';
   import { ICategory } from '@/domain/ICategory';
-
   import { IApplicationState, IUserSelection } from '@/application/State/IApplicationState';
   import { IFilterResult } from '@/application/State/Filter/IFilterResult';
   import { parseAllCategories, parseSingleCategory, getScriptNodeId, getCategoryNodeId } from './ScriptNodeParser';
@@ -35,8 +34,8 @@
   export default class ScriptsTree extends StatefulVue {
     @Prop() public categoryId?: number;
 
-    public nodes?: INode[] = null;
+    public nodes?: ReadonlyArray<INode> = null;
-    public selectedNodeIds?: string[] = null;
+    public selectedNodeIds?: ReadonlyArray<string> = [];
     public filterText?: string = null;
 
     private filtered?: IFilterResult;
@@ -56,7 +55,7 @@
             return; // only interested in script nodes
         }
         const state = await this.getCurrentStateAsync();
-        if (node.selected) {
+        if (!this.selectedNodeIds.some((id) => id === node.id)) {
             state.selection.addSelectedScript(node.id);
         } else {
             state.selection.removeSelectedScript(node.id);
@@ -67,10 +66,12 @@
     public async initializeNodesAsync(categoryId?: number) {
       const state = await this.getCurrentStateAsync();
       if (categoryId) {
-        this.nodes = parseSingleCategory(categoryId, state);
+        this.nodes = parseSingleCategory(categoryId, state.app);
       } else {
-        this.nodes = parseAllCategories(state);
+        this.nodes = parseAllCategories(state.app);
       }
+      this.selectedNodeIds = state.selection.selectedScripts
+        .map((script) => getScriptNodeId(script));
     }
 
     public filterPredicate(node: INode): boolean {
@@ -80,8 +81,9 @@
           (category: ICategory) => node.id === getCategoryNodeId(category));
     }
 
-    private handleSelectionChanged(selectedScripts: ReadonlyArray<IScript>) {
+    private handleSelectionChanged(selectedScripts: ReadonlyArray<IScript>): void {
-      this.nodes = this.nodes.map((node: INode) => updateNodeSelection(node, selectedScripts));
+      this.selectedNodeIds = selectedScripts
+          .map((node) => node.id);
     }
 
     private handleFilterRemoved() {
@@ -94,16 +96,6 @@
     }
   }
 
-  function updateNodeSelection(node: INode, selectedScripts: ReadonlyArray<IScript>): INode {
-    return {
-      id: node.id,
-      text: node.text,
-      selected: selectedScripts.some((script) => script.id === node.id),
-      children: node.children ? node.children.map((child) => updateNodeSelection(child, selectedScripts)) : [],
-      documentationUrls: node.documentationUrls,
-      };
-  }
-
 </script>
 
 <style scoped lang="scss">

src/presentation/Scripts/ScriptsTree/SelectableTree/INode.ts

@@ -3,5 +3,4 @@ export interface INode {
     readonly text: string;
     readonly documentationUrls: ReadonlyArray<string>;
     readonly children?: ReadonlyArray<INode>;
-    readonly selected: boolean;
 }

src/presentation/Scripts/ScriptsTree/SelectableTree/Node.vue

@@ -7,7 +7,7 @@
             <a :href="url"
                 :alt="url"
                 target="_blank" class="docs"
-                  v-tooltip.top-center="url"
+                v-tooltip.top-center="url"
                 v-on:click.stop>
                 <font-awesome-icon :icon="['fas', 'info-circle']" />
                 </a>

src/presentation/Scripts/ScriptsTree/SelectableTree/NodeTranslator.ts

@@ -0,0 +1,32 @@
+import { ILiquorTreeNewNode, ILiquorTreeExistingNode } from 'liquor-tree';
+import { INode } from './INode';
+
+// Functions to translate INode to LiqourTree models and vice versa for anti-corruption
+
+export function convertExistingToNode(liquorTreeNode: ILiquorTreeExistingNode): INode {
+    if (!liquorTreeNode) { throw new Error('liquorTreeNode is undefined'); }
+    return {
+        id: liquorTreeNode.id,
+        text: liquorTreeNode.data.text,
+        // selected: liquorTreeNode.states && liquorTreeNode.states.checked,
+        children: (!liquorTreeNode.children || liquorTreeNode.children.length === 0)
+         ? [] : liquorTreeNode.children.map((childNode) => convertExistingToNode(childNode)),
+        documentationUrls: liquorTreeNode.data.documentationUrls,
+    };
+}
+
+export function toNewLiquorTreeNode(node: INode): ILiquorTreeNewNode {
+    if (!node) { throw new Error('node is undefined'); }
+    return {
+        id: node.id,
+        text: node.text,
+        state: {
+            checked: false,
+        },
+        children: (!node.children || node.children.length === 0) ? [] :
+         node.children.map((childNode) => toNewLiquorTreeNode(childNode)),
+        data: {
+            documentationUrls: node.documentationUrls,
+        },
+    };
+}

src/presentation/Scripts/ScriptsTree/SelectableTree/SelectableTree.vue

@@ -1,8 +1,8 @@
 <template>
     <span>
-        <span v-if="initialNodes != null && initialNodes.length > 0">
+        <span v-if="initialLiquourTreeNodes != null && initialLiquourTreeNodes.length > 0">
             <tree :options="liquorTreeOptions"
-                  :data="this.initialNodes"
+                  :data="initialLiquourTreeNodes"
                   v-on:node:checked="nodeSelected($event)"
                   v-on:node:unchecked="nodeSelected($event)"
                   ref="treeElement"
@@ -18,9 +18,10 @@
 
 <script lang="ts">
     import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator';
-    import LiquorTree, { ILiquorTreeNewNode, ILiquorTreeExistingNode, ILiquorTree } from 'liquor-tree';
+    import LiquorTree, { ILiquorTreeNewNode, ILiquorTreeExistingNode, ILiquorTree, ILiquorTreeOptions } from 'liquor-tree';
     import Node from './Node.vue';
     import { INode } from './INode';
+    import { convertExistingToNode, toNewLiquorTreeNode } from './NodeTranslator';
     export type FilterPredicate = (node: INode) => boolean;
 
     /** Wrapper for Liquor Tree, reveals only abstracted INode for communication */
@@ -33,28 +34,31 @@
     export default class SelectableTree extends Vue {
         @Prop() public filterPredicate?: FilterPredicate;
         @Prop() public filterText?: string;
-        @Prop() public nodes?: INode[];
+        @Prop() public selectedNodeIds?: ReadonlyArray<string>;
+        @Prop() public initialNodes?: ReadonlyArray<INode>;
 
-        public initialNodes?: ILiquorTreeNewNode[] = null;
+        public initialLiquourTreeNodes?: ILiquorTreeNewNode[] = null;
-        public liquorTreeOptions = this.getLiquorTreeOptions();
+        public liquorTreeOptions = DefaultOptions;
+        public convertExistingToNode = convertExistingToNode;
 
         public mounted() {
-            // console.log('Mounted', 'initial nodes', this.nodes);
+            if (this.initialNodes) {
-            // console.log('Mounted', 'initial model', this.getLiquorTreeApi().model);
+                const initialNodes = this.initialNodes.map((node) => toNewLiquorTreeNode(node));
-
+                if (this.selectedNodeIds) {
-            if (this.nodes) {
+                    recurseDown(initialNodes,
-                this.initialNodes = this.nodes.map((node) => this.toLiquorTreeNode(node));
+                        (node) => node.state.checked = this.selectedNodeIds.includes(node.id));
+                }
+                this.initialLiquourTreeNodes = initialNodes;
             } else {
                 throw new Error('Initial nodes are null or empty');
             }
-
             if (this.filterText) {
                this.updateFilterText(this.filterText);
             }
         }
 
         public nodeSelected(node: ILiquorTreeExistingNode) {
-            this.$emit('nodeSelected', this.convertExistingToNode(node));
+            this.$emit('nodeSelected', convertExistingToNode(node));
             return;
         }
 
@@ -64,104 +68,28 @@
             if (!filterText) {
                 api.clearFilter();
             } else {
-                api.filter('filtered'); // text does not matter, it'll trigger the predicate
+                api.filter('filtered'); // text does not matter, it'll trigger the filterPredicate
             }
         }
 
-        @Watch('nodes', {deep: true})
+        @Watch('selectedNodeIds')
-        public setSelectedStatus(nodes: |ReadonlyArray<INode>) {
+        public setSelectedStatus(selectedNodeIds: ReadonlyArray<string>) {
-            if (!nodes || nodes.length === 0) {
+            if (!selectedNodeIds) {
-                throw new Error('Updated nodes are null or empty');
+                throw new Error('Selected nodes are undefined');
             }
-            // Update old node properties, re-setting it changes expanded status etc.
+            const newNodes = updateCheckedState(this.getLiquorTreeApi().model, selectedNodeIds);
-            // It'll not be needed when this is merged: https://github.com/amsik/liquor-tree/pull/141
+            this.getLiquorTreeApi().setModel(newNodes);
-            const updateCheckedState = (
+            /*  Alternative:
-                oldNodes: ReadonlyArray<ILiquorTreeExistingNode>,
+                    this.getLiquorTreeApi().recurseDown((node) => {
-                updatedNodes: ReadonlyArray<INode>): ILiquorTreeNewNode[] => {
+                                node.states.checked = selectedNodeIds.includes(node.id);
-                    const newNodes = new Array<ILiquorTreeNewNode>();
+                            });
-                    for (const oldNode of oldNodes) {
+                Problem: Does not check their parent if all children are checked, because it does not
-                                for (const updatedNode of updatedNodes) {
+                        trigger update on parent as we work with scripts not categories. */
-                                    if (oldNode.id === updatedNode.id) {
+            /*  Alternative:
-                                        const newState = oldNode.states;
+                    this.getLiquorTreeApi().recurseDown((node) => {
-                                        newState.checked = updatedNode.selected;
+                            if(selectedNodeIds.includes(node.id)) { node.select(); } else { node.unselect(); }
-                                        newNodes.push({
+                    });
-                                            id: oldNode.id,
+                Problem: Emits nodeSelected() event again which will cause an infinite loop. */
-                                            text: updatedNode.text,
-                                            children: oldNode.children == null ? [] :
-                                                updateCheckedState(
-                                                    oldNode.children,
-                                                    updatedNode.children),
-                                            state: newState,
-                                            data: {
-                                                documentationUrls: oldNode.data.documentationUrls,
-                                            },
-                                        });
-                                    }
-                                }
-                            }
-                    return newNodes;
-            };
-            const newModel = updateCheckedState(
-                this.getLiquorTreeApi().model, nodes);
-            this.getLiquorTreeApi().setModel(newModel);
-        }
-
-        private convertItem(liquorTreeNode: ILiquorTreeNewNode): INode {
-            if (!liquorTreeNode) { throw new Error('liquorTreeNode is undefined'); }
-            return {
-                id: liquorTreeNode.id,
-                text: liquorTreeNode.text,
-                selected: liquorTreeNode.state && liquorTreeNode.state.checked,
-                children: (!liquorTreeNode.children || liquorTreeNode.children.length === 0)
-                 ? [] : liquorTreeNode.children.map((childNode) => this.convertItem(childNode)),
-                documentationUrls: liquorTreeNode.data.documentationUrls,
-            };
-        }
-
-        private convertExistingToNode(liquorTreeNode: ILiquorTreeExistingNode): INode {
-            if (!liquorTreeNode) { throw new Error('liquorTreeNode is undefined'); }
-            return {
-                id: liquorTreeNode.id,
-                text: liquorTreeNode.data.text,
-                selected: liquorTreeNode.states && liquorTreeNode.states.checked,
-                children: (!liquorTreeNode.children || liquorTreeNode.children.length === 0)
-                 ? [] : liquorTreeNode.children.map((childNode) => this.convertExistingToNode(childNode)),
-                documentationUrls: liquorTreeNode.data.documentationUrls,
-            };
-        }
-
-
-        private toLiquorTreeNode(node: INode): ILiquorTreeNewNode {
-            if (!node) { throw new Error('node is undefined'); }
-            return {
-                id: node.id,
-                text: node.text,
-                state: {
-                    checked: node.selected,
-                },
-                children: (!node.children || node.children.length === 0) ? [] :
-                 node.children.map((childNode) => this.toLiquorTreeNode(childNode)),
-                data: {
-                    documentationUrls: node.documentationUrls,
-                },
-            };
-        }
-
-        private getLiquorTreeOptions(): any {
-            return {
-                checkbox: true,
-                checkOnSelect: true,
-                deletion: (node) => !node.children || node.children.length === 0,
-                filter: {
-                    matcher: (query: string, node: ILiquorTreeExistingNode) => {
-                        if (!this.filterPredicate) {
-                            throw new Error('Cannot filter as predicate is null');
-                        }
-                        return this.filterPredicate(this.convertExistingToNode(node));
-                    },
-                    emptyText: '🕵️Hmm.. Can not see one 🧐',
-                },
-            };
         }
 
         private getLiquorTreeApi(): ILiquorTree {
@@ -172,6 +100,57 @@
         }
     }
 
+    function recurseDown(
+        nodes: ReadonlyArray<ILiquorTreeNewNode>,
+        handler: (node: ILiquorTreeNewNode) => void) {
+        for (const node of nodes) {
+            handler(node);
+            if (node.children) {
+                recurseDown(node.children, handler);
+            }
+        }
+    }
+
+    function updateCheckedState(
+        oldNodes: ReadonlyArray<ILiquorTreeExistingNode>,
+        selectedNodeIds: ReadonlyArray<string>): ReadonlyArray<ILiquorTreeNewNode> {
+        const result = new Array<ILiquorTreeNewNode>();
+        for (const oldNode of oldNodes) {
+            const newState = oldNode.states;
+            newState.checked = selectedNodeIds.some((id) => id === oldNode.id);
+            const newNode: ILiquorTreeNewNode = {
+                id: oldNode.id,
+                text: oldNode.data.text,
+                data: {
+                    documentationUrls: oldNode.data.documentationUrls,
+                },
+                children: oldNode.children == null ? [] :
+                        updateCheckedState(oldNode.children, selectedNodeIds),
+                state: newState,
+            };
+            result.push(newNode);
+        }
+        return result;
+    }
+
+    const DefaultOptions: ILiquorTreeOptions = {
+        multiple: true,
+        checkbox: true,
+        checkOnSelect: true,
+        autoCheckChildren: true,
+        parentSelect: false,
+        keyboardNavigation: true,
+        deletion: (node) => !node.children || node.children.length === 0,
+        filter: {
+            matcher: (query: string, node: ILiquorTreeExistingNode) => {
+                if (!this.filterPredicate) {
+                    throw new Error('Cannot filter as predicate is null');
+                }
+                return this.filterPredicate(convertExistingToNode(node));
+            },
+            emptyText: '🕵️Hmm.. Can not see one 🧐',
+        },
+    };
 </script>