changed filter slider

frontend/components/global/products/FilterProducts.vue

@@ -17,10 +17,13 @@ const sort_filter = ref([
     { title: "ارزان ترین ها", value: "-price" },
 ]);
 
-const sliderValue = ref([PRODUCT_RANGE.min, PRODUCT_RANGE.max]);
+const sliderValue = ref([
+    params.price_gte ?? PRODUCT_RANGE.min,
+    params.price_lte ?? PRODUCT_RANGE.max,
+]);
 
-const has_discount = ref(JSON.parse(params.has_discount) ?? false);
-const in_stock = ref(JSON.parse(params.in_stock) ?? false);
+const has_discount = ref(JSON.parse(params.has_discount ?? false));
+const in_stock = ref(JSON.parse(params.in_stock ?? false));
 
 const sliderValueDebounced = refDebounced(sliderValue, 1000);
 
@@ -55,6 +58,7 @@ const allCategories = computed(() => {
             name: category.name,
             children: category.subcategorys.map((sub) => {
                 return {
+                    id: sub.id,
                     name: sub.name,
                 };
             }),
@@ -66,11 +70,11 @@ const allCategories = computed(() => {
 
 const resetFilters = () => {
     params.search = "";
-    params.sort = "newest";
+    params.sort = "";
     sliderValue.value = [PRODUCT_RANGE.min, PRODUCT_RANGE.max];
     has_discount.value = false;
     in_stock.value = false;
-    params.category = "";
+    params.category = undefined;
 };
 
 // watch
@@ -83,17 +87,6 @@ watch(
     }
 );
 
-watchOnce(
-    () => [params.price_gte, params.price_lte],
-    ([newGte, newLte]) => {
-        sliderValue.value[0] = newGte;
-        sliderValue.value[1] = newLte;
-    },
-    {
-        immediate: true,
-    }
-);
-
 watch(
     () => [has_discount.value, in_stock.value],
     ([newHasDiscount, newInStock]) => {
@@ -172,21 +165,13 @@ watch(
                     <div class="flex-center gap-2">
                         <span class="text-sm text-black">حداقل</span>
                         <span class="text-sm text-black">
-                            {{
-                                "price_gte" in params
-                                    ? sliderValue[0].toLocaleString()
-                                    : PRODUCT_RANGE.min
-                            }}
+                            {{ sliderValue[0].toLocaleString() }}
                         </span>
                     </div>
                     <div class="flex-center gap-2">
                         <span class="text-sm text-black">حداکثر</span>
                         <span class="text-sm text-black">
-                            {{
-                                "price_lte" in params
-                                    ? sliderValue[1].toLocaleString()
-                                    : PRODUCT_RANGE.max
-                            }}
+                            {{ sliderValue[1].toLocaleString() }}
                         </span>
                     </div>
                 </div>