🎉 Added support for selection mode.

Author: geekhybrid

src/businessLogic/contracts/types.ts

@@ -14,14 +14,23 @@ export interface ItemTypeCustomisations {
 
 export interface TreeViewCreatedEventPayload {
     itemCustomisations: ItemTypeCustomisations;
-    eventManager: EventManager
+    eventManager: EventManager;
 }
 
 export interface EventManager {
     subscribeToItemChecked(type: string, callback: (item: TreeViewItem[]) => void): void;
     subscribeToItemUnchecked(type: string, callback: (item: TreeViewItem[]) => void): void;
 }
 
+export interface EventHub {
+    onItemChecked(item: TreeViewItem): void;
+    onItemUnChecked(item: TreeViewItem): void;
+    onFolderChecked(folder: TreeViewItem): void
+    onFolderUnChecked(folder: TreeViewItem): void;
+    setSelectionMode(mode: string): void;
+    readonly selectedItems: TreeViewItem[];
+}
+
 export interface TreeViewViewModel  {
     loadNodes(nodes: TreeViewItem[]): void;
     getNodes(): { [id: string]: TreeViewItem };
@@ -32,6 +41,7 @@ export interface TreeViewViewModel  {
     checkedStatusChanged(item: TreeViewItem): void;
     setSelectionMode(mode: SelectionMode): void;
     selectedItems: TreeViewItem[];
+    readonly selectedItems: TreeViewItem[];
 }
 
 export interface Customisations {

src/businessLogic/eventHub/explorerEventPublisher.ts

@@ -1,28 +1,28 @@
-import { EventManager, TreeViewItem } from "../contracts/types"
+import { EventHub, EventManager, SelectionMode, TreeViewItem } from "../contracts/types"
 import { findChildrenOfType } from "../hierachyTraversal/hierachyTraversal";
 
-const onCheckedSubscribers: {[type: string]: ((items: TreeViewItem[]) => void)[] } = {}
-const onUnCheckedSubscribers: {[type: string]: ((items: TreeViewItem[]) => void)[] } = {}
-
+let selectedItems: TreeViewItem[] = [];
 export const eventManager: EventManager = {
     // Add subscriber for item hecked to collection of subscribers
     subscribeToItemChecked(type: string, callback: (item: TreeViewItem[]) => void): void {
         onCheckedSubscribers[type] = onCheckedSubscribers[type] ?? [];
-
         onCheckedSubscribers[type].push(callback);
     },
 
     // Add subscriber for item unchecked to collection of subscribers
     subscribeToItemUnchecked(type: string, callback: (item: TreeViewItem[]) => void): void {
         onUnCheckedSubscribers[type] = onUnCheckedSubscribers[type] ?? [];
-
         onUnCheckedSubscribers[type].push(callback);
     },
 }
 
-export const eventHub = {    
+export const eventHub: EventHub = {    
     // Publish events if any subscriber listening for item checked
     onItemChecked(item: TreeViewItem): void {
+        if (selectionMode == 'Single') RemovePreviousSelectedItems();
+
+        selectedItems.push(item);
+
         if (item.type == 'folder') {
             this.onFolderChecked(item);
         } else {
@@ -35,15 +35,20 @@ export const eventHub = {
 
     // Publish events if any subscriber listening for item unchecked
     onItemUnChecked(item: TreeViewItem): void {
+        remove(item, selectedItems);
         const subscribers = onUnCheckedSubscribers[item.type.toString()];
         if (subscribers) {
             subscribers.forEach(callback => callback([item]));
         }
     },
 
     /// Premise: Whenever a folder is checked, it automatically checks all it's decendants.
-    /// Expected action: When a folder is checked, traverse it's tree to get see if any item has also been checked for which a listener needs to be updated
+    /// Expected action: When a folder is checked, traverse it's tree to get see if any item has also been checked 
+    //  for which a callback listener needs to be called
     onFolderChecked(folder: TreeViewItem): void {
+        if (selectionMode == 'Single') RemovePreviousSelectedItems();
+        selectedItems.push(folder);
+
         if (folder.type != 'folder') return;
 
         const itemTypesWithListeners = Object.keys(onCheckedSubscribers);
@@ -54,14 +59,38 @@ export const eventHub = {
     },
 
     /// Premise: Whenever a folder is checked, it automatically checks all it's decendants.
-    /// Expected action: When a folder is un-checked, traverse it's tree to get see if any item has also been checked for which a listener needs to be updated
+    /// Expected action: When a folder is un-checked, traverse it's tree to get see if any item
+    // has also been checked for which a listener needs to be called
     onFolderUnChecked(folder: TreeViewItem): void {
+        remove(folder, selectedItems);
         if (folder.type != 'folder') return;
 
         const itemTypesWithListeners = Object.keys(onUnCheckedSubscribers);
         itemTypesWithListeners.forEach(itemType => {
             const itemsToPublish = findChildrenOfType(folder, itemType);
             onUnCheckedSubscribers[itemType].forEach(subscriber => subscriber(itemsToPublish));
         });
-    }
+    },
+
+    setSelectionMode(mode: SelectionMode): void {
+        selectionMode = mode;
+    },
+
+    selectedItems
+}
+
+
+function RemovePreviousSelectedItems() {
+    selectedItems.forEach(item => item.checkedStatus = 'False');
+    selectedItems = [];
+}
+
+function remove(item: TreeViewItem, collection: TreeViewItem[]) {
+    const index = collection.indexOf(item);
+    if (index > -1) collection.splice(index, 1);
 }
+
+const onCheckedSubscribers: {[type: string]: ((items: TreeViewItem[]) => void)[] } = {};
+const onUnCheckedSubscribers: {[type: string]: ((items: TreeViewItem[]) => void)[] } = {};
+        
+let selectionMode: SelectionMode = 'Multiple';

src/components/treeView.vue/treeView.vue

@@ -43,6 +43,7 @@ import { eventManager } from '@/businessLogic/eventHub/explorerEventPublisher';
 export default class TreeView extends Vue {
     @Prop({ default: () => { return [] }}) treeViewItems!: TreeViewItem[];
     viewModel = TreeViewViewModel;
+    @Prop({ default: 'Multiple' }) selectionMode!: SelectionMode;
     itemCustomisations = ItemCustomisations;
 
     created(): void {
@@ -109,6 +110,7 @@ export default class TreeView extends Vue {
     }
 
     mounted(): void {
+        this.viewModel.setSelectionMode(this.selectionMode);
         const isRootNode = !('nested' in this.$attrs);
         if (isRootNode) {
             this.viewModel.loadNodes(this.treeViewItems);
@@ -124,6 +126,11 @@ export default class TreeView extends Vue {
         target.classList.toggle('rotate-90');
         element[0].classList.toggle('hide');
     }
+
+    @Watch("selectionMode")
+    onSelectionModeChanged(newMode: SelectionMode): void {
+        this.viewModel.setSelectionMode(newMode);
+    }
 }
 </script>