[UI] version page

frontend/src/components/AppSelectBox.vue

@@ -1,24 +1,19 @@
 <template>
-  <div class="q-px-xs">
-    <div v-if="!isLoaded" class="spinner flex flex-center">
-      <q-spinner color="primary" size="3em" />
-    </div>
-    <q-table v-else class="app-table" :selection="type" row-key="id" v-model:selected="selected" flat bordered
-      virtual-scroll :columns="columns" :rows="rows" :pagination="pagination" :rows-per-page-options="[0]"
-      :filter="filter" style="max-height: 65vh;">
-      <template v-slot:body-cell-description="props">
-        <q-td :props="props">
-          <q-scroll-area class="description-cell">
-            <div v-html="props.row.description"></div>
-          </q-scroll-area>
-        </q-td>
-      </template>
-    </q-table>
-  </div>
+  <detail-field-table
+    detailField="description"
+    :name="name"
+    :type="type"
+    :filter="filter"
+    :columns="columns"
+    :fetchData="fetchApps"
+    @update:selected="(item) => { selected = item }"
+  />
 </template>
+
 <script lang="ts">
-import { ref, onMounted, reactive, watchEffect, PropType } from 'vue'
+import { ref, PropType } from 'vue';
 import { api } from 'boot/axios';
+import DetailFieldTable from './dialog/DetailFieldTable.vue';
 
 interface IAppDisplay {
   id: string;
@@ -29,50 +24,35 @@ interface IAppDisplay {
 
 export default {
   name: 'AppSelectBox',
+  components: {
+    DetailFieldTable
+  },
   props: {
     name: String,
     type: String,
     filter: String,
     filterInitRowsFunc: {
       type: Function as PropType<(app: IAppDisplay) => boolean>,
-    },
-    updateSelectApp: {
-      type: Function
     }
   },
   setup(props) {
+    const selected = ref<IAppDisplay[]>([]);
     const columns = [
       { name: 'id', required: true, label: 'ID', align: 'left', field: 'id', sortable: true, sort: (a: string, b: string) => parseInt(a, 10) - parseInt(b, 10) },
       { name: 'name', label: 'アプリ名', field: 'name', sortable: true, align: 'left' },
       { name: 'description', label: '概要', field: 'description', align: 'left', sortable: false },
       { name: 'createdate', label: '作成日時', field: 'createdate', align: 'left' }
-    ]
-    const isLoaded = ref(false);
-    const rows = reactive<IAppDisplay[]>([]);
-    const selected = ref([])
+    ];
 
-    watchEffect(()=>{
-      if (selected.value && selected.value[0] && props.updateSelectApp) {
-        props.updateSelectApp(selected.value[0])
-      }
-    });
-    onMounted(() => {
-      api.get('api/v1/allapps').then(res => {
-        res.data.apps.forEach((item: any) => {
-          const row : IAppDisplay = {
-            id: item.appId,
-            name: item.name,
-            description: item.description,
-            createdate: dateFormat(item.createdAt)
-          }
-          if (props.filterInitRowsFunc && !props.filterInitRowsFunc(row)) {
-            return;
-          }
-          rows.push(row);
-        });
-        isLoaded.value = true;
-      });
-    });
+    const fetchApps = async () => {
+      const res = await api.get('api/v1/allapps');
+      return res.data.apps.map((item: any) => ({
+        id: item.appId,
+        name: item.name,
+        description: item.description,
+        createdate: dateFormat(item.createdAt)
+      })).filter(app => !props.filterInitRowsFunc || props.filterInitRowsFunc(app));
+    };
 
     const dateFormat = (dateStr: string) => {
       const date = new Date(dateStr);
@@ -84,31 +64,13 @@ export default {
       const minutes = pad(date.getMinutes());
       const seconds = pad(date.getSeconds());
       return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
-    }
+    };
+
     return {
       columns,
-      rows,
-      selected,
-      isLoaded,
-      pagination: ref({
-        rowsPerPage: 10
-      })
-    }
-  },
-
-}
-</script>
-<style lang="scss">
-.description-cell {
-  height: 60px;
-  width: 300px;
-  max-height: 60px;
-  max-width: 300px;
-  white-space: break-spaces;
-}
-
-.spinner {
-  min-height: 300px;
-  min-width: 400px;
-}
-</style>
+      fetchApps,
+      selected
+    };
+  }
+};
+</script>