73 lines
1.8 KiB
Vue
73 lines
1.8 KiB
Vue
<template>
|
|
<div class="q-pa-md q-gutter-sm">
|
|
<q-tree
|
|
:nodes="eventTree.screens"
|
|
node-key="label"
|
|
children-key="events"
|
|
no-connectors
|
|
v-model:expanded="expanded"
|
|
:dense="true"
|
|
>
|
|
<template v-slot:default-header="prop">
|
|
<div class="row col items-start no-wrap event-node" @click="onSelected(prop.node)">
|
|
<q-icon v-if="prop.node.eventId"
|
|
name="play_circle"
|
|
:color="prop.node.hasFlow?'green':'grey'"
|
|
size="16px" class="q-mr-sm">
|
|
</q-icon>
|
|
<div class="no-wrap" :class="selectedEvent && prop.node.eventId===selectedEvent.eventId?'selected-node':''">{{ prop.node.label }}</div>
|
|
</div>
|
|
</template>
|
|
</q-tree>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, computed, ref } from 'vue';
|
|
import { kintoneEvents,KintoneEvent } from '../../types/KintoneEvents';
|
|
import { storeToRefs } from 'pinia';
|
|
import { useFlowEditorStore } from 'stores/flowEditor';
|
|
export default defineComponent({
|
|
name: 'EventTree',
|
|
setup(props, context) {
|
|
const store = useFlowEditorStore();
|
|
const eventTree=ref(kintoneEvents);
|
|
const selectedFlow = store.currentFlow;
|
|
|
|
const expanded=ref([
|
|
selectedFlow?.getRoot()?.title
|
|
]);
|
|
const selectedEvent = ref<KintoneEvent|null>(null);
|
|
const onSelected=(node:KintoneEvent)=>{
|
|
if(!node.eventId){
|
|
return;
|
|
}
|
|
selectedEvent.value=node;
|
|
}
|
|
return {
|
|
eventTree,
|
|
expanded,
|
|
onSelected,
|
|
selectedEvent,
|
|
store
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
<style lang="scss">
|
|
.nowrap{
|
|
flex-wrap:nowarp;
|
|
text-wrap:nowarp;
|
|
}
|
|
.event-node{
|
|
cursor:pointer;
|
|
}
|
|
.selected-node{
|
|
color: $primary;
|
|
font-weight: bolder;
|
|
}
|
|
.event-node:hover{
|
|
background-color: $light-blue-1;
|
|
}
|
|
</style>
|