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

88
src/assets/components.css Normal file
View File

@@ -0,0 +1,88 @@
.loader {
width: 64px;
height: 64px;
position: relative;
background-image:
linear-gradient(#FFF 16px, transparent 0) ,
linear-gradient(#FF3D00 16px, transparent 0) ,
linear-gradient(#FF3D00 16px, transparent 0) ,
linear-gradient(#FFF 16px, transparent 0);
background-repeat: no-repeat;
background-size: 16px 16px;
background-position: left top , left bottom , right top , right bottom;
animation: rotate 1s linear infinite;
}
@keyframes rotate {
0% {
width: 64px;
height: 64px;
transform: rotate(0deg)
}
50% {
width: 30px;
height: 30px;
transform: rotate(180deg)
}
100% {
width: 64px;
height: 64px;
transform: rotate(360deg)
}
}
/* toggle */
/* <div class="toggle">
<input type="checkbox"/>
<label></label>
</div> */
.toggle {
position: relative;
}
.toggle input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.toggle label {
position: relative;
display: flex;
align-items: center;
}
.toggle label:before {
content: '';
border: 5px solid #bbb;
height: 35px;
width: 70px;
position: relative;
display: inline-block;
border-radius: 46px;
transition: 0.2s ease-in;
}
.toggle label:after {
content: '';
position: absolute;
background: #555;
width: 28px;
height: 28px;
left: 8px;
top: 8px;
border-radius: 50%;
z-index: 2;
box-shadow: 0 0 5px #0002;
transition: 0.2s ease-in;
}
.toggle input[type="checkbox"]:hover + label:after {
box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
}
.toggle input[type="checkbox"]:checked + label:before {
border-color: #77C2BB;
}
.toggle input[type="checkbox"]:checked + label:after {
background: #009688;
left: 44px;
}

31
src/assets/loader.css
View File

@@ -1,31 +0,0 @@
.loader {
width: 64px;
height: 64px;
position: relative;
background-image:
linear-gradient(#FFF 16px, transparent 0) ,
linear-gradient(#FF3D00 16px, transparent 0) ,
linear-gradient(#FF3D00 16px, transparent 0) ,
linear-gradient(#FFF 16px, transparent 0);
background-repeat: no-repeat;
background-size: 16px 16px;
background-position: left top , left bottom , right top , right bottom;
animation: rotate 1s linear infinite;
}
@keyframes rotate {
0% {
width: 64px;
height: 64px;
transform: rotate(0deg)
}
50% {
width: 30px;
height: 30px;
transform: rotate(180deg)
}
100% {
width: 64px;
height: 64px;
transform: rotate(360deg)
}
}

2
src/assets/main.css
View File

@@ -1,2 +1,2 @@
@import './tailwind.css';
@import './loader.css';
@import './components.css';

2
src/components/icons/IconVector.vue
View File

@@ -1,5 +1,5 @@
<template>
<svg width="16" height="16" viewBox="0 0 16 16" fill="" xmlns="http://www.w3.org/2000/svg">black
<svg width="16" height="16" viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg">
<path d="M7.9999 16C7.71657 16 7.47924 15.904 7.2879 15.712C7.0959 15.5207 6.9999 15.2833 6.9999 15V3.82499L2.1249 8.69999C1.9249 8.89999 1.68724 8.99999 1.4119 8.99999C1.13724 8.99999 0.899902 8.89999 0.699902 8.69999C0.499902 8.49999 0.399902 8.26665 0.399902 7.99999C0.399902 7.73332 0.499902 7.49999 0.699902 7.29999L7.2999 0.699987C7.3999 0.599987 7.50824 0.528988 7.6249 0.486988C7.74157 0.445654 7.86657 0.424988 7.9999 0.424988C8.13324 0.424988 8.26257 0.445654 8.3879 0.486988C8.51257 0.528988 8.61657 0.599987 8.6999 0.699987L15.2999 7.29999C15.4999 7.49999 15.5999 7.73332 15.5999 7.99999C15.5999 8.26665 15.4999 8.49999 15.2999 8.69999C15.0999 8.89999 14.8622 8.99999 14.5869 8.99999C14.3122 8.99999 14.0749 8.89999 13.8749 8.69999L8.9999 3.82499V15C8.9999 15.2833 8.90424 15.5207 8.7129 15.712C8.5209 15.904 8.28324 16 7.9999 16Z"/>
</svg>
</template>

2
src/main.js
View File

@@ -10,7 +10,6 @@ import mitt from 'mitt';
import ToastPlugin from 'vue-toast-notification';
import "./assets/main.css";
//import 'vue-toast-notification/dist/theme-default.css';
import 'vue-toast-notification/dist/theme-sugar.css';
const emitter = mitt();
@@ -24,6 +23,7 @@ pinia.use(({ store }) => {
// can use `this.$moment` in Vue.js
app.config.globalProperties.$moment = moment;
app.config.globalProperties.emitter = emitter;
app.use(pinia);
app.use(router);
app.use(VueAxios, axios);

4
src/stores/files.js
View File

@@ -80,7 +80,7 @@ export default defineStore('filesStore', {
loading.isLoading = false;
return delay(500);
}).then(() => {
$toast.default('Import Filter files error.');
$toast.default('Failed to load the logs.');
})
};
},
@@ -109,7 +109,7 @@ export default defineStore('filesStore', {
loading.isLoading = false;
return delay(500);
}).then(() => {
$toast.default('Import Filter files error.');
$toast.default('Failed to load the filters.');
})
};
},

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);
}
}