From 40cadc82d0a35afe97452f3b0cd546c0af468d2f Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Tue, 10 Dec 2024 21:19:16 +0800
Subject: [PATCH] UI fix

---
 frontend/src/pages/AppManagement.vue        |  2 +-
 frontend/src/pages/AppVersionManagement.vue | 77 +++++++--------------
 2 files changed, 25 insertions(+), 54 deletions(-)

diff --git a/frontend/src/pages/AppManagement.vue b/frontend/src/pages/AppManagement.vue
index 57fd178..cf59a10 100644
--- a/frontend/src/pages/AppManagement.vue
+++ b/frontend/src/pages/AppManagement.vue
@@ -30,7 +30,7 @@
       </template>
       <template v-slot:body-cell-actions="p">
         <q-td :props="p">
-          <table-action-menu :row="p.row" :actions="actionList" />
+          <table-action-menu :row="p.row" minWidth="180px" max-width="200px" :actions="actionList" />
         </q-td>
       </template>
     </q-table>
diff --git a/frontend/src/pages/AppVersionManagement.vue b/frontend/src/pages/AppVersionManagement.vue
index cb2e1e1..bb161cf 100644
--- a/frontend/src/pages/AppVersionManagement.vue
+++ b/frontend/src/pages/AppVersionManagement.vue
@@ -3,31 +3,22 @@
     <div class="q-gutter-sm row items-start">
         <q-breadcrumbs>
           <q-breadcrumbs-el icon="widgets" label="アプリ管理" to="/app" />
-          <q-breadcrumbs-el :label="app?.name" />
-        </q-breadcrumbs>
+          <q-breadcrumbs-el>
+          <template v-slot>
+            <a class="full-width" :href="app?.url" target="_blank" title="Kiontoneへ">
+              {{ app?.name }}
+              <q-icon
+                class="q-ma-xs"
+                name="open_in_new"
+                color="grey-9"
+              />
+            </a>
+          </template>
+        </q-breadcrumbs-el>
+      </q-breadcrumbs>
     </div>
 
-    <q-table card-class="bg-grey-1" :rows="[app]" :columns="appColumns" class="q-mt-sm q-mb-lg" :loading="appLoading" hide-bottom>
-      <template v-slot:body-cell-name="prop">
-        <q-td :props="prop">
-          <q-btn flat dense :label="prop.row.name" @click="toEditFlowPage(prop.row)" ></q-btn>
-        </q-td>
-      </template>
-      <template v-slot:body-cell-url="prop">
-        <q-td :props="prop">
-          <a :href="prop.row.url" target="_blank" :title="prop.row.name" >
-            {{ prop.row.url  }}
-          </a>
-        </q-td>
-      </template>
-      <template v-slot:body-cell-actions="p">
-        <q-td :props="p">
-          <table-action-menu :row="p.row" :actions="appActionList" />
-        </q-td>
-      </template>
-    </q-table>
-
-    <q-table class="q-ma-md" flat bordered :rows="rows" title="バージョン履歴" :columns="columns" :loading="versionLoading" :pagination="pagination" :filter="filter" >
+    <q-table  :rows="rows" title="バージョン履歴" :columns="columns" :loading="versionLoading" :pagination="pagination" :filter="filter" >
       <template v-slot:top-right>
         <q-input borderless dense filled clearable debounce="300" v-model="filter" placeholder="検索">
           <template v-slot:append>
@@ -35,11 +26,12 @@
           </template>
         </q-input>
       </template>
+
       <template v-slot:body-cell-id="p">
         <q-td :props="p">
           <div class="flex justify-between">
             <span>{{ p.row.id }}</span>
-            <q-badge v-if="p.row.id === app.version" color="primary">現在</q-badge>
+            <q-badge v-if="p.row.id === app.version" color="primary">適用中</q-badge>
           </div>
         </q-td>
       </template>
@@ -60,8 +52,6 @@
 
 
 
-
-
     <q-dialog v-model="confirmDialog" persistent>
       <q-card>
         <q-card-section class="row items-center">
@@ -93,20 +83,7 @@ const route = useRoute()
 
 const $q = useQuasar();
 
-const appLoading = ref(false);
 const app = ref<IAppDisplay>({} as IAppDisplay);
-const appColumns = [
-  { name: 'id', label: 'ID', field: 'id', align: 'left', classes: 'q-td--no-hover' },
-  { name: 'name', label: 'アプリ名', field: 'name', align: 'left', classes: 'q-td--no-hover' },
-  { name: 'url', label: 'URL', field: 'url', align: 'left', classes: 'q-td--no-hover' },
-  { name: 'updateUser', label: '最後更新者', field: (row: IAppDisplay) => row?.updateUser?.fullName, align: 'left', classes: 'q-td--no-hover'},
-  { name: 'updateTime', label: '最後更新日', field: 'updateTime', align: 'left', classes: 'q-td--no-hover'},
-  { name: 'version', label: 'バージョン', field: 'version', align: 'left', classes: 'q-td--no-hover' },
-  { name: 'actions', label: '', field: 'actions', classes: 'q-td--no-hover' }
-];
-const appActionList =  ref([
-  { label: '設定', icon: 'account_tree', action: toEditFlowPage },
-]);
 
 const rows = ref<IAppVersionDisplay[]>([]);
 const columns = [
@@ -129,8 +106,6 @@ const store = useFlowEditorStore();
 const confirmDialog = ref(false);
 const deleteUserLoading = ref(false);
 
-
-
 const actionList =  ref([
   { label: 'プル', icon: 'flag', action: changeVersion },
   // { label: 'プレビュー', icon: 'visibility', action: toVersionHistoryPage },
@@ -138,12 +113,8 @@ const actionList =  ref([
   // { label: '削除', icon: 'delete_outline', class: 'text-red', action: removeRow },
 ]);
 
-const getApps = async (suppressLoading: false) => {
-  if (!suppressLoading) {
-    appLoading.value = true;
-  }
+const getApps = async () => {
   await appStore.loadApps();
-  appLoading.value = false;
 }
 
 const getAppById = () => {
@@ -183,7 +154,7 @@ async function changeVersion(version: IAppVersionDisplay) {
   versionLoading.value = true;
   target.value = version;
   await appStore.changeVersion(app.value, version);
-  await getApps(true);
+  await getApps();
   getAppById();
   versionLoading.value = false;
 }
@@ -198,14 +169,14 @@ async function changeVersion(version: IAppVersionDisplay) {
 //   }
 // }
 
-async function toEditFlowPage(app:IAppDisplay) {
+async function toEditFlowPage() {
   store.setApp({
-    appId: app.id,
-    name: app.name
+    appId: app.value.id,
+    name: app.value.name
   });
   store.selectFlow(undefined);
   try {
-    await router.push('/FlowChart/' + app.id);
+    await router.push('/FlowChart/' + app.value.id);
   } catch (e) {
     console.log(e);
   }
@@ -214,9 +185,9 @@ async function toEditFlowPage(app:IAppDisplay) {
 
 <style lang="scss">
 .description-cell {
-  height: 50px;
+  height: 30px;
   min-width: 300px;
-  max-height: 50px;
+  max-height: 30px;
   white-space: break-spaces;
 
   .q-scrollarea__content {