feat(medusa,dashboard): Tax settings pages and fixes to list tax rates endpoint (#6606)
**What** - Adds pages for managing tax settings and tax rates for regions. - Fixes `list` tax rates endpoint, which was missing pagination, search, order, and filters. **Note** The fix to the tax rate list endpoint is very rough, as I have had to reimplement most of the logic from our transformQuery middleware. This is because this endpoints does not follow normal convention for fields and expand and uses string arrays instead of strings separated by commas. Our middleware does not support this, and changing the endpoint to align with other endpoints on the expand and fields params would be a breaking change. Since this is very temporary until 2.0 I think it's okay for the time being. CLOSES CORE-1654
This commit is contained in:
committed by
GitHub
parent
7109969874
commit
c2d56ca12b
@@ -109,7 +109,7 @@ export const DateFilter = ({
|
||||
sideOffset={8}
|
||||
collisionPadding={24}
|
||||
className={clx(
|
||||
"bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout max-h-[var(--radix-popper-available-height)] w-[300px] overflow-hidden rounded-lg"
|
||||
"bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout h-full max-h-[var(--radix-popper-available-height)] w-[300px] overflow-auto rounded-lg"
|
||||
)}
|
||||
onInteractOutside={(e) => {
|
||||
if (e.target instanceof HTMLElement) {
|
||||
|
||||
@@ -9,6 +9,7 @@ type DataTableSkeletonProps = {
|
||||
orderBy: boolean
|
||||
filterable: boolean
|
||||
pagination: boolean
|
||||
layout?: "fit" | "fill"
|
||||
}
|
||||
|
||||
export const DataTableSkeleton = ({
|
||||
@@ -18,6 +19,7 @@ export const DataTableSkeleton = ({
|
||||
searchable,
|
||||
orderBy,
|
||||
pagination,
|
||||
layout = "fit",
|
||||
}: DataTableSkeletonProps) => {
|
||||
const rows = Array.from({ length: rowCount }, (_, i) => i)
|
||||
|
||||
@@ -30,7 +32,11 @@ export const DataTableSkeleton = ({
|
||||
const colWidth = 100 / colCount
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
className={clx({
|
||||
"flex h-full flex-col overflow-hidden": layout === "fill",
|
||||
})}
|
||||
>
|
||||
{hasToolbar && (
|
||||
<div className="flex items-center justify-between px-6 py-4">
|
||||
{filterable && <Skeleton className="h-7 w-full max-w-[160px]" />}
|
||||
@@ -42,74 +48,91 @@ export const DataTableSkeleton = ({
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<Table>
|
||||
<Table.Header>
|
||||
<Table.Row
|
||||
className={clx({
|
||||
"border-b-0 [&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap":
|
||||
hasActions,
|
||||
"[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap":
|
||||
hasSelect,
|
||||
<div
|
||||
className={clx("flex w-full flex-col overflow-hidden", {
|
||||
"flex flex-1 flex-col": layout === "fill",
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={clx("w-full", {
|
||||
"min-h-0 flex-grow overflow-hidden": layout === "fill",
|
||||
"overflow-x-auto": layout === "fit",
|
||||
})}
|
||||
>
|
||||
<Table>
|
||||
<Table.Header>
|
||||
<Table.Row
|
||||
className={clx({
|
||||
"border-b-0 [&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap":
|
||||
hasActions,
|
||||
"[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap":
|
||||
hasSelect,
|
||||
})}
|
||||
>
|
||||
{columns.map((col, i) => {
|
||||
const isSelectHeader = col.id === "select"
|
||||
const isActionsHeader = col.id === "actions"
|
||||
|
||||
const isSpecialHeader = isSelectHeader || isActionsHeader
|
||||
|
||||
return (
|
||||
<Table.HeaderCell
|
||||
key={i}
|
||||
style={{
|
||||
width: !isSpecialHeader ? `${colWidth}%` : undefined,
|
||||
}}
|
||||
>
|
||||
{isActionsHeader ? null : (
|
||||
<Skeleton
|
||||
className={clx("h-7", {
|
||||
"w-7": isSelectHeader,
|
||||
"w-full": !isSelectHeader,
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
</Table.HeaderCell>
|
||||
)
|
||||
})}
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{rows.map((_, j) => (
|
||||
<Table.Row key={j}>
|
||||
{columns.map((col, k) => {
|
||||
const isSpecialCell =
|
||||
col.id === "select" || col.id === "actions"
|
||||
|
||||
return (
|
||||
<Table.Cell key={k}>
|
||||
<Skeleton
|
||||
className={clx("h-7", {
|
||||
"w-7": isSpecialCell,
|
||||
"w-full": !isSpecialCell,
|
||||
})}
|
||||
/>
|
||||
</Table.Cell>
|
||||
)
|
||||
})}
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
</div>
|
||||
{pagination && (
|
||||
<div
|
||||
className={clx("flex items-center justify-between p-4", {
|
||||
"border-t": layout === "fill",
|
||||
})}
|
||||
>
|
||||
{columns.map((col, i) => {
|
||||
const isSelectHeader = col.id === "select"
|
||||
const isActionsHeader = col.id === "actions"
|
||||
|
||||
const isSpecialHeader = isSelectHeader || isActionsHeader
|
||||
|
||||
return (
|
||||
<Table.HeaderCell
|
||||
key={i}
|
||||
style={{
|
||||
width: !isSpecialHeader ? `${colWidth}%` : undefined,
|
||||
}}
|
||||
>
|
||||
{isActionsHeader ? null : (
|
||||
<Skeleton
|
||||
className={clx("h-7", {
|
||||
"w-7": isSelectHeader,
|
||||
"w-full": !isSelectHeader,
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
</Table.HeaderCell>
|
||||
)
|
||||
})}
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{rows.map((_, j) => (
|
||||
<Table.Row key={j}>
|
||||
{columns.map((col, k) => {
|
||||
const isSpecialCell =
|
||||
col.id === "select" || col.id === "actions"
|
||||
|
||||
return (
|
||||
<Table.Cell key={k}>
|
||||
<Skeleton
|
||||
className={clx("h-7", {
|
||||
"w-7": isSpecialCell,
|
||||
"w-full": !isSpecialCell,
|
||||
})}
|
||||
/>
|
||||
</Table.Cell>
|
||||
)
|
||||
})}
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
{pagination && (
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<Skeleton className="h-7 w-[138px]" />
|
||||
<div className="flex items-center gap-x-2">
|
||||
<Skeleton className="h-7 w-24" />
|
||||
<Skeleton className="h-7 w-11" />
|
||||
<Skeleton className="h-7 w-11" />
|
||||
<Skeleton className="h-7 w-[138px]" />
|
||||
<div className="flex items-center gap-x-2">
|
||||
<Skeleton className="h-7 w-24" />
|
||||
<Skeleton className="h-7 w-11" />
|
||||
<Skeleton className="h-7 w-11" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -36,6 +36,7 @@ export const DataTable = <TData,>({
|
||||
if (isLoading) {
|
||||
return (
|
||||
<DataTableSkeleton
|
||||
layout={layout}
|
||||
columns={columns}
|
||||
rowCount={pageSize}
|
||||
searchable={search}
|
||||
@@ -52,7 +53,13 @@ export const DataTable = <TData,>({
|
||||
const noRecords = !isLoading && count === 0 && noQuery
|
||||
|
||||
if (noRecords) {
|
||||
return <NoRecords />
|
||||
return (
|
||||
<NoRecords
|
||||
className={clx({
|
||||
"flex h-full flex-col overflow-hidden": layout === "fill",
|
||||
})}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user