Develop verify for mrm

app/javascript/components/permissions/constants.js

@@ -111,6 +111,7 @@ export const ACTIONS = {
   SERVICES_SECTION_FROM_CASE: "services_section_from_case",
   SYNC_EXTERNAL: "sync_external",
   TRANSFER: "transfer",
+  VERIFY_MRM: "verify_mrm",
   VIEW_INCIDENT_FROM_CASE: "view_incident_from_case",
   VIEW_REGISTRY_RECORD: "view_registry_record",
   VIOLATIONS: "violations",

app/javascript/components/permissions/constants.unit.test.js

@@ -119,6 +119,7 @@ describe("Verifying config constant", () => {
       "WORKFLOW_REPORT",
       "SYNC_EXTERNAL",
       "TRANSFER",
+      "VERIFY_MRM",
       "VIEW_FAMILY_RECORD",
       "VIEW_INCIDENT_FROM_CASE",
       "VIEW_REGISTRY_RECORD",

app/javascript/components/record-actions/constants.js

@@ -63,5 +63,6 @@ export const RECORD_ACTION_ABILITIES = {
   canRequestGbvClosure: [ACTIONS.MANAGE, ACTIONS.REQUEST_APPROVAL_GBV_CLOSURE],
   canShowExports: SHOW_EXPORTS,
   canTransfer: [ACTIONS.MANAGE, ACTIONS.TRANSFER],
-  canMarkForOffline: [ACTIONS.MANAGE, ACTIONS.MARK_FOR_OFFLINE]
+  canMarkForOffline: [ACTIONS.MANAGE, ACTIONS.MARK_FOR_OFFLINE],
+  canVerify: [ACTIONS.MANAGE,ACTIONS.VERIFY_MRM]
 };

app/javascript/components/record-actions/constants.unit.test.js

@@ -69,7 +69,8 @@ describe("<RecordActions /> - Constants", () => {
         "canRequestGbvClosure",
         "canShowExports",
         "canTransfer",
-        "canMarkForOffline"
+        "canMarkForOffline",
+        "canVerify"
       ].forEach(property => {
         expect(recordActionAbilities).to.have.property(property);
         delete recordActionAbilities[property];

app/javascript/components/record-form/form/subforms/styles.css

@@ -1,5 +1,16 @@
 /* Copyright (c) 2014 - 2023 UNICEF. All rights reserved. */
 
+.verifiedSpan{
+  color: var(--c-white);
+  height: 25px;
+  font-size: var(--fs-13);
+  font-weight: 600;
+  float: right;
+  top: 12px;
+  position: absolute;
+  left: 79%;
+  width: 115px;
+}
 .secondarySubformHeader {
   font-size: var(--fs-12);
   color: var(--c-dark-grey);
@@ -196,3 +207,8 @@
     padding-top: 0px;
   }
 }
+
+.keyboardDatePickerWrapper {
+  display: flex;
+  justify-content: space-between;
+}

app/javascript/components/record-form/form/subforms/subform-fields/component.jsx

@@ -178,6 +178,7 @@ const Component = ({
                 renderSecondaryText={Boolean(entryFilter)}
                 associatedViolations={associatedViolations}
                 parentTitle={parentTitle}
+                mode={mode}
               />
               <ListItemSecondaryAction classes={{ root: css.listActions }}>
                 {isTracesSubform && <TracingRequestStatus values={values[index]} />}

app/javascript/components/record-form/form/subforms/subform-fields/components/violation-item/component.jsx

@@ -1,19 +1,128 @@
-// Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
-
+import { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
 import PropTypes from "prop-types";
-import { ListItemText } from "@material-ui/core";
+import { ListItemText, Button } from "@material-ui/core";
+import { useParams } from "react-router-dom";
+import { KeyboardDatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
+import DateFnsUtils from "@date-io/date-fns";
 
+import ActionDialog from "../../../../../../action-dialog";
 import ViolationTitle from "../violation-title";
 import css from "../../../styles.css";
+import { saveRecord } from "../../../../../../records";
+import { usePermissions } from "../../../../../../permissions";
+import { RECORD_ACTION_ABILITIES } from "../../../../../../record-actions/constants";
+import { useI18n } from "../../../../../../i18n";
+import { toServerDateFormat } from "../../../../../../../libs";
 
-import { NAME } from "./constants";
+import VerifySelect from "./select";
 import { getViolationTallyLabel } from "./utils";
+import { NAME } from "./constants";
 
-const Component = ({ fields, values, locale, displayName, index, collapsedFieldValues }) => {
+const Component = ({ fields, values, locale, displayName, index, collapsedFieldValues, mode }) => {
   const currentValues = values[index];
+  const verifyParams = useParams();
+  const i18n = useI18n();
+  const DATE_FORMAT = "dd-MMM-yyyy";
+
+  // State variables
+  const dispatch = useDispatch();
+  const [verifyModal, setVerifyModal] = useState(false);
+  const [verificationValue, setVerificationValue] = useState(currentValues?.ctfmr_verified || "");
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  const [validationError, setValidationError] = useState("");
+  const maxDate = new Date();
+
+  useEffect(() => {
+    // Changing dropdown select value when backend data updated
+    setVerificationValue(currentValues?.ctfmr_verified);
+  }, [currentValues?.ctfmr_verified]);
+
+  const handleDropdownDate = date => {
+    if (selectedDate) {
+      setSelectedDate(date);
+    } else {
+      setValidationError("date should not be null");
+      setSelectedDate(null);
+    }
+  };
+
+  const handleOpenVerifyModal = (idx, event) => {
+    //  To open verify dialog confirmation popup
+    event.stopPropagation();
+    setVerifyModal(true);
+  };
+
+  const cancelVerifyHandler = () => {
+    //  To close verify dialog popup
+    setVerifyModal(false);
+  };
 
+  const { canVerify } = usePermissions("incidents", RECORD_ACTION_ABILITIES); // check permission to verify violations
   const violationTally = getViolationTallyLabel(fields, currentValues, locale);
 
+  const handleOk = () => {
+    //  To update the verify status to Verified
+
+    dispatch(
+      saveRecord(
+        verifyParams.recordType,
+        "update",
+        {
+          data: {
+            [currentValues.type]: [
+              {
+                unique_id: currentValues.unique_id,
+                ctfmr_verified: verificationValue,
+                ctfmr_verified_date: toServerDateFormat(selectedDate)
+              }
+            ]
+          }
+        }, // Save API Call
+        verifyParams.id,
+        "Updated successfully",
+        "",
+        false,
+        false
+      )
+    );
+    // close();
+  };
+
+  // Define VerifySelect component
+  const VerifySelectComponent = (
+    <VerifySelect selectedValue={verificationValue} setSelectedValue={setVerificationValue} />
+  );
+
+  const keyboardDatePickerInputStyles = {
+    borderColor: validationError ? "red" : undefined,
+    marginLeft: "5px" // Add left margin here
+  };
+
+  // Define MuiPickersUtilsProvider component
+  const MuiPickersUtilsProviderComponent = (
+    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+      <div className={css.keyboardDatePickerWrapper}>
+        <KeyboardDatePicker
+          variant="inline"
+          format={DATE_FORMAT}
+          margin="normal"
+          id="date-picker-inline"
+          value={selectedDate}
+          onChange={handleDropdownDate}
+          error={!!validationError}
+          maxDate={maxDate} // Disable future dates
+          InputProps={{
+            style: keyboardDatePickerInputStyles
+          }}
+          KeyboardButtonProps={{
+            "aria-label": i18n.t("key_performance_indicators.date_range_dialog.aria-labels.from")
+          }}
+        />
+      </div>
+    </MuiPickersUtilsProvider>
+  );
+
   return (
     <ListItemText
       id="subform-header-button"
@@ -26,7 +135,32 @@ const Component = ({ fields, values, locale, displayName, index, collapsedFieldV
         </div>
       }
     >
+      {canVerify && mode.isShow ? (
+        <Button
+          onClick={event => handleOpenVerifyModal(index, event)}
+          id={`verify-button-${index}`}
+          className={css.verifiedSpan}
+          color="primary"
+          variant="contained"
+          size="small"
+          disableElevation
+        >
+          {i18n.t("incidents.change_status")}
+        </Button>
+      ) : null}
       <ViolationTitle title={displayName?.[locale]} values={currentValues} fields={fields} />
+
+      <ActionDialog
+        open={verifyModal}
+        successHandler={handleOk}
+        cancelHandler={cancelVerifyHandler}
+        dialogTitle={i18n.t("incidents.change_status")}
+        confirmButtonLabel={i18n.t("buttons.update")}
+        maxSize="xs"
+      >
+        {VerifySelectComponent}
+        {verificationValue === "verified" ? MuiPickersUtilsProviderComponent : null}
+      </ActionDialog>
     </ListItemText>
   );
 };
@@ -37,6 +171,7 @@ Component.propTypes = {
   fields: PropTypes.array.isRequired,
   index: PropTypes.number.isRequired,
   locale: PropTypes.string.isRequired,
+  mode: PropTypes.object.isRequired,
   values: PropTypes.array.isRequired
 };
 

app/javascript/components/record-form/form/subforms/subform-fields/components/violation-item/select.jsx

@@ -0,0 +1,63 @@
+import { Box, FormControl, MenuItem, Select } from "@material-ui/core";
+import useOptions from "../../../../../../form/use-options";
+import { LOOKUPS } from "../../../../../../../config";
+import css from "./styles.css"
+import PropTypes from "prop-types";
+
+const MENU_PROPS = {
+  getContentAnchorEl: null,
+  anchorOrigin: {
+    vertical: "bottom",
+    horizontal: 'left'
+  },
+  transformOrigin: {
+    vertical: "top",
+    horizontal: 'left'
+  }
+}
+
+const Component = ({ selectedValue, setSelectedValue }) => {
+
+  const verificationStatus = useOptions({ source: LOOKUPS.verification_status });
+
+  const handleChange = (event) => { // Change dropdown value
+    setSelectedValue(event.target.value);
+  };
+
+  const onSel = true;
+
+  return (
+    <Box className={css.selectWrapper}>
+      <FormControl fullWidth classes={{
+        root: css.verifyFormControlRoot
+      }}>
+        <Select
+          value={selectedValue}
+          onChange={handleChange}
+          onSel={onSel}
+          MenuProps={MENU_PROPS}
+          classes={{
+            root: css.verifySelectComponent,
+            select: css.verifySelectComponentSelect
+          }}
+          variant="outlined"
+          fullWidth
+        >
+          {
+            verificationStatus.map((option) => (
+              <MenuItem key={option.id} value={option.id} style={{ display: option.id === (selectedValue) ? 'none' : 'block' }}>{option.display_text}</MenuItem>
+            ))
+          }
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}
+Component.propTypes = {
+  selectedValue: PropTypes.string,
+  setSelectedValue: PropTypes.string
+};
+
+Component.displayName = "VerifySelect";
+
+export default Component;

app/javascript/components/record-form/form/subforms/subform-fields/components/violation-item/styles.css

@@ -0,0 +1,22 @@
+
+.verifyFormControlRoot {
+  padding: 4px;
+}
+
+.verifySelectComponent {
+  padding: 12px !important;
+  border-radius: 4px;
+  border-bottom: none;
+}
+
+.verifySelectComponentSelect, .verifySelectComponentSelect:focus {
+  border-radius: 4px;
+}
+
+.verifySelectComponent[aria-expanded="true"], .verifySelectComponent:focus {
+  outline: 4px solid var(--c-light-blue-rgba);
+}
+
+.selectWrapper {
+  min-width: 150px;
+}

app/javascript/components/record-form/form/subforms/subform-fields/components/violation-title/component.jsx

@@ -22,8 +22,8 @@ const Component = ({ title, values, fields }) => {
   ) : null;
 
   return (
-    <div className={css.container}>
-      <div className={css.title}>
+    <div className={css.container} >
+      <div className={css.titleViolation} >
         {title} {renderShortUniqueId}
       </div>
       <div>{renderChipStatus}</div>

app/javascript/components/record-form/form/subforms/subform-fields/components/violation-title/styles.css

@@ -4,16 +4,26 @@
   color: var(--c-white);
   border: solid 1px var(--c-blue);
   background-color: var(--c-blue);
+  width: 120px ;
+  word-wrap: normal;
 }
 
 .container {
   display: inline-flex;
   gap: var(--sp-2);
-  align-items: center;
+  align-items: flex-start;
 }
 
 .title {
   display: flex;
   align-items: center;
   margin-top: 0.1em;
-}
+}
+
+.titleViolation {
+  display: flex;
+  align-items: center;
+  margin-top: 0.1em;
+  width: 300px !important;
+  word-wrap: normal !important;
+}