✨ Added Support for making items of type checkable

Author: geekhybrid

src/App.vue

@@ -1,20 +1,28 @@
 <template>
-  <tree-view :treeViewItems="treeViewNodes">
+  <tree-view :treeViewItems="treeViewNodes" @created="customiseTreeView">
       <template v-slot:icon="treeViewItem">
           <img src="@/assets/folder.svg" alt="folder" v-if="treeViewItem.type === 'folder'" >
-          <img src="@/assets/word.png" alt="vue-logo" v-else-if="treeViewItem.type === '.doc'" height="22" width="22">
-          <img src="@/assets/excel.png" alt="vue-logo" v-else-if="treeViewItem.type === '.excel'" height="22" width="22">
+          <img src="@/assets/word.svg" alt="vue-logo" v-else-if="treeViewItem.type === '.doc'" height="18" width="18">
+          <img src="@/assets/excel.svg" alt="vue-logo" v-else-if="treeViewItem.type === '.excel'" height="18" width="18">
+          <img src="@/assets/playlist.svg" alt="vue-logo" v-else-if="treeViewItem.type === 'media'" height="18" width="18">
       </template>
   </tree-view>
 </template>
 
 <script lang='ts'>
 import { Vue, Component} from 'vue-property-decorator';
 
-import { TreeViewItem } from '@/businessLogic/contracts/types';
+import { TreeViewCreatedEventPayload, TreeViewItem } from '@/businessLogic/contracts/types';
 
 @Component
 export default class App extends Vue {
+
+  customiseTreeView(treeCreatedEvent: TreeViewCreatedEventPayload) {
+    const customisations = treeCreatedEvent.itemCustomisations;
+    
+    customisations.makeItemsCheckable([".doc", ".excel", "media" ]);
+  }
+
   treeViewNodes: TreeViewItem[] = [
     {
       name: 'Desktop',
@@ -75,14 +83,14 @@ export default class App extends Vue {
           children: [
             {
               name: 'Pictures',
-              type: 'docs',
+              type: 'media',
               id: '1203-29f3-1hdklsjdl-93',
               parentId: '1203-39029f3-1hdklsjdl-93',
               checkedStatus: 'False',
             },
             {
               name: 'Videos',
-              type: 'docs',
+              type: 'media',
               id: '1203-29fbb3-1hdklsjdl-93',
               parentId: '1203-39029f3-1hdklsjdl-93',
               checkedStatus: 'False',
@@ -91,7 +99,7 @@ export default class App extends Vue {
         },
         {
           name: 'Repositories',
-          type: 'custom-file',
+          type: 'code',
           id: '1203-39b293-1hdklsjdl-93',
           parentId: '1203-390293-1hfdkl-903923',
           checkedStatus: 'False'

src/businessLogic/contracts/types.ts

@@ -13,7 +13,7 @@ export interface ItemTypeCustomisations {
 }
 
 export interface TreeViewCreatedEventPayload {
-    itemCustomisations: 
+    itemCustomisations: ItemTypeCustomisations;
 }
 
 export interface Customisations {

src/components/treeView.vue/treeView.spec.ts

@@ -0,0 +1,16 @@
+import { TreeViewCreatedEventPayload } from "@/businessLogic/contracts/types";
+import { mount } from "@vue/test-utils";
+import TreeView from "./treeView.vue";
+
+
+describe("treeview.vue", () => {
+    it("onCreated should emit events customisation payload", () => {
+        const treeView = mount(TreeView);
+
+        const emittedEvent = treeView.emitted().created;
+        if (!emittedEvent) fail("Did not emit created event");
+
+        const payload = emittedEvent[0][0] as TreeViewCreatedEventPayload;
+        expect(payload.itemCustomisations).not.toBe(undefined);
+    })
+});

src/components/treeView.vue/treeView.vue

@@ -16,8 +16,8 @@
                         <img src="@/assets/folder.svg" alt="folder" v-if="treeViewItem.type.toLowerCase() == 'folder'">
                     </slot>
                 </div>
-                <treeview-item :item="treeViewItem" :treeViewModel="viewModel" @changed="updateItemCheckedStatus"/>
-                <span class="node-name cursor">{{ treeViewItem.name }}</span>
+                <treeview-item :item="treeViewItem" :treeViewModel="viewModel" @changed="updateItemCheckedStatus"
+                               :customisations="getItemCustomisation(treeViewItem.type)" />
             </div>
 
             <div class="node-child hide">
@@ -35,12 +35,26 @@
 <script lang='ts'>
 import {Vue, Component, Prop} from 'vue-property-decorator';
 import { TreeViewViewModel } from '@/businessLogic/treviewViewModel/treeViewViewModel'
-import { CheckedState, ItemCheckedChangedEvent, TreeViewItem } from '@/businessLogic/contracts/types';
+import { CheckedState, Customisations, ItemCheckedChangedEvent, TreeViewCreatedEventPayload, TreeViewItem } from '@/businessLogic/contracts/types';
+import { ItemCustomisations } from "@/businessLogic/itemCustomisations/itemCustomisations";
 
 @Component
 export default class TreeView extends Vue {
     @Prop({ default: () => { return [] }}) treeViewItems!: TreeViewItem[];
     viewModel = TreeViewViewModel;
+    itemCustomisations = ItemCustomisations;
+
+    created(): void {
+        const payload: TreeViewCreatedEventPayload = {
+            itemCustomisations: this.itemCustomisations
+        };
+
+        this.$emit("created", payload);
+    }
+
+    getItemCustomisation(type: string): Customisations {
+        return this.itemCustomisations.typeCustomisations()[type];
+    }
 
     updateItemCheckedStatus(checkedEvent: ItemCheckedChangedEvent): void {
         const { item, status } = checkedEvent;

src/components/treeViewItem/treeViewItemView.vue

@@ -1,16 +1,22 @@
 <template>
-    <div>    
-        <input @contextmenu.prevent
-            @change="updateCheckState"
-            type="checkbox"
-            ref="checkbox"
-            v-model="isChecked" />
+    <div>
+        <div v-if="isCheckable">
+            <input @contextmenu.prevent
+                @change="updateCheckState"
+                type="checkbox"
+                ref="checkbox"
+                v-model="isChecked" />    
+            <label for="checkbox" >{{ item.name }}</label>
+        </div>
+
+        <span v-else>{{item.name}}</span>
+
     </div>
 </template>
 
 <script lang='ts'>
 import { TreeViewViewModel } from '@/businessLogic/treviewViewModel/treeViewViewModel';
-import { ItemCheckedChangedEvent, TreeViewItem } from '@/businessLogic/contracts/types';
+import { Customisations, ItemCheckedChangedEvent, TreeViewItem } from '@/businessLogic/contracts/types';
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
 import VueTippy, { TippyComponent } from "vue-tippy";
 import "tippy.js/themes/light.css";
@@ -22,8 +28,13 @@ Vue.component("tippy", TippyComponent);
 export default class TreeViewItemView extends Vue {
     @Prop() item!: TreeViewItem;
     @Prop() treeViewModel!: TreeViewViewModel;
+    @Prop() customisations!: Customisations
     isChecked = false;
 
+    get isCheckable(): boolean {
+        return this.customisations && this.customisations.isCheckable == true;
+    }
+
     updateCheckState(): void {
         const event: ItemCheckedChangedEvent = { item: this.item, status: this.isChecked ? 'True' : 'False' };
         this.$emit('changed', event);