From ef9ed684684129535aff9a0b48cd45b78279aed1 Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Tue, 17 Dec 2024 22:33:24 +0800
Subject: [PATCH] ui fix for add column

---
 .../src/components/UserDomain/DomainCard.vue  |  4 +++
 .../components/dialog/DetailFieldTable.vue    |  1 -
 frontend/src/pages/AppManagement.vue          | 26 ++++++++++++++-----
 frontend/src/pages/AppVersionManagement.vue   | 21 ++++++++++-----
 frontend/src/stores/useAppStore.ts            | 15 +++++++----
 frontend/src/types/AppTypes.ts                | 10 ++++---
 6 files changed, 54 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/UserDomain/DomainCard.vue b/frontend/src/components/UserDomain/DomainCard.vue
index 004923a..2bfc732 100644
--- a/frontend/src/components/UserDomain/DomainCard.vue
+++ b/frontend/src/components/UserDomain/DomainCard.vue
@@ -10,6 +10,10 @@
           <!-- <q-badge color="secondary" text-color="white" align="middle" class="q-mb-xs" label="他人の所有" /> -->
           <q-chip v-if="!isOwnerFunc(item.owner.id)" square color="secondary" text-color="white" icon="people" label="他人の所有" size="sm" />
           <q-chip v-else square color="purple" text-color="white" icon="people" label="自分" size="sm" />
+          <div class="text-right">
+            <!-- icon="add_moderator" -->
+            <!-- <q-chip square color="primary" text-color="white" label="管理者" size="sm" /> -->
+          </div>
         </div>
 
       </div>
diff --git a/frontend/src/components/dialog/DetailFieldTable.vue b/frontend/src/components/dialog/DetailFieldTable.vue
index 8ed619c..85bc0e0 100644
--- a/frontend/src/components/dialog/DetailFieldTable.vue
+++ b/frontend/src/components/dialog/DetailFieldTable.vue
@@ -20,7 +20,6 @@
         </q-td>
       </template>
 
-      
     </q-table>
   </div>
 </template>
diff --git a/frontend/src/pages/AppManagement.vue b/frontend/src/pages/AppManagement.vue
index 65b0ab0..8f2e60f 100644
--- a/frontend/src/pages/AppManagement.vue
+++ b/frontend/src/pages/AppManagement.vue
@@ -30,14 +30,20 @@
       </template>
       <template v-slot:body-cell-version="p">
         <q-td :props="p">
-          <div class="flex justify-between">
-            <span>{{ p.row.version }}</span>
+          <div class="flex justify-between full-width" >
+            <span class="ellipsis" :title="p.row.versionName">{{ p.row.versionName || '未命名' }}</span>
             <q-badge v-if="isVersionEditing(p.row)" color="orange-7">変更あり</q-badge>
           </div>
         </q-td>
       </template>
+      <template v-slot:body-cell-updateUser="p">
+        <q-td auto-width :props="p">
+          <q-badge v-if="p.row.updateUser.id == Number(authStore.userId)" color="purple">自分</q-badge>
+          <span v-else>{{ p.row.updateUser.fullName }}</span>
+        </q-td>
+      </template>
       <template v-slot:body-cell-actions="p">
-        <q-td :props="p">
+        <q-td auto-width :props="p">
           <table-action-menu :row="p.row" minWidth="180px" max-width="200px" :actions="actionList" />
         </q-td>
       </template>
@@ -73,6 +79,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue';
 import { useAppStore } from 'stores/useAppStore';
+import { useAuthStore } from 'stores/useAuthStore';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { router } from 'src/router';
 import { IAppDisplay } from 'src/types/AppTypes';
@@ -81,15 +88,16 @@ import AppSelectBox from 'src/components/AppSelectBox.vue';
 import TableActionMenu from 'components/TableActionMenu.vue';
 
 const appStore = useAppStore();
+const authStore = useAuthStore();
 const numberStringSorting = (a: string, b: string) => parseInt(a, 10) - parseInt(b, 10);
 
 const columns = [
   { name: 'id', label: 'アプリID', field: 'id', align: 'left', sortable: true, sort: numberStringSorting },
   { name: 'name', label: 'アプリ名', field: 'name', align: 'left', sortable: true },
   { name: 'url', label: 'URL', field: 'url', align: 'left', sortable: true },
-  { name: 'updateUser', label: '最後更新者', field: (row: IAppDisplay) => row.updateUser.fullName, align: 'left', sortable: true},
+  { name: 'updateUser', label: '最後更新者', field: '', align: 'left', sortable: true},
   { name: 'updateTime', label: '最後更新日', field: 'updateTime', align: 'left', sortable: true},
-  { name: 'version', label: 'バージョン', field: 'version', align: 'left', sortable: true, sort: numberStringSorting },
+  { name: 'version', label: 'バージョン', field: '', align: 'left', sortable: true, style: 'max-width: 200px;',sort: numberStringSorting },
   { name: 'actions', label: '', field: 'actions' }
 ];
 
@@ -164,7 +172,9 @@ const deleteApp = async () => {
 }
 
 async function toVersionHistoryPage(app:IAppDisplay) {
-  await router.push('/app/version/' + app.id);
+  await router.push('/app/version/' + app.id).catch(err => {
+    console.error(err);
+  });
 }
 
 async function toEditFlowPage(app:IAppDisplay) {
@@ -173,6 +183,8 @@ async function toEditFlowPage(app:IAppDisplay) {
     name: app.name
   });
   store.selectFlow(undefined);
-  await router.push('/FlowChart/' + app.id);
+  await router.push('/FlowChart/' + app.id).catch(err => {
+    console.error(err);
+  });
 };
 </script>
diff --git a/frontend/src/pages/AppVersionManagement.vue b/frontend/src/pages/AppVersionManagement.vue
index 04faafe..e5b695f 100644
--- a/frontend/src/pages/AppVersionManagement.vue
+++ b/frontend/src/pages/AppVersionManagement.vue
@@ -40,11 +40,17 @@
       </template>
       <template v-slot:body-cell-comment="p">
         <q-td :props="p">
-          <q-scroll-area class="description-cell">
+          <q-scroll-area class="multiline-cell">
             <div v-html="p.row['comment']"></div>
           </q-scroll-area>
         </q-td>
       </template>
+      <template v-slot:body-cell-creator="p">
+        <q-td auto-width :props="p">
+          <q-badge v-if="p.row.creator.id == Number(authStore.userId)" color="purple">自分</q-badge>
+          <span v-else>{{ p.row.creator.fullName }}</span>
+        </q-td>
+      </template>
       <template v-slot:body-cell-actions="p">
         <q-td :props="p">
           <table-action-menu :row="p.row" minWidth="140px" :actions="actionList" />
@@ -83,12 +89,14 @@
 import { useQuasar } from 'quasar';
 import { ref, onMounted } from 'vue';
 import { useAppStore } from 'stores/useAppStore';
+import { useAuthStore } from 'stores/useAuthStore';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { router } from 'src/router';
 import { useRoute } from 'vue-router';
 import { IAppDisplay, IAppVersionDisplay } from 'src/types/AppTypes';
 import TableActionMenu from 'components/TableActionMenu.vue';
 
+const authStore = useAuthStore();
 const appStore = useAppStore();
 const route = useRoute()
 
@@ -101,8 +109,8 @@ const columns = [
       { name: 'id', label: 'バージョン番号', 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: IVersionDisplay) => row.creator.fullName, align: 'left', sortable: true },
-      // { name: 'createTime', label: '作成日時', field: 'createTime', align: 'left', sortable: true },
+      { name: 'creator', label: '作成者', field: '', align: 'left', sortable: true },
+      { name: 'createTime', label: '作成日時', field: 'createTime', align: 'left', sortable: true },
       // { name: 'updater', label: '更新者', field: (row: IVersionDisplay) => row.updater.fullName, align: 'left', sortable: true },
       // { name: 'updateTime', label: '更新日時', field: 'updateTime', align: 'left', sortable: true },
       { name: 'actions', label: '', field: 'actions' }
@@ -149,6 +157,7 @@ function isVersionEditing() {
 };
 
 onMounted(async () => {
+  versionLoading.value = true;
   let isSuccess = getAppById();
   if (!isSuccess) {
     await getApps();
@@ -201,10 +210,10 @@ async function toEditFlowPage() {
 </script>
 
 <style lang="scss">
-.description-cell {
-  height: 30px;
+.multiline-cell {
+  height: 45px;
   min-width: 300px;
-  max-height: 30px;
+  max-height: 45px;
   white-space: break-spaces;
 
   .q-scrollarea__content {
diff --git a/frontend/src/stores/useAppStore.ts b/frontend/src/stores/useAppStore.ts
index 3e0d84d..905af84 100644
--- a/frontend/src/stores/useAppStore.ts
+++ b/frontend/src/stores/useAppStore.ts
@@ -81,10 +81,10 @@ function versionToVersionDisplay(item: IAppVersion) {
     appid: item.appid,
     name: item.versionname,
     comment: item.comment,
-    // updater: toUserDisplay(item.updateuser),
-    // updateTime: formatDate(item.updatetime),
-    // creator: toUserDisplay(item.createuser),
-    // createTime: formatDate(item.createtime),
+    updater: userToUserDisplay(item.updateuser),
+    updateTime: formatDate(item.update_time),
+    creator: userToUserDisplay(item.createuser),
+    createTime: formatDate(item.create_time),
   } as IAppVersionDisplay;
 }
 
@@ -95,11 +95,16 @@ function appToAppDisplay(app: IManagedApp) {
     name: app.appname,
     url: `${app.domainurl}/k/${app.appid}`,
     version: app.version,
-    updateTime: date.formatDate(app.update_time, 'YYYY/MM/DD HH:mm'),
+    versionName: app.versionname,
+    updateTime: formatDate(app.update_time),
     updateUser: userToUserDisplay(app.updateuser)
   } as IAppDisplay
 }
 
+function formatDate(data: string) {
+  return date.formatDate(data, 'YYYY/MM/DD HH:mm');
+}
+
 function userToUserDisplay(user: IUser) {
   return {
     id: user.id,
diff --git a/frontend/src/types/AppTypes.ts b/frontend/src/types/AppTypes.ts
index 3dfef1b..8ce728b 100644
--- a/frontend/src/types/AppTypes.ts
+++ b/frontend/src/types/AppTypes.ts
@@ -5,6 +5,7 @@ export interface IManagedApp {
   appname: string;
   domainurl: string;
   version: number;
+  versionname?: string;
   user: IUser;
   updateuser: IUser;
   create_time: string;
@@ -19,6 +20,7 @@ export interface IAppDisplay{
   updateUser: IUserDisplay;
   updateTime:string;
   version:number;
+  versionName?: string;
 }
 
 export interface IVersionSubmit {
@@ -33,10 +35,10 @@ export interface IAppVersion {
   appid: string;
   versionname: string
   comment: string;
-  updater: IUserDisplay;
-  updateTime: string;
-  creator: IUserDisplay;
-  createTime: string;
+  updateuser: IUser;
+  update_time: string;
+  createuser: IUser;
+  create_time: string;
 }
 
 export interface IAppVersionDisplay {