[#5068] Set color value and dsg by update status

akvo/rsr/spa/app/components/AllSubmissionsModal.jsx

@@ -1,75 +1,84 @@
-/* global document */
 import React from 'react'
-import { Modal, Row, Col } from 'antd'
+import { Modal, Row, Col, Tag, Badge } from 'antd'
 import moment from 'moment'
 import SVGInline from 'react-svg-inline'
+import { groupBy, isEmpty } from 'lodash'
+import classNames from 'classnames'
 import { nicenum } from '../utils/misc'
 import statusPending from '../images/status-pending.svg'
 import statusApproved from '../images/status-approved.svg'
 import statusRevision from '../images/status-revision.svg'
 
+const StatusIcon = ({ status }) => {
+  if (status === 'A') {
+    return <SVGInline svg={statusApproved} />
+  }
+  if (['D', 'P'].includes(status)) {
+    return <SVGInline svg={statusPending} />
+  }
+  if (status === 'R') {
+    return <SVGInline svg={statusRevision} />
+  }
+  return null
+}
+
 export const AllSubmissionsModal = ({
   visible,
   onCancel,
   updates,
-  disaggregations,
-  disaggregationTargets,
-  width = 460,
+  width = 520,
+  activeKeys = [],
+  dsgOnly = false,
 }) => {
-  if (disaggregations) {
-    width += disaggregations.length * 100
-  }
-  if (width > document.body.clientWidth - 100) {
-    width = document.body.clientWidth - 100
-  }
+  const _updates = updates?.filter((u) => (
+    (dsgOnly && u?.disaggregations?.length) ||
+    (!dsgOnly)
+  ))
   return (
     <Modal {...{ visible, onCancel, width }} title="Period latest submissions" footer={null} className="all-submissions-modal">
       <div>
-        {updates.map(update => {
-          const dsgGroups = {}
-          update.disaggregations.forEach(item => {
-            if (!dsgGroups[item.category]) dsgGroups[item.category] = []
-            dsgGroups[item.category].push(item)
-            if (disaggregationTargets.length > 0) {
-              const target = disaggregationTargets.find(it => it.typeId === item.typeId)
-              if (target != null) dsgGroups[item.category][dsgGroups[item.category].length - 1].targetValue = target.value
-            }
-          })
-          const dsgKeys = Object.keys(dsgGroups)
-          const colSize = dsgKeys?.length ? 5 : 8
+        {_updates?.map(update => {
+          const _disaggregations = update?.disaggregations?.filter((dg) => activeKeys?.includes(dg?.type))
+          const dsgGroups = groupBy(_disaggregations, 'category')
+          const userName = (
+            isEmpty(update?.userDetails?.firstName) &&
+            isEmpty(update?.userDetails?.lastName)
+          )
+            ? update?.userDetails?.email
+            : `${update.userDetails.firstName} ${update.userDetails.lastName}`
           return (
             <Row type="flex" justify="space-between" align="middle" key={update.id}>
-              <Col lg={7} md={12} sm={24} xs={24}>
+              <Col xs={24}>
                 <div className="svg-text">
-                  <SVGInline svg={update.status === 'A' ? statusApproved : update.status === 'P' ? statusPending : statusRevision} />
+                  <StatusIcon status={update?.status} />
                   <div className="text">
-                    {update.userDetails.firstName} {update.userDetails.lastName}
+                    {userName}
                     <span className="date">{moment(update.createdAt).format('DD MMM YYYY')}</span>
                   </div>
                 </div>
               </Col>
-              {dsgKeys.map(dsgKey => [
-                <Col lg={12} md={12} sm={24} xs={24}>
-                  <div className="dsg-group">
-                    <div className="h-holder">
-                      <h5>{dsgKey}</h5>
-                    </div>
-                    <ul>
-                      {dsgGroups[dsgKey].map((dsg) => [
-                        <li>
-                          <div className="label">{dsg.type}</div>
+              <Col xs={24} className="dsg-tags">
+                {
+                  Object.keys(dsgGroups).map((dsgKey, dx) => (
+                    <div key={dx}>
+                      <h6>{dsgKey}</h6>
+                      {dsgGroups[dsgKey]?.map((dsg, ix) => (
+                        <Tag key={ix}>
                           <div>
-                            <b>{nicenum(dsg.value)}</b>
-                            {dsg.targetValue && <b> ({Math.round(((dsg.value / dsg.targetValue) * 100 * 10) / 10)}%)</b>}
+                            {dsg?.type}
                           </div>
-                        </li>
-                      ])}
-                    </ul>
-                  </div>
-                </Col>
-              ])}
-              <Col lg={colSize} md={24} sm={24} xs={24}>
-                <div className="value">{nicenum(update.value)}</div>
+                          <div>
+                            <Badge count={dsg?.value} className={classNames('badge', { [update?.status]: true })} showZero />
+                          </div>
+                        </Tag>
+                      ))}
+                    </div>
+                  ))
+                }
+              </Col>
+              <Col xs={24}>
+                <h6>Value</h6>
+                <div className={classNames('value', { [update?.status]: true })}>{nicenum(update.value)}</div>
               </Col>
             </Row>
           )

akvo/rsr/spa/app/components/UpdatesHistory.jsx

@@ -9,6 +9,7 @@ import {
   Icon,
 } from 'antd'
 import classNames from 'classnames'
+import isEqual from 'lodash/isEqual'
 
 import ExpandIcon from './ExpandIcon'
 import { toCapitalize } from '../utils/string'
@@ -86,10 +87,12 @@ const UpdatesHistory = ({
           {...{
             visible,
             updates,
+            activeKeys,
             disaggregations,
             disaggregationTargets,
           }}
           onCancel={() => setVisible(false)}
+          dsgOnly={!(isEqual(activeKeys, DEFAULT_ACTIVE_KEYS))}
         />
       </Col>
       <Col className="table-history-md">

akvo/rsr/spa/app/modules/results-admin/components/ReportedEdit.scss

@@ -129,7 +129,7 @@
 * Device = Most of the Smartphones Mobiles (Portrait)
 * Screen = B/w 320px to 479px
 */
-@media (min-width: 320px) and (max-width: 480px) {
+@media (min-width: 280px) and (max-width: 480px) {
   #rsr-form-container .table-history-sm {
     display: block;
   }

akvo/rsr/spa/app/modules/results/enumerator.scss

@@ -382,7 +382,7 @@
             color: #009B8F;
           }
           &.pending{
-            color: #e36f3c;
+            color: #F79009;
           }
           &.returned{
             color: #961417;
@@ -537,12 +537,36 @@
 .all-submissions-modal{
   .ant-modal-body {
     overflow-x: auto;
+    padding: 1rem;
   }
   .ant-modal-body>div{
     width: 100%;
     &>.ant-row-flex{
+      .ant-col {
+        line-height: 1.5rem;
+        &.dsg-tags .ant-tag {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 8px;
+          margin: 8px 0;
+        }
+        &.dsg-tags .ant-tag .badge.D .ant-badge-count,
+        &.dsg-tags .ant-tag .badge.P .ant-badge-count {
+          background-color: #F79009;
+        }
+        &.dsg-tags .ant-tag .badge.R .ant-badge-count {
+          background-color: #D92D20;
+
+        }
+        &.dsg-tags .ant-tag .badge.A .ant-badge-count {
+          background-color: #42998e;
+        }
+      }
       &:not(:last-child){
         border-bottom: 1px solid #d8d8d8;
+        padding: .5rem 0 2.5rem;
       }
       svg{
         width: 24px;
@@ -561,9 +585,6 @@
         margin-left: 10px;
         font-size: 13px;
         white-space: nowrap;
-      }
-      td{
-
       }
       td.spacer{
         width: 100%;
@@ -617,8 +638,13 @@
         color: #42998e;
         font-weight: 600;
         font-size: 30px;
-        text-align: right;
         margin-right: 24px;
+        &.D, &.P {
+          color: #F79009;
+        }
+        &.R {
+          color: #D92D20;
+        }
       }
     }
   }