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

feat: File rename API done.

Browse Source
This commit is contained in:
chiayin
2024-01-11 12:26:40 +08:00
parent 01d712e487
commit d4f0801ca1
4 changed files with 104 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/main.js
View File

@@ -47,6 +47,7 @@ import Calendar from 'primevue/calendar';
import Tooltip from 'primevue/tooltip';
import Checkbox from 'primevue/checkbox';
import Dialog from 'primevue/dialog';
import ContextMenu from 'primevue/contextmenu';
const emitter = mitt();
const app = createApp(App);
@@ -99,6 +100,7 @@ app.component('Slider', Slider);
app.component('Calendar', Calendar);
app.component('Checkbox', Checkbox);
app.component('Dialog', Dialog);
app.component('ContextMenu', ContextMenu);
app.component('Draggable', draggable); // 拖曳
app.directive('tooltip', Tooltip);

29
src/module/alertModal.js
View File

@@ -287,3 +287,32 @@ export async function uploadloader() {
customClass: customClass,
})
};
/**
* Rename Modal
* @param { function } rename
*/
export async function renameModal(rename, type, id) {
let fileName = '';
const { value, isConfirmed } = await Swal.fire({
title: 'RENAME',
input: 'text',
inputPlaceholder: 'Enter File Name.',
inputValue: fileName,
inputValidator: value => {
if(!value) return 'You need to write something!';
fileName = value;
},
icon: 'info',
iconHtml: '<span class="material-symbols-outlined text-[58px]">edit_square</span>',
iconColor: '#0099FF',
reverseButtons: true,
confirmButtonColor: '#0099FF',
showCancelButton: '#94a3b8',
customClass: customClass,
});
// 改名成功
if(isConfirmed) await rename(type, id, value);
// 清空欄位
fileName = '';
}

31
src/stores/files.js
View File

@@ -168,15 +168,38 @@ export default defineStore('filesStore', {
},
/**
* Rename a Log
* @param { string } type log | filter | log-check | filter-check
* @param { number } id
* @param { string } name
*/
async rename() {
const id = this.uploadLogId;
const api = `/api/logs/${id}/name`;
const data = {"name": this.uploadFileName};
async rename(type, id, fileName) {
// 先判斷有沒有 uploadLogId，有就設定 id 和 type；再判斷檔案型別。
let api;
let data = {"name": fileName};
if(this.uploadId && this.uploadFileName) {
type = 'log';
id = this.uploadLogId;
fileName = this.uploadFileName;
}
switch (type) {
case 'log':
api = `/api/logs/${id}/name`;
break;
case 'filter':
api = `/api/filters/${id}/name`;
break;
case 'log-check':
api = `/api/log-checks/${id}/name`;
break;
case 'filter-check':
api = `/api/filter-checks/${id}/name`;
break;
}
try {
const response = await axios.put(api, data);
this.uploadFileName = null;
await this.fetchAllFiles();
} catch(error) {
apiError(error, 'Failed to rename.');
}

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

@@ -6,8 +6,8 @@
<!-- card group 最多六個-->
<ul class="flex justify-start items-center gap-4 overflow-x-auto w-full h-[192px] scrollbar pb-4">
<!-- card item v-for -->
<li class="w-[216px] min-w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 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)" :title="file.name">
<div class="">
<li class="w-[216px] min-w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 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)" :title="file.name" @contextmenu="onRightClick($event, file)">
<div>
<span class="material-symbols-outlined mb-2 text-[32px] block">
{{ file.icon }}
</span>
@@ -49,7 +49,7 @@
<!-- 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:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer"
v-for="(file, index) in allFiles" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name">
v-for="(file, index) in allFiles" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)">
<div>
<span class="material-symbols-outlined mb-2 text-[32px] block">
{{ file.icon }}
@@ -67,6 +67,16 @@
</li>
</ul>
</section>
<!-- ContextMenu -->
<ContextMenu ref="menu" :model="items" @hide="selectedFile = null">
<template #item="{ item }">
<a class="flex align-items-center px-4 py-2 duration-300 hover:bg-primary/20">
<span class="material-symbols-outlined">{{ item.icon }}</span>
<span class="ml-2 text-sm inline-flex items-center">{{ item.label }}</span>
<span v-if="item.shortcut" class="border border-round p-1">{{ item.shortcut }}</span>
</a>
</template>
</ContextMenu>
</div>
</template>
@@ -82,11 +92,34 @@
import IconVector from '@/components/icons/IconVector.vue';
import IconList from '@/components/icons/IconList.vue';
import IconGrid from '@/components/icons/IconGrid.vue';
import { renameModal } from '@/module/alertModal.js';
export default {
data() {
return {
switchListOrGrid: false,
selectedFile: null,
selectedType: null,
selectedId: null,
items: [
{
label: 'Rename',
icon: 'edit_square',
command: this.rename,
},
{
label: 'Download',
icon: 'download',
},
{
separator: true // 分隔符號
},
{
label: 'Delete',
icon: 'delete',
},
],
}
},
setup() {
@@ -105,7 +138,7 @@
IconFlowChart,
IconVector,
IconList,
IconGrid,
IconGrid
},
computed: {
/**
@@ -129,6 +162,9 @@
},
},
methods: {
rename() {
renameModal(this.store.rename, this.selectedType, this.selectedId);
},
/**
* 選擇該 files 進入 Discover/Compare/Design 頁面
* @param {object} file
@@ -170,7 +206,12 @@
this.$router.push({name: 'CheckConformance', params: params});
break;
}
}
},
onRightClick(event, file) {
this.selectedType = file.type;
this.selectedId = file.id;
this.$refs.menu.show(event)
},
},
mounted() {
this.isLoading = true;