added ability to revert (#21)

src/presentation/Scripts/Cards/CardList.vue

@@ -18,7 +18,7 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import CardListItem from './CardListItem.vue';
-import { StatefulVue, IApplicationState } from '@/presentation/StatefulVue';
+import { StatefulVue } from '@/presentation/StatefulVue';
 import { ICategory } from '@/domain/ICategory';
 
 @Component({
@@ -32,7 +32,7 @@ export default class CardList extends StatefulVue {
 
   public async mounted() {
     const state = await this.getCurrentStateAsync();
-    this.setCategories(state.app.categories);
+    this.setCategories(state.app.actions);
     this.onOutsideOfActiveCardClicked(() => {
       this.activeCategoryId = null;
     });
@@ -52,7 +52,7 @@ export default class CardList extends StatefulVue {
         return;
       }
       const element = document.querySelector(`[data-category="${this.activeCategoryId}"]`);
-      if (!element.contains(event.target)) {
+      if (element && !element.contains(event.target)) {
         callback();
       }
     };

src/presentation/Scripts/ScriptsTree/ScriptNodeParser.ts

@@ -4,7 +4,7 @@ import { INode } from './SelectableTree/INode';
 
 export function parseAllCategories(app: IApplication): INode[] | undefined {
   const nodes = new Array<INode>();
-  for (const category of app.categories) {
+  for (const category of app.actions) {
     const children = parseCategoryRecursively(category);
     nodes.push(convertCategoryToNode(category, children));
   }
@@ -23,6 +23,7 @@ export function parseSingleCategory(categoryId: number, app: IApplication): INod
 export function getScriptNodeId(script: IScript): string {
   return script.id;
 }
+
 export function getCategoryNodeId(category: ICategory): string {
   return `Category${category.id}`;
 }
@@ -53,6 +54,7 @@ function convertCategoryToNode(
     text: category.name,
     children,
     documentationUrls: category.documentationUrls,
+    isReversible: false,
   };
 }
 
@@ -62,5 +64,6 @@ function convertScriptToNode(script: IScript): INode {
     text: script.name,
     children: undefined,
     documentationUrls: script.documentationUrls,
+    isReversible: script.canRevert(),
   };
 }

src/presentation/Scripts/ScriptsTree/ScriptsTree.vue

@@ -6,7 +6,9 @@
                 :selectedNodeIds="selectedNodeIds"
                 :filterPredicate="filterPredicate"
                 :filterText="filterText"
-                v-on:nodeSelected="checkNodeAsync($event)">
+                v-on:nodeSelected="toggleNodeSelectionAsync($event)"
+                v-on:nodeRevertToggled="handleNodeRevertToggleAsync($event)"
+                >
             </SelectableTree>
         </span>
         <span v-else>Nooo 😢</span>
@@ -25,6 +27,7 @@
   import { parseAllCategories, parseSingleCategory, getScriptNodeId, getCategoryNodeId } from './ScriptNodeParser';
   import SelectableTree, { FilterPredicate } from './SelectableTree/SelectableTree.vue';
   import { INode } from './SelectableTree/INode';
+  import { SelectedScript } from '@/application/State/Selection/SelectedScript';
 
   @Component({
     components: {
@@ -50,13 +53,13 @@
       await this.initializeNodesAsync(this.categoryId);
     }
 
-    public async checkNodeAsync(node: INode) {
+    public async toggleNodeSelectionAsync(node: INode) {
         if (node.children != null && node.children.length > 0) {
             return; // only interested in script nodes
         }
         const state = await this.getCurrentStateAsync();
         if (!this.selectedNodeIds.some((id) => id === node.id)) {
-            state.selection.addSelectedScript(node.id);
+            state.selection.addSelectedScript(node.id, false);
         } else {
             state.selection.removeSelectedScript(node.id);
         }
@@ -71,7 +74,7 @@
         this.nodes = parseAllCategories(state.app);
       }
       this.selectedNodeIds = state.selection.selectedScripts
-        .map((script) => getScriptNodeId(script));
+        .map((selected) => getScriptNodeId(selected.script));
     }
 
     public filterPredicate(node: INode): boolean {
@@ -81,7 +84,7 @@
           (category: ICategory) => node.id === getCategoryNodeId(category));
     }
 
-    private handleSelectionChanged(selectedScripts: ReadonlyArray<IScript>): void {
+    private handleSelectionChanged(selectedScripts: ReadonlyArray<SelectedScript>): void {
       this.selectedNodeIds = selectedScripts
           .map((node) => node.id);
     }

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

@@ -0,0 +1,46 @@
+<template>
+    <div class="documentationUrls">
+        <a v-for="url of this.documentationUrls"
+            v-bind:key="url"
+            :href="url"
+            :alt="url"
+            target="_blank" class="documentationUrl"
+            v-tooltip.top-center="url"
+            v-on:click.stop>
+            <font-awesome-icon :icon="['fas', 'info-circle']" />
+        </a>
+    </div>
+</template>
+
+
+<script lang="ts">
+    import { Component, Prop, Vue } from 'vue-property-decorator';
+    /** Wrapper for Liquor Tree, reveals only abstracted INode for communication */
+    @Component
+    export default class DocumentationUrls extends Vue {
+        @Prop() public documentationUrls: string[];
+    }
+</script>
+
+
+<style scoped lang="scss">
+@import "@/presentation/styles/colors.scss";
+.documentationUrls {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+}
+.documentationUrl {
+    display: flex;
+    color: $gray;
+    cursor: pointer;
+    vertical-align: middle;
+    &:hover {
+        color: $slate;
+    }
+    &:not(:first-child) {
+      margin-left: 0.1em;
+    }
+}
+</style>

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

@@ -1,6 +1,7 @@
 export interface INode {
     readonly id: string;
     readonly text: string;
+    readonly isReversible: boolean;
     readonly documentationUrls: ReadonlyArray<string>;
     readonly children?: ReadonlyArray<INode>;
 }

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

@@ -1,17 +1,14 @@
 <template>
     <div id="node">
-        <div>{{ this.data.text }}</div>
-        <div
-          v-for="url of this.data.documentationUrls"
-          v-bind:key="url">
-            <a :href="url"
-                :alt="url"
-                target="_blank" class="docs"
-                v-tooltip.top-center="url"
-                v-on:click.stop>
-                <font-awesome-icon :icon="['fas', 'info-circle']" />
-                </a>
-        </div>
+        <div class="item text">{{ this.data.text }}</div>
+        <RevertToggle
+          class="item"
+          v-if="data.isReversible"
+          :scriptId="data.id" />
+        <DocumentationUrls
+          class="item"
+          v-if="data.documentationUrls && data.documentationUrls.length > 0"
+          :documentationUrls="this.data.documentationUrls" />
     </div>
 </template>
 
@@ -19,8 +16,15 @@
 <script lang="ts">
     import { Component, Prop, Vue } from 'vue-property-decorator';
     import { INode } from './INode';
+    import RevertToggle from './RevertToggle.vue';
+    import DocumentationUrls from './DocumentationUrls.vue';
     /** Wrapper for Liquor Tree, reveals only abstracted INode for communication */
-    @Component
+    @Component({
+        components: {
+          RevertToggle,
+          DocumentationUrls,
+        },
+    })
     export default class Node extends Vue {
         @Prop() public data: INode;
     }
@@ -30,17 +34,15 @@
 <style scoped lang="scss">
 @import "@/presentation/styles/colors.scss";
 #node {
-  display:flex;
-  flex-direction: row;
+    display:flex;
+    flex-direction: row;
     flex-wrap: wrap;
-  .docs {
-    color: $gray;
-    cursor: pointer;
-    margin-left:5px;
-    &:hover {
-        color: $slate;
+    .text {
+      display: flex;
+      align-items: center;
+    }
+    .item:not(:first-child) {
+      margin-left: 5px;
     }
-  }
 }
-
 </style>

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

@@ -12,6 +12,7 @@ export function convertExistingToNode(liquorTreeNode: ILiquorTreeExistingNode):
         children: (!liquorTreeNode.children || liquorTreeNode.children.length === 0)
          ? [] : liquorTreeNode.children.map((childNode) => convertExistingToNode(childNode)),
         documentationUrls: liquorTreeNode.data.documentationUrls,
+        isReversible : liquorTreeNode.data.isReversible,
     };
 }
 
@@ -27,6 +28,7 @@ export function toNewLiquorTreeNode(node: INode): ILiquorTreeNewNode {
          node.children.map((childNode) => toNewLiquorTreeNode(childNode)),
         data: {
             documentationUrls: node.documentationUrls,
+            isReversible: node.isReversible,
         },
     };
 }

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

@@ -0,0 +1,141 @@
+<template>
+        <div class="checkbox-switch" >
+            <input type="checkbox" class="input-checkbox" 
+                v-model="isReverted"
+                @change="onRevertToggledAsync()" >
+            <div class="checkbox-animate">
+                <span class="checkbox-off">revert</span>
+                <span class="checkbox-on">revert</span>
+            </div>
+        </div>
+</template>
+
+
+<script lang="ts">
+    import { Component, Prop, Vue } from 'vue-property-decorator';
+    import { StatefulVue } from '@/presentation/StatefulVue';
+    import { INode } from './INode';
+    import { SelectedScript } from '@/application/State/Selection/SelectedScript';
+
+    @Component
+    export default class RevertToggle extends StatefulVue {
+        @Prop() public scriptId: string;
+        public isReverted = false;
+        public async mounted() {
+            const state = await this.getCurrentStateAsync();
+            state.selection.changed.on(this.handleSelectionChanged);
+        }
+        public async onRevertToggledAsync() {
+            const state = await this.getCurrentStateAsync();
+            state.selection.addOrUpdateSelectedScript(this.scriptId, this.isReverted);
+        }
+        private handleSelectionChanged(selectedScripts: ReadonlyArray<SelectedScript>): void {
+            const selectedScript = selectedScripts.find((script) => script.id === this.scriptId);
+            if (!selectedScript) {
+                this.isReverted = false;
+            } else {
+                this.isReverted = selectedScript.revert;
+            }
+        }
+    }
+</script>
+
+
+<style scoped lang="scss">
+@import "@/presentation/styles/colors.scss";
+$width: 85px;
+$height: 30px;
+// https://www.designlabthemes.com/css-toggle-switch/
+.checkbox-switch {
+    cursor: pointer;
+    display: inline-block;
+    overflow: hidden;
+    position: relative;
+    width: $width;
+    height: $height;
+    -webkit-border-radius: $height;
+    border-radius: $height;
+    line-height: $height;
+    font-size: $height / 2;
+    display: inline-block;
+
+    input.input-checkbox {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: $width;
+        height: $height;
+        padding: 0;
+        margin: 0;
+        opacity: 0;
+        z-index: 2;
+        cursor: pointer;
+    }
+
+    .checkbox-animate {
+        position: relative;
+        width: $width;
+        height: $height;
+        background-color: $gray;
+        -webkit-transition: background-color 0.25s ease-out 0s;
+        transition: background-color 0.25s ease-out 0s;
+
+        // Circle
+        &:before {
+            $circle-size: $height * 0.66;
+
+            content: "";
+            display: block;
+            position: absolute;
+            width: $circle-size;
+            height: $circle-size;
+            border-radius: $circle-size * 2;
+            -webkit-border-radius: $circle-size * 2;
+            background-color: $slate;
+            top: $height * 0.16;
+            left: $width * 0.05;
+            -webkit-transition: left 0.3s ease-out 0s;
+            transition: left 0.3s ease-out 0s;
+            z-index: 10;
+        }
+    }
+
+    input.input-checkbox:checked {
+        + .checkbox-animate {
+            background-color: $accent;
+        }
+        + .checkbox-animate:before {
+            left: ($width - $width/3.5);
+            background-color: $light-gray;
+        }
+        + .checkbox-animate .checkbox-off {
+            display: none;
+            opacity: 0;
+        }
+        + .checkbox-animate .checkbox-on {
+            display: block;
+            opacity: 1;
+        }
+    }
+
+    .checkbox-off, .checkbox-on {
+        float: left;
+        color: $white;
+        font-weight: 700;
+            -webkit-transition: all 0.3s ease-out 0s;
+        transition: all 0.3s ease-out 0s;
+    }
+
+    .checkbox-off {
+        margin-left: $width / 3;
+        opacity: 1;
+    }
+
+    .checkbox-on {
+        display: none;
+        float: right;
+        margin-right: $width / 3;
+        opacity: 0;
+    }
+}
+</style>

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

@@ -8,7 +8,7 @@
                   ref="treeElement"
                 >
                 <span class="tree-text" slot-scope="{ node }">
-                    <Node :data="convertExistingToNode(node)"/>
+                    <Node :data="convertExistingToNode(node)" />
                 </span>
             </tree>
         </span>
@@ -144,6 +144,7 @@
                 text: oldNode.data.text,
                 data: {
                     documentationUrls: oldNode.data.documentationUrls,
+                    isReversible: oldNode.data.isReversible,
                 },
                 children: oldNode.children == null ? [] :
                         updateCheckedState(oldNode.children, selectedNodeIds),
@@ -154,9 +155,3 @@
         return result;
     }
 </script>
-
-
-<style scoped lang="scss">
-@import "@/presentation/styles/colors.scss";
-
-</style>

src/presentation/Scripts/Selector/TheSelector.vue

@@ -32,7 +32,8 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 import { StatefulVue } from '@/presentation/StatefulVue';
 import SelectableOption from './SelectableOption.vue';
 import { IApplicationState } from '@/application/State/IApplicationState';
-import { IScript } from '@/domain/Script';
+import { IScript } from '@/domain/IScript';
+import { SelectedScript } from '../../../application/State/Selection/SelectedScript';
 
 @Component({
   components: {
@@ -79,12 +80,14 @@ export default class TheSelector extends StatefulVue {
     private updateSelections(state: IApplicationState) {
         this.isNoneSelected = state.selection.totalSelected === 0;
         this.isAllSelected = state.selection.totalSelected === state.app.totalScripts;
-        this.isRecommendedSelected = this.areSame(state.app.getRecommendedScripts(), state.selection.selectedScripts);
+        this.isRecommendedSelected = this.areAllRecommended(state.app.getRecommendedScripts(),
+            state.selection.selectedScripts);
     }
 
-    private areSame(scripts: ReadonlyArray<IScript>, other: ReadonlyArray<IScript>): boolean {
+    private areAllRecommended(scripts: ReadonlyArray<IScript>, other: ReadonlyArray<SelectedScript>): boolean {
+        other = other.filter((selected) => !(selected).revert);
         return (scripts.length === other.length) &&
-            scripts.every((script) => other.some((s) => s.id === script.id));
+            scripts.every((script) => other.some((selected) => selected.id === script.id));
     }
 }
 </script>