保存ボタンクリック時にイベントを一括削除

frontend/src/components/left/EventTree.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script lang="ts">
-import { QTree, useQuasar } from 'quasar';
+import { QTree } from 'quasar';
 import { ActionFlow, RootAction } from 'src/types/ActionTypes';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { defineComponent, ref } from 'vue';
@@ -57,7 +57,6 @@ export default defineComponent({
     FieldSelect,
   },
   setup(props, context) {
-    const $q = useQuasar();
     const appDg = ref();
     const store = useFlowEditorStore();
     const showDialog = ref(false);
@@ -102,14 +101,10 @@ export default defineComponent({
       if (!node.eventId) {
         return;
       }
-      store.deleteEvent(node);
+      store.deleteStoreEventAndFlow(node);
       store.selectFlow(undefined)
+      console.log(store.selectedFlow);
       
-      $q.notify({
-        type: 'positive',
-        caption: "通知",
-        message: `イベント ${node.label} 削除`
-      })
     }
 
     const onSelected = (node: IKintoneEvent) => {

frontend/src/pages/FlowChart.vue

@@ -20,10 +20,9 @@
           </div>
         </q-drawer>
       </div>
-      <q-btn flat dense round
+      <q-btn flat dense round :icon="drawerLeft ? 'keyboard_double_arrow_left' : 'keyboard_double_arrow_right'"
-              :icon="drawerLeft?'keyboard_double_arrow_left':'keyboard_double_arrow_right'"
+        :style="[drawerLeft ? { 'left': '300px' } : { 'left': '0px' }]" @click="drawerLeft = !drawerLeft"
-              :style="[drawerLeft?{'left':'300px'}:{'left':'0px'}]"
+        class="expand" />
-              @click="drawerLeft=!drawerLeft" class="expand" />
       <div class="q-pa-md q-gutter-sm" :style="{ minWidth: minPanelWidth }">
         <div class="flowchart" v-if="store.currentFlow" :style="[drawerLeft ? { paddingLeft: '300px' } : {}]">
           <node-item v-if="rootNode !== undefined" :key="rootNode.id" :isSelected="rootNode === store.activeNode"
@@ -195,7 +194,22 @@ const onDeploy = async () => {
 
 const onSaveFlow = async () => {
   const targetFlow = store.selectedFlow;
+
+  const deleteFlows = () => {
+    $q.notify({
+      type: 'positive',
+      caption: "通知",
+      message: `削除 ${store.deleteFlowIds.length} イベント`
+    });
+    store.deletebackendFlow();
+  }
+
   if (targetFlow === undefined) {
+    if (store.deleteFlowIds.length > 0) {
+      deleteFlows();
+      return;
+    }
+
     $q.notify({
       type: 'negative',
       caption: "エラー",
@@ -204,6 +218,9 @@ const onSaveFlow = async () => {
     return;
   }
   try {
+    if (store.deleteFlowIds.length > 0) {
+      deleteFlows();
+    }
     saveLoading.value = true;
     await store.saveFlow(targetFlow);
     saveLoading.value = false;
@@ -265,6 +282,7 @@ onMounted(() => {
   top: 50px;
   z-index: 999;
 }
+
 .expand {
   position: fixed;
   left: 0px;

frontend/src/stores/flowEditor.ts

@@ -12,6 +12,7 @@ export interface FlowEditorState {
   eventTree: KintoneEventManager;
   selectedEvent: IKintoneEvent | undefined;
   expandedScreen: any[];
+  deleteFlowIds: string[];
 }
 const flowCtrl = new FlowCtrl();
 const eventTree = new KintoneEventManager();
@@ -25,6 +26,7 @@ export const useFlowEditorStore = defineStore('flowEditor', {
     eventTree: eventTree,
     selectedEvent: undefined,
     expandedScreen: [],
+    deleteFlowIds: [],
   }),
   getters: {
     /**
@@ -54,6 +56,11 @@ export const useFlowEditorStore = defineStore('flowEditor', {
       };
     },
 
+    findEventFrist(state) {
+      return () => {
+        return state.eventTree.findEventFrist();
+      };
+    },
   },
 
   actions: {
@@ -69,6 +76,12 @@ export const useFlowEditorStore = defineStore('flowEditor', {
     setApp(app: AppInfo) {
       this.appInfo = app;
     },
+    addDeleteFlowId(flowId: string) {
+      this.deleteFlowIds.push(flowId);
+    },
+    clearDeleteFlowIds() {
+      this.deleteFlowIds = [];
+    },
     /**
      * DBからフルーを保存する
      * @returns
@@ -112,15 +125,24 @@ export const useFlowEditorStore = defineStore('flowEditor', {
       }
     },
 
+    async deletebackendFlow() {
+      const deletePromises = Object.values(this.deleteFlowIds).map((flowId) =>
+        flowCtrl.DeleteFlow(flowId)
+      );
+      await Promise.all(deletePromises);
+      this.clearDeleteFlowIds();
+    },
 
-    deleteEvent(event: IKintoneEvent) {
+    deleteStoreEventAndFlow(event: IKintoneEvent) {
       const store = useFlowEditorStore();
       if (event.flowData) {
         const flow = event.flowData;
         if (flow.id === '') {
           return;
         }
-        flowCtrl.DeleteFlow(flow.id)
+        console.log('delete flow', flow);
+        
+        this.addDeleteFlowId(flow.id);
         eventTree.deleteEvent(event, store);
         if(this.flows){
           this.flows = this.flows.filter((f) => f.id !== flow.id);

frontend/src/types/KintoneEvents.ts

@@ -85,6 +85,7 @@ export class KintoneEventManager {
     this.screens = this.getKintoneEvents();
     for (const flow of flows) {
       const eventId = flow.getRoot()?.name;
+      console.log('eventId:', eventId);
       if (eventId !== undefined) {
         const eventNode = this.findEventById(eventId);
         if (eventNode !== null && eventNode.header === 'EVENT') {
@@ -100,6 +101,7 @@ export class KintoneEventManager {
             (eventNode.header === 'EVENTGROUP' || eventNode.header === 'CHANGE')
           ) {
             const groupEvent = eventNode as kintoneEventGroup;
+            console.log('label:', flow.getRoot()?.subTitle);
 
             const newEvent = {
               label: flow.getRoot()?.subTitle || '',
@@ -110,6 +112,11 @@ export class KintoneEventManager {
               flowData: flow,
             };
 
+            // new kintoneEvent(
+            // flow.getRoot()?.subTitle || '',
+            // eventId,
+            // groupEvent.parentId
+            // );
             groupEvent.events.push(newEvent);
           }
         }
@@ -117,6 +124,10 @@ export class KintoneEventManager {
     }
   }
 
+  public findEventFrist() {
+    return this.findEventById('app.record.create.show') as IKintoneEvent;
+  }
+
   public findEventById(eventId: string): IKintoneEventNode | null {
     const screen = this.findScreen(eventId);
     if (screen) {