Client: Filament/Vendor selects now work

client/src/pages/filaments/create.tsx

@@ -1,12 +1,16 @@
 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 { Form, Input, Select, InputNumber } from "antd";
-import dayjs from "dayjs";
 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"

client/src/pages/filaments/edit.tsx

@@ -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"

client/src/pages/filaments/list.tsx

@@ -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={{

client/src/pages/filaments/model.tsx

@@ -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;
+}

client/src/pages/filaments/show.tsx

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

client/src/pages/spools/create.tsx

@@ -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"

client/src/pages/spools/edit.tsx

@@ -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 { 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"

client/src/pages/spools/list.tsx

@@ -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={{

client/src/pages/spools/model.tsx

@@ -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;
+}

client/src/pages/spools/show.tsx

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

client/src/pages/vendors/create.tsx

@@ -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 { Form, Input } from "antd";
-import dayjs from "dayjs";
 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}>

client/src/pages/vendors/edit.tsx

@@ -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 { formProps, saveButtonProps } = useForm();
-
-  const vendorData = queryResult?.data?.data;
 
   return (
     <Edit saveButtonProps={saveButtonProps}>

client/src/pages/vendors/model.tsx

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

client/src/pages/vendors/show.tsx

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