Merge remote-tracking branch 'origin/feature-delete-event' into feature/button-on-space

frontend/src/components/left/EventTree.vue

@@ -1,48 +1,55 @@
 <template>
   <!-- <div class="q-pa-md q-gutter-sm"> -->
-    <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 class="row col items-start 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" :class="selectedEvent && prop.node.eventId===selectedEvent.eventId?'selected-node':''">{{ prop.node.label }}</div>
-          <q-space></q-space>
-          <!-- <q-icon v-if="prop.node.hasFlow" name="delete" color="negative" size="16px" class="q-mr-sm"></q-icon> -->
+  <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">
+        <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)"
+          :class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''">{{
+            prop.node.label }}</div>
+        <q-space></q-space>
+        <!-- <q-icon v-if="prop.node.hasFlow" name="delete" color="negative" size="16px" class="q-mr-sm"></q-icon> -->
+      </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>
+        <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>
-      </template>
-      <template v-slot:header-CHANGE="prop" >
-        <div class="row col items-start no-wrap event-node" >
-          <div class="no-wrap">{{ 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>
+          <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>
-      </template>
-    </q-tree>
-    <show-dialog v-model:visible="showDialog" name="フィールド選択" @close="closeDg" widht="400px">
-      <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
-    </show-dialog>
+      </div>
+    </template>
+  </q-tree>
+  <show-dialog v-model:visible="showDialog" name="フィールド選択" @close="closeDg">
+    <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
+  </show-dialog>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref } from 'vue';
-import { IKintoneEvent ,IKintoneEventGroup, IKintoneEventNode, kintoneEvent} from '../../types/KintoneEvents';
-import { storeToRefs } from 'pinia';
+import { QTree, useQuasar } from 'quasar';
+import { ActionFlow, RootAction } from 'src/types/ActionTypes';
 import { useFlowEditorStore } from 'stores/flowEditor';
-import { ActionFlow, ActionNode, RootAction } from 'src/types/ActionTypes';
-import ShowDialog from '../ShowDialog.vue';
+import { defineComponent, ref } from 'vue';
+import { IKintoneEvent, IKintoneEventGroup, IKintoneEventNode } from '../../types/KintoneEvents';
 import FieldSelect from '../FieldSelect.vue';
-import { QTree } from 'quasar';
+import ShowDialog from '../ShowDialog.vue';
 export default defineComponent({
   name: 'EventTree',
   components: {
@@ -50,6 +57,7 @@ export default defineComponent({
     FieldSelect,
   },
   setup(props, context) {
+    const $q = useQuasar();
     const appDg = ref();
     const store = useFlowEditorStore();
     const showDialog = ref(false);
@@ -58,62 +66,79 @@ export default defineComponent({
     // const selectedFlow = store.currentFlow;
 
     // const expanded=ref();
-    const selectedEvent = ref<IKintoneEvent|null>(null);
-    const selectedChangeEvent=ref<IKintoneEventGroup|null>(null);
-    const isFieldChange = (node:IKintoneEventNode)=>{
-      return node.header=='EVENT' && node.eventId.indexOf(".change.")>-1;
+    const selectedEvent = ref<IKintoneEvent | null>(null);
+    const selectedChangeEvent = ref<IKintoneEventGroup | null>(null);
+    const isFieldChange = (node: IKintoneEventNode) => {
+      return node.header == 'EVENT' && node.eventId.indexOf(".change.") > -1;
     }
     //フィールド値変更イベント追加
-    const closeDg = (val:string) => {
+    const closeDg = (val: string) => {
       if (val == 'OK') {
-        if(!selectedChangeEvent.value){return;}
+        if (!selectedChangeEvent.value) { return; }
         const field = appDg.value.selected[0];
         const eventid = `${selectedChangeEvent.value.eventId}.${field.code}`;
-        if(store.eventTree.findEventById(eventid)){
+        if (store.eventTree.findEventById(eventid)) {
           return;
         }
-        selectedChangeEvent.value?.events.push(
-          new kintoneEvent(
-            field.label,
-            eventid,
-            selectedChangeEvent.value.eventId)
-        );
+        selectedChangeEvent.value?.events.push({
+          eventId: eventid,
+          label: field.name,
+          parentId: selectedChangeEvent.value.eventId,
+          header: 'DELETABLE'
+        });
         tree.value?.expanded?.push(selectedChangeEvent.value.eventId);
         tree.value?.expandAll();
       }
     };
-    const addChangeEvent=(node:IKintoneEventGroup)=>{
-      if(store.appInfo===undefined){
-          return;
+    const addChangeEvent = (node: IKintoneEventGroup) => {
+      if (store.appInfo === undefined) {
+        return;
       }
-      selectedChangeEvent.value=node;
-      showDialog.value=true;
+      selectedChangeEvent.value = node;
+      showDialog.value = true;
     }
-    const onSelected=(node:IKintoneEvent)=>{
-        if(!node.eventId){
-          return;
-        }
-        selectedEvent.value=node;
-        if(store.appInfo===undefined){
-          return;
-        }
-        const screen = store.eventTree.findEventById(node.parentId);
-        let flow =store.findFlowByEventId(node.eventId);
-        let screenName=screen!==null?screen.label:"";
-        let nodeLabel = node.label;
-        // if(isFieldChange(node)){
-        //   screenName=nodeLabel;
-        //   nodeLabel=`${node.label}の値を変更したとき`;
-        // }
-        if(flow!==undefined && flow!==null ){
-          store.selectFlow(flow);
-        }else{
-          const root = new RootAction(node.eventId,screenName,nodeLabel)
-            const flow =new ActionFlow(root);
-            store.flows?.push(flow);
-            store.selectFlow(flow);
-            selectedEvent.value.flowData=flow;
-        }
+
+    const deleteEvent = (node: IKintoneEvent) => {
+      if (!node.eventId) {
+        return;
+      }
+      store.deleteEvent(node);
+      store.selectFlow(undefined)
+
+      $q.notify({
+        type: 'positive',
+        caption: "通知",
+        message: `イベント ${node.label} 削除`
+      })
+    }
+
+    const onSelected = (node: IKintoneEvent) => {
+      if (!node.eventId) {
+        return;
+      }
+      selectedEvent.value = node;
+      if (store.appInfo === undefined) {
+        return;
+      }
+      const screen = store.eventTree.findEventById(node.parentId);
+
+      let flow = store.findFlowByEventId(node.eventId);
+      let screenName = screen !== null ? screen.label : "";
+      let nodeLabel = node.label;
+      // if(isFieldChange(node)){
+      //   screenName=nodeLabel;
+      //   nodeLabel=`${node.label}の値を変更したとき`;
+      // }
+
+      if (flow !== undefined && flow !== null) {
+        store.selectFlow(flow);
+      } else {
+        const root = new RootAction(node.eventId, screenName, nodeLabel)
+        const flow = new ActionFlow(root);
+        store.flows?.push(flow);
+        store.selectFlow(flow);
+        selectedEvent.value.flowData = flow;
+      }
     };
     return {
       // eventTree,
@@ -125,6 +150,7 @@ export default defineComponent({
       onSelected,
       selectedEvent,
       addChangeEvent,
+      deleteEvent,
       closeDg,
       store
     }
@@ -132,20 +158,25 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
-.nowrap{
-  flex-wrap:nowarp;
-  text-wrap:nowarp;
+.nowrap {
+  flex-wrap: nowarp;
+  text-wrap: nowarp;
 }
-.event-node{
-  cursor:pointer;
+
+.event-node {
+  cursor: pointer;
 }
-.selected-node{
+
+.selected-node {
   color: $primary;
   font-weight: bolder;
 }
-.event-node:hover{
+
+.event-node:hover {
   background-color: $light-blue-1;
 }
 
+.delete-btn {
+  margin-right: 5px;
+}
 </style>
-