[UI] version page

2024-12-06 23:29:16 +08:00
parent 7221f97139
commit 305868f091
10 changed files with 333 additions and 125 deletions
--- a/frontend/src/components/AppSelectBox.vue
+++ b/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>
--- a/frontend/src/components/ShowDialog.vue
+++ b/frontend/src/components/ShowDialog.vue
@@ -4,7 +4,7 @@
      <q-card class="" style="min-width: 40vw; max-width: 80vw; max-height: 95vh;" :style="cardStyle">
        <q-toolbar class="bg-grey-4">
          <q-toolbar-title>{{ name }}</q-toolbar-title>
-          <q-space></q-space>
+          <q-space v-if="$slots.toolbar"></q-space>
          <slot name="toolbar"></slot>
          <q-btn flat round dense icon="close" @click="CloseDialogue('Cancel')" />
        </q-toolbar>
@@ -41,7 +41,8 @@ export default {
    }
  },
  emits: [
-    'close'
+    'close',
+    'update:visible'
  ],
  setup(props, context) {
    const CloseDialogue = (val) => {
--- a/frontend/src/components/dialog/DetailFieldTable.vue
+++ b/frontend/src/components/dialog/DetailFieldTable.vue
@@ -0,0 +1,88 @@
+<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;" @update:selected="emitSelected">
+      <template v-slot:[`body-cell-${detailField}`]="props">
+        <q-td :props="props">
+          <q-scroll-area class="description-cell">
+            <div v-html="props.row[detailField]"></div>
+          </q-scroll-area>
+        </q-td>
+      </template>
+    </q-table>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, onMounted, reactive, PropType } from 'vue'
+
+interface IRow {
+  [key: string]: any;
+}
+
+export default {
+  name: 'DetailFieldTable',
+  props: {
+    name: String,
+    type: String,
+    filter: String,
+    detailField: {
+      type: String,
+      required: true
+    },
+    columns: {
+      type: Array as PropType<any[]>,
+      required: true
+    },
+    fetchData: {
+      type: Function as PropType<() => Promise<IRow[]>>,
+      required: true
+    }
+  },
+  emits: ['update:selected'],
+  setup(props, { emit }) {
+    const isLoaded = ref(false);
+    const rows = reactive<IRow[]>([]);
+    const selected = ref([]);
+
+    onMounted(async () => {
+      const data = await props.fetchData();
+      rows.push(...data);
+      isLoaded.value = true;
+    });
+
+    const emitSelected = (selectedItems: any[]) => {
+      emit('update:selected', selectedItems);
+    };
+
+    return {
+      rows,
+      selected,
+      isLoaded,
+      pagination: ref({
+        rowsPerPage: 10
+      }),
+      emitSelected
+    };
+  }
+};
+</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>
--- a/frontend/src/components/dialog/VersionHistory.vue
+++ b/frontend/src/components/dialog/VersionHistory.vue
@@ -0,0 +1,82 @@
+<template>
+  <detail-field-table
+    detailField="comment"
+    type="single"
+    :columns="columns"
+    :fetchData="fetchVersionHistory"
+    @update:selected="(item) => { selected = item }"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, watch } from 'vue';
+import { IAppDisplay, IAppVersion } from 'src/types/AppTypes';
+import { date } from 'quasar';
+import { api } from 'boot/axios';
+import DetailFieldTable from './DetailFieldTable.vue';
+import { IUser, IUserDisplay } from 'src/types/UserTypes';
+
+export default defineComponent({
+  name: 'VersionHistory',
+  components: {
+    DetailFieldTable
+  },
+  props: {
+    app: {
+      type: Object as PropType<IAppDisplay>,
+      required: true,
+    },
+  },
+  setup(props, { emit }) {
+    const selected = ref<IAppVersion[]>([]);
+
+    const columns = [
+      { name: 'version', label: 'ID', field: 'version', align: 'left', sortable: true },
+      { name: 'name', label: 'バージョン名', field: 'name', align: 'left', sortable: true },
+      { name: 'comment', label: 'コメント', field: 'comment', align: 'left', sortable: true },
+      { name: 'creator', label: '作成者', field: (row: IAppVersion) => row.creator.fullName, align: 'left', sortable: true },
+      { name: 'createTime', label: '作成日時', field: 'createTime', align: 'left', sortable: true },
+      { name: 'updater', label: '更新者', field: (row: IAppVersion) => row.updater.fullName, align: 'left', sortable: true },
+      { name: 'updateTime', label: '更新日時', field: 'updateTime', align: 'left', sortable: true },
+    ];
+
+    const formatDate = (dateStr: string) => {
+      return date.formatDate(dateStr, 'YYYY/MM/DD HH:mm:ss');
+    };
+
+    const toUserDisaplay = (user: IUser) => {
+      return {
+        id: user.id,
+        firstName: user.first_name,
+        lastName: user.last_name,
+        fullNameSearch: (user.last_name + user.first_name).toLowerCase(),
+        fullName: user.last_name + ' ' + user.first_name,
+        email: user.email,
+        isActive: user.is_active,
+        isSuperuser: user.is_superuser,
+      }
+    }
+
+    const fetchVersionHistory = async () => {
+      const { data } = await api.get(`api/apps/${props.app.id}/versions`);
+      return data.data.map((item: any) => ({
+        id: item.id,
+        version: item.version,
+        appid: item.appid,
+        name: item.name,
+        comment: item.comment,
+        updater: toUserDisaplay(item.updateuser),
+        updateTime: formatDate(item.updatetime),
+        creator: toUserDisaplay(item.createuser),
+        createTime: formatDate(item.createtime),
+      } as IAppVersion));
+    };
+
+    return {
+      fetchVersionHistory,
+      columns,
+      selected
+    };
+  },
+});
+</script>
--- a/frontend/src/components/dialog/VersionInput.vue
+++ b/frontend/src/components/dialog/VersionInput.vue
@@ -2,14 +2,15 @@
  <q-input
    v-model="versionInfo.name"
    filled
+    autofocus
    label="バージョン名"
-    :rules="[(val) => val.length <= 20 || '20字以内で入力ください']"
+    :rules="[(val) => !val || val.length <= 30 || '30字以内で入力ください']"
  />
  <q-input
    v-model="versionInfo.desc"
    filled
    type="textarea"
-    :rules="[(val) => val.length <= 80 || '80字以内で入力ください']"
+    :rules="[(val) => !val || val.length <= 80 || '80字以内で入力ください']"
    label="説明"
  />
 </template>
@@ -22,9 +23,11 @@ const props = defineProps<{
  modelValue: IVersionInfo;
 }>();

+const defaultTitle = `${new Date().toLocaleString()}`;
+
 const versionInfo = ref({
  ...props.modelValue,
-  name: props.modelValue.name || `新バージョン ${new Date().toLocaleString()}`,
+  name: props.modelValue.name || defaultTitle,
 });

 const emit = defineEmits(['update:modelValue']);