ダイアログ表示時snipper追加

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/"
 

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 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 =>{
+        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,
     }
   },
 

frontend/src/components/AppSelect.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="q-pa-md">
+  <div class="q-pa-md" >
-    <q-table  :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 :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>

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,6 +18,7 @@ export default {
     appId:Number
   },
   setup(props) {
+    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 },
@@ -32,14 +36,15 @@ export default {
               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
       }
   },
 

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'

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>

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>

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>
 

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>

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>

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>
 

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>