mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-25 15:59:38 +02:00
feat: implement attachment management with upload, delete, and permission checks; update serializers and models
This commit is contained in:
Sean Morley
parent
e0fa62c1ea
commit
94c3e3d363
15 changed files with 444 additions and 10 deletions
|
|
@ -2,6 +2,7 @@
|
|||
import { createEventDispatcher } from 'svelte';
|
||||
import type {
|
||||
Adventure,
|
||||
Attachment,
|
||||
Category,
|
||||
Collection,
|
||||
OpenStreetMapPlace,
|
||||
|
|
@ -36,6 +37,7 @@
|
|||
|
||||
import Star from '~icons/mdi/star';
|
||||
import Crown from '~icons/mdi/crown';
|
||||
import AttachmentCard from './AttachmentCard.svelte';
|
||||
|
||||
let wikiError: string = '';
|
||||
|
||||
|
|
@ -66,7 +68,8 @@
|
|||
display_name: '',
|
||||
icon: '',
|
||||
user_id: ''
|
||||
}
|
||||
},
|
||||
attachments: []
|
||||
};
|
||||
|
||||
export let adventureToEdit: Adventure | null = null;
|
||||
|
|
@ -93,7 +96,9 @@
|
|||
display_name: '',
|
||||
icon: '',
|
||||
user_id: ''
|
||||
}
|
||||
},
|
||||
|
||||
attachments: adventureToEdit?.attachments || []
|
||||
};
|
||||
|
||||
let markers: Point[] = [];
|
||||
|
|
@ -134,6 +139,86 @@
|
|||
}
|
||||
}
|
||||
|
||||
function deleteAttachment(event: CustomEvent<string>) {
|
||||
adventure.attachments = adventure.attachments.filter(
|
||||
(attachment) => attachment.id !== event.detail
|
||||
);
|
||||
}
|
||||
|
||||
let attachmentName: string = '';
|
||||
let attachmentToEdit: Attachment | null = null;
|
||||
|
||||
async function editAttachment() {
|
||||
if (attachmentToEdit) {
|
||||
let res = await fetch(`/api/attachments/${attachmentToEdit.id}/`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ name: attachmentToEdit.name })
|
||||
});
|
||||
if (res.ok) {
|
||||
let newAttachment = (await res.json()) as Attachment;
|
||||
adventure.attachments = adventure.attachments.map((attachment) => {
|
||||
if (attachment.id === newAttachment.id) {
|
||||
return newAttachment;
|
||||
}
|
||||
return attachment;
|
||||
});
|
||||
attachmentToEdit = null;
|
||||
addToast('success', $t('adventures.attachment_update_success'));
|
||||
} else {
|
||||
addToast('error', $t('adventures.attachment_update_error'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function uploadAttachment(event: Event) {
|
||||
event.preventDefault();
|
||||
console.log('UPLOAD');
|
||||
|
||||
if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
|
||||
console.error('No files selected');
|
||||
return;
|
||||
}
|
||||
|
||||
const file = fileInput.files[0];
|
||||
console.log(file);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('adventure', adventure.id);
|
||||
formData.append('name', attachmentName);
|
||||
|
||||
console.log(formData);
|
||||
|
||||
try {
|
||||
const res = await fetch('/adventures?/attachment', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
console.log(res);
|
||||
|
||||
if (res.ok) {
|
||||
const newData = deserialize(await res.text()) as { data: Attachment };
|
||||
adventure.attachments = [...adventure.attachments, newData.data];
|
||||
addToast('success', $t('adventures.attachment_upload_success'));
|
||||
attachmentName = '';
|
||||
} else {
|
||||
addToast('error', $t('adventures.attachment_upload_error'));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
addToast('error', $t('adventures.attachment_upload_error'));
|
||||
} finally {
|
||||
// Reset the file input for a new upload
|
||||
if (fileInput) {
|
||||
fileInput.value = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function clearMap() {
|
||||
console.log('CLEAR');
|
||||
markers = [];
|
||||
|
|
@ -878,6 +963,68 @@ it would also work to just use on:click on the MapLibre component itself. -->
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="collapse collapse-plus bg-base-200 mb-4">
|
||||
<input type="checkbox" />
|
||||
<div class="collapse-title text-xl font-medium">
|
||||
{$t('adventures.attachments')} ({adventure.attachments?.length || 0})
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#each adventure.attachments as attachment}
|
||||
<AttachmentCard
|
||||
{attachment}
|
||||
on:delete={deleteAttachment}
|
||||
allowEdit
|
||||
on:edit={(e) => (attachmentToEdit = e.detail)}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
<form
|
||||
on:submit={(e) => {
|
||||
e.preventDefault();
|
||||
uploadAttachment(e);
|
||||
}}
|
||||
>
|
||||
<div class="flex gap-2 m-4">
|
||||
<input
|
||||
type="file"
|
||||
id="fileInput"
|
||||
class="file-input file-input-bordered w-full max-w-xs"
|
||||
accept="image/*,video/*,audio/*,application/pdf"
|
||||
bind:this={fileInput}
|
||||
/>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="Attachment Name"
|
||||
bind:value={attachmentName}
|
||||
/>
|
||||
<button type="submit" class="btn btn-neutral">{$t('adventures.upload')}</button>
|
||||
</div>
|
||||
</form>
|
||||
{#if attachmentToEdit}
|
||||
<form
|
||||
on:submit={(e) => {
|
||||
e.preventDefault();
|
||||
editAttachment();
|
||||
}}
|
||||
>
|
||||
<div class="flex gap-2 m-4">
|
||||
<input
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="Attachment Name"
|
||||
bind:value={attachmentToEdit.name}
|
||||
/>
|
||||
<button type="submit" class="btn btn-neutral"
|
||||
>{$t('transportation.edit')}</button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse collapse-plus bg-base-200 mb-4">
|
||||
<input type="checkbox" />
|
||||
<div class="collapse-title text-xl font-medium">
|
||||
|
|
|
|||
99
frontend/src/lib/components/AttachmentCard.svelte
Normal file
99
frontend/src/lib/components/AttachmentCard.svelte
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<script lang="ts">
|
||||
import type { Attachment } from '$lib/types';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
export let attachment: Attachment;
|
||||
export let allowEdit: boolean = false;
|
||||
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { addToast } from '$lib/toasts';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
async function deleteAttachment() {
|
||||
let res = await fetch(`/api/attachments/${attachment.id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
if (res.ok) {
|
||||
addToast('info', $t('adventures.attachment_delete_success'));
|
||||
dispatch('delete', attachment.id);
|
||||
} else {
|
||||
console.log('Error deleting attachment');
|
||||
}
|
||||
}
|
||||
|
||||
// Check if the attachment is an image or not
|
||||
function getCardBackground() {
|
||||
const isImage = ['.jpg', '.jpeg', '.png', '.gif', '.webp'].some((ext) =>
|
||||
attachment.file.endsWith(ext)
|
||||
);
|
||||
return isImage ? `url(${attachment.file})` : 'url(/path/to/default-placeholder.png)';
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="relative rounded-lg shadow-lg group hover:shadow-xl transition-shadow overflow-hidden">
|
||||
<!-- Card Image or Placeholder -->
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div
|
||||
class="w-full h-48 bg-cover bg-center group-hover:opacity-90 transition-opacity"
|
||||
style="background-image: {getCardBackground()}"
|
||||
on:click={() => window.open(attachment.file, '_blank')}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-label={attachment.file.split('/').pop()}
|
||||
>
|
||||
{#if !['.jpg', '.jpeg', '.png', '.gif', '.webp'].some((ext) => attachment.file.endsWith(ext))}
|
||||
<div
|
||||
class="flex justify-center items-center w-full h-full text-white text-lg font-bold bg-gradient-to-r from-secondary via-base to-primary text-center"
|
||||
>
|
||||
<p>
|
||||
{attachment.name} <br />
|
||||
{attachment.extension.toUpperCase()}
|
||||
</p>
|
||||
</div>
|
||||
<!-- show the name under the extension -->
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Attachment Label -->
|
||||
<div
|
||||
class="absolute top-0 right-0 bg-primary text-white px-3 py-1 text-sm font-medium rounded-bl-lg shadow-md"
|
||||
>
|
||||
{$t('adventures.attachment')}
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-0 left-0 bg-secondary text-white px-2 py-1 text-sm font-medium rounded-br-lg shadow-md"
|
||||
>
|
||||
{attachment.extension}
|
||||
</div>
|
||||
|
||||
<!-- Action Bar -->
|
||||
<div
|
||||
class="absolute bottom-0 w-full bg-gradient-to-t from-black/50 to-transparent p-3 rounded-b-lg flex justify-between items-center"
|
||||
>
|
||||
<span class="text-white text-sm font-medium truncate">
|
||||
{attachment.name}
|
||||
</span>
|
||||
<div class="flex space-x-2">
|
||||
<button
|
||||
class="btn btn-sm btn-secondary btn-outline"
|
||||
type="button"
|
||||
on:click={() => window.open(attachment.file, '_blank')}
|
||||
>
|
||||
{$t('notes.open')}
|
||||
</button>
|
||||
{#if allowEdit}
|
||||
<button
|
||||
class="btn btn-sm btn-info btn-outline"
|
||||
type="button"
|
||||
on:click={() => dispatch('edit', attachment)}
|
||||
>
|
||||
{$t('transportation.edit')}
|
||||
</button>
|
||||
{/if}
|
||||
<button class="btn btn-sm btn-danger btn-outline" type="button" on:click={deleteAttachment}>
|
||||
{$t('adventures.delete')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue