fix: collection creation & overview hover styles

This commit is contained in:
DecDuck
2025-01-28 17:01:34 +11:00
parent 42ebbf2922
commit 6317ad2657
6 changed files with 19 additions and 10 deletions

View File

@ -37,7 +37,9 @@
> >
Collections Collections
</div> </div>
<div class="flex flex-col gap-y-2 py-1 max-h-[150px] overflow-y-auto"> <div
class="flex flex-col gap-y-2 py-1 max-h-[150px] overflow-y-auto"
>
<div <div
v-if="collections.length === 0" v-if="collections.length === 0"
class="px-3 py-2 text-sm text-zinc-500" class="px-3 py-2 text-sm text-zinc-500"
@ -83,7 +85,7 @@
<CreateCollectionModal <CreateCollectionModal
v-model="createCollectionModal" v-model="createCollectionModal"
:game-id="props.gameId" :gameId="props.gameId"
/> />
</template> </template>

View File

@ -48,6 +48,8 @@
import { ref } from "vue"; import { ref } from "vue";
import { DialogTitle } from "@headlessui/vue"; import { DialogTitle } from "@headlessui/vue";
import ModalTemplate from "~/drop-base/components/ModalTemplate.vue"; import ModalTemplate from "~/drop-base/components/ModalTemplate.vue";
import type { CollectionEntry, Game } from "@prisma/client";
import type { SerializeObject } from "nitropack";
const props = defineProps<{ const props = defineProps<{
gameId?: string; gameId?: string;
@ -77,10 +79,13 @@ async function createCollection() {
// Add the game if provided // Add the game if provided
if (props.gameId) { if (props.gameId) {
await $fetch(`/api/v1/collection/${response.id}/entry`, { const entry = await $fetch<
CollectionEntry & { game: SerializeObject<Game> }
>(`/api/v1/collection/${response.id}/entry`, {
method: "POST", method: "POST",
body: { id: props.gameId }, body: { id: props.gameId },
}); });
response.entries.push(entry);
} }
collections.value.push(response); collections.value.push(response);

View File

@ -64,7 +64,7 @@
</div> </div>
</div> </div>
<div class="min-h-[20vh]" /> <div class="min-h-[300px]" />
</div> </div>
</template> </template>

View File

@ -19,7 +19,7 @@
<div <div
v-for="collection in collections" v-for="collection in collections"
:key="collection.id" :key="collection.id"
class="group flex flex-row rounded-lg overflow-hidden transition-all duration-200 text-left w-full" class="group flex flex-row rounded-lg overflow-hidden transition-all duration-200 text-left w-full hover:scale-105"
> >
<NuxtLink <NuxtLink
class="grow p-4 bg-zinc-800/50 hover:bg-zinc-800" class="grow p-4 bg-zinc-800/50 hover:bg-zinc-800"
@ -36,9 +36,9 @@
<!-- Delete button (only show for non-default collections) --> <!-- Delete button (only show for non-default collections) -->
<button <button
@click="() => (currentlyDeleting = collection)" @click="() => (currentlyDeleting = collection)"
class="px-3 ml-[2px] bg-zinc-800/50 hover:bg-zinc-800" class="px-3 ml-[2px] bg-zinc-800/50 hover:bg-zinc-800 group"
> >
<TrashIcon class="h-5 w-5 text-zinc-400 hover:text-red-400" /> <TrashIcon class="transition-all size-5 text-zinc-400 group-hover:text-red-400 group-hover:rotate-[8deg]" />
</button> </button>
</div> </div>

View File

@ -20,6 +20,5 @@ export default defineEventHandler(async (h3) => {
if (!gameId) if (!gameId)
throw createError({ statusCode: 400, statusMessage: "Game ID required" }); throw createError({ statusCode: 400, statusMessage: "Game ID required" });
await userLibraryManager.collectionAdd(gameId, id, userId); return await userLibraryManager.collectionAdd(gameId, id, userId);
return;
}); });

View File

@ -78,7 +78,7 @@ class UserLibraryManager {
} }
async collectionAdd(gameId: string, collectionId: string, userId: string) { async collectionAdd(gameId: string, collectionId: string, userId: string) {
await prisma.collectionEntry.upsert({ return await prisma.collectionEntry.upsert({
where: { where: {
collectionId_gameId: { collectionId_gameId: {
collectionId, collectionId,
@ -93,6 +93,9 @@ class UserLibraryManager {
gameId, gameId,
}, },
update: {}, update: {},
include: {
game: true,
},
}); });
} }