イベントに削除関数を追加し、即座に適用する

frontend/src/components/left/EventTree.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script lang="ts">
-import { QTree } from 'quasar';
+import { QTree, useQuasar } from 'quasar';
 import { ActionFlow, RootAction } from 'src/types/ActionTypes';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { defineComponent, ref } from 'vue';
@@ -57,6 +57,7 @@ export default defineComponent({
     FieldSelect,
   },
   setup(props, context) {
+    const $q = useQuasar();
     const appDg = ref();
     const store = useFlowEditorStore();
     const showDialog = ref(false);
@@ -101,10 +102,14 @@ export default defineComponent({
       if (!node.eventId) {
         return;
       }
-      store.deleteStoreEventAndFlow(node);
+      store.deleteEvent(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,9 +20,10 @@
           </div>
         </q-drawer>
       </div>
-      <q-btn flat dense round :icon="drawerLeft ? 'keyboard_double_arrow_left' : 'keyboard_double_arrow_right'"
+      <q-btn flat dense round
-        :style="[drawerLeft ? { 'left': '300px' } : { 'left': '0px' }]" @click="drawerLeft = !drawerLeft"
+              :icon="drawerLeft?'keyboard_double_arrow_left':'keyboard_double_arrow_right'"
-        class="expand" />
+              :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"
@@ -194,22 +195,7 @@ 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: "エラー",
@@ -218,9 +204,6 @@ const onSaveFlow = async () => {
     return;
   }
   try {
-    if (store.deleteFlowIds.length > 0) {
-      deleteFlows();
-    }
     saveLoading.value = true;
     await store.saveFlow(targetFlow);
     saveLoading.value = false;
@@ -282,7 +265,6 @@ onMounted(() => {
   top: 50px;
   z-index: 999;
 }
-
 .expand{
   position: fixed;
   left: 0px;

frontend/src/stores/flowEditor.ts

@@ -12,7 +12,6 @@ export interface FlowEditorState {
   eventTree: KintoneEventManager;
   selectedEvent: IKintoneEvent | undefined;
   expandedScreen: any[];
-  deleteFlowIds: string[];
 }
 const flowCtrl = new FlowCtrl();
 const eventTree = new KintoneEventManager();
@@ -26,7 +25,6 @@ export const useFlowEditorStore = defineStore('flowEditor', {
     eventTree: eventTree,
     selectedEvent: undefined,
     expandedScreen: [],
-    deleteFlowIds: [],
   }),
   getters: {
     /**
@@ -56,11 +54,6 @@ export const useFlowEditorStore = defineStore('flowEditor', {
       };
     },
 
-    findEventFrist(state) {
-      return () => {
-        return state.eventTree.findEventFrist();
-      };
-    },
   },
 
   actions: {
@@ -76,12 +69,6 @@ export const useFlowEditorStore = defineStore('flowEditor', {
     setApp(app: AppInfo) {
       this.appInfo = app;
     },
-    addDeleteFlowId(flowId: string) {
-      this.deleteFlowIds.push(flowId);
-    },
-    clearDeleteFlowIds() {
-      this.deleteFlowIds = [];
-    },
     /**
      * DBからフルーを保存する
      * @returns
@@ -125,24 +112,15 @@ export const useFlowEditorStore = defineStore('flowEditor', {
       }
     },
 
-    async deletebackendFlow() {
-      const deletePromises = Object.values(this.deleteFlowIds).map((flowId) =>
-        flowCtrl.DeleteFlow(flowId)
-      );
-      await Promise.all(deletePromises);
-      this.clearDeleteFlowIds();
-    },
 
-    deleteStoreEventAndFlow(event: IKintoneEvent) {
+    deleteEvent(event: IKintoneEvent) {
       const store = useFlowEditorStore();
       if (event.flowData) {
         const flow = event.flowData;
         if (flow.id === '') {
           return;
         }
-        console.log('delete flow', flow);
+        flowCtrl.DeleteFlow(flow.id)
-        
-        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,7 +85,6 @@ 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') {
@@ -101,7 +100,6 @@ 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 || '',
@@ -112,11 +110,6 @@ export class KintoneEventManager {
               flowData: flow,
             };
 
-            // new kintoneEvent(
-            // flow.getRoot()?.subTitle || '',
-            // eventId,
-            // groupEvent.parentId
-            // );
             groupEvent.events.push(newEvent);
           }
         }
@@ -124,10 +117,6 @@ 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) {