Merge branch 'main' into 6583-issue-with-name-search-gender

bcgov · May 20, 2022 · 57bcb7f · 57bcb7f
2 parents 948ed20 + e94b00e
commit 57bcb7f
Show file tree

Hide file tree

Showing 16 changed files with 133 additions and 117 deletions.
diff --git a/frontend/package.json b/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",

diff --git a/frontend/src/components/coverage/enrollment/ResidentDetails.vue b/frontend/src/components/coverage/enrollment/ResidentDetails.vue
@@ -321,17 +321,25 @@ export default {
       groupMemberNumber: {
         validateGroupMemberNumber: helpers.withMessage(VALIDATE_GROUP_MEMBER_NUMBER_MESSAGE, validateGroupMemberNumber),
       },
-      visaIssueDate: { required },
+      visaIssueDate: {
+        required,
+      },
       departmentNumber: {
         validateDepartmentNumber: helpers.withMessage(VALIDATE_DEPARTMENT_NUMBER_MESSAGE, validateDepartmentNumber),
       },
-      visaExpiryDate: { required },
-      residenceDate: { required },
+      visaExpiryDate: {
+        required,
+      },
+      residenceDate: {
+        required,
+      },
       coverageEffectiveDate: { required },
       telephone: {
         validateTelephone: helpers.withMessage(VALIDATE_TELEPHONE_MESSAGE, validateTelephone),
       },
-      coverageCancellationDate: { required },
+      coverageCancellationDate: {
+        required,
+      },
       address1: {
         required,
         maxLength: maxLength(25),

diff --git a/frontend/src/components/coverage/enrollment/ResidentDetailsWithoutPHN.vue b/frontend/src/components/coverage/enrollment/ResidentDetailsWithoutPHN.vue
@@ -357,17 +357,27 @@ export default {
       groupMemberNumber: {
         validateGroupMemberNumber: helpers.withMessage(VALIDATE_GROUP_MEMBER_NUMBER_MESSAGE, validateGroupMemberNumber),
       },
-      permitIssueDate: { required },
+      permitIssueDate: {
+        required,
+      },
       departmentNumber: {
         validateDepartmentNumber: helpers.withMessage(VALIDATE_DEPARTMENT_NUMBER_MESSAGE, validateDepartmentNumber),
       },
-      permitExpiryDate: { required },
-      residenceDate: { required },
-      coverageEffectiveDate: { required },
+      permitExpiryDate: {
+        required,
+      },
+      residenceDate: {
+        required,
+      },
+      coverageEffectiveDate: {
+        required,
+      },
       telephone: {
         validateTelephone: helpers.withMessage(VALIDATE_TELEPHONE_MESSAGE, validateTelephone),
       },
-      coverageCancellationDate: { required },
+      coverageCancellationDate: {
+        required,
+      },
       address1: {
         required,
         maxLength: maxLength(25),

diff --git a/frontend/src/components/ui/AppDateInput.vue b/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>
diff --git a/frontend/src/views/eligibility/CheckEligibility.vue b/frontend/src/views/eligibility/CheckEligibility.vue
@@ -147,7 +147,9 @@ export default {
         required,
         validatePHN: helpers.withMessage(VALIDATE_PHN_MESSAGE, validatePHN),
       },
-      eligibilityDate: { required },
+      eligibilityDate: {
+        required,
+      },
     }
   },
 }

diff --git a/frontend/src/views/eligibility/CoverageStatusCheck.vue b/frontend/src/views/eligibility/CoverageStatusCheck.vue
@@ -276,7 +276,9 @@ export default {
         required,
         validateDOB: helpers.withMessage(VALIDATE_DOB_MESSAGE, validateDOB),
       },
-      dateOfService: { required },
+      dateOfService: {
+        required,
+      },
     }
   },
 }

diff --git a/frontend/src/views/groupmember/AddDependent.vue b/frontend/src/views/groupmember/AddDependent.vue
@@ -165,7 +165,9 @@ export default {
         required,
         validateGroupNumber: helpers.withMessage(VALIDATE_GROUP_NUMBER_MESSAGE, validateGroupNumber),
       },
-      coverageEffectiveDate: { required },
+      coverageEffectiveDate: {
+        required,
+      },
       phn: {
         required,
         validatePHN: helpers.withMessage(VALIDATE_PHN_MESSAGE, validatePHN),

diff --git a/frontend/src/views/groupmember/AddGroupMember.vue b/frontend/src/views/groupmember/AddGroupMember.vue
@@ -311,7 +311,9 @@ export default {
       departmentNumber: {
         validateDepartmentNumber: helpers.withMessage(VALIDATE_DEPARTMENT_NUMBER_MESSAGE, validateDepartmentNumber),
       },
-      coverageEffectiveDate: { required },
+      coverageEffectiveDate: {
+        required,
+      },
       telephone: {
         validateTelephone: helpers.withMessage(VALIDATE_TELEPHONE_MESSAGE, validateTelephone),
       },

diff --git a/frontend/src/views/groupmember/CancelDependent.vue b/frontend/src/views/groupmember/CancelDependent.vue
@@ -160,7 +160,9 @@ export default {
         required,
         validateGroupNumber: helpers.withMessage(VALIDATE_GROUP_NUMBER_MESSAGE, validateGroupNumber),
       },
-      cancelDate: { required },
+      cancelDate: {
+        required,
+      },
       cancelReason: { required },
     }
   },

diff --git a/frontend/src/views/groupmember/CancelGroupMember.vue b/frontend/src/views/groupmember/CancelGroupMember.vue
@@ -135,7 +135,9 @@ export default {
         required,
         validateGroupNumber: helpers.withMessage(VALIDATE_GROUP_NUMBER_MESSAGE, validateGroupNumber),
       },
-      cancelDate: { required },
+      cancelDate: {
+        required,
+      },
       cancelReason: { required },
     }
   },

diff --git a/frontend/tests/e2e/pages/groupmember/AddGroupMember.js b/frontend/tests/e2e/pages/groupmember/AddGroupMember.js
@@ -1,38 +1,36 @@
 import { Selector } from 'testcafe'
 
 class AddGroupMember {
-    constructor () {
-
-        this.groupNumberInput = Selector('#groupNumber')
-        this.phnInput = Selector('#phn')
-        this.groupMemberNumberInput = Selector('#groupMemberNumber')   
-        this.departmentNumberInput = Selector('#departmentNumber')       
-        this.coverageEffectiveDateInput = Selector('#coverageEffectiveDate')
-        this.divSelectedDate = Selector('div').withAttribute('class', 'dp__overlay_cell_active dp__overlay_cell_pad')
-        this.telephoneInput = Selector('#telephone')
-        this.address1Input = Selector('#addressLine1')
-        this.address2Input = Selector('#addressLine2')
-        this.address3Input = Selector('#addressLine3')
-        this.address4Input = Selector('#addressLine4')
-        this.postalCodeInput = Selector('#postalCode')
-        this.mailingAddress1Input = Selector('#mailingAddress1')
-        this.mailingAddress2Input = Selector('#mailingAddress2')
-        this.mailingAddress3Input = Selector('#mailingAddress3')
-        this.mailingAddress4Input = Selector('#mailingAddress4')
-        this.mailingPostalCodeInput = Selector('#mailingPostalCode')
-        this.spouse = Selector('#spousePhn')
-        this.dependentPhn = Selector('#dependentPHN')
-        this.dependentList = Selector('#dependentList')
-        this.dependentText = this.dependentList.child('li')
+  constructor() {
+    this.groupNumberInput = Selector('#groupNumber')
+    this.phnInput = Selector('#phn')
+    this.groupMemberNumberInput = Selector('#groupMemberNumber')
+    this.departmentNumberInput = Selector('#departmentNumber')
+    this.coverageEffectiveDateInput = Selector('#coverageEffectiveDate')
+    this.divSelectedDate = Selector('div').withAttribute('class', 'dp__overlay_cell_active dp__overlay_cell_pad')
+    this.telephoneInput = Selector('#telephone')
+    this.address1Input = Selector('#addressLine1')
+    this.address2Input = Selector('#addressLine2')
+    this.address3Input = Selector('#addressLine3')
+    this.address4Input = Selector('#addressLine4')
+    this.postalCodeInput = Selector('#postalCode')
+    this.mailingAddress1Input = Selector('#mailingAddress1')
+    this.mailingAddress2Input = Selector('#mailingAddress2')
+    this.mailingAddress3Input = Selector('#mailingAddress3')
+    this.mailingAddress4Input = Selector('#mailingAddress4')
+    this.mailingPostalCodeInput = Selector('#mailingPostalCode')
+    this.spouse = Selector('#spousePhn')
+    this.dependentPhn = Selector('#dependentPHN')
+    this.dependentList = Selector('#dependentList')
+    this.dependentText = this.dependentList.child('li')
 
-        this.errorText = Selector('div').withAttribute('class','error-text')
+    this.errorText = Selector('div').withAttribute('class', 'error-text')
 
-        this.submitButton = Selector('button[type="submit"]')
-        this.clearButton = Selector('button[type="button"]').withText('Clear')
-        this.addButton = Selector('button[type="button"]').withText('Add')
-        this.removeIcon = Selector('#removeIcon')
-
-    }
+    this.submitButton = Selector('button[type="submit"]')
+    this.clearButton = Selector('button[type="button"]').withText('Clear')
+    this.addButton = Selector('button[type="button"]').withText('Add')
+    this.removeIcon = Selector('#removeIcon')
+  }
 }
 
-export default new AddGroupMember()
+export default new AddGroupMember()
diff --git a/frontend/tests/e2e/tests/eligibility/CheckEligibilityTest.js b/frontend/tests/e2e/tests/eligibility/CheckEligibilityTest.js
@@ -1,12 +1,13 @@
+import { SITE_UNDER_TEST } from '../../configuration'
 import AlertPage from '../../pages/AlertPage'
 import CheckEligibilityPage from '../../pages/eligibility/CheckEligibilityPage'
-import { SITE_UNDER_TEST } from '../../configuration'
 import { regularAccUser } from '../../roles/roles'
 
 const ERROR_MESSAGE = 'Please correct errors before submitting'
 const SUCCESS_MESSAGE = 'HJMB001I SUCCESSFULLY COMPLETED'
 const PHN_REQUIRED_MESSAGE = 'PHN is required'
 const DATE_TO_CHECK_REQUIRED_MESSAGE = 'Date to Check is required'
+
 const INVALID_PHN_ERROR_MESSAGE = 'PHN format is invalid'
 
 const PAGE_TO_TEST = SITE_UNDER_TEST + '/eligibility/checkEligibility'