Skip to content

Commit

Permalink
feat: galleries and categories working fully on landing
Browse files Browse the repository at this point in the history
Signed-off-by: Type-32 <[email protected]>
  • Loading branch information
Type-32 committed Oct 2, 2024
1 parent e449c82 commit d13b142
Show file tree
Hide file tree
Showing 6 changed files with 75 additions and 20 deletions.
5 changes: 3 additions & 2 deletions app/composables/useCategories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
})
}
Expand Down
4 changes: 2 additions & 2 deletions app/layouts/MainLayout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ const links = [
to: `/matches`
},
{
label: 'Leagues',
label: 'Tables',
icon: 'i-lucide-users',
to: `/leagues`
to: `/tables`
},
{
label: 'Galleries',
Expand Down
6 changes: 3 additions & 3 deletions app/pages/galleries/[galleryId].vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
53 changes: 47 additions & 6 deletions app/pages/galleries/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
File renamed without changes.
27 changes: 20 additions & 7 deletions server/api/v1/category/gallery.get.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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}`)
Expand Down

0 comments on commit d13b142

Please sign in to comment.