[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>