ProductForm

ProductForm component client script is also using ReactJs and Ant Design react component library. This component renders the list of form to edit the product details. User can edit the details of the product and save them.

// components/ProductForm.js
const { useState, useEffect } = React;
const { Form, Input, Modal, Button, Space, Select, InputNumber } = antd;
const { MinusCircleOutlined, PlusOutlined } = antdIcons;

const ProductForm = ({ visible, onCreate, onCancel, editingProduct }) => {
  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue({
      name: editingProduct?.name,
      description: editingProduct?.description,
      specifications: editingProduct?.specifications || []
    });
  }, [editingProduct, form]);

  const handleChange = value => {
    console.log(`selected ${value}`);
  };

  const options = [
    {
      label: "Nursary",
      value: "Nursary"
    },
    {
      label: "I",
      value: "I"
    },
    {
      label: "II",
      value: "II"
    }
  ];

  return (
    <Modal
      visible={visible}
      title={editingProduct ? "Edit Product" : "Create a new product"}
      okText={editingProduct ? "Update" : "Create"}
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then(values => {
            form.resetFields();
            onCreate(values);
          })
          .catch(info => {
            console.log("Validate Failed:", info);
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={{ specifications: [{ key: "", value: "" }] }}
      >
        {/* Name and Description Fields */}
        {/* ... */}

        <Form.Item
          name="title"
          label="Product Title"
          rules={[
            { required: true, message: "Please input the name of the product!" }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item name="description" label="Description">
          <Input type="textarea" />
        </Form.Item>
        <Form.Item name="category" label="Category">
          <Select
            mode="multiple"
            allowClear
            style={{
              width: "100%"
            }}
            placeholder="Please select"
            defaultValue={["all"]}
            onChange={handleChange}
            options={options}
          />
        </Form.Item>

        <Form.List name="stock">
          {(fields, { add, remove }) => (
            <>
              {fields.map(({ key, name, fieldKey, ...restField }) => (
                <Space
                  key={key}
                  style={{ display: "flex", marginBottom: 8 }}
                  align="baseline"
                >
                  <Form.Item
                    {...restField}
                    name={[name, "quantity"]}
                    fieldKey={[fieldKey, "quantity"]}
                    rules={[
                      {
                        required: true,
                        message: "Please input quanity"
                      }
                    ]}
                  >
                    <InputNumber placeholder="Quantity" />
                  </Form.Item>
                  <Form.Item
                    {...restField}
                    name={[name, "price"]}
                    fieldKey={[fieldKey, "price"]}
                    rules={[
                      {
                        required: true,
                        message: "Please input price"
                      }
                    ]}
                  >
                    <InputNumber placeholder="Price" />
                  </Form.Item>
                  <MinusCircleOutlined onClick={() => remove(name)} />
                </Space>
              ))}
              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => add()}
                  block
                  icon={<PlusOutlined />}
                >
                  Add Stock Lines
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
      </Form>
    </Modal>
  );
};

return ProductForm;