CCFRI-3810 - Landing page html (#551)

* Initial updates and console cleanup. * Further style fixes and remove some common console logs. * ccfri-3810 - adjust SmallCard layouts in LandingPage and ReportChanges and fix the button color in those pages --------- Co-authored-by: weskubo-cgi <[email protected]> Co-authored-by: Le <[email protected]>
bcgov · Oct 28, 2024 · 9086b97 · 9086b97
1 parent d66ce7b
commit 9086b97
Show file tree

Hide file tree

Showing 8 changed files with 298 additions and 332 deletions.
diff --git a/frontend/src/components/LandingPage.vue b/frontend/src/components/LandingPage.vue
diff --git a/frontend/src/components/guiComponents/LargeCard.vue b/frontend/src/components/guiComponents/LargeCard.vue
@@ -31,7 +31,7 @@
 export default {
   props: {
     title: { type: String, required: true },
-    subtitle: { type: String, required: true },
+    subtitle: { type: String, default: '' },
     pText: { type: String, required: true },
   },
 };

diff --git a/frontend/src/components/guiComponents/SmallCard.vue b/frontend/src/components/guiComponents/SmallCard.vue
@@ -1,25 +1,22 @@
 <template>
-  <v-col class="col-12 flex d-flex flex-column">
-    <v-card
-      class="pa-0 elevation-4 rounded-lg flex d-flex flex-column"
-      :class="isDisabled"
-      :disabled="disable"
-      width="100%"
-    >
-      <v-card-text class="text--primary">
-        <slot name="content" />
-      </v-card-text>
-      <v-card-actions class="mt-auto pb-4 pl-4">
-        <slot name="button" />
-      </v-card-actions>
-    </v-card>
-  </v-col>
+  <v-card
+    class="pa-0 elevation-4 rounded-lg d-flex flex-column"
+    :class="isDisabled"
+    :disabled="disable"
+    width="100%"
+    height="100%"
+  >
+    <v-card-text class="text--primary">
+      <slot name="content" />
+    </v-card-text>
+    <v-card-actions class="mt-auto pb-4 pl-4">
+      <slot name="button" />
+    </v-card-actions>
+  </v-card>
 </template>
 <script>
 export default {
   props: {
-    title: { type: String, required: true },
-    subtitle: { type: String, required: true },
     disable: {
       default: false,
       type: Boolean,

diff --git a/frontend/src/components/requestChanges/ReportChanges.vue b/frontend/src/components/requestChanges/ReportChanges.vue
@@ -11,75 +11,78 @@
     <v-form ref="isValidForm" v-model="isValidForm" model-value="false">
       <v-container>
         <p class="text-h6 text-center">What changes do you want to make?</p>
-        <v-row class="d-flex justify-start">
-          <SmallCard v-if="organizationProviderType == 'GROUP'" class="col-lg-6" :disable="false">
-            <template #content>
-              <div class="px-10">
-                <p class="text-h6 text-center">Add a New facility to an existing organization</p>
-                <p class="px-2 text-center">
-                  This will lead you through the CCOF application process. Please have your facility, CCFRI and ECE-WE
-                  information ready.
-                </p>
-                <p class="px-2 text-center">
-                  You need to attach an <strong>updated</strong><i> Community Care And Assisted Living Act</i> licence.
-                </p>
-              </div>
-            </template>
-            <template #button>
-              <v-row justify="space-around" class="ma-0 pa-0">
-                <v-btn dark class="blueButton mb-10" :loading="processing" @click="routeToFacilityAdd()">
-                  Add new facility
-                </v-btn>
-              </v-row>
-            </template>
-          </SmallCard>
-
-          <SmallCard class="col-lg-6" :disable="false">
-            <template #content>
-              <div class="px-10">
-                <p class="text-h6 text-center">Report changes to your Licence or service</p>
-                <p class="px-2 text-center">
-                  Please have your <i>Community Care And Assisted Living Act</i> licence (if required) and other
-                  supporting documents ready.
-                </p>
-              </div>
-            </template>
-            <template #button>
-              <div class="ma-0 pa-0">
+        <v-row>
+          <v-col cols="12" md="6" xl="4">
+            <SmallCard v-if="organizationProviderType == 'GROUP'">
+              <template #content>
+                <div class="px-10">
+                  <p class="text-h6 text-center">Add a New facility to an existing organization</p>
+                  <p class="px-2 text-center">
+                    This will lead you through the CCOF application process. Please have your facility, CCFRI and ECE-WE
+                    information ready.
+                  </p>
+                  <p class="px-2 text-center">
+                    You need to attach an <strong>updated</strong
+                    ><i> Community Care And Assisted Living Act</i> licence.
+                  </p>
+                </div>
+              </template>
+              <template #button>
+                <v-row no-gutters justify="space-around">
+                  <v-btn dark class="blueButton mb-10" :loading="processing" @click="routeToFacilityAdd()">
+                    Add new facility
+                  </v-btn>
+                </v-row>
+              </template>
+            </SmallCard>
+          </v-col>
+          <v-col cols="12" md="6" xl="4">
+            <SmallCard>
+              <template #content>
+                <div class="px-10">
+                  <p class="text-h6 text-center">Report changes to your Licence or service</p>
+                  <p class="px-2 text-center">
+                    Please have your <i>Community Care And Assisted Living Act</i> licence (if required) and other
+                    supporting documents ready.
+                  </p>
+                </div>
+              </template>
+              <template #button>
                 <v-row justify="space-around">
                   <v-btn dark class="blueButton mb-10" :loading="processing" @click="goToChangeDialogue()">
                     Upload a Change Notification Form
                   </v-btn>
                 </v-row>
-              </div>
-            </template>
-          </SmallCard>
-
-          <SmallCard class="col-lg-6" :disable="!isMtfiEnabled()">
-            <template #content>
-              <div class="px-10">
-                <p class="text-h6 text-center">Mid-Term Fee Increase</p>
-                <p class="px-2 text-center">
-                  Request a parent fee increase for a facility after you have received approval for the CCFRI.
-                </p>
-                <p class="px-2 text-center">You may need to provide details about your expenses.</p>
-              </div>
-            </template>
-            <template #button>
-              <v-row justify="space-around" class="ma-0 pa-0">
-                <v-btn
-                  dark
-                  class="mb-10"
-                  :color="buttonColor(!isMtfiEnabled())"
-                  :disable="!isMtfiEnabled()"
-                  :loading="processing"
-                  @click="goToMTFI()"
-                >
-                  Update parent fees
-                </v-btn>
-              </v-row>
-            </template>
-          </SmallCard>
+              </template>
+            </SmallCard>
+          </v-col>
+          <v-col cols="12" md="6" xl="4">
+            <SmallCard :disable="!isMtfiEnabled()">
+              <template #content>
+                <div class="px-10">
+                  <p class="text-h6 text-center">Mid-Term Fee Increase</p>
+                  <p class="px-2 text-center">
+                    Request a parent fee increase for a facility after you have received approval for the CCFRI.
+                  </p>
+                  <p class="px-2 text-center">You may need to provide details about your expenses.</p>
+                </div>
+              </template>
+              <template #button>
+                <v-row no-gutters justify="space-around">
+                  <v-btn
+                    dark
+                    class="mb-10"
+                    :class="buttonColor(!isMtfiEnabled())"
+                    :disable="!isMtfiEnabled()"
+                    :loading="processing"
+                    @click="goToMTFI()"
+                  >
+                    Update parent fees
+                  </v-btn>
+                </v-row>
+              </template>
+            </SmallCard>
+          </v-col>
         </v-row>
 
         <v-row id="change-request-history" no-gutters>
@@ -712,7 +715,7 @@ export default {
       return !foundCRNotInEndStateStatus && foundFacilityWithApprovedCCFRI;
     },
     buttonColor(isDisabled) {
-      return isDisabled ? '#909090' : '#003366';
+      return isDisabled ? 'disabledButton' : 'blueButton';
     },
   },
 };

diff --git a/frontend/src/store/application.js b/frontend/src/store/application.js
@@ -109,13 +109,11 @@ export const useApplicationStore = defineStore('application', {
       }
     },
     async loadApplicationFromStore(programYearId) {
-      console.log('loadApplicationFromStore called with programYearId: ', programYearId);
       const application = this.applicationMap.get(programYearId);
       const navBarStore = useNavBarStore();
       const applicationStore = useApplicationStore();
 
       if (application) {
-        console.log('loadApplicationFromStore found for guid : ', application);
         this.setApplicationId(application.applicationId);
         this.setApplicationStatus(application.applicationStatus);
         this.setApplicationType(application.applicationType);
@@ -138,7 +136,6 @@ export const useApplicationStore = defineStore('application', {
     },
     async deletePcfApplication({ state }) {
       //this should only be used on NEW PCF applications - usually in the case where the user incorrectly selects "GROUP or FAMILY"
-      console.log(state?.applicationId);
       await ApiService.apiAxios.delete(ApiRoutes.APPLICATION + '/' + state?.applicationId);
     },
   },
@@ -159,7 +156,6 @@ export const useApplicationStore = defineStore('application', {
     },
     latestProgramYearId: (state) => {
       const appStore = useAppStore();
-      console.log(appStore.programYearList.list);
       let currentGuid;
       let futureGuid;
       let lastGuid;

diff --git a/frontend/src/store/auth.js b/frontend/src/store/auth.js
@@ -87,8 +87,6 @@ export const useAuthStore = defineStore('auth', {
           userInfoRes = await ApiService.getUserImpersonateInfo(this.impersonateId);
         } else {
           userInfoRes = await ApiService.getUserInfo();
-          console.log('dataaaaa');
-          console.log(userInfoRes.data);
         }
         this.setUserInfo(userInfoRes.data);
 
@@ -105,8 +103,6 @@ export const useAuthStore = defineStore('auth', {
             latestApplication?.ccofApplicationStatus,
           ]);
         }
-        console.log('getUserInfo --------------------------- ');
-        console.log(userInfoRes.data);
         organizationStore.setOrganizationId(userInfoRes.data.organizationId);
         organizationStore.setOrganizationName(userInfoRes.data?.organizationName);
         organizationStore.setOrganizationAccountNumber(userInfoRes.data?.organizationAccountNumber);
@@ -130,7 +126,6 @@ export const useAuthStore = defineStore('auth', {
     },
     async getInitialToken() {
       const response = await AuthService.getAuthToken();
-      console.log('TOKEN Received: ', response);
       if (response.jwtFrontend) {
         this.setJwtToken(response.jwtFrontend);
         ApiService.setAuthHeader(response.jwtFrontend);

diff --git a/frontend/src/store/message.js b/frontend/src/store/message.js
@@ -42,7 +42,6 @@ export const useMessageStore = defineStore('message', {
       }
     },
     async getAllMessages(organizationId) {
-      console.log('WHEE messages');
       if (!localStorage.getItem('jwtToken')) {
         console.log('unable to get Messages data because you are not logged in');
         throw 'unable to get Messages data because you are not logged in';

diff --git a/frontend/src/store/navBar.js b/frontend/src/store/navBar.js
@@ -183,7 +183,6 @@ export const useNavBarStore = defineStore('navBar', {
       this.navBarList = [];
     },
     forceNavBarRefresh() {
-      console.log('nav refersh?');
       this.refreshNavBar = this.refreshNavBar + 1;
     },
     setUserProfileList(value) {
@@ -330,7 +329,6 @@ export const useNavBarStore = defineStore('navBar', {
       await this.loadChangeRequest(changeRequestId);
     },
     async setUrlDetails(to) {
-      console.log('to url is: ', to);
       this.setCurrentUrl(to.fullPath);
       const applicationStore = useApplicationStore();