tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Client: Stricter typing

Browse Source
This commit is contained in:
Donkie
2023-07-06 22:36:41 +02:00
parent 04a39dfcbe
commit b1af320a54
17 changed files with 248 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/pages/filaments/create.tsx
View File

@@ -4,6 +4,8 @@ import { Create, useForm, useSelect } from "@refinedev/antd";
import { Form, Input, Select, InputNumber, ColorPicker } from "antd";
import TextArea from "antd/es/input/TextArea";
import { numberFormatter, numberParser } from "../../utils/parsing";
import { IVendor } from "../vendors/model";
import { IFilament } from "./model";
interface CreateOrCloneProps {
mode: "create" | "clone";
@@ -12,7 +14,7 @@ interface CreateOrCloneProps {
export const FilamentCreate: React.FC<
IResourceComponentsProps & CreateOrCloneProps
> = (props) => {
const { formProps, saveButtonProps, formLoading } = useForm();
const { formProps, saveButtonProps, formLoading } = useForm<IFilament>();
if (props.mode === "clone" && formProps.initialValues) {
// Fix the vendor_id
@@ -21,7 +23,7 @@ export const FilamentCreate: React.FC<
}
}
const { selectProps } = useSelect({
const { selectProps } = useSelect<IVendor>({
resource: "vendor",
optionLabel: "name",
});

6
client/src/pages/filaments/edit.tsx
View File

@@ -12,11 +12,13 @@ import {
import dayjs from "dayjs";
import TextArea from "antd/es/input/TextArea";
import { numberFormatter, numberParser } from "../../utils/parsing";
import { IVendor } from "../vendors/model";
import { IFilament } from "./model";
export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
const { formProps, saveButtonProps } = useForm();
const { formProps, saveButtonProps } = useForm<IFilament>();
const { selectProps } = useSelect({
const { selectProps } = useSelect<IVendor>({
resource: "vendor",
optionLabel: "name",
});

79
client/src/pages/filaments/list.tsx
View File

@@ -14,12 +14,16 @@ import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { IFilament } from "./model";
import {
filterPopulator,
genericFilterer,
genericSorter,
getFiltersForField,
getSortOrderForField,
typeSorters,
} from "../../utils/sorting";
import {
genericFilterer,
getFiltersForField,
typeFilters,
useListFiltersForField,
} from "../../utils/filtering";
import { FilterOutlined } from "@ant-design/icons";
import {
useInitialTableState,
@@ -28,6 +32,10 @@ import {
dayjs.extend(utc);
interface IFilamentCollapsed extends IFilament {
vendor_name: string | null;
}
export const FilamentList: React.FC<IResourceComponentsProps> = () => {
// Load initial state
const initialState = useInitialTableState("filamentList");
@@ -49,26 +57,31 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
},
});
// Type the sorters and filters
const typedSorters = typeSorters<IFilamentCollapsed>(sorters);
const typedFilters = typeFilters<IFilamentCollapsed>(filters);
// Store state in local storage
useStoreInitialState("filamentList", { sorters, filters });
// Copy dataSource to avoid mutating the original
const dataSource = [...(tableProps.dataSource || [])];
// Add a vendor_name field to the dataSource
dataSource.forEach((element) => {
// Collapse the dataSource to a mutable list and add a filament_name field
const dataSource: IFilamentCollapsed[] = (tableProps.dataSource ?? []).map(
(element) => {
let vendor_name: string | null;
if (element.vendor) {
element.vendor_name = element.vendor.name;
vendor_name = element.vendor.name;
} else {
element.vendor_name = null;
vendor_name = null;
}
});
return { ...element, vendor_name };
}
);
// Filter dataSource by the filters
const filteredDataSource = dataSource.filter(genericFilterer(filters));
const filteredDataSource = dataSource.filter(genericFilterer(typedFilters));
// Sort dataSource by the sorters
filteredDataSource.sort(genericSorter(sorters));
filteredDataSource.sort(genericSorter(typedSorters));
return (
<List
@@ -98,43 +111,43 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex="id"
title="Id"
sorter={true}
sortOrder={getSortOrderForField(sorters, "id")}
sortOrder={getSortOrderForField(typedSorters, "id")}
/>
<Table.Column
dataIndex="vendor_name"
title="Vendor"
sorter={true}
sortOrder={getSortOrderForField(sorters, "vendor_name")}
filters={filterPopulator(dataSource, "vendor_name")}
filteredValue={getFiltersForField(filters, "vendor_name")}
sortOrder={getSortOrderForField(typedSorters, "vendor_name")}
filters={useListFiltersForField(dataSource, "vendor_name")}
filteredValue={getFiltersForField(typedFilters, "vendor_name")}
/>
<Table.Column
dataIndex="name"
title="Name"
sorter={true}
sortOrder={getSortOrderForField(sorters, "name")}
filters={filterPopulator(dataSource, "name")}
filteredValue={getFiltersForField(filters, "name")}
sortOrder={getSortOrderForField(typedSorters, "name")}
filters={useListFiltersForField(dataSource, "name")}
filteredValue={getFiltersForField(typedFilters, "name")}
/>
<Table.Column
dataIndex="material"
title="Material"
sorter={true}
sortOrder={getSortOrderForField(sorters, "material")}
filters={filterPopulator(dataSource, "material")}
filteredValue={getFiltersForField(filters, "material")}
sortOrder={getSortOrderForField(typedSorters, "material")}
filters={useListFiltersForField(dataSource, "material")}
filteredValue={getFiltersForField(typedFilters, "material")}
/>
<Table.Column
dataIndex="price"
title="Price"
sorter={true}
sortOrder={getSortOrderForField(sorters, "price")}
sortOrder={getSortOrderForField(typedSorters, "price")}
/>
<Table.Column
dataIndex="density"
title="Density"
sorter={true}
sortOrder={getSortOrderForField(sorters, "density")}
sortOrder={getSortOrderForField(typedSorters, "density")}
render={(value) => (
<NumberFieldUnit
value={value}
@@ -149,7 +162,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex="diameter"
title="Diameter"
sorter={true}
sortOrder={getSortOrderForField(sorters, "diameter")}
sortOrder={getSortOrderForField(typedSorters, "diameter")}
render={(value) => (
<NumberFieldUnit
value={value}
@@ -164,7 +177,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex="weight"
title="Weight"
sorter={true}
sortOrder={getSortOrderForField(sorters, "weight")}
sortOrder={getSortOrderForField(typedSorters, "weight")}
render={(value) => {
if (value === null || value === undefined) {
return <></>;
@@ -184,7 +197,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex="spool_weight"
title="Spool Weight"
sorter={true}
sortOrder={getSortOrderForField(sorters, "spool_weight")}
sortOrder={getSortOrderForField(typedSorters, "spool_weight")}
render={(value) => {
if (value === null || value === undefined) {
return <></>;
@@ -204,15 +217,15 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex="article_number"
title="Article Number"
sorter={true}
sortOrder={getSortOrderForField(sorters, "article_number")}
filters={filterPopulator(dataSource, "article_number")}
filteredValue={getFiltersForField(filters, "article_number")}
sortOrder={getSortOrderForField(typedSorters, "article_number")}
filters={useListFiltersForField(dataSource, "article_number")}
filteredValue={getFiltersForField(typedFilters, "article_number")}
/>
<Table.Column
dataIndex={["registered"]}
title="Registered"
sorter={true}
sortOrder={getSortOrderForField(sorters, "registered")}
sortOrder={getSortOrderForField(typedSorters, "registered")}
render={(value) => (
<DateField
value={dayjs.utc(value).local()}
@@ -225,7 +238,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex={["comment"]}
title="Comment"
sorter={true}
sortOrder={getSortOrderForField(sorters, "comment")}
sortOrder={getSortOrderForField(typedSorters, "comment")}
/>
<Table.Column
title="Actions"

1
client/src/pages/filaments/model.tsx
View File

@@ -16,5 +16,4 @@ export interface IFilament {
settings_extruder_temp?: number;
settings_bed_temp?: number;
color_hex?: string;
[key: string]: unknown;
}

3
client/src/pages/filaments/show.tsx
View File

@@ -5,13 +5,14 @@ import { Typography } from "antd";
import { NumberFieldUnit } from "../../components/numberField";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { IFilament } from "./model";
dayjs.extend(utc);
const { Title } = Typography;
export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
const { queryResult } = useShow();
const { queryResult } = useShow<IFilament>();
const { data, isLoading } = queryResult;
const record = data?.data;

3
client/src/pages/spools/create.tsx
View File

@@ -5,6 +5,7 @@ import { Form, Input, DatePicker, Select, InputNumber } from "antd";
import dayjs from "dayjs";
import TextArea from "antd/es/input/TextArea";
import { IFilament } from "../filaments/model";
import { ISpool } from "./model";
interface CreateOrCloneProps {
mode: "create" | "clone";
@@ -13,7 +14,7 @@ interface CreateOrCloneProps {
export const SpoolCreate: React.FC<
IResourceComponentsProps & CreateOrCloneProps
> = (props) => {
const { formProps, saveButtonProps, formLoading } = useForm();
const { formProps, saveButtonProps, formLoading } = useForm<ISpool>();
if (props.mode === "clone" && formProps.initialValues) {
// Clear out the values that we don't want to clone

3
client/src/pages/spools/edit.tsx
View File

@@ -5,9 +5,10 @@ import { Form, Input, DatePicker, Select, InputNumber } from "antd";
import dayjs from "dayjs";
import TextArea from "antd/es/input/TextArea";
import { IFilament } from "../filaments/model";
import { ISpool } from "./model";
export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
const { formProps, saveButtonProps } = useForm();
const { formProps, saveButtonProps } = useForm<ISpool>();
const { queryResult } = useSelect<IFilament>({
resource: "filament",

69
client/src/pages/spools/list.tsx
View File

@@ -14,12 +14,16 @@ import { NumberFieldUnit } from "../../components/numberField";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import {
filterPopulator,
genericFilterer,
genericSorter,
getFiltersForField,
getSortOrderForField,
typeSorters,
} from "../../utils/sorting";
import {
genericFilterer,
getFiltersForField,
typeFilters,
useListFiltersForField,
} from "../../utils/filtering";
import { ISpool } from "./model";
import {
useInitialTableState,
@@ -29,6 +33,10 @@ import { FilterOutlined } from "@ant-design/icons";
dayjs.extend(utc);
interface ISpoolCollapsed extends ISpool {
filament_name: string;
}
export const SpoolList: React.FC<IResourceComponentsProps> = () => {
// Load initial state
const initialState = useInitialTableState("spoolList");
@@ -50,26 +58,31 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
},
});
// Type the sorters and filters
const typedSorters = typeSorters<ISpoolCollapsed>(sorters);
const typedFilters = typeFilters<ISpoolCollapsed>(filters);
// Store state in local storage
useStoreInitialState("spoolList", { sorters, filters });
// Copy dataSource to avoid mutating the original
const dataSource = [...(tableProps.dataSource || [])];
// Add a filament_name field to the dataSource
dataSource.forEach((element) => {
// Collapse the dataSource to a mutable list and add a filament_name field
const dataSource: ISpoolCollapsed[] = (tableProps.dataSource ?? []).map(
(element) => {
let filament_name: string;
if (element.filament.vendor && "name" in element.filament.vendor) {
element.filament_name = `${element.filament.vendor.name} - ${element.filament.name}`;
filament_name = `${element.filament.vendor.name} - ${element.filament.name}`;
} else {
element.filament_name = element.filament.name;
filament_name = element.filament.name ?? element.filament.id.toString();
}
});
return { ...element, filament_name };
}
);
// Filter dataSource by the filters
const filteredDataSource = dataSource.filter(genericFilterer(filters));
const filteredDataSource = dataSource.filter(genericFilterer(typedFilters));
// Sort dataSource by the sorters
filteredDataSource.sort(genericSorter(sorters));
filteredDataSource.sort(genericSorter(typedSorters));
return (
<List
@@ -99,21 +112,21 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
dataIndex="id"
title="Id"
sorter={true}
sortOrder={getSortOrderForField(sorters, "id")}
sortOrder={getSortOrderForField(typedSorters, "id")}
/>
<Table.Column
dataIndex="filament_name"
title="Filament"
sorter={true}
sortOrder={getSortOrderForField(sorters, "filament_name")}
filters={filterPopulator(dataSource, "filament_name")}
filteredValue={getFiltersForField(filters, "filament_name")}
sortOrder={getSortOrderForField(typedSorters, "filament_name")}
filters={useListFiltersForField(dataSource, "filament_name")}
filteredValue={getFiltersForField(typedFilters, "filament_name")}
/>
<Table.Column
dataIndex="used_weight"
title="Used Weight"
sorter={true}
sortOrder={getSortOrderForField(sorters, "used_weight")}
sortOrder={getSortOrderForField(typedSorters, "used_weight")}
render={(value) => {
return (
<NumberFieldUnit
@@ -130,7 +143,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
dataIndex="remaining_weight"
title="Estimated Remaining Weight"
sorter={true}
sortOrder={getSortOrderForField(sorters, "remaining_weight")}
sortOrder={getSortOrderForField(typedSorters, "remaining_weight")}
render={(value) => {
if (value === null || value === undefined) {
return <TextField value="Unknown" />;
@@ -150,23 +163,23 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
dataIndex="location"
title="Location"
sorter={true}
sortOrder={getSortOrderForField(sorters, "location")}
filters={filterPopulator(dataSource, "location")}
filteredValue={getFiltersForField(filters, "location")}
sortOrder={getSortOrderForField(typedSorters, "location")}
filters={useListFiltersForField(dataSource, "location")}
filteredValue={getFiltersForField(typedFilters, "location")}
/>
<Table.Column
dataIndex="lot_nr"
title="Lot Nr"
sorter={true}
sortOrder={getSortOrderForField(sorters, "lot_nr")}
filters={filterPopulator(dataSource, "lot_nr")}
filteredValue={getFiltersForField(filters, "lot_nr")}
sortOrder={getSortOrderForField(typedSorters, "lot_nr")}
filters={useListFiltersForField(dataSource, "lot_nr")}
filteredValue={getFiltersForField(typedFilters, "lot_nr")}
/>
<Table.Column
dataIndex={["first_used"]}
title="First Used"
sorter={true}
sortOrder={getSortOrderForField(sorters, "first_used")}
sortOrder={getSortOrderForField(typedSorters, "first_used")}
render={(value) => (
<DateField
hidden={!value}
@@ -180,7 +193,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
dataIndex={["last_used"]}
title="Last Used"
sorter={true}
sortOrder={getSortOrderForField(sorters, "last_used")}
sortOrder={getSortOrderForField(typedSorters, "last_used")}
render={(value) => (
<DateField
hidden={!value}
@@ -194,7 +207,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
dataIndex={["comment"]}
title="Comment"
sorter={true}
sortOrder={getSortOrderForField(sorters, "comment")}
sortOrder={getSortOrderForField(typedSorters, "comment")}
/>
<Table.Column
title="Actions"

1
client/src/pages/spools/model.tsx
View File

@@ -11,5 +11,4 @@ export interface ISpool {
location?: string;
lot_nr?: string;
comment?: string;
[key: string]: unknown;
}

3
client/src/pages/spools/show.tsx
View File

@@ -5,13 +5,14 @@ import { Typography } from "antd";
import { NumberFieldUnit } from "../../components/numberField";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { ISpool } from "./model";
dayjs.extend(utc);
const { Title } = Typography;
export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
const { queryResult } = useShow();
const { queryResult } = useShow<ISpool>();
const { data, isLoading } = queryResult;
const record = data?.data;

3
client/src/pages/vendors/create.tsx vendored
View File

@@ -3,6 +3,7 @@ import { IResourceComponentsProps } from "@refinedev/core";
import { Create, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";
import TextArea from "antd/es/input/TextArea";
import { IVendor } from "./model";
interface CreateOrCloneProps {
mode: "create" | "clone";
@@ -11,7 +12,7 @@ interface CreateOrCloneProps {
export const VendorCreate: React.FC<
IResourceComponentsProps & CreateOrCloneProps
> = (props) => {
const { formProps, saveButtonProps, formLoading } = useForm();
const { formProps, saveButtonProps, formLoading } = useForm<IVendor>();
return (
<Create

3
client/src/pages/vendors/edit.tsx vendored
View File

@@ -4,9 +4,10 @@ import { Edit, useForm } from "@refinedev/antd";
import { Form, Input, DatePicker } from "antd";
import dayjs from "dayjs";
import TextArea from "antd/es/input/TextArea";
import { IVendor } from "./model";
export const VendorEdit: React.FC<IResourceComponentsProps> = () => {
const { formProps, saveButtonProps } = useForm();
const { formProps, saveButtonProps } = useForm<IVendor>();
return (
<Edit saveButtonProps={saveButtonProps}>

19
client/src/pages/vendors/list.tsx vendored
View File

@@ -12,10 +12,11 @@ import { Table, Space, Button } from "antd";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import {
genericFilterer,
genericSorter,
getSortOrderForField,
typeSorters,
} from "../../utils/sorting";
import { genericFilterer, typeFilters } from "../../utils/filtering";
import { IVendor } from "./model";
import {
useInitialTableState,
@@ -46,6 +47,10 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
},
});
// Type the sorters and filters
const typedSorters = typeSorters<IVendor>(sorters);
const typedFilters = typeFilters<IVendor>(filters);
// Store state in local storage
useStoreInitialState("vendorList", { sorters, filters });
@@ -53,10 +58,10 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
const dataSource = [...(tableProps.dataSource || [])];
// Filter dataSource by the filters
const filteredDataSource = dataSource.filter(genericFilterer(filters));
const filteredDataSource = dataSource.filter(genericFilterer(typedFilters));
// Sort dataSource by the sorters
filteredDataSource.sort(genericSorter(sorters));
filteredDataSource.sort(genericSorter(typedSorters));
return (
<List
@@ -86,19 +91,19 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
dataIndex="id"
title="Id"
sorter={true}
sortOrder={getSortOrderForField(sorters, "id")}
sortOrder={getSortOrderForField(typedSorters, "id")}
/>
<Table.Column
dataIndex="name"
title="Name"
sorter={true}
sortOrder={getSortOrderForField(sorters, "name")}
sortOrder={getSortOrderForField(typedSorters, "name")}
/>
<Table.Column
dataIndex={["registered"]}
title="Registered"
sorter={true}
sortOrder={getSortOrderForField(sorters, "registered")}
sortOrder={getSortOrderForField(typedSorters, "registered")}
render={(value) => (
<DateField
value={dayjs.utc(value).local()}
@@ -111,7 +116,7 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
dataIndex={["comment"]}
title="Comment"
sorter={true}
sortOrder={getSortOrderForField(sorters, "comment")}
sortOrder={getSortOrderForField(typedSorters, "comment")}
/>
<Table.Column
title="Actions"

1
client/src/pages/vendors/model.tsx vendored
View File

@@ -3,5 +3,4 @@ export interface IVendor {
registered: string;
name: string;
comment?: string;
[key: string]: unknown;
}

3
client/src/pages/vendors/show.tsx vendored
View File

@@ -4,13 +4,14 @@ import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
import { Typography } from "antd";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { IVendor } from "./model";
dayjs.extend(utc);
const { Title } = Typography;
export const VendorShow: React.FC<IResourceComponentsProps> = () => {
const { queryResult } = useShow();
const { queryResult } = useShow<IVendor>();
const { data, isLoading } = queryResult;
const record = data?.data;

112
client/src/utils/filtering.ts Normal file
View File

@@ -0,0 +1,112 @@
import { CrudFilter, CrudOperators } from "@refinedev/core";
import { ColumnFilterItem } from "antd/es/table/interface";
interface TypedCrudFilter<Obj> {
field: keyof Obj;
operator: Exclude<CrudOperators, "or" | "and">;
value: string[];
}
export function typeFilters<Obj>(filters: CrudFilter[]): TypedCrudFilter<Obj>[] {
return filters as TypedCrudFilter<Obj>[]; // <-- Unsafe cast
}
/**
* Returns a filtering function that can be used to filter an array of objects based on the provided filters.
* @param filters An array of `CrudFilter` objects that define the filtering criteria.
* @returns A function that returns a boolean value based on whether the provided object matches the filtering criteria.
*/
export function genericFilterer<Obj>(filters: TypedCrudFilter<Obj>[]) {
return (record: Obj) => {
for (const filter of filters) {
if (!("field" in filter)) {
console.error("Filter must be of type LogicalFilter");
return false;
}
if (!Array.isArray(filter.value)) {
console.error("Filter value must be an array of strings.");
return false;
}
if (!filter.value.length) {
continue;
}
const value = record[filter.field];
let strValue: string;
if (value === undefined || value === null) {
strValue = "";
} else {
if (typeof value !== "string") {
console.error("Only string fields can be filtered, field is of type " + typeof value);
return false;
} else {
strValue = value;
}
}
switch (filter.operator) {
case "in":
if (!filter.value.includes(strValue)) {
return false;
}
break;
default:
console.error(`Not implemented operator: ${filter.operator}`);
return false;
}
}
return true;
}
}
/**
* Populates an array of `ColumnFilterItem` objects based on the unique values of a given field in an array of objects.
* @param dataSource An array of objects to filter.
* @param field The name of the field to filter on.
* @returns An array of `ColumnFilterItem` objects representing the unique values of the specified field in the input array.
*/
export function useListFiltersForField<Obj, Field extends keyof Obj>(
dataSource: Obj[],
field: Field): ColumnFilterItem[] {
const filters: ColumnFilterItem[] = [];
dataSource.forEach((element) => {
const value = element[field];
if (typeof value === "string" && value !== "") {
// Make sure it's not already in the filters
if (filters.find((f) => f.value === value)) {
return;
}
filters.push({
text: value,
value: value,
});
}
});
// Sort the filters
filters.sort((a, b) => {
if (typeof a.text !== "string" || typeof b.text !== "string") {
return 0;
}
return a.text.localeCompare(b.text);
});
filters.push({
text: "<empty>",
value: "",
});
return filters;
}
/**
* Returns an array of filter values for a given field based on the provided filters.
* @param filters An array of `CrudFilter` objects that define the filtering criteria.
* @param field The field to get the filter values for.
* @returns An array of filter values for the given field.
*/
export function getFiltersForField<Obj, Field extends keyof Obj>(filters: TypedCrudFilter<Obj>[], field: Field): string[] {
const filterValues: string[] = [];
filters.forEach((filter) => {
if (filter.field === field) {
filterValues.push(...filter.value as string[]);
}
});
return filterValues;
}

109
client/src/utils/sorting.ts
View File

@@ -1,8 +1,10 @@
import { CrudFilter, CrudSort } from "@refinedev/core";
import { ColumnFilterItem, SortOrder } from "antd/es/table/interface";
import { CrudSort } from "@refinedev/core";
import { SortOrder } from "antd/es/table/interface";
interface IObj {
[key: string]: unknown;
interface TypedCrudSort<Obj> {
field: keyof Obj;
order: "asc" | "desc";
}
/**
@@ -10,8 +12,8 @@ interface IObj {
* @param sorters An array of `CrudSort` objects that define the sorting criteria.
* @returns A sorting function that can be used to sort an array of objects based on the provided sorters.
*/
export function genericSorter(sorters: CrudSort[]) {
return (a: IObj, b: IObj) => {
export function genericSorter<Obj>(sorters: TypedCrudSort<Obj>[]) {
return (a: Obj, b: Obj) => {
for (const sorter of sorters) {
const aValue = a[sorter.field];
const bValue = b[sorter.field];
@@ -67,7 +69,7 @@ export function genericSorter(sorters: CrudSort[]) {
* @param field The field to get the sort order for.
* @returns The sort order for the given field, or undefined if the field is not being sorted.
*/
export function getSortOrderForField(sorters: CrudSort[], field: string): SortOrder | undefined {
export function getSortOrderForField<Obj, Field extends keyof Obj>(sorters: TypedCrudSort<Obj>[], field: Field): SortOrder | undefined {
const sorter = sorters.find((s) => s.field === field);
if (sorter) {
return sorter.order === "asc" ? "ascend" : "descend";
@@ -75,95 +77,6 @@ export function getSortOrderForField(sorters: CrudSort[], field: string): SortOr
return undefined;
}
/**
* Returns a filtering function that can be used to filter an array of objects based on the provided filters.
* @param filters An array of `CrudFilter` objects that define the filtering criteria.
* @returns A function that returns a boolean value based on whether the provided object matches the filtering criteria.
*/
export function genericFilterer(filters: CrudFilter[]) {
return (record: IObj) => {
for (const filter of filters) {
if (!("field" in filter)) {
console.error("Filter must be of type LogicalFilter");
return false;
}
if (!Array.isArray(filter.value)) {
console.error("Filter value must be an array of strings.");
return false;
}
if (!filter.value.length) {
continue;
}
let value = record[filter.field];
if (value === undefined || value === null) {
value = "";
}
if (typeof value !== "string") {
console.error("Only string fields can be filtered, field is of type " + typeof value);
return false;
}
switch (filter.operator) {
case "in":
if (!filter.value.includes(value)) {
return false;
}
break;
default:
console.error(`Not implemented operator: ${filter.operator}`);
return false;
}
}
return true;
}
}
/**
* Populates an array of `ColumnFilterItem` objects based on the unique values of a given field in an array of objects.
* @param dataSource An array of objects to filter.
* @param field The name of the field to filter on.
* @returns An array of `ColumnFilterItem` objects representing the unique values of the specified field in the input array.
*/
export function filterPopulator(dataSource: IObj[], field: string): ColumnFilterItem[] {
const filters: ColumnFilterItem[] = [];
dataSource.forEach((element) => {
const value = element[field];
if (typeof value === "string" && value !== "") {
// Make sure it's not already in the filters
if (filters.find((f) => f.value === value)) {
return;
}
filters.push({
text: value,
value: value,
});
}
});
// Sort the filters
filters.sort((a, b) => {
if (typeof a.text !== "string" || typeof b.text !== "string") {
return 0;
}
return a.text.localeCompare(b.text);
});
filters.push({
text: "<empty>",
value: "",
});
return filters;
}
/**
* Returns an array of filter values for a given field based on the provided filters.
* @param filters An array of `CrudFilter` objects that define the filtering criteria.
* @param field The field to get the filter values for.
* @returns An array of filter values for the given field.
*/
export function getFiltersForField(filters: CrudFilter[], field: string): string[] {
const filterValues: string[] = [];
filters.forEach((filter) => {
if ("field" in filter && filter.field === field) {
filterValues.push(...filter.value as string[]);
}
});
return filterValues;
export function typeSorters<Obj>(sorters: CrudSort[]): TypedCrudSort<Obj>[] {
return sorters as TypedCrudSort<Obj>[]; // <-- Unsafe cast
}