Migrate all Vue components from Options API to <script setup>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -71,7 +71,7 @@
|
||||
<span v-show="secondaryDragData.length > 0" class="material-symbols-outlined material-fill bg-neutral-10 text-neutral-500 block rounded-full absolute -top-[5%] -right-[5%] cursor-pointer hover:text-danger" @click="secondaryDragDelete
|
||||
">do_not_disturb_on</span>
|
||||
</div>
|
||||
<button class="btn btn-sm" :class="this.isCompareDisabledButton ? 'btn-disable' : 'btn-c-primary'" :disabled="isCompareDisabledButton" @click="compareSubmit">Compare</button>
|
||||
<button class="btn btn-sm" :class="isCompareDisabledButton ? 'btn-disable' : 'btn-c-primary'" :disabled="isCompareDisabledButton" @click="compareSubmit">Compare</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Recently Used -->
|
||||
@@ -117,7 +117,7 @@
|
||||
</div>
|
||||
<!-- All Files type of grid -->
|
||||
<ul>
|
||||
<draggable tag="ul" :list="compareData" :group="{ name: 'files' }" itemKey="name" class="flex justify-start items-start gap-4
|
||||
<draggable tag="ul" :list="compareData" :group="{ name: 'files' }" itemKey="name" class="flex justify-start items-start gap-4
|
||||
flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_440px)] scrollbar" id="compareGridCards">
|
||||
<template #item="{ element, index }">
|
||||
<li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300
|
||||
@@ -209,7 +209,7 @@
|
||||
</section>
|
||||
</div>
|
||||
<!-- ContextMenu -->
|
||||
<ContextMenu ref="fileRightMenu" :model="items" @hide="selectedFile = null" class="cursor-pointer">
|
||||
<ContextMenu ref="fileRightMenuRef" :model="items" @hide="selectedFile = null" class="cursor-pointer">
|
||||
<template #item="{ item }">
|
||||
<a class="flex align-items-center px-4 py-2 duration-300 hover:bg-primary/20">
|
||||
<span class="material-symbols-outlined">{{ item.icon }}</span>
|
||||
@@ -220,8 +220,10 @@
|
||||
</ContextMenu>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { storeToRefs, mapActions, } from 'pinia';
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useMapCompareStore } from '@/stores/mapCompareStore';
|
||||
import { useLoginStore } from '@/stores/login';
|
||||
import { useFilesStore } from '@/stores/files';
|
||||
@@ -237,390 +239,388 @@
|
||||
import IconGrid from '@/components/icons/IconGrid.vue';
|
||||
import { renameModal, deleteFileModal, reallyDeleteInformation } from '@/module/alertModal.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mapCompareStore: useMapCompareStore(),
|
||||
isActive: null,
|
||||
isHover: null,
|
||||
switchListOrGrid: false,
|
||||
selectedTableFile: null, // table 右鍵選單 item
|
||||
selectedFile: null, // 右鍵選單 item
|
||||
selectedType: null,
|
||||
selectedId: null,
|
||||
selectedName: null,
|
||||
items: [
|
||||
{
|
||||
label: 'Rename',
|
||||
icon: 'edit_square',
|
||||
command: this.rename,
|
||||
},
|
||||
{
|
||||
label: 'Download',
|
||||
icon: 'download',
|
||||
command: this.download,
|
||||
},
|
||||
{
|
||||
separator: true // 分隔符號
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'delete',
|
||||
command: this.deleteFile,
|
||||
},
|
||||
],
|
||||
compareData: null,
|
||||
primaryDragData: [],
|
||||
secondaryDragData: [],
|
||||
gridSort: null,
|
||||
columnType: [
|
||||
{ name: 'By File Name (A to Z)', code: 'nameAscending'},
|
||||
{ name: 'By File Name (Z to A)', code: 'nameDescending'},
|
||||
{ name: 'By Dependency (A to Z)', code: 'parentLogAscending'},
|
||||
{ name: 'By Dependency (Z to A)', code: 'parentLogDescending'},
|
||||
{ name: 'By File Type (A to Z)', code: 'fileAscending'},
|
||||
{ name: 'By File Type (Z to A)', code: 'fileDescending'},
|
||||
{ name: 'By Last Update (A to Z)', code: 'updatedAscending'},
|
||||
{ name: 'By Last Update (Z to A)', code: 'updatedDescending'},
|
||||
],
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const loginStore = useLoginStore();
|
||||
const store = useFilesStore();
|
||||
const allMapDataStore = useAllMapDataStore();
|
||||
const loadingStore = useLoadingStore();
|
||||
const { dependentsData, filesTag } = storeToRefs(store);
|
||||
const { createFilterId, baseLogId } = storeToRefs(allMapDataStore);
|
||||
const { isLoading } = storeToRefs(loadingStore);
|
||||
const router = useRouter();
|
||||
|
||||
return { loginStore, store, dependentsData, filesTag, allMapDataStore, createFilterId, baseLogId, isLoading }
|
||||
},
|
||||
components: {
|
||||
IconDataFormat,
|
||||
IconRule,
|
||||
IconsFilter,
|
||||
IconFlowChart,
|
||||
IconVector,
|
||||
IconList,
|
||||
IconGrid
|
||||
},
|
||||
computed: {
|
||||
/**
|
||||
* Read allFiles
|
||||
*/
|
||||
allFiles: function() {
|
||||
if(this.store.allFiles.length !== 0){
|
||||
const sortFiles = Array.from(this.store.allFiles);
|
||||
sortFiles.sort((x,y) => new Date(y.updated_base) - new Date(x.updated_base));
|
||||
return sortFiles;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 時間排序，如果沒有 accessed_at 就不加入 data
|
||||
*/
|
||||
recentlyUsedFiles: function() {
|
||||
let recentlyUsedFiles = Array.from(this.store.allFiles);
|
||||
recentlyUsedFiles = recentlyUsedFiles.filter(item => item.accessed_at !== null);
|
||||
recentlyUsedFiles.sort((x, y) => new Date(y.accessed_base) - new Date(x.accessed_base));
|
||||
return recentlyUsedFiles;
|
||||
},
|
||||
/**
|
||||
* Compare Submit button disabled
|
||||
*/
|
||||
isCompareDisabledButton: function() {
|
||||
const result = this.primaryDragData.length === 0 || this.secondaryDragData.length === 0;
|
||||
return result;
|
||||
},
|
||||
/**
|
||||
* Really deleted information
|
||||
*/
|
||||
reallyDeleteData: function() {
|
||||
let result = [];
|
||||
// Stores
|
||||
const mapCompareStore = useMapCompareStore();
|
||||
const loginStore = useLoginStore();
|
||||
const store = useFilesStore();
|
||||
const allMapDataStore = useAllMapDataStore();
|
||||
const pageAdminStore = usePageAdminStore();
|
||||
const loadingStore = useLoadingStore();
|
||||
|
||||
if(this.store.allFiles.length !== 0){
|
||||
result = JSON.parse(JSON.stringify(this.store.allFiles));
|
||||
result = result.filter(file => file.is_deleted === true);
|
||||
}
|
||||
const { dependentsData, filesTag } = storeToRefs(store);
|
||||
const { createFilterId, baseLogId } = storeToRefs(allMapDataStore);
|
||||
const { isLoading } = storeToRefs(loadingStore);
|
||||
|
||||
return result
|
||||
}
|
||||
// Data
|
||||
const isActive = ref(null);
|
||||
const isHover = ref(null);
|
||||
const switchListOrGrid = ref(false);
|
||||
const selectedTableFile = ref(null);
|
||||
const selectedFile = ref(null);
|
||||
const selectedType = ref(null);
|
||||
const selectedId = ref(null);
|
||||
const selectedName = ref(null);
|
||||
const compareData = ref(null);
|
||||
const primaryDragData = ref([]);
|
||||
const secondaryDragData = ref([]);
|
||||
const gridSort = ref(null);
|
||||
const fileRightMenuRef = ref(null);
|
||||
|
||||
const items = [
|
||||
{
|
||||
label: 'Rename',
|
||||
icon: 'edit_square',
|
||||
command: rename,
|
||||
},
|
||||
watch: {
|
||||
filesTag: {
|
||||
handler(newValue) {
|
||||
if(newValue !== 'COMPARE'){
|
||||
this.primaryDragData = [];
|
||||
this.secondaryDragData = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
allFiles: {
|
||||
handler(newValue) {
|
||||
if(newValue !== null) this.compareData = JSON.parse(JSON.stringify(newValue));
|
||||
}
|
||||
},
|
||||
reallyDeleteData: {
|
||||
handler(newValue, oldValue) {
|
||||
if(newValue.length !== 0 && oldValue.length === 0){
|
||||
this.showReallyDelete();
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
{
|
||||
label: 'Download',
|
||||
icon: 'download',
|
||||
command: download,
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Set Row Style
|
||||
*/
|
||||
setRowClass() {
|
||||
return ['group']
|
||||
},
|
||||
/**
|
||||
* Set Compare Row Style
|
||||
*/
|
||||
setCompareRowClass() {
|
||||
return ['leading-6']
|
||||
},
|
||||
/**
|
||||
* 選擇該 files 進入 Discover/Compare/Design 頁面
|
||||
* @param {object} file 該 file 的詳細資料
|
||||
*/
|
||||
enterDiscover(file){
|
||||
let type;
|
||||
let fileId;
|
||||
let params;
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'delete',
|
||||
command: deleteFile,
|
||||
},
|
||||
];
|
||||
|
||||
this.setCurrentMapFile(file.name);
|
||||
const columnType = [
|
||||
{ name: 'By File Name (A to Z)', code: 'nameAscending'},
|
||||
{ name: 'By File Name (Z to A)', code: 'nameDescending'},
|
||||
{ name: 'By Dependency (A to Z)', code: 'parentLogAscending'},
|
||||
{ name: 'By Dependency (Z to A)', code: 'parentLogDescending'},
|
||||
{ name: 'By File Type (A to Z)', code: 'fileAscending'},
|
||||
{ name: 'By File Type (Z to A)', code: 'fileDescending'},
|
||||
{ name: 'By Last Update (A to Z)', code: 'updatedAscending'},
|
||||
{ name: 'By Last Update (Z to A)', code: 'updatedDescending'},
|
||||
];
|
||||
|
||||
switch (file.type) {
|
||||
case 'log':
|
||||
this.createFilterId = null;
|
||||
this.baseLogId = file.id;
|
||||
fileId = file.id;
|
||||
type = file.type;
|
||||
params = { type: type, fileId: fileId };
|
||||
this.$router.push({name: 'Map', params: params});
|
||||
break;
|
||||
case 'filter':
|
||||
this.createFilterId = file.id;
|
||||
this.baseLogId = file.parent.id;
|
||||
fileId = file.id;
|
||||
type = file.type;
|
||||
params = { type: type, fileId: fileId };
|
||||
this.$router.push({name: 'Map', params: params});
|
||||
break;
|
||||
// Computed
|
||||
/**
|
||||
* Read allFiles
|
||||
*/
|
||||
const allFiles = computed(() => {
|
||||
if(store.allFiles.length !== 0){
|
||||
const sortFiles = Array.from(store.allFiles);
|
||||
sortFiles.sort((x,y) => new Date(y.updated_base) - new Date(x.updated_base));
|
||||
return sortFiles;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 時間排序，如果沒有 accessed_at 就不加入 data
|
||||
*/
|
||||
const recentlyUsedFiles = computed(() => {
|
||||
let recentlyUsed = Array.from(store.allFiles);
|
||||
recentlyUsed = recentlyUsed.filter(item => item.accessed_at !== null);
|
||||
recentlyUsed.sort((x, y) => new Date(y.accessed_base) - new Date(x.accessed_base));
|
||||
return recentlyUsed;
|
||||
});
|
||||
|
||||
/**
|
||||
* Compare Submit button disabled
|
||||
*/
|
||||
const isCompareDisabledButton = computed(() => {
|
||||
return primaryDragData.value.length === 0 || secondaryDragData.value.length === 0;
|
||||
});
|
||||
|
||||
/**
|
||||
* Really deleted information
|
||||
*/
|
||||
const reallyDeleteData = computed(() => {
|
||||
let result = [];
|
||||
if(store.allFiles.length !== 0){
|
||||
result = JSON.parse(JSON.stringify(store.allFiles));
|
||||
result = result.filter(file => file.is_deleted === true);
|
||||
}
|
||||
return result;
|
||||
});
|
||||
|
||||
// Watch
|
||||
watch(filesTag, (newValue) => {
|
||||
if(newValue !== 'COMPARE'){
|
||||
primaryDragData.value = [];
|
||||
secondaryDragData.value = [];
|
||||
}
|
||||
});
|
||||
|
||||
watch(allFiles, (newValue) => {
|
||||
if(newValue !== null) compareData.value = JSON.parse(JSON.stringify(newValue));
|
||||
});
|
||||
|
||||
watch(reallyDeleteData, (newValue, oldValue) => {
|
||||
if(newValue.length !== 0 && oldValue.length === 0){
|
||||
showReallyDelete();
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
// Methods
|
||||
/**
|
||||
* Set Row Style
|
||||
*/
|
||||
function setRowClass() {
|
||||
return ['group'];
|
||||
}
|
||||
|
||||
/**
|
||||
* Set Compare Row Style
|
||||
*/
|
||||
function setCompareRowClass() {
|
||||
return ['leading-6'];
|
||||
}
|
||||
|
||||
/**
|
||||
* 選擇該 files 進入 Discover/Compare/Design 頁面
|
||||
* @param {object} file 該 file 的詳細資料
|
||||
*/
|
||||
function enterDiscover(file){
|
||||
let type;
|
||||
let fileId;
|
||||
let params;
|
||||
|
||||
pageAdminStore.setCurrentMapFile(file.name);
|
||||
|
||||
switch (file.type) {
|
||||
case 'log':
|
||||
createFilterId.value = null;
|
||||
baseLogId.value = file.id;
|
||||
fileId = file.id;
|
||||
type = file.type;
|
||||
params = { type: type, fileId: fileId };
|
||||
router.push({name: 'Map', params: params});
|
||||
break;
|
||||
case 'filter':
|
||||
createFilterId.value = file.id;
|
||||
baseLogId.value = file.parent.id;
|
||||
fileId = file.id;
|
||||
type = file.type;
|
||||
params = { type: type, fileId: fileId };
|
||||
router.push({name: 'Map', params: params});
|
||||
break;
|
||||
case 'log-check':
|
||||
case 'filter-check':
|
||||
fileId = file.id;
|
||||
type = file.parent.type;
|
||||
params = { type: type, fileId: fileId };
|
||||
router.push({name: 'CheckConformance', params: params});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Right Click DOM Event
|
||||
* @param {event} event 該 file 的詳細資料
|
||||
* @param {string} file file's name
|
||||
*/
|
||||
function onRightClick(event, file) {
|
||||
selectedType.value = file.type;
|
||||
selectedId.value = file.id;
|
||||
selectedName.value = file.name;
|
||||
fileRightMenuRef.value.show(event);
|
||||
}
|
||||
|
||||
/**
|
||||
* Right Click Table DOM Event
|
||||
* @param {event} event 該 file 的詳細資料
|
||||
*/
|
||||
function onRightClickTable(event) {
|
||||
selectedType.value = event.data.type;
|
||||
selectedId.value = event.data.id;
|
||||
selectedName.value = event.data.name;
|
||||
fileRightMenuRef.value.show(event.originalEvent);
|
||||
}
|
||||
|
||||
/**
|
||||
* Right Click Gride Card DOM Event
|
||||
* @param {event} event 該 file 的詳細資料
|
||||
* @param {number} index 該 file 的 index
|
||||
*/
|
||||
function onGridCardClick(file, index) {
|
||||
selectedType.value = file.type;
|
||||
selectedId.value = file.id;
|
||||
selectedName.value = file.name;
|
||||
isActive.value = index;
|
||||
}
|
||||
|
||||
/**
|
||||
* File's Rename
|
||||
* @param {string} type 該檔案的 type
|
||||
* @param {number} id 該檔案的 id
|
||||
* @param {string} source hover icon 該檔案的 icon
|
||||
* @param {string} fileName file's name
|
||||
*/
|
||||
function rename(type, id, source, fileName) {
|
||||
if(type && id && source === 'list-hover') {
|
||||
selectedType.value = type;
|
||||
selectedId.value = id;
|
||||
selectedName.value = fileName;
|
||||
}
|
||||
renameModal(store.rename, selectedType.value, selectedId.value, selectedName.value);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete file
|
||||
* @param {string} type 該檔案的 type
|
||||
* @param {number} id 該檔案的 id
|
||||
* @param {string} source hover icon 該檔案的 icon
|
||||
*/
|
||||
async function deleteFile(type, id, name, source) {
|
||||
let srt = '';
|
||||
let data = [];
|
||||
// 判斷是否來自 hover icon 選單
|
||||
if(type && id && name && source === 'list-hover') {
|
||||
selectedType.value = type;
|
||||
selectedId.value = id;
|
||||
selectedName.value = name;
|
||||
}
|
||||
// 取得相依性檔案
|
||||
await store.getDependents(selectedType.value, selectedId.value);
|
||||
if(dependentsData.value.length !== 0) {
|
||||
data = [...dependentsData.value];
|
||||
data.forEach(i => {
|
||||
switch (i.type) {
|
||||
case 'log-check':
|
||||
i.type = 'rule';
|
||||
break;
|
||||
case 'filter-check':
|
||||
fileId = file.id;
|
||||
type = file.parent.type;
|
||||
params = { type: type, fileId: fileId };
|
||||
this.$router.push({name: 'CheckConformance', params: params});
|
||||
i.type = 'rule';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Right Click DOM Event
|
||||
* @param {event} event 該 file 的詳細資料
|
||||
* @param {string} file file's name
|
||||
*/
|
||||
onRightClick(event, file) {
|
||||
this.selectedType = file.type;
|
||||
this.selectedId = file.id;
|
||||
this.selectedName = file.name;
|
||||
this.$refs.fileRightMenu.show(event)
|
||||
},
|
||||
/**
|
||||
* Right Click Table DOM Event
|
||||
* @param {event} event 該 file 的詳細資料
|
||||
*/
|
||||
onRightClickTable(event) {
|
||||
this.selectedType = event.data.type;
|
||||
this.selectedId = event.data.id;
|
||||
this.selectedName = event.data.name;
|
||||
this.$refs.fileRightMenu.show(event.originalEvent)
|
||||
},
|
||||
/**
|
||||
* Right Click Gride Card DOM Event
|
||||
* @param {event} event 該 file 的詳細資料
|
||||
* @param {number} index 該 file 的 index
|
||||
*/
|
||||
onGridCardClick(file, index) {
|
||||
this.selectedType = file.type;
|
||||
this.selectedId = file.id;
|
||||
this.selectedName = file.name;
|
||||
this.isActive = index;
|
||||
},
|
||||
/**
|
||||
* File's Rename
|
||||
* @param {string} type 該檔案的 type
|
||||
* @param {number} id 該檔案的 id
|
||||
* @param {string} source hover icon 該檔案的 icon
|
||||
* @param {string} fileName file's name
|
||||
*/
|
||||
rename(type, id, source, fileName) {
|
||||
if(type && id && source === 'list-hover') {
|
||||
this.selectedType = type;
|
||||
this.selectedId = id;
|
||||
this.selectedName = fileName;
|
||||
}
|
||||
renameModal(this.store.rename, this.selectedType, this.selectedId, this.selectedName);
|
||||
},
|
||||
/**
|
||||
* Delete file
|
||||
* @param {string} type 該檔案的 type
|
||||
* @param {number} id 該檔案的 id
|
||||
* @param {string} source hover icon 該檔案的 icon
|
||||
*/
|
||||
async deleteFile(type, id, name, source) {
|
||||
let srt = '';
|
||||
let data = [];
|
||||
// 判斷是否來自 hover icon 選單
|
||||
if(type && id && name && source === 'list-hover') {
|
||||
this.selectedType = type;
|
||||
this.selectedId = id;
|
||||
this.selectedName = name;
|
||||
}
|
||||
// 取得相依性檔案
|
||||
await this.store.getDependents(this.selectedType, this.selectedId);
|
||||
if(this.dependentsData.length !== 0) {
|
||||
data = [...this.dependentsData];
|
||||
data.forEach(i => {
|
||||
switch (i.type) {
|
||||
case 'log-check':
|
||||
i.type = 'rule';
|
||||
break;
|
||||
case 'filter-check':
|
||||
i.type = 'rule';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
const content = `<li>[${i.type}] ${i.name}</li>`;
|
||||
srt += content;
|
||||
});
|
||||
}
|
||||
deleteFileModal(srt, this.selectedType, this.selectedId, this.selectedName);
|
||||
srt = '';
|
||||
},
|
||||
/**
|
||||
* 顯示被 Admin 或被其他帳號刪除的檔案
|
||||
*/
|
||||
showReallyDelete(){
|
||||
let srt = '';
|
||||
|
||||
if(this.reallyDeleteData.length !== 0) {
|
||||
this.reallyDeleteData.forEach(file => {
|
||||
switch (file.type) {
|
||||
case 'log-check':
|
||||
case 'filter-check':
|
||||
default:
|
||||
file.type = 'rule';
|
||||
break;
|
||||
}
|
||||
|
||||
const content = `<li>[${file.type}] ${file.name}</li>`;
|
||||
srt += content;
|
||||
});
|
||||
}
|
||||
reallyDeleteInformation(srt, this.reallyDeleteData);
|
||||
srt = '';
|
||||
},
|
||||
/**
|
||||
* Download file as CSV
|
||||
* @param {string} type 該檔案的 type
|
||||
* @param {number} id 該檔案的 id
|
||||
* @param {string} source hover icon 該檔案的 icon
|
||||
*/
|
||||
download(type, id, source, name) {
|
||||
if(type && id && source === 'list-hover' && name) {
|
||||
this.selectedType = type;
|
||||
this.selectedId = id;
|
||||
this.selectedName = name;
|
||||
}
|
||||
this.store.downloadFileCSV(this.selectedType, this.selectedId, this.selectedName);
|
||||
},
|
||||
/**
|
||||
* Delete Compare Primary log
|
||||
*/
|
||||
primaryDragDelete() {
|
||||
this.compareData.unshift(this.primaryDragData[0]);
|
||||
this.primaryDragData.length = 0;
|
||||
},
|
||||
/**
|
||||
* Delete Compare Secondary log
|
||||
*/
|
||||
secondaryDragDelete() {
|
||||
this.compareData.unshift(this.secondaryDragData[0]);
|
||||
this.secondaryDragData.length = 0;
|
||||
},
|
||||
/**
|
||||
* Enter the Compare page
|
||||
*/
|
||||
compareSubmit() {
|
||||
const primaryType = this.primaryDragData[0].type;
|
||||
const secondaryType = this.secondaryDragData[0].type;
|
||||
const primaryId = this.primaryDragData[0].id;
|
||||
const secondaryId = this.secondaryDragData[0].id;
|
||||
const params = { primaryType: primaryType, primaryId: primaryId, secondaryType: secondaryType, secondaryId: secondaryId };
|
||||
|
||||
this.mapCompareStore.setCompareRouteParam(primaryType, primaryId, secondaryType, secondaryId);
|
||||
this.$router.push({name: 'CompareDashboard', params: params});
|
||||
},
|
||||
/**
|
||||
* Grid 模板時的篩選器
|
||||
* @param {event} event choose columnType item
|
||||
*/
|
||||
getGridSortData(event) {
|
||||
const code = event.value.code;
|
||||
|
||||
// 文字排序: 將 name 字段轉換為小寫進行比較，使用 localeCompare() 方法進行字母順序比較
|
||||
switch (code) {
|
||||
case 'nameAscending':
|
||||
this.compareData = this.compareData.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
|
||||
break;
|
||||
case 'nameDescending':
|
||||
this.compareData = this.compareData.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())).reverse();
|
||||
break;
|
||||
case 'parentLogAscending':
|
||||
this.compareData = this.compareData.sort((a, b) => a.parentLog.toLowerCase().localeCompare(b.parentLog.toLowerCase()));
|
||||
break;
|
||||
case 'parentLogDescending':
|
||||
this.compareData = this.compareData.sort((a, b) => a.parentLog.toLowerCase().localeCompare(b.parentLog.toLowerCase())).reverse();
|
||||
break;
|
||||
case 'fileAscending':
|
||||
this.compareData = this.compareData.sort((a, b) => a.fileType.toLowerCase().localeCompare(b.fileType.toLowerCase()));
|
||||
break;
|
||||
case 'fileDescending':
|
||||
this.compareData = this.compareData.sort((a, b) => a.fileType.toLowerCase().localeCompare(b.fileType.toLowerCase())).reverse();
|
||||
break;
|
||||
case 'updatedAscending':
|
||||
this.compareData = this.compareData.sort((a, b) => new Date(a.updated_base) - new Date(b.updated_base));
|
||||
break;
|
||||
case 'updatedDescending':
|
||||
this.compareData = this.compareData.sort((a, b) => new Date(a.updated_base) - new Date(b.updated_base)).reverse();
|
||||
break;
|
||||
}
|
||||
},
|
||||
...mapActions(
|
||||
usePageAdminStore, ['setCurrentMapFile',],
|
||||
)
|
||||
},
|
||||
mounted() {
|
||||
this.isLoading = true;
|
||||
this.store.fetchAllFiles();
|
||||
window.addEventListener('click', (e) => {
|
||||
const clickedLi = e.target.closest('li');
|
||||
if(!clickedLi || !clickedLi.id.startsWith('li')) this.isActive = null;
|
||||
})
|
||||
// 為 DataTable tbody 加入 .scrollbar 選擇器
|
||||
const tbodyElement = document.querySelector('.p-datatable-tbody');
|
||||
tbodyElement.classList.add('scrollbar');
|
||||
this.isLoading = false;
|
||||
},
|
||||
const content = `<li>[${i.type}] ${i.name}</li>`;
|
||||
srt += content;
|
||||
});
|
||||
}
|
||||
deleteFileModal(srt, selectedType.value, selectedId.value, selectedName.value);
|
||||
srt = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* 顯示被 Admin 或被其他帳號刪除的檔案
|
||||
*/
|
||||
function showReallyDelete(){
|
||||
let srt = '';
|
||||
|
||||
if(reallyDeleteData.value.length !== 0) {
|
||||
reallyDeleteData.value.forEach(file => {
|
||||
switch (file.type) {
|
||||
case 'log-check':
|
||||
case 'filter-check':
|
||||
default:
|
||||
file.type = 'rule';
|
||||
break;
|
||||
}
|
||||
|
||||
const content = `<li>[${file.type}] ${file.name}</li>`;
|
||||
srt += content;
|
||||
});
|
||||
}
|
||||
reallyDeleteInformation(srt, reallyDeleteData.value);
|
||||
srt = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Download file as CSV
|
||||
* @param {string} type 該檔案的 type
|
||||
* @param {number} id 該檔案的 id
|
||||
* @param {string} source hover icon 該檔案的 icon
|
||||
*/
|
||||
function download(type, id, source, name) {
|
||||
if(type && id && source === 'list-hover' && name) {
|
||||
selectedType.value = type;
|
||||
selectedId.value = id;
|
||||
selectedName.value = name;
|
||||
}
|
||||
store.downloadFileCSV(selectedType.value, selectedId.value, selectedName.value);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete Compare Primary log
|
||||
*/
|
||||
function primaryDragDelete() {
|
||||
compareData.value.unshift(primaryDragData.value[0]);
|
||||
primaryDragData.value.length = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete Compare Secondary log
|
||||
*/
|
||||
function secondaryDragDelete() {
|
||||
compareData.value.unshift(secondaryDragData.value[0]);
|
||||
secondaryDragData.value.length = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Enter the Compare page
|
||||
*/
|
||||
function compareSubmit() {
|
||||
const primaryType = primaryDragData.value[0].type;
|
||||
const secondaryType = secondaryDragData.value[0].type;
|
||||
const primaryId = primaryDragData.value[0].id;
|
||||
const secondaryId = secondaryDragData.value[0].id;
|
||||
const params = { primaryType: primaryType, primaryId: primaryId, secondaryType: secondaryType, secondaryId: secondaryId };
|
||||
|
||||
mapCompareStore.setCompareRouteParam(primaryType, primaryId, secondaryType, secondaryId);
|
||||
router.push({name: 'CompareDashboard', params: params});
|
||||
}
|
||||
|
||||
/**
|
||||
* Grid 模板時的篩選器
|
||||
* @param {event} event choose columnType item
|
||||
*/
|
||||
function getGridSortData(event) {
|
||||
const code = event.value.code;
|
||||
|
||||
// 文字排序: 將 name 字段轉換為小寫進行比較，使用 localeCompare() 方法進行字母順序比較
|
||||
switch (code) {
|
||||
case 'nameAscending':
|
||||
compareData.value = compareData.value.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
|
||||
break;
|
||||
case 'nameDescending':
|
||||
compareData.value = compareData.value.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())).reverse();
|
||||
break;
|
||||
case 'parentLogAscending':
|
||||
compareData.value = compareData.value.sort((a, b) => a.parentLog.toLowerCase().localeCompare(b.parentLog.toLowerCase()));
|
||||
break;
|
||||
case 'parentLogDescending':
|
||||
compareData.value = compareData.value.sort((a, b) => a.parentLog.toLowerCase().localeCompare(b.parentLog.toLowerCase())).reverse();
|
||||
break;
|
||||
case 'fileAscending':
|
||||
compareData.value = compareData.value.sort((a, b) => a.fileType.toLowerCase().localeCompare(b.fileType.toLowerCase()));
|
||||
break;
|
||||
case 'fileDescending':
|
||||
compareData.value = compareData.value.sort((a, b) => a.fileType.toLowerCase().localeCompare(b.fileType.toLowerCase())).reverse();
|
||||
break;
|
||||
case 'updatedAscending':
|
||||
compareData.value = compareData.value.sort((a, b) => new Date(a.updated_base) - new Date(b.updated_base));
|
||||
break;
|
||||
case 'updatedDescending':
|
||||
compareData.value = compareData.value.sort((a, b) => new Date(a.updated_base) - new Date(b.updated_base)).reverse();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Mounted
|
||||
onMounted(() => {
|
||||
isLoading.value = true;
|
||||
store.fetchAllFiles();
|
||||
window.addEventListener('click', (e) => {
|
||||
const clickedLi = e.target.closest('li');
|
||||
if(!clickedLi || !clickedLi.id.startsWith('li')) isActive.value = null;
|
||||
});
|
||||
// 為 DataTable tbody 加入 .scrollbar 選擇器
|
||||
const tbodyElement = document.querySelector('.p-datatable-tbody');
|
||||
tbodyElement.classList.add('scrollbar');
|
||||
isLoading.value = false;
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
@reference "../../assets/tailwind.css";
|
||||
|
||||
Reference in New Issue
Block a user