added new categories for combobox

frontend/components/global/products/FilterProducts.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 // imports
 
+import useGetCategories from "~/composables/api/product/useGetCategories";
 import useGetProducts, {
     type GetProductsFilters,
 } from "~/composables/api/products/useGetProducts";
-import { useParams } from "~/composables/global/useParams";
 import { PRODUCT_RANGE } from "~/constants";
 
 // state
@@ -24,36 +24,43 @@ const in_stock = ref(JSON.parse(params.in_stock) ?? false);
 
 const sliderValueDebounced = refDebounced(sliderValue, 1000);
 
-const options = [
-    {
-        name: "میوه",
-        children: [
-            { name: "سیب" },
-            { name: "موز" },
-            { name: "پرتقال" },
-            { name: "طالبی" },
-            { name: "انگور" },
-            { name: "هندوانه" },
-            { name: "خربزه" },
-            { name: "گلابی" },
-        ],
-    },
-    {
-        name: "سبزیجات",
-        children: [
-            { name: "کلم" },
-            { name: "بروکلی" },
-            { name: "هویج" },
-            { name: "کاهو" },
-            { name: "اسفناج" },
-            { name: "چوی بوک" },
-            { name: "گل کلم" },
-            { name: "سیب زمینی" },
-        ],
-    },
-];
+// queries
 
-const { isPending: productsIsPending } = useGetProducts(params);
+const filters = computed(() => {
+    return {
+        sort: params.sort ?? "newest",
+        search: params.search ?? "",
+        price_gte: params.price_gte ?? PRODUCT_RANGE.min,
+        price_lte: params.price_lte ?? PRODUCT_RANGE.max,
+        in_stock: params.in_stock ?? false,
+        has_discount: params.has_discount ?? false,
+        category: params.category ?? undefined,
+        page: params.page ?? 1,
+    };
+});
+
+const { data: categories, suspense } = useGetCategories();
+
+await useAsyncData(async () => {
+    await suspense();
+});
+
+const { isPending: productsIsPending } = useGetProducts(filters);
+
+// computed
+
+const allCategories = computed(() => {
+    return categories.value!.map((category) => {
+        return {
+            name: category.name,
+            children: category.subcategorys.map((sub) => {
+                return {
+                    name: sub.name,
+                };
+            }),
+        };
+    });
+});
 
 // methods
 
@@ -130,7 +137,7 @@ watch(
                     <Icon name="ci:grid" size="24" />
                     دسته بندی
                 </div>
-                <ComboBox :options="options" v-model="params.category" />
+                <ComboBox :options="allCategories" v-model="params.category" />
             </div>
 
             <div class="flex flex-col w-full gap-5">