feat(dashboard,types): Translate all OrderBy filters (#9691)

Resolves CC-616

**Note**
- I have added some missing fields to a couple of types, to resolve TS errors in the dashboard.
- For the ApiKey types I have left the created_at, updated_at, etc. as type Date, as changing them to string, caused @medusajs/medusa to fail building. We need to clean up the types at a later time.
This commit is contained in:
Kasper Fabricius Kristensen authored and GitHub committed 2024-10-21 18:09:55 +00:00
1 parent e81dbc754c
commit 9f53683508
66 files changed
+474 -188

No files matched your search

@@ -4,8 +4,13 @@ import { useState } from "react"
import { useTranslation } from "react-i18next" import { useTranslation } from "react-i18next"
import { useSearchParams } from "react-router-dom" import { useSearchParams } from "react-router-dom"
export type DataTableOrderByKey<TData> = {
key: keyof TData
label: string
}
type DataTableOrderByProps<TData> = { type DataTableOrderByProps<TData> = {
keys: (keyof TData)[] keys: DataTableOrderByKey<TData>[]
prefix?: string prefix?: string
} }
@@ -38,18 +43,6 @@ const initState = (params: URLSearchParams, prefix?: string): SortState => {
} }
} }
const formatKey = (key: string) => {
const words = key.split("_")
const formattedWords = words.map((word, index) => {
if (index === 0) {
return word.charAt(0).toUpperCase() + word.slice(1)
} else {
return word
}
})
return formattedWords.join(" ")
}
export const DataTableOrderBy = <TData,>({ export const DataTableOrderBy = <TData,>({
keys, keys,
prefix, prefix,
@@ -116,7 +109,7 @@ export const DataTableOrderBy = <TData,>({
onValueChange={handleKeyChange} onValueChange={handleKeyChange}
> >
{keys.map((key) => { {keys.map((key) => {
const stringKey = String(key) const stringKey = String(key.key)
return ( return (
<DropdownMenu.RadioItem <DropdownMenu.RadioItem
@@ -124,7 +117,7 @@ export const DataTableOrderBy = <TData,>({
value={stringKey} value={stringKey}
onSelect={(event) => event.preventDefault()} onSelect={(event) => event.preventDefault()}
> >
{formatKey(stringKey)} {key.label}
</DropdownMenu.RadioItem> </DropdownMenu.RadioItem>
) )
})} })}
@@ -1,21 +1,21 @@
import { Filter } from ".." import { Filter } from ".."
import { DataTableFilter } from "../data-table-filter" import { DataTableFilter } from "../data-table-filter"
import { DataTableOrderBy } from "../data-table-order-by" import { DataTableOrderBy, DataTableOrderByKey } from "../data-table-order-by"
import { DataTableSearch } from "../data-table-search" import { DataTableSearch } from "../data-table-search"
export interface DataTableQueryProps { export interface DataTableQueryProps<TData> {
search?: boolean | "autofocus" search?: boolean | "autofocus"
orderBy?: (string | number)[] orderBy?: DataTableOrderByKey<TData>[]
filters?: Filter[] filters?: Filter[]
prefix?: string prefix?: string
} }
export const DataTableQuery = ({ export const DataTableQuery = <TData,>({
search, search,
orderBy, orderBy,
filters, filters,
prefix, prefix,
}: DataTableQueryProps) => { }: DataTableQueryProps<TData>) => {
return ( return (
(search || orderBy || filters || prefix) && ( (search || orderBy || filters || prefix) && (
<div className="flex items-start justify-between gap-x-4 px-6 py-4"> <div className="flex items-start justify-between gap-x-4 px-6 py-4">
@@ -7,7 +7,7 @@ import { DataTableRoot, DataTableRootProps } from "./data-table-root"
interface DataTableProps<TData> interface DataTableProps<TData>
extends Omit<DataTableRootProps<TData>, "noResults">, extends Omit<DataTableRootProps<TData>, "noResults">,
DataTableQueryProps { DataTableQueryProps<TData> {
isLoading?: boolean isLoading?: boolean
pageSize: number pageSize: number
queryObject?: Record<string, any> queryObject?: Record<string, any>
@@ -16,7 +16,7 @@ interface DataTableProps<TData>
// Maybe we should use the memoized version of DataTableRoot // Maybe we should use the memoized version of DataTableRoot
// const MemoizedDataTableRoot = memo(DataTableRoot) as typeof DataTableRoot // const MemoizedDataTableRoot = memo(DataTableRoot) as typeof DataTableRoot
const MemoizedDataTableQuery = memo(DataTableQuery) const MemoizedDataTableQuery = memo(DataTableQuery) as typeof DataTableQuery
export const DataTable = <TData,>({ export const DataTable = <TData,>({
table, table,
@@ -1,4 +1,4 @@
import { PromotionDTO } from "@medusajs/types" import { HttpTypes } from "@medusajs/types"
import { useTranslation } from "react-i18next" import { useTranslation } from "react-i18next"
import { import {
getPromotionStatus, getPromotionStatus,
@@ -7,7 +7,7 @@ import {
import { StatusCell as StatusCell_ } from "../../common/status-cell" import { StatusCell as StatusCell_ } from "../../common/status-cell"
type PromotionCellProps = { type PromotionCellProps = {
promotion: PromotionDTO promotion: HttpTypes.AdminPromotion
} }
type StatusColors = "grey" | "orange" | "green" | "red" type StatusColors = "grey" | "orange" | "green" | "red"
type StatusMap = Record<string, [StatusColors, string]> type StatusMap = Record<string, [StatusColors, string]>
@@ -1,5 +1,5 @@
import { PromotionDTO } from "@medusajs/types" import { HttpTypes } from "@medusajs/types"
import { ColumnDef, createColumnHelper } from "@tanstack/react-table" import { createColumnHelper } from "@tanstack/react-table"
import { useMemo } from "react" import { useMemo } from "react"
import { useTranslation } from "react-i18next" import { useTranslation } from "react-i18next"
@@ -13,7 +13,7 @@ import {
} from "../../../components/table/table-cells/common/text-cell" } from "../../../components/table/table-cells/common/text-cell"
import { StatusCell } from "../../../components/table/table-cells/promotion/status-cell" import { StatusCell } from "../../../components/table/table-cells/promotion/status-cell"
const columnHelper = createColumnHelper<PromotionDTO>() const columnHelper = createColumnHelper<HttpTypes.AdminPromotion>()
export const usePromotionTableColumns = () => { export const usePromotionTableColumns = () => {
const { t } = useTranslation() const { t } = useTranslation()
@@ -44,6 +44,6 @@ export const usePromotionTableColumns = () => {
cell: ({ row }) => <StatusCell promotion={row.original} />, cell: ({ row }) => <StatusCell promotion={row.original} />,
}), }),
], ],
[] [t]
) as ColumnDef<PromotionDTO>[] )
} }
@@ -847,7 +847,8 @@
"groups": "Groups" "groups": "Groups"
}, },
"registered": "Registered", "registered": "Registered",
"guest": "Guest" "guest": "Guest",
"hasAccount": "Has account"
}, },
"customerGroups": { "customerGroups": {
"domain": "Customer Groups", "domain": "Customer Groups",
@@ -1268,6 +1269,11 @@
"confirmed": "Order edit #{{editId}} confirmed" "confirmed": "Order edit #{{editId}} confirmed"
} }
} }
},
"fields": {
"displayId": "Display ID",
"refundableAmount": "Refundable amount",
"returnableQuantity": "Returnable quantity"
} }
}, },
"draftOrders": { "draftOrders": {
@@ -117,7 +117,20 @@ export const ApiKeySalesChannelSection = ({
isLoading={isLoading} isLoading={isLoading}
queryObject={raw} queryObject={raw}
navigateTo={(row) => `/settings/sales-channels/${row.id}`} navigateTo={(row) => `/settings/sales-channels/${row.id}`}
orderBy={["name", "created_at", "updated_at"]} orderBy={[
{
key: "name",
label: t("fields.name"),
},
{
key: "created_at",
label: t("fields.createdAt"),
},
{
key: "updated_at",
label: t("fields.updatedAt"),
},
]}
commands={[ commands={[
{ {
action: handleRemove, action: handleRemove,
@@ -76,7 +76,12 @@ export const ApiKeyManagementListTable = ({
columns={columns} columns={columns}
count={count} count={count}
pageSize={PAGE_SIZE} pageSize={PAGE_SIZE}
orderBy={["title", "created_at", "updated_at", "revoked_at"]} orderBy={[
{ key: "title", label: t("fields.title") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
{ key: "revoked_at", label: t("fields.revokedAt") },
]}
navigateTo={(row) => row.id} navigateTo={(row) => row.id}
pagination pagination
search search
@@ -149,7 +149,11 @@ export const ApiKeySalesChannelsForm = ({
search="autofocus" search="autofocus"
isLoading={isLoading} isLoading={isLoading}
queryObject={raw} queryObject={raw}
orderBy={["name", "created_at", "updated_at"]} orderBy={[
{ key: "name", label: t("fields.name") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
layout="fill" layout="fill"
noRecords={{ noRecords={{
message: t( message: t(
@@ -1,5 +1,5 @@
import { zodResolver } from "@hookform/resolvers/zod" import { zodResolver } from "@hookform/resolvers/zod"
import { AdminCampaign, PromotionDTO } from "@medusajs/types" import { AdminCampaign, HttpTypes } from "@medusajs/types"
import { Button, Checkbox, Hint, Tooltip, toast } from "@medusajs/ui" import { Button, Checkbox, Hint, Tooltip, toast } from "@medusajs/ui"
import { keepPreviousData } from "@tanstack/react-query" import { keepPreviousData } from "@tanstack/react-query"
import { import {
@@ -131,7 +131,12 @@ export const AddCampaignPromotionsForm = ({
pageSize={PAGE_SIZE} pageSize={PAGE_SIZE}
isLoading={isLoading} isLoading={isLoading}
filters={filters} filters={filters}
orderBy={["title", "status", "created_at", "updated_at"]} orderBy={[
{ key: "code", label: t("fields.code") },
{ key: "type", label: t("fields.type") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
queryObject={raw} queryObject={raw}
layout="fill" layout="fill"
pagination pagination
@@ -158,7 +163,7 @@ export const AddCampaignPromotionsForm = ({
) )
} }
const columnHelper = createColumnHelper<PromotionDTO>() const columnHelper = createColumnHelper<HttpTypes.AdminPromotion>()
const useColumns = () => { const useColumns = () => {
const base = usePromotionTableColumns() const base = usePromotionTableColumns()
@@ -100,12 +100,10 @@ export const CampaignPromotionSection = ({
search search
pagination pagination
orderBy={[ orderBy={[
"email", { key: "code", label: t("fields.code") },
"first_name", { key: "type", label: t("fields.type") },
"last_name", { key: "created_at", label: t("fields.createdAt") },
"has_account", { key: "updated_at", label: t("fields.updatedAt") },
"created_at",
"updated_at",
]} ]}
queryObject={raw} queryObject={raw}
commands={[ commands={[
@@ -68,7 +68,11 @@ export const CampaignListTable = () => {
navigateTo={(row) => row.id} navigateTo={(row) => row.id}
isLoading={isLoading} isLoading={isLoading}
queryObject={raw} queryObject={raw}
orderBy={["name", "created_at", "updated_at"]} orderBy={[
{ key: "name", label: t("fields.name") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
/> />
</Container> </Container>
) )
@@ -97,7 +101,9 @@ const CampaignActions = ({ campaign }: { campaign: AdminCampaign }) => {
await mutateAsync(undefined, { await mutateAsync(undefined, {
onSuccess: () => { onSuccess: () => {
toast.success(t("campaigns.toast.delete")) toast.success(
t("campaigns.delete.successToast", { name: campaign.name })
)
}, },
onError: (e) => { onError: (e) => {
toast.error(e.message) toast.error(e.message)
@@ -129,7 +129,11 @@ export const CategoryProductSection = ({
table={table} table={table}
filters={filters} filters={filters}
columns={columns} columns={columns}
orderBy={["title", "created_at", "updated_at"]} orderBy={[
{ key: "title", label: t("fields.title") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
pageSize={PAGE_SIZE} pageSize={PAGE_SIZE}
count={count} count={count}
navigateTo={(row) => `/products/${row.id}`} navigateTo={(row) => `/products/${row.id}`}
@@ -166,7 +166,11 @@ export const EditCategoryProductsForm = ({
count={count} count={count}
queryObject={raw} queryObject={raw}
filters={filters} filters={filters}
orderBy={["title", "created_at", "updated_at"]} orderBy={[
{ key: "title", label: t("fields.title") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
prefix={PREFIX} prefix={PREFIX}
isLoading={isPending} isLoading={isPending}
layout="fill" layout="fill"
@@ -175,7 +175,11 @@ export const AddProductsToCollectionForm = ({
count={count} count={count}
queryObject={raw} queryObject={raw}
filters={filters} filters={filters}
orderBy={["title", "created_at", "updated_at"]} orderBy={[
{ key: "title", label: t("fields.title") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
prefix={PREFIX} prefix={PREFIX}
isLoading={isLoading} isLoading={isLoading}
layout="fill" layout="fill"
@@ -124,7 +124,11 @@ export const CollectionProductSection = ({
count={count} count={count}
filters={filters} filters={filters}
isLoading={isLoading} isLoading={isLoading}
orderBy={["title", "created_at", "updated_at"]} orderBy={[
{ key: "title", label: t("fields.title") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
queryObject={raw} queryObject={raw}
commands={[ commands={[
{ {
@@ -66,7 +66,12 @@ export const CollectionListTable = () => {
pageSize={PAGE_SIZE} pageSize={PAGE_SIZE}
count={count} count={count}
filters={filters} filters={filters}
orderBy={["title", "handle", "created_at", "updated_at"]} orderBy={[
{ key: "title", label: t("fields.title") },
{ key: "handle", label: t("fields.handle") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
search search
navigateTo={(row) => `/collections/${row.original.id}`} navigateTo={(row) => `/collections/${row.original.id}`}
queryObject={raw} queryObject={raw}
@@ -160,12 +160,12 @@ export const AddCustomersForm = ({
count={count} count={count}
filters={filters} filters={filters}
orderBy={[ orderBy={[
"email", { key: "email", label: t("fields.email") },
"first_name", { key: "first_name", label: t("fields.firstName") },
"last_name", { key: "last_name", label: t("fields.lastName") },
"has_account", { key: "has_account", label: t("customers.hasAccount") },
"created_at", { key: "created_at", label: t("fields.createdAt") },
"updated_at", { key: "updated_at", label: t("fields.updatedAt") },
]} ]}
isLoading={isLoading} isLoading={isLoading}
layout="fill" layout="fill"
@@ -106,12 +106,12 @@ export const CustomerGroupCustomerSection = ({
search search
pagination pagination
orderBy={[ orderBy={[
"email", { key: "email", label: t("fields.email") },
"first_name", { key: "first_name", label: t("fields.firstName") },
"last_name", { key: "last_name", label: t("fields.lastName") },
"has_account", { key: "has_account", label: t("customers.hasAccount") },
"created_at", { key: "created_at", label: t("fields.createdAt") },
"updated_at", { key: "updated_at", label: t("fields.updatedAt") },
]} ]}
queryObject={raw} queryObject={raw}
commands={[ commands={[
@@ -78,7 +78,11 @@ export const CustomerGroupListTable = () => {
search search
pagination pagination
navigateTo={(row) => `/customer-groups/${row.original.id}`} navigateTo={(row) => `/customer-groups/${row.original.id}`}
orderBy={["name", "created_at", "updated_at"]} orderBy={[
{ key: "name", label: t("fields.name") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
queryObject={raw} queryObject={raw}
isLoading={isLoading} isLoading={isLoading}
/> />
@@ -137,7 +137,11 @@ export const CustomerGroupSection = ({
filters={filters} filters={filters}
search search
pagination pagination
orderBy={["name", "created_at", "updated_at"]} orderBy={[
{ key: "name", label: t("fields.name") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
commands={[ commands={[
{ {
action: handleRemove, action: handleRemove,
@@ -1,4 +1,5 @@
import { ArrowPath } from "@medusajs/icons" import { ArrowPath } from "@medusajs/icons"
import { HttpTypes } from "@medusajs/types"
import { Button, Container, Heading } from "@medusajs/ui" import { Button, Container, Heading } from "@medusajs/ui"
import { keepPreviousData } from "@tanstack/react-query" import { keepPreviousData } from "@tanstack/react-query"
import { createColumnHelper } from "@tanstack/react-table" import { createColumnHelper } from "@tanstack/react-table"
@@ -11,7 +12,6 @@ import { useOrderTableColumns } from "../../../../../hooks/table/columns/use-ord
import { useOrderTableFilters } from "../../../../../hooks/table/filters/use-order-table-filters" import { useOrderTableFilters } from "../../../../../hooks/table/filters/use-order-table-filters"
import { useOrderTableQuery } from "../../../../../hooks/table/query/use-order-table-query" import { useOrderTableQuery } from "../../../../../hooks/table/query/use-order-table-query"
import { useDataTable } from "../../../../../hooks/use-data-table" import { useDataTable } from "../../../../../hooks/use-data-table"
import { HttpTypes } from "@medusajs/types"
type CustomerGeneralSectionProps = { type CustomerGeneralSectionProps = {
customer: HttpTypes.AdminCustomer customer: HttpTypes.AdminCustomer
@@ -75,7 +75,11 @@ export const CustomerOrderSection = ({
count={count} count={count}
isLoading={isLoading} isLoading={isLoading}
pageSize={PAGE_SIZE} pageSize={PAGE_SIZE}
orderBy={["display_id", "created_at", "updated_at"]} orderBy={[
{ key: "display_id", label: t("orders.fields.displayId") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
search={true} search={true}
queryObject={raw} queryObject={raw}
/> />
@@ -6,6 +6,7 @@ import { useMemo } from "react"
import { useTranslation } from "react-i18next" import { useTranslation } from "react-i18next"
import { Link } from "react-router-dom" import { Link } from "react-router-dom"
import { HttpTypes } from "@medusajs/types"
import { ActionMenu } from "../../../../../components/common/action-menu" import { ActionMenu } from "../../../../../components/common/action-menu"
import { DataTable } from "../../../../../components/table/data-table" import { DataTable } from "../../../../../components/table/data-table"
import { useCustomers } from "../../../../../hooks/api/customers" import { useCustomers } from "../../../../../hooks/api/customers"
@@ -13,7 +14,6 @@ import { useCustomerTableColumns } from "../../../../../hooks/table/columns/use-
import { useCustomerTableFilters } from "../../../../../hooks/table/filters/use-customer-table-filters" import { useCustomerTableFilters } from "../../../../../hooks/table/filters/use-customer-table-filters"
import { useCustomerTableQuery } from "../../../../../hooks/table/query/use-customer-table-query" import { useCustomerTableQuery } from "../../../../../hooks/table/query/use-customer-table-query"
import { useDataTable } from "../../../../../hooks/use-data-table" import { useDataTable } from "../../../../../hooks/use-data-table"
import { HttpTypes } from "@medusajs/types"
const PAGE_SIZE = 20 const PAGE_SIZE = 20
@@ -63,12 +63,12 @@ export const CustomerListTable = () => {
count={count} count={count}
filters={filters} filters={filters}
orderBy={[ orderBy={[
"email", { key: "email", label: t("fields.email") },
"first_name", { key: "first_name", label: t("fields.firstName") },
"last_name", { key: "last_name", label: t("fields.lastName") },
"has_account", { key: "has_account", label: t("customers.hasAccount") },
"created_at", { key: "created_at", label: t("fields.createdAt") },
"updated_at", { key: "updated_at", label: t("fields.updatedAt") },
]} ]}
isLoading={isLoading} isLoading={isLoading}
navigateTo={(row) => row.original.id} navigateTo={(row) => row.original.id}
@@ -175,7 +175,11 @@ export const AddCustomerGroupsForm = ({
pageSize={PAGE_SIZE} pageSize={PAGE_SIZE}
count={count} count={count}
filters={filters} filters={filters}
orderBy={["name", "created_at", "updated_at"]} orderBy={[
{ key: "name", label: t("fields.name") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
isLoading={isLoading} isLoading={isLoading}
layout="fill" layout="fill"
search="autofocus" search="autofocus"
@@ -1,14 +1,14 @@
import { Button, Container, Heading, Text } from "@medusajs/ui"
import { InventoryTypes } from "@medusajs/types" import { InventoryTypes } from "@medusajs/types"
import { Button, Container, Heading, Text } from "@medusajs/ui"
import { useTranslation } from "react-i18next"
import { Link } from "react-router-dom"
import { DataTable } from "../../../../components/table/data-table" import { DataTable } from "../../../../components/table/data-table"
import { useDataTable } from "../../../../hooks/use-data-table"
import { useInventoryItems } from "../../../../hooks/api/inventory" import { useInventoryItems } from "../../../../hooks/api/inventory"
import { useDataTable } from "../../../../hooks/use-data-table"
import { useInventoryTableColumns } from "./use-inventory-table-columns" import { useInventoryTableColumns } from "./use-inventory-table-columns"
import { useInventoryTableFilters } from "./use-inventory-table-filters" import { useInventoryTableFilters } from "./use-inventory-table-filters"
import { useInventoryTableQuery } from "./use-inventory-table-query" import { useInventoryTableQuery } from "./use-inventory-table-query"
import { useTranslation } from "react-i18next"
import { Link } from "react-router-dom"
const PAGE_SIZE = 20 const PAGE_SIZE = 20
@@ -68,7 +68,12 @@ export const InventoryListTable = () => {
search search
filters={filters} filters={filters}
queryObject={raw} queryObject={raw}
orderBy={["title", "sku", "stocked_quantity", "reserved_quantity"]} orderBy={[
{ key: "title", label: t("fields.title") },
{ key: "sku", label: t("fields.sku") },
{ key: "stocked_quantity", label: t("fields.inStock") },
{ key: "reserved_quantity", label: t("inventory.reserved") },
]}
navigateTo={(row) => `${row.id}`} navigateTo={(row) => `${row.id}`}
/> />
</Container> </Container>
@@ -246,7 +246,10 @@ const AreaStackedModal = <TForm extends UseFormReturn<any>>({
search search
pagination pagination
layout="fill" layout="fill"
orderBy={["name", "code"]} orderBy={[
{ key: "display_name", label: t("fields.name") },
{ key: "iso_2", label: t("fields.code") },
]}
queryObject={raw} queryObject={raw}
prefix={PREFIX} prefix={PREFIX}
/> />
@@ -132,7 +132,7 @@ export const LocationEditFulfillmentProvidersForm = ({
filters={filters} filters={filters}
search="autofocus" search="autofocus"
pagination pagination
orderBy={["id", "created_at", "updated_at"]} orderBy={[{ key: "id", label: t("fields.id") }]}
queryObject={raw} queryObject={raw}
layout="fill" layout="fill"
/> />
@@ -146,7 +146,11 @@ export const LocationEditSalesChannelsForm = ({
filters={filters} filters={filters}
search="autofocus" search="autofocus"
pagination pagination
orderBy={["name", "created_at", "updated_at"]} orderBy={[
{ key: "name", label: t("fields.name") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
queryObject={raw} queryObject={raw}
layout="fill" layout="fill"
/> />
@@ -6,6 +6,7 @@ import {
import { OnChangeFn, RowSelectionState } from "@tanstack/react-table" import { OnChangeFn, RowSelectionState } from "@tanstack/react-table"
import { useMemo, useState } from "react" import { useMemo, useState } from "react"
import { useTranslation } from "react-i18next"
import { DataTable } from "../../../../../components/table/data-table" import { DataTable } from "../../../../../components/table/data-table"
import { useDataTable } from "../../../../../hooks/use-data-table" import { useDataTable } from "../../../../../hooks/use-data-table"
import { getStylizedAmount } from "../../../../../lib/money-amount-helpers" import { getStylizedAmount } from "../../../../../lib/money-amount-helpers"
@@ -30,6 +31,8 @@ export const AddClaimItemsTable = ({
items, items,
currencyCode, currencyCode,
}: AddReturnItemsTableProps) => { }: AddReturnItemsTableProps) => {
const { t } = useTranslation()
const [rowSelection, setRowSelection] = useState<RowSelectionState>( const [rowSelection, setRowSelection] = useState<RowSelectionState>(
selectedItems.reduce((acc, id) => { selectedItems.reduce((acc, id) => {
acc[id] = true acc[id] = true
@@ -141,11 +144,17 @@ export const AddClaimItemsTable = ({
layout="fill" layout="fill"
search search
orderBy={[ orderBy={[
"product_title", { key: "product_title", label: t("fields.product") },
"variant_title", { key: "variant_title", label: t("fields.variant") },
"sku", { key: "sku", label: t("fields.sku") },
"returnable_quantity", {
"refundable_amount", key: "returnable_quantity",
label: t("orders.fields.returnableQuantity"),
},
{
key: "refundable_amount",
label: t("orders.fields.refundableAmount"),
},
]} ]}
prefix={PREFIX} prefix={PREFIX}
queryObject={raw} queryObject={raw}
@@ -1,6 +1,7 @@
import { OnChangeFn, RowSelectionState } from "@tanstack/react-table" import { OnChangeFn, RowSelectionState } from "@tanstack/react-table"
import { useState } from "react" import { useState } from "react"
import { useTranslation } from "react-i18next"
import { DataTable } from "../../../../../components/table/data-table" import { DataTable } from "../../../../../components/table/data-table"
import { useVariants } from "../../../../../hooks/api" import { useVariants } from "../../../../../hooks/api"
import { useDataTable } from "../../../../../hooks/use-data-table" import { useDataTable } from "../../../../../hooks/use-data-table"
@@ -22,6 +23,8 @@ export const AddClaimOutboundItemsTable = ({
selectedItems, selectedItems,
currencyCode, currencyCode,
}: AddClaimOutboundItemsTableProps) => { }: AddClaimOutboundItemsTableProps) => {
const { t } = useTranslation()
const [rowSelection, setRowSelection] = useState<RowSelectionState>( const [rowSelection, setRowSelection] = useState<RowSelectionState>(
selectedItems.reduce((acc, id) => { selectedItems.reduce((acc, id) => {
acc[id] = true acc[id] = true
@@ -78,7 +81,11 @@ export const AddClaimOutboundItemsTable = ({
pagination pagination
layout="fill" layout="fill"
search search
orderBy={["product_id", "title", "sku"]} orderBy={[
{ key: "product_id", label: t("fields.product") },
{ key: "title", label: t("fields.title") },
{ key: "sku", label: t("fields.sku") },
]}
prefix={PREFIX} prefix={PREFIX}
queryObject={raw} queryObject={raw}
/> />
@@ -1,12 +1,13 @@
import { OnChangeFn, RowSelectionState } from "@tanstack/react-table" import { OnChangeFn, RowSelectionState } from "@tanstack/react-table"
import { useState } from "react" import { useState } from "react"
import { useTranslation } from "react-i18next"
import { DataTable } from "../../../../../components/table/data-table" import { DataTable } from "../../../../../components/table/data-table"
import { useVariants } from "../../../../../hooks/api" import { useVariants } from "../../../../../hooks/api"
import { useDataTable } from "../../../../../hooks/use-data-table" import { useDataTable } from "../../../../../hooks/use-data-table"
import { useOrderEditItemsTableColumns } from "./use-order-edit-item-table-columns"
import { useOrderEditItemTableFilters } from "./use-order-edit-item-table-filters" import { useOrderEditItemTableFilters } from "./use-order-edit-item-table-filters"
import { useOrderEditItemTableQuery } from "./use-order-edit-item-table-query" import { useOrderEditItemTableQuery } from "./use-order-edit-item-table-query"
import { useOrderEditItemsTableColumns } from "./use-order-edit-item-table-columns"
const PAGE_SIZE = 50 const PAGE_SIZE = 50
const PREFIX = "rit" const PREFIX = "rit"
@@ -20,6 +21,8 @@ export const AddOrderEditItemsTable = ({
onSelectionChange, onSelectionChange,
currencyCode, currencyCode,
}: AddExchangeOutboundItemsTableProps) => { }: AddExchangeOutboundItemsTableProps) => {
const { t } = useTranslation()
const [rowSelection, setRowSelection] = useState<RowSelectionState>({}) const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
const updater: OnChangeFn<RowSelectionState> = (fn) => { const updater: OnChangeFn<RowSelectionState> = (fn) => {
@@ -71,7 +74,11 @@ export const AddOrderEditItemsTable = ({
pagination pagination
layout="fill" layout="fill"
search search
orderBy={["product_id", "title", "sku"]} orderBy={[
{ key: "product_id", label: t("fields.product") },
{ key: "title", label: t("fields.title") },
{ key: "sku", label: t("fields.sku") },
]}
prefix={PREFIX} prefix={PREFIX}
queryObject={raw} queryObject={raw}
/> />
@@ -2,6 +2,7 @@ import { AdminOrderLineItem, DateComparisonOperator } from "@medusajs/types"
import { OnChangeFn, RowSelectionState } from "@tanstack/react-table" import { OnChangeFn, RowSelectionState } from "@tanstack/react-table"
import { useMemo, useState } from "react" import { useMemo, useState } from "react"
import { useTranslation } from "react-i18next"
import { DataTable } from "../../../../../components/table/data-table" import { DataTable } from "../../../../../components/table/data-table"
import { useDataTable } from "../../../../../hooks/use-data-table" import { useDataTable } from "../../../../../hooks/use-data-table"
import { getReturnableQuantity } from "../../../../../lib/rma" import { getReturnableQuantity } from "../../../../../lib/rma"
@@ -25,6 +26,8 @@ export const AddExchangeInboundItemsTable = ({
items, items,
currencyCode, currencyCode,
}: AddExchangeInboundItemsTableProps) => { }: AddExchangeInboundItemsTableProps) => {
const { t } = useTranslation()
const [rowSelection, setRowSelection] = useState<RowSelectionState>( const [rowSelection, setRowSelection] = useState<RowSelectionState>(
selectedItems.reduce((acc, id) => { selectedItems.reduce((acc, id) => {
acc[id] = true acc[id] = true
@@ -108,7 +111,11 @@ export const AddExchangeInboundItemsTable = ({
pagination pagination
layout="fill" layout="fill"
search search
orderBy={["product_title", "variant_title", "sku"]} orderBy={[
{ key: "product_title", label: t("fields.product") },
{ key: "variant_title", label: t("fields.variant") },
{ key: "sku", label: t("fields.sku") },
]}
prefix={PREFIX} prefix={PREFIX}
queryObject={raw} queryObject={raw}
/> />
@@ -1,6 +1,7 @@
import { OnChangeFn, RowSelectionState } from "@tanstack/react-table" import { OnChangeFn, RowSelectionState } from "@tanstack/react-table"
import { useState } from "react" import { useState } from "react"
import { useTranslation } from "react-i18next"
import { DataTable } from "../../../../../components/table/data-table" import { DataTable } from "../../../../../components/table/data-table"
import { useVariants } from "../../../../../hooks/api" import { useVariants } from "../../../../../hooks/api"
import { useDataTable } from "../../../../../hooks/use-data-table" import { useDataTable } from "../../../../../hooks/use-data-table"
@@ -22,6 +23,8 @@ export const AddExchangeOutboundItemsTable = ({
selectedItems, selectedItems,
currencyCode, currencyCode,
}: AddExchangeOutboundItemsTableProps) => { }: AddExchangeOutboundItemsTableProps) => {
const { t } = useTranslation()
const [rowSelection, setRowSelection] = useState<RowSelectionState>( const [rowSelection, setRowSelection] = useState<RowSelectionState>(
selectedItems.reduce((acc, id) => { selectedItems.reduce((acc, id) => {
acc[id] = true acc[id] = true
@@ -78,7 +81,11 @@ export const AddExchangeOutboundItemsTable = ({
pagination pagination
layout="fill" layout="fill"
search search
orderBy={["product_id", "title", "sku"]} orderBy={[
{ key: "product_id", label: t("fields.product") },
{ key: "title", label: t("fields.title") },
{ key: "sku", label: t("fields.sku") },
]}
prefix={PREFIX} prefix={PREFIX}
queryObject={raw} queryObject={raw}
/> />
@@ -2,18 +2,19 @@ import { OnChangeFn, RowSelectionState } from "@tanstack/react-table"
import { useMemo, useState } from "react" import { useMemo, useState } from "react"
import { import {
AdminOrderLineItem,
DateComparisonOperator, DateComparisonOperator,
NumericalComparisonOperator, NumericalComparisonOperator,
} from "@medusajs/types" } from "@medusajs/types"
import { AdminOrderLineItem } from "@medusajs/types"
import { useTranslation } from "react-i18next"
import { DataTable } from "../../../../../components/table/data-table"
import { useDataTable } from "../../../../../hooks/use-data-table"
import { getStylizedAmount } from "../../../../../lib/money-amount-helpers"
import { getReturnableQuantity } from "../../../../../lib/rma"
import { useReturnItemTableColumns } from "./use-return-item-table-columns" import { useReturnItemTableColumns } from "./use-return-item-table-columns"
import { useReturnItemTableFilters } from "./use-return-item-table-filters" import { useReturnItemTableFilters } from "./use-return-item-table-filters"
import { useReturnItemTableQuery } from "./use-return-item-table-query" import { useReturnItemTableQuery } from "./use-return-item-table-query"
import { useDataTable } from "../../../../../hooks/use-data-table"
import { DataTable } from "../../../../../components/table/data-table"
import { getStylizedAmount } from "../../../../../lib/money-amount-helpers"
import { getReturnableQuantity } from "../../../../../lib/rma"
const PAGE_SIZE = 50 const PAGE_SIZE = 50
const PREFIX = "rit" const PREFIX = "rit"
@@ -31,6 +32,8 @@ export const AddReturnItemsTable = ({
items, items,
currencyCode, currencyCode,
}: AddReturnItemsTableProps) => { }: AddReturnItemsTableProps) => {
const { t } = useTranslation()
const [rowSelection, setRowSelection] = useState<RowSelectionState>( const [rowSelection, setRowSelection] = useState<RowSelectionState>(
selectedItems.reduce((acc, id) => { selectedItems.reduce((acc, id) => {
acc[id] = true acc[id] = true
@@ -142,11 +145,17 @@ export const AddReturnItemsTable = ({
layout="fill" layout="fill"
search search
orderBy={[ orderBy={[
"product_title", { key: "product_title", label: t("fields.product") },
"variant_title", { key: "variant_title", label: t("fields.variant") },
"sku", { key: "sku", label: t("fields.sku") },
"returnable_quantity", {
"refundable_amount", key: "returnable_quantity",
label: t("orders.fields.returnableQuantity"),
},
{
key: "refundable_amount",
label: t("orders.fields.refundableAmount"),
},
]} ]}
prefix={PREFIX} prefix={PREFIX}
queryObject={raw} queryObject={raw}
@@ -1,13 +1,13 @@
import { keepPreviousData } from "@tanstack/react-query"
import { Container, Heading } from "@medusajs/ui" import { Container, Heading } from "@medusajs/ui"
import { keepPreviousData } from "@tanstack/react-query"
import { useTranslation } from "react-i18next" import { useTranslation } from "react-i18next"
import { DataTable } from "../../../../../components/table/data-table/data-table" import { DataTable } from "../../../../../components/table/data-table/data-table"
import { useOrders } from "../../../../../hooks/api/orders"
import { useOrderTableColumns } from "../../../../../hooks/table/columns/use-order-table-columns" import { useOrderTableColumns } from "../../../../../hooks/table/columns/use-order-table-columns"
import { useOrderTableFilters } from "../../../../../hooks/table/filters/use-order-table-filters" import { useOrderTableFilters } from "../../../../../hooks/table/filters/use-order-table-filters"
import { useOrderTableQuery } from "../../../../../hooks/table/query/use-order-table-query" import { useOrderTableQuery } from "../../../../../hooks/table/query/use-order-table-query"
import { useDataTable } from "../../../../../hooks/use-data-table" import { useDataTable } from "../../../../../hooks/use-data-table"
import { useOrders } from "../../../../../hooks/api/orders"
import { DEFAULT_FIELDS } from "../../const" import { DEFAULT_FIELDS } from "../../const"
@@ -59,7 +59,11 @@ export const OrderListTable = () => {
search search
isLoading={isLoading} isLoading={isLoading}
pageSize={PAGE_SIZE} pageSize={PAGE_SIZE}
orderBy={["display_id", "created_at", "updated_at"]} orderBy={[
{ key: "display_id", label: t("orders.fields.displayId") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
queryObject={raw} queryObject={raw}
noRecords={{ noRecords={{
message: t("orders.list.noRecordsMessage"), message: t("orders.list.noRecordsMessage"),
@@ -126,7 +126,11 @@ export const PriceListCustomerGroupRuleForm = ({
count={count} count={count}
isLoading={isLoading} isLoading={isLoading}
filters={filters} filters={filters}
orderBy={["name", "created_at", "updated_at"]} orderBy={[
{ key: "name", label: t("fields.name") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
layout="fill" layout="fill"
pagination pagination
search search
@@ -9,6 +9,7 @@ import {
import { useMemo, useState } from "react" import { useMemo, useState } from "react"
import { UseFormReturn, useWatch } from "react-hook-form" import { UseFormReturn, useWatch } from "react-hook-form"
import { useTranslation } from "react-i18next"
import { DataTable } from "../../../../../components/table/data-table" import { DataTable } from "../../../../../components/table/data-table"
import { useProducts } from "../../../../../hooks/api/products" import { useProducts } from "../../../../../hooks/api/products"
import { useProductTableColumns } from "../../../../../hooks/table/columns/use-product-table-columns" import { useProductTableColumns } from "../../../../../hooks/table/columns/use-product-table-columns"
@@ -17,7 +18,6 @@ import { useProductTableQuery } from "../../../../../hooks/table/query/use-produ
import { useDataTable } from "../../../../../hooks/use-data-table" import { useDataTable } from "../../../../../hooks/use-data-table"
import { PriceListCreateProductsSchema } from "../../../common/schemas" import { PriceListCreateProductsSchema } from "../../../common/schemas"
import { PricingCreateSchemaType } from "./schema" import { PricingCreateSchemaType } from "./schema"
import { useTranslation } from "react-i18next"
type PriceListProductsFormProps = { type PriceListProductsFormProps = {
form: UseFormReturn<PricingCreateSchemaType> form: UseFormReturn<PricingCreateSchemaType>
@@ -126,7 +126,12 @@ export const PriceListProductsForm = ({ form }: PriceListProductsFormProps) => {
count={count} count={count}
isLoading={isLoading} isLoading={isLoading}
layout="fill" layout="fill"
orderBy={["title", "status", "created_at", "updated_at"]} orderBy={[
{ key: "title", label: t("fields.title") },
{ key: "status", label: t("fields.status") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
pagination pagination
search search
queryObject={raw} queryObject={raw}
@@ -141,7 +141,11 @@ export const PriceListProductSection = ({
pageSize={PAGE_SIZE} pageSize={PAGE_SIZE}
isLoading={isLoading} isLoading={isLoading}
navigateTo={(row) => `/products/${row.original.id}`} navigateTo={(row) => `/products/${row.original.id}`}
orderBy={["title", "created_at", "updated_at"]} orderBy={[
{ key: "title", label: t("fields.title") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
commands={[ commands={[
{ {
action: handleEdit, action: handleEdit,
@@ -58,7 +58,12 @@ export const PriceListListTable = () => {
columns={columns} columns={columns}
count={count} count={count}
filters={filters} filters={filters}
orderBy={["title", "status", "created_at", "updated_at"]} orderBy={[
{ key: "title", label: t("fields.title") },
{ key: "status", label: t("fields.status") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
queryObject={raw} queryObject={raw}
pageSize={PAGE_SIZE} pageSize={PAGE_SIZE}
navigateTo={(row) => row.original.id} navigateTo={(row) => row.original.id}
@@ -8,6 +8,7 @@ import {
} from "@tanstack/react-table" } from "@tanstack/react-table"
import { useMemo, useState } from "react" import { useMemo, useState } from "react"
import { UseFormReturn, useWatch } from "react-hook-form" import { UseFormReturn, useWatch } from "react-hook-form"
import { useTranslation } from "react-i18next"
import { DataTable } from "../../../../../components/table/data-table" import { DataTable } from "../../../../../components/table/data-table"
import { useProducts } from "../../../../../hooks/api/products" import { useProducts } from "../../../../../hooks/api/products"
import { useProductTableColumns } from "../../../../../hooks/table/columns/use-product-table-columns" import { useProductTableColumns } from "../../../../../hooks/table/columns/use-product-table-columns"
@@ -36,13 +37,17 @@ export const PriceListPricesAddProductIdsForm = ({
priceList, priceList,
form, form,
}: PriceListPricesAddProductIdsFormProps) => { }: PriceListPricesAddProductIdsFormProps) => {
const { t } = useTranslation()
const { control, setValue } = form const { control, setValue } = form
const variantIdMap = useMemo(() => { const variantIdMap = useMemo(() => {
return priceList.prices.reduce((acc, curr) => { return priceList.prices.reduce(
acc[curr.variant_id] = true (acc, curr) => {
return acc acc[curr.variant_id] = true
}, {} as Record<string, boolean>) return acc
},
{} as Record<string, boolean>
)
}, [priceList.prices]) }, [priceList.prices])
const selectedIds = useWatch({ const selectedIds = useWatch({
@@ -140,7 +145,12 @@ export const PriceListPricesAddProductIdsForm = ({
count={count} count={count}
isLoading={isLoading} isLoading={isLoading}
layout="fill" layout="fill"
orderBy={["title", "status", "created_at", "updated_at"]} orderBy={[
{ key: "title", label: t("fields.title") },
{ key: "status", label: t("fields.status") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
pagination pagination
search search
queryObject={raw} queryObject={raw}
@@ -62,7 +62,12 @@ export const ProductTagProductSection = ({
navigateTo={(row) => row.original.id} navigateTo={(row) => row.original.id}
search search
pagination pagination
orderBy={["title", "status", "created_at", "updated_at"]} orderBy={[
{ key: "title", label: t("fields.title") },
{ key: "status", label: t("fields.status") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
/> />
</Container> </Container>
) )
@@ -71,7 +71,11 @@ export const ProductTagListTable = () => {
navigateTo={(row) => row.original.id} navigateTo={(row) => row.original.id}
search search
pagination pagination
orderBy={["value", "created_at", "updated_at"]} orderBy={[
{ key: "value", label: t("fields.value") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
/> />
</Container> </Container>
) )
@@ -56,7 +56,11 @@ export const ProductTypeProductSection = ({
count={count} count={count}
pageSize={PAGE_SIZE} pageSize={PAGE_SIZE}
navigateTo={({ original }) => `/products/${original.id}`} navigateTo={({ original }) => `/products/${original.id}`}
orderBy={["title", "created_at", "updated_at"]} orderBy={[
{ key: "title", label: t("fields.title") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
queryObject={raw} queryObject={raw}
search search
pagination pagination
@@ -64,7 +64,11 @@ export const ProductTypeListTable = () => {
columns={columns} columns={columns}
pageSize={PAGE_SIZE} pageSize={PAGE_SIZE}
count={count} count={count}
orderBy={["value", "created_at", "updated_at"]} orderBy={[
{ key: "value", label: t("fields.value") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
navigateTo={({ original }) => original.id} navigateTo={({ original }) => original.id}
queryObject={raw} queryObject={raw}
pagination pagination
@@ -138,7 +138,11 @@ export const ProductCreateSalesChannelStackedModal = ({
filters={filters} filters={filters}
isLoading={isLoading} isLoading={isLoading}
layout="fill" layout="fill"
orderBy={["name", "created_at", "updated_at"]} orderBy={[
{ key: "name", label: t("fields.name") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
queryObject={raw} queryObject={raw}
search search
pagination pagination
@@ -1,16 +1,16 @@
import { PencilSquare, Plus } from "@medusajs/icons" import { PencilSquare, Plus } from "@medusajs/icons"
import { Container, Heading } from "@medusajs/ui"
import { useTranslation } from "react-i18next"
import { keepPreviousData } from "@tanstack/react-query"
import { HttpTypes } from "@medusajs/types" import { HttpTypes } from "@medusajs/types"
import { Container, Heading } from "@medusajs/ui"
import { keepPreviousData } from "@tanstack/react-query"
import { useTranslation } from "react-i18next"
import { ActionMenu } from "../../../../../components/common/action-menu" import { ActionMenu } from "../../../../../components/common/action-menu"
import { DataTable } from "../../../../../components/table/data-table" import { DataTable } from "../../../../../components/table/data-table"
import { useProductVariants } from "../../../../../hooks/api/products"
import { useDataTable } from "../../../../../hooks/use-data-table" import { useDataTable } from "../../../../../hooks/use-data-table"
import { useProductVariantTableColumns } from "./use-variant-table-columns" import { useProductVariantTableColumns } from "./use-variant-table-columns"
import { useProductVariantTableFilters } from "./use-variant-table-filters" import { useProductVariantTableFilters } from "./use-variant-table-filters"
import { useProductVariantTableQuery } from "./use-variant-table-query" import { useProductVariantTableQuery } from "./use-variant-table-query"
import { useProductVariants } from "../../../../../hooks/api/products"
type ProductVariantSectionProps = { type ProductVariantSectionProps = {
product: HttpTypes.AdminProduct product: HttpTypes.AdminProduct
@@ -86,7 +86,11 @@ export const ProductVariantSection = ({
count={count} count={count}
pageSize={PAGE_SIZE} pageSize={PAGE_SIZE}
isLoading={isLoading} isLoading={isLoading}
orderBy={["title", "created_at", "updated_at"]} orderBy={[
{ key: "title", label: t("fields.title") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
navigateTo={(row) => navigateTo={(row) =>
`/products/${row.original.product_id}/variants/${row.id}` `/products/${row.original.product_id}/variants/${row.id}`
} }
@@ -83,7 +83,11 @@ export const ProductListTable = () => {
isLoading={isLoading} isLoading={isLoading}
queryObject={raw} queryObject={raw}
navigateTo={(row) => `${row.original.id}`} navigateTo={(row) => `${row.original.id}`}
orderBy={["title", "created_at", "updated_at"]} orderBy={[
{ key: "title", label: t("fields.title") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
noRecords={{ noRecords={{
message: t("products.list.noRecordsMessage"), message: t("products.list.noRecordsMessage"),
}} }}
@@ -132,7 +132,11 @@ export const EditSalesChannelsForm = ({
filters={filters} filters={filters}
search="autofocus" search="autofocus"
pagination pagination
orderBy={["name", "created_at", "updated_at"]} orderBy={[
{ key: "name", label: t("fields.name") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
queryObject={raw} queryObject={raw}
layout="fill" layout="fill"
/> />
@@ -73,7 +73,10 @@ export const PromotionListTable = () => {
isLoading={isLoading} isLoading={isLoading}
queryObject={raw} queryObject={raw}
navigateTo={(row) => `${row.original.id}`} navigateTo={(row) => `${row.original.id}`}
orderBy={["created_at", "updated_at"]} orderBy={[
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
/> />
<Outlet /> <Outlet />
</Container> </Container>
@@ -150,7 +150,10 @@ export const AddCountriesForm = ({ region }: AddCountriesFormProps) => {
search="autofocus" search="autofocus"
pagination pagination
layout="fill" layout="fill"
orderBy={["name", "code"]} orderBy={[
{ key: "display_name", label: t("fields.name") },
{ key: "iso_2", label: t("fields.code") },
]}
queryObject={raw} queryObject={raw}
prefix={PREFIX} prefix={PREFIX}
/> />
@@ -364,7 +364,10 @@ export const CreateRegionForm = ({
columns={columns} columns={columns}
count={count} count={count}
pageSize={PAGE_SIZE} pageSize={PAGE_SIZE}
orderBy={["name", "code"]} orderBy={[
{ key: "display_name", label: t("fields.name") },
{ key: "iso_2", label: t("fields.code") },
]}
pagination pagination
search="autofocus" search="autofocus"
layout="fill" layout="fill"
@@ -120,7 +120,10 @@ export const RegionCountrySection = ({ region }: RegionCountrySectionProps) => {
columns={columns} columns={columns}
pageSize={PAGE_SIZE} pageSize={PAGE_SIZE}
count={count} count={count}
orderBy={["name", "code"]} orderBy={[
{ key: "display_name", label: t("fields.name") },
{ key: "iso_2", label: t("fields.code") },
]}
search search
pagination pagination
queryObject={raw} queryObject={raw}
@@ -4,9 +4,9 @@ import {
Button, Button,
Container, Container,
Heading, Heading,
Text,
toast, toast,
usePrompt, usePrompt,
Text,
} from "@medusajs/ui" } from "@medusajs/ui"
import { keepPreviousData } from "@tanstack/react-query" import { keepPreviousData } from "@tanstack/react-query"
import { createColumnHelper } from "@tanstack/react-table" import { createColumnHelper } from "@tanstack/react-table"
@@ -83,7 +83,11 @@ export const RegionListTable = () => {
pageSize={PAGE_SIZE} pageSize={PAGE_SIZE}
isLoading={isLoading} isLoading={isLoading}
filters={filters} filters={filters}
orderBy={["name", "created_at", "updated_at"]} orderBy={[
{ key: "name", label: t("fields.name") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
navigateTo={(row) => `${row.original.id}`} navigateTo={(row) => `${row.original.id}`}
pagination pagination
search search
@@ -118,18 +122,14 @@ const RegionActions = ({ region }: { region: HttpTypes.AdminRegion }) => {
return return
} }
try { await mutateAsync(undefined, {
await mutateAsync(undefined) onSuccess: () => {
toast.success(t("general.success"), { toast.success(t("regions.toast.delete"))
description: t("regions.toast.delete"), },
dismissLabel: t("actions.close"), onError: (e) => {
}) toast.error(e.message)
} catch (e) { },
toast.error(t("general.error"), { })
description: e.message,
dismissLabel: t("actions.close"),
})
}
} }
return ( return (
@@ -141,7 +141,12 @@ export const AddProductsToSalesChannelForm = ({
pageSize={PAGE_SIZE} pageSize={PAGE_SIZE}
isLoading={isLoading} isLoading={isLoading}
filters={filters} filters={filters}
orderBy={["title", "status", "created_at", "updated_at"]} orderBy={[
{ key: "title", label: t("fields.title") },
{ key: "status", label: t("fields.status") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
queryObject={raw} queryObject={raw}
layout="fill" layout="fill"
pagination pagination
@@ -135,7 +135,12 @@ export const SalesChannelProductSection = ({
filters={filters} filters={filters}
navigateTo={(row) => `/products/${row.id}`} navigateTo={(row) => `/products/${row.id}`}
isLoading={isLoading} isLoading={isLoading}
orderBy={["title", "variants", "status", "created_at", "updated_at"]} orderBy={[
{ key: "title", label: t("fields.title") },
{ key: "status", label: t("fields.status") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
queryObject={raw} queryObject={raw}
noRecords={{ noRecords={{
message: t("salesChannels.products.list.noRecordsMessage"), message: t("salesChannels.products.list.noRecordsMessage"),
@@ -84,7 +84,11 @@ export const SalesChannelListTable = () => {
navigateTo={(row) => row.id} navigateTo={(row) => row.id}
isLoading={isLoading} isLoading={isLoading}
queryObject={raw} queryObject={raw}
orderBy={["name", "created_at", "updated_at"]} orderBy={[
{ key: "name", label: t("fields.name") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
/> />
</Container> </Container>
) )
@@ -61,7 +61,12 @@ export const ShippingProfileListTable = () => {
count={count} count={count}
columns={columns} columns={columns}
filters={filters} filters={filters}
orderBy={["name", "type", "created_at", "updated_at"]} orderBy={[
{ key: "name", label: t("fields.name") },
{ key: "type", label: t("fields.type") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
isLoading={isLoading} isLoading={isLoading}
navigateTo={(row) => row.id} navigateTo={(row) => row.id}
queryObject={raw} queryObject={raw}
@@ -64,13 +64,16 @@ export const AddCurrenciesForm = ({
const form = useForm<zod.infer<typeof AddCurrenciesSchema>>({ const form = useForm<zod.infer<typeof AddCurrenciesSchema>>({
defaultValues: { defaultValues: {
currencies: [], currencies: [],
pricePreferences: pricePreferences?.reduce((acc, curr) => { pricePreferences: pricePreferences?.reduce(
if (curr.value) { (acc, curr) => {
acc[curr.value] = curr.is_tax_inclusive if (curr.value) {
} acc[curr.value] = curr.is_tax_inclusive
}
return acc return acc
}, {} as Record<string, boolean>), },
{} as Record<string, boolean>
),
}, },
resolver: zodResolver(AddCurrenciesSchema), resolver: zodResolver(AddCurrenciesSchema),
}) })
@@ -192,7 +195,10 @@ export const AddCurrenciesForm = ({
pagination pagination
search="autofocus" search="autofocus"
prefix={PREFIX} prefix={PREFIX}
orderBy={["code", "name"]} orderBy={[
{ key: "name", label: t("fields.name") },
{ key: "code", label: t("fields.code") },
]}
isLoading={isLoading} isLoading={isLoading}
queryObject={raw} queryObject={raw}
/> />
@@ -165,7 +165,10 @@ export const StoreCurrencySection = ({ store }: StoreCurrencySectionProps) => {
/> />
</div> </div>
<DataTable <DataTable
orderBy={["code", "name"]} orderBy={[
{ key: "name", label: t("fields.name") },
{ key: "code", label: t("fields.code") },
]}
search search
pagination pagination
table={table} table={table}
@@ -2,46 +2,46 @@ import { HttpTypes } from "@medusajs/types"
import { Button, Checkbox } from "@medusajs/ui" import { Button, Checkbox } from "@medusajs/ui"
import { keepPreviousData } from "@tanstack/react-query" import { keepPreviousData } from "@tanstack/react-query"
import { import {
OnChangeFn, OnChangeFn,
RowSelectionState, RowSelectionState,
createColumnHelper, createColumnHelper,
} from "@tanstack/react-table" } from "@tanstack/react-table"
import { useEffect, useMemo, useState } from "react" import { useEffect, useMemo, useState } from "react"
import { useTranslation } from "react-i18next" import { useTranslation } from "react-i18next"
import { useSearchParams } from "react-router-dom" import { useSearchParams } from "react-router-dom"
import { import {
StackedDrawer, StackedDrawer,
StackedFocusModal, StackedFocusModal,
} from "../../../../../components/modals" } from "../../../../../components/modals"
import { DataTable } from "../../../../../components/table/data-table" import { DataTable } from "../../../../../components/table/data-table"
import { import {
useCollections, useCollections,
useCustomerGroups, useCustomerGroups,
useProductTags, useProductTags,
useProductTypes, useProductTypes,
useProducts, useProducts,
} from "../../../../../hooks/api" } from "../../../../../hooks/api"
import { import {
useCollectionTableColumns, useCollectionTableColumns,
useCustomerGroupTableColumns, useCustomerGroupTableColumns,
useProductTableColumns, useProductTableColumns,
useProductTagTableColumns, useProductTagTableColumns,
useProductTypeTableColumns, useProductTypeTableColumns,
} from "../../../../../hooks/table/columns" } from "../../../../../hooks/table/columns"
import { import {
useCollectionTableFilters, useCollectionTableFilters,
useCustomerGroupTableFilters, useCustomerGroupTableFilters,
useProductTableFilters, useProductTableFilters,
useProductTagTableFilters, useProductTagTableFilters,
useProductTypeTableFilters, useProductTypeTableFilters,
} from "../../../../../hooks/table/filters" } from "../../../../../hooks/table/filters"
import { import {
useCollectionTableQuery, useCollectionTableQuery,
useCustomerGroupTableQuery, useCustomerGroupTableQuery,
useProductTableQuery, useProductTableQuery,
useProductTagTableQuery, useProductTagTableQuery,
useProductTypeTableQuery, useProductTypeTableQuery,
} from "../../../../../hooks/table/query" } from "../../../../../hooks/table/query"
import { useDataTable } from "../../../../../hooks/use-data-table" import { useDataTable } from "../../../../../hooks/use-data-table"
import { TaxRateRuleReferenceType } from "../../constants" import { TaxRateRuleReferenceType } from "../../constants"
@@ -140,6 +140,8 @@ const CustomerGroupTable = ({
intermediate, intermediate,
setIntermediate, setIntermediate,
}: TableImplementationProps) => { }: TableImplementationProps) => {
const { t } = useTranslation()
const [rowSelection, setRowSelection] = const [rowSelection, setRowSelection] =
useState<RowSelectionState>(initialRowState) useState<RowSelectionState>(initialRowState)
@@ -206,7 +208,11 @@ const CustomerGroupTable = ({
count={count} count={count}
isLoading={isLoading} isLoading={isLoading}
filters={filters} filters={filters}
orderBy={["name", "created_at", "updated_at"]} orderBy={[
{ key: "name", label: t("fields.name") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
layout="fill" layout="fill"
pagination pagination
search search
@@ -264,6 +270,8 @@ const ProductTable = ({
intermediate, intermediate,
setIntermediate, setIntermediate,
}: TableImplementationProps) => { }: TableImplementationProps) => {
const { t } = useTranslation()
const [rowSelection, setRowSelection] = const [rowSelection, setRowSelection] =
useState<RowSelectionState>(initialRowState) useState<RowSelectionState>(initialRowState)
@@ -336,7 +344,11 @@ const ProductTable = ({
count={count} count={count}
isLoading={isLoading} isLoading={isLoading}
filters={filters} filters={filters}
orderBy={["title", "created_at", "updated_at"]} orderBy={[
{ key: "title", label: t("fields.title") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
layout="fill" layout="fill"
pagination pagination
search search
@@ -394,6 +406,8 @@ const ProductCollectionTable = ({
intermediate, intermediate,
setIntermediate, setIntermediate,
}: TableImplementationProps) => { }: TableImplementationProps) => {
const { t } = useTranslation()
const [rowSelection, setRowSelection] = const [rowSelection, setRowSelection] =
useState<RowSelectionState>(initialRowState) useState<RowSelectionState>(initialRowState)
@@ -466,7 +480,11 @@ const ProductCollectionTable = ({
count={count} count={count}
isLoading={isLoading} isLoading={isLoading}
filters={filters} filters={filters}
orderBy={["title", "created_at", "updated_at"]} orderBy={[
{ key: "title", label: t("fields.title") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
layout="fill" layout="fill"
pagination pagination
search search
@@ -524,6 +542,8 @@ const ProductTypeTable = ({
intermediate, intermediate,
setIntermediate, setIntermediate,
}: TableImplementationProps) => { }: TableImplementationProps) => {
const { t } = useTranslation()
const [rowSelection, setRowSelection] = const [rowSelection, setRowSelection] =
useState<RowSelectionState>(initialRowState) useState<RowSelectionState>(initialRowState)
@@ -596,7 +616,11 @@ const ProductTypeTable = ({
count={count} count={count}
isLoading={isLoading} isLoading={isLoading}
filters={filters} filters={filters}
orderBy={["value", "created_at", "updated_at"]} orderBy={[
{ key: "value", label: t("fields.value") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
layout="fill" layout="fill"
pagination pagination
search search
@@ -654,6 +678,8 @@ const ProductTagTable = ({
intermediate, intermediate,
setIntermediate, setIntermediate,
}: TableImplementationProps) => { }: TableImplementationProps) => {
const { t } = useTranslation()
const [rowSelection, setRowSelection] = const [rowSelection, setRowSelection] =
useState<RowSelectionState>(initialRowState) useState<RowSelectionState>(initialRowState)
@@ -726,7 +752,11 @@ const ProductTagTable = ({
count={count} count={count}
isLoading={isLoading} isLoading={isLoading}
filters={filters} filters={filters}
orderBy={["value", "created_at", "updated_at"]} orderBy={[
{ key: "value", label: t("fields.value") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
layout="fill" layout="fill"
pagination pagination
search search
@@ -168,7 +168,11 @@ export const InviteUserForm = () => {
search="autofocus" search="autofocus"
isLoading={isLoading} isLoading={isLoading}
queryObject={raw} queryObject={raw}
orderBy={["email", "created_at", "updated_at"]} orderBy={[
{ key: "email", label: t("fields.email") },
{ key: "created_at", label: t("fields.createdAt") },
{ key: "updated_at", label: t("fields.updatedAt") },
]}
/> />
</Container> </Container>
</div> </div>
@@ -55,7 +55,11 @@ export const UserListTable = () => {
count={count} count={count}
pageSize={PAGE_SIZE} pageSize={PAGE_SIZE}
isLoading={isLoading} isLoading={isLoading}
orderBy={["email", "first_name", "last_name"]} orderBy={[
{ key: "email", label: t("fields.email") },
{ key: "first_name", label: t("fields.firstName") },
{ key: "last_name", label: t("fields.lastName") },
]}
navigateTo={(row) => `${row.id}`} navigateTo={(row) => `${row.id}`}
search search
pagination pagination
@@ -50,6 +50,16 @@ export interface ApiKeyDTO {
*/ */
created_at: Date created_at: Date
/**
* The date the API key was updated.
*/
updated_at: Date
/**
* The date the API key was deleted.
*/
deleted_at: Date | null
/** /**
* Who revoked the API key. For example, * Who revoked the API key. For example,
* the ID of the user that revoked it. * the ID of the user that revoked it.
@@ -10,8 +10,10 @@ interface AdminApiKey {
last_used_at: Date | null last_used_at: Date | null
created_by: string created_by: string
created_at: Date created_at: Date
updated_at: Date
revoked_by: string | null revoked_by: string | null
revoked_at: Date | null revoked_at: Date | null
deleted_at: Date | null
} }
export interface AdminApiKeyResponse { export interface AdminApiKeyResponse {
@@ -16,6 +16,9 @@ export interface AdminCampaign {
limit: number limit: number
used: number used: number
} }
created_at: string
updated_at: string
deleted_at: string | null
} }
export type AdminCampaignListResponse = PaginatedResponse<{ export type AdminCampaignListResponse = PaginatedResponse<{
@@ -39,6 +39,9 @@ export interface BasePromotion {
rules?: BasePromotionRule[] rules?: BasePromotionRule[]
campaign_id?: string campaign_id?: string
campaign?: AdminCampaign campaign?: AdminCampaign
created_at: string
updated_at: string
deleted_at: string | null
} }
export interface BasePromotionRuleValue { export interface BasePromotionRuleValue {