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

Get allFiles and switch files tag, done.

Browse Source
This commit is contained in:
chiayin
2023-02-13 17:10:57 +08:00
parent 662aba047c
commit 03321921c8
4 changed files with 55 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,18 +28,18 @@
</section>
<section>
<div class="py-4 mb-4 border-b flex justify-between items-center border-neutral-500">
<h2 class="font-bold">All Files</h2>
<h2 class="font-bold" @click="filesTag = 'design'">All Files</h2>
<ul class="flex items-center">
<li class="mr-4">
<IconList></IconList>
<li class="mr-4 cursor-pointer" @click="switchListOrGrid = false">
<IconList class="hover:fill-primary hover:bg-neutral-50 duration-300"></IconList>
</li>
<li>
<IconGrid></IconGrid>
<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 style="margin-left: -16px; margin-right: -16px;" class="overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)] scrollbar">
<div style="margin-left: -16px; margin-right: -16px;" class="overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)] scrollbar" v-if="!switchListOrGrid">
<table class="w-full border-separate border-spacing-x-4 text-sm table-fixed">
<thead class="sticky top-0 bg-neutral-10">
<tr>
@@ -88,26 +88,27 @@
</table>
</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">
<li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300 ">
<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:text-primary hover:bg-primary/50 hover:border-primary duration-300"
v-for="(file, index) in allFiles" :key="file.id">
<a href="" class="h-full flex flex-col justify-between">
<div>
<figure class="mb-2">
<IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
</figure>
<h3 class="text-sm font-medium mb-2">
1 File type
{{ file.name }}
</h3>
<p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
Daily operation recggggggggggggly operation records of Daily operation records of Daily operation records of Daily operation records of
{{ file.parentLog }}
</p>
</div>
<p class="text-sm text-neutral-500">
Edited just now
{{ file.updated_at }}
</p>
</a>
</li>
</ul> -->
</ul>
</section>
</div>
</template>
@@ -136,6 +137,14 @@
fileType: '',
}
],
switchListOrGrid: false,
switchFilesTagData: {
all: ['Log', 'Filter', 'Rule', 'Design'],
discover: ['Log', 'Filter', 'Rule'],
compare: ['Filter'],
design: ['Log', 'Design'],
},
filesTag: 'all',
}
},
setup() {},
@@ -149,19 +158,27 @@
IconGrid
},
computed: {
/**
* Get allFiles and switch files tag
*/
allFiles: function() {
return [
let result = [
...this.allEventLog,
...this.allFilter.map(itemFilter => {
return { ...itemFilter, parentLog: itemFilter.log.name }
})
]
},
];
let data = this.switchFilesTagData;
let filesTag = this.filesTag;
result = result.filter(file => data[filesTag].includes(file.fileType));
return result;
},
// 時間排序，如果沒有 accessed_at 就不加入 data
recentlyUsedFiles: function() {
let recentlyUsedFiles = this.allFiles.filter(item => item.accessed_at !== null);
return recentlyUsedFiles.sort((n, o) => o - n);
}
},
},
methods: {
/**