From 1135361b00d706dc1a352ba958cd81f0709550fc Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Sat, 14 Dec 2024 21:52:26 +0800
Subject: [PATCH] fix UI

---
 .../ShareDomain/ShareDomainDialog.vue         |  3 +-
 .../src/components/UserDomain/DomainCard.vue  |  7 ++-
 frontend/src/pages/AppManagement.vue          | 13 +++++
 frontend/src/pages/AppVersionManagement.vue   | 56 ++++++++++++-------
 frontend/src/pages/FlowChart.vue              | 21 ++++---
 frontend/src/stores/useAppStore.ts            | 28 ++++++----
 frontend/src/types/AppTypes.ts                |  6 --
 7 files changed, 84 insertions(+), 50 deletions(-)

diff --git a/frontend/src/components/ShareDomain/ShareDomainDialog.vue b/frontend/src/components/ShareDomain/ShareDomainDialog.vue
index 3fe4a34..0ea591b 100644
--- a/frontend/src/components/ShareDomain/ShareDomainDialog.vue
+++ b/frontend/src/components/ShareDomain/ShareDomainDialog.vue
@@ -204,7 +204,8 @@ const itemToDisplay = (item: IUser) => {
 
 <style lang="scss">
 .dialog-content {
-  width: 60vw;
+  width: 700px !important;
+  max-width: 80vw !important;
   max-height: 80vh;
   .q-select {
     min-width: 0 !important;
diff --git a/frontend/src/components/UserDomain/DomainCard.vue b/frontend/src/components/UserDomain/DomainCard.vue
index d6f0914..004923a 100644
--- a/frontend/src/components/UserDomain/DomainCard.vue
+++ b/frontend/src/components/UserDomain/DomainCard.vue
@@ -6,9 +6,10 @@
           <div class="text-h6 ellipsis">{{ item.name }}</div>
           <div class="text-subtitle2">{{ item.url }}</div>
         </div>
-        <div v-if="!isOwnerFunc(item.owner.id)" class="col-auto">
+        <div class="col-auto">
           <!-- <q-badge color="secondary" text-color="white" align="middle" class="q-mb-xs" label="他人の所有" /> -->
-          <q-chip square color="secondary" text-color="white" icon="people" label="他人の所有" size="sm" />
+          <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>
 
       </div>
@@ -25,7 +26,7 @@
           <div class="text-grey-7 text-caption text-weight-medium">
             所有者
           </div>
-          <div class="smaller-font-size">{{ item.owner.fullName }}</div>
+          <div class="smaller-font-size">{{ !isOwnerFunc(item.owner.id) ? item.owner.fullName : '自分' }}</div>
         </div>
       </div>
     </q-card-section>
diff --git a/frontend/src/pages/AppManagement.vue b/frontend/src/pages/AppManagement.vue
index cf59a10..65b0ab0 100644
--- a/frontend/src/pages/AppManagement.vue
+++ b/frontend/src/pages/AppManagement.vue
@@ -28,6 +28,14 @@
           </a>
         </q-td>
       </template>
+      <template v-slot:body-cell-version="p">
+        <q-td :props="p">
+          <div class="flex justify-between">
+            <span>{{ p.row.version }}</span>
+            <q-badge v-if="isVersionEditing(p.row)" color="orange-7">変更あり</q-badge>
+          </div>
+        </q-td>
+      </template>
       <template v-slot:body-cell-actions="p">
         <q-td :props="p">
           <table-action-menu :row="p.row" minWidth="180px" max-width="200px" :actions="actionList" />
@@ -112,6 +120,11 @@ const getApps = async () => {
   loading.value = false;
 }
 
+function isVersionEditing(app:IAppDisplay) {
+  // TODO
+  return false;
+};
+
 onMounted(async () => {
   await getApps();
 });
diff --git a/frontend/src/pages/AppVersionManagement.vue b/frontend/src/pages/AppVersionManagement.vue
index bb161cf..f053ad9 100644
--- a/frontend/src/pages/AppVersionManagement.vue
+++ b/frontend/src/pages/AppVersionManagement.vue
@@ -29,9 +29,12 @@
 
       <template v-slot:body-cell-id="p">
         <q-td :props="p">
-          <div class="flex justify-between">
+          <div class="">
             <span>{{ p.row.id }}</span>
-            <q-badge v-if="p.row.id === app.version" color="primary">適用中</q-badge>
+            <span class="q-ml-md" v-if="p.row.id === app.version">
+              <q-badge  color="primary">適用中</q-badge>
+              <q-badge class="q-ml-xs" v-if="isVersionEditing()" color="orange-7">変更あり</q-badge>
+            </span>
           </div>
         </q-td>
       </template>
@@ -54,14 +57,23 @@
 
     <q-dialog v-model="confirmDialog" persistent>
       <q-card>
-        <q-card-section class="row items-center">
-          <q-icon name="warning" color="warning" size="2em" />
-          <span class="q-ml-sm">削除してもよろしいですか？</span>
+        <q-card-section class="q-pb-none">
+          <q-list>
+            <q-item>
+              <q-item-section avatar>
+                <q-icon name="warning" color="warning" size="2em" />
+              </q-item-section>
+              <q-item-section>
+                <div >現在のバージョンは未保存です。</div>
+                <div >プルすると、上書されますので、よろしいでしょうか？</div>
+              </q-item-section>
+            </q-item>
+          </q-list>
         </q-card-section>
 
         <q-card-actions align="right">
-          <q-btn flat label="Cancel" color="primary" v-close-popup />
-          <q-btn flat label="OK" color="primary" :loading="deleteUserLoading" @click="deleteApp" />
+          <q-btn flat label="キャンセル" color="primary" v-close-popup />
+          <q-btn flat label="上書きする" color="primary" :loading="deleteUserLoading" @click="doChangeVersion()" />
         </q-card-actions>
       </q-card>
     </q-dialog>
@@ -132,6 +144,11 @@ const getVersions = async () => {
   versionLoading.value = false;
 }
 
+function isVersionEditing() {
+  // TODO
+  return false;
+};
+
 onMounted(async () => {
   let isSuccess = getAppById();
   if (!isSuccess) {
@@ -150,25 +167,26 @@ onMounted(async () => {
 });
 
 async function changeVersion(version: IAppVersionDisplay) {
-  // TODO
-  versionLoading.value = true;
   target.value = version;
+  if (!isVersionEditing()) {
+    await doChangeVersion(version);
+  } else {
+    confirmDialog.value = true;
+  }
+}
+
+async function doChangeVersion(version?: IAppVersionDisplay) {
+  if (!version) {
+    version = target.value as IAppVersionDisplay;
+  }
+  confirmDialog.value = false;
+  versionLoading.value = true;
   await appStore.changeVersion(app.value, version);
   await getApps();
   getAppById();
   versionLoading.value = false;
 }
 
-// const deleteApp = async () => {
-//   if (target.value?.id) {
-//     deleteUserLoading.value = true;
-//     await appStore.deleteApp(targetRow.value)
-//     await getApps();
-//     deleteUserLoading.value = false;
-//     confirmDialog.value = false;
-//   }
-// }
-
 async function toEditFlowPage() {
   store.setApp({
     appId: app.value.id,
diff --git a/frontend/src/pages/FlowChart.vue b/frontend/src/pages/FlowChart.vue
index 45585df..ee6e2d6 100644
--- a/frontend/src/pages/FlowChart.vue
+++ b/frontend/src/pages/FlowChart.vue
@@ -54,7 +54,7 @@
         <q-breadcrumbs-el icon="widgets" label="アプリ管理" to="/app" />
         <q-breadcrumbs-el>
           <template v-slot>
-            <a class="full-width" :href="!store.appInfo?'':`${authStore.currentDomain.kintoneUrl}/k/${store.appInfo?.appId}`" target="_blank" title="Kiontoneへ">
+            <a class="full-width" :href="store.appInfo ? `${authStore.currentDomain.kintoneUrl}/k/${store.appInfo?.appId}` : ''" target="_blank" title="Kiontoneへ">
               {{ store.appInfo?.name }}
               <q-icon
                 class="q-ma-xs"
@@ -99,11 +99,12 @@
 <script setup lang="ts">
 import { ref, reactive, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
-import { IActionNode, ActionNode, IActionFlow, ActionFlow, RootAction, IActionProperty } from 'src/types/ActionTypes';
+import { IActionNode, ActionNode, IActionFlow, ActionFlow, RootAction, IActionProperty, AppInfo } from 'src/types/ActionTypes';
 import { IAppDisplay, IManagedApp, IVersionSubmit } from 'src/types/AppTypes';
 import { storeToRefs } from 'pinia';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { useAuthStore } from 'stores/useAuthStore';
+import { useAppStore } from 'stores/useAppStore';
 import { api } from 'boot/axios';
 
 import NodeItem from 'src/components/main/NodeItem.vue';
@@ -119,10 +120,11 @@ const deployLoading = ref(false);
 const saveLoading = ref(false);
 const initLoading = ref(true);
 const drawerLeft = ref(false);
-const versionSubmit = ref<IVersionSubmit>();
+const versionSubmit = ref<IVersionSubmit>({} as IVersionSubmit);
 const $q = useQuasar();
 const store = useFlowEditorStore();
 const authStore = useAuthStore();
+const appStore = useAppStore();
 const route = useRoute()
 
 const appDg = ref();
@@ -262,18 +264,15 @@ const onSaveActionProps=(props:IActionProperty[])=>{
 };
 
 const onSaveVersion = async () => {
-  versionSubmit.value = { appId: store.appInfo?.appId }
+  if (!store.appInfo) return;
+  versionSubmit.value = { appId: store.appInfo.appId }
   saveVersionAction.value = true;
 }
 
 const closeSaveVersionDg = async (val: 'OK'|'CANCEL') => {
   if (val == 'OK') {
     await onSaveAllFlow();
-    await api.post('api/apps', {
-      'appid': versionSubmit.value?.appId,
-      'versionname': versionSubmit.value?.name,
-      'comment': versionSubmit.value?.comment
-    })
+    await appStore.createVersion(versionSubmit.value);
   }
 }
 
@@ -395,9 +394,9 @@ const onClearFilter=()=>{
   filter.value='';
 }
 
-onMounted(() => {
+onMounted(async () => {
   authStore.setLeftMenu(false);
-  fetchData();
+  await fetchData();
 });
 </script>
 
diff --git a/frontend/src/stores/useAppStore.ts b/frontend/src/stores/useAppStore.ts
index 6546521..3e0d84d 100644
--- a/frontend/src/stores/useAppStore.ts
+++ b/frontend/src/stores/useAppStore.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { api } from 'boot/axios';
-import { IAppDisplay, IAppVersion, IAppVersionDisplay, IManagedApp } from 'src/types/AppTypes';
+import { IAppDisplay, IAppVersion, IAppVersionDisplay, IManagedApp, IVersionSubmit } from 'src/types/AppTypes';
 import { IUser } from 'src/types/UserTypes';
 import { date, Notify } from 'quasar'
 
@@ -35,15 +35,6 @@ export const useAppStore = defineStore('app', {
       return this.apps.find((item: IAppDisplay) => item.id === id);
     },
 
-    async getVersionsByAppId(app: IAppDisplay) {
-      const { data } = await api.get(`api/appversions/${app.id}`);
-      return data.data.map((item: IAppVersion) => versionToVersionDisplay(item));
-    },
-
-    async changeVersion(app: IAppDisplay, version: IAppVersionDisplay) {
-      await api.put(`api/appversions/${app.id}/${version.id}`);
-    },
-
     async deleteApp(app: IAppDisplay) {
       try {
         await api.delete(`api/apps/${app.id}`);
@@ -59,6 +50,23 @@ export const useAppStore = defineStore('app', {
       return true;
     },
 
+    async getVersionsByAppId(app: IAppDisplay) {
+      const { data } = await api.get(`api/appversions/${app.id}`);
+      return data.data.map((item: IAppVersion) => versionToVersionDisplay(item));
+    },
+
+    async changeVersion(app: IAppDisplay, version: IAppVersionDisplay) {
+      await api.put(`api/appversions/${app.id}/${version.id}`);
+    },
+
+    async createVersion(versionSubmit: IVersionSubmit) {
+      await api.post('api/apps', {
+        'appid': versionSubmit.appId,
+        'versionname': versionSubmit.name,
+        'comment': versionSubmit.comment
+      })
+    },
+
     reset() {
       this.apps = [];
       this.rowIds.clear();
diff --git a/frontend/src/types/AppTypes.ts b/frontend/src/types/AppTypes.ts
index 0023a31..3dfef1b 100644
--- a/frontend/src/types/AppTypes.ts
+++ b/frontend/src/types/AppTypes.ts
@@ -21,12 +21,6 @@ export interface IAppDisplay{
   version:number;
 }
 
-export interface IVersionInfo {
-  id: string;
-  name?: string;
-  desc?: string;
-}
-
 export interface IVersionSubmit {
   appId: string;
   name?: string;