BOD-8 #comment Fixed up part of the vendor edit page. Refetch of list still oustanding.

client/src/components/vendors-form/vendors-form.component.jsx

@@ -1,54 +1,18 @@
-import { Button, Checkbox, Col, Form, Input, InputNumber, Row } from "antd";
+import { Button, Form, Input, InputNumber, Switch, Select } from "antd";
 import React from "react";
-import { MinusCircleOutlined, PlusCircleFilled } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
-import ResetForm from "../form-items-formatted/reset-form-item.component";
-let id = 0;
-
-export default function VendorsFormComponent({ form, vendor, handleDelete }) {
-  const {
-    getFieldDecorator,
-    isFieldsTouched,
-    getFieldValue,
-    resetFields
-  } = form;
-
-  getFieldDecorator("keys", {
-    initialValue: Array.isArray(vendor.favorite) ? vendor.favorite : []
-  });
-
-  const remove = k => {
-    // can use data-binding to get
-    const keys = form.getFieldValue("keys");
-    console.log("keys", keys);
-    // We need at least one passenger
-    if (keys.length === 1) {
-      return;
-    }
-    // can use data-binding to set
-    form.setFieldsValue({
-      keys: keys.filter(key => key !== k)
-    });
-  };
-
-  const add = props => {
-    console.log("props", props);
-    // can use data-binding to get
-    const keys = form.getFieldValue("keys");
-    console.log("keys", keys);
-    const nextKeys = keys.concat(id++);
-    // can use data-binding to set
-    // important! notify form to detect changes
-    form.setFieldsValue({
-      keys: nextKeys
-    });
-  };
+import { DeleteFilled } from "@ant-design/icons";
 
+export default function VendorsFormComponent({
+  form,
+  handleDelete,
+  responsibilityCenters
+}) {
   const { t } = useTranslation();
+  const { getFieldValue } = form;
   return (
     <div>
-      {isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
       <Button htmlType="submit" type="primary">
         {t("general.actions.save")}
       </Button>
@@ -56,130 +20,143 @@ export default function VendorsFormComponent({ form, vendor, handleDelete }) {
         {t("general.actions.delete")}
       </Button>
 
-      {getFieldValue("keys").map((k, index) => (
-        <Form.Item required={false} key={k}>
-          {getFieldDecorator(`favorite[${k}].make`, {
-            validateTrigger: ["onChange", "onBlur"]
-          })(
-            <Input
-              placeholder="passenger name"
-              style={{ width: "60%", marginRight: 8 }}
-            />
-          )}
-          {getFieldValue("keys").length > 1 ? (
-            <MinusCircleOutlined
-              className="dynamic-delete-button"
-              onClick={() => remove(k)}
-            />
-          ) : null}
-          <Form.Item label="Group">
-            {getFieldDecorator(`favorite[${k}].type`, {
-              initialValue: null
-            })(
-              <Checkbox.Group style={{ width: "100%" }}>
-                <Row>
-                  <Col span={8}>
-                    <Checkbox value="OEM">OEM</Checkbox>
-                  </Col>
-                  <Col span={8}>
-                    <Checkbox value="LKQ">LKQ</Checkbox>
-                  </Col>
-                  <Col span={8}>
-                    <Checkbox value="AM">AM</Checkbox>
-                  </Col>
-                </Row>
-              </Checkbox.Group>
-            )}
-          </Form.Item>
-        </Form.Item>
-      ))}
-      <Form.Item label={t("vendors.fields.favorite")}>
-        <Button type="dashed" onClick={add} style={{ width: "60%" }}>
-          <PlusCircleFilled /> Add field
-        </Button>
-      </Form.Item>
+      <Form.List name="favorite">
+        {(fields, { add, remove }) => {
+          return (
+            <div>
+              {fields.map((field, index) => (
+                <Form.Item key={field.key}>
+                  <div style={{ display: "flex" }}>
+                    <Form.Item
+                      label={t("vendors.fields.make")}
+                      key={`${index}make`}
+                      name={[field.name, "make"]}
+                      rules={[
+                        {
+                          required: true,
+                          message: t("general.validation.required")
+                        }
+                      ]}
+                    >
+                      <Input />
+                    </Form.Item>
 
-      <Form.Item label={t("vendors.fields.zip")}>
-        {getFieldDecorator("zip", {
-          initialValue: vendor.zip
-        })(<Input name="zip" />)}
+                    <Form.Item key={`${field.key}types`}>
+                      <div style={{ display: "flex" }}>
+                        <Form.Item
+                          label={t("vendors.fields.oem")}
+                          key={`${index}oem`}
+                          name={[field.name, "type", "oem"]}
+                          valuePropName="checked"
+                        >
+                          <Switch />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("vendors.fields.lkq")}
+                          key={`${index}lkq`}
+                          name={[field.name, "type", "lkq"]}
+                          valuePropName="checked"
+                        >
+                          <Switch />
+                        </Form.Item>
+                        <Form.Item
+                          label={t("vendors.fields.am")}
+                          key={`${index}am`}
+                          name={[field.name, "type", "am"]}
+                          valuePropName="checked"
+                        >
+                          <Switch />
+                        </Form.Item>
+                      </div>
+                    </Form.Item>
+                    <DeleteFilled
+                      onClick={() => {
+                        remove(field.name);
+                      }}
+                    />
+                  </div>
+                </Form.Item>
+              ))}
+              <Form.Item>
+                <Button
+                  type="dashed"
+                  onClick={() => {
+                    add();
+                  }}
+                  style={{ width: "100%" }}
+                >
+                  {t("invoicelines.actions.newline")}
+                </Button>
+              </Form.Item>
+            </div>
+          );
+        }}
+      </Form.List>
+
+      <Form.Item label={t("vendors.fields.zip")} name="zip">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("vendors.fields.terms")}>
-        {getFieldDecorator("terms", {
-          initialValue: vendor.terms
-        })(<Input name="terms" />)}
+      <Form.Item label={t("vendors.fields.terms")} name="terms">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("vendors.fields.taxid")}>
-        {getFieldDecorator("taxid", {
-          initialValue: vendor.taxid
-        })(<Input name="taxid" />)}
+      <Form.Item label={t("vendors.fields.taxid")} name="taxid">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("vendors.fields.street1")}>
-        {getFieldDecorator("street1", {
-          initialValue: vendor.street1
-        })(<Input name="street1" />)}
+      <Form.Item label={t("vendors.fields.street1")} name="street1">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("vendors.fields.street2")}>
-        {getFieldDecorator("street2", {
-          initialValue: vendor.street2
-        })(<Input name="street2" />)}
+      <Form.Item label={t("vendors.fields.street2")} name="street2">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("vendors.fields.state")}>
-        {getFieldDecorator("state", {
-          initialValue: vendor.state
-        })(<Input name="state" />)}
+      <Form.Item label={t("vendors.fields.state")} name="state">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("vendors.fields.prompt_discount")}>
-        {getFieldDecorator("prompt_discount", {
-          initialValue: vendor.prompt_discount
-        })(<InputNumber name="prompt_discount" />)}
+      <Form.Item
+        label={t("vendors.fields.prompt_discount")}
+        name="prompt_discount"
+      >
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("vendors.fields.name")}>
-        {getFieldDecorator("name", {
-          initialValue: vendor.name
-        })(<Input name="name" />)}
+      <Form.Item label={t("vendors.fields.name")} name="name">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("vendors.fields.email")}>
-        {getFieldDecorator("email", {
-          initialValue: vendor.email,
-          rules: [
-            {
-              type: "email",
-              message: t("general.validation.invalidemail")
-            }
-          ]
-        })(<FormItemEmail name="email" email={getFieldValue("email")} />)}
+      <Form.Item
+        label={t("vendors.fields.email")}
+        rules={[
+          {
+            type: "email",
+            message: t("general.validation.invalidemail")
+          }
+        ]}
+        name="email"
+      >
+        <FormItemEmail email={getFieldValue("email")} />
       </Form.Item>
-      <Form.Item label={t("vendors.fields.due_date")}>
-        {getFieldDecorator("due_date", {
-          initialValue: vendor.due_date
-        })(<InputNumber name="due_date" />)}
+      <Form.Item label={t("vendors.fields.due_date")} name="due_date">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("vendors.fields.display_name")}>
-        {getFieldDecorator("display_name", {
-          initialValue: vendor.display_name
-        })(<Input name="display_name" />)}
+      <Form.Item label={t("vendors.fields.display_name")} name="display_name">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("vendors.fields.discount")}>
-        {getFieldDecorator("discount", {
-          initialValue: vendor.discount
-        })(<InputNumber name="discount" />)}
+      <Form.Item label={t("vendors.fields.discount")} name="discount">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("vendors.fields.country")}>
-        {getFieldDecorator("country", {
-          initialValue: vendor.country
-        })(<Input name="country" />)}
+      <Form.Item label={t("vendors.fields.country")} name="country">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("vendors.fields.cost_center")}>
-        {getFieldDecorator("cost_center", {
-          initialValue: vendor.cost_center,
-          rules: [{ required: true, message: t("general.validation.required") }]
-        })(<Input name="cost_center" />)}
+      <Form.Item
+        label={t("vendors.fields.cost_center")}
+        rules={[{ required: true, message: t("general.validation.required") }]}
+        name="cost_center"
+      >
+        <Select style={{ width: "150px" }}>
+          {responsibilityCenters.costs.map(item => (
+            <Select.Option key={item}>{item}</Select.Option>
+          ))}
+        </Select>
       </Form.Item>
-      <Form.Item label={t("vendors.fields.city")}>
-        {getFieldDecorator("city", {
-          initialValue: vendor.city
-        })(<Input name="city" />)}
+      <Form.Item label={t("vendors.fields.city")} name="city">
+        <Input />
       </Form.Item>
     </div>
   );

client/src/components/vendors-form/vendors-form.container.jsx

@@ -1,5 +1,5 @@
 import { Form, notification } from "antd";
-import React from "react";
+import React, { useEffect } from "react";
 import { useMutation, useQuery } from "react-apollo";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -7,31 +7,31 @@ import { createStructuredSelector } from "reselect";
 import {
   DELETE_VENDOR,
   INSERT_NEW_VENDOR,
-  UPDATE_VENDOR,
-  QUERY_VENDOR_BY_ID
+  QUERY_VENDOR_BY_ID,
+  UPDATE_VENDOR
 } from "../../graphql/vendors.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import VendorsFormComponent from "./vendors-form.component";
-import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import VendorsFormComponent from "./vendors-form.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-function VendorsFormContainer({ vendorId, refetch, bodyshop }) {
+function VendorsFormContainer({ selectedVendor, refetch, bodyshop }) {
   const [form] = Form.useForm();
   const { t } = useTranslation();
   const { loading, error, data } = useQuery(QUERY_VENDOR_BY_ID, {
-    variables: { id: vendorId },
+    variables: { id: (selectedVendor && selectedVendor.id) || null },
     fetchPolicy: "network-only",
-    skip: !vendorId
+    skip: !selectedVendor
   });
   const [updateVendor] = useMutation(UPDATE_VENDOR);
   const [insertvendor] = useMutation(INSERT_NEW_VENDOR);
   const [deleteVendor] = useMutation(DELETE_VENDOR);
   const handleDelete = () => {
-    deleteVendor({ variables: { id: vendorId } })
+    deleteVendor({ variables: { id: selectedVendor.id } })
       .then(r => {
         notification["success"]({
           message: t("vendors.successes.deleted")
@@ -47,11 +47,10 @@ function VendorsFormContainer({ vendorId, refetch, bodyshop }) {
   };
 
   const handleFinish = values => {
-    delete values.keys;
-    if (vendorId) {
+    if (selectedVendor.id) {
       //It's a vendor to update.
       updateVendor({
-        variables: { id: vendorId, vendor: values }
+        variables: { id: selectedVendor.id, vendor: values }
       })
         .then(r => {
           notification["success"]({
@@ -64,6 +63,7 @@ function VendorsFormContainer({ vendorId, refetch, bodyshop }) {
           notification["error"]({
             message: t("vendors.errors.saving")
           });
+          console.log("error", error);
         });
     } else {
       //It's a new vendor to insert.
@@ -85,15 +85,25 @@ function VendorsFormContainer({ vendorId, refetch, bodyshop }) {
     }
   };
 
+  useEffect(() => {
+    if (data) form.resetFields();
+  }, [data, form]);
+
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
   return (
-    <Form onFinish={handleFinish} form={form} autoComplete="new-password">
-      {data ? (
+    <Form
+      onFinish={handleFinish}
+      form={form}
+      autoComplete="new-password"
+      initialValues={data ? data.vendors_by_pk : null}
+    >
+      {selectedVendor ? (
         <VendorsFormComponent
+          selec
           form={form}
-          vendor={data ? data.vendors_by_pk : null}
           handleDelete={handleDelete}
+          responsibilityCenters={bodyshop.md_responsibility_centers || null}
         />
       ) : (
         t("vendors.labels.noneselected")