MHR Test Fixes, Misc UI fixes (bcgov#1636)

* Test Updates, Misc UI fixes * ts config clean up
cameron-eyds · Dec 4, 2023 · 49e26f1 · 49e26f1
1 parent 1af24a5
commit 49e26f1
Show file tree

Hide file tree

Showing 42 changed files with 288 additions and 325 deletions.
diff --git a/ppr-ui/src/assets/styles/base.scss b/ppr-ui/src/assets/styles/base.scss
@@ -211,7 +211,6 @@ a {
 // Tables
 .group-header, .group-header:hover {
   font-weight: bold;
-  background: $gray3;
 }
 
 // Actions Table Header and Action Cell Override Styling

diff --git a/ppr-ui/src/components/collateral/generalCollateral/GenColAmend.vue b/ppr-ui/src/components/collateral/generalCollateral/GenColAmend.vue
@@ -38,7 +38,6 @@
       <v-row noGutters>
         <v-col class="pr-4">
           <WysiwygEditor
-            v-if="isTiptapEnabled"
             class="mt-4"
             placeHolderText="Enter the General Collateral to be deleted from this registration"
             :editorContent="delDesc"
@@ -57,7 +56,6 @@
       <v-row noGutters>
         <v-col class="pr-4">
           <WysiwygEditor
-            v-if="isTiptapEnabled"
             placeHolderText="Enter the General Collateral to be added to this registration"
             :editorContent="addDesc"
             @emitEditorContent="addDesc = $event"
@@ -126,7 +124,7 @@ export default defineComponent({
   ],
   setup (props, { emit }) {
     const { setGeneralCollateral } = useStore()
-    const { getGeneralCollateral, isTiptapEnabled } = storeToRefs(useStore())
+    const { getGeneralCollateral } = storeToRefs(useStore())
 
     const localState = reactive({
       delDesc: '',
@@ -198,7 +196,6 @@ export default defineComponent({
     }, { deep: true, immediate: true })
 
     return {
-      isTiptapEnabled,
       onSubmitForm,
       resetFormAndData,
       ...toRefs(localState)

diff --git a/ppr-ui/src/components/collateral/generalCollateral/GenColEdit.vue b/ppr-ui/src/components/collateral/generalCollateral/GenColEdit.vue
@@ -19,7 +19,6 @@
         cols="9"
       >
         <WysiwygEditor
-          v-if="isTiptapEnabled"
           placeHolderText="Description of General Collateral"
           :editorContent="newDesc"
           @emitEditorContent="newDesc = $event"
@@ -72,7 +71,6 @@ export default defineComponent({
       getRegistrationType,
       getGeneralCollateral,
       getRegistrationFlowType,
-      isTiptapEnabled
     } = storeToRefs(useStore())
 
     const generalCollateralDefaultValue = (): string => {
@@ -135,7 +133,6 @@ export default defineComponent({
     )
 
     return {
-      isTiptapEnabled,
       ...toRefs(localState)
     }
   }

diff --git a/ppr-ui/src/components/common/CertifyInformation.vue b/ppr-ui/src/components/common/CertifyInformation.vue
@@ -107,7 +107,7 @@
                     id="checkbox-certified"
                     v-model="certified"
                     class="py-0 pr-0 pl-2 ma-0"
-                    :hideDetails="true"
+                    hideDetails
                   >
                     <template #label>
                       <div class="pt-3">

diff --git a/ppr-ui/src/components/common/RegistrationsWrapper.vue b/ppr-ui/src/components/common/RegistrationsWrapper.vue
@@ -119,7 +119,7 @@
             class="py-1"
           >
             <b>{{ registrationLabel }} Registrations </b>
-            <span>({{ myRegistrations.length }})</span>
+            <span>({{ getRegTableTotalRowCount }})</span>
           </v-col>
           <v-col>
             <v-row
@@ -128,19 +128,18 @@
             >
               <v-col
                 class="pl-4 py-1"
-                cols="auto"
+                cols="3"
               >
                 <v-select
                   id="column-selection"
                   v-model="myRegHeadersSelected"
-                  autocomplete="off"
-                  hideDetails="true"
                   :items="myRegHeadersSelectable"
+                  hideDetails
                   itemTitle="text"
                   multiple
-                  placeholder="Columns to Show"
                   returnObject
                   density="compact"
+                  placeholder="Columns to Show"
                 >
                   <template #selection="{ index }">
                     <p
@@ -150,6 +149,20 @@
                       Columns to Show
                     </p>
                   </template>
+                  <template #item="{ props, item }">
+                    <v-list-item
+                      v-bind="props"
+                      class="py-0 my-0 fs-12 column-selection-item"
+                    >
+                      <template #prepend>
+                        <v-checkbox
+                          class="py-0 mr-n1"
+                          hideDetails
+                          :model-value="isActiveHeader(item.value)"
+                        />
+                      </template>
+                    </v-list-item>
+                  </template>
                 </v-select>
               </v-col>
             </v-row>
@@ -262,7 +275,6 @@ import { StatusCodes } from 'http-status-codes'
 import { cloneDeep } from 'lodash'
 import { useExemptions, useNewMhrRegistration } from '@/composables'
 
-
 export default defineComponent({
   name: 'RegistrationsWrapper',
   components: {
@@ -1093,6 +1105,11 @@ export default defineComponent({
       setUserSettings(settings)
     }
 
+    /** Returns True when the header is selected */
+    const isActiveHeader = (headerType: string): boolean => {
+      return localState.myRegHeadersSelected.some(header => header.value === headerType)
+    }
+
     const emitError = (error): void => {
       context.emit('error', error)
     }
@@ -1106,6 +1123,7 @@ export default defineComponent({
     })
 
     return {
+      isActiveHeader,
       myRegGetNext,
       addRegistration,
       emitError,
@@ -1139,10 +1157,6 @@ export default defineComponent({
     .v-field-label {
       font-size: .875rem;
     }
-
-    .v-field__overlay {
-      // background-color: white;
-    }
   }
 }
 
@@ -1156,11 +1170,8 @@ export default defineComponent({
   border: 1px solid $gray3
 }
 
-//.reg-bar-col {
-//  max-width: 350px;
-//}
-
-//.reg-add-col {
-//  display: flex;
-//}
+.column-selection-item {
+  height: 15px;
+  padding: 0!important;
+}
 </style>
diff --git a/ppr-ui/src/components/common/Remarks.vue b/ppr-ui/src/components/common/Remarks.vue
@@ -43,7 +43,7 @@
               v-model="hasAdditionalRemarks"
               class="py-0 pr-0 ma-0"
               :label="content.checkboxLabel"
-              :hideDetails="true"
+              hideDetails
               data-test-id="additional-remarks-checkbox"
             >
               <template #label>

diff --git a/ppr-ui/src/components/common/WysiwygEditor.vue b/ppr-ui/src/components/common/WysiwygEditor.vue
@@ -81,7 +81,7 @@
     </div>
 
     <!-- Editor content block -->
-    <editor-content
+    <EditorContent
       class="editor-block ProseMirror"
       :editor="editor"
     />

diff --git a/ppr-ui/src/components/dashboard/DashboardTabs.vue b/ppr-ui/src/components/dashboard/DashboardTabs.vue
@@ -23,7 +23,7 @@
         >
           mdi-account-details
         </v-icon>
-        <b>Personal Property Registrations </b><span class="pl-1">({{ getRegTableBaseRegs.length }})</span>
+        <b>Personal Property Registrations </b><span class="pl-1">({{ getRegTableTotalRowCount }})</span>
       </v-tab>
       <v-tab
         :value="1"
@@ -105,6 +105,7 @@ export default defineComponent({
       // Getters
       getMhRegTableBaseRegs,
       getRegTableBaseRegs,
+      getRegTableTotalRowCount,
       getCurrentRegistrationsTab
     } = storeToRefs(useStore())
 
@@ -138,6 +139,7 @@ export default defineComponent({
       snackBarEvent,
       getRegTableBaseRegs,
       getMhRegTableBaseRegs,
+      getRegTableTotalRowCount,
       getCurrentRegistrationsTab,
       onTabChange,
       ...toRefs(localState)

diff --git a/ppr-ui/src/components/dialogs/BaseDialog.vue b/ppr-ui/src/components/dialogs/BaseDialog.vue
@@ -44,7 +44,7 @@
             id="dismiss-dialog-checkbox"
             v-model="isDismissDialogChecked"
             class="ma-0 pt-4"
-            hide-details
+            hideDetails
           >
             <template #label>
               <p class="ma-0">

diff --git a/ppr-ui/src/components/dialogs/StaffPaymentDialog.vue b/ppr-ui/src/components/dialogs/StaffPaymentDialog.vue
@@ -23,6 +23,7 @@
             v-model="certify"
             class="mt-2"
             label="Make this a Certified Search ($25.00)"
+            hideDetails
           />
         </v-col>
       </v-row>

diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/FractionalOwnership.vue b/ppr-ui/src/components/mhrRegistration/HomeOwners/FractionalOwnership.vue
@@ -27,29 +27,35 @@
         :data-test-id="`interest-type-field-group-${groupId}`"
       />
       <div class="owner-fractions">
-        <v-text-field
-          :id="`fraction-amount-group-${groupId}`"
-          ref="interestNumerator"
-          v-model.number="fractionalDataState.interestNumerator"
-          label="Amount Owned by this Group"
-          variant="filled"
-          class="background-white"
-          :rules="fractionalAmountRules"
-          :data-test-id="`fraction-amount-field-group-${groupId}`"
-          @blur="$refs.interestDenominator.validate()"
-        />
-        <span />
-        <v-text-field
-          :id="`total-fractions-group-${groupId}`"
-          ref="interestDenominator"
-          v-model.number="fractionalDataState.interestDenominator"
-          label="Total Available"
-          variant="filled"
-          class="background-white"
-          :rules="totalAmountRules"
-          :data-test-id="`total-fractions-field-group-${groupId}`"
-          @blur="$refs.interestNumerator.validate()"
-        />
+        <v-row noGutters>
+          <v-col class="pr-1">
+            <v-text-field
+              :id="`fraction-amount-group-${groupId}`"
+              ref="interestNumerator"
+              v-model.number="fractionalDataState.interestNumerator"
+              label="Amount Owned by this Group"
+              variant="filled"
+              class="background-white"
+              :rules="fractionalAmountRules"
+              :data-test-id="`fraction-amount-field-group-${groupId}`"
+              @blur="$refs.interestDenominator.validate()"
+            />
+          </v-col>
+          <span class="division-span" />
+          <v-col class="pl-1">
+            <v-text-field
+              :id="`total-fractions-group-${groupId}`"
+              ref="interestDenominator"
+              v-model.number="fractionalDataState.interestDenominator"
+              label="Total Available"
+              variant="filled"
+              class="background-white"
+              :rules="totalAmountRules"
+              :data-test-id="`total-fractions-field-group-${groupId}`"
+              @blur="$refs.interestNumerator.validate()"
+            />
+          </v-col>
+        </v-row>
       </div>
     </div>
   </div>
@@ -140,28 +146,13 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';
-
-:deep(#mhr-home-ownership) {
-  p {
-    white-space: normal;
-    font-size: 16px;
-    line-height: 24px;
-    color: #495057
-  }
-  .owner-fractions {
-    display: flex;
-    flex-direction: row;
-
-    span {
-      height: 40px;
-      border-right: 1px solid black;
-      width: 30px;
-      transform: rotate(20deg);
-      right: 13px;
-      top: 3px;
-      position: relative;
-    }
-  }
+.division-span {
+  height: 40px;
+  border-right: 1px solid black;
+  width: 30px;
+  transform: rotate(20deg);
+  right: 13px;
+  top: 3px;
+  position: relative;
 }
-
 </style>
diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnerGroups.vue b/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnerGroups.vue
@@ -3,7 +3,7 @@
     <label class="generic-label">
       Multiple Groups of Owners (Tenants in Common)
     </label>
-    <ul class="my-2">
+    <ul class="my-2 pl-6">
       <li>
         Select a group if you have <b>multiple groups of owners</b> (tenants in common).
       </li>
@@ -180,7 +180,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';
-
 :deep(#mhr-home-owner-groups) {
   ul {
     color: $gray7;
@@ -195,4 +194,7 @@ export default defineComponent({
     color: $primary-blue;
   }
 }
+.owner-groups-select {
+  width: 200px!important;
+}
 </style>
diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue b/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue
@@ -1100,7 +1100,7 @@ export default defineComponent({
     thead.simple {
 
       th {
-        padding: 0 16px;
+        padding: 16px;
       }
     }
 

diff --git a/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeOwnersReview.vue b/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeOwnersReview.vue
@@ -16,7 +16,7 @@
     <div :class="{ 'border-error-left': showStepError }">
       <section
         v-show="showStepError"
-        :class="hasHomeOwners ? 'pt-30px px-8' : 'pa-8'"
+        class="pa-6"
       >
         <span>
           <v-icon color="error">mdi-information-outline</v-icon>

diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/HomeCertification.vue b/ppr-ui/src/components/mhrRegistration/YourHome/HomeCertification.vue
@@ -150,6 +150,7 @@
             v-model="hasNoCertification"
             label="There is no certification available for this home."
             class="mt-8 pt-0 mb-n4 float-left"
+            hideDetails
           />
           <v-tooltip
             location="top"

diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturedYearInput.vue b/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturedYearInput.vue
@@ -30,6 +30,7 @@
         v-model="circa"
         label="This Year of Manufacture is approximate"
         class="float-left"
+        hideDetails
         data-test-id="circa-year-checkbox"
       />
       <v-tooltip
-Original file line number
+Diff line change
@@ Expand Up / @@ -1100,7 +1100,7 @@ export default defineComponent({ @@
         thead.simple {
           th {
-            padding: 0 16px;
+            padding: 16px;
           }
         }
@@ Expand Down @@