Added parts receive modal & line status component IO-567

client/src/components/parts-receive-modal/parts-receive-modal.component.jsx

@@ -0,0 +1,109 @@
+import { DeleteFilled } from "@ant-design/icons";
+import { Form, Input, Select, Typography } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+export default connect(mapStateToProps, null)(PartsReceiveModalComponent);
+
+export function PartsReceiveModalComponent({ bodyshop, form }) {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <LayoutFormRow>
+        <Form.Item name="location" label={t("parts_orders.labels.allpartsto")}>
+          <Select
+            style={{ width: "10rem" }}
+            onSelect={(value) => {
+              form.setFieldsValue({
+                partsorderlines: form
+                  .getFieldValue("partsorderlines")
+                  .map((l) => {
+                    return { ...l, location: value };
+                  }),
+              });
+            }}
+          >
+            {bodyshop.md_parts_locations.map((loc, idx) => (
+              <Select.Option key={idx} value={loc}>
+                {loc}
+              </Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+      </LayoutFormRow>
+      <Typography.Title level={4}>
+        {t("parts_orders.labels.inthisorder")}
+      </Typography.Title>
+      <Form.List name={["partsorderlines"]}>
+        {(fields, { add, remove, move }) => {
+          return (
+            <div>
+              {fields.map((field, index) => (
+                <Form.Item required={false} key={field.key}>
+                  <div style={{ display: "flex", alignItems: "center" }}>
+                    <Form.Item
+                      style={{ display: "none" }}
+                      key={`${index}joblineid`}
+                      name={[field.name, "joblineid"]}
+                    >
+                      <Input />
+                    </Form.Item>
+                    <LayoutFormRow grow style={{ flex: 1 }}>
+                      <Form.Item
+                        label={t("parts_orders.fields.line_desc")}
+                        key={`${index}line_desc`}
+                        name={[field.name, "line_desc"]}
+                        rules={[
+                          {
+                            required: true,
+                            message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <Input />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("joblines.fields.location")}
+                        key={`${index}location`}
+                        name={[field.name, "location"]}
+                      >
+                        <Select style={{ width: "10rem" }}>
+                          {bodyshop.md_parts_locations.map((loc, idx) => (
+                            <Select.Option key={idx} value={loc}>
+                              {loc}
+                            </Select.Option>
+                          ))}
+                        </Select>
+                      </Form.Item>
+                    </LayoutFormRow>
+                    <DeleteFilled
+                      style={{ margin: "1rem" }}
+                      onClick={() => {
+                        remove(field.name);
+                      }}
+                    />
+                    <FormListMoveArrows
+                      move={move}
+                      index={index}
+                      total={fields.length}
+                    />
+                  </div>
+                </Form.Item>
+              ))}
+            </div>
+          );
+        }}
+      </Form.List>
+    </div>
+  );
+}