Aden Lindsay
83ffb7f34f
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...
119 lines
3.8 KiB
Vue
119 lines
3.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-2xl bg-zinc-900 p-6 text-left align-middle shadow-xl transition-all">
|
|
<DialogTitle as="h3" class="text-lg font-medium leading-6 text-white">
|
|
Create Collection
|
|
</DialogTitle>
|
|
<div class="mt-2">
|
|
<input
|
|
type="text"
|
|
v-model="collectionName"
|
|
placeholder="Collection name"
|
|
class="block w-full rounded-md border-0 bg-zinc-800 py-1.5 text-white shadow-sm ring-1 ring-inset ring-zinc-700 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
|
/>
|
|
</div>
|
|
|
|
<div class="mt-4 flex justify-end gap-x-2">
|
|
<button
|
|
type="button"
|
|
@click="$emit('close')"
|
|
class="inline-flex justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-zinc-400 hover:text-zinc-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<LoadingButton
|
|
:loading="isCreating"
|
|
:disabled="!collectionName"
|
|
@click="createCollection"
|
|
class="inline-flex items-center rounded-md bg-white/10 px-3 py-2 text-sm font-semibold font-display text-white hover:bg-white/20 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Create
|
|
</LoadingButton>
|
|
</div>
|
|
</DialogPanel>
|
|
</TransitionChild>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</TransitionRoot>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import {
|
|
TransitionRoot,
|
|
TransitionChild,
|
|
Dialog,
|
|
DialogPanel,
|
|
DialogTitle,
|
|
} from '@headlessui/vue';
|
|
|
|
const props = defineProps<{
|
|
show: boolean
|
|
gameId?: string
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
close: []
|
|
created: [collectionId: string]
|
|
}>();
|
|
|
|
const collectionName = ref('');
|
|
const isCreating = ref(false);
|
|
|
|
const createCollection = async () => {
|
|
if (!collectionName.value || isCreating.value) return;
|
|
|
|
try {
|
|
isCreating.value = true;
|
|
|
|
// Create the collection
|
|
const response = await $fetch('/api/v1/collection', {
|
|
method: 'POST',
|
|
body: { name: collectionName.value }
|
|
});
|
|
|
|
// Add the game if provided
|
|
if (props.gameId) {
|
|
await $fetch(`/api/v1/collection/${response.id}/entry`, {
|
|
method: 'POST',
|
|
body: { id: props.gameId }
|
|
});
|
|
}
|
|
|
|
// Reset and emit
|
|
collectionName.value = '';
|
|
emit('created', response.id);
|
|
emit('close');
|
|
} catch (error) {
|
|
console.error('Failed to create collection:', error);
|
|
} finally {
|
|
isCreating.value = false;
|
|
}
|
|
};
|
|
</script>
|