diff --git a/client/src/components/spoolSelectModal.tsx b/client/src/components/spoolSelectModal.tsx index 3a95512..afe5e4b 100644 --- a/client/src/components/spoolSelectModal.tsx +++ b/client/src/components/spoolSelectModal.tsx @@ -17,7 +17,7 @@ interface Props { } interface ISpoolCollapsed extends ISpool { - combined_name: string; + "filament.combined_name": string; "filament.id": number; "filament.material"?: string; } @@ -31,7 +31,7 @@ function collapseSpool(element: ISpool): ISpoolCollapsed { } return { ...element, - combined_name: filament_name, + "filament.combined_name": filament_name, "filament.id": element.filament.id, "filament.material": element.filament.material, }; @@ -157,8 +157,8 @@ const SpoolSelectModal: React.FC = ({ visible, description, onCancel, onC }), SpoolIconColumn({ ...commonProps, - id: "combined_name", - dataId: "filament.id", + id: "filament.combined_name", + dataId: "filament.combined_name", i18nkey: "spool.fields.filament_name", color: (record: ISpoolCollapsed) => record.filament.color_hex, filterValueQuery: useSpoolmanFilamentFilter(), diff --git a/client/src/pages/spools/list.tsx b/client/src/pages/spools/list.tsx index a81a661..9a728b6 100644 --- a/client/src/pages/spools/list.tsx +++ b/client/src/pages/spools/list.tsx @@ -43,7 +43,7 @@ dayjs.extend(utc); const { confirm } = Modal; interface ISpoolCollapsed extends ISpool { - combined_name: string; // Eg. "Prusa - PLA Red" + "filament.combined_name": string; // Eg. "Prusa - PLA Red" "filament.id": number; "filament.material"?: string; } @@ -60,7 +60,7 @@ function collapseSpool(element: ISpool): ISpoolCollapsed { } return { ...element, - combined_name: filament_name, + "filament.combined_name": filament_name, "filament.id": element.filament.id, "filament.material": element.filament.material, }; @@ -68,7 +68,7 @@ function collapseSpool(element: ISpool): ISpoolCollapsed { function translateColumnI18nKey(columnName: string): string { columnName = columnName.replace(".", "_"); - if (columnName === "combined_name") columnName = "filament_name"; + if (columnName === "filament_combined_name") columnName = "filament_name"; else if (columnName === "filament_material") columnName = "material"; return `spool.fields.${columnName}`; } @@ -77,7 +77,7 @@ const namespace = "spoolList-v2"; const allColumns: (keyof ISpoolCollapsed & string)[] = [ "id", - "combined_name", + "filament.combined_name", "filament.material", "price", "used_weight", @@ -224,6 +224,21 @@ export const SpoolList: React.FC = () => { return actions; }; + const originalOnChange = tableProps.onChange; + tableProps.onChange = (pagination, filters, sorter, extra) => { + // Rename any key called "filament.combined_name" in filters to "filament.id" + // This is because we want to use combined_name for sorting, but id for filtering, + // and Ant Design and Refine only supports specifying a single field for both. + Object.keys(filters).forEach((key) => { + if (key === "filament.combined_name") { + filters["filament.id"] = filters[key]; + delete filters[key]; + } + }); + + originalOnChange?.(pagination, filters, sorter, extra); + }; + const commonProps = { t, navigate, @@ -323,10 +338,10 @@ export const SpoolList: React.FC = () => { }), SpoolIconColumn({ ...commonProps, - id: "combined_name", + id: "filament.combined_name", i18nkey: "spool.fields.filament_name", color: (record: ISpoolCollapsed) => record.filament.color_hex, - dataId: "filament.id", + dataId: "filament.combined_name", filterValueQuery: useSpoolmanFilamentFilter(), }), FilteredQueryColumn({