DB連動実装

frontend/src/components/left/AppSelector.vue

@@ -0,0 +1,50 @@
+<template>
+  <div
+    class="row"
+    style="
+      border-radius: 2px;
+      box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset,
+        rgba(0, 0, 0, 0.3) 0px 0px 0px 1px;
+    ">
+    <q-icon
+      class="self-center q-ma-sm"
+      name="widgets"
+      color="grey-9"
+      style="font-size: 2em"
+    />
+
+    <div class="col-7 self-center ellipsis">
+      {{ selectedApp.name }}
+    </div>
+
+    <div class="self-center">
+      <q-btn
+        outline
+        dense
+        label="変 更"
+        padding="none sm"
+        color="primary"
+      ></q-btn>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent,ref } from 'vue';
+import {AppInfo} from '../../types/ActionTypes'
+export default defineComponent({
+  name: 'AppSelector',
+  emits:[
+    "appSelected"
+  ],
+  setup(props, context) {
+    const selectedApp =ref<AppInfo>({
+      appId:"",
+      name:"",
+    });
+    return {
+      selectedApp
+    }
+  }
+});
+</script>

frontend/src/components/left/EventTree.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="q-pa-md q-gutter-sm">
+    <q-tree
+      :nodes="eventTree.screens"
+      node-key="label"
+      children-key="events"
+      no-connectors
+      v-model:expanded="expanded"
+      :dense="true"
+    >
+      <template v-slot:default-header="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>
+        </div>
+      </template>
+    </q-tree>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, ref } from 'vue';
+import { kintoneEvents,KintoneEvent } from '../../types/KintoneEvents';
+import { storeToRefs } from 'pinia';
+import { useFlowEditorStore } from 'stores/flowEditor';
+export default defineComponent({
+  name: 'EventTree',
+  setup(props, context) {
+    const store = useFlowEditorStore();
+    const eventTree=ref(kintoneEvents);
+    const selectedFlow = store.currentFlow;
+
+    const expanded=ref([
+      selectedFlow?.getRoot()?.title
+    ]);
+    const selectedEvent = ref<KintoneEvent|null>(null);
+    const onSelected=(node:KintoneEvent)=>{
+        if(!node.eventId){
+          return;
+        }
+        selectedEvent.value=node;
+    }
+    return {
+      eventTree,
+      expanded,
+      onSelected,
+      selectedEvent,
+      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;
+}
+</style>