From 8768e822f7adfd92fa0facc2f8046240ea298cb6 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Fri, 3 Oct 2025 21:41:56 +0330
Subject: [PATCH] connected to new url param

---
 frontend/pages/profile/notifications.vue      | 23 +++----
 .../profile/purchases-and-orders/index.vue    | 29 ++++-----
 frontend/pages/profile/tickets/index.vue      | 36 ++++-------
 frontend/pages/resellers/[...slug].vue        | 60 +++++--------------
 4 files changed, 43 insertions(+), 105 deletions(-)

diff --git a/frontend/pages/profile/notifications.vue b/frontend/pages/profile/notifications.vue
index 2c5d6b4..4e39860 100644
--- a/frontend/pages/profile/notifications.vue
+++ b/frontend/pages/profile/notifications.vue
@@ -14,16 +14,15 @@ definePageMeta({
 
 import { usePushNotifications } from "~/composables/global/usePushNotifications";
 import useSubscribeNotification from "~/composables/api/notifications/useSubscribeNotification";
-import useGetAllNotifications, {
-    type GetAllNotificationsRequest,
-} from "~/composables/api/account/useGetAllNotifications";
+import useGetAllNotifications from "~/composables/api/account/useGetAllNotifications";
+import { useAppParams } from "~/composables/global/useAppParams";
 
 // state
 
-const params: GetAllNotificationsRequest = useUrlSearchParams("history");
-
 const subscribe = ref(false);
 
+const { status, sort } = useAppParams();
+
 const sortFilters = ref([
     {
         title: "اخبار",
@@ -59,17 +58,9 @@ const { isPending: subscribeNotificationIsPending } = useSubscribeNotification()
 
 // computeds
 
-const filters = computed(() => {
-    return {
-        sort: params.sort ?? "created_at",
-        status: params.status ?? "",
-        page: params.page ?? 1,
-    };
-});
-
 const hasNotifications = computed(() => data.value && data.value.count > 0);
 
-const { data, isLoading: notificationsIsLoading } = useGetAllNotifications(filters);
+const { data, isLoading: notificationsIsLoading } = useGetAllNotifications();
 
 const notifications = computed(() => {
     return data.value?.results.flat();
@@ -136,7 +127,7 @@ watch(
                     <span class="text-xs lg:text-sm">فیلتر بر اساس</span>
 
                     <Select
-                        v-model="params.sort!"
+                        v-model="sort"
                         triggerRootClass="!py-2.5"
                         class="w-[6rem]"
                     >
@@ -169,7 +160,7 @@ watch(
                     <span class="text-xs lg:text-sm">وضعیت</span>
 
                     <Select
-                        v-model="params.status!"
+                        v-model="status"
                         triggerRootClass="!py-2.5"
                         class="w-[6rem]"
                     >
diff --git a/frontend/pages/profile/purchases-and-orders/index.vue b/frontend/pages/profile/purchases-and-orders/index.vue
index 92757e3..f6eb539 100644
--- a/frontend/pages/profile/purchases-and-orders/index.vue
+++ b/frontend/pages/profile/purchases-and-orders/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import useGetAllOrders, { type GetAllOrdersRequest } from "~/composables/api/orders/useGetAllOrders";
+import { useAppParams } from "~/composables/global/useAppParams";
 
 // meta
 
@@ -14,15 +15,9 @@ definePageMeta({
 
 // state
 
-const params = useUrlSearchParams("history") as GetAllOrdersRequest;
+const route = useRoute();
 
-const filters = computed(() => {
-    return {
-        sort: params.sort ?? "created_at",
-        status: params.status ?? "",
-        page: params.page ?? 1,
-    };
-});
+const { sort, status } = useAppParams();
 
 const tableHeads = ref(["شماره سفارش", "تاریخ ثبت", "تعداد اقلام", "مبلغ", "وضعیت", "عملیات"]);
 
@@ -72,13 +67,9 @@ const statusFilters = ref([
     },
 ]);
 
-// provide / inject
-
-provide("params", params);
-
 // queries
 
-const { data, isPending: purchasesIsPending } = useGetAllOrders(filters);
+const { data, isPending: purchasesIsPending } = useGetAllOrders();
 
 // computed
 
@@ -89,9 +80,9 @@ const purchases = computed(() => {
 const hasPurchases = computed(() => data.value && data.value.count > 0);
 
 const hasFilters = computed(() =>
-    Object.keys(params)
+    Object.keys(route.query)
         .filter((key) => key != "page")
-        .some((key) => (params as any)[key] != undefined)
+        .some((key) => (route.query as any)[key] != undefined)
 );
 
 const paginationData = computed(() => {
@@ -103,8 +94,8 @@ const paginationData = computed(() => {
 // methods
 
 const clearFilters = () => {
-    params.sort = undefined;
-    params.status = undefined;
+    sort.value = "";
+    status.value = "";
 };
 </script>
 
@@ -123,7 +114,7 @@ const clearFilters = () => {
                     >
                         <span class="text-xs lg:text-sm">ترتیب بر اساس</span>
                         <Select
-                            v-model="params.sort!"
+                            v-model="sort"
                             triggerRootClass="!py-2.5"
                             class="w-[6rem]"
                         >
@@ -156,7 +147,7 @@ const clearFilters = () => {
                     >
                         <span class="text-xs lg:text-sm">وضعیت</span>
                         <Select
-                            v-model="params.status!"
+                            v-model="status"
                             triggerRootClass="!py-2.5"
                             class="w-[6rem]"
                         >
diff --git a/frontend/pages/profile/tickets/index.vue b/frontend/pages/profile/tickets/index.vue
index 2a653af..4175093 100644
--- a/frontend/pages/profile/tickets/index.vue
+++ b/frontend/pages/profile/tickets/index.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 // imports
 
-import useGetAllTickets, { type GetAllTicketsRequest } from "~/composables/api/tickets/useGetAllTickets";
+import useGetAllTickets from "~/composables/api/tickets/useGetAllTickets";
+import { useAppParams } from "~/composables/global/useAppParams";
 
 // meta
 
@@ -16,20 +17,9 @@ definePageMeta({
 
 // state
 
-const params: GetAllTicketsRequest = useUrlSearchParams("history", {
-    initialValue: {
-        page: 1,
-    },
-    writeMode: "push",
-});
+const route = useRoute();
 
-const filters = computed(() => {
-    return {
-        sort: params.sort ?? "created_at",
-        status: params.status ?? "",
-        page: params.page ?? 1,
-    };
-});
+const { sort, status } = useAppParams();
 
 const tableHeads = ref(["دسته بندی", "موضوع", "تاریخ ایجاد و بروز رسانی", "وضعیت", "عملیات"]);
 
@@ -59,13 +49,9 @@ const statusFilters = ref([
     },
 ]);
 
-// provide / inject
-
-provide("params", params);
-
 // queries
 
-const { data, isPending: ticketsIsPending } = useGetAllTickets(filters);
+const { data, isPending: ticketsIsPending } = useGetAllTickets();
 
 // computed
 
@@ -76,9 +62,9 @@ const tickets = computed(() => {
 const hasTickets = computed(() => data.value && data.value.count > 0);
 
 const hasFilters = computed(() =>
-    Object.keys(params)
+    Object.keys(route.query)
         .filter((key) => key != "page")
-        .some((key) => (params as any)[key] != undefined)
+        .some((key) => (route.query as any)[key] != undefined)
 );
 
 const paginationData = computed(() => {
@@ -90,8 +76,8 @@ const paginationData = computed(() => {
 // methods
 
 const clearFilters = () => {
-    params.sort = undefined;
-    params.status = undefined;
+    sort.value = "";
+    status.value = "";
 };
 </script>
 
@@ -110,7 +96,7 @@ const clearFilters = () => {
                     >
                         <span class="text-xs lg:text-sm">ترتیب بر اساس</span>
                         <Select
-                            v-model="params.sort!"
+                            v-model="sort"
                             triggerRootClass="!py-2.5"
                             class="w-[6rem]"
                         >
@@ -143,7 +129,7 @@ const clearFilters = () => {
                     >
                         <span class="text-xs lg:text-sm">وضعیت</span>
                         <Select
-                            v-model="params.status!"
+                            v-model="status"
                             triggerRootClass="!py-2.5"
                             class="w-[6rem]"
                         >
diff --git a/frontend/pages/resellers/[...slug].vue b/frontend/pages/resellers/[...slug].vue
index 2c687be..62d7f6f 100644
--- a/frontend/pages/resellers/[...slug].vue
+++ b/frontend/pages/resellers/[...slug].vue
@@ -1,76 +1,46 @@
 <script setup lang="ts">
-// import
-
-import useGetResellersProducts, {
-    type GetResellersProductsFilters,
-} from "~/composables/api/resellers/useGetResellersProducts";
-import { PRODUCT_RANGE } from "~/constants";
-
-// state
-
-const route = useRoute();
-
-useSeoMeta({
-    title: "محصولات",
-});
+// meta
 
 definePageMeta({
     validate: (route) => {
         if (Array.isArray(route.params.slug)) {
-            return route.params.slug.length === 2 && route.params.slug[0] === "category";
+            return route.params.slug.length === 2 && route.params.slug[0].startsWith("category");
         }
 
         return true;
     },
 });
 
-const params: GetResellersProductsFilters = useUrlSearchParams("history", {
-    removeFalsyValues: true,
-    removeNullishValues: true,
-});
+// import
 
-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: Array.isArray(route.params.slug) ? route.params.slug[1] ?? undefined : undefined,
-        page: params.page ?? 1,
-    };
-});
+import { useAppParams } from "~/composables/global/useAppParams";
+import useGetResellersProducts from "~/composables/api/resellers/useGetResellersProducts";
 
-const search = ref(params.search ?? "");
-const searchDebounced = refDebounced(search, 1000);
+// state
 
-// provide / inject
-
-provide("params", params);
+const { search } = useAppParams();
 
 // queries
 
-const { data, isLoading: productsIsLoading } = useGetResellersProducts(filters);
+const { data, isLoading: productsIsLoading } = useGetResellersProducts();
+
+// computed
 
 const products = computed(() => {
     return data.value?.results.flat();
 });
 
 const paginationData = computed(() => {
-    return data!.value?.results.map((_, i: number) => {
+    return data.value?.results.map((_, i: number) => {
         return { type: "page", value: i };
     });
 });
 
-// watch
+// seo
 
-watch(
-    () => searchDebounced.value,
-    (newValue) => {
-        params.search = newValue;
-    }
-);
+useSeoMeta({
+    title: "محصولات",
+});
 </script>
 
 <template>