Skip to content

Commit 06c5c9b

Browse files
geekhybridgeekhybrid
committed
🎨 Moved all type contracts to types.ts.
1 parent 684804b commit 06c5c9b

File tree

4 files changed

+69
-35
lines changed

4 files changed

+69
-35
lines changed

‎src/businessLogic/contracts/types.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,18 @@ export interface EventManager {
2222
subscribeToItemUnchecked(type: string, callback: (item: TreeViewItem[]) => void): void;
2323
}
2424

25+
export interface TreeViewViewModel {
26+
loadNodes(nodes: TreeViewItem[]): void;
27+
getNodes(): { [id: string]: TreeViewItem };
28+
removeTreeViewItem(id: string): boolean;
29+
removeFromParentNode(itemToRemove: TreeViewItem): void;
30+
removeChildNodes(node: TreeViewItem): void;
31+
addTreeViewItem(TreeViewItem: TreeViewItem): void;
32+
checkedStatusChanged(item: TreeViewItem): void;
33+
setSelectionMode(mode: SelectionMode): void;
34+
selectedItems: TreeViewItem[];
35+
}
36+
2537
export interface Customisations {
2638
isCheckable?: boolean;
2739
}
@@ -31,4 +43,5 @@ export interface ItemCheckedChangedEvent {
3143
status: CheckedState
3244
}
3345

34-
export type CheckedState = 'True' | 'False' | 'Indeterminate';
46+
export type CheckedState = 'True' | 'False' | 'Indeterminate';
47+
export type SelectionMode = 'Single' | 'Multiple';

‎src/businessLogic/treviewViewModel/treeViewViewModel.spec.ts‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { TreeViewItem } from "../contracts/types";
2-
import { TreeViewViewModel } from "./treeViewViewModel";
2+
import { TreeViewModel } from "./treeViewViewModel";
33

4-
describe('TreeViewViewModel', () => {
4+
describe('TreeViewModel', () => {
55
const child1: TreeViewItem =
66
{
77
type: "w-file",
@@ -39,50 +39,60 @@ describe('TreeViewViewModel', () => {
3939
child1.checkedStatus = 'False';
4040
child2.checkedStatus = 'False';
4141
parentFolder.children = [ child1, child2 ]
42-
TreeViewViewModel.loadNodes([parentFolder]);
42+
TreeViewModel.loadNodes([parentFolder]);
43+
TreeViewModel.selectedItems = [];
4344
});
4445

4546
it('checkedStatusChanged() should set parentFolder to true if all children are checked', () => {
4647
child1.checkedStatus = 'True';
4748
child2.checkedStatus = 'True';
4849

49-
TreeViewViewModel.checkedStatusChanged(child1);
50+
TreeViewModel.checkedStatusChanged(child1);
5051
expect(parentFolder.checkedStatus).toBe('True');
5152
});
5253

5354
it('checkedStatusChanged() should set parentFolder to indeterminate if at least one of the children are unchecked', () => {
5455
child1.checkedStatus = 'True';
5556
child2.checkedStatus = 'False';
5657

57-
TreeViewViewModel.checkedStatusChanged(child2);
58+
TreeViewModel.checkedStatusChanged(child2);
5859
expect(parentFolder.checkedStatus).toBe('Indeterminate');
5960
});
6061

6162
it('notifyParentOfSelection() should set parentFolder to false if all children are unchecked', () => {
6263
child1.checkedStatus = 'False';
6364
child2.checkedStatus = 'False';
6465

65-
TreeViewViewModel.checkedStatusChanged(child2);
66+
TreeViewModel.checkedStatusChanged(child2);
67+
expect(TreeViewModel.selectedItems).toHaveLength(0);
68+
expect(parentFolder.checkedStatus).toBe('False');
69+
});
70+
71+
it('notifyParentOfSelection() should set parentFolder to True & add to selectedItems if any child is checked', () => {
72+
child1.checkedStatus = 'True';
73+
child2.checkedStatus = 'False';
74+
75+
TreeViewModel.checkedStatusChanged(child1);
76+
expect(TreeViewModel.selectedItems).toHaveLength(1);
6677
expect(parentFolder.checkedStatus).toBe('False');
6778
});
6879

6980
it('removeTreeViewItem() should remove nodes from flatenedLookup', () => {
70-
TreeViewViewModel.removeTreeViewItem(parentFolder.id);
81+
TreeViewModel.removeTreeViewItem(parentFolder.id);
7182
expect(parentFolder.children?.length).toBe(0);
72-
expect(TreeViewViewModel.getNodes()[parentFolder.id]).toBe(undefined);
83+
expect(TreeViewModel.getNodes()[parentFolder.id]).toBe(undefined);
7384
});
7485

7586
it('removeTreeViewItem() should remove one node from flatenedLookup', () => {
76-
TreeViewViewModel.removeTreeViewItem(child2.id);
87+
TreeViewModel.removeTreeViewItem(child2.id);
7788
expect(parentFolder.children?.length).toBe(1);
78-
const nodeIds = Object.keys(TreeViewViewModel.getNodes());
89+
const nodeIds = Object.keys(TreeViewModel.getNodes());
7990
expect(nodeIds.find(id=> id == child2.id)).toBe(undefined)
8091
});
8192

8293
it('addTreeViewItem() should add node to flatenedLookup', () => {
83-
TreeViewViewModel.addTreeViewItem(child3);
94+
TreeViewModel.addTreeViewItem(child3);
8495
expect(parentFolder.children?.length).toBe(3)
85-
expect(TreeViewViewModel.getNodes()[child3.id]).toBe(child3);
86-
96+
expect(TreeViewModel.getNodes()[child3.id]).toBe(child3);
8797
});
8898
})

‎src/businessLogic/treviewViewModel/treeViewViewModel.ts‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
1-
import { TreeViewItem, CheckedState } from "@/businessLogic/contracts/types";
1+
import { TreeViewItem, CheckedState, SelectionMode, TreeViewViewModel } from "@/businessLogic/contracts/types";
22
import { eventHub } from "@/businessLogic/eventHub/explorerEventPublisher";
33
import { cascadeStateToDescendants, flattenNodes } from "../hierachyTraversal/hierachyTraversal";
44

55
let flattenedNodesLookUp: { [id: string]: TreeViewItem } = {};
6-
export interface TreeViewViewModel {
7-
loadNodes(nodes: TreeViewItem[]): void;
8-
getNodes(): { [id: string]: TreeViewItem };
9-
removeTreeViewItem(id: string): boolean;
10-
removeFromParentNode(itemToRemove: TreeViewItem): void;
11-
removeChildNodes(node: TreeViewItem): void;
12-
addTreeViewItem(TreeViewItem: TreeViewItem): void;
13-
checkedStatusChanged(item: TreeViewItem): void;
14-
}
6+
let selectionMode: SelectionMode = 'Multiple';
7+
8+
// This stores the collection of selected items.
9+
// Selection could have been through 'Click-to-select' or done through
10+
// Checkbox `isChecked` property.
1511

12+
let selectedItems: TreeViewItem[] = [];
1613

1714
export const notifyParentOfSelection = (item: TreeViewItem): void => {
1815
const parentId = item.parentId as string;
@@ -29,6 +26,7 @@ export const notifyParentOfSelection = (item: TreeViewItem): void => {
2926

3027
if (isEveryChildChecked) {
3128
parent.checkedStatus = 'True';
29+
selectedItems.push(parent);
3230
}
3331
else if (isAnyIntermediate || (hasAnUncheckedChild && hasACheckedChild)) {
3432
parent.checkedStatus = 'Indeterminate';
@@ -39,7 +37,7 @@ export const notifyParentOfSelection = (item: TreeViewItem): void => {
3937
notifyParentOfSelection(parent);
4038
}
4139

42-
export const TreeViewViewModel: TreeViewViewModel = {
40+
export const TreeViewModel: TreeViewViewModel = {
4341
loadNodes(nodes: TreeViewItem[]): void {
4442
flattenedNodesLookUp = flattenNodes(nodes);
4543
},
@@ -49,10 +47,18 @@ export const TreeViewViewModel: TreeViewViewModel = {
4947
},
5048

5149
checkedStatusChanged(item: TreeViewItem): void {
52-
if (item.checkedStatus == 'True')
50+
if (item.checkedStatus == 'True')
51+
{
52+
selectedItems.push(item);
5353
eventHub.onItemChecked(item);
54-
else
54+
}
55+
else
56+
{
57+
const index = selectedItems.indexOf(item);
58+
if (index > -1) selectedItems.splice(index, 1);
59+
5560
eventHub.onItemUnChecked(item);
61+
}
5662

5763
cascadeStateToDescendants(item, item.checkedStatus as CheckedState);
5864
notifyParentOfSelection(item);
@@ -102,5 +108,16 @@ export const TreeViewViewModel: TreeViewViewModel = {
102108

103109
const parent = flattenedNodesLookUp[TreeViewItem.parentId]
104110
parent.children?.push(TreeViewItem);
105-
}
111+
},
112+
113+
setSelectionMode(mode: SelectionMode): void {
114+
selectionMode = mode;
115+
selectedItems.forEach(item => {
116+
item.checkedStatus = 'False';
117+
});
118+
119+
selectedItems = [];
120+
},
121+
122+
selectedItems
106123
}

‎src/components/treeViewItem/treeViewItemView.vue‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,8 @@
1515
</template>
1616

1717
<script lang='ts'>
18-
import { TreeViewViewModel } from '@/businessLogic/treviewViewModel/treeViewViewModel';
19-
import { Customisations, ItemCheckedChangedEvent, TreeViewItem } from '@/businessLogic/contracts/types';
18+
import { Customisations, ItemCheckedChangedEvent, TreeViewItem, TreeViewViewModel } from '@/businessLogic/contracts/types';
2019
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
21-
import VueTippy, { TippyComponent } from "vue-tippy";
22-
import "tippy.js/themes/light.css";
23-
24-
Vue.use(VueTippy);
25-
Vue.component("tippy", TippyComponent);
2620
2721
@Component
2822
export default class TreeViewItemView extends Vue {

0 commit comments

Comments
 (0)