feat(dashboard): Rework route modals (#6459)

**What** - Reworks how RouteModals are setup. **Why** - With the current implementation it was possible to create a race-condition in the logic that handled displaying a prompt if the user tried to close a modal, while a child form was dirty. The race condition would cause a new prompt to spawn each time the user clicked the screen, making it impossible to dismiss the prompt. This only occurred in a few specific cases. **How** - Creates two new components: RouteFocusModal and RouteDrawer. The component shares logic for handling their own open/closed state, and now accept a form prop, that allows the modals to keep track of whether their child form is dirty. This change ensures that race conditions cannot occur, and that the prompt always only renders once when needed.
2024-02-22 09:03:40 +00:00
parent add861d205
commit 72a17d6cd7
88 changed files with 1750 additions and 1799 deletions
@@ -0,0 +1,50 @@
+import { Region } from "@medusajs/medusa"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+
+import {
+  CountriesCell,
+  CountriesHeader,
+} from "../../../components/table/table-cells/region/countries-cell"
+import {
+  FulfillmentProvidersCell,
+  FulfillmentProvidersHeader,
+} from "../../../components/table/table-cells/region/fulfillment-providers-cell"
+import {
+  PaymentProvidersCell,
+  PaymentProvidersHeader,
+} from "../../../components/table/table-cells/region/payment-providers-cell"
+import {
+  RegionCell,
+  RegionHeader,
+} from "../../../components/table/table-cells/region/region-cell"
+
+const columnHelper = createColumnHelper<Region>()
+
+export const useRegionTableColumns = () => {
+  return useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: () => <RegionHeader />,
+        cell: ({ getValue }) => <RegionCell name={getValue()} />,
+      }),
+      columnHelper.accessor("countries", {
+        header: () => <CountriesHeader />,
+        cell: ({ getValue }) => <CountriesCell countries={getValue()} />,
+      }),
+      columnHelper.accessor("payment_providers", {
+        header: () => <PaymentProvidersHeader />,
+        cell: ({ getValue }) => (
+          <PaymentProvidersCell paymentProviders={getValue()} />
+        ),
+      }),
+      columnHelper.accessor("fulfillment_providers", {
+        header: () => <FulfillmentProvidersHeader />,
+        cell: ({ getValue }) => (
+          <FulfillmentProvidersCell fulfillmentProviders={getValue()} />
+        ),
+      }),
+    ],
+    []
+  )
+}
@@ -0,0 +1,19 @@
+import { useTranslation } from "react-i18next"
+import { Filter } from "../../../components/table/data-table"
+
+export const useRegionTableFilters = () => {
+  const { t } = useTranslation()
+
+  const dateFilters: Filter[] = [
+    { label: t("fields.createdAt"), key: "created_at" },
+    { label: t("fields.updatedAt"), key: "updated_at" },
+  ].map((f) => ({
+    key: f.key,
+    label: f.label,
+    type: "date",
+  }))
+
+  const filters = [...dateFilters]
+
+  return filters
+}
@@ -0,0 +1,33 @@
+import { AdminGetRegionsParams } from "@medusajs/medusa"
+import { useQueryParams } from "../../use-query-params"
+
+type UseRegionTableQueryProps = {
+  prefix?: string
+  pageSize?: number
+}
+
+export const useRegionTableQuery = ({
+  prefix,
+  pageSize = 20,
+}: UseRegionTableQueryProps) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at"],
+    prefix
+  )
+
+  const { offset, q, order, created_at, updated_at } = queryObject
+
+  const searchParams: AdminGetRegionsParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    order,
+    created_at: created_at ? JSON.parse(created_at) : undefined,
+    updated_at: updated_at ? JSON.parse(updated_at) : undefined,
+    q,
+  }
+
+  return {
+    searchParams,
+    raw: queryObject,
+  }
+}