ボタンクリックイベント対応

frontend/src/components/left/EventTree.vue

@@ -2,13 +2,14 @@
   <!-- <div class="q-pa-md q-gutter-sm"> -->
     <q-tree
       :nodes="store.eventTree.screens"
-      node-key="label"
+      node-key="eventId"
       children-key="events"
       no-connectors
       v-model:expanded="store.expandedScreen"
       :dense="true"
+      :ref="tree"
     >
-      <template v-slot:default-header="prop">
+      <template v-slot:header-EVENT="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"
@@ -16,27 +17,78 @@
                   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>
+          <q-space></q-space>
+          <!-- <q-icon v-if="prop.node.hasFlow" name="delete" color="negative" size="16px" class="q-mr-sm"></q-icon> -->
+        </div>
+      </template>
+      <template v-slot:header-CHANGE="prop" >
+        <div class="row col items-start no-wrap event-node" >
+          <div class="no-wrap">{{ prop.node.label }}</div>
+          <q-space></q-space>
+          <q-icon name="add_circle" color="primary" size="16px" class="q-mr-sm" @click="addChangeEvent(prop.node)"></q-icon>
         </div>
       </template>
     </q-tree>
-  <!-- </div> -->
+    <show-dialog v-model:visible="showDialog" name="フィールド選択" @close="closeDg" widht="400px">
+      <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
+    </show-dialog>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed, ref } from 'vue';
-import { IKintoneEvent } from '../../types/KintoneEvents';
+import { IKintoneEvent ,IKintoneEventGroup, IKintoneEventNode, kintoneEvent} from '../../types/KintoneEvents';
 import { storeToRefs } from 'pinia';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { ActionFlow, ActionNode, RootAction } from 'src/types/ActionTypes';
+import ShowDialog from '../ShowDialog.vue';
+import FieldSelect from '../FieldSelect.vue';
+import { QTree } from 'quasar';
 export default defineComponent({
   name: 'EventTree',
+  components: {
+    ShowDialog,
+    FieldSelect,
+  },
   setup(props, context) {
+    const appDg = ref();
     const store = useFlowEditorStore();
+    const showDialog = ref(false);
+    const tree = ref<QTree>();
     // const eventTree=ref(kintoneEvents);
     // const selectedFlow = store.currentFlow;
 
     // const expanded=ref();
     const selectedEvent = ref<IKintoneEvent|null>(null);
+    const selectedChangeEvent=ref<IKintoneEventGroup|null>(null);
+    const isFieldChange = (node:IKintoneEventNode)=>{
+      return node.header=='EVENT' && node.eventId.indexOf(".change.")>-1;
+    }
+    //フィールド値変更イベント追加
+    const closeDg = (val:string) => {
+      if (val == 'OK') {
+        if(!selectedChangeEvent.value){return;}
+        const field = appDg.value.selected[0];
+        const eventid = `${selectedChangeEvent.value.eventId}.${field.code}`;
+        if(store.eventTree.findEventById(eventid)){
+          return;
+        }
+        selectedChangeEvent.value?.events.push(
+          new kintoneEvent(
+            field.label,
+            eventid,
+            selectedChangeEvent.value.eventId)
+        );
+        tree.value?.expanded?.push(selectedChangeEvent.value.eventId);
+        tree.value?.expandAll();
+      }
+    };
+    const addChangeEvent=(node:IKintoneEventGroup)=>{
+      if(store.appInfo===undefined){
+          return;
+      }
+      selectedChangeEvent.value=node;
+      showDialog.value=true;
+    }
     const onSelected=(node:IKintoneEvent)=>{
         if(!node.eventId){
           return;
@@ -45,24 +97,35 @@ export default defineComponent({
         if(store.appInfo===undefined){
           return;
         }
-        const screen = store.eventTree.findScreen(node.eventId);
+        const screen = store.eventTree.findEventById(node.parentId);
         let flow =store.findFlowByEventId(node.eventId);
-        const screenName=screen!==null?screen.label:"";
+        let screenName=screen!==null?screen.label:"";
+        let nodeLabel = node.label;
+        // if(isFieldChange(node)){
+        //   screenName=nodeLabel;
+        //   nodeLabel=`${node.label}の値を変更したとき`;
+        // }
         if(flow!==undefined && flow!==null ){
           store.selectFlow(flow);
         }else{
-          const root = new RootAction(node.eventId,screenName,node.label)
+          const root = new RootAction(node.eventId,screenName,nodeLabel)
             const flow =new ActionFlow(root);
             store.flows?.push(flow);
             store.selectFlow(flow);
             selectedEvent.value.flowData=flow;
         }
-    }
+    };
     return {
       // eventTree,
       // expanded,
+      appDg,
+      tree,
+      showDialog,
+      isFieldChange,
       onSelected,
       selectedEvent,
+      addChangeEvent,
+      closeDg,
       store
     }
   }
@@ -83,4 +146,6 @@ export default defineComponent({
 .event-node:hover{
   background-color: $light-blue-1;
 }
+
 </style>
+