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

Discover: fetch discover api && set element(nodes, edges) done

Browse Source
This commit is contained in:
chiayin
2023-02-22 16:10:40 +08:00
parent 8228f9791c
commit 78e18663aa
11 changed files with 361 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,23 +6,22 @@
<!-- card group 最多六個-->
<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">
<div>
<figure class="mb-2">
<IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
</figure>
<h3 class="text-sm font-medium mb-2">
{{ 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 }}
<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
flex flex-col justify-between cursor-pointer" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id" @dblclick="enterDiscover(file)">
<div>
<figure class="mb-2">
<IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
</figure>
<h3 class="text-sm font-medium mb-2">
{{ file.name }}
</h3>
<p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
{{ file.parentLog }}
</p>
</a>
</div>
<p class="text-sm text-neutral-500">
{{ file.accessed_at }}
</p>
</li>
</ul>
</section>
@@ -52,7 +51,7 @@
</tr>
</thead>
<tbody>
<tr v-for="(file, index) in allFiles" :key="file.id">
<tr v-for="(file, index) in allFiles" :key="file.id" @dblclick="enterDiscover(file)">
<td>{{ file.name }}</td>
<td class="text-neutral-500">{{ file.parentLog }}</td>
<td class="text-neutral-500">{{ file.fileType }}</td>
@@ -64,24 +63,22 @@
</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: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">
{{ 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 }}
<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 flex flex-col justify-between cursor-pointer"
v-for="(file, index) in allFiles" :key="file.id" @dblclick="enterDiscover(file)">
<div>
<figure class="mb-2">
<IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
</figure>
<h3 class="text-sm font-medium mb-2">
{{ file.name }}
</h3>
<p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
{{ file.parentLog }}
</p>
</a>
</div>
<p class="text-sm text-neutral-500">
{{ file.updated_at }}
</p>
</li>
</ul>
</section>
@@ -181,12 +178,20 @@
},
methods: {
/**
* switch sort
* sort's switch
* @param {string} value
*/
switchSort(value) {
this.sortReverseOrder = (this.sortKey === value)? !this.sortReverseOrder: false;
this.sortKey = value;
},
/**
* 選擇該 files 進入 Discover/Compare/Design 頁面
* @param {object} file
*/
enterDiscover(file){
this.$router.push({ name: 'Discover', params: { logId: file.id }});
},
},
mounted() {
this.store.fetchEventLog();