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",
});

83
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) => {
if (element.vendor) {
element.vendor_name = element.vendor.name;
} else {
element.vendor_name = null;
// 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) {
vendor_name = element.vendor.name;
} else {
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",

73
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) => {
if (element.filament.vendor && "name" in element.filament.vendor) {
element.filament_name = `${element.filament.vendor.name} - ${element.filament.name}`;
} else {
element.filament_name = element.filament.name;
// 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) {
filament_name = `${element.filament.vendor.name} - ${element.filament.name}`;
} else {
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;