versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 11:39:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: ♻️ Refactor composer

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-11-04 21:20:19 +01:00
parent 70222d127b
commit 343765a331
No known key found for this signature in database
8 changed files with 231 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

69
components/composer/uploader/uploader.vue
View file

@ -2,7 +2,7 @@
<div>
<input type="file" ref="fileInput" @change="handleFileInput" style="display: none" multiple />
<div class="flex flex-row gap-2 overflow-x-auto *:shrink-0 p-1 mb-4" v-if="files.length > 0">
<FilePreview v-for="data in files" :key="data.id" :file-data="data" @remove="removeFile"
<FilePreview v-for="data in files" :key="data.id" :file-data="data" @remove="(id: string) => emit('removeFile', id)"
@update-alt-text="updateAltText" />
</div>
</div>
@ -35,6 +35,12 @@ defineExpose({
openFilePicker,
});
const emit = defineEmits<{
changeFile: [changedFile: FileData];
addFile: [newFile: FileData];
removeFile: [id: string];
}>();
const handleFileInput = (event: Event) => {
const target = event.target as HTMLInputElement;
if (target.files) {
@ -64,54 +70,49 @@ watch(
},
);
const removeFile = (id: string) => {
files.value = files.value.filter((data) => data.id !== id);
};
const updateAltText = (id: string, altText?: string) => {
files.value = files.value.map((data) => {
if (data.id === id) {
return { ...data, uploading: true };
}
return data;
const foundFile = files.value.find((data) => data.id === id);
if (!foundFile) {
throw new Error("File with ID doesn't exist");
}
emit("changeFile", {
...foundFile,
uploading: true,
});
client.value
?.updateMedia(
files.value.find((data) => data.id === id)?.api_id as string,
{ description: altText },
)
?.updateMedia(foundFile.api_id as string, { description: altText })
.then(() => {
files.value = files.value.map((data) => {
if (data.id === id) {
return { ...data, uploading: false };
}
return data;
emit("changeFile", {
...foundFile,
uploading: false,
});
});
};
const uploadFile = async (file: File) => {
files.value = files.value.map((data) => {
if (data.file === file) {
return { ...data, uploading: true, progress: 0.1 };
}
return data;
const foundFile = files.value.find((data) => data.file === file);
if (!foundFile) {
throw new Error("File doesn't exist");
}
emit("changeFile", {
...foundFile,
uploading: true,
progress: 0.1,
});
client.value.uploadMedia(file).then((response) => {
const attachment = response.data;
files.value = files.value.map((data) => {
if (data.file === file) {
return {
...data,
api_id: attachment.id,
uploading: false,
progress: 1.0,
};
}
return data;
emit("changeFile", {
...foundFile,
uploading: false,
progress: 1.0,
api_id: attachment.id,
});
});
};