[UI] version page

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>

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>

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']);