Updated

2025-11-01 20:35:55 +03:30
parent 6524ae7605
commit 4fde6357d1
16 changed files with 292 additions and 67 deletions
@@ -2,6 +2,4 @@
    <div></div>
 </template>

-<script setup lang="ts"></script>
-
-<style scoped></style>
+<script setup lang="ts"></script>
@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+// imports
+
+import useGetSavedProducts from "~/composables/api/products/useSavedProducts";
+
+// meta
+
+useSeoMeta({
+    title: "پنل کاربری محصولات ذخیره شده",
+});
+
+definePageMeta({
+    middleware: "check-is-logged-in",
+    layout: "profile",
+});
+
+// states
+
+const { data, isLoading: productsIsLoading } = useGetSavedProducts();
+
+// computed
+
+const products = computed(() => {
+    return data.value?.results.flat();
+});
+
+const paginationData = computed(() => {
+    return data.value?.results.map((_, i: number) => {
+        return { type: "page", value: i };
+    });
+});
+</script>
+
+<template>
+    <div class="w-full flex flex-col gap-5">
+        <ProfilePageTitle
+            title="علاقه‌مندی های شما"
+            icon="bi:bookmark"
+        />
+
+        <ProfileSection :title="`${paginationData?.length} محصول`">
+            <template #button>
+                <Button
+                    end-icon="ci:chevron-left"
+                    size="md"
+                    class="rounded-full transition-all"
+                    variant="solid"
+                    @click="navigateTo({ name: 'products-slug' })"
+                >
+                    <span class="whitespace-pre @max-[64rem]::text-xs"> همه محصولات </span>
+                </Button>
+            </template>
+            <div class="w-full">
+                <ul
+                    v-if="productsIsLoading"
+                    class="grid grid-cols-2 @min-[40rem]:grid-cols-3 @min-[64rem]:grid-cols-4 @min-[80rem]:grid-cols-5 gap-y-8 gap-5 @min-[40rem]:gap-8 w-full"
+                >
+                    <div
+                        class="w-full flex flex-col gap-3"
+                        v-for="i in 10"
+                        :key="i"
+                    >
+                        <Skeleton
+                            v-for="i in 3"
+                            :key="i"
+                            class="w-full"
+                            :class="{
+                                '!h-[11.9rem] @min-[64rem]:!h-[17.25rem] !rounded-2xl': i == 1,
+                                '!h-[1.4rem] @min-[64rem]:!h-[1.5rem] !rounded-sm': [2, 3].includes(i),
+                                '!w-1/2 @min-[64rem]:!w-full': i == 2,
+                                '@min-[64rem]:!w-1/2': i == 3,
+                            }"
+                        />
+                    </div>
+                </ul>
+                <div
+                    v-else
+                    class="w-full h-max"
+                >
+                    <div
+                        v-if="!products?.length"
+                        class="flex flex-grow w-full"
+                    >
+                        <Placeholder
+                            title="محصولی یافت نشد :("
+                            icon="bi:search"
+                        />
+                    </div>
+                    <ProductsGrid
+                        :with-header="false"
+                        :products="products!"
+                        class="!p-0"
+                    />
+                    <div
+                        v-if="data && paginationData && data.count > 15"
+                        class="w-full flex-center py-10 mt-5 @min-[64rem]:mt-10"
+                    >
+                        <Pagination
+                            :items="paginationData"
+                            :total="data.count"
+                            :per-page="15"
+                        />
+                    </div>
+                </div>
+            </div>
+        </ProfileSection>
+    </div>
+</template>