Skip to content

Commit

Permalink
Mhr History Owners (#1968)
Browse files Browse the repository at this point in the history
* Mhr History Owners

* Formatting Updates

* Clean up
  • Loading branch information
cameron-eyds authored Jul 8, 2024
1 parent 2461091 commit 926cfdb
Show file tree
Hide file tree
Showing 14 changed files with 500 additions and 29 deletions.
4 changes: 2 additions & 2 deletions ppr-ui/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion ppr-ui/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ppr-ui",
"version": "3.2.32",
"version": "3.2.33",
"private": true,
"appName": "Assets UI",
"sbcName": "SBC Common Components",
Expand Down
3 changes: 3 additions & 0 deletions ppr-ui/src/assets/styles/base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,9 @@ a {
.error-text {
color: $error !important;
}
.gray7 {
color: $gray7;
}

.disabled-text {
opacity: 0.4;
Expand Down
23 changes: 21 additions & 2 deletions ppr-ui/src/components/common/SimpleTable.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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
Expand Down Expand Up @@ -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;
}
Expand Down
6 changes: 3 additions & 3 deletions ppr-ui/src/components/mhrHistory/MhrHistoryDescription.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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
Expand Down
12 changes: 6 additions & 6 deletions ppr-ui/src/components/mhrHistory/MhrHistoryLocations.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<section
id="mhr-history-description"
id="mhr-history-location"
class="pr-4"
>
<v-row
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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<{
Expand Down
200 changes: 200 additions & 0 deletions ppr-ui/src/components/mhrHistory/MhrHistoryOwners.vue
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions ppr-ui/src/components/mhrHistory/index.ts
Original file line number Diff line number Diff line change
@@ -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'
Loading

0 comments on commit 926cfdb

Please sign in to comment.