ダイアログ表示時snipper追加

2023-11-15 00:18:06 +09:00
parent 17760a6926
commit 34d368b730
12 changed files with 79 additions and 60 deletions
--- 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/"

--- 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,
    }
  },

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

 }
--- 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'
--- 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>
--- 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>
--- 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>

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

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