feat: Compare Grid Sort done.
This commit is contained in:
chiayin
@@ -81,9 +81,11 @@ export default {
|
||||
navViewData:
|
||||
{
|
||||
// FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN'],
|
||||
FILES: ['ALL', 'DISCOVER'],
|
||||
FILES: ['ALL', 'DISCOVER', 'COMPARE'],
|
||||
// DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
|
||||
DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE']
|
||||
DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE'],
|
||||
// COMPARE: ['PROCESS MAP', 'DASHBOARD']
|
||||
COMPARE: ['DASHBOARD']
|
||||
},
|
||||
navViewName: 'FILES',
|
||||
isActive: null,
|
||||
@@ -104,8 +106,8 @@ export default {
|
||||
},
|
||||
showIcon: function() {
|
||||
let result = true;
|
||||
if(this.navViewName === 'FILES') result = false;
|
||||
else if(this.navViewName === 'UPLOAD') result = false;
|
||||
|
||||
result = ['FILES', 'UPLOAD'].includes(this.navViewName) ? false : true;
|
||||
return result;
|
||||
}
|
||||
},
|
||||
@@ -154,14 +156,9 @@ export default {
|
||||
this.$router.push({name: 'Performance', params: { type: type, fileId: fileId }});
|
||||
break;
|
||||
}
|
||||
// if(event.target.innerText === 'MAP') {
|
||||
// if(type === 'rule') this.$router.push({name: 'CheckMap'});
|
||||
// else this.$router.push({name: 'Map', params: { type: type, fileId: fileId }});
|
||||
// } else if(event.target.innerText === 'CONFORMANCE') {
|
||||
// if(type === 'rule') this.$router.push({name: 'CheckConformance'});
|
||||
// else this.$router.push({name: 'Conformance', params: { type: type, fileId: fileId }});
|
||||
// }
|
||||
break;
|
||||
case 'COMPARE':
|
||||
break
|
||||
}
|
||||
},
|
||||
getNavViewName() {
|
||||
|
||||
@@ -7,7 +7,7 @@ export const compareDashboardData = {
|
||||
"data": [
|
||||
{
|
||||
"x": "2022-01-21T03:22:13.850000",
|
||||
"y": 980217.631579
|
||||
"y": 0
|
||||
},
|
||||
{
|
||||
"x": "2022-02-26T08:13:51.550000",
|
||||
@@ -109,11 +109,11 @@ export const compareDashboardData = {
|
||||
"data": [
|
||||
{
|
||||
"x": "2022-01-21T03:22:13.850000",
|
||||
"y": 0.952810727062303
|
||||
"y": 0
|
||||
},
|
||||
{
|
||||
"x": "2022-02-26T08:13:51.550000",
|
||||
"y": 0.9516609459556336
|
||||
"y": 0
|
||||
},
|
||||
{
|
||||
"x": "2022-04-03T13:05:29.250000",
|
||||
@@ -158,7 +158,7 @@ export const compareDashboardData = {
|
||||
},
|
||||
{
|
||||
"x": "2022-02-26T08:13:51.550000",
|
||||
"y": 0.9502456491200848
|
||||
"y": 0
|
||||
},
|
||||
{
|
||||
"x": "2022-04-03T13:05:29.250000",
|
||||
@@ -211,7 +211,7 @@ export const compareDashboardData = {
|
||||
"data": [
|
||||
{
|
||||
"x": "2022-01-21T03:22:13.850000",
|
||||
"y": 937071.842105
|
||||
"y": 0
|
||||
},
|
||||
{
|
||||
"x": "2022-02-26T08:13:51.550000",
|
||||
@@ -1586,6 +1586,10 @@ export const compareDashboardData = {
|
||||
"x": "i",
|
||||
"y": 131
|
||||
},
|
||||
{
|
||||
"x": "j",
|
||||
"y": 0
|
||||
},
|
||||
{
|
||||
"x": "k",
|
||||
"y": 39
|
||||
|
||||
@@ -1,87 +1,203 @@
|
||||
<template>
|
||||
<div class="container pt-4 2xl:max-w-none">
|
||||
<!-- Recently Used -->
|
||||
<section class="mb-4">
|
||||
<h2 class="h-12 font-bold py-4 mb-4 border-b border-neutral-500">Recently Used</h2>
|
||||
<!-- card group 最多六個-->
|
||||
<ul class="flex justify-start items-center gap-4 overflow-x-auto w-full h-[192px] scrollbar pb-4">
|
||||
<!-- card item v-for -->
|
||||
<li class="w-[216px] min-w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)" >
|
||||
<div>
|
||||
<span class="material-symbols-outlined mb-2 text-[32px] block">
|
||||
{{ file.icon }}
|
||||
</span>
|
||||
<h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
|
||||
{{ file.name }}
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
|
||||
{{ file.parentLog }}
|
||||
</p>
|
||||
<!-- Recently Used & Performance Comparison -->
|
||||
<div>
|
||||
<!-- Performance Comparison -->
|
||||
<section v-if="filesTag === 'COMPARE'">
|
||||
<h2 class="h-12 font-bold py-4 mb-4 border-b border-neutral-500">Performance Comparison</h2>
|
||||
<div class="flex justify-start items-center gap-4 w-full h-[184px] scrollbar pb-4">
|
||||
<!-- primaryDrag -->
|
||||
<div class="relative w-[216px] min-w-[216px] h-full">
|
||||
<div v-if="primaryDragData.length === 0" class="w-full h-full p-4 border rounded border-neutral-300 duration-300 text-neutral-500 absolute">
|
||||
<div class="h-full flex flex-col justify-center items-center gap-4">
|
||||
<p class="text-4xl font-black">1</p>
|
||||
<p class="text-sm font-medium">Drag and drop a file here</p>
|
||||
</div>
|
||||
</div>
|
||||
<draggable
|
||||
v-model="primaryDragData" :group="{name: 'files', pull: false, put: primaryDragData.length < 1 }" item-key="id" class="w-full h-full">
|
||||
<template #item="{element}">
|
||||
<div class="w-full h-full p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" :title="element.name" >
|
||||
<div class="h-full">
|
||||
<span class="material-symbols-outlined mb-2 text-[32px] block">
|
||||
{{element.icon}}
|
||||
</span>
|
||||
<h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
|
||||
{{element.name}}
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
|
||||
{{element.parentLog}}
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-500">
|
||||
{{element.updated_at}}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
<!-- delete icon -->
|
||||
<span v-show="primaryDragData.length > 0" class="material-symbols-outlined material-fill text-neutral-500 bg-neutral-10 block rounded-full absolute -top-[5%] -right-[5%] z-50 cursor-pointer hover:text-danger" @click="primaryDragDelete">do_not_disturb_on</span>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-500">
|
||||
{{ file.accessed_at }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<div class="h-12 mb-4 border-b flex justify-between items-center border-neutral-500">
|
||||
<h2 class="font-bold">All Files</h2>
|
||||
<ul class="flex items-center gap-x-4">
|
||||
<li v-show="isActive !== null" class="animate-fadein">
|
||||
<ul class="flex justify-center items-center gap-x-4 px-4 py-1 rounded-full bg-neutral-200 text-neutral-700">
|
||||
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="rename">edit_square</span></li>
|
||||
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="download">download</span></li>
|
||||
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="deleteFile">delete</span></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="cursor-pointer" @click="switchListOrGrid = false">
|
||||
<IconList class="hover:fill-primary hover:bg-neutral-50 duration-300"></IconList>
|
||||
</li>
|
||||
<li class="cursor-pointer" @click="switchListOrGrid = true">
|
||||
<IconGrid class="hover:fill-primary hover:bg-neutral-50 duration-300"></IconGrid>
|
||||
<!-- secondaryData -->
|
||||
<div class="relative w-[216px] min-w-[216px] h-full">
|
||||
<div v-show="secondaryDragData.length === 0" class="w-full h-full p-4 border rounded border-neutral-300 duration-300 text-neutral-500 absolute">
|
||||
<div class="h-full flex flex-col justify-center items-center gap-4">
|
||||
<p class="text-4xl font-black">2</p>
|
||||
<p class="text-sm font-medium">Drag and drop a file here</p>
|
||||
</div>
|
||||
</div>
|
||||
<draggable
|
||||
v-model="secondaryDragData" :group="{name: 'files', pull: false, put: secondaryDragData.length < 1 }" item-key="id" class="w-full h-full">
|
||||
<template #item="{element}">
|
||||
<div class="w-full h-full p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" :title="element.name" >
|
||||
<div>
|
||||
<span class="material-symbols-outlined mb-2 text-[32px] block">
|
||||
{{element.icon}}
|
||||
</span>
|
||||
<h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
|
||||
{{element.name}}
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
|
||||
{{element.parentLog}}
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-500">
|
||||
{{element.updated_at}}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
<!-- delete icon -->
|
||||
<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">Compare</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Recently Used -->
|
||||
<section v-else>
|
||||
<h2 class="h-12 font-bold py-4 mb-4 border-b border-neutral-500">Recently Used</h2>
|
||||
<!-- card group 最多六個-->
|
||||
<ul class="flex justify-start items-center gap-4 overflow-x-auto w-full h-[184px] scrollbar pb-4">
|
||||
<!-- card item v-for -->
|
||||
<li class="w-[216px] min-w-[216px] h-full p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)" >
|
||||
<div>
|
||||
<span class="material-symbols-outlined mb-2 text-[32px] block">
|
||||
{{ file.icon }}
|
||||
</span>
|
||||
<h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
|
||||
{{ file.name }}
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
|
||||
{{ file.parentLog }}
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-500">
|
||||
{{ file.accessed_at }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- All Files type of List -->
|
||||
<div class="overflow-y-scroll overflow-x-hidden scrollbar -mx-2 max-h-[calc(100vh_-_480px)]" v-if="!switchListOrGrid">
|
||||
<DataTable :value="allFiles" dataKey="id" tableClass="w-full mx-2 text-sm cursor-pointer relative" :rowClass="setRowClass" breakpoint="0" @row-dblclick="enterDiscover($event.data)" contextmenu v-model:contextMenuSelection="selectedTableFile" @row-contextmenu="onRightClickTable">
|
||||
<Column field="name" header="Name" bodyClass="font-medium fileName" sortable></Column>
|
||||
<Column field="parentLog" header="Dependency" bodyClass="text-neutral-500" sortable></Column>
|
||||
<Column field="fileType" header="File Type" bodyClass="text-neutral-500 fileType" sortable></Column>
|
||||
<Column field="owner.name" header="Owner" bodyClass="text-neutral-500" sortable></Column>
|
||||
<Column field="updated_at" header="Last Update" bodyClass="text-neutral-500" sortable></Column>
|
||||
<Column bodyClass="text-neutral-500">
|
||||
<template #body="slotProps">
|
||||
<ul class="opacity-0 group-hover:opacity-100 flex justify-end items-center gap-x-2 text-neutral-700">
|
||||
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="rename(slotProps.data.type, slotProps.data.id, 'list-hover')">edit_square</span></li>
|
||||
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="download(slotProps.data.type, slotProps.data.id, 'list-hover', slotProps.data.name)">download</span></li>
|
||||
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="deleteFile(slotProps.data.type, slotProps.data.id, slotProps.data.name, 'list-hover')">delete</span></li>
|
||||
</section>
|
||||
</div>
|
||||
<!-- All Files -->
|
||||
<div>
|
||||
<!-- Compare -->
|
||||
<section v-if="filesTag === 'COMPARE'">
|
||||
<!-- All Files header -->
|
||||
<div class="h-12 mb-4 border-b flex justify-between items-center border-neutral-500">
|
||||
<h2 class="font-bold">All Files</h2>
|
||||
<ul class="flex items-center gap-x-4">
|
||||
<li>
|
||||
<Dropdown v-model="gridSort" :options="columnType" optionLabel="name" placeholder="Grid Sort" class="w-full !border-neutral-500" inputClass="!text-sm" @change="getGridSortData($event)"></Dropdown>
|
||||
</li>
|
||||
<li>
|
||||
<IconGrid class="hover:bg-neutral-50 duration-300"></IconGrid>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- All Files type of grid -->
|
||||
<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_-_480px)] scrollbar">
|
||||
<template #item="{ element }">
|
||||
<li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" :title="element.name" >
|
||||
<div>
|
||||
<span class="material-symbols-outlined mb-2 text-[32px] block">
|
||||
{{ element.icon }}
|
||||
</span>
|
||||
<h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
|
||||
{{ element.name }}
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
|
||||
{{ element.parentLog }}
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-500">
|
||||
{{ element.updated_at }}
|
||||
</p>
|
||||
</li>
|
||||
</template>
|
||||
</draggable>
|
||||
</section>
|
||||
<!-- All & Discover -->
|
||||
<section v-else>
|
||||
<!-- All Files header -->
|
||||
<div class="h-12 mb-4 border-b flex justify-between items-center border-neutral-500">
|
||||
<h2 class="font-bold">All Files</h2>
|
||||
<ul class="flex items-center gap-x-4">
|
||||
<li v-show="isActive !== null" class="animate-fadein">
|
||||
<ul class="flex justify-center items-center gap-x-4 px-4 py-1 rounded-full bg-neutral-200 text-neutral-700">
|
||||
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="rename">edit_square</span></li>
|
||||
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="download">download</span></li>
|
||||
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="deleteFile">delete</span></li>
|
||||
</ul>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
<!-- All Files type of grid -->
|
||||
<ul class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)] scrollbar" v-else>
|
||||
<li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in allFiles" :key="file.id" :class="{ 'bg-primary/10 border-primary': isActive === index}" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)" @click="onGridCardClick(file, index)" :id="'li' + index">
|
||||
<div>
|
||||
<span class="material-symbols-outlined mb-2 text-[32px] block">
|
||||
{{ file.icon }}
|
||||
</span>
|
||||
<h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
|
||||
{{ file.name }}
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
|
||||
{{ file.parentLog }}
|
||||
</li>
|
||||
<li class="cursor-pointer" @click="switchListOrGrid = false">
|
||||
<IconList class="hover:fill-primary hover:bg-neutral-50 duration-300"></IconList>
|
||||
</li>
|
||||
<li class="cursor-pointer" @click="switchListOrGrid = true">
|
||||
<IconGrid class="hover:fill-primary hover:bg-neutral-50 duration-300"></IconGrid>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- All Files type of List -->
|
||||
<div class="overflow-y-scroll overflow-x-hidden scrollbar -mx-2 max-h-[calc(100vh_-_480px)]" v-if="!switchListOrGrid">
|
||||
<DataTable :value="allFiles" dataKey="id" tableClass="w-full mx-2 text-sm cursor-pointer relative" :rowClass="setRowClass" breakpoint="0" @row-dblclick="enterDiscover($event.data)" contextmenu v-model:contextMenuSelection="selectedTableFile" @row-contextmenu="onRightClickTable">
|
||||
<Column field="name" header="Name" bodyClass="font-medium fileName" sortable></Column>
|
||||
<Column field="parentLog" header="Dependency" bodyClass="text-neutral-500" sortable></Column>
|
||||
<Column field="fileType" header="File Type" bodyClass="text-neutral-500 fileType" sortable></Column>
|
||||
<Column field="owner.name" header="Owner" bodyClass="text-neutral-500" sortable></Column>
|
||||
<Column field="updated_at" header="Last Update" bodyClass="text-neutral-500" sortable></Column>
|
||||
<Column bodyClass="text-neutral-500">
|
||||
<template #body="slotProps">
|
||||
<ul class="opacity-0 group-hover:opacity-100 flex justify-end items-center gap-x-2 text-neutral-700">
|
||||
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="rename(slotProps.data.type, slotProps.data.id, 'list-hover')">edit_square</span></li>
|
||||
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="download(slotProps.data.type, slotProps.data.id, 'list-hover', slotProps.data.name)">download</span></li>
|
||||
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="deleteFile(slotProps.data.type, slotProps.data.id, slotProps.data.name, 'list-hover')">delete</span></li>
|
||||
</ul>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
<!-- All Files type of grid -->
|
||||
<ul class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)] scrollbar" v-else>
|
||||
<li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" v-for="(file, index) in allFiles" :key="file.id" :class="{ 'bg-primary/10 border-primary': isActive === index}" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)" @click="onGridCardClick(file, index)" :id="'li' + index">
|
||||
<div>
|
||||
<span class="material-symbols-outlined mb-2 text-[32px] block">
|
||||
{{ file.icon }}
|
||||
</span>
|
||||
<h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
|
||||
{{ file.name }}
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
|
||||
{{ file.parentLog }}
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-500">
|
||||
{{ file.updated_at }}
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-500">
|
||||
{{ file.updated_at }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<!-- ContextMenu -->
|
||||
<ContextMenu ref="fileRightMenu" :model="items" @hide="selectedFile = null" class="cursor-pointer">
|
||||
<template #item="{ item }">
|
||||
@@ -141,6 +257,22 @@
|
||||
command: this.deleteFile,
|
||||
},
|
||||
],
|
||||
compareData: null,
|
||||
primaryDragData: [],
|
||||
secondaryDragData: [],
|
||||
gridSort: null,
|
||||
columnType: [
|
||||
{ name: 'name a-z', code: 'nameAscending'},
|
||||
{ name: 'name z-a', code: 'nameDescending'},
|
||||
{ name: 'Dependency a-z', code: 'parentLogAscending'},
|
||||
{ name: 'Dependency z-a', code: 'parentLogDescending'},
|
||||
{ name: 'File Type a-z', code: 'fileAscending'},
|
||||
{ name: 'File Type z-a', code: 'fileDescending'},
|
||||
{ name: 'Owner a-z', code: 'ownerAscending'},
|
||||
{ name: 'Owner z-a', code: 'ownerDescending'},
|
||||
{ name: 'Last Update 遠-近', code: 'updatedAscending'},
|
||||
{ name: 'Last Update 近-遠', code: 'updatedDescending'},
|
||||
],
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
@@ -148,11 +280,11 @@
|
||||
const store = filesStore();
|
||||
const allMapDataStore = AllMapDataStore();
|
||||
const loadingStore = LoadingStore();
|
||||
const { dependentsData } = storeToRefs(store);
|
||||
const { dependentsData, filesTag } = storeToRefs(store);
|
||||
const { createFilterId, baseLogId } = storeToRefs(allMapDataStore);
|
||||
const { isLoading } = storeToRefs(loadingStore);
|
||||
|
||||
return { loginStore, store, dependentsData, allMapDataStore, createFilterId, baseLogId, isLoading }
|
||||
return { loginStore, store, dependentsData, filesTag, allMapDataStore, createFilterId, baseLogId, isLoading }
|
||||
},
|
||||
components: {
|
||||
IconDataFormat,
|
||||
@@ -173,12 +305,6 @@
|
||||
sortFiles.sort((x,y) => new Date(y.updated_base) - new Date(x.updated_base));
|
||||
return sortFiles;
|
||||
}
|
||||
// let data = [ { "type": "log-check", "id": 315460235, "name": "改名 - log-check 2", "parent": { "type": "log", "id": 306508330, "name": "改名 - log 5" }, "owner": { "username": "dsp", "name": "DSP, Inc" }, "updated_at": "2024-01-11 16:35", "accessed_at": "2024-01-12 11:02", "is_deleted": false, "icon": "local_police", "parentLog": "改名 - log 5", "fileType": "Rule", "ownerName": "DSP, Inc", "updated_base": "2024-01-11T16:35:55.922892+08:00", "accessed_base": "2024-01-12T11:02:46.979212+08:00" }, { "type": "filter-check", "id": 428974306, "name": "改名 - filter-check 2", "parent": { "type": "filter", "id": 308980935, "name": "改名 - filter 2" }, "owner": { "username": "dsp", "name": "DSP, Inc" }, "updated_at": "2024-01-11 16:35", "accessed_at": "2024-01-11 12:25", "is_deleted": false, "icon": "local_police", "parentLog": "改名 - filter 2", "fileType": "Rule", "ownerName": "DSP, Inc", "updated_base": "2024-01-11T16:35:40.524919+08:00", "accessed_base": "2024-01-11T12:25:37.345564+08:00" }, ]
|
||||
// if(data.length !== 0){
|
||||
// let sortFiles = Array.from(data);
|
||||
// sortFiles.sort((x,y) => new Date(y.updated_base) - new Date(x.updated_base));
|
||||
// return sortFiles;
|
||||
// }
|
||||
},
|
||||
/**
|
||||
* 時間排序，如果沒有 accessed_at 就不加入 data
|
||||
@@ -189,6 +315,28 @@
|
||||
recentlyUsedFiles.sort((x, y) => new Date(y.accessed_base) - new Date(x.accessed_base));
|
||||
return recentlyUsedFiles;
|
||||
},
|
||||
/**
|
||||
* Compare Submit button disabled
|
||||
*/
|
||||
isCompareDisabledButton: function() {
|
||||
let result = this.primaryDragData.length === 0 || this.secondaryDragData.length === 0 ? true : false;
|
||||
return result;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filesTag: {
|
||||
handler(newValue) {
|
||||
if(newValue !== 'COMPARE'){
|
||||
this.primaryDragData = [];
|
||||
this.secondaryDragData = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
allFiles: {
|
||||
handler(newValue) {
|
||||
this.compareData = JSON.parse(JSON.stringify(newValue));
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
@@ -197,6 +345,12 @@
|
||||
setRowClass() {
|
||||
return ['group']
|
||||
},
|
||||
/**
|
||||
* Set Compare Row Style
|
||||
*/
|
||||
setCompareRowClass() {
|
||||
return ['leading-6']
|
||||
},
|
||||
/**
|
||||
* 選擇該 files 進入 Discover/Compare/Design 頁面
|
||||
* @param {object} file
|
||||
@@ -333,7 +487,62 @@
|
||||
this.selecteName = name;
|
||||
}
|
||||
this.store.downloadFileCSV(this.selectedType, this.selectedId, this.selecteName);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 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;
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @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 'ownerAscending':
|
||||
this.compareData = this.compareData.sort((a, b) => a.ownerName.toLowerCase().localeCompare(b.ownerName.toLowerCase()));
|
||||
break;
|
||||
case 'ownerDescending':
|
||||
this.compareData = this.compareData.sort((a, b) => a.ownerName.toLowerCase().localeCompare(b.ownerName.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;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.isLoading = true;
|
||||
|
||||
Reference in New Issue
Block a user