Client: Added color edit

This commit is contained in:
Donkie
2023-06-03 21:33:14 +02:00
parent d74393d12d
commit 50abc5c74f
4 changed files with 53 additions and 22 deletions

View File

@@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import { IResourceComponentsProps } from "@refinedev/core"; import { IResourceComponentsProps } from "@refinedev/core";
import { Create, useForm, useSelect } from "@refinedev/antd"; import { Create, useForm, useSelect } from "@refinedev/antd";
import { Form, Input, Select, InputNumber } from "antd"; import { Form, Input, Select, InputNumber, ColorPicker } from "antd";
import TextArea from "antd/es/input/TextArea"; import TextArea from "antd/es/input/TextArea";
import { IVendor } from "../vendors/model"; import { IVendor } from "../vendors/model";
@@ -39,6 +39,20 @@ export const FilamentCreate: React.FC<IResourceComponentsProps> = () => {
> >
<Select {...selectProps} allowClear /> <Select {...selectProps} allowClear />
</Form.Item> </Form.Item>
<Form.Item
label="Color"
name={["color_hex"]}
rules={[
{
required: false,
},
]}
getValueFromEvent={(e) => {
return e?.toHex();
}}
>
<ColorPicker format="hex" />
</Form.Item>
<Form.Item <Form.Item
label="Material" label="Material"
help="E.g. PLA, ABS, PETG, etc." help="E.g. PLA, ABS, PETG, etc."

View File

@@ -1,7 +1,14 @@
import React from "react"; import React from "react";
import { IResourceComponentsProps } from "@refinedev/core"; import { IResourceComponentsProps } from "@refinedev/core";
import { Edit, useForm, useSelect } from "@refinedev/antd"; import { Edit, useForm, useSelect } from "@refinedev/antd";
import { Form, Input, DatePicker, Select, InputNumber } from "antd"; import {
Form,
Input,
DatePicker,
Select,
InputNumber,
ColorPicker,
} from "antd";
import dayjs from "dayjs"; import dayjs from "dayjs";
import TextArea from "antd/es/input/TextArea"; import TextArea from "antd/es/input/TextArea";
import { IVendor } from "../vendors/model"; import { IVendor } from "../vendors/model";
@@ -77,6 +84,20 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
> >
<Select {...selectProps} allowClear /> <Select {...selectProps} allowClear />
</Form.Item> </Form.Item>
<Form.Item
label="Color"
name={["color_hex"]}
rules={[
{
required: false,
},
]}
getValueFromEvent={(e) => {
return e?.toHex();
}}
>
<ColorPicker format="hex" />
</Form.Item>
<Form.Item <Form.Item
label="Material" label="Material"
help="E.g. PLA, ABS, PETG, etc." help="E.g. PLA, ABS, PETG, etc."

View File

@@ -15,4 +15,5 @@ export interface IFilament {
comment?: string; comment?: string;
settings_extruder_temp?: number; settings_extruder_temp?: number;
settings_bed_temp?: number; settings_bed_temp?: number;
color_hex?: string;
} }

View File

@@ -30,6 +30,8 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
<TextField value={record?.name} /> <TextField value={record?.name} />
<Title level={5}>Vendor</Title> <Title level={5}>Vendor</Title>
{/* {vendorIsLoading ? <>Loading...</> : <>{vendorData?.data?.id}</>} */} {/* {vendorIsLoading ? <>Loading...</> : <>{vendorData?.data?.id}</>} */}
<Title level={5}>Color</Title>
<TextField value={record?.color_hex} />
<Title level={5}>Material</Title> <Title level={5}>Material</Title>
<TextField value={record?.material} /> <TextField value={record?.material} />
<Title level={5}>Price</Title> <Title level={5}>Price</Title>
@@ -67,27 +69,20 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
}} }}
/> />
<Title level={5}>Overridden Extruder Temperature</Title> <Title level={5}>Overridden Extruder Temperature</Title>
{ {!record?.settings_extruder_temp ? (
!record?.settings_extruder_temp ? ( <TextField value="Not Set" />
<TextField value="Not Set" /> ) : (
) : ( <NumberFieldUnit
<NumberFieldUnit value={record?.settings_extruder_temp ?? ""}
value={record?.settings_extruder_temp ?? ""} unit="°C"
unit="°C" />
/> )}
)
}
<Title level={5}>Overridden Bed Temperature</Title> <Title level={5}>Overridden Bed Temperature</Title>
{ {!record?.settings_bed_temp ? (
!record?.settings_bed_temp ? ( <TextField value="Not Set" />
<TextField value="Not Set" /> ) : (
) : ( <NumberFieldUnit value={record?.settings_bed_temp ?? ""} unit="°C" />
<NumberFieldUnit )}
value={record?.settings_bed_temp ?? ""}
unit="°C"
/>
)
}
<Title level={5}>Article Number</Title> <Title level={5}>Article Number</Title>
<TextField value={record?.article_number} /> <TextField value={record?.article_number} />
<Title level={5}>Comment</Title> <Title level={5}>Comment</Title>