imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pageAdmin add setActivePageComputedByRoute function

Browse Source
This commit is contained in:
Cindy Chang
2024-06-05 13:08:52 +08:00
parent 427b9b6aed
commit 5f0e12ef1a
10 changed files with 213 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/Discover/Conformance/ConformanceSidebar.vue
View File

@@ -160,7 +160,6 @@ export default {
i18next: i18next,
isMainBtnDisabled: true,
isShowBarOpen: false,
visibleLeft: false,
selectConformanceTask: null,
selectConformanceStartAndEnd: null, // Activity sequence
selectCfmSeqStart: null,
@@ -297,44 +296,44 @@ export default {
* Apply button is disabled or not
*/
isApplyBtnDisabled() {
let disabled = true;
let disabledBool = true;
switch (this.selectedRuleType) {
case 'Have activity': // Rule Type 選 Have activity 的行為
if(this.selectConformanceTask?.length) {
disabled = false;
disabledBool = false;
}
break
case 'Activity sequence': // Rule Type 選 Activity sequence 的行為
switch (this.selectedActivitySequence) {
case 'Start & End': // Activity Sequence 選 Start & End 的行為
if(this.selectCfmSeqStart && this.selectCfmSeqEnd) {
disabled = false;
disabledBool = false;
}
break;
case 'Sequence': // Activity Sequence 選 Sequence 的行為
switch (this.selectedMode) {
case 'Directly follows':
if(this.selectCfmSeqDirectly.length >= 2) {
disabled = false;
disabledBool = false;
}
break;
case 'Eventually follows':
if(this.selectCfmSeqEventually.length >= 2) {
disabled = false;
disabledBool = false;
}
break;
case 'Short loop(s)':
disabled = false;
break;
case 'Self loop(s)':
disabled = false;
disabledBool = false;
break;
};
}
break;
case 'Activity duration': // Rule Type 選 Activity duration 的行為
if(this.selectDurationData?.length) {
disabled = false;
disabledBool = false;
}
break;
case 'Processing time': // Rule Type 選 Processing time 的行為
@@ -342,30 +341,30 @@ export default {
case 'End to end':
switch (this.selectedActSeqMore) {
case 'All':
disabled = false;
disabledBool = false;
break;
case 'Start':
if(this.selectCfmPtEteStart) {
disabled = false;
disabledBool = false;
}
break;
case 'End':
if(this.selectCfmPtEteEnd) {
disabled = false;
disabledBool = false;
}
break;
case 'Start & End':
if(!this.isAlreadySubmit) {
if(this.selectCfmPtEteSEStart && this.selectCfmPtEteSEEnd){
disabled = false;
disabledBool = false;
}
} else {
if((!this.selectCfmPtEteSEStart && this.selectCfmPtEteSEEnd)
|| (this.selectCfmPtEteSEStart && !this.selectCfmPtEteSEEnd)) {
disabled = true;
disabledBool = true;
}
else {
disabled = false;
disabledBool = false;
}
}
break;
@@ -375,26 +374,26 @@ export default {
switch (this.selectedActSeqFromTo) {
case 'From':
if(this.selectCfmPtPStart) {
disabled = false;
disabledBool = false;
}
break;
case 'To':
if(this.selectCfmPtPEnd) {
disabled = false;
disabledBool = false;
}
break;
case 'From & To':
if(!this.isAlreadySubmit) {
if(this.selectCfmPtPSEStart && this.selectCfmPtPSEEnd) {
disabled = false;
disabledBool = false;
}
} else {
if((!this.selectCfmPtPSEStart && this.selectCfmPtPSEEnd)
|| (this.selectCfmPtPSEStart && !this.selectCfmPtPSEEnd)) {
disabled = true;
disabledBool = true;
}
else {
disabled = false;
disabledBool = false;
}
}
break;
@@ -408,25 +407,25 @@ export default {
switch (this.selectedActSeqMore) {
case 'Start':
if(this.selectCfmWtEteStart) {
disabled = false;
disabledBool = false;
}
break;
case 'End':
if(this.selectCfmWtEteEnd) {
disabled = false;
disabledBool = false;
}
break;
case 'Start & End':
if(!this.isAlreadySubmit) {
if(this.selectCfmWtEteSEStart && this.selectCfmWtEteSEEnd) {
disabled = false;
disabledBool = false;
} else {
if((!this.selectCfmWtEteSEStart && this.selectCfmWtEteSEEnd)
|| (this.selectCfmWtEteSEStart && !this.selectCfmWtEteSEEnd)) {
disabled = true;
disabledBool = true;
}
else {
disabled = false;
disabledBool = false;
}
}
break;
@@ -437,26 +436,26 @@ export default {
switch (this.selectedActSeqFromTo) {
case 'From':
if(this.selectCfmWtPStart) {
disabled = false;
disabledBool = false;
}
break;
case 'To':
if(this.selectCfmWtPEnd) {
disabled = false;
disabledBool = false;
}
break;
case 'From & To':
if(!this.isAlreadySubmit) {
if(this.selectCfmWtPSEStart && this.selectCfmWtPSEEnd) {
disabled = false;
disabledBool = false;
}
} else {
if((!this.selectCfmWtPSEStart && this.selectCfmWtPSEEnd)
|| (this.selectCfmWtPSEStart && !this.selectCfmWtPSEEnd)) {
disabled = true;
disabledBool = true;
}
else {
disabled = false;
disabledBool = false;
}
}
break;
@@ -467,30 +466,30 @@ export default {
case 'Cycle time': // Rule Type 選 Cycle time 的行為
switch (this.selectedActSeqMore) {
case 'All':
disabled = false;
disabledBool = false;
break;
case 'Start':
if(this.selectCfmCtEteStart) {
disabled = false;
disabledBool = false;
}
break;
case 'End':
if(this.selectCfmCtEteEnd) {
disabled = false;
disabledBool = false;
}
break;
case 'Start & End':
if(!this.isAlreadySubmit) {
if(this.selectCfmCtEteSEStart && this.selectCfmCtEteSEEnd) {
disabled = false;
disabledBool = false;
}
} else {
if((!this.selectCfmCtEteSEStart && this.selectCfmCtEteSEEnd)
|| (this.selectCfmCtEteSEStart && !this.selectCfmCtEteSEEnd)) {
disabled = true;
disabledBool = true;
}
else {
disabled = false;
disabledBool = false;
}
}
break;
@@ -498,7 +497,7 @@ export default {
break;
};
return this.isMainBtnDisabled = disabled;
return this.isMainBtnDisabled = disabledBool;
},
},
@@ -902,7 +901,7 @@ export default {
this.selectTimeReset();
this.$emitter.emit('reset', null);
// reset 成功訊息
this.$toast.success('Rule cleared.');
this.$toast.success(i18next.t("Conformance.RuleCleared"));
this.isShowBarOpen = true;
},
/**
@@ -1292,10 +1291,10 @@ export default {
break;
};
if(dataToSave.min > dataToSave.max) {
return this.$toast.error('Please check time range setting.');
return this.$toast.error(i18next.t("Conformance.PleaseCheckTimeRange"));
}
if(JSON.stringify(dataToSave) === JSON.stringify(this.isSubmittedData)) {
return this.$toast.error('Please set the new rule.');
return this.$toast.error(i18next.t("Conformance.PleaseSetNewRule"));
}
this.isLoading = true;
@@ -1308,7 +1307,7 @@ export default {
this.isLoading = false;
// Results page Cover Plate
this.$emitter.emit('coverPlate', false);
this.$toast.success('Rule applied.');
this.$toast.success(i18next.t("Conformance.RuleApplied"));
},
setTaskByCategoryOnRadioEmitting () {
this.$emitter.on('actRadioData', (data) => {

8
src/components/Discover/Conformance/ConformanceSidebar/TimeRangeDuration.vue
View File

@@ -1,8 +1,12 @@
<template>
<div class="flex justify-between items-center" id="cyp-timerange">
<Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" :updateMax="updateMax" @total-seconds="minTotalSeconds" :value="durationMin"></Durationjs>
<Durationjs :max="minVuemax" :min="minVuemin" :size="'min'" :updateMax="updateMax"
@total-seconds="minTotalSeconds" :value="durationMin">
</Durationjs>
<span>~</span>
<Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" :updateMin="updateMin" @total-seconds="maxTotalSeconds" :value="durationMax"></Durationjs>
<Durationjs :max="maxVuemax" :min="maxVuemin" :size="'max'" :updateMin="updateMin"
@total-seconds="maxTotalSeconds" :value="durationMax">
</Durationjs>
</div>
</template>
<script>

36
src/components/Navbar.vue
View File

@@ -14,8 +14,10 @@
<h2 v-else class="mr-14 py-3 text-2xl font-black text-neutral-10">FILES</h2>
</div>
<ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer">
<li @click="switchNavItem($event, item)" v-for="(item, index) in navViewData[navViewName]"
:key="index" class="nav-item" :class="{'active': activePage?.toUpperCase() === item}">
<li @click="onNavItemBtnClick($event, item)"
v-for="(item, index) in navViewData[navViewName]"
:key="index" class="nav-item"
:class="{'active': activePageComputedByRoute === item}">
{{ item }}
</li>
</ul>
@@ -131,18 +133,23 @@ export default {
noShowSaveButton: function() {
return this.navViewName === 'UPLOAD' || this.navViewName === 'COMPARE' || this.activePage === 'PERFORMANCE' ? true : false;
},
...mapState(PageAdminStore, ['activePage', 'pendingActivePage']),
...mapState(PageAdminStore, [
'activePage',
'pendingActivePage',
'activePageComputedByRoute',
]),
},
watch: {
'$route':'getNavViewName',
filterName: function(newVal, oldVal) {
this.filterName = newVal;
},
activePage: function(newVal) {
}
},
mounted() {
if(this.$route.params.type === 'filter') this.createFilterId= this.$route.params.fileId;
this.handleNavItemBtn();
if(this.$route.params.type === 'filter') {
this.createFilterId= this.$route.params.fileId;
}
this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer') ? true : false;
this.getNavViewName();
},
@@ -151,7 +158,8 @@ export default {
* switch navbar item
* @param {event} event 選取 Navbar 選項後傳入的值
*/
switchNavItem(event) {
onNavItemBtnClick(event) {
console.log('onNavItemBtnClick');
let type;
let fileId;
let isCheckPage;
@@ -200,6 +208,7 @@ export default {
return;
}
// 說明this.$route.matched[1] 表示當前路由匹配的第二個路由記錄
this.navViewName = this.$route.matched[1].name.toUpperCase();
this.store.filesTag = 'ALL';
switch (this.navViewName) {
@@ -233,6 +242,8 @@ export default {
// Frontend is not sure which button will the user press on the modal,
// so here we need to save to a pending state
// 前端無法確定用戶稍後會按下彈窗上的哪個按鈕(取消還是確認、儲存)，
// 因此我們需要將其保存到待處理狀態
this.setPendingActivePage(valueToSet);
return valueToSet;
@@ -299,10 +310,19 @@ export default {
break;
}
},
/**
* Set nav item button background color in case the variable is an empty string
*/
handleNavItemBtn() {
if(this.activePageComputedByRoute === "") {
this.setActivePageComputedByRoute(this.$route.matched[this.$route.matched.length - 1].name);
}
},
...mapActions(PageAdminStore, [
'setPendingActivePage',
'setPrevioiusPage',
'setActivePage'
'setActivePage',
'setActivePageComputedByRoute',
],),
},
}

3
src/components/durationjs.vue
View File

@@ -11,7 +11,8 @@
<p v-show="seconds != 0">{{ seconds }}s</p>
</div>
</div>
<div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect" v-closable="{id: size, handler: onClose}">
<div class="duration-container absolute left-0 top-full translate-y-2" v-show="openTimeSelect"
v-closable="{id: size, handler: onClose}">
<div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
<input
type="text"

7
src/i18n/en.json
View File

@@ -43,6 +43,11 @@
},
"Conformance": {
"RuleSettings": "Rule Settings",
"ActivitySelector": "Activity Selector"
"ActivitySelector": "Activity Selector",
"RuleCleared": "Rule cleared",
"PleaseCheckTimeRange": "Please check time range setting.",
"PleaseSetNewRule": "Please set the new rule.",
"RuleApplied": "Rule applied."
}
}

6
src/module/alertModal.js
View File

@@ -54,6 +54,7 @@ export async function saveFilter(addFilterId) {
fileName = '';
return true;
} else { // 點擊取消或空白處，為存檔失敗。
// console.log("PageAdminStore.activePage", PageAdminStore.activePage);
PageAdminStore.keepPreviousPage();
return false;
}
@@ -100,6 +101,7 @@ export async function leaveFilter(next, addFilterId, toPath, logOut) {
});
if(result.isConfirmed) {
console.log('popup confirm case', );
if(allMapDataStore.createFilterId) {
await allMapDataStore.updataFilter();
@@ -116,13 +118,17 @@ export async function leaveFilter(next, addFilterId, toPath, logOut) {
logOut ? logOut() : next(toPath);
} else if(result.dismiss === 'cancel') {
console.log('popup cancel case', );
// Handle page admin issue
console.log("PageAdminStore.activePage", PageAdminStore.activePage);
pageAdminStore.keepPreviousPage();
allMapDataStore.tempFilterId = null;
logOut ? logOut() : next(toPath);
} else if(result.dismiss === 'backdrop') {
console.log('popup backdrop case', );
// Handle page admin issue
console.log("PageAdminStore.activePage", PageAdminStore.activePage);
pageAdminStore.keepPreviousPage();
logOut ? null : next(false);

8
src/module/timeLabel.js
View File

@@ -111,17 +111,12 @@ export function followTimeLabel(second, max, fixedNumber = 0) {
const day = 24 * 60 * 60;
const hour = 60 * 60;
const minutes = 60;
console.log("max / day", max / day);
console.log("max % day", max % day);
console.log('(max % day) / hour', (max % day) / hour);
console.log('max % hour', max % hour);
console.log('(max % hour) / minutes', (max % hour) / minutes);
const dd = Math.floor(max / day);
const hh = Math.floor((max % day) / hour);
const mm = Math.floor((max % hour) / minutes);
let maxUnit = '';
let result;
console.log("所以dd, hh, mm", dd, hh, mm)
maxUnit = dd > 0 ? 'd' : hh > 0 ? 'h' : mm > 0 ? 'm' : 's';
switch (maxUnit) {
case 'd':
@@ -149,7 +144,6 @@ console.log("所以dd, hh, mm", dd, hh, mm)
result = second.toFixed(fixedNumber) + 's';
break;
}
console.log("followTimeLabel() result", max, result)
return result;
}
/**

26
src/stores/pageAdmin.js
View File

@@ -1,5 +1,11 @@
import { defineStore } from "pinia";
import { mapPageNameToCapitalUnifiedName } from "../utils/pageUtils";
// There are at least two ways to trigger a page navigation:
// clicking the navigation button and refreshing the page.
// Therefore, we need to handle page transitions caused by both of these methods.
// 至少有兩種方式引起畫面的導向: 點選導覽按鈕與重新整理網頁
// 因此至少要處理這兩種方式所引起的畫面切換
export default defineStore('pageAdminStore', {
state: () => ({
activePage: 'FILES',
@@ -7,17 +13,27 @@ export default defineStore('pageAdminStore', {
pendingActivePage: 'FILES',
isPending: false,
shouldKeepPreviousPage: false, // false -- meaning modal is not pressed as "NO"
activePageComputedByRoute: "MAP",
}),
getters: {
},
actions: {
setActivePageComputedByRoute(routeMatched){
if (routeMatched.length && routeMatched[routeMatched.length - 1]
&& routeMatched[routeMatched.length - 1].name) {
// console.log('setActivePageComputedByRoute()', mapPageNameToCapitalUnifiedName(routeMatched[routeMatched.length - 1].name));
this.activePageComputedByRoute = mapPageNameToCapitalUnifiedName(
routeMatched[routeMatched.length - 1].name);
}
// console.log('this.activePageComputedByRoute', this.activePageComputedByRoute);
},
/**
* Set Active Page; the page which the user is currently visiting
* @param {string} activePage
*/
setActivePage(activePage) {
console.log("setActivePage", activePage)
this.activePage = activePage;
// console.log("setActivePage", activePage)
this.activePage = mapPageNameToCapitalUnifiedName(activePage);
},
/**
* Specify previous page state value.
@@ -36,16 +52,19 @@ export default defineStore('pageAdminStore', {
* Copy(transit) the value of pendingActivePage to activePage
*/
copyPendingPageToActivePage() {
// console.log('pinia copying this.pendingActivePage', this.pendingActivePage);
this.activePage = this.pendingActivePage;
},
/**
* Set Pending active Page, meaning we are not sure if user will chang her mind later on.
* Also, start pending state.
* Often, user triggers the modal and the pending state starts.
* Note: String conversion is needed. For Example, CheckMap is converted into MAP
* @param {string} pendingActivePage
*/
setPendingActivePage(argPendingActivePage) {
this.pendingActivePage = argPendingActivePage;
// console.log('pinia setting this.pendingActivePage', this.pendingActivePage);
this.pendingActivePage = mapPageNameToCapitalUnifiedName(argPendingActivePage);
this.isPending = true;
},
/**
@@ -61,6 +80,7 @@ export default defineStore('pageAdminStore', {
* instead, we apply the previous page.
*/
keepPreviousPage() {
// console.log('pinia keeping this.previousPage', this.previousPage);
this.activePage = this.previousPage;
this.isPending = false;
this.shouldKeepPreviousPage = true;

19
src/utils/pageUtils.js
View File

@@ -1,4 +1,23 @@
/**
* Convert or map raw page name to an upper case string
* and possibly change the name to another name
* @param {string} rawPageName
* @returns {string}
*/
const mapPageNameToCapitalUnifiedName = (rawPageName) => {
if(rawPageName) {
switch (rawPageName.toUpperCase()) {
case 'CHECKMAP':
return 'MAP';
case 'CHECKCONFORMANCE':
return 'CONFORMANCE';
case 'CHECKPERFORMANCE':
return 'PERFORMANCE';
default:
return rawPageName.toUpperCase();
}
}
};
export {

16
src/views/MainContainer.vue
View File

@@ -42,11 +42,17 @@ export default {
Loading
},
computed: {
...mapState(PageAdminStore, ['shouldKeepPreviousPage']),
...mapState(PageAdminStore, [
'shouldKeepPreviousPage',
'activePageComputedByRoute'
]),
},
methods: {
...mapActions(PageAdminStore, ['copyPendingPageToActivePage', 'setPrevioiusPage',
...mapActions(PageAdminStore, [
'copyPendingPageToActivePage',
'setPrevioiusPage',
'clearShouldKeepPreviousPageBoolean',
'setActivePageComputedByRoute',
],),
},
created() {
@@ -54,10 +60,11 @@ export default {
const token = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
this.$http.defaults.headers.common['Authorization'] = `Bearer ${token}`;
},
// Swal modal handling is called before beforeRouteUpdate
// Rember, Swal modal handling is called before beforeRouteUpdate
beforeRouteUpdate(to, from, next) {
// console.log("beforeRouteUpdate", from.name, "to:", to.name);
this.setPrevioiusPage(from.name);
this.setActivePageComputedByRoute(to.matched);
// 離開 Map 頁時判斷是否有無資料和需要存檔
if ((from.name === 'Map' || from.name === 'CheckMap') && this.tempFilterId) {
@@ -76,6 +83,9 @@ export default {
// In this else block:
// for those pages who don't need popup modals, we handle page administration right now.
// By calling the following code, we decide the next visiting page.
// 在這個 else 區塊中：
// 對於那些不需要彈窗的頁面，我們現在就處理頁面管理。
// 透過呼叫以下代碼，我們決定出下一個將要走訪的頁面。
this.copyPendingPageToActivePage();
next();
}