IO-1881 Related RO notes.

client/src/components/note-upsert-modal/note-upsert-modal.component.jsx

@@ -1,51 +1,92 @@
-import { Col, Form, Input, Row, Switch } from "antd";
+import { Checkbox, Col, Form, Input, Row, Space, Switch, Tag } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectNoteUpsert } from "../../redux/modals/modals.selectors";
 import NotesPresetButton from "../notes-preset-button/notes-preset-button.component";
 
-export default function NoteUpsertModalComponent({ form }) {
+const mapStateToProps = createStructuredSelector({
+  noteUpsertModal: selectNoteUpsert,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(NoteUpsertModalComponent);
+
+export function NoteUpsertModalComponent({ form, noteUpsertModal }) {
   const { t } = useTranslation();
+  const { jobId, existingNote, relatedRos } = noteUpsertModal.context;
+
+  const filteredRelatedRos = relatedRos
+    ? relatedRos.filter((j) => j.id !== jobId)
+    : [];
 
   return (
-    <Row gutter={[16, 16]}>
-      <Col span={8}>
-        <Form.Item
-          label={t("notes.fields.critical")}
-          name="critical"
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
-      </Col>
-      <Col span={8}>
-        <Form.Item
-          label={t("notes.fields.private")}
-          name="private"
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
-      </Col>
-      <Col span={8}>
-        <NotesPresetButton form={form} />
-      </Col>
-      <Col span={24}>
-        <Form.Item
-          label={t("notes.fields.text")}
-          name="text"
-          rules={[
-            {
-              required: true,
-              //message: t("general.validation.required"),
-            },
-          ]}
-        >
-          <Input.TextArea
-            rows={8}
-            placeholder={t("notes.labels.newnoteplaceholder")}
-          />
-        </Form.Item>
-      </Col>
-    </Row>
+    <>
+      <Row gutter={[16, 16]}>
+        <Col span={8}>
+          <Form.Item
+            label={t("notes.fields.critical")}
+            name="critical"
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <Form.Item
+            label={t("notes.fields.private")}
+            name="private"
+            valuePropName="checked"
+          >
+            <Switch />
+          </Form.Item>
+        </Col>
+        <Col span={8}>
+          <NotesPresetButton form={form} />
+        </Col>
+        <Col span={24}>
+          <Form.Item
+            label={t("notes.fields.text")}
+            name="text"
+            rules={[
+              {
+                required: true,
+                //message: t("general.validation.required"),
+              },
+            ]}
+          >
+            <Input.TextArea
+              rows={8}
+              placeholder={t("notes.labels.newnoteplaceholder")}
+            />
+          </Form.Item>
+        </Col>
+      </Row>
+      <div>
+        <div>{!existingNote && t("notes.labels.addtorelatedro")}</div>
+        {!existingNote &&
+          filteredRelatedRos.map((j, idx) => (
+            <Space key={j.id} align="center">
+              <Form.Item
+                noStyle
+                name={["relatedros", j.id]}
+                valuePropName="checked"
+              >
+                <Checkbox />
+              </Form.Item>
+              <Tag>
+                {`${j.ro_number || "N/A"}${j.clm_no ? ` | ${j.clm_no}` : ""}${
+                  j.status ? ` | ${j.status}` : ""
+                }`}
+              </Tag>
+            </Space>
+          ))}
+      </div>
+    </>
   );
 }