Skip to content

Commit e64b9f0

Browse files
geekhybridgeekhybrid
committed
Updated demo application
1 parent 3428f81 commit e64b9f0

File tree

8 files changed

+190
-25
lines changed

8 files changed

+190
-25
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# wrfm-asset-explorer
1+
# wrfm-asset-TreeView
22

33
## Project setup
44
```

‎package-lock.json‎

Lines changed: 43 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "AssetExplorer",
2+
"name": "AssetTreeView",
33
"version": "0.1.0",
44
"private": true,
55
"scripts": {
@@ -12,11 +12,11 @@
1212
"axios": "^0.21.1",
1313
"bootstrap-vue": "^2.21.2",
1414
"core-js": "^3.6.5",
15-
"tippy.js": "^6.3.1",
1615
"vue": "^2.6.11",
1716
"vue-class-component": "^7.2.3",
1817
"vue-property-decorator": "^9.1.2",
1918
"vue-router": "^3.2.0",
19+
"vue-tippy": "^4.10.1",
2020
"vuex": "^3.4.0",
2121
"vuex-typescript": "^3.0.2"
2222
},

‎src/App.vue‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,20 @@ import { TreeViewItem, ItemTypes } from '@/businessLogic/contracts/types';
1313
export default class App extends Vue {
1414
treeViewNodes: TreeViewItem[] = [
1515
{
16-
name: 'OREDO Easte',
16+
name: 'Folder 1',
1717
id: '1203-390293-1hdklsjdl-903923',
1818
type: ItemTypes.Folder,
1919
checkedStatus: 'False',
2020
children: [
2121
{
22-
name: 'OREDO 001',
22+
name: 'Asset 1',
2323
id: '1203-390293-1hdklhsjdl-903923',
2424
type: ItemTypes.Lease,
2525
parentId: '1203-390293-1hdklsjdl-903923',
2626
checkedStatus: 'False',
2727
},
2828
{
29-
name: 'OREDO 002',
29+
name: 'Asset 2',
3030
id: '1203-1hdklsjdl-903923',
3131
type: ItemTypes.Lease,
3232
parentId: '1203-390293-1hdklsjdl-903923',
@@ -35,20 +35,20 @@ export default class App extends Vue {
3535
]
3636
},
3737
{
38-
name: 'ABURA East',
38+
name: 'Folder 2',
3939
type: ItemTypes.Folder,
4040
id: '1203-390293-1hdkl-903923',
4141
checkedStatus: 'False',
4242
children: [
4343
{
44-
name: 'ABURA',
44+
name: 'Asset-3',
4545
type: ItemTypes.Lease,
4646
id: '1203-390293-1hdklsjdl-93',
4747
parentId: '1203-390293-1hdkl-903923',
4848
checkedStatus: 'False'
4949
},
5050
{
51-
name: 'PEC-002',
51+
name: 'Asset-04',
5252
type: ItemTypes.Lease,
5353
id: '1203-39293-1hdklsjdl-93',
5454
parentId: '1203-390293-1hdkl-903923',
@@ -57,27 +57,27 @@ export default class App extends Vue {
5757
]
5858
},
5959
{
60-
name: 'Eastern Assets',
60+
name: 'C:/',
6161
type: ItemTypes.Folder,
6262
id: '1203-390293-1hfdkl-903923',
6363
checkedStatus: 'False',
6464
children: [
6565
{
66-
name: 'ABURA',
66+
name: 'Documents',
6767
type: ItemTypes.Folder,
6868
id: '1203-39029f3-1hdklsjdl-93',
6969
parentId: '1203-390293-1hfdkl-903923',
7070
checkedStatus: 'False',
7171
children: [
7272
{
73-
name: 'AB-01',
73+
name: 'Pictures',
7474
type: ItemTypes.Well,
7575
id: '1203-29f3-1hdklsjdl-93',
7676
parentId: '1203-39029f3-1hdklsjdl-93',
7777
checkedStatus: 'False',
7878
},
7979
{
80-
name: 'AB-02',
80+
name: 'Videos',
8181
type: ItemTypes.Well,
8282
id: '1203-29fbb3-1hdklsjdl-93',
8383
parentId: '1203-39029f3-1hdklsjdl-93',
@@ -86,7 +86,7 @@ export default class App extends Vue {
8686
]
8787
},
8888
{
89-
name: 'PECON',
89+
name: 'Repositories',
9090
type: ItemTypes.Lease,
9191
id: '1203-39b293-1hdklsjdl-93',
9292
parentId: '1203-390293-1hfdkl-903923',

‎src/components/treeView.vue/treeView.vue‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<template>
2+
<ul >
3+
<li v-for="treeViewItem in treeViewItems" :key="treeViewItem.id" :id="treeViewItem.id" >
4+
<div class="d-flex align-items-center">
5+
<span class="chevron-right" v-if="treeViewItem.children && treeViewItem.children.length > 0" @click="toggleVisiblity(treeViewItem.id, $event)"></span>
6+
<div class="icon-area">
7+
<img src="@/assets/folder.svg" alt="folder" v-if="treeViewItem.type === ItemType.Folder">
8+
</div>
9+
<treeview-item :item="treeViewItem" :treeViewModel="viewModel" @changed="updateItemCheckedStatus"/>
10+
<span class="node-name cursor">{{ treeViewItem.name }}</span>
11+
</div>
12+
13+
<div class="node-child hide">
14+
<tree-view :treeViewItems="treeViewItem.children"
15+
v-if="treeViewItem.children && treeViewItem.children.length > 0" />
16+
</div>
17+
</li>
18+
</ul>
19+
</template>
20+
21+
<script lang='ts'>
22+
import {Vue, Component, Prop} from 'vue-property-decorator';
23+
import { TreeViewViewModel } from '@/businessLogic/treviewViewModel/treeViewViewModel'
24+
import { CheckedState, ItemCheckedChangedEvent, ItemTypes, TreeViewItem } from '@/businessLogic/contracts/types';
25+
26+
@Component
27+
export default class TreeView extends Vue {
28+
@Prop({ default: () => { return [] }}) treeViewItems!: TreeViewItem[];
29+
viewModel = TreeViewViewModel;
30+
31+
get ItemType(): typeof ItemTypes {
32+
return ItemTypes
33+
}
34+
35+
updateItemCheckedStatus(checkedEvent: ItemCheckedChangedEvent): void {
36+
const { item, status } = checkedEvent;
37+
item.checkedStatus = status;
38+
}
39+
40+
mounted(): void {
41+
this.viewModel.loadNodes(this.treeViewItems);
42+
}
43+
44+
toggleVisiblity(nodeId: string, event: InputEvent): void {
45+
const element = document.getElementById(nodeId)?.getElementsByClassName('node-child');
46+
const target = event.target as HTMLInputElement;
47+
48+
if (!element) return;
49+
50+
target.classList.toggle('rotate-90');
51+
element[0].classList.toggle('hide');
52+
}
53+
}
54+
</script>
55+
56+
<style scoped lang="scss">
57+
ul {
58+
padding-left: 0;
59+
margin: 0;
60+
list-style-type: none;
61+
}
62+
63+
.chevron-right {
64+
color: gray;
65+
}
66+
67+
.icon-area {
68+
width: 16px;
69+
}
70+
71+
.node-name {
72+
cursor: pointer;
73+
margin-left: 5px;
74+
}
75+
76+
.node-child {
77+
margin-left: 32px !important;
78+
padding-left: 10px;
79+
border-left: 1px dashed rgb(192, 192, 192);
80+
display: block;
81+
}
82+
83+
.hide {
84+
display: none;
85+
}
86+
87+
.chevron-right {
88+
box-sizing: border-box;
89+
position: relative;
90+
display: block;
91+
transform: scale(var(--ggs,1));
92+
width: 22px;
93+
height: 22px;
94+
border: 2px solid transparent;
95+
border-radius: 100px;
96+
transition: .2s;
97+
98+
&.rotate-90 {
99+
transform: rotateZ(90deg);
100+
}
101+
}
102+
103+
.chevron-right::after {
104+
content: "";
105+
display: block;
106+
box-sizing: border-box;
107+
position: absolute;
108+
width: 7px;
109+
height: 7px;
110+
border-bottom: 2px solid;
111+
border-right: 2px solid;
112+
transform: rotate(-45deg);
113+
right: 6px;
114+
top: 4px
115+
}
116+
</style>

‎src/main.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import Vue from 'vue'
22
import App from './App.vue'
3-
4-
import 'tippy.js/dist/tippy.css';
53
import '@/styles/style.css';
64

7-
import ExplorerPlugin from './plugins/ExplorerPlugin';
5+
import TreeViewPlugin from './plugins/TreeViewPlugin';
86

97
Vue.config.productionTip = false
108

11-
Vue.use(ExplorerPlugin);
9+
Vue.use(TreeViewPlugin);
1210

1311
new Vue({
1412
render: h => h(App),

‎src/plugins/TreeViewPlugin.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { VueConstructor } from 'vue';
2+
3+
import TreeView from '@/components/treeView.vue/treeView.vue';
4+
import TreeViewItem from '@/components/treeViewItem/treeViewItemView.vue';
5+
6+
const TreeViewPlugin = {
7+
install(Vue: VueConstructor) {
8+
Vue.component('tree-view', TreeView);
9+
Vue.component('treeview-item', TreeViewItem);
10+
}
11+
}
12+
13+
export default TreeViewPlugin;

‎src/shims-vue.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,5 @@ declare module '*.vue' {
22
import Vue from 'vue'
33
export default Vue
44
}
5+
6+
declare module 'vue-tippy'

0 commit comments

Comments
 (0)