DB連動実装

frontend/src/components/ActionSelect.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="q-pa-md">
-    <q-table :title="name+'一覧'" row-key="name" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
+    <q-table  row-key="name" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows"
+    class="action-table"
+    flat bordered
+    virtual-scroll
+    :pagination="pagination"
+    :rows-per-page-options="[0]"
+    />
   </div>
 </template>
 <script>
@@ -17,11 +23,11 @@ export default {
   const columns = [
   { name: 'name', required: true,label: 'アクション名',align: 'left',field: 'name',sortable: true},
   { name: 'desc', align: 'left', label: '説明', field: 'desc', sortable: true },
-  { name: 'content', label: '内容', field: 'content', sortable: true }
+  // { name: 'content', label: '内容', field: 'content', sortable: true }
   ]
   const rows = reactive([])
     onMounted(async () => {
-        await api.get('http://127.0.0.1:8000/api/kintone/2').then(res =>{
+        await api.get('http://127.0.0.1:8000/api/kintone/1').then(res =>{
          res.data.forEach((item) =>
         {
           rows.push({name:item.name,desc:item.desc,content:item.content});
@@ -33,8 +39,16 @@ export default {
       columns,
       rows,
       selected: ref([]),
+      pagination:ref({
+        rowsPerPage:0
+      })
     }
   },
 
 }
 </script>
+<style lang="scss">
+.action-table{
+  height: 100%;
+}
+</style>

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>