4609: forward message modal

web-client/src/presenter/actions/WorkItem/setForwardMessageModalDialogModalStateAction.js

@@ -0,0 +1,23 @@
+import { state } from 'cerebral';
+
+/**
+ * set the modal state
+ *
+ * @param {object} providers the providers object
+ * @param {object} providers.store the cerebral store function
+ */
+export const setForwardMessageModalDialogModalStateAction = ({
+  get,
+  store,
+}) => {
+  const messageDetail = get(state.messageDetail)[0]; //todo in later task
+  store.set(state.modal.validationErrors, {});
+  store.set(state.modal.form, {
+    attachments: messageDetail.attachments,
+    from: messageDetail.from,
+    fromSection: messageDetail.fromSection,
+    fromUserId: messageDetail.fromUserId,
+    parentMessageId: messageDetail.parentMessageId,
+    subject: messageDetail.subject,
+  });
+};

web-client/src/presenter/actions/WorkItem/setForwardMessageModalDialogModalStateAction.test.js

@@ -0,0 +1,51 @@
+import { presenter } from '../../presenter-mock';
+import { runAction } from 'cerebral/test';
+import { setForwardMessageModalDialogModalStateAction } from './setForwardMessageModalDialogModalStateAction';
+
+describe('setForwardMessageModalDialogModalStateAction', () => {
+  it('should set the modal state for forwarding a message', async () => {
+    const result = await runAction(
+      setForwardMessageModalDialogModalStateAction,
+      {
+        modules: {
+          presenter,
+        },
+        props: {},
+        state: {
+          messageDetail: [
+            {
+              attachments: [
+                {
+                  documentId: 'a5273185-f694-4d9c-bc90-71eddc5e5937',
+                  documentTitle: 'Petition',
+                },
+              ],
+              from: 'test user 1',
+              fromSection: 'petitions',
+              fromUserId: '589002b0-dacd-4e84-874a-52d9898623c3',
+              parentMessageId: '530f9b43-4934-4b2f-9aa4-50dcbe8064fa',
+              subject: 'the subject',
+            },
+          ],
+        },
+      },
+    );
+
+    expect(result.state.modal).toEqual({
+      form: {
+        attachments: [
+          {
+            documentId: 'a5273185-f694-4d9c-bc90-71eddc5e5937',
+            documentTitle: 'Petition',
+          },
+        ],
+        from: 'test user 1',
+        fromSection: 'petitions',
+        fromUserId: '589002b0-dacd-4e84-874a-52d9898623c3',
+        parentMessageId: '530f9b43-4934-4b2f-9aa4-50dcbe8064fa',
+        subject: 'the subject',
+      },
+      validationErrors: {},
+    });
+  });
+});

web-client/src/presenter/sequences/openForwardMessageModalSequence.js

@@ -1,5 +1,9 @@
+import { clearModalStateAction } from '../actions/clearModalStateAction';
+import { setForwardMessageModalDialogModalStateAction } from '../actions/WorkItem/setForwardMessageModalDialogModalStateAction';
 import { setShowModalFactoryAction } from '../actions/setShowModalFactoryAction';
 
 export const openForwardMessageModalSequence = [
+  clearModalStateAction,
+  setForwardMessageModalDialogModalStateAction,
   setShowModalFactoryAction('ForwardMessageModal'),
 ];

web-client/src/views/Messages/ForwardCaseMessageModalDialog.jsx

@@ -1,10 +1,35 @@
+import { CaseMessageModalAttachments } from './CaseMessageModalAttachments';
 import { ConfirmModal } from '../../ustc-ui/Modal/ConfirmModal';
+import { FormGroup } from '../../ustc-ui/FormGroup/FormGroup';
 import { connect } from '@cerebral/react';
+import { sequences, state } from 'cerebral';
 import React from 'react';
 
 export const ForwardCaseMessageModalDialog = connect(
-  {},
-  function ForwardCaseMessageModalDialog() {
+  {
+    constants: state.constants,
+    form: state.modal.form,
+    showChambersSelect: state.modal.showChambersSelect,
+    updateCreateCaseMessageValueInModalSequence:
+      sequences.updateCreateCaseMessageValueInModalSequence,
+    updateModalValueSequence: sequences.updateModalValueSequence,
+    users: state.users,
+    validateCreateCaseMessageInModalSequence:
+      sequences.validateCreateCaseMessageInModalSequence,
+    validationErrors: state.validationErrors,
+    workQueueSectionHelper: state.workQueueSectionHelper,
+  },
+  function ForwardCaseMessageModalDialog({
+    constants,
+    form,
+    showChambersSelect,
+    updateCreateCaseMessageValueInModalSequence,
+    updateModalValueSequence,
+    users,
+    validateCreateCaseMessageInModalSequence,
+    validationErrors,
+    workQueueSectionHelper,
+  }) {
     return (
       <ConfirmModal
         cancelLabel="Cancel"
@@ -13,7 +38,129 @@ export const ForwardCaseMessageModalDialog = connect(
         title="Forward Message"
         onCancelSequence="clearModalFormSequence"
         onConfirmSequence={() => {}}
-      ></ConfirmModal>
+      >
+        <FormGroup
+          errorText={!showChambersSelect && validationErrors.toSection}
+        >
+          <label className="usa-label" htmlFor="toSection">
+            Select a section
+          </label>
+
+          <select
+            className="usa-select"
+            id="toSection"
+            name="toSection"
+            onChange={async e => {
+              await updateCreateCaseMessageValueInModalSequence({
+                key: e.target.name,
+                value: e.target.value,
+              });
+              validateCreateCaseMessageInModalSequence();
+            }}
+          >
+            <option value="">- Select -</option>
+            {constants.SECTIONS.map(section => (
+              <option key={section} value={section}>
+                {workQueueSectionHelper.sectionDisplay(section)}
+              </option>
+            ))}
+          </select>
+        </FormGroup>
+        {showChambersSelect && (
+          <FormGroup
+            errorText={validationErrors.toSection && 'Select a chamber'}
+          >
+            <label className="usa-label" htmlFor="chambers">
+              Select chambers
+            </label>
+            <select
+              className="usa-select"
+              id="chambers"
+              name="chambers"
+              onChange={e => {
+                updateCreateCaseMessageValueInModalSequence({
+                  key: e.target.name,
+                  value: e.target.value,
+                });
+                validateCreateCaseMessageInModalSequence();
+              }}
+            >
+              <option value="">- Select -</option>
+              {constants.CHAMBERS_SECTIONS.map(section => (
+                <option key={section} value={section}>
+                  {workQueueSectionHelper.chambersDisplay(section)}
+                </option>
+              ))}
+            </select>
+          </FormGroup>
+        )}
+        <FormGroup errorText={validationErrors.toUserId}>
+          <label className="usa-label" htmlFor="toUserId">
+            Select recipient
+          </label>
+          <select
+            aria-disabled={!form.toSection ? 'true' : 'false'}
+            className="usa-select"
+            disabled={!form.toSection}
+            id="toUserId"
+            name="toUserId"
+            onChange={e => {
+              updateCreateCaseMessageValueInModalSequence({
+                key: e.target.name,
+                value: e.target.value,
+              });
+              validateCreateCaseMessageInModalSequence();
+            }}
+          >
+            <option value="">- Select -</option>
+            {users.map(user => (
+              <option key={user.userId} value={user.userId}>
+                {user.name}
+              </option>
+            ))}
+          </select>
+        </FormGroup>
+
+        <FormGroup errorText={validationErrors.subject}>
+          <label className="usa-label" htmlFor="subject">
+            Subject line
+          </label>
+          <input
+            className="usa-input"
+            id="subject"
+            name="form.subject"
+            type="text"
+            value={form.subject || ''}
+            onChange={e => {
+              updateModalValueSequence({
+                key: e.target.name,
+                value: e.target.value,
+              });
+              validateCreateCaseMessageInModalSequence();
+            }}
+          />
+        </FormGroup>
+
+        <FormGroup errorText={validationErrors.message}>
+          <label className="usa-label" htmlFor="message">
+            Add message
+          </label>
+          <textarea
+            className="usa-textarea"
+            id="message"
+            name="form.message"
+            onChange={e => {
+              updateModalValueSequence({
+                key: e.target.name,
+                value: e.target.value,
+              });
+              validateCreateCaseMessageInModalSequence();
+            }}
+          />
+        </FormGroup>
+
+        <CaseMessageModalAttachments />
+      </ConfirmModal>
     );
   },
 );