Merge pull request #1173 from akvo/feature/1172-showing-monitoring-da…

…ta-in-approval-page [#1172] Add monitoring response
akvo · Feb 14, 2024 · 21cc1e5 · 21cc1e5
2 parents 02fe5dd + afa1d88
commit 21cc1e5
Show file tree

Hide file tree

Showing 10 changed files with 148 additions and 9 deletions.
diff --git a/app/.eslintrc.json b/app/.eslintrc.json
@@ -18,7 +18,6 @@
       "files": ["**/*.test.js", "**/*.test.jsx"],
       "env": {
         "jest": true
-      }
     }
   ],
   "rules": {

diff --git a/frontend/src/components/EditableCell.jsx b/frontend/src/components/EditableCell.jsx
@@ -17,10 +17,12 @@ const EditableCell = ({
   readonly = false,
   isPublic = false,
   resetButton,
+  lastValue = false,
 }) => {
   const [editing, setEditing] = useState(false);
   const [locationName, setLocationName] = useState(null);
   const [value, setValue] = useState(null);
+  const [oldValue, setOldValue] = useState(null);
 
   useEffect(() => {
     if (
@@ -34,11 +36,17 @@ const EditableCell = ({
         record.newValue || record.newValue === 0
           ? record.newValue
           : record.value;
+
       setValue(
         record.type === "date"
           ? moment(newValue).format("YYYY-MM-DD")
           : newValue
       );
+      setOldValue(
+        record.type === "date"
+          ? moment(record.lastValue).format("YYYY-MM-DD")
+          : record.lastValue
+      );
     }
   }, [record]);
 
@@ -82,6 +90,16 @@ const EditableCell = ({
       : value;
   };
 
+  const getLastAnswerValue = () => {
+    return record.type === "multiple_option"
+      ? oldValue?.join(", ")
+      : record.type === "option"
+      ? oldValue
+        ? oldValue[0]
+        : "-"
+      : oldValue;
+  };
+
   const renderAnswerInput = () => {
     return record.type === "option" ? (
       <Select
@@ -186,6 +204,8 @@ const EditableCell = ({
           locationName
         ) : record.type === "photo" && value ? (
           <Image src={value} width={100} />
+        ) : lastValue ? (
+          getLastAnswerValue()
         ) : (
           getAnswerValue()
         )}

diff --git a/frontend/src/lib/__test__/__snapshots__/ui-text.test.js.snap b/frontend/src/lib/__test__/__snapshots__/ui-text.test.js.snap
@@ -274,6 +274,7 @@ Object {
     "invalidInviteDesc": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem provident voluptatum cum numquam, quidem vitae, qui quam beatae exercitationem ullam perferendis! Nobis in aut fuga voluptate harum, tempore distinctio optio.",
     "invalidInviteTitle": "Invalid Invite Code",
     "lastLoginLabel": "Last login",
+    "lastResponseCol": "Last Response",
     "latestUpdateText": "Latest Updates",
     "learnMoreButton": "Learn more",
     "levelField": "Level",
@@ -503,6 +504,7 @@ Object {
     "printBtn": "Print",
     "profileDes": "This page shows your current user setup. It also shows the most important activities for your current user setup",
     "profileLabel": "Profile",
+    "questionCol": "Question",
     "questionnaireText": "Questionnaire",
     "questionnairesLabel": "Questionnaires",
     "realTime": "Real Time Management Information System",
@@ -514,6 +516,7 @@ Object {
       Your password must include:
     </React.Fragment>,
     "resetText": "Reset",
+    "responseCol": "Response",
     "roleLabel": "Role",
     "saveButton": "Save",
     "saveEditButton": "Save Edits",

diff --git a/frontend/src/lib/ui-text.js b/frontend/src/lib/ui-text.js
@@ -666,6 +666,9 @@ const uiText = {
       `The selected administration doesn't have ${entity} entities`,
     errorEntityNotExists: (entity) =>
       `Unfortunately, ${entity} entities are not yet available. Please get in touch with Admin to add it`,
+    questionCol: "Question",
+    responseCol: "Response",
+    lastResponseCol: "Last Response",
   },
 
   de: {},

diff --git a/frontend/src/pages/approvals/ApprovalDetail.jsx b/frontend/src/pages/approvals/ApprovalDetail.jsx
@@ -16,6 +16,8 @@ import {
   DownCircleOutlined,
   LoadingOutlined,
   HistoryOutlined,
+  FileSyncOutlined,
+  FileTextOutlined,
 } from "@ant-design/icons";
 import { api, store, config, uiText } from "../../lib";
 import { EditableCell } from "../../components";
@@ -40,6 +42,16 @@ const columnsRawData = [
     title: "Name",
     dataIndex: "name",
     key: "name",
+    render: (name, row) => {
+      return (
+        <div>
+          {name}
+          <span className="monitoring-icon">
+            {row.is_monitoring ? <FileSyncOutlined /> : <FileTextOutlined />}
+          </span>
+        </div>
+      );
+    },
   },
   {
     title: "Administration",
@@ -362,9 +374,15 @@ const ApprovalDetail = ({
                 const findValue = res.data.find(
                   (d) => d.question === q.id
                 )?.value;
+                const findOldValue = res.data.find(
+                  (d) => d.question === q.id
+                )?.last_value;
                 return {
                   ...q,
                   value: findValue || findValue === 0 ? findValue : null,
+                  lastValue:
+                    findOldValue || findOldValue === 0 ? findOldValue : null,
+
                   history:
                     res.data.find((d) => d.question === q.id)?.history || false,
                 };
@@ -478,12 +496,12 @@ const ApprovalDetail = ({
                                 rowKey="id"
                                 columns={[
                                   {
-                                    title: "Question",
+                                    title: text?.questionCol,
                                     dataIndex: "name",
                                     width: "50%",
                                   },
                                   {
-                                    title: "Response",
+                                    title: text?.responseCol,
                                     render: (row) => (
                                       <EditableCell
                                         record={row}
@@ -495,7 +513,23 @@ const ApprovalDetail = ({
                                         resetButton={resetButton}
                                       />
                                     ),
-                                    width: "50%",
+                                    width: "25%",
+                                  },
+                                  {
+                                    title: text?.lastResponseCol,
+                                    render: (row) => (
+                                      <EditableCell
+                                        record={row}
+                                        lastValue={true}
+                                        parentId={record.id}
+                                        updateCell={updateCell}
+                                        resetCell={resetCell}
+                                        disabled={true}
+                                        readonly={true}
+                                        resetButton={resetButton}
+                                      />
+                                    ),
+                                    width: "25%",
                                   },
                                   Table.EXPAND_COLUMN,
                                 ]}

diff --git a/frontend/src/pages/approvals/style.scss b/frontend/src/pages/approvals/style.scss
@@ -174,6 +174,19 @@
       }
     }
 
+    .monitoring-icon {
+      margin-left: 10px;
+      span {
+        width: 20px;
+        height: 20px;
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+        fill: black;
+      }
+    }
+
     .ant-table {
       tr.row-edited td {
         background-color: #fefebe;

diff --git a/frontend/src/pages/submissions/BatchDetail.jsx b/frontend/src/pages/submissions/BatchDetail.jsx
@@ -46,9 +46,14 @@ const BatchDetail = ({
                   const findValue = res.data.find(
                     (d) => d.question === q.id
                   )?.value;
+                  const findOldValue = res.data.find(
+                    (d) => d.question === q.id
+                  )?.last_value;
                   return {
                     ...q,
                     value: findValue || findValue === 0 ? findValue : null,
+                    lastValue:
+                      findOldValue || findOldValue === 0 ? findOldValue : null,
                     history:
                       res.data.find((d) => d.question === q.id)?.history ||
                       false,

diff --git a/frontend/src/pages/submissions/SubmissionEditing.jsx b/frontend/src/pages/submissions/SubmissionEditing.jsx
@@ -60,7 +60,7 @@ const SubmissionEditing = ({
               rowKey="id"
               columns={[
                 {
-                  title: text?.QuestionCol,
+                  title: text?.questionCol,
                   dataIndex: "name",
                   width: "50%",
                 },
@@ -77,7 +77,23 @@ const SubmissionEditing = ({
                       resetButton={resetButton}
                     />
                   ),
-                  width: "50%",
+                  width: "25%",
+                },
+                {
+                  title: text?.lastResponseCol,
+                  render: (row) => (
+                    <EditableCell
+                      record={row}
+                      lastValue={true}
+                      parentId={expanded.id}
+                      updateCell={updateCell}
+                      resetCell={resetCell}
+                      disabled={true}
+                      readonly={true}
+                      resetButton={resetButton}
+                    />
+                  ),
+                  width: "25%",
                 },
                 Table.EXPAND_COLUMN,
               ]}

diff --git a/frontend/src/pages/submissions/UploadDetail.jsx b/frontend/src/pages/submissions/UploadDetail.jsx
@@ -5,6 +5,8 @@ import {
   DownCircleOutlined,
   LoadingOutlined,
   HistoryOutlined,
+  FileTextOutlined,
+  FileSyncOutlined,
 } from "@ant-design/icons";
 import { api, store, uiText } from "../../lib";
 import { EditableCell } from "../../components";
@@ -28,6 +30,16 @@ const columnsRawData = [
     title: "Name",
     dataIndex: "name",
     key: "name",
+    render: (name, row) => {
+      return (
+        <div>
+          {name}
+          <span className="monitoring-icon">
+            {row.is_monitoring ? <FileSyncOutlined /> : <FileTextOutlined />}
+          </span>
+        </div>
+      );
+    },
   },
   {
     title: "Administration",
@@ -301,9 +313,14 @@ const UploadDetail = ({ record, setReload }) => {
               const findValue = res.data.find(
                 (d) => d.question === q.id
               )?.value;
+              const findOldValue = res.data.find(
+                (d) => d.question === q.id
+              )?.last_value;
               return {
                 ...q,
                 value: findValue || findValue === 0 ? findValue : null,
+                lastValue:
+                  findOldValue || findOldValue === 0 ? findOldValue : null,
                 history:
                   res.data.find((d) => d.question === q.id)?.history || false,
               };
@@ -410,12 +427,12 @@ const UploadDetail = ({ record, setReload }) => {
                                 rowKey="id"
                                 columns={[
                                   {
-                                    title: "Question",
+                                    title: text?.questionCol,
                                     dataIndex: "name",
                                     width: "50%",
                                   },
                                   {
-                                    title: "Response",
+                                    title: text?.responseCol,
                                     render: (row) => (
                                       <EditableCell
                                         record={row}
@@ -427,7 +444,23 @@ const UploadDetail = ({ record, setReload }) => {
                                         resetButton={resetButton}
                                       />
                                     ),
-                                    width: "50%",
+                                    width: "25%",
+                                  },
+                                  {
+                                    title: text?.lastResponseCol,
+                                    render: (row) => (
+                                      <EditableCell
+                                        record={row}
+                                        lastValue={true}
+                                        parentId={expanded.id}
+                                        updateCell={updateCell}
+                                        resetCell={resetCell}
+                                        disabled={true}
+                                        readonly={true}
+                                        resetButton={resetButton}
+                                      />
+                                    ),
+                                    width: "25%",
                                   },
                                   Table.EXPAND_COLUMN,
                                 ]}

diff --git a/frontend/src/pages/submissions/style.scss b/frontend/src/pages/submissions/style.scss
@@ -186,6 +186,19 @@
       }
     }
 
+    .monitoring-icon {
+      margin-left: 10px;
+      span {
+        width: 20px;
+        height: 20px;
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+        fill: black;
+      }
+    }
+
     .ant-table {
       tr.row-edited td {
         background-color: #fefebe;