Merged PR 3: アプリ管理 page & some fix

![image.png](https://dev.azure.com/alicorn-dev/96136197-fa1c-44c2-b522-b9ab8b541f34/_apis/git/repositories/11e363ac-4aa8-4076-9a9a-eaac160866ff/pullRequests/3/attachments/image.png) --- Another commit is some refactoring and bugfix: ![prev.gif](https://dev.azure.com/alicorn-dev/96136197-fa1c-44c2-b522-b9ab8b541f34/_apis/git/repositories/11e363ac-4aa8-4076-9a9a-eaac160866ff/pullRequests/3/attachments/prev.gif)
2024-11-11 11:20:36 +00:00
parent c2c6dee8c5 a3375c4526
commit 1f0b05ee13
6 changed files with 127 additions and 29 deletions
--- a/frontend/src/components/left/EventTree.vue
+++ b/frontend/src/components/left/EventTree.vue
@@ -7,18 +7,14 @@
        <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 class="no-wrap" :class="getSelectedClass(prop.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-start no-wrap event-node">
-        <div class="no-wrap"
-        :class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''"
-        >{{ prop.node.label }}</div>
+        <div class="no-wrap" :class="getSelectedClass(prop.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>
@@ -27,7 +23,7 @@
    <template v-slot:header-DELETABLE="prop">
      <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>
+          <div class="no-wrap" :class="getSelectedClass(prop.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>
@@ -80,6 +76,11 @@ export default defineComponent({
    const isFieldChange = (node: IKintoneEventNode) => {
      return node.header == 'EVENT' && node.eventId.indexOf(".change.") > -1;
    }
+
+    const getSelectedClass = (node: IKintoneEventNode) => {
+      return store.selectedEvent && node.eventId === store.selectedEvent.eventId ? 'selected-node' : '';
+    };
+
    //フィールド値変更イベント追加
    const closeDg = (val: string) => {
      if (val == 'OK') {
@@ -132,7 +133,7 @@ export default defineComponent({
      const screen = store.eventTree.findEventById(node.parentId);

      let flow = store.findFlowByEventId(node.eventId);
-      let screenName = screen !== null ? screen.label : "";
+      let screenName = screen !== null ? screen.label : '';
      let nodeLabel = node.label;
      // if(isFieldChange(node)){
      //   screenName=nodeLabel;
@@ -159,6 +160,7 @@ export default defineComponent({
      tree,
      showDialog,
      isFieldChange,
+      getSelectedClass,
      onSelected,
      selectedEvent,
      addChangeEvent,
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -49,11 +49,18 @@ const essentialLinks: EssentialLinkProps[] = [
    link: '/',
    target: '_self'
  },
+  // {
+  //   title: 'フローエディター',
+  //   caption: 'イベントを設定する',
+  //   icon: 'account_tree',
+  //   link: '/#/FlowChart',
+  //   target: '_self'
+  // },
  {
-    title: 'フローエディター',
-    caption: 'イベントを設定する',
-    icon: 'account_tree',
-    link: '/#/FlowChart',
+    title: 'アプリ管理',
+    caption: 'アプリを管理する',
+    icon: 'widgets',
+    link: '/#/app',
    target: '_self'
  },
  // {
--- a/frontend/src/pages/AppManagement.vue
+++ b/frontend/src/pages/AppManagement.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="q-pa-md">
+    <div class="q-gutter-sm row items-start">
+        <q-breadcrumbs>
+          <q-breadcrumbs-el icon="widgets" label="アプリ管理" />
+        </q-breadcrumbs>
+    </div>
+    <q-table title="Treats" :rows="rows" :columns="columns" row-key="id" :filter="filter" :loading="loading" :pagination="pagination">
+
+      <template v-slot:top>
+        <q-btn disabled color="primary" :disable="loading" label="新規" @click="addRow" />
+        <q-space />
+        <q-input borderless dense filled debounce="300" v-model="filter" placeholder="検索">
+          <template v-slot:append>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+
+      <template v-slot:body-cell-actions="p">
+        <q-td :props="p">
+          <q-btn-group flat>
+            <q-btn flat color="primary" padding="xs" size="1em" icon="edit_note" @click="editFlow(p.row)" />
+            <q-btn disabled flat color="primary" padding="xs" size="1em" icon="history" @click="showHistory(p.row)" />
+            <q-btn disabled flat color="negative" padding="xs" size="1em" icon="delete_outline" @click="removeRow(p.row)" />
+          </q-btn-group>
+        </q-td>
+      </template>
+
+    </q-table>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, reactive } from 'vue';
+import { api } from 'boot/axios';
+import { useAuthStore } from 'stores/useAuthStore';
+import { useFlowEditorStore } from 'stores/flowEditor';
+import { router } from 'src/router';
+
+const authStore = useAuthStore();
+
+const columns = [
+  { name: 'id', label: 'アプリID', field: 'id', align: 'left', sortable: true },
+  { name: 'name', label: 'アプリ名', field: 'name', align: 'left', sortable: true },
+  { name: 'url', label: 'URL', field: 'url', align: 'left', sortable: true },
+  { name: 'user', label: 'ログイン名', field: 'user', align: 'left', },
+  { name: 'version', label: 'バージョン', field: 'version', align: 'left', },
+  { name: 'actions', label: '操作', field: 'actions' }
+];
+
+const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 20 });
+const loading = ref(false);
+const filter = ref('');
+const rows = ref([]);
+const store = useFlowEditorStore();
+
+const tenantid = ref(authStore.currentDomain.id);
+
+const getApps = async () => {
+  loading.value = true;
+  const result = await api.get('api/apps');
+  rows.value = result.data.map((item) => {
+    return { id: item.appid, name: item.appname, url: item.domainurl, user: item.user.email, version: item.version }
+  });
+  loading.value = false;
+}
+
+onMounted(async () => {
+  await getApps();
+})
+
+const addRow = () => {
+  return
+}
+
+const removeRow = (row) => {
+  return
+}
+
+const showHistory = (row) => {
+  return
+}
+
+const editFlow = (row) => {
+  store.setApp({
+    appId: row.id,
+    name: row.name
+  });
+  router.push('/FlowChart');
+};
+</script>
--- a/frontend/src/pages/FlowChart.vue
+++ b/frontend/src/pages/FlowChart.vue
@@ -290,20 +290,8 @@ const onSaveAllFlow= async ()=>{
 }

 const fetchData = async () => {
+  await store.loadFlow();
  drawerLeft.value = true;
-  if (store.appInfo === undefined) return;
-  const flowCtrl = new FlowCtrl();
-  const actionFlows = await flowCtrl.getFlows(store.appInfo?.appId);
-  if (actionFlows && actionFlows.length > 0) {
-    store.setFlows(actionFlows);
-  }
-  if (actionFlows && actionFlows.length == 1) {
-    store.selectFlow(actionFlows[0]);
-  }
-  const root = actionFlows[0].getRoot();
-  if (root) {
-    store.setActiveNode(root);
-  }
 }

 const onClearFilter=()=>{
--- a/frontend/src/router/routes.ts
+++ b/frontend/src/router/routes.ts
@@ -27,6 +27,7 @@ const routes: RouteRecordRaw[] = [
      { path: 'domain', component: () => import('pages/TenantDomain.vue') },
      // { path: 'userdomain', component: () => import('pages/UserDomain.vue')},
      { path: 'user', component: () => import('pages/UserManagement.vue')},
+      { path: 'app', component: () => import('pages/AppManagement.vue')},
      { path: 'condition', component: () => import('pages/conditionPage.vue') }
    ],
  },
--- a/frontend/src/stores/flowEditor.ts
+++ b/frontend/src/stores/flowEditor.ts
@@ -65,6 +65,8 @@ export const useFlowEditorStore = defineStore('flowEditor', {
      if(flow!==undefined){
        const eventId = flow.getRoot()?.name;
        this.selectedEvent = this.eventTree.findEventById(eventId) as IKintoneEvent;
+      } else {
+        this.selectedEvent = undefined;
      }
    },
    setActiveNode(node: IActionNode) {
@@ -86,8 +88,8 @@ export const useFlowEditorStore = defineStore('flowEditor', {
      //eventTreeにバンドする
      this.eventTree.bindFlows(actionFlows);
      if (actionFlows === undefined || actionFlows.length === 0) {
-        this.flows = [];
-        this.selectedFlow = undefined;
+        this.setFlows([]);
+        this.selectFlow(undefined);
        this.expandedScreen =[];
        return;
      }
@@ -95,6 +97,11 @@ export const useFlowEditorStore = defineStore('flowEditor', {
      if (actionFlows && actionFlows.length > 0) {
        this.selectFlow(actionFlows[0]);
      }
+      const root = actionFlows[0].getRoot();
+      if (root) {
+        this.setActiveNode(root);
+      }
+
      const expandEventIds = actionFlows.map((flow) => flow.getRoot()?.name);
      const expandScreens:string[]=[];
      expandEventIds.forEach((eventid)=>{