Mhr History Tabs (Common Components) (#1958)

* Common Tab and Table Components with Mhr History Configurations

* fixes and clean up

* tab style

* unit testing

* plock fix

* plock revert

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

@@ -71,6 +71,7 @@ $greenSelected: #E8F5E9;
 // App Colors (used by shared comps)
 $app-blue: #1669bb; // same as the Vuetify theme primary
 $app-dk-blue: #38598a; // same as the Vuetify theme appDkBlue
+$app-lt-blue-hover: #d2dfea;
 $app-lt-blue: #e2e8ee; // same as appLtBlue
 $app-red: #d3272c; // same as the Vuetify theme error
 $app-green: #1a9031; // same as the Vuetify theme success

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

@@ -0,0 +1,39 @@
+<template>
+  <v-table id="simple-table">
+    <thead>
+      <tr>
+        <th
+          v-for="(header, index) in tableHeaders"
+          :key="`${header.name}-${index}`"
+          :class="header?.class"
+        >
+          {{ header.name }}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="(item, index) in tableData"
+        :key="`${item.name}-${index}`"
+      >
+        <td>{{ item.name }}</td>
+      </tr>
+    </tbody>
+  </v-table>
+</template>
+
+<script setup lang="ts">
+/** Props **/
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = withDefaults(defineProps<{
+  tableHeaders: Array<any>,
+  tableData: Array<any>
+}>(), {
+  tableHeaders: null,
+  tableData: null
+})
+
+</script>
+<style lang="scss" scoped>
+@import '@/assets/styles/theme';
+</style>

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

@@ -0,0 +1,97 @@
+<template>
+  <v-card
+    id="tabbed-container"
+    flat
+  >
+    <v-tabs
+      v-model="tab"
+      height="55"
+      alignTabs="center"
+      grow
+    >
+      <v-tab
+        v-for="(tabContent, index) in tabConfig"
+        :key="`${tabContent.label}-${index}`"
+        :value="index"
+        class="tab upper-border mt-1"
+        :ripple="false"
+      >
+        <v-icon
+          class="mr-1"
+          size="22"
+        >
+          {{ tabContent.icon }}
+        </v-icon>
+        <b>{{ tabContent.label }}</b>
+        <v-spacer />
+      </v-tab>
+    </v-tabs>
+
+    <!-- Window Items -->
+    <v-window
+      v-model="tab"
+      class="rounded-bottom bg-white"
+    >
+      <v-window-item
+        v-for="(item, index) in tabConfig"
+        :key="`tab-window-${index}`"
+        :value="index"
+      >
+        <slot :name="`tab-${index}`" />
+      </v-window-item>
+    </v-window>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+/** Props **/
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = withDefaults(defineProps<{
+  tabConfig?: any
+}>(), {
+  tabConfig: {}
+})
+
+/** Local Properties **/
+const tab = ref(0)
+
+</script>
+<style lang="scss" scoped>
+@import '@/assets/styles/theme';
+#tabbed-container {
+  background-color: inherit;
+}
+.tab {
+  min-height: 55px!important;
+  background-color: $app-lt-blue;
+  font-size: 1rem;
+  letter-spacing: 0;
+  text-transform: none!important;
+  border-top-left-radius: 4px!important;
+  border-top-right-radius: 4px!important;
+  &:hover:not(.v-tab--selected) {
+    background-color: $app-lt-blue-hover;
+  }
+  .v-icon {
+    color: $app-dk-blue;
+  }
+}
+.v-spacer {
+  width: 225px;
+}
+.v-tab--selected {
+  background-color: white;
+  color: $gray9;
+  pointer-events: none;
+}
+.upper-border {
+  min-height: 55px;
+  max-height: 55px;
+  margin: 0 2.5px;
+}
+.v-window {
+  min-height: 400px
+}
+</style>

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

@@ -39,3 +39,5 @@ export { default as LienAlert } from './LienAlert.vue'
 export { default as UpdatedBadge } from './UpdatedBadge.vue'
 export { default as StaffPayment } from './StaffPayment.vue'
 export { default as CollapsibleCard } from './CollapsibleCard.vue'
+export { default as TabbedContainer } from './TabbedContainer.vue'
+export { default as SimpleTable } from './SimpleTable.vue'

ppr-ui/src/resources/mhr-history/index.ts

@@ -0,0 +1,2 @@
+export * from './mhHistoryTableHeaders'
+export * from './mhHistoryTabConfig'

ppr-ui/src/resources/mhr-history/mhHistoryTabConfig.ts

@@ -0,0 +1,14 @@
+export const mhHistoryTabConfig = [
+  {
+    label: 'Description of Home',
+    icon: 'mdi-home'
+  },
+  {
+    label: 'Location of Home',
+    icon: 'mdi-map-marker'
+  },
+  {
+    label: 'Home Owners',
+    icon: 'mdi-account'
+  }
+]

ppr-ui/src/resources/mhr-history/mhHistoryTableHeaders.ts

@@ -0,0 +1,88 @@
+export const homeDescriptionHeaders = [
+  {
+    name: '',
+    value: 'action',
+    class: 'column-width-md'
+  },
+  {
+    name: 'Manufacturer\'s Name',
+    value: 'name',
+    class: 'column-xs'
+  },
+  {
+    name: 'Make/Model',
+    value: 'makeModel',
+    class: 'column-xs'
+  },
+  {
+    name: 'Serial Number',
+    value: 'serial',
+    class: 'column-xs'
+  },
+  {
+    name: 'Registration Date',
+    value: 'date',
+    class: 'column-xs'
+  }
+]
+
+export const homeLocationHeaders = [
+  {
+    name: '',
+    value: 'action',
+    class: 'column-width-md'
+  },
+  {
+    name: 'Town/City',
+    value: 'townCity',
+    class: 'column-xs'
+  },
+  {
+    name: 'Street',
+    value: 'street',
+    class: 'column-xs'
+  },
+  {
+    name: 'From',
+    value: 'from',
+    class: 'column-xs'
+  },
+  {
+    name: 'To',
+    value: 'to',
+    class: 'column-xs'
+  }
+]
+
+export const homeOwnerHeaders = [
+  {
+    name: '',
+    value: 'action',
+    class: 'column-width-md'
+  },
+  {
+    name: 'Owner Name',
+    value: 'name',
+    class: 'column-xs'
+  },
+  {
+    name: 'Tenancy Type',
+    value: 'tenancyType',
+    class: 'column-xs'
+  },
+  {
+    name: 'Owner From',
+    value: 'from',
+    class: 'column-xs'
+  },
+  {
+    name: 'Owner Until',
+    value: 'to',
+    class: 'column-xs'
+  },
+  {
+    name: 'Owner Status',
+    value: 'status',
+    class: 'column-xs'
+  }
+]

ppr-ui/src/utils/registration-helper.ts

@@ -80,7 +80,9 @@ export function setAmendmentList (baseList:Array<any>, addList:Array<any>, delet
           securitiesActOrders: notice.securitiesActOrders?.filter(order =>
             order.action !== ActionTypes.REMOVED).map(order => ({
           ...removeEmptyProperties(order),
+          ...(order.action === ActionTypes.EDITED && {
             amendOrderId: order.orderId,
+          }),
           orderDate: convertToISO8601LastMinute(order.orderDate.split('T')[0])
         }))
       } as AddEditSaNoticeIF

ppr-ui/src/views/mhrInformation/MhrHistory.vue

@@ -32,6 +32,31 @@
           </p>
         </v-col>
       </v-row>
+
+      <!-- Tabbed Mhr History Tables -->
+      <TabbedContainer
+        :tabConfig="mhHistoryTabConfig"
+        class="mt-4"
+      >
+        <template #tab-0>
+          <SimpleTable
+            :tableHeaders="homeDescriptionHeaders"
+            :tableData="[]"
+          />
+        </template>
+        <template #tab-1>
+          <SimpleTable
+            :tableHeaders="homeLocationHeaders"
+            :tableData="[]"
+          />
+        </template>
+        <template #tab-2>
+          <SimpleTable
+            :tableHeaders="homeOwnerHeaders"
+            :tableData="[]"
+          />
+        </template>
+      </TabbedContainer>
     </div>
 
     <!-- Footer -->
@@ -67,6 +92,13 @@ import { useAuth, useNavigation } from '@/composables'
 import { getFeatureFlag } from '@/utils'
 import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/store'
+import { TabbedContainer, SimpleTable } from '@/components/common'
+import {
+  homeDescriptionHeaders,
+  homeLocationHeaders,
+  homeOwnerHeaders,
+  mhHistoryTabConfig
+} from '@/resources/mhr-history'
 
 /** Composables **/
 const { isAuthenticated } = useAuth()

ppr-ui/tests/unit/MhrHistory.spec.ts

@@ -1,10 +1,9 @@
 import { MhrHistory } from '@/views'
 import { nextTick } from 'vue'
 import { createComponent, setupMockStaffUser } from './utils'
-import { defaultFlagSet, getMhrHistory, pacificDate } from '@/utils'
+import { defaultFlagSet, pacificDate } from '@/utils'
 import { expect, vi } from 'vitest'
 import { RouteNames } from '@/enums'
-import { mockedFinancingStatementAll } from './test-data'
 
 describe('HistoricalManufacturedHomeInfo', () => {
   let wrapper: any

ppr-ui/tests/unit/SimpleTable.spec.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { SimpleTable } from '@/components/common'
+import { createComponent } from './utils'
+
+const tableHeadersMock = [
+  { name: 'Header 1', class: 'header-class-1' },
+  { name: 'Header 2', class: 'header-class-2' },
+]
+
+const tableDataMock = [
+  { name: 'Row 1' },
+  { name: 'Row 2' },
+]
+
+describe('SimpleTable.vue', () => {
+  let wrapper
+
+  beforeEach(async () => {
+    wrapper = await createComponent(SimpleTable, {
+      tableHeaders: tableHeadersMock,
+      tableData: tableDataMock,
+    })
+  })
+  it('renders correctly', () => {
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.find('#simple-table').exists()).toBe(true)
+    expect(wrapper.findAll('thead th').length).toBe(tableHeadersMock.length)
+    expect(wrapper.findAll('tbody tr').length).toBe(tableDataMock.length)
+  })
+
+  it('renders table headers correctly', () => {
+    const headers = wrapper.findAll('thead th')
+    expect(headers.length).toBe(tableHeadersMock.length)
+    headers.forEach((header, index) => {
+      expect(header.text()).toBe(tableHeadersMock[index].name)
+      expect(header.classes()).toContain(tableHeadersMock[index].class)
+    })
+  })
+
+  it('renders table data correctly', () => {
+    const rows = wrapper.findAll('tbody tr')
+    expect(rows.length).toBe(tableDataMock.length)
+    rows.forEach((row, index) => {
+      expect(row.find('td').text()).toBe(tableDataMock[index].name)
+    })
+  })
+})