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

All Files string sort done

Browse Source
This commit is contained in:
chiayin
2023-02-17 10:48:03 +08:00
parent a20c22dcae
commit bf3086a456
8 changed files with 252 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/views/Files/index.vue
View File

@@ -1,6 +1,4 @@
<template>
<!-- <Loading v-if="store.isLoading" /> -->
<!-- <Loading /> -->
<div class="container pt-4 2xl:max-w-none">
<!-- Recently Used -->
<section class="mb-4">
@@ -45,31 +43,31 @@
<table class="w-full border-separate border-spacing-x-4 text-sm table-fixed">
<thead class="sticky top-0 bg-neutral-10">
<tr>
<th>
<th @click="addSortEvent('name')" class="cursor-pointer">
Name
<span class="ml-2 cursor-pointer" @click="addSortEvent($event)">
<span class="ml-2">
<IconVector class="inline-block fill-neutral-500"></IconVector>
</span>
</th>
<th>
<th @click="addSortEvent('parentLog')" class="cursor-pointer">
Parent log
<span class="ml-2 cursor-pointer">
<IconVector class="inline-block fill-neutral-500"></IconVector>
</span>
</th>
<th>
<th @click="addSortEvent('parentLog')" class="cursor-pointer">
File type
<span class="ml-2 cursor-pointer">
<IconVector class="inline-block fill-neutral-500"></IconVector>
</span>
</th>
<th>
<th @click="addSortEvent('parentLog')" class="cursor-pointer">
Owner
<span class="ml-2 cursor-pointer">
<IconVector class="inline-block fill-neutral-500"></IconVector>
</span>
</th>
<th>
<th @click="addSortEvent('upadte')" class="cursor-pointer">
Last update
<span class="ml-2 cursor-pointer">
<IconVector class="inline-block fill-neutral-500"></IconVector>
@@ -130,6 +128,8 @@
switchListOrGrid: false,
filesTag: 'all',
sortReverseOrder: false,
reverse: false,
sortKey: 'name',
}
},
setup() {
@@ -153,67 +153,35 @@
* Read allFiles
*/
allFiles: function(value) {
// let sortFiles = this.store.allFiles;
// let nameSortOrder = sortFiles.sort((x, y)=> x.name.localeCompare(y.name, 'en'));
// let nameSortReverse = sortFiles.sort((x, y)=> y.name.localeCompare(x.name, 'en'));
let sortFiles = Array.from(this.store.allFiles);
let strSortOrder = sortFiles.sort((x, y)=> x[this.sortKey].localeCompare(y[this.sortKey], 'en'));
let strSort = this.sortReverseOrder === false? strSortOrder: strSortOrder.reverse();
// let dataSort;
// let aaa = this.recentlyUsedFiles;
// // aaa.reverse();
// console.log(aaa)
return strSort;
// if(this.sortReverseOrder === false){
// return nameSortOrder;
// }
// else {
// return nameSortReverse;
// }
return this.store.allFiles;
},
// 時間排序，如果沒有 accessed_at 就不加入 data
recentlyUsedFiles: function() {
let recentlyUsedFiles = this.allFiles;
let recentlyUsedFiles = Array.from(this.store.allFiles);
recentlyUsedFiles.filter(item => item.accessed_at !== null);
return recentlyUsedFiles.sort((x, y) => y.updated_at - x.updated_at);
},
// Sort All Files
// sortFiles: function() {
// let sortFiles = this.allFiles;
// sortFiles.sort(i=>i.name)
// // (x.name > y.name) -0.5;
// // x.name.toLowerCase().charCodeAt(0) - y.name.toLowerCase().charCodeAt(0));
// console.log(sortFiles);
// return sortFiles;
// }
},
methods: {
/**上下按鈕切換 */
// 順序預設為 true，點擊變逆序 false，每改一次都會重新渲染一次
addSortEvent(event) {
if(this.sortReverseOrder === false){
this.sortReverseOrder = true;
}else {
this.sortReverseOrder = false;
}
console.log(this.sortReverseOrder);
addSortEvent(value) {
this.sortReverseOrder = (this.sortKey === value)? !this.sortReverseOrder: false;
this.sortKey = value;
},
/**
* Sort Files item
*/
sortFiles(value) {
let sortFiles = this.store.allFiles;
let nameSort = sortFiles.sort((x, y)=> x.name.localeCompare(y.name, 'en'));
let updateSort = sortFiles.sort((x, y)=> x.updated_at - y.updated_at);
console.log(nameSort);
// if(sortFiles.length === undefined) return;
// if(value === 'string') nameSort;
// else if(value === 'date') updateSort;
// console.log(sortFiles);
// return sortFiles;
}
},
mounted() {
this.store.fetchEventLog();
this.store.fetchFilter();
// this.sortFiles();
// console.log(this.sortReverseOrder);
}
}