Merge pull request #1021 from bcgov/fix/EDX-1532

Fix/edx 1532
bcgov · Sep 8, 2023 · eb3953c · eb3953c
2 parents 2614fad + 27d03a8
commit eb3953c
Show file tree

Hide file tree

Showing 13 changed files with 281 additions and 288 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -37,13 +37,13 @@
     "testcafe": "^2.2.0",
     "v-viewer": "^3.0.11",
     "vite": "^4.1.4",
-    "vue": "^3.2.47",
+    "vue": "^3.3.4",
     "vue-chartjs": "^5.2.0",
     "vue-clipboard2": "^0.3.3",
     "vue-meta": "^3.0.0-alpha.10",
     "vue-quick-chat": "^1.2.8",
     "vue-router": "^4.1.6",
-    "vuetify": "3.2.3"
+    "vuetify": "3.3.15"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -185,4 +185,12 @@ h1 {
   background-color: rgba(0,0,0,.12)!important;
 }
 
+.max-width-bottom-sheet {
+  left:auto;
+  right:auto;
+  margin-bottom: 0 !important;
+  align-self: flex-end;
+  transition-duration: 0.2s;
+}
+
 </style>
diff --git a/frontend/src/components/InstituteSelection.vue b/frontend/src/components/InstituteSelection.vue
@@ -29,17 +29,17 @@
               class="pl-2 hoverTable"
               :style="(index) === 0 ? 'border-top-style: groove;border-top-color: rgb(255 255 255 / 45%);' : ''"
               style="border-right-style: groove;border-right-color: rgb(255 255 255 / 45%);border-left-style: groove;border-left-color: rgb(255 255 255 / 45%);border-bottom-style: groove;border-bottom-color: rgb(255 255 255 / 45%);"
-              @click="selectSchool(item.value.schoolID)"
+              @click="selectSchool(item.raw.schoolID)"
             >
               <v-col class="pa-1">
                 <h3
                   class="mt-1 mb-1"
                   style="color: black;"
                 >
-                  {{ item.value.displayName }}
+                  {{ item.raw.displayName }}
                 </h3>
                 <h3 style="color: grey;">
-                  {{ item.value.mincode }}
+                  {{ item.raw.mincode }}
                 </h3>
               </v-col>
             </v-row>
@@ -64,17 +64,17 @@
               class="pl-2 hoverTable"
               :style="(index) === 0 ? 'border-top-style: groove;border-top-color: rgb(255 255 255 / 45%);' : ''"
               style="border-right-style: groove;border-right-color: rgb(255 255 255 / 45%);border-left-style: groove;border-left-color: rgb(255 255 255 / 45%);border-bottom-style: groove;border-bottom-color: rgb(255 255 255 / 45%);"
-              @click="selectDistrict(item.value.districtID)"
+              @click="selectDistrict(item.raw.districtID)"
             >
               <v-col class="pa-1">
                 <h3
                   class="mt-1 mb-1"
                   style="color: black;"
                 >
-                  {{ item.value.displayName }}
+                  {{ item.raw.displayName }}
                 </h3>
                 <h3 style="color: grey;">
-                  {{ item.value.districtNumber }}
+                  {{ item.raw.districtNumber }}
                 </h3>
               </v-col>
             </v-row>

diff --git a/frontend/src/components/SecureExchange/AccessDistrictUsersPage.vue b/frontend/src/components/SecureExchange/AccessDistrictUsersPage.vue
@@ -191,13 +191,11 @@
       </v-col>
     </v-row>
 
-    <v-navigation-drawer
+    <v-bottom-sheet
       v-model="newUserInviteSheet"
-      inset
-      location="bottom"
-      style="width: 50%; height: max-content; left: 25%;"
-      no-click-animation
-      scrollable
+      transition="no-click-animation"
+      content-class="max-width-bottom-sheet"
+      max-width="30%"
       persistent
     >
       <v-card
@@ -226,7 +224,7 @@
           />
         </v-card-text>
       </v-card>
-    </v-navigation-drawer>
+    </v-bottom-sheet>
   </v-container>
 </template>
 

diff --git a/frontend/src/components/SecureExchange/AccessSchoolUsersPage.vue b/frontend/src/components/SecureExchange/AccessSchoolUsersPage.vue
@@ -240,13 +240,11 @@
           </v-col>
         </v-row>
 
-        <v-navigation-drawer
+        <v-bottom-sheet
           v-model="newUserInviteSheet"
-          inset
-          no-click-animation
-          style="width: 50%; height: max-content; left: 25%;"
-          location="bottom"
-          scrollable
+          transition="no-click-animation"
+          content-class="max-width-bottom-sheet"
+          max-width="30%"
           persistent
         >
           <v-card
@@ -275,7 +273,7 @@
               />
             </v-card-text>
           </v-card>
-        </v-navigation-drawer>
+        </v-bottom-sheet>
       </div>
       <div v-else>
         <v-row>

diff --git a/frontend/src/components/SecureExchange/ExchangeInbox.vue b/frontend/src/components/SecureExchange/ExchangeInbox.vue
@@ -313,7 +313,7 @@
                   no-gutters
                   :style="(index) === 0 ? 'border-top-style: groove;border-top-color: rgb(255 255 255 / 45%);' : ''"
                   style="border-right-style: groove;border-right-color: rgb(255 255 255 / 45%);border-left-style: groove;border-left-color: rgb(255 255 255 / 45%);border-bottom-style: groove;border-bottom-color: rgb(255 255 255 / 45%); border-width:2px"
-                  @click="openExchange(item.value.secureExchangeID)"
+                  @click="openExchange(item.raw.secureExchangeID)"
                 >
                   <v-col
                     cols="8"
@@ -331,8 +331,8 @@
                       >
                         <span
                           class="subjectHeading"
-                          :style="{color: item.value.isReadByExchangeContact ? 'black': '#1f7cef'}"
-                        >{{ getSubject(item.value.subject) }}</span><span style="color: gray"> - {{ getLatestComment(item.value) }}</span>
+                          :style="{color: item.raw.isReadByExchangeContact ? 'black': '#1f7cef'}"
+                        >{{ getSubject(item.raw.subject) }}</span><span style="color: gray"> - {{ getLatestComment(item.raw) }}</span>
                         <v-icon
                           v-if="item?.raw?.documentList?.length > 0"
                           size="x-small"
@@ -351,8 +351,8 @@
                           class="ministryLine"
                           style="color: black"
                         >{{
-                          getMinistryTeamName(item.value.ministryOwnershipTeamID)
-                        }} - {{ item.value.createDate }}</span>
+                          getMinistryTeamName(item.raw.ministryOwnershipTeamID)
+                        }} - {{ item.raw.createDate }}</span>
                       </v-col>
                     </v-row>
                   </v-col>
@@ -367,13 +367,13 @@
                       <v-col class="pb-1 pt-2">
                         <v-icon
                           class="pb-1"
-                          :color="getStatusColor(item.value.secureExchangeStatusCode)"
+                          :color="getStatusColor(item.raw.secureExchangeStatusCode)"
                           right
                           dark
                         >
                           mdi-circle-medium
                         </v-icon>
-                        <span class="statusCodeLabel">{{ item.value.secureExchangeStatusCode }}</span>
+                        <span class="statusCodeLabel">{{ item.raw.secureExchangeStatusCode }}</span>
                       </v-col>
                     </v-row>
                     <v-row no-gutters>
@@ -386,7 +386,7 @@
                         >
                           mdi-pound
                         </v-icon>
-                        <span class="statusCodeLabel">{{ item.value.sequenceNumber }}</span>
+                        <span class="statusCodeLabel">{{ item.raw.sequenceNumber }}</span>
                       </v-col>
                     </v-row>
                   </v-col>
@@ -397,13 +397,11 @@
         </v-row>
       </v-col>
     </v-row>
-    <v-navigation-drawer
+    <v-bottom-sheet
       v-model="newMessageSheet"
-      inset
-      no-click-animation
-      scrollable
-      style="width: 50%; height: max-content; left: 25%;z-index: 1999;"
-      location="bottom"
+      transition="no-click-animation"
+      content-class="max-width-bottom-sheet"
+      max-width="30%"
       persistent
     >
       <v-card
@@ -421,7 +419,7 @@
           />
         </v-card-text>
       </v-card>
-    </v-navigation-drawer>
+    </v-bottom-sheet>
   </v-container>
 </template>
 

diff --git a/frontend/src/components/common/CustomTable.vue b/frontend/src/components/common/CustomTable.vue
@@ -23,7 +23,7 @@
             v-for="column in headers"
             id="header"
             :key="column.key"
-          >       
+          >
             <div v-if="column.title === 'select'">
               <span @click="toggle()">
                 <v-checkbox 
@@ -55,40 +55,40 @@
           >
             <v-checkbox
               v-if="column.title === 'select'"
-              :model-value="isSelected(props.item.value) !== undefined"
+              :model-value="isSelected(props.item.raw) !== undefined"
               @click="onClick(props)"
             /> 
             <div v-else>
               <div v-if="column.key === 'legalName'">
-                <span v-if="props.item.value['legalLastName']">{{ props.item.value['legalLastName'] }}</span>,
-                <span v-if="props.item.value['legalFirstName']">{{ props.item.value['legalFirstName'] }}</span>
-                <span v-if="props.item.value['legalMiddleNames']">({{ props.item.value['legalMiddleNames'] }})</span>
+                <span v-if="props.item.raw['legalLastName']">{{ props.item.raw['legalLastName'] }}</span>,
+                <span v-if="props.item.raw['legalFirstName']">{{ props.item.raw['legalFirstName'] }}</span>
+                <span v-if="props.item.raw['legalMiddleNames']">({{ props.item.raw['legalMiddleNames'] }})</span>
               </div>
 
               <div v-else-if="column.key === 'isAdult'">
-                <span v-if="props.item.value['isAdult'] !== null || props.item.value['isAdult' !== undefined]">{{ props.item.value['isAdult'] ==="true" ? 'Yes' :'No' }}</span>
+                <span v-if="props.item.raw['isAdult'] !== null || props.item.raw['isAdult' !== undefined]">{{ props.item.raw['isAdult'] ==="true" ? 'Yes' :'No' }}</span>
               </div>
 
               <div v-else-if="column.key === 'fte'">
-                <span>{{ props.item.value['fte'] === 0 ? 0 : props.item.value['fte'] }}</span>
+                <span>{{ props.item.raw['fte'] === 0 ? 0 : props.item.raw['fte'] }}</span>
               </div>
 
-              <span v-else-if="props.item.value[column.key]">{{ props.item.value[column.key] }}</span>
+              <span v-else-if="props.item.raw[column.key]">{{ props.item.raw[column.key] }}</span>
               <span v-else>-</span>
 
               <div v-if="column.hasOwnProperty('subHeader')">
                 <div v-if="column.subHeader.key === 'usualName'">
-                  <div v-if="props.item.value['usualLastName'] || props.item.value['usualFirstName'] || props.item.value['usualMiddleNames']">
-                    <span v-if="props.item.value['usualLastName']">{{ props.item.value['usualLastName'] }}</span>,
-                    <span v-if="props.item.value['usualFirstName']">{{ props.item.value['usualFirstName'] }}</span>
-                    <span v-if="props.item.value['usualMiddleNames']">({{ props.item.value['usualMiddleNames'] }})</span>
+                  <div v-if="props.item.raw['usualLastName'] || props.item.raw['usualFirstName'] || props.item.raw['usualMiddleNames']">
+                    <span v-if="props.item.raw['usualLastName']">{{ props.item.raw['usualLastName'] }}</span>,
+                    <span v-if="props.item.raw['usualFirstName']">{{ props.item.raw['usualFirstName'] }}</span>
+                    <span v-if="props.item.raw['usualMiddleNames']">({{ props.item.raw['usualMiddleNames'] }})</span>
                   </div>
                   <span v-else>-</span>
                 </div>
                 <div v-else-if="column.subHeader.key === 'isGraduated'">
-                  <span v-if="props.item.value['isGraduated'] !== null || props.item.value['isGraduated'] !== undefined">{{ props.item.value['isGraduated'] === "true" ? 'Yes' :'No' }}</span>
+                  <span v-if="props.item.raw['isGraduated'] !== null || props.item.raw['isGraduated'] !== undefined">{{ props.item.raw['isGraduated'] === "true" ? 'Yes' :'No' }}</span>
                 </div>
-                <span v-else-if="props.item.value[column.subHeader.key]">{{ props.item.value[column.subHeader.key] }}</span>
+                <span v-else-if="props.item.raw[column.subHeader.key]">{{ props.item.raw[column.subHeader.key] }}</span>
                 <span v-else>-</span>
               </div>
             </div>
@@ -159,11 +159,11 @@ export default {
   },
   methods: {
     onClick(prop) {
-      let selectedValue = prop.item.value;
+      let selectedValue = prop.item.raw;
       if(this.isSelected(selectedValue)) {
         this.selected.splice(this.selected.findIndex(value => value.sdcSchoolCollectionStudentID === selectedValue.sdcSchoolCollectionStudentID), 1);
       } else {
-        this.selected.push(prop.item.value);
+        this.selected.push(prop.item.raw);
       }
       this.masterCheckbox = this.selected.length > 0 && this.isAllSelected();
     },

diff --git a/frontend/src/components/common/forms/SchoolContactsForm.vue b/frontend/src/components/common/forms/SchoolContactsForm.vue
@@ -75,7 +75,7 @@
         v-for="schoolContactType in schoolContactTypes"
         :key="schoolContactType.code"
       >
-        <v-row>
+        <v-row class="bottom-sheets">
           <v-col>
             <h2 style="color:#1A5A96">
               {{ schoolContactType.label }}
@@ -130,13 +130,11 @@
       </div>
     </template>
     <!--    new contact sheet -->
-    <v-navigation-drawer
+    <v-bottom-sheet
       v-model="newContactSheet"
-      inset
-      location="bottom"
-      style="width: 50%; height: max-content; left: 25%;"
-      no-click-animation
-      scrollable
+      transition="no-click-animation"
+      content-class="max-width-bottom-sheet"
+      max-width="30%"
       persistent
     >
       <NewSchoolContactPage
@@ -146,13 +144,12 @@
         @new-school-contact:close-new-school-contact-page="newContactSheet = !newContactSheet"
         @new-school-contact:add-new-school-contact="newSchoolContactAdded"
       />
-    </v-navigation-drawer>
-    <v-navigation-drawer
+    </v-bottom-sheet>
+    <v-bottom-sheet
       v-model="editContactSheet"
-      inset
-      location="bottom"
-      no-click-animation
-      style="width: 50%; height: max-content; left: 25%;"
+      transition="no-click-animation"
+      content-class="max-width-bottom-sheet"
+      max-width="30%"
       persistent
     >
       <EditSchoolContactPage
@@ -163,7 +160,7 @@
         :close-handler="() => editContactSheet = false"
         :on-success-handler="() => contactEditSuccess()"
       />
-    </v-navigation-drawer>
+    </v-bottom-sheet>
     <ConfirmationDialog ref="confirmationDialog" />
   </div>
 </template>

diff --git a/frontend/src/components/district/DistrictContacts.vue b/frontend/src/components/district/DistrictContacts.vue
@@ -183,13 +183,11 @@
         </div>
       </div>
     </template>
-    <v-navigation-drawer
+    <v-bottom-sheet
       v-model="newContactSheet"
-      inset
-      no-click-animation
-      location="bottom"
-      style="width: 50%; height: max-content; left: 25%;"
-      scrollable
+      transition="no-click-animation"
+      content-class="max-width-bottom-sheet"
+      max-width="30%"
       persistent
     >
       <NewDistrictContactPage
@@ -199,14 +197,12 @@
         @new-district-contact:close-new-district-contact-page="newContactSheet = !newContactSheet"
         @new-district-contact:add-new-district-contact="newDistrictContactAdded"
       />
-    </v-navigation-drawer>
-    <v-navigation-drawer
+    </v-bottom-sheet>
+    <v-bottom-sheet
       v-model="editContactSheet"
-      inset
-      no-click-animation
-      location="bottom"
-      style="width: 50%; height: max-content; left: 25%;"
-      scrollable
+      transition="no-click-animation"
+      content-class="max-width-bottom-sheet"
+      max-width="30%"
       persistent
     >
       <EditDistrictContactPage
@@ -217,7 +213,7 @@
         :close-handler="() => editContactSheet = false"
         :on-success-handler="contactEditSuccess"
       />
-    </v-navigation-drawer>
+    </v-bottom-sheet>
     <ConfirmationDialog ref="confirmationDialog" />
   </v-container>
 </template>