From 7ac722081e4cdd850ad63ae67d1643ee546382d1 Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Mon, 18 Nov 2024 09:51:49 +0800
Subject: [PATCH 1/6] [bugfix] Improve App management page

1. reload apps when change domain
2. fix date format
3. fix order
---
 frontend/src/pages/AppManagement.vue | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/AppManagement.vue b/frontend/src/pages/AppManagement.vue
index 254efab..38ca627 100644
--- a/frontend/src/pages/AppManagement.vue
+++ b/frontend/src/pages/AppManagement.vue
@@ -39,11 +39,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, reactive } from 'vue';
+import { ref, onMounted, watch, reactive } from 'vue';
 import { api } from 'boot/axios';
 import { useAuthStore } from 'stores/useAuthStore';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { router } from 'src/router';
+import { date } from 'quasar'
 
 interface IUser{
    first_name:string;
@@ -78,7 +79,7 @@ const columns = [
   { name: 'url', label: 'URL', field: 'url', align: 'left', sortable: true },
   { name: 'user', label: '最後更新者', field: 'user', align: 'left', sortable: true},
   { name: 'updatetime', label: '最後更新日', field: 'updatetime', align: 'left', sortable: true},
-  { name: 'version', label: 'バージョン', field: 'version', align: 'left'},
+  { name: 'version', label: 'バージョン', field: 'version', align: 'left', sortable: true},
   { name: 'actions', label: '操作', field: 'actions' }
 ];
 
@@ -95,13 +96,14 @@ const getApps = async () => {
   const result = await api.get('api/apps');
   rows.value = result.data.map((item:IManagedApp) => {
     return {
-      id: item.appid,
+      id: Number(item.appid),
       name: item.appname,
       url: `${item.domainurl}/k/${item.appid}`,
       user: `${item.user.first_name} ${item.user.last_name}` ,
-      updatetime:item.update_time,
-      version: item.version }
-  });
+      updatetime:date.formatDate(item.update_time, 'YYYY/MM/DD HH:mm'),
+      version: Number(item.version)
+    }
+  }).sort((a, b) => a.id - b.id); // set default order
   loading.value = false;
 }
 
@@ -110,6 +112,10 @@ onMounted(async () => {
   await getApps();
 });
 
+watch(() => authStore.currentDomain.id, async () => {
+  await getApps();
+});
+
 const addRow = () => {
   return
 }

From f26ef1dd425663872cccb1835f39d36bcf7e8d56 Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Mon, 18 Nov 2024 16:27:01 +0800
Subject: [PATCH 2/6] [feature] Update UI in flowchart and add return btn

---
 frontend/src/components/left/AppDisplay.vue | 89 +++++++++++++++++++++
 frontend/src/pages/FlowChart.vue            | 11 ++-
 2 files changed, 94 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/left/AppDisplay.vue

diff --git a/frontend/src/components/left/AppDisplay.vue b/frontend/src/components/left/AppDisplay.vue
new file mode 100644
index 0000000..ec06074
--- /dev/null
+++ b/frontend/src/components/left/AppDisplay.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="q-gutter-sm row items-start">
+    <q-breadcrumbs class="text-primary">
+      <q-breadcrumbs-el icon="arrow_back" label="アプリ管理" to="/app" />
+    </q-breadcrumbs>
+  </div>
+  <div class="row app-box">
+    <a class="full-width" :href="!store.appInfo?'':`${authStore.currentDomain.kintoneUrl}/k/${store.appInfo?.appId}`" target="_blank" title="Kiontoneへ">
+      <div class="col-12 self-center ellipsis">
+        <q-icon
+          class="q-ma-sm"
+          name="open_in_new"
+          color="grey-9"
+        />{{ store.appInfo?.name }}
+      </div>
+    </a>
+  </div>
+  <ShowDialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeDg" min-width="50vw" min-height="50vh" >
+    <template v-slot:toolbar>
+        <q-input  dense debounce="300" v-model="filter" placeholder="検索" clearable>
+          <template v-slot:before>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+      <AppSelectBox ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelectBox>
+  </ShowDialog>
+</template>
+
+<script lang="ts">
+import { defineComponent,ref } from 'vue';
+import {AppInfo} from '../../types/ActionTypes'
+import ShowDialog from '../../components/ShowDialog.vue';
+import AppSelectBox from '../../components/AppSelectBox.vue';
+import { useFlowEditorStore } from 'stores/flowEditor';
+import { useAuthStore } from 'src/stores/useAuthStore';
+export default defineComponent({
+  name: 'AppSelector',
+  emits:[
+    "appSelected"
+  ],
+  components:{
+    AppSelectBox,
+    ShowDialog
+  },
+  setup(props, context) {
+
+    const store = useFlowEditorStore();
+    const authStore=useAuthStore();
+    const appDg = ref();
+    const showSelectApp=ref(false);
+
+    const closeDg=(val :any)=>{
+      showSelectApp.value=false;
+      console.log("Dialog closed->",val);
+      if (val == 'OK') {
+          const data  = appDg.value.selected[0];
+          console.log(data);
+          const appInfo={
+            appId:data.id ,
+            name:data.name
+          };
+          store.setApp(appInfo);
+          store.loadFlow();
+      }
+    }
+    const showAppDialog=()=>{
+      showSelectApp.value=true;
+    }
+    return {
+      store,
+      authStore,
+      showSelectApp,
+      showAppDialog,
+      closeDg,
+      appDg,
+      filter:ref('')
+    }
+  }
+});
+</script>
+<style lang="scss">
+  .app-box{
+    margin-top: 4px;
+    padding: 0.25em;
+    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;
+  }
+</style>
diff --git a/frontend/src/pages/FlowChart.vue b/frontend/src/pages/FlowChart.vue
index 506107d..bdef9d1 100644
--- a/frontend/src/pages/FlowChart.vue
+++ b/frontend/src/pages/FlowChart.vue
@@ -3,11 +3,10 @@
     <q-layout container class="absolute-full shadow-2 rounded-borders">
       <div class="q-pa-sm q-gutter-sm  ">
         <q-drawer side="left" :overlay="true" bordered v-model="drawerLeft" :show-if-above="false" elevated>
-          <div class="flex-center fixed-top app-selector">
-            <AppSelector />
+          <div class="flex-center fixed-top app-display">
+            <app-display />
           </div>
-
-          <div class="flex-center absolute-full" style="padding-top:65px;padding-left:15px;padding-right:15px;">
+          <div class="flex-center absolute-full" style="padding-top:85px;padding-left:15px;padding-right:15px;">
             <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: '0' }">
               <EventTree />
             </q-scroll-area>
@@ -78,7 +77,7 @@ import NodeItem from 'src/components/main/NodeItem.vue';
 import ShowDialog from 'components/ShowDialog.vue';
 import ActionSelect from 'components/ActionSelect.vue';
 import PropertyPanel from 'components/right/PropertyPanel.vue';
-import AppSelector from 'components/left/AppSelector.vue';
+import AppDisplay from 'components/left/AppDisplay.vue';
 import EventTree from 'components/left/EventTree.vue';
 import { FlowCtrl } from '../control/flowctrl';
 import { useQuasar } from 'quasar';
@@ -305,7 +304,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
-.app-selector {
+.app-display {
   padding: 15px;
   z-index: 999;
 }

From d833ebb086afde45fdc1b7ebb011fefe4f0cb1c5 Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Mon, 18 Nov 2024 18:47:25 +0800
Subject: [PATCH 3/6] [feature] Add id field in FlowChart page

---
 frontend/src/pages/AppManagement.vue | 21 ++-------------------
 frontend/src/pages/FlowChart.vue     | 25 ++++++++++++++++++++++++-
 frontend/src/router/routes.ts        |  2 +-
 frontend/src/types/AppTypes.ts       | 14 ++++++++++++++
 4 files changed, 41 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/types/AppTypes.ts

diff --git a/frontend/src/pages/AppManagement.vue b/frontend/src/pages/AppManagement.vue
index 38ca627..19b10d3 100644
--- a/frontend/src/pages/AppManagement.vue
+++ b/frontend/src/pages/AppManagement.vue
@@ -45,21 +45,7 @@ import { useAuthStore } from 'stores/useAuthStore';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { router } from 'src/router';
 import { date } from 'quasar'
-
-interface IUser{
-   first_name:string;
-   last_name:string;
-   email:string;
-}
-
-interface IManagedApp{
-  appid:string;
-  appname:string;
-  domainurl:string;
-  version:string;
-  user:IUser;
-  update_time:string;
-}
+import { IManagedApp } from 'src/types/AppTypes';
 
 interface IAppDisplay{
   id:string;
@@ -70,7 +56,6 @@ interface IAppDisplay{
   updatetime:string;
 }
 
-
 const authStore = useAuthStore();
 
 const columns = [
@@ -89,8 +74,6 @@ const filter = ref('');
 const rows = ref<IAppDisplay[]>([]);
 const store = useFlowEditorStore();
 
-const tenantid = ref(authStore.currentDomain.id);
-
 const getApps = async () => {
   loading.value = true;
   const result = await api.get('api/apps');
@@ -133,6 +116,6 @@ const editFlow = (app:IAppDisplay) => {
     appId: app.id,
     name: app.name
   });
-  router.push('/FlowChart');
+  router.push('/FlowChart/' + app.id);
 };
 </script>
diff --git a/frontend/src/pages/FlowChart.vue b/frontend/src/pages/FlowChart.vue
index bdef9d1..225740b 100644
--- a/frontend/src/pages/FlowChart.vue
+++ b/frontend/src/pages/FlowChart.vue
@@ -62,16 +62,22 @@
       </template>
       <action-select ref="appDg" name="model" :filter="filter"  type="single" @clearFilter="onClearFilter" ></action-select>
     </ShowDialog>
-
+    <q-inner-loading
+      :showing="initLoading"
+      label="読み込み中..."
+    />
   </q-page>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, computed, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
 import { IActionNode, ActionNode, IActionFlow, ActionFlow, RootAction, IActionProperty } from 'src/types/ActionTypes';
+import { IManagedApp } from 'src/types/AppTypes';
 import { storeToRefs } from 'pinia';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { useAuthStore } from 'stores/useAuthStore';
+import { api } from 'boot/axios';
 
 import NodeItem from 'src/components/main/NodeItem.vue';
 import ShowDialog from 'components/ShowDialog.vue';
@@ -81,12 +87,15 @@ import AppDisplay from 'components/left/AppDisplay.vue';
 import EventTree from 'components/left/EventTree.vue';
 import { FlowCtrl } from '../control/flowctrl';
 import { useQuasar } from 'quasar';
+
 const deployLoading = ref(false);
 const saveLoading = ref(false);
+const initLoading = ref(true);
 const drawerLeft = ref(false);
 const $q = useQuasar();
 const store = useFlowEditorStore();
 const authStore = useAuthStore();
+const route = useRoute()
 
 const appDg = ref();
 const prevNodeIfo = ref({
@@ -289,10 +298,24 @@ const onSaveAllFlow= async ()=>{
 }
 
 const fetchData = async () => {
+  initLoading.value = true;
+  if (store.appInfo === undefined && route?.params?.id !== undefined) {
+    const { appid, appname } = await fetchAppById(route.params.id as string);
+    store.setApp({
+      appId: appid,
+      name: appname
+    });
+  };
   await store.loadFlow();
+  initLoading.value = false
   drawerLeft.value = true;
 }
 
+const fetchAppById = async(id: string) => {
+  const result = await api.get('api/apps');
+  return result.data.find((item: IManagedApp) => item.appid === id ) as IManagedApp;
+}
+
 const onClearFilter=()=>{
   filter.value='';
 }
diff --git a/frontend/src/router/routes.ts b/frontend/src/router/routes.ts
index 66b2b26..95e5cbd 100644
--- a/frontend/src/router/routes.ts
+++ b/frontend/src/router/routes.ts
@@ -6,7 +6,7 @@ const routes: RouteRecordRaw[] = [
     component: () => import('pages/LoginPage.vue')
   },
   {
-    path:'/FlowChart',
+    path:'/FlowChart/:id',
     component:()=>import('layouts/MainLayout.vue'),
     children:[
       {path:'',component:()=>import('pages/FlowChart.vue')}
diff --git a/frontend/src/types/AppTypes.ts b/frontend/src/types/AppTypes.ts
new file mode 100644
index 0000000..97c084f
--- /dev/null
+++ b/frontend/src/types/AppTypes.ts
@@ -0,0 +1,14 @@
+interface IUser {
+  first_name: string;
+  last_name: string;
+  email: string;
+}
+
+export interface IManagedApp {
+  appid: string;
+  appname: string;
+  domainurl: string;
+  version: string;
+  user: IUser;
+  update_time: string;
+}

From 96ec2a059e29675de688c8f75f067c627172ddce Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Mon, 18 Nov 2024 22:25:47 +0800
Subject: [PATCH 4/6] [UI] use breadcrumbs for flowchart

---
 frontend/src/components/left/AppDisplay.vue | 89 ---------------------
 frontend/src/pages/FlowChart.vue            | 32 +++++---
 2 files changed, 21 insertions(+), 100 deletions(-)
 delete mode 100644 frontend/src/components/left/AppDisplay.vue

diff --git a/frontend/src/components/left/AppDisplay.vue b/frontend/src/components/left/AppDisplay.vue
deleted file mode 100644
index ec06074..0000000
--- a/frontend/src/components/left/AppDisplay.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <div class="q-gutter-sm row items-start">
-    <q-breadcrumbs class="text-primary">
-      <q-breadcrumbs-el icon="arrow_back" label="アプリ管理" to="/app" />
-    </q-breadcrumbs>
-  </div>
-  <div class="row app-box">
-    <a class="full-width" :href="!store.appInfo?'':`${authStore.currentDomain.kintoneUrl}/k/${store.appInfo?.appId}`" target="_blank" title="Kiontoneへ">
-      <div class="col-12 self-center ellipsis">
-        <q-icon
-          class="q-ma-sm"
-          name="open_in_new"
-          color="grey-9"
-        />{{ store.appInfo?.name }}
-      </div>
-    </a>
-  </div>
-  <ShowDialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeDg" min-width="50vw" min-height="50vh" >
-    <template v-slot:toolbar>
-        <q-input  dense debounce="300" v-model="filter" placeholder="検索" clearable>
-          <template v-slot:before>
-            <q-icon name="search" />
-          </template>
-        </q-input>
-      </template>
-      <AppSelectBox ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelectBox>
-  </ShowDialog>
-</template>
-
-<script lang="ts">
-import { defineComponent,ref } from 'vue';
-import {AppInfo} from '../../types/ActionTypes'
-import ShowDialog from '../../components/ShowDialog.vue';
-import AppSelectBox from '../../components/AppSelectBox.vue';
-import { useFlowEditorStore } from 'stores/flowEditor';
-import { useAuthStore } from 'src/stores/useAuthStore';
-export default defineComponent({
-  name: 'AppSelector',
-  emits:[
-    "appSelected"
-  ],
-  components:{
-    AppSelectBox,
-    ShowDialog
-  },
-  setup(props, context) {
-
-    const store = useFlowEditorStore();
-    const authStore=useAuthStore();
-    const appDg = ref();
-    const showSelectApp=ref(false);
-
-    const closeDg=(val :any)=>{
-      showSelectApp.value=false;
-      console.log("Dialog closed->",val);
-      if (val == 'OK') {
-          const data  = appDg.value.selected[0];
-          console.log(data);
-          const appInfo={
-            appId:data.id ,
-            name:data.name
-          };
-          store.setApp(appInfo);
-          store.loadFlow();
-      }
-    }
-    const showAppDialog=()=>{
-      showSelectApp.value=true;
-    }
-    return {
-      store,
-      authStore,
-      showSelectApp,
-      showAppDialog,
-      closeDg,
-      appDg,
-      filter:ref('')
-    }
-  }
-});
-</script>
-<style lang="scss">
-  .app-box{
-    margin-top: 4px;
-    padding: 0.25em;
-    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;
-  }
-</style>
diff --git a/frontend/src/pages/FlowChart.vue b/frontend/src/pages/FlowChart.vue
index 225740b..83f5f29 100644
--- a/frontend/src/pages/FlowChart.vue
+++ b/frontend/src/pages/FlowChart.vue
@@ -3,10 +3,7 @@
     <q-layout container class="absolute-full shadow-2 rounded-borders">
       <div class="q-pa-sm q-gutter-sm  ">
         <q-drawer side="left" :overlay="true" bordered v-model="drawerLeft" :show-if-above="false" elevated>
-          <div class="flex-center fixed-top app-display">
-            <app-display />
-          </div>
-          <div class="flex-center absolute-full" style="padding-top:85px;padding-left:15px;padding-right:15px;">
+          <div class="flex-center absolute-full" style="padding:15px">
             <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: '0' }">
               <EventTree />
             </q-scroll-area>
@@ -41,8 +38,24 @@
       </div>
       <q-btn flat dense round
               :icon="drawerLeft?'keyboard_double_arrow_left':'keyboard_double_arrow_right'"
-              :style="[drawerLeft?{'left':'300px'}:{'left':'0px'}]"
+              :style="{'left': fixedLeftPosition}"
               @click="drawerLeft=!drawerLeft" class="expand" />
+      <q-breadcrumbs v-if="store.appInfo" class="fixed q-pl-md"
+              :style="{'left': fixedLeftPosition}">
+        <q-breadcrumbs-el icon="widgets" label="アプリ管理" to="/app" />
+        <q-breadcrumbs-el>
+          <template v-slot>
+            <a class="full-width" :href="!store.appInfo?'':`${authStore.currentDomain.kintoneUrl}/k/${store.appInfo?.appId}`" target="_blank" title="Kiontoneへ">
+              {{ store.appInfo?.name }}
+              <q-icon
+                class="q-ma-xs"
+                name="open_in_new"
+                color="grey-9"
+              />
+            </a>
+          </template>
+        </q-breadcrumbs-el>
+      </q-breadcrumbs>
       <div class="q-pa-md q-gutter-sm" :style="{minWidth: minPanelWidth}">
         <div class="flowchart" v-if="store.currentFlow" :style="[drawerLeft?{paddingLeft:'300px'}:{}]">
           <node-item v-if="rootNode!==undefined" :key="rootNode.id" :isSelected="rootNode === store.activeNode"
@@ -83,7 +96,6 @@ import NodeItem from 'src/components/main/NodeItem.vue';
 import ShowDialog from 'components/ShowDialog.vue';
 import ActionSelect from 'components/ActionSelect.vue';
 import PropertyPanel from 'components/right/PropertyPanel.vue';
-import AppDisplay from 'components/left/AppDisplay.vue';
 import EventTree from 'components/left/EventTree.vue';
 import { FlowCtrl } from '../control/flowctrl';
 import { useQuasar } from 'quasar';
@@ -119,6 +131,9 @@ const minPanelWidth=computed(()=>{
     return "300px";
   }
 });
+const fixedLeftPosition = computed(()=>{
+  return drawerLeft.value?"300px":"0px";
+});
 
 const addNode = (node: IActionNode, inputPoint: string) => {
   if (drawerRight.value) {
@@ -327,11 +342,6 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
-.app-display {
-  padding: 15px;
-  z-index: 999;
-}
-
 .flowchart {
   padding-top: 10px;
 }

From 40074fb16275f4eba6d444f60cf2773ff6478e0e Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Mon, 18 Nov 2024 23:25:45 +0800
Subject: [PATCH 5/6] [UI] prevent change domain in /chartflow and loading

---
 frontend/src/components/DomainSelector.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/DomainSelector.vue b/frontend/src/components/DomainSelector.vue
index c5747a6..2fb7c60 100644
--- a/frontend/src/components/DomainSelector.vue
+++ b/frontend/src/components/DomainSelector.vue
@@ -1,12 +1,15 @@
 <template>
     <q-btn-dropdown
-      color="primay"
+      class="customized-disabled-btn"
       push
       flat
       no-caps
       icon="share"
       size="md"
       :label="userStore.currentDomain.domainName"
+      :disable-dropdown="isUnclickable"
+      :dropdown-icon="isUnclickable ? 'none' : ''"
+      :disable="isUnclickable"
     >
       <q-list>
         <q-item v-for="domain in domains" :key="domain.domainName"
@@ -26,18 +29,32 @@
 <script setup lang="ts" >
 import { IDomainInfo } from 'src/types/ActionTypes';
 import { useAuthStore,IUserState } from 'stores/useAuthStore';
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
 const userStore = useAuthStore();
+const route = useRoute()
 const domains = ref<IDomainInfo[]>([]);
 (async ()=>{
   domains.value = await userStore.getUserDomains();
 })();
 
+const isUnclickable = computed(()=>{
+  return route.path.startsWith('/FlowChart/') || domains.value === undefined || domains.value.length === 0;
+});
+
+
 const onItemClick=(domain:IDomainInfo)=>{
   console.log(domain);
   userStore.setCurrentDomain(domain);
 }
 </script>
 <style lang="scss">
+.q-btn.disabled.customized-disabled-btn {
+  opacity: 1 !important;
+  cursor: default !important;
+}
 
+.q-btn.disabled.customized-disabled-btn * {
+  cursor: default !important;
+}
 </style>

From ed27a18d25b124d1bee2b32dfbe2bc673856bd69 Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Mon, 18 Nov 2024 23:35:24 +0800
Subject: [PATCH 6/6] [UI] fix loading behavious in /flowChart

---
 frontend/src/pages/AppManagement.vue | 1 +
 frontend/src/pages/FlowChart.vue     | 1 +
 2 files changed, 2 insertions(+)

diff --git a/frontend/src/pages/AppManagement.vue b/frontend/src/pages/AppManagement.vue
index 19b10d3..403cb4c 100644
--- a/frontend/src/pages/AppManagement.vue
+++ b/frontend/src/pages/AppManagement.vue
@@ -116,6 +116,7 @@ const editFlow = (app:IAppDisplay) => {
     appId: app.id,
     name: app.name
   });
+  store.selectFlow(undefined);
   router.push('/FlowChart/' + app.id);
 };
 </script>
diff --git a/frontend/src/pages/FlowChart.vue b/frontend/src/pages/FlowChart.vue
index 83f5f29..2c0d150 100644
--- a/frontend/src/pages/FlowChart.vue
+++ b/frontend/src/pages/FlowChart.vue
@@ -77,6 +77,7 @@
     </ShowDialog>
     <q-inner-loading
       :showing="initLoading"
+      color="primary"
       label="読み込み中..."
     />
   </q-page>