feat: galleries and categories working fully on landing

Signed-off-by: Type-32 <[email protected]>
Type-32 · Oct 2, 2024 · d13b142 · d13b142
1 parent e449c82
commit d13b142
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 20 deletions.
diff --git a/app/composables/useCategories.ts b/app/composables/useCategories.ts
@@ -49,11 +49,12 @@ export const useCategories = () => {
         })
     }
 
-    const getCategoryGalleries = async (id: number) => {
+    const getCategoryGalleries = async (id: number, getUnpublished: boolean = true) => {
         return await $fetch<Gallery[]>(`/api/v1/category/gallery`, {
             method: 'GET',
             query: {
-                id: id
+                id: id,
+                getUnpublished: getUnpublished
             }
         })
     }

diff --git a/app/layouts/MainLayout.vue b/app/layouts/MainLayout.vue
@@ -15,9 +15,9 @@ const links = [
         to: `/matches`
     },
     {
-        label: 'Leagues',
+        label: 'Tables',
         icon: 'i-lucide-users',
-        to: `/leagues`
+        to: `/tables`
     },
     {
         label: 'Galleries',

diff --git a/app/pages/galleries/[galleryId].vue b/app/pages/galleries/[galleryId].vue
@@ -46,12 +46,12 @@ function isVideo(url: string){
                     :title="data?.name"
                 >
                     <template #headline>
-                        <time class="text-gray-500 dark:text-gray-400">{{ parseAndFormatDate(data?.createdAt.toISOString() || (new Date().toISOString())) }}</time>
+                        <time class="text-gray-500 dark:text-gray-400">{{ parseAndFormatDate(data?.createdAt || (new Date().toISOString())) }}</time>
                     </template>
                 </UPageHeader>
                 <UPageBody>
-                    <div class="flex flex-col items-center justify-center w-full">
-                        <div class="container" v-for="(img, index) in content" :key="index">
+                    <div class="flex flex-col items-center justify-center w-full align-middle gap-5">
+                        <div class="container h-[600px] flex items-center justify-center" v-for="(img, index) in content" :key="index">
                             <img v-if="isImage(img?.url)" :src="$media.getMediaUrl(img)" class="object-contain h-full rounded-lg" alt="media image"/>
                             <video v-if="isVideo(img?.url)" :src="$media.getMediaUrl(img)" class="object-contain h-full rounded-lg"/>
                         </div>

diff --git a/app/pages/galleries/index.vue b/app/pages/galleries/index.vue
@@ -3,18 +3,35 @@
 import MainLayout from "~/layouts/MainLayout.vue";
 import type {Category, Gallery} from "@prisma/client";
 
-const loadingPage = ref(true);
+const loadingCategories = ref(true), loadingGalleries = ref(true);
 const $util = useCategories(), $gallery = useGalleries()
-const categories = ref<Category[]>(), galleries = ref<Array<Gallery[]>>()
+const categories = ref<Category[]>([]), galleries = ref<Array<Gallery[]>>([])
 
 onMounted(async () => {
-    loadingPage.value = true
+    loadingCategories.value = true
+    loadingGalleries.value = true
     categories.value = (await $util.getCategories()).reverse()
+    loadingCategories.value = false
     for(let i = 0; i < categories.value.length; i++)
-        galleries.value?.push(await $util.getCategoryGalleries(categories.value?.at(i)?.id || 0))
-
-    loadingPage.value = false
+        galleries.value?.push(await $util.getCategoryGalleries(categories.value?.at(i)?.id || 0, false))
+    console.log(galleries.value.length)
+    console.log(categories.value)
+    loadingGalleries.value = false
 })
+function getImageLink(){
+    return "https://picsum.photos/200/150"
+}
+function parseAndFormatDate(dateString: string): string {
+    const date = new Date(dateString);
+
+    const year = date.getUTCFullYear();
+    const month = (date.getUTCMonth() + 1).toString().padStart(2, '0');
+    const day = date.getUTCDate().toString().padStart(2, '0');
+    const hours = date.getUTCHours().toString().padStart(2, '0');
+    const minutes = date.getUTCMinutes().toString().padStart(2, '0');
+
+    return `${year}/${month}/${day}, ${hours}:${minutes}`;
+}
 </script>
 
 <template>
@@ -25,6 +42,30 @@ onMounted(async () => {
                     title="Galleries"
                     description="A section of where we put collections of media at."
                 />
+                <UPageBody class="flex flex-col max-w-none min-w-none w-full max-h-none h-full gap-5 items-center">
+                    <div class="flex flex-col items-center w-full gap-5" v-for="(category, index) in categories" :key="index" v-if="!loadingCategories">
+                        <UDivider><span class="text-center font-medium text-2xl">{{category.name}}</span></UDivider>
+                        <div class="w-full" v-if="!loadingGalleries">
+                            <div class="grid grid-cols-3 gap-3" v-if="galleries[index].length > 0">
+                                <UBlogPost
+                                    v-for="(gallery, ind) in galleries[index]"
+                                    :key="ind"
+                                    :image="getImageLink()"
+                                    :date="parseAndFormatDate(gallery.createdAt)"
+                                    :title="gallery.name"
+                                    :to="`/galleries/${gallery.id}`"
+                                />
+                            </div>
+                            <div class="w-full text-center font-light opacity-60" v-else>There are no galleries under this category.</div>
+                        </div>
+                        <div class="grid grid-cols-3 gap-3 w-full" v-else>
+                            <USkeleton class="w-full h-64"/>
+                            <USkeleton class="w-full h-64"/>
+                            <USkeleton class="w-full h-64"/>
+                        </div>
+                    </div>
+                    <USkeleton class="h-64 w-full" v-else/>
+                </UPageBody>
             </UPage>
         </UContainer>
     </MainLayout>

diff --git a/app/pages/leagues.vue → app/pages/tables.vue b/app/pages/leagues.vue → app/pages/tables.vue
diff --git a/server/api/v1/category/gallery.get.ts b/server/api/v1/category/gallery.get.ts
@@ -2,7 +2,7 @@ import {CategoryOnGalleries, PrismaClient} from '@prisma/client'
 
 const prisma = new PrismaClient()
 export default defineEventHandler(async (event) => {
-    const query = getQuery(event)
+    const query = getQuery<{pagination: number, paginatePerPage: number, getUnpublished: boolean, id: number}>(event)
     try {
         let pageIndex: number = 0
         let pageAmount: number = 90
@@ -19,14 +19,27 @@ export default defineEventHandler(async (event) => {
                 }
             })
         }
+        let galleries = []
 
-        return await prisma.gallery.findMany({
-            where: {
-                id: {
-                    in: data.map(arr => arr.galleryId)
+        if(query.getUnpublished == true){
+            galleries = await prisma.gallery.findMany({
+                where: {
+                    id: {
+                        in: data.map(arr => arr.galleryId)
+                    }
+                }
+            })
+        } else {
+            galleries = await prisma.gallery.findMany({
+                where: {
+                    id: {
+                        in: data.map(arr => arr.galleryId)
+                    },
+                    published: true
                 }
-            }
-        })
+            })
+        }
+        return galleries
     } catch (error: any) {
         if (error) {
             console.log(`${event.toString()} -> Error at ${error.message}`)