WIP for invoice list items on inovice enter

client/src/components/invoice-enter-modal/invoice-enter-modal.lines.component.jsx

@@ -0,0 +1,138 @@
+import { DeleteFilled } from "@ant-design/icons";
+import { Button, Form, Input, Select } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import CurrencyInput from "../form-items-formatted/currency-form-item.component";
+
+export default function InvoiceEnterModalLinesComponent({
+  lineData,
+  discount,
+  form
+}) {
+  const { t } = useTranslation();
+  const { setFieldsValue, getFieldsValue } = form;
+  return (
+    <Form.List name="invoicelines">
+      {(fields, { add, remove }) => {
+        return (
+          <div>
+            {fields.map((field, index) => (
+              <Form.Item required={false} key={field.key}>
+                <div style={{ display: "flex" }}>
+                  <Form.Item
+                    label={t("invoicelines.fields.line_desc")}
+                    key={`${index}line_desc`}
+                    name={[field.name, "line_desc"]}
+                  >
+                    <Select
+                      style={{ width: "300px" }}
+                      onSelect={(value, opt) => {
+                        setFieldsValue({
+                          invoicelines: getFieldsValue([
+                            "invoicelines"
+                          ]).invoicelines.map((item, idx) => {
+                            if (idx === index) {
+                              return {
+                                ...item,
+                                joblineid: opt.key.includes("noline")
+                                  ? null
+                                  : opt.key
+                              };
+                            }
+                            return item;
+                          })
+                        });
+                      }}
+                      showSearch
+                    >
+                      <Select.Option
+                        key={`${index}noline`}
+                        value={t("invoicelines.labels.other")}
+                      >
+                        {t("invoicelines.labels.other")}
+                      </Select.Option>
+                      {lineData
+                        ? lineData.map(item => (
+                            <Select.Option key={item.id} value={item.line_desc}>
+                              {item.line_desc}
+                            </Select.Option>
+                          ))
+                        : null}
+                    </Select>
+                  </Form.Item>
+                  {console.log(
+                    'getFieldsValue("invoicelines").invoicelines[index]',
+                    getFieldsValue("invoicelines").invoicelines[index]
+                  )}
+                  {getFieldsValue("invoicelines").invoicelines[index] &&
+                  getFieldsValue("invoicelines").invoicelines[index]
+                    .line_desc &&
+                  !getFieldsValue("invoicelines").invoicelines[index].joblineid
+                    ? "Other"
+                    : null}
+
+                  <Form.Item
+                    label={t("invoicelines.fields.actual")}
+                    key={`${index}actual_price`}
+                    name={[field.name, "actual_price"]}
+                  >
+                    <CurrencyInput
+                      onBlur={e => {
+                        setFieldsValue({
+                          invoicelines: getFieldsValue(
+                            "invoicelines"
+                          ).invoicelines.map((item, idx) => {
+                            if (idx === index) {
+                              return {
+                                ...item,
+                                actual_cost:
+                                  parseFloat(e.target.value.substring(1)) * 1 -
+                                  discount
+                              };
+                            }
+                            return item;
+                          })
+                        });
+                      }}
+                    />
+                  </Form.Item>
+                  <Form.Item
+                    label={t("invoicelines.fields.actual_cost")}
+                    key={`${index}actual_cost`}
+                    name={[field.name, "actual_cost"]}
+                  >
+                    <CurrencyInput />
+                  </Form.Item>
+                  <Form.Item
+                    label={t("invoicelines.fields.cost_center")}
+                    key={`${index}cost_center`}
+                    name={[field.name, "cost_center"]}
+                  >
+                    <Input />
+                  </Form.Item>
+
+                  <DeleteFilled
+                    onClick={() => {
+                      remove(field.name);
+                    }}
+                  />
+                </div>
+              </Form.Item>
+            ))}
+            <Form.Item>
+              <Button
+                type="dashed"
+                onClick={() => {
+                  add();
+                }}
+                style={{ width: "60%" }}
+              >
+                New liNe
+              </Button>
+            </Form.Item>
+          </div>
+        );
+      }}
+    </Form.List>
+  );
+}