Client: Make table use the refine sorters/filters

That way, Refine is in charge of the sorters/filters state, instead of Refine and AntD each having their own state for it.
This commit is contained in:
Donkie
2023-07-06 19:32:48 +02:00
parent e42b206d7d
commit 3c8e414aef
3 changed files with 29 additions and 53 deletions

View File

@@ -108,49 +108,43 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex="id" dataIndex="id"
title="Id" title="Id"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField(sorters_initial, "id")} sortOrder={getSortOrderForField(sorters, "id")}
/> />
<Table.Column <Table.Column
dataIndex="vendor_name" dataIndex="vendor_name"
title="Vendor" title="Vendor"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField( sortOrder={getSortOrderForField(sorters, "vendor_name")}
sorters_initial,
"vendor_name"
)}
filters={filterPopulator(dataSource, "vendor_name")} filters={filterPopulator(dataSource, "vendor_name")}
defaultFilteredValue={getFiltersForField( filteredValue={getFiltersForField(filters, "vendor_name")}
filters_initial,
"vendor_name"
)}
/> />
<Table.Column <Table.Column
dataIndex="name" dataIndex="name"
title="Name" title="Name"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField(sorters_initial, "name")} sortOrder={getSortOrderForField(sorters, "name")}
filters={filterPopulator(dataSource, "name")} filters={filterPopulator(dataSource, "name")}
defaultFilteredValue={getFiltersForField(filters_initial, "name")} filteredValue={getFiltersForField(filters, "name")}
/> />
<Table.Column <Table.Column
dataIndex="material" dataIndex="material"
title="Material" title="Material"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField(sorters_initial, "material")} sortOrder={getSortOrderForField(sorters, "material")}
filters={filterPopulator(dataSource, "material")} filters={filterPopulator(dataSource, "material")}
defaultFilteredValue={getFiltersForField(filters_initial, "material")} filteredValue={getFiltersForField(filters, "material")}
/> />
<Table.Column <Table.Column
dataIndex="price" dataIndex="price"
title="Price" title="Price"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField(sorters_initial, "price")} sortOrder={getSortOrderForField(sorters, "price")}
/> />
<Table.Column <Table.Column
dataIndex="density" dataIndex="density"
title="Density" title="Density"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField(sorters_initial, "density")} sortOrder={getSortOrderForField(sorters, "density")}
render={(value) => ( render={(value) => (
<NumberFieldUnit <NumberFieldUnit
value={value} value={value}
@@ -165,7 +159,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex="diameter" dataIndex="diameter"
title="Diameter" title="Diameter"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField(sorters_initial, "diameter")} sortOrder={getSortOrderForField(sorters, "diameter")}
render={(value) => ( render={(value) => (
<NumberFieldUnit <NumberFieldUnit
value={value} value={value}
@@ -180,7 +174,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex="weight" dataIndex="weight"
title="Weight" title="Weight"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField(sorters_initial, "weight")} sortOrder={getSortOrderForField(sorters, "weight")}
render={(value) => { render={(value) => {
if (value === null || value === undefined) { if (value === null || value === undefined) {
return <></>; return <></>;
@@ -200,10 +194,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex="spool_weight" dataIndex="spool_weight"
title="Spool Weight" title="Spool Weight"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField( sortOrder={getSortOrderForField(sorters, "spool_weight")}
sorters_initial,
"spool_weight"
)}
render={(value) => { render={(value) => {
if (value === null || value === undefined) { if (value === null || value === undefined) {
return <></>; return <></>;
@@ -223,21 +214,15 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex="article_number" dataIndex="article_number"
title="Article Number" title="Article Number"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField( sortOrder={getSortOrderForField(sorters, "article_number")}
sorters_initial,
"article_number"
)}
filters={filterPopulator(dataSource, "article_number")} filters={filterPopulator(dataSource, "article_number")}
defaultFilteredValue={getFiltersForField( filteredValue={getFiltersForField(filters, "article_number")}
filters_initial,
"article_number"
)}
/> />
<Table.Column <Table.Column
dataIndex={["registered"]} dataIndex={["registered"]}
title="Registered" title="Registered"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField(sorters_initial, "registered")} sortOrder={getSortOrderForField(sorters, "registered")}
render={(value) => ( render={(value) => (
<DateField <DateField
value={dayjs.utc(value).local()} value={dayjs.utc(value).local()}
@@ -250,7 +235,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex={["comment"]} dataIndex={["comment"]}
title="Comment" title="Comment"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField(sorters_initial, "comment")} sortOrder={getSortOrderForField(sorters, "comment")}
/> />
<Table.Column <Table.Column
title="Actions" title="Actions"

View File

@@ -81,25 +81,19 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
dataIndex="id" dataIndex="id"
title="Id" title="Id"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField(sorters_initial, "id")} sortOrder={getSortOrderForField(sorters, "id")}
/> />
<Table.Column <Table.Column
dataIndex="filament_name" dataIndex="filament_name"
title="Filament" title="Filament"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField( sortOrder={getSortOrderForField(sorters, "filament_name")}
sorters_initial,
"filament_name"
)}
/> />
<Table.Column <Table.Column
dataIndex="used_weight" dataIndex="used_weight"
title="Used Weight" title="Used Weight"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField( sortOrder={getSortOrderForField(sorters, "used_weight")}
sorters_initial,
"used_weight"
)}
render={(value) => { render={(value) => {
return ( return (
<NumberFieldUnit <NumberFieldUnit
@@ -116,10 +110,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
dataIndex="remaining_weight" dataIndex="remaining_weight"
title="Estimated Remaining Weight" title="Estimated Remaining Weight"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField( sortOrder={getSortOrderForField(sorters, "remaining_weight")}
sorters_initial,
"remaining_weight"
)}
render={(value) => { render={(value) => {
if (value === null || value === undefined) { if (value === null || value === undefined) {
return <TextField value="Unknown" />; return <TextField value="Unknown" />;
@@ -139,19 +130,19 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
dataIndex="location" dataIndex="location"
title="Location" title="Location"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField(sorters_initial, "location")} sortOrder={getSortOrderForField(sorters, "location")}
/> />
<Table.Column <Table.Column
dataIndex="lot_nr" dataIndex="lot_nr"
title="Lot Nr" title="Lot Nr"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField(sorters_initial, "lot_nr")} sortOrder={getSortOrderForField(sorters, "lot_nr")}
/> />
<Table.Column <Table.Column
dataIndex={["first_used"]} dataIndex={["first_used"]}
title="First Used" title="First Used"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField(sorters_initial, "first_used")} sortOrder={getSortOrderForField(sorters, "first_used")}
render={(value) => ( render={(value) => (
<DateField <DateField
hidden={!value} hidden={!value}
@@ -165,7 +156,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
dataIndex={["last_used"]} dataIndex={["last_used"]}
title="Last Used" title="Last Used"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField(sorters_initial, "last_used")} sortOrder={getSortOrderForField(sorters, "last_used")}
render={(value) => ( render={(value) => (
<DateField <DateField
hidden={!value} hidden={!value}
@@ -179,7 +170,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
dataIndex={["comment"]} dataIndex={["comment"]}
title="Comment" title="Comment"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField(sorters_initial, "comment")} sortOrder={getSortOrderForField(sorters, "comment")}
/> />
<Table.Column <Table.Column
title="Actions" title="Actions"

View File

@@ -70,19 +70,19 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
dataIndex="id" dataIndex="id"
title="Id" title="Id"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField(sorters_initial, "id")} sortOrder={getSortOrderForField(sorters, "id")}
/> />
<Table.Column <Table.Column
dataIndex="name" dataIndex="name"
title="Name" title="Name"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField(sorters_initial, "name")} sortOrder={getSortOrderForField(sorters, "name")}
/> />
<Table.Column <Table.Column
dataIndex={["registered"]} dataIndex={["registered"]}
title="Registered" title="Registered"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField(sorters_initial, "registered")} sortOrder={getSortOrderForField(sorters, "registered")}
render={(value) => ( render={(value) => (
<DateField <DateField
value={dayjs.utc(value).local()} value={dayjs.utc(value).local()}
@@ -95,7 +95,7 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
dataIndex={["comment"]} dataIndex={["comment"]}
title="Comment" title="Comment"
sorter={true} sorter={true}
defaultSortOrder={getSortOrderForField(sorters_initial, "comment")} sortOrder={getSortOrderForField(sorters, "comment")}
/> />
<Table.Column <Table.Column
title="Actions" title="Actions"