From 34d368b7304d88263a837ef363a614ec4b325bac Mon Sep 17 00:00:00 2001
From: "maxiaozhe@alicorns.co.jp" <maxiaozhe@alicorns.co.jp>
Date: Wed, 15 Nov 2023 00:18:06 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=80=E3=82=A4=E3=82=A2=E3=83=AD=E3=82=B0?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E6=99=82snipper=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/.env                                |  2 +-
 frontend/src/components/ActionSelect.vue     | 30 +++++-----
 frontend/src/components/AppSelect.vue        | 31 ++++++----
 frontend/src/components/FieldSelect.vue      | 59 +++++++++++---------
 frontend/src/components/ShowDialog.vue       |  3 +-
 frontend/src/components/left/AppSelector.vue |  2 +-
 frontend/src/components/right/FieldInput.vue |  2 +-
 frontend/src/pages/FlowChart.vue             |  2 +-
 frontend/src/pages/FlowChartTest.vue         |  2 +-
 frontend/src/pages/RuleEditor.vue            |  2 +-
 frontend/src/pages/UserDomain.vue            |  2 +-
 frontend/src/pages/testQursar.vue            |  2 +-
 12 files changed, 79 insertions(+), 60 deletions(-)

diff --git a/frontend/.env b/frontend/.env
index f55f03b..019b6f4 100644
--- a/frontend/.env
+++ b/frontend/.env
@@ -1,3 +1,3 @@
 KAB_BACKEND_URL="https://kab-backend.azurewebsites.net/"
-#AB_BACKEND_URL="http://127.0.0.1:8000/"
+#KAB_BACKEND_URL="http://127.0.0.1:8000/"
 
diff --git a/frontend/src/components/ActionSelect.vue b/frontend/src/components/ActionSelect.vue
index d934ac5..c38cdd7 100644
--- a/frontend/src/components/ActionSelect.vue
+++ b/frontend/src/components/ActionSelect.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="q-pa-md">
-    <q-table  row-key="name" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows"
+    <div v-if="!isLoaded" class="spinner flex flex-center">
+      <q-spinner  color="primary" size="3em" />
+    </div>
+    <q-table v-else  row-key="name" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows"
     class="action-table"
     flat bordered
     virtual-scroll
@@ -20,20 +23,20 @@ export default {
     type: String
   },
   setup() {
-  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 }
-  ]
-  const rows = reactive([])
+    const isLoaded=ref(false);
+    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 }
+    ];
+    const rows = reactive([])
     onMounted(async () => {
-        await api.get('api/kintone/1').then(res =>{
-         res.data.forEach((item) =>
+        const res =await api.get('api/kintone/1');
+        res.data.forEach((item) =>
         {
           rows.push({name:item.name,desc:item.desc,content:item.content});
-        }
-        )
-      });
+        });
+        isLoaded.value=true;
       });
     return {
       columns,
@@ -41,7 +44,8 @@ export default {
       selected: ref([]),
       pagination:ref({
         rowsPerPage:0
-      })
+      }),
+      isLoaded,
     }
   },
 
diff --git a/frontend/src/components/AppSelect.vue b/frontend/src/components/AppSelect.vue
index 809c6a7..4d30fb8 100644
--- a/frontend/src/components/AppSelect.vue
+++ b/frontend/src/components/AppSelect.vue
@@ -1,6 +1,9 @@
 <template>
-  <div class="q-pa-md">
-    <q-table  :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" >
+  <div class="q-pa-md" >
+    <div v-if="!isLoaded" class="spinner flex flex-center">
+      <q-spinner  color="primary" size="3em" />
+    </div>
+    <q-table v-else :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" >
       <template v-slot:body-cell-description="props">
           <q-td :props="props">
               <q-scroll-area  class="description-cell">
@@ -11,7 +14,7 @@
     </q-table>
   </div>
 </template>
-<script >
+<script lang="ts">
 import { ref,onMounted,reactive } from 'vue'
 import { api } from 'boot/axios';
 import { LeftDataBus } from './flowEditor/left/DataBus';
@@ -29,24 +32,25 @@ export default {
   { name: 'description', label: '概要', field: 'description',align:'left', sortable: false },
   { name: 'createdate', label: '作成日時', field: 'createdate',align:'left'}
   ]
-  const rows = reactive([])
+    const isLoaded=ref(false);
+    const rows :any[]= reactive([]);
     onMounted( () => {
         api.get('api/v1/allapps').then(res =>{
-          res.data.apps.forEach((item) =>
+          res.data.apps.forEach((item:any) =>
               {
                 rows.push({
                   id:item.appId,
                   name:item.name,
                   description:item.description,
                   createdate:dateFormat(item.createdAt)});
-              }
-            )
-        });
+                });
+                isLoaded.value=true;
+              });
       });
 
-    const dateFormat=(dateStr)=>{
+    const dateFormat=(dateStr:string)=>{
       const date = new Date(dateStr);
-      const pad = (num) => num.toString().padStart(2, '0');
+      const pad = (num:number) => num.toString().padStart(2, '0');
       const year = date.getFullYear();
       const month = pad(date.getMonth() + 1);
       const day = pad(date.getDate());
@@ -58,7 +62,8 @@ export default {
     return {
       columns,
       rows,
-      selected: ref([])
+      selected: ref([]),
+      isLoaded
     }
   },
 
@@ -71,4 +76,8 @@ export default {
   max-height: 60px;
   max-width: 300px;
 }
+.spinner{
+  min-height: 300px;
+  min-width: 400px;
+}
 </style>
diff --git a/frontend/src/components/FieldSelect.vue b/frontend/src/components/FieldSelect.vue
index 66fdc66..beee988 100644
--- a/frontend/src/components/FieldSelect.vue
+++ b/frontend/src/components/FieldSelect.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="q-pa-md">
-    <q-table   row-key="name"  :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
+    <div v-if="!isLoaded" class="spinner flex flex-center">
+      <q-spinner  color="primary" size="3em" />
+    </div>
+    <q-table v-else  row-key="name"  :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
   </div>
 </template>
 <script>
@@ -15,32 +18,34 @@ export default {
     appId:Number
   },
   setup(props) {
-  const columns = [
-  { name: 'name', required: true,label: 'フィールド名',align: 'left',field: row=>row.name,sortable: true},
-  { name: 'code', label: 'フィールドコード', align: 'left',field: 'code', sortable: true },
-  { name: 'type', label: 'フィールドタイプ', align: 'left',field: 'type', sortable: true }
-  ]
-  const rows = reactive([])
-    onMounted( () => {
-        api.get('api/v1/appfields', {
-              params:{
-                app: props.appId
-              }
-          }).then(res =>{
-         let fields = res.data.properties;
-         console.log(fields);
-         Object.keys(fields).forEach((key) =>
-        {
-          rows.push({name:fields[key].label,code:fields[key].code,type:fields[key].type});
-        }
-        )
-      });
-      });
-    return {
-      columns,
-      rows,
-      selected: ref([]),
-    }
+    const isLoaded=ref(false);
+    const columns = [
+    { name: 'name', required: true,label: 'フィールド名',align: 'left',field: row=>row.name,sortable: true},
+    { name: 'code', label: 'フィールドコード', align: 'left',field: 'code', sortable: true },
+    { name: 'type', label: 'フィールドタイプ', align: 'left',field: 'type', sortable: true }
+    ]
+    const rows = reactive([])
+      onMounted( () => {
+          api.get('api/v1/appfields', {
+                params:{
+                  app: props.appId
+                }
+            }).then(res =>{
+              let fields = res.data.properties;
+              console.log(fields);
+              Object.keys(fields).forEach((key) =>
+              {
+                rows.push({name:fields[key].label,code:fields[key].code,type:fields[key].type});
+              });
+              isLoaded.value=true;
+        });
+        });
+      return {
+        columns,
+        rows,
+        selected: ref([]),
+        isLoaded
+      }
   },
 
 }
diff --git a/frontend/src/components/ShowDialog.vue b/frontend/src/components/ShowDialog.vue
index f7bf41d..fd1fbe5 100644
--- a/frontend/src/components/ShowDialog.vue
+++ b/frontend/src/components/ShowDialog.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="q-pa-md q-gutter-sm">
     <q-dialog :model-value="visible" persistent>
-      <q-card style="min-width: 350px">
+      <q-card :style="{minWidth : width }">
         <q-card-section>
           <div class="text-h6">{{ name }}選択</div>
         </q-card-section>
@@ -24,6 +24,7 @@ export default {
   props: {
     name:String,
     visible: Boolean,
+    width:String
   },
   emits: [
     'close'
diff --git a/frontend/src/components/left/AppSelector.vue b/frontend/src/components/left/AppSelector.vue
index a2728f6..1c7410c 100644
--- a/frontend/src/components/left/AppSelector.vue
+++ b/frontend/src/components/left/AppSelector.vue
@@ -22,7 +22,7 @@
       ></q-btn>
     </div>
   </div>
-  <ShowDialog v-model:visible="showSelectApp" name="アプリ" @close="closeDg">
+  <ShowDialog v-model:visible="showSelectApp" name="アプリ" @close="closeDg" width="500px">
       <AppSelect ref="appDg" name="アプリ" type="single"></AppSelect>
   </ShowDialog>
 </template>
diff --git a/frontend/src/components/right/FieldInput.vue b/frontend/src/components/right/FieldInput.vue
index 8448b39..722732c 100644
--- a/frontend/src/components/right/FieldInput.vue
+++ b/frontend/src/components/right/FieldInput.vue
@@ -17,7 +17,7 @@
   <q-icon name="search" class="cursor-pointer"  @click="showDg"/>
   </template>
 </q-field>
-<show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg">
+<show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px">
   <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
 </show-dialog>
 </template>
diff --git a/frontend/src/pages/FlowChart.vue b/frontend/src/pages/FlowChart.vue
index 2e25b38..a0781b8 100644
--- a/frontend/src/pages/FlowChart.vue
+++ b/frontend/src/pages/FlowChart.vue
@@ -44,7 +44,7 @@
       </div>
       <PropertyPanel :actionNode="state.activeNode" v-model:drawerRight="drawerRight"></PropertyPanel>
     </q-layout>
-  <ShowDialog v-model:visible="showAddAction" name="アクション" @close="closeDg">
+  <ShowDialog v-model:visible="showAddAction" name="アクション" @close="closeDg" width="350px">
       <action-select ref="appDg" name="model" type="single"></action-select>
   </ShowDialog>
 
diff --git a/frontend/src/pages/FlowChartTest.vue b/frontend/src/pages/FlowChartTest.vue
index b98881e..46d6b4f 100644
--- a/frontend/src/pages/FlowChartTest.vue
+++ b/frontend/src/pages/FlowChartTest.vue
@@ -13,7 +13,7 @@
       </div>
   </q-page>
   <PropertyPanel :actionNode="state.activeNode" v-model:drawerRight="drawerRight"></PropertyPanel>
-  <show-dialog v-model:visible="showAddAction" name="アクション" @close="closeDg">
+  <show-dialog v-model:visible="showAddAction" name="アクション" @close="closeDg" width="350px">
       <action-select ref="appDg" name="アクション" type="single"></action-select>
   </show-dialog>
 </template>
diff --git a/frontend/src/pages/RuleEditor.vue b/frontend/src/pages/RuleEditor.vue
index 2d515d0..2793466 100644
--- a/frontend/src/pages/RuleEditor.vue
+++ b/frontend/src/pages/RuleEditor.vue
@@ -22,7 +22,7 @@
         <div class="q-pa-md">
           <q-select v-model="model" :options="options" label="Standard"/>
           <q-btn :label="model+'選択'" color="primary" @click="showDg()" />
-          <show-dialog v-model:visible="show" :name="model" @close="closeDg">
+          <show-dialog v-model:visible="show" :name="model" @close="closeDg" width="400px">
             <template v-if="model=='アプリ'">
               <app-select ref="appDg" :name="model" type="single"></app-select>
             </template>
diff --git a/frontend/src/pages/UserDomain.vue b/frontend/src/pages/UserDomain.vue
index 4e2fe36..38115bb 100644
--- a/frontend/src/pages/UserDomain.vue
+++ b/frontend/src/pages/UserDomain.vue
@@ -150,7 +150,7 @@ export default {
       </template>
     </q-table>
 
-    <show-dialog v-model:visible="show" name="ドメイン" @close="closeDg">
+    <show-dialog v-model:visible="show" name="ドメイン" @close="closeDg" width="350px">
         <domain-select ref="domainDg" name="ドメイン" type="multiple"></domain-select>
     </show-dialog>
 
diff --git a/frontend/src/pages/testQursar.vue b/frontend/src/pages/testQursar.vue
index d475877..83e7e6b 100644
--- a/frontend/src/pages/testQursar.vue
+++ b/frontend/src/pages/testQursar.vue
@@ -4,7 +4,7 @@
     <div class="q-pa-md column content-center items-center">
       <div>
         <q-btn label="アクション選択" color="primary" @click="showDg()" v-if="addshow" />
-        <show-dialog v-model:visible="show" name="アクション" @close="closeDg">
+        <show-dialog v-model:visible="show" name="アクション" @close="closeDg" width="350px">
           <action-select ref="appDg" name="アクション" type="single"></action-select>
         </show-dialog>
       </div>