Client: Filament/Vendor selects now work

This commit is contained in:
Donkie
2023-05-14 20:06:17 +02:00
parent 8e21cd2e12
commit 43919ac90e
14 changed files with 98 additions and 55 deletions

View File

@@ -1,12 +1,16 @@
import React from "react";
import { IResourceComponentsProps } from "@refinedev/core";
import { Create, useForm } from "@refinedev/antd";
import { Form, Input, DatePicker, Select, InputNumber } from "antd";
import dayjs from "dayjs";
import { Create, useForm, useSelect } from "@refinedev/antd";
import { Form, Input, Select, InputNumber } from "antd";
import TextArea from "antd/es/input/TextArea";
export const FilamentCreate: React.FC<IResourceComponentsProps> = () => {
const { formProps, saveButtonProps, queryResult } = useForm();
const { formProps, saveButtonProps } = useForm();
const { selectProps } = useSelect<IVendor>({
resource: "vendor",
optionLabel: "name",
});
return (
<Create saveButtonProps={saveButtonProps}>
@@ -25,14 +29,14 @@ export const FilamentCreate: React.FC<IResourceComponentsProps> = () => {
</Form.Item>
<Form.Item
label="Vendor"
name={["vendor", "name"]}
name={["vendor_id"]}
rules={[
{
required: false,
},
]}
>
{/* <Select {...vendorSelectProps} /> */}
<Select {...selectProps} allowClear />
</Form.Item>
<Form.Item
label="Material"

View File

@@ -1,14 +1,22 @@
import React from "react";
import { IResourceComponentsProps } from "@refinedev/core";
import { Edit, useForm } from "@refinedev/antd";
import { Edit, useForm, useSelect } from "@refinedev/antd";
import { Form, Input, DatePicker, Select, InputNumber } from "antd";
import dayjs from "dayjs";
import TextArea from "antd/es/input/TextArea";
export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
const { formProps, saveButtonProps, queryResult } = useForm();
const { formProps, saveButtonProps } = useForm();
const filamentData = queryResult?.data?.data;
const { selectProps } = useSelect<IVendor>({
resource: "vendor",
optionLabel: "name",
});
if (formProps.initialValues) {
formProps.initialValues["vendor_id"] =
formProps.initialValues["vendor"]?.id;
}
return (
<Edit saveButtonProps={saveButtonProps}>
@@ -52,14 +60,21 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
</Form.Item>
<Form.Item
label="Vendor"
name={["vendor", "name"]}
name={["vendor_id"]}
rules={[
{
required: false,
},
]}
// Applying this to Form.Item Select's causes a cleared select to send null
normalize={(value) => {
if (value === undefined) {
return null;
}
return value;
}}
>
{/* <Select {...vendorSelectProps} /> */}
<Select {...selectProps} allowClear />
</Form.Item>
<Form.Item
label="Material"

View File

@@ -26,7 +26,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
<Table.Column
dataIndex="density"
title="Density"
render={(value: any) => (
render={(value) => (
<NumberField
value={value}
options={{
@@ -41,7 +41,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
<Table.Column
dataIndex="diameter"
title="Diameter"
render={(value: any) => (
render={(value) => (
<NumberField
value={value}
options={{
@@ -56,7 +56,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
<Table.Column
dataIndex="weight"
title="Weight"
render={(value: any) => (
render={(value) => (
<NumberField
value={value}
options={{
@@ -71,7 +71,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
<Table.Column
dataIndex="spool_weight"
title="Spool Weight"
render={(value: any) => (
render={(value) => (
<NumberField
value={value}
options={{

View File

@@ -0,0 +1,14 @@
interface IFilament {
id: string;
registered: string;
name?: string;
vendor?: IVendor;
material?: string;
price?: number;
density: number;
diameter: number;
weight?: number;
spool_weight?: number;
article_number?: string;
comment?: string;
}

View File

@@ -1,12 +1,6 @@
import React from "react";
import { IResourceComponentsProps, useShow } from "@refinedev/core";
import {
Show,
NumberField,
DateField,
TagField,
TextField,
} from "@refinedev/antd";
import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
import { Typography } from "antd";
const { Title } = Typography;

View File

@@ -1,12 +1,17 @@
import React from "react";
import { IResourceComponentsProps } from "@refinedev/core";
import { Create, useForm } from "@refinedev/antd";
import { Create, useForm, useSelect } from "@refinedev/antd";
import { Form, Input, DatePicker, Select, InputNumber } from "antd";
import dayjs from "dayjs";
import TextArea from "antd/es/input/TextArea";
export const SpoolCreate: React.FC<IResourceComponentsProps> = () => {
const { formProps, saveButtonProps, queryResult } = useForm();
const { formProps, saveButtonProps } = useForm();
const { selectProps } = useSelect<IFilament>({
resource: "filament",
optionLabel: "name",
});
return (
<Create saveButtonProps={saveButtonProps}>
@@ -41,14 +46,14 @@ export const SpoolCreate: React.FC<IResourceComponentsProps> = () => {
</Form.Item>
<Form.Item
label="Filament"
name={["filament", "name"]}
name={["filament_id"]}
rules={[
{
required: true,
},
]}
>
{/* <Select {...filamentSelectProps} /> */}
<Select {...selectProps} />
</Form.Item>
<Form.Item
label="Used Weight"

View File

@@ -1,14 +1,22 @@
import React from "react";
import { IResourceComponentsProps } from "@refinedev/core";
import { Edit, useForm } from "@refinedev/antd";
import { Form, Input, DatePicker, Select, InputNumber } from "antd";
import { Edit, useForm, useSelect } from "@refinedev/antd";
import { Form, Input, DatePicker, Select } from "antd";
import dayjs from "dayjs";
import TextArea from "antd/es/input/TextArea";
export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
const { formProps, saveButtonProps, queryResult } = useForm();
const { formProps, saveButtonProps } = useForm();
const spoolData = queryResult?.data?.data;
const { selectProps } = useSelect<IFilament>({
resource: "filament",
optionLabel: "name",
});
if (formProps.initialValues) {
formProps.initialValues["filament_id"] =
formProps.initialValues["filament"].id;
}
return (
<Edit saveButtonProps={saveButtonProps}>
@@ -43,7 +51,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
name={["first_used"]}
rules={[
{
required: true,
required: false,
},
]}
getValueProps={(value) => ({
@@ -57,7 +65,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
name={["last_used"]}
rules={[
{
required: true,
required: false,
},
]}
getValueProps={(value) => ({
@@ -68,14 +76,14 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
</Form.Item>
<Form.Item
label="Filament"
name={["filament", "name"]}
name={["filament_id"]}
rules={[
{
required: true,
},
]}
>
{/* <Select {...filamentSelectProps} /> */}
<Select {...selectProps} />
</Form.Item>
<Form.Item
label="Used Weight"

View File

@@ -27,7 +27,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
<Table.Column
dataIndex="remaining_weight"
title="Estimated Remaining Weight"
render={(value: any) => (
render={(value) => (
<NumberField
value={value}
options={{

View File

@@ -0,0 +1,12 @@
interface ISpool {
id: string;
registered: string;
first_used?: string;
last_used?: string;
filament: IFilament;
remaining_weight?: number;
used_weight: number;
location?: string;
lot_nr?: string;
comment?: string;
}

View File

@@ -1,12 +1,6 @@
import React from "react";
import { IResourceComponentsProps, useShow } from "@refinedev/core";
import {
Show,
NumberField,
DateField,
TagField,
TextField,
} from "@refinedev/antd";
import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
import { Typography } from "antd";
const { Title } = Typography;

View File

@@ -1,12 +1,11 @@
import React from "react";
import { IResourceComponentsProps } from "@refinedev/core";
import { Create, useForm } from "@refinedev/antd";
import { Form, Input, DatePicker } from "antd";
import dayjs from "dayjs";
import { Form, Input } from "antd";
import TextArea from "antd/es/input/TextArea";
export const VendorCreate: React.FC<IResourceComponentsProps> = () => {
const { formProps, saveButtonProps, queryResult } = useForm();
const { formProps, saveButtonProps } = useForm();
return (
<Create saveButtonProps={saveButtonProps}>

View File

@@ -6,9 +6,7 @@ import dayjs from "dayjs";
import TextArea from "antd/es/input/TextArea";
export const VendorEdit: React.FC<IResourceComponentsProps> = () => {
const { formProps, saveButtonProps, queryResult } = useForm();
const vendorData = queryResult?.data?.data;
const { formProps, saveButtonProps } = useForm();
return (
<Edit saveButtonProps={saveButtonProps}>

6
client/src/pages/vendors/model.tsx vendored Normal file
View File

@@ -0,0 +1,6 @@
interface IVendor {
id: string;
registered: string;
name: string;
comment?: string;
}

View File

@@ -1,12 +1,6 @@
import React from "react";
import { IResourceComponentsProps, useShow } from "@refinedev/core";
import {
Show,
NumberField,
DateField,
TagField,
TextField,
} from "@refinedev/antd";
import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
import { Typography } from "antd";
const { Title } = Typography;