KintoneAppBuilder/frontend/src/components/left/EventTree.vue

<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 :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>
        <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>
    </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 { QTree } from 'quasar';
import { ActionFlow, RootAction } from 'src/types/ActionTypes';
import { useFlowEditorStore } from 'stores/flowEditor';
import { defineComponent, ref } from 'vue';
import { IKintoneEvent, IKintoneEventGroup, IKintoneEventNode } from '../../types/KintoneEvents';
import FieldSelect from '../FieldSelect.vue';
import ShowDialog from '../ShowDialog.vue';
export default defineComponent({
  name: 'EventTree',
  components: {
    ShowDialog,
    FieldSelect,
  },
  setup(props, context) {
    const appDg = ref();
    const store = useFlowEditorStore();
    const showDialog = ref(false);
    const tree = ref<QTree>();
    // const eventTree=ref(kintoneEvents);
    // 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 closeDg = (val: string) => {
      if (val == 'OK') {
        if (!selectedChangeEvent.value) { return; }
        const field = appDg.value.selected[0];
        const eventid = `${selectedChangeEvent.value.eventId}.${field.code}`;
        if (store.eventTree.findEventById(eventid)) {
          return;
        }
        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;
      }
      selectedChangeEvent.value = node;
      showDialog.value = true;
    }

    const deleteEvent = (node: IKintoneEvent) => {
      if (!node.eventId) {
        return;
      }
      store.deleteStoreEventAndFlow(node);
      store.selectFlow(undefined)
      console.log(store.selectedFlow);
      
    }

    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,
      // expanded,
      appDg,
      tree,
      showDialog,
      isFieldChange,
      onSelected,
      selectedEvent,
      addChangeEvent,
      deleteEvent,
      closeDg,
      store
    }
  }
});
</script>
<style lang="scss">
.nowrap {
  flex-wrap: nowarp;
  text-wrap: nowarp;
}

.event-node {
  cursor: pointer;
}

.selected-node {
  color: $primary;
  font-weight: bolder;
}

.event-node:hover {
  background-color: $light-blue-1;
}

.delete-btn {
  margin-right: 5px;
}
</style>