Files: if data length is 0, layout

This commit is contained in:
chiayin
2023-02-17 14:48:34 +08:00
parent 23f9d9ba15
commit 8228f9791c
2 changed files with 19 additions and 8 deletions

View File

@@ -4,7 +4,7 @@
<section class="mb-4">
<h2 class="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 scrollbar whitespace-nowrap pb-4">
<ul class="flex justify-start items-center gap-4 overflow-x-auto w-full h-[192px] scrollbar whitespace-nowrap pb-4">
<!-- card item v-for -->
<li class="min-w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id">
<a href="" class="h-full flex flex-col justify-between">
@@ -149,16 +149,18 @@
/**
* Read allFiles
*/
allFiles: function(value) {
let sortFiles = Array.from(this.store.allFiles);
allFiles: function() {
if(this.store.allFiles.length !== 0){
let sortFiles = Array.from(this.store.allFiles);
let dataSortOrder = sortFiles.sort((x,y) => x.updated_at - y.updated_at);
let dataSort = this.sortReverseOrder === false? dataSortOrder: dataSortOrder.reverse();
let dataSortOrder = sortFiles.sort((x,y) => x.updated_at - y.updated_at);
let dataSort = this.sortReverseOrder === false? dataSortOrder: dataSortOrder.reverse();
let strSortOrder = sortFiles.sort((x, y)=> x[this.sortKey].localeCompare(y[this.sortKey], 'en'));
let strSort = this.sortReverseOrder === false? strSortOrder: strSortOrder.reverse();
let strSortOrder = sortFiles.sort((x, y)=> x[this.sortKey].localeCompare(y[this.sortKey], 'en'));
let strSort = this.sortReverseOrder === false? strSortOrder: strSortOrder.reverse();
return this.sortKey !== 'updated_at'? strSort: dataSort;
return this.sortKey !== 'updated_at'? strSort: dataSort;
}
},
/**
* 時間排序,如果沒有 accessed_at 就不加入 data
@@ -169,6 +171,14 @@
return recentlyUsedFiles.sort((x, y) => y.updated_at - x.updated_at);
},
},
watch:{
allFiles:{
handler:function(val,oldVal){
this.allFiles;
},
deep:true,
}
},
methods: {
/**
* switch sort