show domain page for all user

1. show ドメイン管理
2. hide ドメイン適用

frontend/src/components/left/EventTree.vue

@@ -7,14 +7,18 @@
         <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="getSelectedClass(prop.node)">{{ prop.node.label }}</div>
+        <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> -->
       </div>
     </template>
     <template v-slot:header-CHANGE="prop">
       <div class="row col items-start no-wrap event-node">
-        <div class="no-wrap" :class="getSelectedClass(prop.node)">{{ prop.node.label }}</div>
+        <div class="no-wrap"
+        :class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-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>
@@ -23,7 +27,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="getSelectedClass(prop.node)">{{ prop.node.label }}</div>
+          <div class="no-wrap" :class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-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>
@@ -38,7 +42,7 @@
 import { QTree, useQuasar } from 'quasar';
 import { ActionFlow, RootAction } from 'src/types/ActionTypes';
 import { useFlowEditorStore } from 'stores/flowEditor';
-import { defineComponent, ref, watchEffect } from 'vue';
+import { defineComponent, ref,watchEffect } from 'vue';
 import { IKintoneEvent, IKintoneEventGroup, IKintoneEventNode, kintoneEvent } from '../../types/KintoneEvents';
 import FieldSelect from '../FieldSelect.vue';
 import ShowDialog from '../ShowDialog.vue';
@@ -76,11 +80,6 @@ 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') {
@@ -133,7 +132,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;
@@ -160,7 +159,6 @@ export default defineComponent({
       tree,
       showDialog,
       isFieldChange,
-      getSelectedClass,
       onSelected,
       selectedEvent,
       addChangeEvent,

frontend/src/layouts/MainLayout.vue

@@ -22,6 +22,8 @@
         <div v-if="isAdmin()">
           <EssentialLink v-for="link in adminLinks" :key="link.title" v-bind="link" />
         </div>
+        <EssentialLink v-for="link in domainLinks" :key="link.title" v-bind="link" />
+
       </q-list>
     </q-drawer>
 
@@ -47,18 +49,11 @@ const essentialLinks: EssentialLinkProps[] = [
     link: '/',
     target: '_self'
   },
-  // {
-  //   title: 'フローエディター',
-  //   caption: 'イベントを設定する',
-  //   icon: 'account_tree',
-  //   link: '/#/FlowChart',
-  //   target: '_self'
-  // },
   {
-    title: 'アプリ管理',
-    caption: 'アプリを管理する',
-    icon: 'widgets',
-    link: '/#/app',
+    title: 'フローエディター',
+    caption: 'イベントを設定する',
+    icon: 'account_tree',
+    link: '/#/FlowChart',
     target: '_self'
   },
   // {
@@ -90,58 +85,23 @@ const essentialLinks: EssentialLinkProps[] = [
   //   link:'https://cybozu.dev/ja/kintone/docs/',
   //   icon:'help_outline'
   // },
+];
+
+const domainLinks: EssentialLinkProps[] = [
+  {
+    title: 'ドメイン管理',
+    caption: 'kintoneのドメイン設定',
+    icon: 'domain',
+    link: '/#/domain',
+    target: '_self'
+  },
   // {
-  //   title:'',
-  //   isSeparator:true
+  //   title: 'ドメイン適用',
+  //   caption: 'ユーザー使用可能なドメインの設定',
+  //   icon: 'assignment_ind',
+  //   link: '/#/userDomain',
+  //   target: '_self'
   // },
-  // {
-  //   title: 'Docs',
-  //   caption: 'quasar.dev',
-  //   icon: 'school',
-  //   link: 'https://quasar.dev'
-  // },
-  // {
-  //   title: 'Icons',
-  //   caption: 'Material Icons',
-  //   icon: 'insert_emoticon',
-  //   link: 'https://fonts.google.com/icons?selected=Material+Icons:insert_emoticon:'
-  // },
-  // {
-  //   title: 'Github',
-  //   caption: 'github.com/quasarframework',
-  //   icon: 'code',
-  //   link: 'https://github.com/quasarframework'
-  // },
-  // {
-  //   title: 'Discord Chat Channel',
-  //   caption: 'chat.quasar.dev',
-  //   icon: 'chat',
-  //   link: 'https://chat.quasar.dev'
-  // },
-  // {
-  //   title: 'Forum',
-  //   caption: 'forum.quasar.dev',
-  //   icon: 'record_voice_over',
-  //   link: 'https://forum.quasar.dev'
-  // },
-  // {
-  //   title: 'Twitter',
-  //   caption: '@quasarframework',
-  //   icon: 'rss_feed',
-  //   link: 'https://twitter.quasar.dev'
-  // },
-  // {
-  //   title: 'Facebook',
-  //   caption: '@QuasarFramework',
-  //   icon: 'public',
-  //   link: 'https://facebook.quasar.dev'
-  // },
-  // {
-  //   title: 'Quasar Awesome',
-  //   caption: 'Community Quasar projects',
-  //   icon: 'favorite',
-  //   link: 'https://awesome.quasar.dev'
-  // }
 ];
 
 const adminLinks: EssentialLinkProps[] = [
@@ -152,20 +112,6 @@ const adminLinks: EssentialLinkProps[] = [
     link: '/#/user',
     target: '_self'
   },
-  {
-    title: 'ドメイン管理',
-    caption: 'kintoneのドメイン設定',
-    icon: 'domain',
-    link: '/#/domain',
-    target: '_self'
-  },
-  {
-    title: 'ドメイン適用',
-    caption: 'ユーザー使用可能なドメインの設定',
-    icon: 'assignment_ind',
-    link: '/#/userDomain',
-    target: '_self'
-  },
 ]
 
 const version = process.env.version;

frontend/src/pages/AppManagement.vue

@@ -1,93 +0,0 @@
-<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>

frontend/src/pages/FlowChart.vue

@@ -290,8 +290,20 @@ 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=()=>{

frontend/src/pages/TenantDomain.vue

@@ -155,7 +155,8 @@ let editId = ref(0);
 
 const getDomain = async () => {
   loading.value = true;
-  const result = await api.get(`api/domains/1`);
+  const userId = authStore.userId;
+  const result = await api.get(`api/domain?userId=${userId}`);
   rows.value = result.data.map((item) => {
     return { id: item.id, tenantid: item.tenantid, name: item.name, url: item.url, user: item.kintoneuser, password: item.kintonepwd }
   });

frontend/src/router/routes.ts

@@ -25,9 +25,8 @@ const routes: RouteRecordRaw[] = [
       // { path: 'FlowChart', component: () => import('pages/FlowChart.vue') },
       { path: 'right', component: () => import('pages/testRight.vue') },
       { path: 'domain', component: () => import('pages/TenantDomain.vue') },
-      { path: 'userdomain', component: () => import('pages/UserDomain.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') }
     ],
   },

frontend/src/stores/flowEditor.ts

@@ -64,9 +64,7 @@ export const useFlowEditorStore = defineStore('flowEditor', {
       this.selectedFlow = flow;
       if(flow!==undefined){
         const eventId = flow.getRoot()?.name;
-        this.selectedEvent = this.eventTree.findEventById(eventId) as IKintoneEvent;
-      } else {
-        this.selectedEvent = undefined;
+        this.selectedEvent=this.eventTree.findEventById(eventId) as IKintoneEvent;
       }
     },
     setActiveNode(node: IActionNode) {
@@ -88,8 +86,8 @@ export const useFlowEditorStore = defineStore('flowEditor', {
       //eventTreeにバンドする
       this.eventTree.bindFlows(actionFlows);
       if (actionFlows === undefined || actionFlows.length === 0) {
-        this.setFlows([]);
-        this.selectFlow(undefined);
+        this.flows = [];
+        this.selectedFlow = undefined;
         this.expandedScreen =[];
         return;
       }
@@ -97,11 +95,6 @@ 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)=>{

frontend/src/stores/useAuthStore.ts

@@ -60,11 +60,11 @@ export const useAuthStore = defineStore('auth', {
       }
     },
     async getCurrentDomain(): Promise<IDomainInfo> {
-      const activedomain = await api.get(`api/activedomain`);
+      const activedomain = (await api.get(`api/activedomain`))?.data;
       return {
-        id: activedomain.data.id,
-        domainName: activedomain.data.name,
-        kintoneUrl: activedomain.data.url,
+        id: activedomain?.id,
+        domainName: activedomain?.name,
+        kintoneUrl: activedomain?.url,
       };
     },
     async getUserDomains(): Promise<IDomainInfo[]> {