Updated functionality add ssr and rendering dynamic data

2025-01-19 19:54:09 +03:30
parent e0993866ec
commit b26ef79eb4
1 changed files with 83 additions and 63 deletions
@@ -1,68 +1,88 @@
+<script lang="ts" setup>
+
+import useGetCategories from "~/composables/api/product/useGetCategories";
+
+// state
+
+const { data: categories, suspense } = useGetCategories();
+
+const search = ref("");
+const debouncedSearch = refDebounced(search, 300);
+
+// computed
+
+const filteredCategories = computed(() => {
+    if (debouncedSearch.value.length > 0) {
+        return categories.value!.filter(cat => cat.name.includes(debouncedSearch.value));
+    }
+
+    return categories.value!;
+});
+
+// lifecycle
+
+onServerPrefetch(async () => {
+    const response = await suspense();
+
+    if (response.isError) {
+        throw createError({
+            statusCode: 500,
+            statusMessage: `Error in categories page prefetch`
+        });
+    }
+});
+
+</script>
+
 <template>
    <div class="container">
-        <div class="mt-20">
+        <div class="mt-20 flex gap-6 justify-between items-center">
            <span class="typo-h-3 text-black">دسته بندی ها</span>
+            <Input
+                class="max-w-[400px] w-full"
+                variant="outlined"
+                placeholder="جستجو..."
+                v-model="search"
+            >
+                <template #endItem>
+                    <div class="flex items-center gap-1">
+                        <Icon class="translate-y-[-1px]" name="ci:search" size="24" />
+                    </div>
+                </template>
+            </Input>
        </div>
-        <div class="grid grid-cols-3 gap-4 w-full mt-12">
-            <CategoryCard
-                :id="1"
-                category="یک دسته بندی تست"
-                picture="/img/product-1.jpg"
-                :count="20"
-                description="یک دسته بندی تستasdasd"
-                dark-layer
-            />
-            <CategoryCard
-                :id="2"
-                category="یک دسته بندی تست"
-                picture="/img/product-2.jpg"
-                :count="20"
-                description="یک دسته بندی تستasdasd"
-            />
-            <CategoryCard
-                :id="3"
-                category="یک دسته بندی تست"
-                picture="/img/product-3.jpg"
-                :count="20"
-                description="یک دسته بندی تستasdasd"
-            />
-            <CategoryCard
-                :id="8"
-                category="یک دسته بندی تست"
-                picture="/img/product-4.jpg"
-                :count="20"
-                description="یک دسته بندی تستasdasd"
-            />
-            <CategoryCard
-                :id="4"
-                category="یک دسته بندی تست"
-                picture="/img/product-5.jpg"
-                :count="20"
-                description="یک دسته بندی تستasdasd"
-            />
-            <CategoryCard
-                :id="5"
-                category="یک دسته بندی تست"
-                picture="/img/product-1.jpg"
-                :count="20"
-                description="یک دسته بندی تستasdasd"
-            />
-            <CategoryCard
-                :id="6"
-                category="یک دسته بندی تست"
-                picture="/img/product-2.jpg"
-                :count="20"
-                description="یک دسته بندی تستasdasd"
-            />
-            <CategoryCard
-                :id="7"
-                category="یک دسته بندی تست"
-                picture="/img/product-3.jpg"
-                :count="20"
-                description="یک دسته بندی تستasdasd"
-            />
-        </div>
+        <Transition name="fade" mode="out-in">
+            <div
+                v-if="filteredCategories.length !== 0"
+                v-auto-animate
+                class="grid grid-cols-3 gap-4 w-full mt-12"
+            >
+                <CategoryCard
+                    v-for="category in filteredCategories"
+                    :key="category.id"
+                    :id="category.id"
+                    :category="category.name"
+                    picture="/img/product-1.jpg"
+                    :count="20"
+                    description="یک دسته بندی تستasdasd"
+                    dark-layer
+                />
+            </div>
+
+            <div
+                v-else
+                class="flex w-full mt-12"
+            >
+                <div
+                    class="flex-col flex-grow py-[12rem] gap-6 border-2 border-slate-200 border-dashed size-full rounded-100 flex-center"
+                >
+                    <Icon name="bi:search" size="50" class="**:fill-gray-500" />
+                    <span class="text-lg text-gray-500">
+                        دسته بندی یافت نشد :(
+                    </span>
+                </div>
+            </div>
+        </Transition>
+
    </div>
-</template>
-<script setup lang="ts">
-</script>
+</template>