diff --git a/ppr-ui/package-lock.json b/ppr-ui/package-lock.json index cf4676583..eedc675cd 100644 --- a/ppr-ui/package-lock.json +++ b/ppr-ui/package-lock.json @@ -16263,4 +16263,4 @@ "dev": true } } -} +} \ No newline at end of file diff --git a/ppr-ui/src/assets/styles/theme.scss b/ppr-ui/src/assets/styles/theme.scss index dc8092815..c494a600e 100644 --- a/ppr-ui/src/assets/styles/theme.scss +++ b/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 diff --git a/ppr-ui/src/components/common/SimpleTable.vue b/ppr-ui/src/components/common/SimpleTable.vue new file mode 100644 index 000000000..f08420810 --- /dev/null +++ b/ppr-ui/src/components/common/SimpleTable.vue @@ -0,0 +1,39 @@ + + + + diff --git a/ppr-ui/src/components/common/TabbedContainer.vue b/ppr-ui/src/components/common/TabbedContainer.vue new file mode 100644 index 000000000..490152cbe --- /dev/null +++ b/ppr-ui/src/components/common/TabbedContainer.vue @@ -0,0 +1,97 @@ + + + + diff --git a/ppr-ui/src/components/common/index.ts b/ppr-ui/src/components/common/index.ts index 456bdfefd..244257b11 100644 --- a/ppr-ui/src/components/common/index.ts +++ b/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' diff --git a/ppr-ui/src/resources/mhr-history/index.ts b/ppr-ui/src/resources/mhr-history/index.ts new file mode 100644 index 000000000..926b0e7c7 --- /dev/null +++ b/ppr-ui/src/resources/mhr-history/index.ts @@ -0,0 +1,2 @@ +export * from './mhHistoryTableHeaders' +export * from './mhHistoryTabConfig' diff --git a/ppr-ui/src/resources/mhr-history/mhHistoryTabConfig.ts b/ppr-ui/src/resources/mhr-history/mhHistoryTabConfig.ts new file mode 100644 index 000000000..cb83b4c1f --- /dev/null +++ b/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' + } +] diff --git a/ppr-ui/src/resources/mhr-history/mhHistoryTableHeaders.ts b/ppr-ui/src/resources/mhr-history/mhHistoryTableHeaders.ts new file mode 100644 index 000000000..d9ee43eb8 --- /dev/null +++ b/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' + } +] diff --git a/ppr-ui/src/utils/registration-helper.ts b/ppr-ui/src/utils/registration-helper.ts index 9b679ac51..b40501538 100644 --- a/ppr-ui/src/utils/registration-helper.ts +++ b/ppr-ui/src/utils/registration-helper.ts @@ -80,7 +80,9 @@ export function setAmendmentList (baseList:Array, addList:Array, 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 diff --git a/ppr-ui/src/views/mhrInformation/MhrHistory.vue b/ppr-ui/src/views/mhrInformation/MhrHistory.vue index 7b43948c0..8a823adc4 100644 --- a/ppr-ui/src/views/mhrInformation/MhrHistory.vue +++ b/ppr-ui/src/views/mhrInformation/MhrHistory.vue @@ -32,6 +32,31 @@

+ + + + + + + @@ -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() diff --git a/ppr-ui/tests/unit/MhrHistory.spec.ts b/ppr-ui/tests/unit/MhrHistory.spec.ts index 5ab72275b..173d50a7c 100644 --- a/ppr-ui/tests/unit/MhrHistory.spec.ts +++ b/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 diff --git a/ppr-ui/tests/unit/SimpleTable.spec.ts b/ppr-ui/tests/unit/SimpleTable.spec.ts new file mode 100644 index 000000000..2178ed82a --- /dev/null +++ b/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) + }) + }) +}) diff --git a/ppr-ui/tests/unit/TabbedContainer.spec.ts b/ppr-ui/tests/unit/TabbedContainer.spec.ts new file mode 100644 index 000000000..299577020 --- /dev/null +++ b/ppr-ui/tests/unit/TabbedContainer.spec.ts @@ -0,0 +1,33 @@ +import { describe, it, expect, beforeEach } from 'vitest' +import { TabbedContainer } from '@/components/common' +import { createComponent } from './utils' + +const tabConfigMock = [ + { label: 'Tab 1', icon: 'mdi-home' }, + { label: 'Tab 2', icon: 'mdi-settings' }, +] + +describe('YourComponent.vue', () => { + let wrapper + beforeEach(async () => { + wrapper = await createComponent(TabbedContainer, { + tabConfig: tabConfigMock + }) + }) + it('renders correctly', async () => { + expect(wrapper.exists()).toBe(true) + expect(wrapper.find('#tabbed-container').exists()).toBe(true) + expect(wrapper.findAll('.tab').length).toBe(tabConfigMock.length) + }) + + it('switches tabs correctly', async () => { + const tabs = wrapper.findAll('.tab') + expect(tabs.length).toBe(tabConfigMock.length) + + await tabs[1].trigger('click') + expect(wrapper.vm.tab).toBe(1) + + await tabs[0].trigger('click') + expect(wrapper.vm.tab).toBe(0) + }) +})