Add VersionHistory page
This commit is contained in:
xue jiahao
227
frontend/src/pages/AppVersionManagement.vue
Normal file
227
frontend/src/pages/AppVersionManagement.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<div class="q-pa-md">
|
||||
<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>
|
||||
</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" >
|
||||
<template v-slot:top-right>
|
||||
<q-input borderless dense filled clearable debounce="300" v-model="filter" placeholder="検索">
|
||||
<template v-slot:append>
|
||||
<q-icon name="search"/>
|
||||
</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>
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
<template v-slot:body-cell-comment="p">
|
||||
<q-td :props="p">
|
||||
<q-scroll-area class="description-cell">
|
||||
<div v-html="p.row['comment']"></div>
|
||||
</q-scroll-area>
|
||||
</q-td>
|
||||
</template>
|
||||
<template v-slot:body-cell-actions="p">
|
||||
<q-td :props="p">
|
||||
<span v-if="p.row.id === app.version"></span>
|
||||
<table-action-menu v-else :row="p.row" minWidth="140px" :actions="actionList" />
|
||||
</q-td>
|
||||
</template>
|
||||
</q-table>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<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-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useAppStore } from 'stores/useAppStore';
|
||||
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 appStore = useAppStore();
|
||||
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 = [
|
||||
{ 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: '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' }
|
||||
];
|
||||
|
||||
const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 20 });
|
||||
const filter = ref('');
|
||||
const versionLoading = ref(false);
|
||||
|
||||
const target = ref<IAppVersionDisplay>();
|
||||
const store = useFlowEditorStore();
|
||||
const confirmDialog = ref(false);
|
||||
const deleteUserLoading = ref(false);
|
||||
|
||||
|
||||
|
||||
const actionList = ref([
|
||||
{ label: 'プル', icon: 'flag', action: changeVersion },
|
||||
// { label: 'プレビュー', icon: 'visibility', action: toVersionHistoryPage },
|
||||
// { separator: true },
|
||||
// { label: '削除', icon: 'delete_outline', class: 'text-red', action: removeRow },
|
||||
]);
|
||||
|
||||
const getApps = async (suppressLoading: false) => {
|
||||
if (!suppressLoading) {
|
||||
appLoading.value = true;
|
||||
}
|
||||
await appStore.loadApps();
|
||||
appLoading.value = false;
|
||||
}
|
||||
|
||||
const getAppById = () => {
|
||||
let res = appStore.getAppById(route.params.id as string);
|
||||
if (res != null) {
|
||||
app.value = res;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
const getVersions = async () => {
|
||||
versionLoading.value = true;
|
||||
rows.value = await appStore.getVersionsByAppId(app.value);
|
||||
versionLoading.value = false;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
let isSuccess = getAppById();
|
||||
if (!isSuccess) {
|
||||
await getApps();
|
||||
isSuccess = getAppById();
|
||||
if (!isSuccess) {
|
||||
$q.notify({
|
||||
icon: 'error',
|
||||
color: 'negative',
|
||||
message: 'バージョン一覧の読み込みに失敗しました'
|
||||
})
|
||||
await router.push('/app');
|
||||
}
|
||||
}
|
||||
await getVersions();
|
||||
});
|
||||
|
||||
async function changeVersion(version: IAppVersionDisplay) {
|
||||
// TODO
|
||||
versionLoading.value = true;
|
||||
target.value = version;
|
||||
await appStore.changeVersion(app.value, version);
|
||||
await getApps(true);
|
||||
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(app:IAppDisplay) {
|
||||
store.setApp({
|
||||
appId: app.id,
|
||||
name: app.name
|
||||
});
|
||||
store.selectFlow(undefined);
|
||||
try {
|
||||
await router.push('/FlowChart/' + app.id);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.description-cell {
|
||||
height: 50px;
|
||||
min-width: 300px;
|
||||
max-height: 50px;
|
||||
white-space: break-spaces;
|
||||
|
||||
.q-scrollarea__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user