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

WIP #295 not yet keep previous page

Browse Source
This commit is contained in:
Cindy Chang
2024-05-31 12:03:09 +08:00
parent 83f399b746
commit 69f6a2048a
6 changed files with 190 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -5,5 +5,5 @@
<style scoped></style>
<script setup>
import { RouterLink, RouterView } from "vue-router";
import { RouterView } from "vue-router";
</script>

96
src/components/Navbar.vue
View File

@@ -2,7 +2,7 @@
<nav class="bg-neutral-700">
<div class="mx-auto px-4" :class="[showNavbarBreadcrumb? 'min-h-12': 'h-12']">
<div class="flex justify-between items-center flex-wrap" v-show="showNavbarBreadcrumb">
<div class="flex flex-1 items-center">
<div id="nav_bar" class="flex flex-1 items-center">
<!-- 回 Files 頁 -->
<router-link to="/files" class="mr-4" v-if="showIcon" id="backPage">
<span class="material-symbols-outlined text-neutral-10 !leading-loose">
@@ -14,7 +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="{'active': isActive === item}">{{ item }}</li>
<li @click="switchNavItem($event, item)" v-for="(item, index) in navViewData[navViewName]"
:key="index" :class="{'active': activePage === item}">
{{ item }}
</li>
</ul>
</div>
<!-- Files Page: Search and Upload -->
@@ -45,7 +48,10 @@
<!-- Other Page: Save and Download -->
<!-- Save 有 data 跳重新命名，沒有 data 跳要不要儲存，沒有動都不跳 -->
<div v-else class="space-x-4">
<button class="btn btn-sm" :class="[ disabledSave ? 'btn-disable' : 'btn-neutral']" :disabled="disabledSave" @click="saveModal">Save</button>
<button class="btn btn-sm" :class="[ disabledSave ? 'btn-disable' : 'btn-neutral']"
:disabled="disabledSave" @click="saveModal">
Save
</button>
<!-- <button class="btn btn-sm btn-neutral">Download</button> -->
</div>
</div>
@@ -53,10 +59,11 @@
</nav>
</template>
<script>
import { storeToRefs } from 'pinia';
import { storeToRefs, mapState, mapActions, } from 'pinia';
import filesStore from '@/stores/files.js';
import AllMapDataStore from '@/stores/allMapData.js';
import ConformanceStore from '@/stores/conformance.js';
import PageAdminStore from '@/stores/pageAdmin.js';
import IconSearch from '@/components/icons/IconSearch.vue';
import IconSetting from '@/components/icons/IconSetting.vue';
import { saveFilter, savedSuccessfully, saveConformance } from '@/module/alertModal.js';
@@ -68,9 +75,19 @@ export default {
const allMapDataStore = AllMapDataStore();
const conformanceStore = ConformanceStore();
const { logId, tempFilterId, createFilterId, filterName, postRuleData, isUpdataFilter } = storeToRefs(allMapDataStore);
const { conformanceRuleData, conformanceLogId, conformanceFilterId, conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, isUpdataConformance, conformanceFileName } = storeToRefs(conformanceStore);
const { conformanceRuleData, conformanceLogId, conformanceFilterId,
conformanceLogTempCheckId, conformanceFilterTempCheckId,
conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
isUpdataConformance, conformanceFileName
} = storeToRefs(conformanceStore);
return { store, allMapDataStore, logId, tempFilterId, createFilterId, filterName, postRuleData, isUpdataFilter, conformanceStore, conformanceRuleData, conformanceLogId, conformanceFilterId, conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, isUpdataConformance, conformanceFileName }
return {
store, allMapDataStore, logId, tempFilterId, createFilterId,
filterName, postRuleData, isUpdataFilter, conformanceStore, conformanceRuleData,
conformanceLogId, conformanceFilterId, conformanceLogTempCheckId,
conformanceFilterTempCheckId, conformanceLogCreateCheckId,
conformanceFilterCreateCheckId, isUpdataConformance, conformanceFileName,
};
},
components: {
IconSearch,
@@ -90,7 +107,6 @@ export default {
COMPARE: ['DASHBOARD']
},
navViewName: 'FILES',
isActive: null,
uploadModal: false,
};
},
@@ -113,8 +129,9 @@ export default {
return result;
},
noShowSaveButton: function() {
return this.navViewName === 'UPLOAD' || this.navViewName === 'COMPARE' || this.isActive === 'PERFORMANCE' ? true : false;
}
return this.navViewName === 'UPLOAD' || this.navViewName === 'COMPARE' || this.activePage === 'PERFORMANCE' ? true : false;
},
...mapState(PageAdminStore, ['activePage', 'pendingActivePage']),
},
watch: {
'$route':'getNavViewName',
@@ -136,18 +153,20 @@ export default {
let type;
let fileId;
let isCheckPage;
const navItemCandidate = event.target.innerText;
this.setPendingActivePage(navItemCandidate);
this.isActive = event.target.innerText;
switch (this.navViewName) {
case 'FILES':
this.store.filesTag = event.target.innerText;
this.store.filesTag = navItemCandidate;
break;
case 'DISCOVER':
type = this.$route.params.type;
fileId = this.$route.params.fileId;
isCheckPage = this.$route.name.includes('Check');
switch (event.target.innerText) {
switch (navItemCandidate) {
case 'MAP':
if(isCheckPage) this.$router.push({name: 'CheckMap', params: { type: type, fileId: fileId }});
else this.$router.push({name: 'Map', params: { type: type, fileId: fileId }});
@@ -166,40 +185,52 @@ export default {
break
}
},
/**
* Based on the route.name, decide the navViewName.
* @returns {string} the string of navigation name to return
*/
getNavViewName() {
let name = this.$route.name;
if(this.$route.name === 'NotFound404') return;
let name = this.$route.name;
let valueToSet;
if(this.$route.name === 'NotFound404') {
return;
}
this.navViewName = this.$route.matched[1].name.toUpperCase();
this.store.filesTag = 'ALL';
switch (this.navViewName) {
case 'FILES':
this.isActive = this.store.filesTag;
valueToSet = this.navItemCandidate;
break;
case 'DISCOVER':
switch (name) {
case 'Map':
case 'CheckMap':
this.isActive = 'MAP';
valueToSet = 'MAP';
break;
case 'Conformance':
case 'CheckConformance':
this.isActive = 'CONFORMANCE';
valueToSet = 'CONFORMANCE';
break;
case 'Performanc':
case 'CheckPerformanc':
this.isActive = 'PERFORMANCE';
valueToSet = 'PERFORMANCE';
break;
}
break;
case 'COMPARE':
switch(name) {
case 'CompareDashboard':
this.isActive = 'DASHBOARD'
valueToSet = 'DASHBOARD';
break;
}
break;
}
this.setPendingActivePage(valueToSet);
return valueToSet;
},
/**
* Save button' modal
@@ -217,18 +248,24 @@ export default {
// 沒有 filter Id, 有暫存 tempFilterId Id 可以另存新檔
if(this.createFilterId) {
await this.allMapDataStore.updataFilter();
if(this.isUpdataFilter) await savedSuccessfully(this.filterName);
if(this.isUpdataFilter) {
await savedSuccessfully(this.filterName);
}
}else if(this.logId){
isSaved = await saveFilter(this.allMapDataStore.addFilterId);
// 存檔後為 filterID，換網址不跳頁，使用 push 記錄歷史路由
if(isSaved) await this.$router.push(`/discover/filter/${this.createFilterId}/map`);
if(isSaved) {
await this.$router.push(`/discover/filter/${this.createFilterId}/map`);
}
};
break;
case 'CheckMap':
// 無論 parentLog, parentFilter，做新 filter 皆另存新檔
isSaved = await saveFilter(this.allMapDataStore.addFilterId);
// 存檔後為 filterID，換網址不跳頁，使用 push 記錄歷史路由
if(isSaved) await this.$router.push(`/discover/filter/${this.createFilterId}/map`);
if(isSaved) {
await this.$router.push(`/discover/filter/${this.createFilterId}/map`);
}
break;
case 'Conformance':
case 'CheckConformance':
@@ -236,18 +273,25 @@ export default {
// 沒有 check Id, 有暫存 temp Id 可以另存新檔
if(this.conformanceFilterCreateCheckId || this.conformanceLogCreateCheckId){
await this.conformanceStore.updataConformance();
if(this.isUpdataConformance) await savedSuccessfully(this.conformanceFileName);
if(this.isUpdataConformance) {
await savedSuccessfully(this.conformanceFileName);
}
} else {
isSaved = await saveConformance(this.conformanceStore.addConformanceCreateCheckId);
// 存檔後為 checkID，換網址不跳頁，使用 push 記錄歷史路由
if(isSaved) {
if(this.conformanceLogId) await this.$router.push(`/discover/conformance/log/${this.conformanceLogCreateCheckId}/conformance`);
else if(this.conformanceFilterId) await this.$router.push(`/discover/conformance/filter/${this.conformanceFilterCreateCheckId}/conformance`);
if(this.conformanceLogId) {
await this.$router.push(`/discover/conformance/log/${this.conformanceLogCreateCheckId}/conformance`);
}
else if(this.conformanceFilterId) {
await this.$router.push(`/discover/conformance/filter/${this.conformanceFilterCreateCheckId}/conformance`);
}
}
}
break;
}
}
},
...mapActions(PageAdminStore, ['setPendingActivePage', ],),
},
}
</script>

25
src/module/alertModal.js
View File

@@ -2,6 +2,7 @@ import Swal from 'sweetalert2';
import AllMapDataStore from '@/stores/allMapData.js';
import ConformanceStore from '@/stores/conformance.js';
import FilesStore from '@/stores/files.js';
import PageAdminStore from '@/stores/pageAdmin.js';
const customClass = {
container: '!z-[99999]',
@@ -78,6 +79,8 @@ export async function savedSuccessfully(value) {
*/
export async function leaveFilter(next, addFilterId, toPath, logOut) {
const allMapDataStore = AllMapDataStore();
const pageAdminStore = PageAdminStore();
const result = await Swal.fire({
title: 'SAVE YOUR FILTER?',
html: 'If you want to continue using this filter in any other page, please select [Yes].',
@@ -89,22 +92,38 @@ export async function leaveFilter(next, addFilterId, toPath, logOut) {
showCancelButton: true,
cancelButtonText: 'No',
cancelButtonColor: '#94a3b8',
customClass: customClass
})
customClass: customClass,
});
if(result.isConfirmed) {
if(allMapDataStore.createFilterId) {
await allMapDataStore.updataFilter();
if(allMapDataStore.isUpdataFilter) await savedSuccessfully(allMapDataStore.filterName);
if(allMapDataStore.isUpdataFilter) {
await savedSuccessfully(allMapDataStore.filterName);
}
} else {
await saveFilter(addFilterId);
}
// Handle page admin issue
pageAdminStore.copyPendingPageToActivePage();
logOut ? logOut() : next(toPath);
} else if(result.dismiss === 'cancel') {
// Handle page admin issue
pageAdminStore.keepPreviousPage();
allMapDataStore.tempFilterId = null;
logOut ? logOut() : next(toPath);
} else if(result.dismiss === 'backdrop') {
// Handle page admin issue
pageAdminStore.keepPreviousPage();
logOut ? null : next(false);
}
// In any cases, execute the following
pageAdminStore.clearPendingActivePage();
};
/**
* Conformance Saved

73
src/stores/pageAdmin.js Normal file
View File

@@ -0,0 +1,73 @@
import { defineStore } from "pinia";
export default defineStore('pageAdminStore', {
state: () => ({
activePage: 'FILES',
activeSubPage: 'ALL',
previousPage: 'FILES',
previousSubPage: 'ALL',
pendingActivePage: '',
pendingActiveSubPage: '',
isPending: false,
}),
getters: {
},
actions: {
/**
* Set Active Page; the page which the user is currently visiting
* @param {string} activePage
* @param {string} activeSubPage
*/
setActivePage(activePage, activeSubpage) {
console.log("setActivePage:", activePage, activeSubPage);
this.activePage = activePage;
this.activeSubPage = activeSubPage;
},
/**
* Set the previous(usually current) page because the user might change her mind when navigating.
* @param {string} previoiusPage
* @param {string} previoiusSubPage
*/
setPrevioiusPage(previoiusPage, previousSubPage) {
this.previoiusPage = previoiusPage;
this.previoiusSubPage = previousSubPage;
},
/**
* Copy the value of pendingActivePage to activePage
*/
copyPendingPageToActivePage() {
console.log("Copy the value of pendingActivePage to activePage\nCopying:", this.pendingActivePage, this.pendingActiveSubPage)
this.activePage = this.pendingActivePage;
this.activeSubPage = this.pendingActiveSubPage;
},
/**
* 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.
* @param {string} pendingActivePage
*/
setPendingActivePage(argPendingActivePage, argPendingActiveSubPage) {
this.pendingActivePage = argPendingActivePage;
this.pendingActiveSubPage = argPendingActiveSubPage;
this.isPending = true;
},
/**
* Set Pending active Page to empty string; we call this right after we just decide an activePage.
* Also, stop pending state.
*/
clearPendingActivePage(){
this.pendingActivePage = '';
this.pendingActiveSubPage = '';
this.isPending = false;
},
/**
* When user dismiss the popup modal, we don't apply the new page,
* instead, we apply the previous page.
*/
keepPreviousPage() {
this.activePage = this.previousPage;
this.activeSubPage = this.previousSubPage;
this.isPending = false;
}
},
})

4
src/views/Login/index.vue
View File

@@ -89,7 +89,9 @@ export default {
*/
changeHandler(event) {
let inputValue = event.target.value;
if(inputValue !== '') this.isInvalid = false;
if(inputValue !== '') {
this.isInvalid = false;
}
},
},
};

25
src/views/MainContainer.vue
View File

@@ -10,7 +10,7 @@
</template>
<script>
import { storeToRefs } from 'pinia';
import { storeToRefs, mapActions, } from 'pinia';
import LoadingStore from '@/stores/loading.js';
import AllMapDataStore from '@/stores/allMapData.js';
import ConformanceStore from '@/stores/conformance.js';
@@ -18,6 +18,7 @@ import Header from "@/components/Header.vue";
import Navbar from "@/components/Navbar.vue";
import Loading from '@/components/Loading.vue';
import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
import PageAdminStore from '@/stores/pageAdmin.js';
export default {
name: 'MainContainer',
@@ -28,13 +29,21 @@ export default {
const { tempFilterId, createFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
const { conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
return { loadingStore, temporaryData, tempFilterId, createFilterId, postRuleData, ruleData, conformanceLogTempCheckId, conformanceFilterTempCheckId, allMapDataStore, conformanceStore };
return {
loadingStore, temporaryData, tempFilterId,
createFilterId, postRuleData, ruleData,
conformanceLogTempCheckId, conformanceFilterTempCheckId,
allMapDataStore, conformanceStore,
};
},
components: {
Header,
Navbar,
Loading
},
methods: {
...mapActions(PageAdminStore, ['copyPendingPageToActivePage',],),
},
created() {
// Save token in Headers.
const token = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
@@ -46,9 +55,17 @@ export default {
// 傳給 Map，通知 Sidebar 要關閉。
this.$emitter.emit('leaveFilter', false);
leaveFilter(next, this.allMapDataStore.addFilterId, to.path)
} else if((this.$route.name === 'Conformance' || this.$route.name === 'CheckConformance') && (this.conformanceLogTempCheckId || this.conformanceFilterTempCheckId)) {
} else if((this.$route.name === 'Conformance' || this.$route.name === 'CheckConformance')
&& (this.conformanceLogTempCheckId || this.conformanceFilterTempCheckId)) {
leaveConformance(next, this.conformanceStore.addConformanceCreateCheckId, to.path)
} else next();
} else {
// 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.
this.copyPendingPageToActivePage();
next();
};
},
};
</script>