mirror of
https://github.com/BillyOutlast/drop.git
synced 2026-02-04 08:41:17 +01:00
eea8f82bf9
Update index.post.ts to implement saving collections functionality Update index.get.ts to verify if collection exists and if user can access it Update index.delete.ts to ask questions and not be so nonchalant Update entry.post.ts Update entry.delete.ts to do it better Update index.vue to add functionality to the add to library button + fidgit with image Update index.vue to also add add to library functionality, but no fidget :( Update entry.post.ts to infact not remove it Update index.ts Update index.vue to manage collections from store page Update index.ts to restrut for ahhhh Update index.vue too add collection control to carosel Update index.vue fix minor issue Update index.vue to fix dropdown modal bug Create library.vue for page layout Create index.vue for library game details pane Create index.vue for viewing collections pane Create DeleteCollectionModal.vue component Create CreateCollectionModal.vue component Update AddLibraryButton.vue with dropdown :D Update index.vue to use new components Update index.vue for more components :O Update entry.post.ts to not not return success, it'll figure it out Update entry.delete.ts to not return...
89 lines
2.8 KiB
Vue
89 lines
2.8 KiB
Vue
<template>
|
|
<TransitionRoot appear :show="show" as="template">
|
|
<Dialog as="div" @close="$emit('close')" class="relative z-50">
|
|
<TransitionChild
|
|
as="template"
|
|
enter="duration-300 ease-out"
|
|
enter-from="opacity-0"
|
|
enter-to="opacity-100"
|
|
leave="duration-200 ease-in"
|
|
leave-from="opacity-100"
|
|
leave-to="opacity-0"
|
|
>
|
|
<div class="fixed inset-0 bg-zinc-950/80" aria-hidden="true" />
|
|
</TransitionChild>
|
|
|
|
<div class="fixed inset-0 overflow-y-auto">
|
|
<div class="flex min-h-full items-center justify-center p-4 text-center">
|
|
<TransitionChild
|
|
as="template"
|
|
enter="duration-300 ease-out"
|
|
enter-from="opacity-0 scale-95"
|
|
enter-to="opacity-100 scale-100"
|
|
leave="duration-200 ease-in"
|
|
leave-from="opacity-100 scale-100"
|
|
leave-to="opacity-0 scale-95"
|
|
>
|
|
<DialogPanel class="w-full max-w-md transform overflow-hidden rounded-xl bg-zinc-900 p-6 shadow-xl transition-all">
|
|
<DialogTitle as="h3" class="text-lg font-bold font-display text-zinc-100">
|
|
Delete Collection
|
|
</DialogTitle>
|
|
<div class="mt-2">
|
|
<p class="text-sm text-zinc-400">
|
|
Are you sure you want to delete "{{ collection?.name }}"? This action cannot be undone.
|
|
</p>
|
|
</div>
|
|
<div class="mt-6 flex justify-end gap-x-3">
|
|
<button
|
|
@click="$emit('close')"
|
|
class="inline-flex items-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold font-display text-white hover:bg-zinc-700"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
@click="handleDelete"
|
|
class="inline-flex items-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold font-display text-white hover:bg-red-500"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</DialogPanel>
|
|
</TransitionChild>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</TransitionRoot>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
TransitionRoot,
|
|
TransitionChild,
|
|
Dialog,
|
|
DialogPanel,
|
|
DialogTitle,
|
|
} from '@headlessui/vue';
|
|
|
|
const props = defineProps<{
|
|
show: boolean
|
|
collection: Collection | null
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
close: []
|
|
deleted: [collectionId: string]
|
|
}>();
|
|
|
|
const handleDelete = async () => {
|
|
if (!props.collection) return;
|
|
|
|
try {
|
|
await $fetch(`/api/v1/collection/${props.collection.id}`, { method: "DELETE" });
|
|
emit('deleted', props.collection.id);
|
|
emit('close');
|
|
} catch (error) {
|
|
console.error("Failed to delete collection:", error);
|
|
}
|
|
};
|
|
</script>
|