From a3eae2b7a66ed3f710f651c4cf761b78ceccccea Mon Sep 17 00:00:00 2001
From: Xen0Xys <red57101@gmail.com>
Date: Sat, 15 Jun 2024 17:13:14 +0200
Subject: [PATCH] :bug: Fix collapsible button

---
 components/webtoons/episodes/EpisodeItem.vue | 11 +++++++----
 components/webtoons/webtoons/WebtoonItem.vue | 17 +++++++++++------
 pages/episode/[id].vue                       | 20 ++++++++++++++++++++
 3 files changed, 38 insertions(+), 10 deletions(-)
 create mode 100644 pages/episode/[id].vue

diff --git a/components/webtoons/episodes/EpisodeItem.vue b/components/webtoons/episodes/EpisodeItem.vue
index 25e3897..23925a3 100644
--- a/components/webtoons/episodes/EpisodeItem.vue
+++ b/components/webtoons/episodes/EpisodeItem.vue
@@ -12,17 +12,20 @@ const {episode} = defineProps<{
 
 <template>
     <Collapsible>
-        <div id="main" class="flex items-center cursor-pointer" @click="navigateTo(`/webtoon/${episode.id}`)">
+        <div id="main" class="flex items-center cursor-pointer" @click="navigateTo(`/episode/${episode.id}`)">
             <NuxtImg :src="sumToImageUrl(episode.thumbnail)" loading="lazy" class="aspect-square h-20 sm:h-24 md:h-28 xl:h-32"/>
-            <div id="infos" class="flex items-center w-full justify-between px-2  h-20 sm:h-24 md:h-28 xl:h-32">
-                <div id="text-infos" class="flex flex-col justify-between gap-auto h-full py-1 sm:py-2">
-                    <div class="flex flex-col gap-0 md:gap-1 lg:gap-2">
+            <div id="infos" class="flex items-center w-full justify-between px-2 h-20 sm:h-24 md:h-28 xl:h-32">
+                <div id="text-infos" class="flex flex-col w-full h-full justify-center">
+                    <div class="flex flex-row justify-between items-center">
                         <div id="title" class="flex flex-row gap-2">
                             <div v-if="episode.isNew" class="flex items-center">
                                 <Badge v-if="episode.isNew" variant="default">New</Badge>
                             </div>
                             <h4 class="whitespace-nowrap truncate max-w-64">{{ episode.title }}</h4>
                         </div>
+                        <div id="number">
+                            <p>#{{ episode.number }}</p>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/components/webtoons/webtoons/WebtoonItem.vue b/components/webtoons/webtoons/WebtoonItem.vue
index fb1ff86..8e95317 100644
--- a/components/webtoons/webtoons/WebtoonItem.vue
+++ b/components/webtoons/webtoons/WebtoonItem.vue
@@ -9,6 +9,13 @@ const {webtoon} = defineProps<{
     webtoon: any,
 }>();
 
+const isOpen = ref(false);
+
+function toggleCollapsible(){
+    isOpen.value = !isOpen.value;
+    console.log(isOpen.value);
+}
+
 onMounted(() => {
     webtoon.genres.sort();
     webtoon.genres = webtoon.genres.map((genre: string) => {
@@ -29,7 +36,7 @@ onMounted(() => {
 </script>
 
 <template>
-    <Collapsible>
+    <Collapsible v-model:open="isOpen">
         <div id="main" class="flex items-center cursor-pointer" @click="navigateTo(`/webtoon/${webtoon.id}`)">
             <NuxtImg :src="sumToImageUrl(webtoon.thumbnail)" loading="lazy" class="aspect-square h-20 sm:h-24 md:h-28 xl:h-32"/>
             <div id="infos" class="flex items-center w-full justify-between px-2  h-20 sm:h-24 md:h-28 xl:h-32">
@@ -46,11 +53,9 @@ onMounted(() => {
                     </div>
                     <Badge variant="secondary" class="w-fit">{{ webtoon.language.toUpperCase() }}</Badge>
                 </div>
-                <CollapsibleTrigger>
-                    <Button variant="ghost">
-                        <Icon name="iconoir:arrow-down"/>
-                    </Button>
-                </CollapsibleTrigger>
+                <Button variant="ghost" @click="(event) => { event.stopPropagation(); toggleCollapsible()}">
+                    <Icon name="iconoir:arrow-down"/>
+                </Button>
             </div>
         </div>
         <CollapsibleContent class="pl-2">
diff --git a/pages/episode/[id].vue b/pages/episode/[id].vue
new file mode 100644
index 0000000..9f27b46
--- /dev/null
+++ b/pages/episode/[id].vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import * as apiurlMiddleware from "~/middleware/apiurl.middleware";
+
+definePageMeta({
+    middleware: [
+        apiurlMiddleware.default
+    ],
+    layout: "nav-layout"
+});
+</script>
+
+<template>
+    <div class="flex justify-center h-[calc(theme(height.dvh)-70px)]">
+        <h1>Work in progress</h1>
+    </div>
+</template>
+
+<style scoped>
+
+</style>