ボタン配置改修

frontend/src/components/left/EventTree.vue

@@ -3,11 +3,11 @@
   <q-tree :nodes="store.eventTree.screens" node-key="eventId" children-key="events" no-connectors
     v-model:expanded="store.expandedScreen" :dense="true" :ref="tree">
     <template v-slot:header-EVENT="prop">
-      <div :ref="prop.node.eventId" class="row col items-center no-wrap event-node">
+      <div :ref="prop.node.eventId" class="row col items-center no-wrap event-node" @click="onSelected(prop.node)">
         <q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px"
           class="q-mr-sm">
         </q-icon>
-        <div class="no-wrap" @click="onSelected(prop.node)"
+        <div class="no-wrap"
           :class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''">{{
             prop.node.label }}</div>
         <q-space></q-space>
@@ -15,25 +15,21 @@
       </div>
     </template>
     <template v-slot:header-CHANGE="prop">
-      <div class="row col items-center no-wrap event-node">
-        <div class="no-wrap">{{ prop.node.label }}</div>
+      <div class="row col items-start no-wrap event-node">
+        <div class="no-wrap"
+        :class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''"
+        >{{ 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>
     <template v-slot:header-DELETABLE="prop">
-      <div class="row col items-center event-node">
-        <div class="row col items-center" @click="onSelected(prop.node)">
-          <q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px"
-            class="q-mr-sm">
-          </q-icon>
-          <div>{{ prop.node.label }}</div>
-        </div>
-        <div>
-          <q-btn class="q-mr-sm delete-btn" flat fab-mini icon="delete_forever" padding="none" color="negative"
-            @click="deleteEvent(prop.node)"></q-btn>
-        </div>
+      <div class="row col items-start event-node" @click="onSelected(prop.node)">
+          <q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px" class="q-mr-sm" />
+          <div class="no-wrap" :class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''" >{{ prop.node.label }}</div>
+          <q-space></q-space>
+          <q-icon  name="delete_forever"  color="negative" size="16px" @click="deleteEvent(prop.node)"></q-icon>
       </div>
     </template>
   </q-tree>

frontend/src/components/right/EventSetter.vue

@@ -61,12 +61,12 @@ export default defineComponent({
         if(store.eventTree.findEventById(addEventId)){
           return;
         }
-        customEvents.events.push(
-          new kintoneEvent(
-            displayName,
-            addEventId,
-            customButtonId)
-        );
+        customEvents.events.push({
+          eventId: addEventId,
+          label: displayName,
+          parentId: customButtonId,
+          header: 'DELETABLE'
+        });
       }
     }
 

frontend/src/stores/flowEditor.ts

@@ -113,19 +113,19 @@ export const useFlowEditorStore = defineStore('flowEditor', {
     },
 
 
-    deleteEvent(event: IKintoneEvent) {
+    async deleteEvent(event: IKintoneEvent) {
       const store = useFlowEditorStore();
       if (event.flowData) {
         const flow = event.flowData;
-        if (flow.id === '') {
-          return;
+        if (flow.id !== '') {
+          await flowCtrl.DeleteFlow(flow.id)
+          if (this.flows) {
+            this.flows = this.flows.filter((f) => f.id !== flow.id);
+          }
         }
-        flowCtrl.DeleteFlow(flow.id)
         eventTree.deleteEvent(event, store);
-        if(this.flows){
-          this.flows = this.flows.filter((f) => f.id !== flow.id);
-        }
-      } else {
+      }
+      else {
         eventTree.deleteEvent(event, store);
       }
     },

frontend/src/types/KintoneEvents.ts

@@ -95,10 +95,7 @@ export class KintoneEventManager {
           const lastIndex = eventId.lastIndexOf('.');
           const groupId = eventId.substring(0, lastIndex);
           const eventNode = this.findEventById(groupId);
-          if (
-            eventNode &&
-            (eventNode.header === 'EVENTGROUP' || eventNode.header === 'CHANGE')
-          ) {
+          if (eventNode && (eventNode.header === 'EVENTGROUP' || eventNode.header === 'CHANGE')) {
             const groupEvent = eventNode as kintoneEventGroup;
 
             const newEvent = {