6503 add minimum date validation

frontend/package.json

@@ -15,13 +15,13 @@
     "@vitejs/plugin-legacy": "^1.6.2",
     "@vuelidate/core": "^2.0.0-alpha.27",
     "@vuelidate/validators": "^2.0.0-alpha.23",
+    "@vuepic/vue-datepicker": "^3.2.0",
     "axios": "^0.23.0",
     "dayjs": "^1.10.7",
     "keycloak-js": "^15.0.2",
     "pinia": "next",
     "vue": "^3.2.13",
-    "vue-router": "4",
-    "vue3-date-time-picker": "2.8.0"
+    "vue-router": "4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.9.0",

frontend/src/components/coverage/enrollment/NameSearch.vue

@@ -39,7 +39,7 @@ import GenderRadioButtonGroup from '../../ui/GenderRadioButtonGroup.vue'
 import useVuelidate from '@vuelidate/core'
 import dayjs from 'dayjs'
 import { API_DATE_FORMAT } from '../../../util/constants'
-import { validateDOB, validateFirstName, validateSecondName, validateSurname, VALIDATE_DOB_MESSAGE, VALIDATE_FIRST_NAME_MESSAGE, VALIDATE_SECOND_NAME_MESSAGE, VALIDATE_SURNAME_MESSAGE } from '../../../util/validators'
+import { validateDOB, validateMinimumDate, validateFirstName, validateSecondName, validateSurname, VALIDATE_DOB_MESSAGE, VALIDATE_MINIMUM_DATE_MESSAGE, VALIDATE_FIRST_NAME_MESSAGE, VALIDATE_SECOND_NAME_MESSAGE, VALIDATE_SURNAME_MESSAGE } from '../../../util/validators'
 import { required, helpers, maxLength } from '@vuelidate/validators'
 import { useAlertStore } from '../../../stores/alert'
 
@@ -118,6 +118,7 @@ export default {
       dateOfBirth: {
         required,
         validateDOB: helpers.withMessage(VALIDATE_DOB_MESSAGE, validateDOB),
+        validateMinimumDate: helpers.withMessage(VALIDATE_MINIMUM_DATE_MESSAGE, validateMinimumDate),
       },
       gender: {
         required,

frontend/src/components/coverage/enrollment/ResidentDetails.vue

@@ -147,6 +147,7 @@ import {
   validatePostalCode,
   validateAddress,
   validateOptionalAddress,
+  validateMinimumDate,
   validateMailingAddressForVisaResident,
   VALIDATE_ADDRESS_LINE1_REQUIRED_MESSAGE,
   VALIDATE_ADDRESS_LINE1_MESSAGE,
@@ -158,6 +159,7 @@ import {
   VALIDATE_DEPARTMENT_NUMBER_MESSAGE,
   VALIDATE_TELEPHONE_MESSAGE,
   VALIDATE_POSTAL_CODE_MESSAGE,
+  VALIDATE_MINIMUM_DATE_MESSAGE,
 } from '../../../util/validators'
 import { required, requiredIf, helpers, maxLength } from '@vuelidate/validators'
 import dayjs from 'dayjs'
@@ -321,17 +323,29 @@ export default {
       groupMemberNumber: {
         validateGroupMemberNumber: helpers.withMessage(VALIDATE_GROUP_MEMBER_NUMBER_MESSAGE, validateGroupMemberNumber),
       },
-      visaIssueDate: { required },
+      visaIssueDate: {
+        required,
+        validateMinimumDate: helpers.withMessage(VALIDATE_MINIMUM_DATE_MESSAGE, validateMinimumDate),
+      },
       departmentNumber: {
         validateDepartmentNumber: helpers.withMessage(VALIDATE_DEPARTMENT_NUMBER_MESSAGE, validateDepartmentNumber),
       },
-      visaExpiryDate: { required },
-      residenceDate: { required },
+      visaExpiryDate: {
+        required,
+        validateMinimumDate: helpers.withMessage(VALIDATE_MINIMUM_DATE_MESSAGE, validateMinimumDate),
+      },
+      residenceDate: {
+        required,
+        validateMinimumDate: helpers.withMessage(VALIDATE_MINIMUM_DATE_MESSAGE, validateMinimumDate),
+      },
       coverageEffectiveDate: { required },
       telephone: {
         validateTelephone: helpers.withMessage(VALIDATE_TELEPHONE_MESSAGE, validateTelephone),
       },
-      coverageCancellationDate: { required },
+      coverageCancellationDate: {
+        required,
+        validateMinimumDate: helpers.withMessage(VALIDATE_MINIMUM_DATE_MESSAGE, validateMinimumDate),
+      },
       address1: {
         required,
         maxLength: maxLength(25),

frontend/src/components/coverage/enrollment/ResidentDetailsWithoutPHN.vue

@@ -159,6 +159,7 @@ import {
   validateSecondName,
   validateSurname,
   validateMailingAddressForVisaResident,
+  validateMinimumDate,
   VALIDATE_FIRST_NAME_MESSAGE,
   VALIDATE_SECOND_NAME_MESSAGE,
   VALIDATE_SURNAME_MESSAGE,
@@ -173,6 +174,7 @@ import {
   VALIDATE_DOB_MESSAGE,
   VALIDATE_TELEPHONE_MESSAGE,
   VALIDATE_POSTAL_CODE_MESSAGE,
+  VALIDATE_MINIMUM_DATE_MESSAGE,
 } from '../../../util/validators'
 import { required, requiredIf, helpers, maxLength } from '@vuelidate/validators'
 import dayjs from 'dayjs'
@@ -345,6 +347,7 @@ export default {
       dateOfBirth: {
         required,
         validateDOB: helpers.withMessage(VALIDATE_DOB_MESSAGE, validateDOB),
+        validateMinimumDate: helpers.withMessage(VALIDATE_MINIMUM_DATE_MESSAGE, validateMinimumDate),
       },
       gender: {
         required,
@@ -357,17 +360,32 @@ export default {
       groupMemberNumber: {
         validateGroupMemberNumber: helpers.withMessage(VALIDATE_GROUP_MEMBER_NUMBER_MESSAGE, validateGroupMemberNumber),
       },
-      permitIssueDate: { required },
+      permitIssueDate: {
+        required,
+        validateMinimumDate: helpers.withMessage(VALIDATE_MINIMUM_DATE_MESSAGE, validateMinimumDate),
+      },
       departmentNumber: {
         validateDepartmentNumber: helpers.withMessage(VALIDATE_DEPARTMENT_NUMBER_MESSAGE, validateDepartmentNumber),
       },
-      permitExpiryDate: { required },
-      residenceDate: { required },
-      coverageEffectiveDate: { required },
+      permitExpiryDate: {
+        required,
+        validateMinimumDate: helpers.withMessage(VALIDATE_MINIMUM_DATE_MESSAGE, validateMinimumDate),
+      },
+      residenceDate: {
+        required,
+        validateMinimumDate: helpers.withMessage(VALIDATE_MINIMUM_DATE_MESSAGE, validateMinimumDate),
+      },
+      coverageEffectiveDate: {
+        required,
+        validateMinimumDate: helpers.withMessage(VALIDATE_MINIMUM_DATE_MESSAGE, validateMinimumDate),
+      },
       telephone: {
         validateTelephone: helpers.withMessage(VALIDATE_TELEPHONE_MESSAGE, validateTelephone),
       },
-      coverageCancellationDate: { required },
+      coverageCancellationDate: {
+        required,
+        validateMinimumDate: helpers.withMessage(VALIDATE_MINIMUM_DATE_MESSAGE, validateMinimumDate),
+      },
       address1: {
         required,
         maxLength: maxLength(25),

frontend/src/components/ui/AppDateInput.vue

@@ -1,80 +1,70 @@
 <template>
   <div class="text_label">
-    <label>{{label}}</label>
-    <AppTooltip v-if="tooltip" :tooltipText="tooltipText" >
-      <font-awesome-icon class="tooltip-icon" icon="question-circle"/>
+    <label>{{ label }}</label>
+    <AppTooltip v-if="tooltip" :tooltipText="tooltipText">
+      <font-awesome-icon class="tooltip-icon" icon="question-circle" />
     </AppTooltip>
   </div>
   <div v-bind="$attrs">
-    <Datepicker
-      :autoApply="true"
-      :class="inputClass"
-      :enableTimePicker="false"
-      :format="inputDateFormat"
-      :placeholder="placeholder"
-      :text-input="true"
-      :monthPicker=$attrs.monthPicker
-      :uid="$attrs.id"
-      v-model="value" 
-    />
+    <Datepicker :autoApply="true" :class="inputClass" :enableTimePicker="false" :format="inputDateFormat" :placeholder="placeholder" :text-input="true" :monthPicker="$attrs.monthPicker" :uid="$attrs.id" v-model="value" />
   </div>
-  <AppInputError :e-model="eModel" :label="label"/>
-
+  <AppInputError :e-model="eModel" :label="label" />
 </template>
 
 <script>
-import Datepicker from 'vue3-date-time-picker';
 import AppInputError from './AppInputError.vue'
-import AppTooltip from "./AppTooltip.vue";
-import 'vue3-date-time-picker/dist/main.css'
+import AppTooltip from './AppTooltip.vue'
+
+import Datepicker from '@vuepic/vue-datepicker'
+import '@vuepic/vue-datepicker/dist/main.css'
 import { INPUT_DATE_FORMAT, OUTPUT_DATE_FORMAT } from '../../util/constants.js'
 
-  export default {
-    name: 'AppDateInput',
-    components: { AppTooltip, AppInputError, Datepicker },
-    props: {
-      eModel: {
-        required: false,
-        type: Object,
-      },
-      label: String,
-      modelValue: Object,
-      inputDateFormat: {
-        default: INPUT_DATE_FORMAT,
-        type: String,
-      },
-      placeholder: {
-        default: OUTPUT_DATE_FORMAT,
-        type: String,
-      },
-      tooltip: Boolean,
-      tooltipText: String,
+export default {
+  name: 'AppDateInput',
+  components: { AppTooltip, AppInputError, Datepicker },
+  props: {
+    eModel: {
+      required: false,
+      type: Object,
+    },
+    label: String,
+    modelValue: Object,
+    inputDateFormat: {
+      default: INPUT_DATE_FORMAT,
+      type: String,
+    },
+    placeholder: {
+      default: OUTPUT_DATE_FORMAT,
+      type: String,
     },
-    computed: {
-      value: {
-        get() {
-          return this.modelValue
-        },
-        set(value) {
-          this.$emit('update:modelValue', value)
-        }
+    tooltip: Boolean,
+    tooltipText: String,
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue
       },
-      inputClass() {
-        return {
-          'text_input': true,
-          'error-input' : this.eModel?.$error,
-        }
+      set(value) {
+        this.$emit('update:modelValue', value)
       },
     },
-  }
+    inputClass() {
+      return {
+        text_input: true,
+        'error-input': this.eModel?.$error,
+      }
+    },
+  },
+}
 </script>
 
 <style>
 .dp__theme_light {
   --dp-border-color: #606060;
   --dp-text-color: #000000;
   --dp-hover-color: #6583b0;
-/*   --dp-background-color: #ffffff;    
+  /*   --dp-background-color: #ffffff;    
   --dp-hover-color: #f3f3f3;
   --dp-primary-color: #1976d2;
   --dp-primary-text-color: #f8f5f5;
@@ -86,11 +76,10 @@ import { INPUT_DATE_FORMAT, OUTPUT_DATE_FORMAT } from '../../util/constants.js'
   --dp-success-color: #76d275;
   --dp-icon-color: #959595;
   --dp-danger-color: #ff6f60; */
-
 }
-  
+
 input.dp__input {
-  border-color: #606060;;
+  border-color: #606060;
   border-width: 2px;
   color: #000000;
   font-family: 'BCSans';
@@ -103,18 +92,17 @@ input.dp__input {
 .text_label {
   display: flex;
 }
-  
+
 .dp__input:focus {
-  outline: 2px solid #3B99FC;
+  outline: 2px solid #3b99fc;
   outline-offset: 1px;
 }
 
-.error-input input  {
-  border-color: #D8292F !important;
+.error-input input {
+  border-color: #d8292f !important;
 }
 
 .tooltip-icon {
-  margin-left: 5px
+  margin-left: 5px;
 }
-
-</style>
+</style>

frontend/src/util/validators.js

@@ -91,6 +91,38 @@ export function validateDOB(dateOfBirth) {
   return true
 }
 
+/**
+ * Validates that the Date is not earlier than '1900-01-01' .
+ */
+export function validateMinimumDate(dateInput) {
+  if (!helpers.req(dateInput)) {
+    return true
+  }
+  return !dayjs(dateInput).isBefore('1900-01-01')
+}
+
+/**
+ * Validates that the EffectiveDate is not earlier than '1900-01-01' .
+ */
+export function validateMinimumEffectiveDate(dateInput) {
+  if (!helpers.req(dateInput)) {
+    return true
+  }
+  const adjustedEffectiveDate = new Date(this.coverageEffectiveDate.year, this.coverageEffectiveDate.month, 1)
+  return validateMinimumDate(adjustedEffectiveDate)
+}
+
+/**
+ * Validates that the Cancel Date is not earlier than '1900-01-01' .
+ */
+export function validateMinimumCancelDate(dateInput) {
+  if (!helpers.req(dateInput)) {
+    return true
+  }
+  const adjustedCancelDate = new Date(this.cancelDate.year, this.cancelDate.month + 1, 0)
+  return validateMinimumDate(adjustedCancelDate)
+}
+
 /**
  * Validate Group Member Number. It can be up to nine (9) characters. Any alpha or numeric characters are allowed, except for |^ \ & which are invalid.
  */
@@ -292,6 +324,7 @@ export const VALIDATE_FIRST_NAME_MESSAGE = 'First Name is invalid'
 export const VALIDATE_SECOND_NAME_MESSAGE = 'Second Name is invalid'
 export const VALIDATE_CITY_MESSAGE = 'City is invalid'
 export const VALIDATE_DOB_MESSAGE = 'Date of Birth must not be in the future'
+export const VALIDATE_MINIMUM_DATE_MESSAGE = 'Date must be on or after 19000101'
 export const VALIDATE_PHN_MESSAGE = 'PHN format is invalid'
 export const VALIDATE_CONTRACT_NUMBER_MESSAGE = 'MSP Contract Number is invalid'
 export const VALIDATE_GROUP_NUMBER_MESSAGE = 'Group Number is invalid'

frontend/src/views/eligibility/CheckEligibility.vue

@@ -50,7 +50,7 @@
 import AppCard from '../../components/ui/AppCard.vue'
 import EligibilityService from '../../services/EligibilityService'
 import useVuelidate from '@vuelidate/core'
-import { validatePHN, VALIDATE_PHN_MESSAGE } from '../../util/validators'
+import { validatePHN, validateMinimumDate, VALIDATE_PHN_MESSAGE, VALIDATE_MINIMUM_DATE_MESSAGE } from '../../util/validators'
 import { required, helpers } from '@vuelidate/validators'
 import { API_DATE_FORMAT, COVERAGE_END_REASONS } from '../../util/constants'
 import dayjs from 'dayjs'
@@ -147,7 +147,10 @@ export default {
         required,
         validatePHN: helpers.withMessage(VALIDATE_PHN_MESSAGE, validatePHN),
       },
-      eligibilityDate: { required },
+      eligibilityDate: {
+        required,
+        validateMinimumDate: helpers.withMessage(VALIDATE_MINIMUM_DATE_MESSAGE, validateMinimumDate),
+      },
     }
   },
 }