Client: Filament/Vendor selects now work
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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={{
|
||||
|
||||
14
client/src/pages/filaments/model.tsx
Normal file
14
client/src/pages/filaments/model.tsx
Normal 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;
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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={{
|
||||
|
||||
12
client/src/pages/spools/model.tsx
Normal file
12
client/src/pages/spools/model.tsx
Normal 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;
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
5
client/src/pages/vendors/create.tsx
vendored
5
client/src/pages/vendors/create.tsx
vendored
@@ -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}>
|
||||
|
||||
4
client/src/pages/vendors/edit.tsx
vendored
4
client/src/pages/vendors/edit.tsx
vendored
@@ -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
6
client/src/pages/vendors/model.tsx
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
interface IVendor {
|
||||
id: string;
|
||||
registered: string;
|
||||
name: string;
|
||||
comment?: string;
|
||||
}
|
||||
8
client/src/pages/vendors/show.tsx
vendored
8
client/src/pages/vendors/show.tsx
vendored
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user