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

Files page Recently Used api done

Browse Source
This commit is contained in:
chiayin
2023-02-10 15:28:59 +08:00
parent f34061608b
commit 662aba047c
2 changed files with 47 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,21 +6,21 @@
<!-- card group 最多六個-->
<ul class="flex justify-start items-center gap-4 overflow-x-auto w-full scrollbar whitespace-nowrap pb-4">
<!-- card item v-for -->
<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 ">
<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 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.accessed_at }}
</p>
</a>
</li>
@@ -29,10 +29,14 @@
<section>
<div class="py-4 mb-4 border-b flex justify-between items-center border-neutral-500">
<h2 class="font-bold">All Files</h2>
<figure class="flex items-center">
<IconList class="mr-4"></IconList>
<IconGrid></IconGrid>
</figure>
<ul class="flex items-center">
<li class="mr-4">
<IconList></IconList>
</li>
<li>
<IconGrid></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">
@@ -41,24 +45,34 @@
<tr>
<th>
Name
<IconVector class="inline-block ml-2 fill-neutral-500" ></IconVector>
<span class="ml-2 cursor-pointer">
<IconVector class="inline-block fill-neutral-500"></IconVector>
</span>
</th>
<th>
Parent log
<IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
<span class="ml-2 cursor-pointer">
<IconVector class="inline-block fill-neutral-500"></IconVector>
</span>
</th>
<th>
File type
<IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
<span class="ml-2 cursor-pointer">
<IconVector class="inline-block fill-neutral-500"></IconVector>
</span>
</th>
<!-- 後端暫時沒做 Owner -->
<!-- <th>
Owner
<IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
<span class="ml-2 cursor-pointer">
<IconVector class="inline-block fill-neutral-500"></IconVector>
</span>
</th> -->
<th>
Last update
<IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
<span class="ml-2 cursor-pointer">
<IconVector class="inline-block fill-neutral-500"></IconVector>
</span>
</th>
</tr>
</thead>
@@ -142,6 +156,11 @@
return { ...itemFilter, parentLog: itemFilter.log.name }
})
]
},
// 時間排序，如果沒有 accessed_at 就不加入 data
recentlyUsedFiles: function() {
let recentlyUsedFiles = this.allFiles.filter(item => item.accessed_at !== null);
return recentlyUsedFiles.sort((n, o) => o - n);
}
},
methods: {
@@ -155,7 +174,11 @@
const response = await this.$http.get(api);
this.allFilter = response.data;
this.allFilter.map(o => o.fileType = "Filter");
this.allFilter.map(o => {
o.fileType = "Filter";
o.updated_at = this.$moment(o.updated_at).format('YYYY-MM-DD HH:MM');
o.accessed_at = this.$moment(o.accessed_at).format('YYYY-MM-DD HH:MM');
});
} catch(error) {
} finally {};
},
@@ -172,11 +195,16 @@
this.allEventLog.map(o => {
o.parentLog = "-";
o.fileType = "Log";
o.updated_at = this.$moment(o.updated_at).format('YYYY-MM-DD HH:MM');
o.accessed_at = this.$moment(o.accessed_at).format('YYYY-MM-DD HH:MM');
return this.allEventLog
})
} catch(error) {
};
},
/**
* Sort Files item
*/
},
mounted() {
this.fetchFilter();