From 1f968bb4fbd409ffda46f6b30abda0ee02bc1ca8 Mon Sep 17 00:00:00 2001 From: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com> Date: Fri, 24 Jan 2025 13:50:35 +0100 Subject: [PATCH 1/2] feat(dashboard): Migrate Return Reasons table to DataTable --- .../src/hooks/api/return-reasons.tsx | 27 ++ .../use-return-reason-table-columns.tsx | 32 --- .../query/use-return-reason-table-query.tsx | 32 --- .../src/i18n/translations/$schema.json | 34 +++ .../dashboard/src/i18n/translations/en.json | 10 + .../hooks/use-delete-return-reason-action.tsx | 40 --- .../return-reason-list-table.tsx | 235 ++++++++++++------ 7 files changed, 225 insertions(+), 185 deletions(-) delete mode 100644 packages/admin/dashboard/src/hooks/table/columns/use-return-reason-table-columns.tsx delete mode 100644 packages/admin/dashboard/src/hooks/table/query/use-return-reason-table-query.tsx delete mode 100644 packages/admin/dashboard/src/routes/return-reasons/common/hooks/use-delete-return-reason-action.tsx diff --git a/packages/admin/dashboard/src/hooks/api/return-reasons.tsx b/packages/admin/dashboard/src/hooks/api/return-reasons.tsx index ee67cf9d53121..4f06e142b8315 100644 --- a/packages/admin/dashboard/src/hooks/api/return-reasons.tsx +++ b/packages/admin/dashboard/src/hooks/api/return-reasons.tsx @@ -130,3 +130,30 @@ export const useDeleteReturnReason = ( ...options, }) } + +export const useDeleteReturnReasonLazy = ( + options?: UseMutationOptions< + HttpTypes.AdminReturnReasonDeleteResponse, + FetchError, + string + > +) => { + return useMutation({ + mutationFn: (id) => sdk.admin.returnReason.delete(id), + onSuccess: (data, variables, context) => { + queryClient.invalidateQueries({ + queryKey: returnReasonsQueryKeys.lists(), + }) + queryClient.invalidateQueries({ + queryKey: returnReasonsQueryKeys.detail(variables), + }) + + queryClient.invalidateQueries({ + queryKey: returnReasonsQueryKeys.details(), + }) + + options?.onSuccess?.(data, variables, context) + }, + ...options, + }) +} diff --git a/packages/admin/dashboard/src/hooks/table/columns/use-return-reason-table-columns.tsx b/packages/admin/dashboard/src/hooks/table/columns/use-return-reason-table-columns.tsx deleted file mode 100644 index a2543047920d9..0000000000000 --- a/packages/admin/dashboard/src/hooks/table/columns/use-return-reason-table-columns.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { HttpTypes } from "@medusajs/types" -import { Badge } from "@medusajs/ui" -import { createColumnHelper } from "@tanstack/react-table" -import { useMemo } from "react" - -const columnHelper = createColumnHelper() - -export const useReturnReasonTableColumns = () => { - return useMemo( - () => [ - columnHelper.accessor("value", { - cell: ({ getValue }) => {getValue()}, - }), - columnHelper.accessor("label", { - cell: ({ row }) => { - const { label, description } = row.original - return ( -
-
- {label} - - {description ? description : "-"} - -
-
- ) - }, - }), - ], - [] - ) -} diff --git a/packages/admin/dashboard/src/hooks/table/query/use-return-reason-table-query.tsx b/packages/admin/dashboard/src/hooks/table/query/use-return-reason-table-query.tsx deleted file mode 100644 index 5aaabaf3a328a..0000000000000 --- a/packages/admin/dashboard/src/hooks/table/query/use-return-reason-table-query.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { HttpTypes } from "@medusajs/types" -import { useQueryParams } from "../../use-query-params" - -type UseReturnReasonTableQueryProps = { - prefix?: string - pageSize?: number -} - -export const useReturnReasonTableQuery = ({ - prefix, - pageSize = 20, -}: UseReturnReasonTableQueryProps) => { - const queryObject = useQueryParams( - ["offset", "q", "order", "created_at", "updated_at"], - prefix - ) - - const { offset, q, order, created_at, updated_at } = queryObject - const searchParams: HttpTypes.AdminReturnReasonListParams = { - 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, - } -} diff --git a/packages/admin/dashboard/src/i18n/translations/$schema.json b/packages/admin/dashboard/src/i18n/translations/$schema.json index 4074870b152ae..7e250913b54eb 100644 --- a/packages/admin/dashboard/src/i18n/translations/$schema.json +++ b/packages/admin/dashboard/src/i18n/translations/$schema.json @@ -9528,6 +9528,39 @@ "subtitle": { "type": "string" }, + "list": { + "type": "object", + "properties": { + "empty": { + "type": "object", + "properties": { + "heading": { + "type": "string" + }, + "description": { + "type": "string" + } + }, + "required": ["heading", "description"], + "additionalProperties": false + }, + "filtered": { + "type": "object", + "properties": { + "heading": { + "type": "string" + }, + "description": { + "type": "string" + } + }, + "required": ["heading", "description"], + "additionalProperties": false + } + }, + "required": ["empty", "filtered"], + "additionalProperties": false + }, "calloutHint": { "type": "string" }, @@ -9635,6 +9668,7 @@ "required": [ "domain", "subtitle", + "list", "calloutHint", "editReason", "create", diff --git a/packages/admin/dashboard/src/i18n/translations/en.json b/packages/admin/dashboard/src/i18n/translations/en.json index 211c8d5855749..97a522a158f06 100644 --- a/packages/admin/dashboard/src/i18n/translations/en.json +++ b/packages/admin/dashboard/src/i18n/translations/en.json @@ -2556,6 +2556,16 @@ "returnReasons": { "domain": "Return Reasons", "subtitle": "Manage reasons for returned items.", + "list": { + "empty": { + "heading": "No return reasons", + "description": "There are no return reasons to display." + }, + "filtered": { + "heading": "No results", + "description": "No return reasons match the current filter criteria." + } + }, "calloutHint": "Manage the reasons to categorize returns.", "editReason": "Edit Return Reason", "create": { diff --git a/packages/admin/dashboard/src/routes/return-reasons/common/hooks/use-delete-return-reason-action.tsx b/packages/admin/dashboard/src/routes/return-reasons/common/hooks/use-delete-return-reason-action.tsx deleted file mode 100644 index 9b027b4badccf..0000000000000 --- a/packages/admin/dashboard/src/routes/return-reasons/common/hooks/use-delete-return-reason-action.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { AdminReturnReason } from "@medusajs/types" -import { toast, usePrompt } from "@medusajs/ui" -import { useTranslation } from "react-i18next" -import { useDeleteReturnReason } from "../../../../hooks/api/return-reasons" - -export const useDeleteReturnReasonAction = ({ - id, - label, -}: AdminReturnReason) => { - const { t } = useTranslation() - const prompt = usePrompt() - - const { mutateAsync } = useDeleteReturnReason(id) - - const handleDelete = async () => { - const result = await prompt({ - title: t("general.areYouSure"), - description: t("returnReasons.delete.confirmation", { - label, - }), - confirmText: t("actions.delete"), - cancelText: t("actions.cancel"), - }) - - if (!result) { - return - } - - await mutateAsync(undefined, { - onSuccess: () => { - toast.success(t("returnReasons.delete.successToast", { label })) - }, - onError: (e) => { - toast.error(e.message) - }, - }) - } - - return handleDelete -} diff --git a/packages/admin/dashboard/src/routes/return-reasons/return-reason-list/components/return-reason-list-table/return-reason-list-table.tsx b/packages/admin/dashboard/src/routes/return-reasons/return-reason-list/components/return-reason-list-table/return-reason-list-table.tsx index 52c8e63d09423..5978c227c4511 100644 --- a/packages/admin/dashboard/src/routes/return-reasons/return-reason-list/components/return-reason-list-table/return-reason-list-table.tsx +++ b/packages/admin/dashboard/src/routes/return-reasons/return-reason-list/components/return-reason-list-table/return-reason-list-table.tsx @@ -1,25 +1,31 @@ import { PencilSquare, Trash } from "@medusajs/icons" import { HttpTypes } from "@medusajs/types" -import { Button, Container, Heading, Text } from "@medusajs/ui" +import { + Badge, + Container, + createDataTableColumnHelper, + DataTableEmptyStateProps, + toast, + usePrompt, +} from "@medusajs/ui" import { keepPreviousData } from "@tanstack/react-query" -import { createColumnHelper } from "@tanstack/react-table" -import { useMemo } from "react" +import { useCallback, useMemo } from "react" import { useTranslation } from "react-i18next" -import { Link } from "react-router-dom" +import { useNavigate } from "react-router-dom" -import { ActionMenu } from "../../../../../components/common/action-menu" -import { _DataTable } from "../../../../../components/table/data-table" -import { useReturnReasons } from "../../../../../hooks/api/return-reasons" -import { useReturnReasonTableColumns } from "../../../../../hooks/table/columns" -import { useReturnReasonTableQuery } from "../../../../../hooks/table/query" -import { useDataTable } from "../../../../../hooks/use-data-table" -import { useDeleteReturnReasonAction } from "../../../common/hooks/use-delete-return-reason-action" +import { DataTable } from "../../../../../components/data-table" +import { useDataTableDateFilters } from "../../../../../components/data-table/hooks/general/use-data-table-date-filters" +import { + useDeleteReturnReasonLazy, + useReturnReasons, +} from "../../../../../hooks/api/return-reasons" +import { useQueryParams } from "../../../../../hooks/use-query-params" const PAGE_SIZE = 20 export const ReturnReasonListTable = () => { const { t } = useTranslation() - const { searchParams, raw } = useReturnReasonTableQuery({ + const searchParams = useReturnReasonTableQuery({ pageSize: PAGE_SIZE, }) @@ -31,98 +37,165 @@ export const ReturnReasonListTable = () => { ) const columns = useColumns() - - const { table } = useDataTable({ - data: return_reasons, - columns, - count, - getRowId: (row) => row.id, - pageSize: PAGE_SIZE, - }) - + const filters = useFilters() + const emptyState = useEmptyState() if (isError) { throw error } return ( - -
-
- {t("returnReasons.domain")} - - {t("returnReasons.subtitle")} - -
- -
- <_DataTable - table={table} - queryObject={raw} - count={count} - isLoading={isPending} + + row.id} + heading={t("returnReasons.domain")} + // subtitle={t("returnReasons.subtitle")} + action={{ + label: t("actions.create"), + to: "create", + }} + rowCount={count} + isLoading={isPending} pageSize={PAGE_SIZE} - noHeader={true} - pagination - search + emptyState={emptyState} /> ) } -type ReturnReasonRowActionsProps = { - returnReason: HttpTypes.AdminReturnReason -} - -const ReturnReasonRowActions = ({ - returnReason, -}: ReturnReasonRowActionsProps) => { +const useEmptyState = (): DataTableEmptyStateProps => { const { t } = useTranslation() - const handleDelete = useDeleteReturnReasonAction(returnReason) - return ( - , - label: t("actions.edit"), - to: `${returnReason.id}/edit`, - }, - ], - }, - { - actions: [ - { - icon: , - label: t("actions.delete"), - onClick: handleDelete, - }, - ], - }, - ]} - /> + return { + empty: { + heading: t("returnReasons.list.empty.heading"), + description: t("returnReasons.list.empty.description"), + }, + filtered: { + heading: t("returnReasons.list.filtered.heading"), + description: t("returnReasons.list.filtered.description"), + }, + } +} + +const useReturnReasonTableQuery = ({ + pageSize, + prefix, +}: { + pageSize: number + prefix?: string +}) => { + const { offset, q, order, created_at, updated_at } = useQueryParams( + ["offset", "q", "order", "created_at", "updated_at"], + prefix ) + + const searchParams: HttpTypes.AdminReturnReasonListParams = { + 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 +} + +const useFilters = () => { + const dateFilters = useDataTableDateFilters() + + return dateFilters } -const columnHelper = createColumnHelper() +const columnHelper = createDataTableColumnHelper() const useColumns = () => { - const base = useReturnReasonTableColumns() + const { t } = useTranslation() + const prompt = usePrompt() + const navigate = useNavigate() + + const { mutateAsync } = useDeleteReturnReasonLazy() + + const handleDelete = useCallback( + async (returnReason: HttpTypes.AdminReturnReason) => { + const result = await prompt({ + title: t("general.areYouSure"), + description: t("returnReasons.delete.confirmation", { + label: returnReason.label, + }), + confirmText: t("actions.delete"), + cancelText: t("actions.cancel"), + }) + + if (!result) { + return + } + + await mutateAsync(returnReason.id, { + onSuccess: () => { + toast.success( + t("returnReasons.delete.successToast", { + label: returnReason.label, + }) + ) + }, + onError: (e) => { + toast.error(e.message) + }, + }) + }, + [mutateAsync, prompt, t] + ) return useMemo( () => [ - ...base, - columnHelper.display({ - id: "actions", - cell: ({ row }) => ( - - ), + columnHelper.accessor("label", { + header: t("fields.label"), + enableSorting: true, + sortLabel: t("fields.label"), + sortAscLabel: t("filters.sorting.alphabeticallyAsc"), + sortDescLabel: t("filters.sorting.alphabeticallyDesc"), + }), + columnHelper.accessor("value", { + header: t("fields.value"), + cell: ({ getValue }) => {getValue()}, + enableSorting: true, + sortLabel: t("fields.value"), + sortAscLabel: t("filters.sorting.alphabeticallyAsc"), + sortDescLabel: t("filters.sorting.alphabeticallyDesc"), + }), + columnHelper.accessor("description", { + header: t("fields.description"), + enableSorting: true, + sortLabel: t("fields.description"), + sortAscLabel: t("filters.sorting.alphabeticallyAsc"), + sortDescLabel: t("filters.sorting.alphabeticallyDesc"), + maxSize: 250, + }), + columnHelper.action({ + actions: (ctx) => { + return [ + [ + { + label: t("actions.edit"), + onClick: () => navigate(`${ctx.row.original.id}/edit`), + icon: , + }, + ], + [ + { + label: t("actions.delete"), + onClick: () => handleDelete(ctx.row.original), + icon: , + }, + ], + ] + }, }), ], - [base] + [t, navigate, handleDelete] ) } From 4f91f219a51923bf489f9213577af7e902b5a938 Mon Sep 17 00:00:00 2001 From: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com> Date: Fri, 24 Jan 2025 14:01:37 +0100 Subject: [PATCH 2/2] fix exports --- packages/admin/dashboard/src/hooks/table/columns/index.ts | 2 -- packages/admin/dashboard/src/hooks/table/query/index.ts | 1 - 2 files changed, 3 deletions(-) diff --git a/packages/admin/dashboard/src/hooks/table/columns/index.ts b/packages/admin/dashboard/src/hooks/table/columns/index.ts index 5e367512d125f..9cd9a29025f15 100644 --- a/packages/admin/dashboard/src/hooks/table/columns/index.ts +++ b/packages/admin/dashboard/src/hooks/table/columns/index.ts @@ -7,7 +7,5 @@ export * from "./use-product-table-columns" export * from "./use-product-tag-table-columns" export * from "./use-product-type-table-columns" export * from "./use-region-table-columns" -export * from "./use-return-reason-table-columns" export * from "./use-sales-channel-table-columns" export * from "./use-tax-rates-table-columns" - diff --git a/packages/admin/dashboard/src/hooks/table/query/index.ts b/packages/admin/dashboard/src/hooks/table/query/index.ts index 2c6bd485e1636..1ced60c78f850 100644 --- a/packages/admin/dashboard/src/hooks/table/query/index.ts +++ b/packages/admin/dashboard/src/hooks/table/query/index.ts @@ -7,7 +7,6 @@ export * from "./use-product-table-query" export * from "./use-product-tag-table-query" export * from "./use-product-type-table-query" export * from "./use-region-table-query" -export * from "./use-return-reason-table-query" export * from "./use-sales-channel-table-query" export * from "./use-shipping-option-table-query" export * from "./use-tax-rate-table-query"