Merge pull request #548 from bcgov/ccfri-3715-province-family-app

CCFRI-3715 - add province family app and Vue 3 bug fixes
bcgov · Oct 28, 2024 · 2ac25aa · 2ac25aa
2 parents 1430f2b + 367350d
commit 2ac25aa
Show file tree

Hide file tree

Showing 21 changed files with 1,138 additions and 1,182 deletions.
diff --git a/backend/src/util/mapping/Mappings.js b/backend/src/util/mapping/Mappings.js
@@ -192,8 +192,8 @@ const CCOFApplicationFundingMapping = [
 
   { back: 'ccof_maxnoofdaysperweekyouprovidechildcare', front: 'maxDaysPerWeek' },
   { back: 'ccof_maxnoofweeksperyearyouprovidechildcare', front: 'maxWeeksPerYear' },
-  { back: 'ccof_facilityhoursofoperationfrom', front: 'hoursFrom12hr' },
-  { back: 'ccof_facilityhoursofoperationto', front: 'hoursTo12hr' },
+  { back: 'ccof_facilityhoursofoperationfrom', front: 'hoursFrom' },
+  { back: 'ccof_facilityhoursofoperationto', front: 'hoursTo' },
   { back: 'ccof_maximumnumberofchildcarespacesyouoffer', front: 'maxSpaces' },
   { back: 'ccof_maximumlicensedcapacity', front: 'maxLicensesCapacity' },
   { back: 'ccof_multiagechildcaremaxnumber', front: 'maxGroupChildCareMultiAge' },

diff --git a/frontend/src/components/FacilitySearch.vue b/frontend/src/components/FacilitySearch.vue
@@ -67,7 +67,7 @@
                   </v-btn>
                 </template>
                 <v-card>
-                  <v-container style="padding-top: 0px" class="px-3" >
+                  <v-container style="padding-top: 0px" class="px-3">
                     <v-row>
                       <v-col cols="6" class="d-flex pl-0 d-flex align-center" style="background-color: #7b2ee5">
                         <v-card-title
@@ -239,7 +239,7 @@ export default {
       loading: false,
       headers: [
         {
-          text: '',
+          title: '',
           align: 'start',
           sortable: false,
           value: 'name',

diff --git a/frontend/src/components/SubmissionHistory.vue b/frontend/src/components/SubmissionHistory.vue
@@ -70,11 +70,11 @@ export default {
       loading: false,
       rules: [(v) => !!v || 'Required.'],
       headersGroup: [
-        { text: 'Application/Change Request ID', value: 'appId', class: 'tableHeader' },
-        { text: 'Type', value: 'type', class: 'tableHeader' },
-        { text: 'Fiscal Year', value: 'fiscalYear', class: 'tableHeader' },
-        { text: 'Submission Date', value: 'submissionDateString', class: 'tableHeader' },
-        { text: 'PDF', value: 'PDF', class: 'tableHeader' },
+        { title: 'Application/Change Request ID', value: 'appId', class: 'tableHeader' },
+        { title: 'Type', value: 'type', class: 'tableHeader' },
+        { title: 'Fiscal Year', value: 'fiscalYear', class: 'tableHeader' },
+        { title: 'Submission Date', value: 'submissionDateString', class: 'tableHeader' },
+        { title: 'PDF', value: 'PDF', class: 'tableHeader' },
       ],
       changeHistoryButtonWidth: '88px',
     };

diff --git a/frontend/src/components/SummaryDeclaration.vue b/frontend/src/components/SummaryDeclaration.vue
@@ -219,7 +219,7 @@
       >
         Funding Agreement Number: {{ getFundingAgreementNumber }}
       </v-row>
-      <v-row justify="center" class="pb-12" :class="printableVersion ? 'ma-0' : 'ma-8'">
+      <v-row justify="center" class="pb-12" :class="printableVersion ? 'ma-0' : 'ma-12'">
         <v-card class="py-0 px-3 mx-0 mt-10 rounded-lg col-11" elevation="4">
           <v-row>
             <v-col class="pa-0">
@@ -423,6 +423,7 @@
   </v-container>
 </template>
 <script>
+import { cloneDeep, isEmpty } from 'lodash';
 import { mapActions, mapState } from 'pinia';
 import { useAuthStore } from '@/store/auth.js';
 import { useNavBarStore } from '@/store/navBar.js';
@@ -447,11 +448,6 @@ import CCOFSummaryFamily from '@/components/summary/group/CCOFSummaryFamily.vue'
 import ChangeNotificationFormSummary from '@/components/summary/changeRequest/ChangeNotificationFormSummary.vue';
 import { isAnyApplicationUnlocked, isAnyChangeRequestActive } from '@/utils/common.js';
 
-let model = {
-  agreeConsentCertify: undefined,
-  orgContactName: undefined,
-};
-
 export default {
   components: {
     OrganizationSummary,
@@ -495,7 +491,13 @@ export default {
     ...mapState(useAppStore, ['programYearList', 'getFundingUrl', 'getLanguageYearLabel']),
     ...mapState(useNavBarStore, ['canSubmit', 'navBarList', 'changeRequestId']),
     ...mapState(useOrganizationStore, ['organizationAccountNumber', 'isOrganizationComplete']),
-    ...mapState(useSummaryDeclarationStore, ['summaryModel', 'isSummaryLoading', 'isMainLoading', 'isLoadingComplete']),
+    ...mapState(useSummaryDeclarationStore, [
+      'declarationModel',
+      'summaryModel',
+      'isSummaryLoading',
+      'isMainLoading',
+      'isLoadingComplete',
+    ]),
     ...mapState(useApplicationStore, [
       'formattedProgramYear',
       'isRenewal',
@@ -631,8 +633,9 @@ export default {
     await this.getChangeRequestList();
     await this.loadSummary(this.$route.params?.changeRecGuid);
     await this.loadData();
-    const summaryDeclarationStore = useSummaryDeclarationStore();
-    this.model = summaryDeclarationStore.model ?? model;
+    if (!isEmpty(this.declarationModel)) {
+      this.model = cloneDeep(this.declarationModel);
+    }
 
     // if (this.isRenewal || (this.unlockDeclaration && this.organizationAccountNumber)) {
     if (!this.isChangeRequest && (this.isRenewal || (this.unlockDeclaration && this.organizationAccountNumber))) {
@@ -670,7 +673,7 @@ export default {
       'loadChangeRequestDeclaration',
       'loadChangeRequestSummaryDeclaration',
       'loadSummary',
-      'setModel',
+      'setDeclarationModel',
       'updateApplicationStatus',
       'updateDeclaration',
     ]),
@@ -717,7 +720,7 @@ export default {
     async submit() {
       this.isProcessing = true;
       try {
-        this.setModel(this.model);
+        this.setDeclarationModel(this.model);
         if (this.isChangeRequest) {
           // await this.updateDeclaration({changeRequestId: this.$route.params?.changeRecGuid, reLockPayload:this.createChangeRequestRelockPayload()});
           await this.updateDeclaration({ changeRequestId: this.$route.params?.changeRecGuid, reLockPayload: [] });

diff --git a/frontend/src/components/SupportingDocumentUpload.vue b/frontend/src/components/SupportingDocumentUpload.vue
@@ -1,7 +1,7 @@
 <template>
   <v-form ref="form" v-model="isValidForm">
     <v-container>
-      <v-row justify="space-around">
+      <div>
         <v-card class="cc-top-level-card mx-12" width="100%">
           <v-card-title class="text-center text-wrap">
             <span class="text-h5">
@@ -94,27 +94,24 @@
             <v-skeleton-loader max-height="375px" :loading="true" type="table-row-divider@3" />
           </v-card>
         </v-card>
-      </v-row>
-      <v-row v-if="isChangeRequest">
-        <v-card v-if="isLoading" class="mx-auto mb-4 rounded-lg cc-top-level-card mx-12" width="100%">
-          <v-skeleton-loader v-if="isLoading" :loading="isLoading" type="card-heading" />
-          <v-skeleton-loader v-if="isLoading" :loading="isLoading" type="list-item-avatar" />
-          <v-skeleton-loader v-if="isLoading" :loading="isLoading" type="list-item-avatar" />
-        </v-card>
-        <v-card v-else class="px-0 py-0 mx-auto mb-4 rounded-lg cc-top-level-card mx-12" width="100%">
-          <v-card-text class="pt-7 pa-0">
-            <div class="px-md-12 px-7">
-              <p class="text-h5 text--primary">
-                Would you like to report any other changes to your licence or service?
-              </p>
-              <v-radio-group v-model="otherChanges" required :rules="rules.required" :disabled="isLocked">
-                <v-radio label="Yes" value="Yes" />
-                <v-radio label="No" value="No" @click="noReportChanges()" />
-              </v-radio-group>
-            </div>
-          </v-card-text>
-        </v-card>
-      </v-row>
+      </div>
+      <div v-if="isChangeRequest" class="mx-12">
+        <v-skeleton-loader :loading="isLoading" type="table-tbody">
+          <v-card class="mb-8 rounded-lg cc-top-level-card" width="100%">
+            <v-card-text class="pt-7 pa-0">
+              <div class="px-md-12 px-7">
+                <p class="text-h5 text--primary">
+                  Would you like to report any other changes to your licence or service?
+                </p>
+                <v-radio-group v-model="otherChanges" required :rules="rules.required" :disabled="isLocked">
+                  <v-radio label="Yes" value="Yes" />
+                  <v-radio label="No" value="No" @click="noReportChanges()" />
+                </v-radio-group>
+              </div>
+            </v-card-text>
+          </v-card>
+        </v-skeleton-loader>
+      </div>
       <v-row v-if="otherChanges == 'Yes'" class="d-flex justify-center">
         <GroupChangeDialogueContent style="max-width: 1200px" class="pb-4" />
       </v-row>

diff --git a/frontend/src/components/ccofApplication/family/Eligibility.vue b/frontend/src/components/ccofApplication/family/Eligibility.vue
@@ -1,98 +1,80 @@
 <template>
-  <v-form ref="form" v-model="model.isFacilityComplete" :class="loading ? 'ccof-skeleton-loader' : ''">
+  <v-form ref="form" v-model="model.isFacilityComplete">
     <v-container>
-      <v-row justify="center" class="pt-4, pb-4">
-        <span class="text-h5">Information to Determine Eligibility</span>
-      </v-row>
-      <v-row justify="space-around">
-        <v-card class="cc-top-level-card" width="1200">
-          <v-container>
-            <v-row>
-              <v-col cols="12" md="12">
-                <v-text-field
-                  v-model="model.facilityName"
-                  :disabled="isLocked"
-                  variant="outlined"
-                  required
-                  :rules="rules.required"
-                  label="Facility Name"
-                />
-              </v-col>
-            </v-row>
-            <v-row>
-              <v-col cols="12" md="6">
-                <v-text-field
-                  v-model="model.licenseNumber"
-                  :disabled="isLocked"
-                  variant="outlined"
-                  required
-                  :rules="rules.required"
-                  label="Facility Licence Number"
-                />
-              </v-col>
-              <v-col cols="12" md="6">
-                <v-menu
-                  v-if="!isLocked"
-                  v-model="model.calendarMenu"
-                  :close-on-content-click="false"
-                  :nudge-right="40"
-                  transition="scale-transition"
-                  offset-y
-                  min-width="auto"
-                >
-                  <template #activator="{ props }">
+      <v-skeleton-loader :loading="loading" type="table-tbody" class="mb-12">
+        <v-container fluid class="pa-0">
+          <v-row justify="center" class="pt-4, pb-4">
+            <span class="text-h5">Information to Determine Eligibility</span>
+          </v-row>
+          <v-row justify="space-around">
+            <v-card class="cc-top-level-card" width="1200">
+              <v-container>
+                <v-row>
+                  <v-col cols="12" md="12">
                     <v-text-field
-                      v-model="model.licenseEffectiveDate"
-                      readonly
+                      v-model="model.facilityName"
+                      :disabled="isLocked"
                       variant="outlined"
                       required
                       :rules="rules.required"
+                      label="Facility Name"
+                    />
+                  </v-col>
+                </v-row>
+                <v-row>
+                  <v-col cols="12" md="6">
+                    <v-text-field
+                      v-model="model.licenseNumber"
+                      :disabled="isLocked"
+                      variant="outlined"
+                      required
+                      :rules="rules.required"
+                      label="Facility Licence Number"
+                    />
+                  </v-col>
+                  <v-col cols="12" md="6">
+                    <AppDateInput
+                      id="licence-effective-date"
+                      v-model="model.licenseEffectiveDate"
+                      :rules="[...rules.required, rules.MMDDYYYY]"
+                      :disabled="isLocked"
+                      :hide-details="isLocked"
                       label="Effective Date of Current Licence"
-                      v-bind="props"
                     />
-                  </template>
-                  <v-date-picker v-model="model.licenseEffectiveDate" @input="model.calendarMenu = false" />
-                </v-menu>
-
-                <v-text-field
-                  v-if="isLocked"
-                  v-model="model.licenseEffectiveDate"
-                  disabled
-                  variant="outlined"
-                  label="Effective Date of Current Licence"
-                />
-              </v-col>
-            </v-row>
-            <v-row>
-              <v-col>
-                <v-radio-group
-                  v-model="model.hasReceivedFunding"
-                  :disabled="isLocked"
-                  inline
-                  :rules="rules.required"
-                  label="Has this facility or you as the applicant ever received funding under the Child Care Operating Funding Program?"
-                >
-                  <v-radio label="No" value="no" />
-                  <v-radio label="Yes" value="yes" />
-                </v-radio-group>
-              </v-col>
-            </v-row>
+                  </v-col>
+                </v-row>
+                <v-row>
+                  <v-col>
+                    <v-radio-group
+                      v-model="model.hasReceivedFunding"
+                      :disabled="isLocked"
+                      inline
+                      :rules="rules.required"
+                      label="Has this facility or you as the applicant ever received funding under the Child Care Operating Funding Program?"
+                    >
+                      <v-radio label="No" value="no" />
+                      <v-radio label="Yes" value="yes" />
+                    </v-radio-group>
+                  </v-col>
+                </v-row>
 
-            <v-row v-show="model.hasReceivedFunding === 'yes'">
-              <v-col>
-                <v-text-field
-                  v-model="model.fundingFacility"
-                  :disabled="isLocked"
-                  variant="outlined"
-                  required
-                  :rules="model.hasReceivedFunding === 'yes' ? rules.required : []"
-                  label="Facility Name"
-                />
-              </v-col>
-            </v-row>
-          </v-container>
-        </v-card>
-      </v-row>
+                <v-row v-show="model.hasReceivedFunding === 'yes'">
+                  <v-col>
+                    <v-text-field
+                      v-model="model.fundingFacility"
+                      :disabled="isLocked"
+                      variant="outlined"
+                      required
+                      :rules="model.hasReceivedFunding === 'yes' ? rules.required : []"
+                      label="Facility Name"
+                    />
+                  </v-col>
+                </v-row>
+              </v-container>
+            </v-card>
+          </v-row>
+        </v-container>
+      </v-skeleton-loader>
 
       <NavButton
         :is-next-displayed="true"
@@ -110,11 +92,13 @@
 </template>
 
 <script>
-import facilityMixin from '../../../mixins/facilityMixin.js';
-import { ORGANIZATION_PROVIDER_TYPES } from '../../../utils/constants.js';
+import AppDateInput from '@/components/guiComponents/AppDateInput.vue';
+import facilityMixin from '@/mixins/facilityMixin.js';
+import { ORGANIZATION_PROVIDER_TYPES } from '@/utils/constants.js';
 
 export default {
   name: 'EligibilityComponent',
+  components: { AppDateInput },
   mixins: [facilityMixin],
   data() {
     return {