feat: Compare Grid Sort done.
This commit is contained in:
chiayin
@@ -81,9 +81,11 @@ export default {
|
|||||||
navViewData:
|
navViewData:
|
||||||
{
|
{
|
||||||
// FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN'],
|
// FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN'],
|
||||||
FILES: ['ALL', 'DISCOVER'],
|
FILES: ['ALL', 'DISCOVER', 'COMPARE'],
|
||||||
// DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
|
// DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
|
||||||
DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE']
|
DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE'],
|
||||||
|
// COMPARE: ['PROCESS MAP', 'DASHBOARD']
|
||||||
|
COMPARE: ['DASHBOARD']
|
||||||
},
|
},
|
||||||
navViewName: 'FILES',
|
navViewName: 'FILES',
|
||||||
isActive: null,
|
isActive: null,
|
||||||
@@ -104,8 +106,8 @@ export default {
|
|||||||
},
|
},
|
||||||
showIcon: function() {
|
showIcon: function() {
|
||||||
let result = true;
|
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;
|
return result;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -154,14 +156,9 @@ export default {
|
|||||||
this.$router.push({name: 'Performance', params: { type: type, fileId: fileId }});
|
this.$router.push({name: 'Performance', params: { type: type, fileId: fileId }});
|
||||||
break;
|
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;
|
break;
|
||||||
|
case 'COMPARE':
|
||||||
|
break
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getNavViewName() {
|
getNavViewName() {
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ export const compareDashboardData = {
|
|||||||
"data": [
|
"data": [
|
||||||
{
|
{
|
||||||
"x": "2022-01-21T03:22:13.850000",
|
"x": "2022-01-21T03:22:13.850000",
|
||||||
"y": 980217.631579
|
"y": 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": "2022-02-26T08:13:51.550000",
|
"x": "2022-02-26T08:13:51.550000",
|
||||||
@@ -109,11 +109,11 @@ export const compareDashboardData = {
|
|||||||
"data": [
|
"data": [
|
||||||
{
|
{
|
||||||
"x": "2022-01-21T03:22:13.850000",
|
"x": "2022-01-21T03:22:13.850000",
|
||||||
"y": 0.952810727062303
|
"y": 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": "2022-02-26T08:13:51.550000",
|
"x": "2022-02-26T08:13:51.550000",
|
||||||
"y": 0.9516609459556336
|
"y": 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": "2022-04-03T13:05:29.250000",
|
"x": "2022-04-03T13:05:29.250000",
|
||||||
@@ -158,7 +158,7 @@ export const compareDashboardData = {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": "2022-02-26T08:13:51.550000",
|
"x": "2022-02-26T08:13:51.550000",
|
||||||
"y": 0.9502456491200848
|
"y": 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": "2022-04-03T13:05:29.250000",
|
"x": "2022-04-03T13:05:29.250000",
|
||||||
@@ -211,7 +211,7 @@ export const compareDashboardData = {
|
|||||||
"data": [
|
"data": [
|
||||||
{
|
{
|
||||||
"x": "2022-01-21T03:22:13.850000",
|
"x": "2022-01-21T03:22:13.850000",
|
||||||
"y": 937071.842105
|
"y": 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"x": "2022-02-26T08:13:51.550000",
|
"x": "2022-02-26T08:13:51.550000",
|
||||||
@@ -1586,6 +1586,10 @@ export const compareDashboardData = {
|
|||||||
"x": "i",
|
"x": "i",
|
||||||
"y": 131
|
"y": 131
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"x": "j",
|
||||||
|
"y": 0
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"x": "k",
|
"x": "k",
|
||||||
"y": 39
|
"y": 39
|
||||||
|
|||||||
@@ -1,87 +1,203 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container pt-4 2xl:max-w-none">
|
<div class="container pt-4 2xl:max-w-none">
|
||||||
<!-- Recently Used -->
|
<!-- Recently Used & Performance Comparison -->
|
||||||
<section class="mb-4">
|
<div>
|
||||||
<h2 class="h-12 font-bold py-4 mb-4 border-b border-neutral-500">Recently Used</h2>
|
<!-- Performance Comparison -->
|
||||||
<!-- card group 最多六個-->
|
<section v-if="filesTag === 'COMPARE'">
|
||||||
<ul class="flex justify-start items-center gap-4 overflow-x-auto w-full h-[192px] scrollbar pb-4">
|
<h2 class="h-12 font-bold py-4 mb-4 border-b border-neutral-500">Performance Comparison</h2>
|
||||||
<!-- card item v-for -->
|
<div class="flex justify-start items-center gap-4 w-full h-[184px] scrollbar pb-4">
|
||||||
<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)" >
|
<!-- primaryDrag -->
|
||||||
<div>
|
<div class="relative w-[216px] min-w-[216px] h-full">
|
||||||
<span class="material-symbols-outlined mb-2 text-[32px] block">
|
<div v-if="primaryDragData.length === 0" class="w-full h-full p-4 border rounded border-neutral-300 duration-300 text-neutral-500 absolute">
|
||||||
{{ file.icon }}
|
<div class="h-full flex flex-col justify-center items-center gap-4">
|
||||||
</span>
|
<p class="text-4xl font-black">1</p>
|
||||||
<h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
|
<p class="text-sm font-medium">Drag and drop a file here</p>
|
||||||
{{ file.name }}
|
</div>
|
||||||
</h3>
|
</div>
|
||||||
<p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
|
<draggable
|
||||||
{{ file.parentLog }}
|
v-model="primaryDragData" :group="{name: 'files', pull: false, put: primaryDragData.length < 1 }" item-key="id" class="w-full h-full">
|
||||||
</p>
|
<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>
|
</div>
|
||||||
<p class="text-sm text-neutral-500">
|
<!-- secondaryData -->
|
||||||
{{ file.accessed_at }}
|
<div class="relative w-[216px] min-w-[216px] h-full">
|
||||||
</p>
|
<div v-show="secondaryDragData.length === 0" class="w-full h-full p-4 border rounded border-neutral-300 duration-300 text-neutral-500 absolute">
|
||||||
</li>
|
<div class="h-full flex flex-col justify-center items-center gap-4">
|
||||||
</ul>
|
<p class="text-4xl font-black">2</p>
|
||||||
</section>
|
<p class="text-sm font-medium">Drag and drop a file here</p>
|
||||||
<section>
|
</div>
|
||||||
<div class="h-12 mb-4 border-b flex justify-between items-center border-neutral-500">
|
</div>
|
||||||
<h2 class="font-bold">All Files</h2>
|
<draggable
|
||||||
<ul class="flex items-center gap-x-4">
|
v-model="secondaryDragData" :group="{name: 'files', pull: false, put: secondaryDragData.length < 1 }" item-key="id" class="w-full h-full">
|
||||||
<li v-show="isActive !== null" class="animate-fadein">
|
<template #item="{element}">
|
||||||
<ul class="flex justify-center items-center gap-x-4 px-4 py-1 rounded-full bg-neutral-200 text-neutral-700">
|
<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" >
|
||||||
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="rename">edit_square</span></li>
|
<div>
|
||||||
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="download">download</span></li>
|
<span class="material-symbols-outlined mb-2 text-[32px] block">
|
||||||
<li><span class="material-symbols-outlined align-bottom cursor-pointer hover:text-primary" @click="deleteFile">delete</span></li>
|
{{element.icon}}
|
||||||
</ul>
|
</span>
|
||||||
</li>
|
<h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
|
||||||
<li class="cursor-pointer" @click="switchListOrGrid = false">
|
{{element.name}}
|
||||||
<IconList class="hover:fill-primary hover:bg-neutral-50 duration-300"></IconList>
|
</h3>
|
||||||
</li>
|
<p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
|
||||||
<li class="cursor-pointer" @click="switchListOrGrid = true">
|
{{element.parentLog}}
|
||||||
<IconGrid class="hover:fill-primary hover:bg-neutral-50 duration-300"></IconGrid>
|
</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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</section>
|
||||||
<!-- All Files type of List -->
|
</div>
|
||||||
<div class="overflow-y-scroll overflow-x-hidden scrollbar -mx-2 max-h-[calc(100vh_-_480px)]" v-if="!switchListOrGrid">
|
<!-- All Files -->
|
||||||
<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">
|
<div>
|
||||||
<Column field="name" header="Name" bodyClass="font-medium fileName" sortable></Column>
|
<!-- Compare -->
|
||||||
<Column field="parentLog" header="Dependency" bodyClass="text-neutral-500" sortable></Column>
|
<section v-if="filesTag === 'COMPARE'">
|
||||||
<Column field="fileType" header="File Type" bodyClass="text-neutral-500 fileType" sortable></Column>
|
<!-- All Files header -->
|
||||||
<Column field="owner.name" header="Owner" bodyClass="text-neutral-500" sortable></Column>
|
<div class="h-12 mb-4 border-b flex justify-between items-center border-neutral-500">
|
||||||
<Column field="updated_at" header="Last Update" bodyClass="text-neutral-500" sortable></Column>
|
<h2 class="font-bold">All Files</h2>
|
||||||
<Column bodyClass="text-neutral-500">
|
<ul class="flex items-center gap-x-4">
|
||||||
<template #body="slotProps">
|
<li>
|
||||||
<ul class="opacity-0 group-hover:opacity-100 flex justify-end items-center gap-x-2 text-neutral-700">
|
<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><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>
|
||||||
<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>
|
||||||
<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>
|
<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>
|
</ul>
|
||||||
</template>
|
</li>
|
||||||
</Column>
|
<li class="cursor-pointer" @click="switchListOrGrid = false">
|
||||||
</DataTable>
|
<IconList class="hover:fill-primary hover:bg-neutral-50 duration-300"></IconList>
|
||||||
</div>
|
</li>
|
||||||
<!-- All Files type of grid -->
|
<li class="cursor-pointer" @click="switchListOrGrid = true">
|
||||||
<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>
|
<IconGrid class="hover:fill-primary hover:bg-neutral-50 duration-300"></IconGrid>
|
||||||
<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">
|
</li>
|
||||||
<div>
|
</ul>
|
||||||
<span class="material-symbols-outlined mb-2 text-[32px] block">
|
</div>
|
||||||
{{ file.icon }}
|
<!-- All Files type of List -->
|
||||||
</span>
|
<div class="overflow-y-scroll overflow-x-hidden scrollbar -mx-2 max-h-[calc(100vh_-_480px)]" v-if="!switchListOrGrid">
|
||||||
<h3 class="text-sm font-medium mb-2 whitespace-nowrap break-keep overflow-hidden text-ellipsis">
|
<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">
|
||||||
{{ file.name }}
|
<Column field="name" header="Name" bodyClass="font-medium fileName" sortable></Column>
|
||||||
</h3>
|
<Column field="parentLog" header="Dependency" bodyClass="text-neutral-500" sortable></Column>
|
||||||
<p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
|
<Column field="fileType" header="File Type" bodyClass="text-neutral-500 fileType" sortable></Column>
|
||||||
{{ file.parentLog }}
|
<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>
|
</p>
|
||||||
</div>
|
</li>
|
||||||
<p class="text-sm text-neutral-500">
|
</ul>
|
||||||
{{ file.updated_at }}
|
</section>
|
||||||
</p>
|
</div>
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
<!-- ContextMenu -->
|
<!-- ContextMenu -->
|
||||||
<ContextMenu ref="fileRightMenu" :model="items" @hide="selectedFile = null" class="cursor-pointer">
|
<ContextMenu ref="fileRightMenu" :model="items" @hide="selectedFile = null" class="cursor-pointer">
|
||||||
<template #item="{ item }">
|
<template #item="{ item }">
|
||||||
@@ -141,6 +257,22 @@
|
|||||||
command: this.deleteFile,
|
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() {
|
setup() {
|
||||||
@@ -148,11 +280,11 @@
|
|||||||
const store = filesStore();
|
const store = filesStore();
|
||||||
const allMapDataStore = AllMapDataStore();
|
const allMapDataStore = AllMapDataStore();
|
||||||
const loadingStore = LoadingStore();
|
const loadingStore = LoadingStore();
|
||||||
const { dependentsData } = storeToRefs(store);
|
const { dependentsData, filesTag } = storeToRefs(store);
|
||||||
const { createFilterId, baseLogId } = storeToRefs(allMapDataStore);
|
const { createFilterId, baseLogId } = storeToRefs(allMapDataStore);
|
||||||
const { isLoading } = storeToRefs(loadingStore);
|
const { isLoading } = storeToRefs(loadingStore);
|
||||||
|
|
||||||
return { loginStore, store, dependentsData, allMapDataStore, createFilterId, baseLogId, isLoading }
|
return { loginStore, store, dependentsData, filesTag, allMapDataStore, createFilterId, baseLogId, isLoading }
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
IconDataFormat,
|
IconDataFormat,
|
||||||
@@ -173,12 +305,6 @@
|
|||||||
sortFiles.sort((x,y) => new Date(y.updated_base) - new Date(x.updated_base));
|
sortFiles.sort((x,y) => new Date(y.updated_base) - new Date(x.updated_base));
|
||||||
return sortFiles;
|
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
|
* 時間排序，如果沒有 accessed_at 就不加入 data
|
||||||
@@ -189,6 +315,28 @@
|
|||||||
recentlyUsedFiles.sort((x, y) => new Date(y.accessed_base) - new Date(x.accessed_base));
|
recentlyUsedFiles.sort((x, y) => new Date(y.accessed_base) - new Date(x.accessed_base));
|
||||||
return recentlyUsedFiles;
|
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: {
|
methods: {
|
||||||
/**
|
/**
|
||||||
@@ -197,6 +345,12 @@
|
|||||||
setRowClass() {
|
setRowClass() {
|
||||||
return ['group']
|
return ['group']
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
* Set Compare Row Style
|
||||||
|
*/
|
||||||
|
setCompareRowClass() {
|
||||||
|
return ['leading-6']
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* 選擇該 files 進入 Discover/Compare/Design 頁面
|
* 選擇該 files 進入 Discover/Compare/Design 頁面
|
||||||
* @param {object} file
|
* @param {object} file
|
||||||
@@ -333,7 +487,62 @@
|
|||||||
this.selecteName = name;
|
this.selecteName = name;
|
||||||
}
|
}
|
||||||
this.store.downloadFileCSV(this.selectedType, this.selectedId, this.selecteName);
|
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() {
|
mounted() {
|
||||||
this.isLoading = true;
|
this.isLoading = true;
|
||||||
|
|||||||
Reference in New Issue
Block a user