Mhr History Owners

ppr-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "3.2.32",
+  "version": "3.2.33",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",

ppr-ui/src/assets/styles/base.scss

@@ -168,6 +168,9 @@ a {
 .error-text {
   color: $error !important;
 }
+.gray7 {
+  color: $gray7;
+}
 
 .disabled-text {
   opacity: 0.4;

ppr-ui/src/components/common/SimpleTable.vue

@@ -20,8 +20,13 @@
           <td
             v-for="(header, colIndex) in tableHeaders"
             :key="`cell-${rowIndex}-${colIndex}`"
-            :class="{ 'font-weight-bold' : colIndex === 1, 'expanded-row-cell' : expandRow[rowIndex] }"
+            :class="{
+              'pt-1' : colIndex === 0,
+              'font-weight-bold gray9' : colIndex === 1,
+              'expanded-row-cell' : expandRow[rowIndex]
+            }"
           >
+            <!-- Expand/Collapse Btn -->
             <v-btn
               v-if="colIndex === 0"
               class="toggle-expand-row-btn"
@@ -40,7 +45,15 @@
                 {{ expandRow[rowIndex] ? 'Hide' : 'View' }} {{ rowLabel }}
               </span>
             </v-btn>
-            <span v-else>{{ getItemValue(item, header.value) }}</span>
+            <!-- Cell Content -->
+            <template v-else>
+              <slot
+                :name="`cell-slot-${colIndex}`"
+                :content="item"
+              >
+                {{ getItemValue(item, header.value) }}
+              </slot>
+            </template>
           </td>
         </tr>
         <tr
@@ -136,6 +149,12 @@ const getItemValue = (item: object, valuePaths: Array<string> | string): string
 </script>
 <style lang="scss" scoped>
 @import '@/assets/styles/theme';
+:deep(td) {
+  align-content: flex-start;
+}
+.gray9 {
+  color: $gray9 !important;
+}
 .expanded-row-cell {
   border-bottom: 0!important;
 }

ppr-ui/src/components/mhrHistory/MhrHistoryDescription.vue

@@ -127,7 +127,7 @@
         cols="6"
         class="pl-3"
       >
-        <p>{{ shortPacificDate(content?.createDateTime) || '(Not Entered)' }}</p>
+        <p>{{ pacificDate(content?.createDateTime, true) || '(Not Entered)' }}</p>
       </v-col>
       <v-col cols="3">
         <h4>Document Type</h4>
@@ -136,7 +136,7 @@
         cols="6"
         class="pl-3"
       >
-        <p>{{ content?.registrationDescription || '(Not Entered)' }}</p>
+        <p>{{ multipleWordsToTitleCase(content?.registrationDescription, false) }}</p>
       </v-col>
       <v-col cols="3">
         <h4>Registration Number</h4>
@@ -163,7 +163,7 @@
 <script setup lang="ts">
 import { HomeSectionsTable } from '@/components/tables/mhr'
 import { DescriptionIF } from '@/interfaces'
-import { shortPacificDate } from '@/utils'
+import { multipleWordsToTitleCase, pacificDate, shortPacificDate } from '@/utils'
 
 /** Props **/
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

ppr-ui/src/components/mhrHistory/MhrHistoryLocations.vue

@@ -1,6 +1,6 @@
 <template>
   <section
-    id="mhr-history-description"
+    id="mhr-history-location"
     class="pr-4"
   >
     <v-row
@@ -223,7 +223,7 @@
         cols="6"
         class="pl-3"
       >
-        <p>{{ shortPacificDate(content?.createDateTime) || '(Not Entered)' }}</p>
+        <p>{{ pacificDate(content?.createDateTime, true) }}</p>
       </v-col>
       <v-col cols="3">
         <h4>Document Type</h4>
@@ -232,7 +232,7 @@
         cols="6"
         class="pl-3"
       >
-        <p>{{ content?.registrationDescription || '(Not Entered)' }}</p>
+        <p>{{ multipleWordsToTitleCase(content?.registrationDescription, false) }}</p>
       </v-col>
       <v-col cols="3">
         <h4>Registration Number</h4>
@@ -264,7 +264,7 @@
           cols="6"
           class="pl-3 mt-4"
         >
-          <p>{{ shortPacificDate(content?.endDateTime) || '(Not Entered)' }}</p>
+          <p>{{ pacificDate(content?.endDateTime, true) }}</p>
         </v-col>
         <v-col cols="3">
           <h4>Document Type</h4>
@@ -273,7 +273,7 @@
           cols="6"
           class="pl-3"
         >
-          <p>{{ content?.registrationDescription || '(Not Entered)' }}</p>
+          <p>{{ multipleWordsToTitleCase(content?.registrationDescription, false) || '(Not Entered)' }}</p>
         </v-col>
         <v-col cols="3">
           <h4>Registration Number</h4>
@@ -316,7 +316,7 @@ import { ref } from 'vue'
 import { LocationIF, RegistrationIF } from '@/interfaces'
 import { HomeLocationTypes } from '@/enums'
 import { useCountriesProvinces } from '@/composables/address/factories'
-import { shortPacificDate } from '@/utils'
+import { multipleWordsToTitleCase, pacificDate } from '@/utils'
 
 /** Props **/
 const props = withDefaults(defineProps<{

ppr-ui/src/components/mhrHistory/MhrHistoryOwners.vue

@@ -0,0 +1,200 @@
+<template>
+  <section
+    id="mhr-history-owners"
+    class="pr-4"
+  >
+    <v-row
+      noGutters
+      class="condensed-row pt-5"
+    >
+      <p>
+        <span class="generic-label-14">Tenancy Type:</span>
+        {{ content.type }}
+        <v-divider
+          v-if="content.type === HomeTenancyTypes.COMMON"
+          vertical
+        />
+      </p>
+      <template v-if="content.type === HomeTenancyTypes.COMMON">
+        <p>
+          <span class="generic-label-14">Group:</span>
+          {{ content.groupId }} of {{ content.groupCount }} <v-divider vertical />
+        </p>
+        <p>
+          <span class="generic-label-14">Owner:</span>
+          {{ content.ownerId }} of {{ content.groupOwnerCount }} <v-divider vertical />
+        </p>
+        <p>
+          <span class="generic-label-14">Group Tenancy Type:</span>
+          {{ content.groupTenancyType }}
+          <v-divider vertical />
+        </p>
+        <p>
+          <span class="generic-label-14">Interest:</span>
+          {{ content.interest }} {{ content.interestNumerator }}/{{ content.interestDenominator }}
+        </p>
+      </template>
+    </v-row>
+
+    <v-row
+      noGutters
+      class="condensed-row py-3"
+    >
+      <v-col cols="3">
+        <h4>Mailing Address</h4>
+        <BaseAddress :value="content.address" />
+      </v-col>
+      <v-col
+        cols="3"
+        class="pl-3"
+      >
+        <h4>Phone Number</h4>
+        <p>
+          {{ content.phoneNumber || '(Not Entered)' }}
+          {{ content.phoneExtension ? `Ext ${content.phoneExtension}` : '' }}
+        </p>
+      </v-col>
+      <v-col cols="3">
+        <h4>Email Address</h4>
+        <p>{{ content.emailAddress || '(Not Entered)' }}</p>
+      </v-col>
+    </v-row>
+
+    <!-- Owner From/Until Details -->
+    <v-row
+      noGutters
+      class="py-6 condensed-row"
+    >
+      <v-col cols="3">
+        <h4>Owned From</h4>
+      </v-col>
+      <v-col
+        cols="6"
+        class="pl-3"
+      >
+        <p>{{ pacificDate(content?.createDateTime, true) || '(Not Entered)' }}</p>
+      </v-col>
+      <v-col cols="3">
+        <h4>Document Type</h4>
+      </v-col>
+      <v-col
+        cols="6"
+        class="pl-3"
+      >
+        <p>{{ multipleWordsToTitleCase(content?.registrationDescription, false) }}</p>
+      </v-col>
+      <v-col cols="3">
+        <h4>Registration Number</h4>
+      </v-col>
+      <v-col
+        cols="6"
+        class="pl-3"
+      >
+        <p>{{ content?.documentRegistrationNumber || '(Not Entered)' }}</p>
+      </v-col>
+      <v-col cols="3">
+        <h4>Document ID</h4>
+      </v-col>
+      <v-col
+        cols="6"
+        class="pl-3"
+      >
+        <p>{{ content?.documentId || '(Not Entered)' }}</p>
+      </v-col>
+
+      <template v-if="content?.endDateTime">
+        <v-col
+          cols="3"
+          class="mt-4"
+        >
+          <h4>Owned Until</h4>
+        </v-col>
+        <v-col
+          cols="6"
+          class="pl-3 mt-4"
+        >
+          <p>{{ pacificDate(content?.endDateTime, true) || '(Not Entered)' }}</p>
+        </v-col>
+        <v-col cols="3">
+          <h4>Document Type</h4>
+        </v-col>
+        <v-col
+          cols="6"
+          class="pl-3"
+        >
+          <p>{{ multipleWordsToTitleCase(content?.registrationDescription, false) }}</p>
+        </v-col>
+        <v-col cols="3">
+          <h4>Registration Number</h4>
+        </v-col>
+        <v-col
+          cols="6"
+          class="pl-3"
+        >
+          <p>{{ content?.documentRegistrationNumber || '(Not Entered)' }}</p>
+        </v-col>
+        <v-col cols="3">
+          <h4>Document ID</h4>
+        </v-col>
+        <v-col
+          cols="6"
+          class="pl-3"
+        >
+          <p>{{ content?.documentId || '(Not Entered)' }}</p>
+        </v-col>
+      </template>
+      <template v-else>
+        <v-col
+          cols="3"
+          class="mt-4"
+        >
+          <h4>Owned Until</h4>
+        </v-col>
+        <v-col
+          cols="6"
+          class="pl-3 mt-4"
+        >
+          <p>Current</p>
+        </v-col>
+      </template>
+    </v-row>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { OwnerIF } from '@/interfaces'
+import { BaseAddress } from '@/composables/address'
+import { multipleWordsToTitleCase, pacificDate } from '@/utils'
+import { HomeTenancyTypes } from '@/enums'
+
+/** Props **/
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = withDefaults(defineProps<{
+  content: OwnerIF
+}>(), {
+  content: null
+})
+
+</script>
+<style lang="scss" scoped>
+@import '@/assets/styles/theme';
+.v-row {
+  min-height: 65px;
+  border-top: 1px solid $gray3;
+}
+.condensed-row {
+  p, h4 {
+    line-height: 1.5rem;
+  }
+}
+:deep(.v-divider) {
+  height: 14px;
+  color: $gray3;
+  margin: 0 20px;
+  opacity: 1;
+}
+:deep(.v-col-3) {
+  flex: 0 0 26.25%;
+  max-width: 26.25%;
+}
+</style>

ppr-ui/src/components/mhrHistory/index.ts

@@ -1,2 +1,3 @@
 export { default as MhrHistoryDescription } from './MhrHistoryDescription.vue'
 export { default as MhrHistoryLocations } from './MhrHistoryLocations.vue'
+export { default as MhrHistoryOwners } from './MhrHistoryOwners.vue'