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

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,12 +20,13 @@
           </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'}]"
-      <div class="q-pa-md q-gutter-sm" :style="{ minWidth: minPanelWidth }">
+              @click="drawerLeft=!drawerLeft" class="expand" />
-        <div class="flowchart" v-if="store.currentFlow" :style="[drawerLeft ? { paddingLeft: '300px' } : {}]">
+      <div class="q-pa-md q-gutter-sm" :style="{minWidth: minPanelWidth}">
-          <node-item v-if="rootNode !== undefined" :key="rootNode.id" :isSelected="rootNode === store.activeNode"
+        <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>
@@ -34,13 +35,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>
@@ -76,20 +77,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";
   }
 });
@@ -148,7 +149,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');
     },
@@ -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,8 +265,7 @@ onMounted(() => {
   top: 50px;
   z-index: 999;
 }
-
+.expand{
-.expand {
   position: fixed;
   left: 0px;
   top: 50%;

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