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

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)
-
-      $q.notify({
-        type: 'positive',
-        caption: "通知",
-        message: `イベント ${node.label} 削除`
-      })
+      console.log(store.selectedFlow);
+      
     }
 
     const onSelected = (node: IKintoneEvent) => {

frontend/src/pages/FlowChart.vue

@@ -20,13 +20,12 @@
           </div>
         </q-drawer>
       </div>
-      <q-btn flat dense round
-              :icon="drawerLeft?'keyboard_double_arrow_left':'keyboard_double_arrow_right'"
-              :style="[drawerLeft?{'left':'300px'}:{'left':'0px'}]"
-              @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"
+      <q-btn flat dense round :icon="drawerLeft ? 'keyboard_double_arrow_left' : 'keyboard_double_arrow_right'"
+        :style="[drawerLeft ? { 'left': '300px' } : { 'left': '0px' }]" @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"
             :actionNode="rootNode" @addNode="addNode" @nodeSelected="onNodeSelected" @nodeEdit="onNodeEdit"
             @deleteNode="onDeleteNode" @deleteAllNextNodes="onDeleteAllNextNodes" @copyFlow="onCopyFlow"></node-item>
         </div>
@@ -35,13 +34,13 @@
     </q-layout>
     <ShowDialog v-model:visible="showAddAction" name="アクション" @close="closeDg" min-width="500px" min-height="500px">
       <template v-slot:toolbar>
-        <q-input  dense debounce="200" v-model="filter" placeholder="検索" clearable>
+        <q-input dense debounce="200" v-model="filter" placeholder="検索" clearable>
           <template v-slot:before>
             <q-icon name="search" />
           </template>
         </q-input>
       </template>
-      <action-select ref="appDg" name="model" :filter="filter"  type="single"></action-select>
+      <action-select ref="appDg" name="model" :filter="filter" type="single"></action-select>
     </ShowDialog>
 
   </q-page>
@@ -77,20 +76,20 @@ const prevNodeIfo = ref({
 // const refFlow = ref<ActionFlow|null>(null);
 const showAddAction = ref(false);
 const drawerRight = ref(false);
-const filter=ref("");
+const filter = ref("");
 const model = ref("");
 const addActionNode = (action: IActionNode) => {
   // refFlow.value?.actionNodes.push(action);
   store.currentFlow?.actionNodes.push(action);
 }
-const rootNode = computed(()=>{
+const rootNode = computed(() => {
   return store.currentFlow?.getRoot();
 });
-const minPanelWidth=computed(()=>{
+const minPanelWidth = computed(() => {
   const root = store.currentFlow?.getRoot();
-  if(store.currentFlow && root){
+  if (store.currentFlow && root) {
     return store.currentFlow?.getColumns(root) * 300 + 'px';
-  }else{
+  } else {
     return "300px";
   }
 });
@@ -149,7 +148,7 @@ const closeDg = (val: any) => {
  */
 const onCopyFlow = () => {
   if (navigator.clipboard) {
-    const jsonData =JSON.stringify(store.currentFlow) ;
+    const jsonData = JSON.stringify(store.currentFlow);
     navigator.clipboard.writeText(jsonData).then(() => {
       console.log('Text successfully copied to clipboard');
     },
@@ -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,7 +282,8 @@ onMounted(() => {
   top: 50px;
   z-index: 999;
 }
-.expand{
+
+.expand {
   position: fixed;
   left: 0px;
   top: 50%;

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) {