Skip to content

Commit

Permalink
added VTreeview component for menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@markgrahamdawson
markgrahamdawson committed Aug 16, 2024
1 parent d9dad7f commit e45ccec
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 53 deletions.
44 changes: 17 additions & 27 deletions src/components/cylc/ViewToolbar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,28 +41,18 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<v-tooltip>{{ iControl.title }}</v-tooltip>
</v-btn>
</template >
<v-list>
<v-list-item
v-for="(item, index) in iControl.items"
:key="index"
:value="index"
>
<template v-slot:prepend="{ isActive }">
<v-list-item-action>
<v-checkbox
v-model="selectedItems[iControl.key]"
v-on:update:modelValue="iControl.callback"
:value="item"
:disabled="iControl.config ? iControl.config[getNameFromIndex(iControl.config, item).id].disabled : false"
:indeterminate="iControl.config ? iControl.config[getNameFromIndex(iControl.config, item).id].disabled : false"
:class="`pl-${iControl.config ? iControl.config[getNameFromIndex(iControl.config, item).id].spacing : 0}`"
/>
{{`pl-${iControl.config ? iControl.config[getNameFromIndex(iControl.config, item).id].spacing : 0}`}}
</v-list-item-action>
</template>
<v-list-item-title>{{ item }}</v-list-item-title>
</v-list-item>
</v-list>
<v-treeview
v-model:selected="selectedItems[iControl.key]"
v-on:update:selected="iControl.callback"
:items="iControl.items"
select-strategy='independent'
item-title="name"
item-value="name"
item-props
selectable
return-object
open-all
></v-treeview>
</v-menu>
<v-btn v-else
v-bind="btnProps"
Expand All @@ -80,10 +70,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.

<script>
import { btnProps } from '@/utils/viewToolbar'
import { VTreeview } from 'vuetify/labs/VTreeview'
export default {
name: 'ViewToolbar',
components: {
VTreeview,
},
emits: [
'setOption'
],
Expand Down Expand Up @@ -246,11 +241,6 @@ export default {
}
return vars
},
getNameFromIndex (config, name) {
return Object.values(config).find((object) => {
return object.name === name
})
}
}
}
</script>
Expand Down
68 changes: 42 additions & 26 deletions src/views/Graph.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<script>
import gql from 'graphql-tag'
import { mapGetters, mapState } from 'vuex'
import { getPageTitle } from '@/utils/index'
import { useJobTheme } from '@/composables/localStorage'
import graphqlMixin from '@/mixins/graphql'
import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
Expand Down Expand Up @@ -359,6 +358,44 @@ export default {
data () {
return {
testTreeDropDown: [
{
id: 1,
name: 'GET_OBSERVATIONS',
children: [
{
id: 2,
name: 'GET_OBSERVATIONS_NORTH',
},
{
id: 3,
name: 'GET_OBSERVATIONS_SOUTH',
disabled: true
}]
}
],
testTreeDropDownCycle: [
{
id: 1,
name: '20240816T2100Z',
},
{
id: 2,
name: '20240816T1200Z',
},
{
id: 3,
name: '20240816T0900Z',
},
{
id: 4,
name: '20240816T0600Z',
},
{
id: 5,
name: '20240816T0300Z',
}
],
// the graph orientation
orientation: 'TB',
// the auto-refresh timer
Expand Down Expand Up @@ -402,12 +439,6 @@ export default {
// Calculate some values for familes that we need for the toolbar
Object.keys(this.cylcTree.$index).forEach((itemName) => {
// Function for counting how many layers deep the children go
function count (children) {
return children.reduce((depth, child) => {
return Math.max(depth, 1 + count(child.children)) // increment depth of children by 1, and compare it with accumulated depth of other children within the same element
}, 0) // default value 0 that's returned if there are no children
}
// Function for getting a flattened array of the nested children
function childArray (a) {
return a.reduce(function (flattened, { id, name, children }) {
Expand All @@ -421,20 +452,9 @@ export default {
id: itemName,
name: itemValue.name,
allChildren: childArray([itemValue]),
depth: count([itemValue]),
disabled: false,
}
})
// Get the maximum depth value
const maxDepth = Object.values(this.collapseFamilyConfig)[0].depth
Object.keys(this.collapseFamilyConfig).forEach((key) => {
const spacingUnit = 5
const depth = this.collapseFamilyConfig[key].depth
this.collapseFamilyConfig[key].spacing = (maxDepth * spacingUnit) - (depth * spacingUnit)
})
// const maxDepth = Object.values(this.collapseFamilyConfig).sort((a, b) => {
// b.amount - a.amount
// })[0]
},
beforeUnmount () {
Expand Down Expand Up @@ -519,24 +539,24 @@ export default {
action: 'select',
value: this.groupFamily,
key: 'groupFamily',
items: this.groupFamilyArrayStore,
items: this.testTreeDropDown,
},
{
title: 'Collapse by cycle point',
icon: mdiAlphaCCircle,
action: 'select',
value: this.collapseCycle,
key: 'collapseCycle',
items: this.collapseCycleArrayStore.filter(c => c !== this.latestCycle)
items: this.testTreeDropDownCycle
// items: this.collapseCycleArrayStore.filter(c => c !== this.latestCycle)
},
{
title: 'Collapse by family',
icon: mdiAlphaFCircle,
action: 'select',
value: this.collapseFamily,
key: 'collapseFamily',
items: this.collapseFamilyArrayStore,
config: this.collapseFamilyConfig
items: this.testTreeDropDown,
}
]
}
Expand Down Expand Up @@ -833,7 +853,6 @@ export default {
})
},
addSubgraph (dotcode, pointer, graphSections) {
let depth = 0
pointer.children.forEach((key, i) => {
const value = key
const children = this.collapseFamilyConfig[value.id].allChildren
Expand Down Expand Up @@ -879,7 +898,6 @@ export default {
}
if (value) {
depth += 1
this.addSubgraph(dotcode, value, graphSections)
}
if (Object.keys(graphSections).includes(key)) {
Expand Down Expand Up @@ -952,8 +970,6 @@ export default {
const graphSections = {}
Object.keys(cycles).forEach((cycle, iCycle) => {
console.log('CYCLE')
console.log(cycle)
const indexSearch = Object.values(this.cylcTree.$index).filter((node) => {
return node.tokens.cycle === cycle
})
Expand Down

0 comments on commit e45ccec

Please sign in to comment.