Updated vendor API to correct issues - Implement new UI

client/src/pages/vendors/create.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Create, useForm } from "@refinedev/antd";
-import { Button, Form, Input, Typography } from "antd";
+import { Button, Form, Input, Typography, InputNumber } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import { IVendor, IVendorParsedExtras } from "./model";
 import { EntityType, useGetFields } from "../../utils/queryFields";
@@ -85,6 +85,22 @@ export const VendorCreate: React.FC<IResourceComponentsProps & CreateOrCloneProp
         >
           <TextArea maxLength={1024} />
         </Form.Item>
+        <Form.Item
+          label={t("vendor.fields.empty_spool_weight")}
+          help={t("vendor.fields_help.empty_spool_weight")}
+          name={["empty_spool_weight"]}
+          rules={[
+            {
+              required: false,
+              type: "number",
+              min: 0,
+            },
+          ]}
+        >
+          <InputNumber 
+            addonAfter="g"
+            precision={1}/>
+        </Form.Item>
         <Typography.Title level={5}>{t("settings.extra_fields.tab")}</Typography.Title>
         {extraFields.data?.map((field, index) => (
           <ExtraFieldFormItem key={index} field={field} />

client/src/pages/vendors/edit.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Edit, useForm } from "@refinedev/antd";
-import { Form, Input, DatePicker, message, Alert, Typography } from "antd";
+import { Form, Input, DatePicker, message, Alert, Typography, InputNumber } from "antd";
 import dayjs from "dayjs";
 import TextArea from "antd/es/input/TextArea";
 import { IVendor, IVendorParsedExtras } from "./model";
@@ -100,6 +100,22 @@ export const VendorEdit: React.FC<IResourceComponentsProps> = () => {
         >
           <TextArea maxLength={1024} />
         </Form.Item>
+        <Form.Item
+          label={t("vendor.fields.empty_spool_weight")}
+          help={t("vendor.fields_help.empty_spool_weight")}
+          name={["empty_spool_weight"]}
+          rules={[
+            {
+              required: false,
+              type: "number",
+              min: 0,
+            },
+          ]}
+        >
+          <InputNumber 
+            addonAfter="g"
+            precision={1}/>
+        </Form.Item>
         <Typography.Title level={5}>{t("settings.extra_fields.tab")}</Typography.Title>
         {extraFields.data?.map((field, index) => (
           <ExtraFieldFormItem key={index} field={field} />

client/src/pages/vendors/list.tsx

@@ -7,7 +7,7 @@ import utc from "dayjs/plugin/utc";
 import { IVendor } from "./model";
 import { TableState, useInitialTableState, useStoreInitialState } from "../../utils/saveload";
 import { EditOutlined, EyeOutlined, FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
-import { DateColumn, RichColumn, SortedColumn, ActionsColumn, CustomFieldColumn } from "../../components/column";
+import { DateColumn, RichColumn, SortedColumn, ActionsColumn, CustomFieldColumn, NumberColumn } from "../../components/column";
 import { useLiveify } from "../../components/liveify";
 import { removeUndefined } from "../../utils/filtering";
 import { EntityType, useGetFields } from "../../utils/queryFields";
@@ -17,7 +17,7 @@ dayjs.extend(utc);
 
 const namespace = "vendorList-v2";
 
-const allColumns: (keyof IVendor & string)[] = ["id", "name", "registered", "comment"];
+const allColumns: (keyof IVendor & string)[] = ["id", "name", "registered", "comment", "empty_spool_weight"];
 
 export const VendorList: React.FC<IResourceComponentsProps> = () => {
   const t = useTranslate();
@@ -171,6 +171,15 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
             ...commonProps,
             id: "registered",
             i18ncat: "vendor",
+            width: 200,
+          }),
+          NumberColumn({
+            ...commonProps,
+            id: "empty_spool_weight",
+            i18ncat: "vendor",
+            unit: "g",
+            maxDecimals: 0,
+            width: 200,
           }),
           ...(extraFields.data?.map((field) => {
             return CustomFieldColumn({

client/src/pages/vendors/model.tsx

@@ -3,6 +3,7 @@ export interface IVendor {
   registered: string;
   name: string;
   comment?: string;
+  empty_spool_weight?: number;
   extra: { [key: string]: string };
 }
 

client/src/pages/vendors/show.tsx

@@ -42,6 +42,8 @@ export const VendorShow: React.FC<IResourceComponentsProps> = () => {
       <TextField value={record?.name} />
       <Title level={5}>{t("vendor.fields.comment")}</Title>
       <TextField value={enrichText(record?.comment)} />
+      <Title level={5}>{t("vendor.fields.empty_spool_weight")}</Title>
+      <TextField value={record?.empty_spool_weight} />
       <Title level={4}>{t("settings.extra_fields.tab")}</Title>
       {extraFields?.data?.map((field, index) => (
         <ExtraFieldDisplay key={index} field={field} value={record?.extra[field.key]} />