d37ff8024d
**Dashboard** - Adds different views for managing manual/custom gift cards (not associated with a product gift card). - Cleans up several table implementations to use new DataTable component. - Minor cleanup of translation file. **Medusa** - Adds missing query params for list endpoints in the following admin domains: /customers, /customer-groups, /collections, and /gift-cards. **UI** - Adds new sizes for Badge component. **Note for review** Since this PR contains updates to the translation keys, it touches a lot of files. For the review the parts that are relevant are: the /gift-cards domain of admin, the table overview of collections, customers, and customer groups. And the changes to the list endpoints in the core.
75 lines
1.7 KiB
TypeScript
75 lines
1.7 KiB
TypeScript
import { memo } from "react"
|
|
import { NoRecords } from "../../common/empty-table-content"
|
|
import { DataTableQuery, DataTableQueryProps } from "./data-table-query"
|
|
import { DataTableRoot, DataTableRootProps } from "./data-table-root"
|
|
import { DataTableSkeleton } from "./data-table-skeleton"
|
|
|
|
interface DataTableProps<TData>
|
|
extends DataTableRootProps<TData>,
|
|
DataTableQueryProps {
|
|
isLoading?: boolean
|
|
rowCount: number
|
|
queryObject?: Record<string, any>
|
|
}
|
|
|
|
const MemoizedDataTableRoot = memo(DataTableRoot) as typeof DataTableRoot
|
|
const MemoizedDataTableQuery = memo(DataTableQuery)
|
|
|
|
export const DataTable = <TData,>({
|
|
table,
|
|
columns,
|
|
pagination,
|
|
navigateTo,
|
|
commands,
|
|
count = 0,
|
|
search = false,
|
|
orderBy,
|
|
filters,
|
|
prefix,
|
|
queryObject = {},
|
|
rowCount,
|
|
isLoading = false,
|
|
}: DataTableProps<TData>) => {
|
|
if (isLoading) {
|
|
return (
|
|
<DataTableSkeleton
|
|
columns={columns}
|
|
rowCount={rowCount}
|
|
searchable={search}
|
|
filterable={!!filters?.length}
|
|
orderBy={!!orderBy?.length}
|
|
pagination={!!pagination}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const noQuery =
|
|
Object.values(queryObject).filter((v) => Boolean(v)).length === 0
|
|
const noResults = !isLoading && count === 0 && !noQuery
|
|
const noRecords = !isLoading && count === 0 && noQuery
|
|
|
|
if (noRecords) {
|
|
return <NoRecords />
|
|
}
|
|
|
|
return (
|
|
<div className="divide-y">
|
|
<MemoizedDataTableQuery
|
|
search={search}
|
|
orderBy={orderBy}
|
|
filters={filters}
|
|
prefix={prefix}
|
|
/>
|
|
<MemoizedDataTableRoot
|
|
table={table}
|
|
count={count}
|
|
columns={columns}
|
|
pagination
|
|
navigateTo={navigateTo}
|
|
commands={commands}
|
|
noResults={noResults}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|