Merge pull request #3872 from NCI-Agency/GH-3844-Ability-to-see-the-V…

…-&-S-history

Ability to see the V & S history

anet-dictionary.yml

@@ -1125,7 +1125,7 @@ fields:
         placeholder: the six character code
 
   principal:
-
+    onDemandAssessmentExpirationDays: 108
     person:
       name: Afghan Partner
       countries: [Afghanistan]
@@ -1220,6 +1220,45 @@ fields:
                 yes:
                   label: 👍
                   color: '#0000ff'
+        - recurrence: ondemand
+          questions:
+            assessmentDate:
+              type: date
+              label: Screening and vetting date
+              validations:
+                - type: required
+                  params: [You must provide the assessment date]
+            expirationDate:
+              type: date
+              label: Expiration date
+            question1:
+              type: enum
+              label: Screening and vetting level
+              choices:
+                pass1:
+                  label: Pass 1
+                  color: '#c2ffb3'
+                pass2:
+                  label: Pass 2
+                  color: '#c2ffb3'
+                pass3:
+                  label: Pass 3
+                  color: '#c2ffb3'
+                fail1:
+                  label: Fail 1
+                  color: '#ff8279'
+                fail2:
+                  label: Fail 2
+                  color: '#ff8279'
+                fail3:
+                  label: Fail 3
+                  color: '#ff8279'
+            question2:
+              type: special_field
+              label: Screening and vetting comment
+              widget: richTextEditor
+              style:
+                height: 70px
       # number of fields after Avatar in the left column for principals
       # adjust this number if two columns are not balanced on the Person Page
       numberOfFieldsInLeftColumn: 7

client/src/components/CustomDateInput.js

@@ -44,7 +44,7 @@ const CustomDateInput = ({
     : Settings.dateFormats.forms.input.date
   const inputFormat = dateFormats[0]
   const timePickerProps = !withTime
-    ? {}
+    ? undefined
     : {
       precision: TimePrecision.MINUTE,
       selectAllOnFocus: true

client/src/components/CustomFields.js

@@ -13,7 +13,9 @@ import Model, {
   CUSTOM_FIELD_TYPE,
   DEFAULT_CUSTOM_FIELDS_PARENT,
   INVISIBLE_CUSTOM_FIELDS_FIELD,
-  SENSITIVE_CUSTOM_FIELDS_PARENT
+  SENSITIVE_CUSTOM_FIELDS_PARENT,
+  ENTITY_ASSESSMENT_PARENT_FIELD,
+  ENTITY_ON_DEMAND_ASSESSMENT_DATE
 } from "components/Model"
 import RemoveButton from "components/RemoveButton"
 import RichTextEditor from "components/RichTextEditor"
@@ -164,12 +166,14 @@ const ReadonlyTextField = fieldProps => {
 }
 
 const DateField = fieldProps => {
-  const { name, withTime, ...otherFieldProps } = fieldProps
+  const { name, withTime, maxDate, ...otherFieldProps } = fieldProps
   return (
     <FastField
       name={name}
       component={FieldHelper.SpecialField}
-      widget={<CustomDateInput id={name} withTime={withTime} />}
+      widget={
+        <CustomDateInput id={name} withTime={withTime} maxDate={maxDate} />
+      }
       {...otherFieldProps}
     />
   )
@@ -959,10 +963,18 @@ const CustomField = ({
         return {
           formikProps
         }
+      case CUSTOM_FIELD_TYPE.DATE:
+        return {
+          maxDate:
+            fieldName ===
+            `${ENTITY_ASSESSMENT_PARENT_FIELD}.${ENTITY_ON_DEMAND_ASSESSMENT_DATE}`
+              ? moment().toDate()
+              : undefined
+        }
       default:
         return {}
     }
-  }, [fieldConfig, formikProps, invisibleFields, type])
+  }, [fieldConfig, fieldName, formikProps, invisibleFields, type])
   return FieldComponent ? (
     <FieldComponent
       name={fieldName}

client/src/components/Model.js

@@ -315,6 +315,8 @@ export const createYupObjectShape = (
 }
 
 export const ENTITY_ASSESSMENT_PARENT_FIELD = "entityAssessment"
+export const ENTITY_ON_DEMAND_ASSESSMENT_DATE = "assessmentDate"
+export const ENTITY_ON_DEMAND_EXPIRATION_DATE = "expirationDate"
 
 export const createAssessmentSchema = (
   assessmentConfig,
@@ -324,6 +326,25 @@ export const createAssessmentSchema = (
     assessmentConfig,
     parentFieldName
   )
+
+  /** *********** Additional validation section for specific assessment fields. *************/
+  if (assessmentSchemaShape.fields.expirationDate) {
+    assessmentSchemaShape.fields.expirationDate = assessmentSchemaShape.fields.expirationDate.when(
+      ENTITY_ON_DEMAND_ASSESSMENT_DATE,
+      (assessmentDate, schema) => {
+        if (assessmentDate) {
+          return schema.min(
+            assessmentDate,
+            `${
+              assessmentConfig.expirationDate.label
+            } must be later than ${moment(assessmentDate).format("DD-MM-YYYY")}`
+          )
+        }
+      }
+    )
+  }
+  /******************************************************************************************/
+
   return yup.object().shape({
     [parentFieldName]: assessmentSchemaShape
   })
@@ -602,6 +623,29 @@ export default class Model {
       )
   }
 
+  /**
+   * Filters ondemand assessments inside the notes object and returns them sorted
+   * with respect to their assessmentDate.
+   * @returns {object}
+   */
+  getOndemandAssessments() {
+    const onDemandNotes = this.notes.filter(
+      a =>
+        a.type === "ASSESSMENT" &&
+        utils.parseJsonSafe(a.text).__recurrence === RECURRENCE_TYPE.ON_DEMAND
+    )
+    // Sort the notes before visualizing them inside of a Card.
+    const sortedOnDemandNotes = onDemandNotes.sort((a, b) => {
+      return (
+        new Date(
+          utils.parseJsonSafe(a.text)[ENTITY_ON_DEMAND_ASSESSMENT_DATE]
+        ) -
+        new Date(utils.parseJsonSafe(b.text)[ENTITY_ON_DEMAND_ASSESSMENT_DATE])
+      )
+    })
+    return sortedOnDemandNotes
+  }
+
   static getInstantAssessmentsDetailsForEntities(
     entities,
     assessmentsParentField,

client/src/components/PeriodsNavigation.js

@@ -4,22 +4,39 @@ import PropTypes from "prop-types"
 import React from "react"
 import { Button } from "react-bootstrap"
 
-const PeriodsNavigation = ({ offset, onChange }) => (
+const PeriodsNavigation = ({
+  offset,
+  onChange,
+  disabledLeft,
+  disabledRight
+}) => (
   <div style={{ display: "flex", justifyContent: "space-between" }}>
-    <Button variant="outline-secondary" onClick={() => onChange(offset + 1)}>
+    <Button
+      variant="outline-secondary"
+      disabled={disabledLeft}
+      onClick={() => onChange(offset + 1)}
+    >
       <Icon icon={IconNames.DOUBLE_CHEVRON_LEFT} /> previous period
     </Button>
-    <Button variant="outline-secondary" onClick={() => onChange(offset - 1)}>
+    <Button
+      variant="outline-secondary"
+      disabled={disabledRight}
+      onClick={() => onChange(offset - 1)}
+    >
       next period <Icon icon={IconNames.DOUBLE_CHEVRON_RIGHT} />
     </Button>
   </div>
 )
 PeriodsNavigation.propTypes = {
   offset: PropTypes.number,
-  onChange: PropTypes.func.isRequired
+  onChange: PropTypes.func.isRequired,
+  disabledLeft: PropTypes.bool,
+  disabledRight: PropTypes.bool
 }
 PeriodsNavigation.defaultProps = {
-  offset: 0
+  offset: 0,
+  disabledLeft: false,
+  disabledRight: false
 }
 
 export default PeriodsNavigation

client/src/components/assessments/AssessmentModal.js

@@ -44,7 +44,7 @@ const AssessmentModal = ({
         centered
         show={showModal}
         onHide={closeModal}
-        style={{ zIndex: "1150" }}
+        style={{ zIndex: "1220" }}
       >
         <Formik
           enableReinitialize

client/src/components/assessments/AssessmentResultsContainer.js

@@ -1,6 +1,11 @@
 import AssessmentResultsTable from "components/assessments/AssessmentResultsTable"
+import OnDemandAssessments from "components/assessments/OndemandAssessments"
 import Model from "components/Model"
-import { PERIOD_FACTORIES, useResponsiveNumberOfPeriods } from "periodUtils"
+import {
+  PERIOD_FACTORIES,
+  RECURRENCE_TYPE,
+  useResponsiveNumberOfPeriods
+} from "periodUtils"
 import PropTypes from "prop-types"
 import React, { useState } from "react"
 
@@ -20,10 +25,24 @@ const AssessmentResultsContainer = ({
   const assessmentsTypes = Object.keys(entity.getAssessmentsConfig())
   return (
     <div ref={contRef}>
-      {assessmentsTypes.map(
-        assessmentsType =>
-          PERIOD_FACTORIES[assessmentsType] && (
-            <AssessmentResultsTable
+      {assessmentsTypes.map(assessmentsType =>
+        PERIOD_FACTORIES[assessmentsType] ? (
+          <AssessmentResultsTable
+            key={assessmentsType}
+            style={{ flex: "0 0 100%" }}
+            entity={entity}
+            entityType={entityType}
+            subEntities={subEntities}
+            periodsDetails={{
+              recurrence: assessmentsType,
+              numberOfPeriods
+            }}
+            canAddAssessment={canAddAssessment}
+            onUpdateAssessment={onUpdateAssessment}
+          />
+        ) : (
+          assessmentsType === RECURRENCE_TYPE.ON_DEMAND && (
+            <OnDemandAssessments
               key={assessmentsType}
               style={{ flex: "0 0 100%" }}
               entity={entity}
@@ -37,6 +56,7 @@ const AssessmentResultsContainer = ({
               onUpdateAssessment={onUpdateAssessment}
             />
           )
+        )
       )}
     </div>
   )