[UI] version page

frontend/src/pages/AppManagement.vue

@@ -37,13 +37,18 @@
 
     <show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeSelectAppDialog" min-width="50vw" min-height="50vh" :ok-btn-auto-close="false" :ok-btn-loading="isAdding">
       <template v-slot:toolbar>
-        <q-input dense debounce="300" v-model="filter" placeholder="検索" clearable>
+        <q-input dense debounce="300" v-model="dgFilter" placeholder="検索" clearable>
           <template v-slot:before>
             <q-icon name="search" />
           </template>
         </q-input>
       </template>
-      <app-select-box ref="appDialog" name="アプリ" type="single" :filter="filter" :filterInitRowsFunc="filterInitRows" />
+      <app-select-box ref="appDialog" name="アプリ" type="single" :filter="dgFilter" :filterInitRowsFunc="filterInitRows" />
+    </show-dialog>
+
+    
+    <show-dialog v-model:visible="showVersionHistory" :name="targetRow?.name + 'のバージョン履歴'" @close="closeHistoryDg" min-width="50vw" min-height="50vh" :ok-btn-auto-close="false" :ok-btn-loading="isAdding">
+      <version-history ref="versionDialog" :app="targetRow as IAppDisplay" />
     </show-dialog>
   </div>
 </template>
@@ -56,20 +61,11 @@ import { useAuthStore } from 'stores/useAuthStore';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { router } from 'src/router';
 import { date } from 'quasar'
-import { IManagedApp } from 'src/types/AppTypes';
+import { IManagedApp, IAppDisplay, IAppVersion } from 'src/types/AppTypes';
 import ShowDialog from 'src/components/ShowDialog.vue';
 import AppSelectBox from 'src/components/AppSelectBox.vue';
 import TableActionMenu from 'components/TableActionMenu.vue';
-
-interface IAppDisplay{
-  id:string;
-  sortId: number;
-  name:string;
-  url:string;
-  user:string;
-  version:string;
-  updatetime:string;
-}
+import VersionHistory from 'components/dialog/VersionHistory.vue';
 
 const authStore = useAuthStore();
 const numberStringSorting = (a: string, b: string) => parseInt(a, 10) - parseInt(b, 10);
@@ -78,8 +74,8 @@ 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: 'user', label: '最後更新者', field: 'user', align: 'left', sortable: true},
-  { name: 'updatetime', label: '最後更新日', field: 'updatetime', align: 'left', sortable: true},
+  { name: 'updateUser', label: '最後更新者', field: (row: IAppDisplay) => row.updateUser.fullName, 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: 'actions', label: '', field: 'actions' }
 ];
@@ -87,13 +83,16 @@ const columns = [
 const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 20 });
 const loading = ref(false);
 const filter = ref('');
+const dgFilter = ref('');
 const rows = ref<IAppDisplay[]>([]);
+const targetRow = ref<IAppDisplay>();
 const rowIds = new Set<string>();
 
 const $q = useQuasar()
 const store = useFlowEditorStore();
 const appDialog = ref();
 const showSelectApp=ref(false);
+const showVersionHistory=ref(false);
 const isAdding = ref(false);
 
 const actionList =  [
@@ -137,6 +136,7 @@ const filterInitRows = (row: {id: string}) => {
 
 const showAddAppDialog = () => {
   showSelectApp.value = true;
+  dgFilter.value = ''
 }
 
 const closeSelectAppDialog = async (val: 'OK'|'Cancel') => {
@@ -150,31 +150,54 @@ const closeSelectAppDialog = async (val: 'OK'|'Cancel') => {
 }
 
 function removeRow(app:IAppDisplay) {
+  targetRow.value = app;
   return
 }
 
 function showHistory(app:IAppDisplay) {
-  return
+  targetRow.value = app;
+  showVersionHistory.value = true;
+  dgFilter.value = ''
+}
+
+const closeHistoryDg = async (val: 'OK'|'Cancel') => {
+  showSelectApp.value = true;
+  if (val == 'OK' && appDialog.value.selected[0]) {
+      isAdding.value = true;
+      await getApps();
+  }
+  showSelectApp.value = false;
+  isAdding.value = false;
 }
 
 const appToAppDisplay = (app: IManagedApp) => {
+  const user = app.updateuser;
   return {
     id: app.appid,
     sortId: parseInt(app.appid, 10),
     name: app.appname,
     url: `${app.domainurl}/k/${app.appid}`,
-    user: `${app.updateuser.first_name} ${app.updateuser.last_name}` ,
-    updatetime:date.formatDate(app.update_time, 'YYYY/MM/DD HH:mm'),
-    version: app.version
-  }
+    version: app.version,
+    updateTime:date.formatDate(app.update_time, 'YYYY/MM/DD HH:mm'),
+    updateUser: {
+      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,
+      isSuperuser: user.is_superuser,
+      isActive: user.is_active,
+    }
+  } as IAppDisplay
 }
 
-function toEditFlowPage(app:IAppDisplay) {
+async function toEditFlowPage(app:IAppDisplay) {
   store.setApp({
     appId: app.id,
     name: app.name
   });
   store.selectFlow(undefined);
-  router.push('/FlowChart/' + app.id);
+  await router.push('/FlowChart/' + app.id);
 };
 </script>

frontend/src/pages/FlowChart.vue

@@ -16,7 +16,7 @@
               <q-list>
                 <q-item clickable v-close-popup @click="onSaveVersion">
                   <q-item-section avatar >
-                    <q-icon name="history"></q-icon>
+                    <q-icon name="bookmark_border"></q-icon>
                   </q-item-section>
                   <q-item-section>
                     <q-item-label>新バージョン保存</q-item-label>
@@ -100,7 +100,7 @@
 import { ref, reactive, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { IActionNode, ActionNode, IActionFlow, ActionFlow, RootAction, IActionProperty } from 'src/types/ActionTypes';
-import { IManagedApp, IVersionInfo } from 'src/types/AppTypes';
+import { IAppDisplay, IManagedApp, IVersionInfo } from 'src/types/AppTypes';
 import { storeToRefs } from 'pinia';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { useAuthStore } from 'stores/useAuthStore';
@@ -346,11 +346,9 @@ const onSaveAllFlow= async ()=>{
 const fetchData = async () => {
   initLoading.value = true;
   if (store.appInfo === undefined && route?.params?.id !== undefined) {
-    const { appid, appname } = await fetchAppById(route.params.id as string);
-    store.setApp({
-      appId: appid,
-      name: appname
-    });
+    // only for page refreshed
+    const app = await fetchAppById(route.params.id as string);
+    store.setApp(app);
   };
   await store.loadFlow();
   initLoading.value = false
@@ -358,24 +356,39 @@ const fetchData = async () => {
 }
 
 const fetchAppById = async(id: string) => {
-  try {
-    const result = await api.get('api/apps');
-    return result.data.find((item: IManagedApp) => item.appid === id ) as IManagedApp;
-  } catch (e) {
-    console.error(e);
-    const result = await api.get(`api/v1/app?app=${id}`);
-    const data = result?.data;
-    if (data?.message) {
-      $q.notify({
-        type: 'negative',
-        caption: "エラー",
-        message: data.message
-      });
-    }
-    return { appid: data.appId, appname: data.name };
+  let result = await api.get('api/apps');
+  const app = result.data?.data?.find((item: IManagedApp) => item.appid === id ) as IManagedApp;
+  if (app) {
+    return convertManagedAppToAppInfo(app);
   }
+
+  result = await api.get(`api/v1/app?app=${id}`);
+  const kApp = result?.data as IAppDisplay | KErrorMsg;
+  if (isErrorMsg(kApp)) {
+    $q.notify({
+      type: 'negative',
+      caption: 'エラー',
+      message: kApp.message,
+    });
+  }
+  return kApp;
 }
 
+type KErrorMsg = {
+  message: string;
+}
+
+const isErrorMsg = (e: IAppDisplay | KErrorMsg): e is KErrorMsg => {
+  return 'message' in e;
+};
+
+const convertManagedAppToAppInfo = (app: IManagedApp): AppInfo => {
+  return {
+    appId: app.appid,
+    name: app.appname
+  }
+};
+
 const onClearFilter=()=>{
   filter.value='';
 }

frontend/src/pages/TenantDomain.vue

@@ -145,7 +145,7 @@ import { useAuthStore } from 'stores/useAuthStore';
 import { useDomainStore } from 'stores/useDomainStore';
 import ShareDomainDialog from 'components/ShareDomain/ShareDomainDialog.vue';
 import TableActionMenu from 'components/TableActionMenu.vue';
-import { IDomain, IDomainOwnerDisplay, IDomainSubmit } from '../types/DomainTypes';
+import { IDomain, IDomainDisplay, IDomainOwnerDisplay, IDomainSubmit } from '../types/DomainTypes';
 
 const authStore = useAuthStore();
 const domainStore = useDomainStore();
@@ -166,7 +166,7 @@ const columns = [
   { name: 'active', label: 'x', align: 'left', field: 'domainActive', classes: inactiveRowClass },
   { name: 'url', label: 'URL', field: 'url', align: 'left', sortable: true, classes: inactiveRowClass },
   { name: 'user', label: 'ログイン名', field: 'user', align: 'left', classes: inactiveRowClass },
-  { name: 'owner', label: '所有者', field: row => row.owner.fullName, align: 'left', classes: inactiveRowClass },
+  { name: 'owner', label: '所有者', field: (row: IDomainOwnerDisplay) => row.owner.fullName, align: 'left', classes: inactiveRowClass },
   { name: 'actions', label: '', field: 'actions', classes: inactiveRowClass }
 ];