Home Descriptions History (#1964)

* Home Descriptions History

* Removed placeholders

* restyle up down chevron

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

@@ -12,28 +12,135 @@
       </tr>
     </thead>
     <tbody>
-      <tr
-        v-for="(item, index) in tableData"
-        :key="`${item.name}-${index}`"
+      <template
+        v-for="(item, rowIndex) in tableData"
+        :key="`${item.name}-${rowIndex}`"
       >
-        <td>{{ item.name }}</td>
-      </tr>
+        <tr>
+          <td
+            v-for="(header, colIndex) in tableHeaders"
+            :key="`cell-${rowIndex}-${colIndex}`"
+            :class="{ 'font-weight-bold' : colIndex === 1, 'expanded-row-cell' : expandRow[rowIndex] }"
+          >
+            <v-btn
+              v-if="colIndex === 0"
+              class="toggle-expand-row-btn"
+              color="primary"
+              variant="plain"
+              :ripple="false"
+              @click="toggleRowState(rowIndex)"
+            >
+              <v-icon
+                class="hide-show-chevron"
+                size="small"
+              >
+                {{ expandRow[rowIndex] ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
+              </v-icon>
+              <span class="generic-link pl-1">
+                {{ expandRow[rowIndex] ? 'Hide' : 'View' }} {{ rowLabel }}
+              </span>
+            </v-btn>
+            <span v-else>{{ getItemValue(item, header.value) }}</span>
+          </td>
+        </tr>
+        <tr
+          v-if="expandRow[rowIndex]"
+          class="content-slot-row"
+        >
+          <td />
+          <td :colspan="tableHeaders.length">
+            <slot
+              name="content-slot"
+              :content="tableData[rowIndex]"
+            />
+          </td>
+        </tr>
+      </template>
     </tbody>
   </v-table>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+import { isObject } from 'lodash'
+import { shortPacificDate } from '@/utils'
+import { BaseHeaderIF } from '@/interfaces'
+
 /** Props **/
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const props = withDefaults(defineProps<{
-  tableHeaders: Array<any>,
-  tableData: Array<any>
+  tableHeaders?: Array<BaseHeaderIF>,
+  tableData?: Array<any>,
+  rowLabel: string
 }>(), {
   tableHeaders: null,
-  tableData: null
+  tableData: null,
+  rowLabel: ''
 })
 
+const expandRow = ref([])
+
+/** Toggle expanded state of rows **/
+const toggleRowState = (index: number) => {
+  expandRow.value[index] = !expandRow.value[index]
+}
+
+/**
+ * Retrieves nested values from an object based on an array of dot-separated value paths.
+ * Handles array indexing within the paths and formats date values if 'date' is included in the value path.
+ * Allows combining multiple values into a single return value.
+ *
+ * @param {Object} item - The object to retrieve the values from.
+ * @param {Array<string>|string} valuePaths - The array of dot-separated paths specifying the values to retrieve, or a
+ * single path as a string.
+ * @returns {string} - The combined values retrieved from the specified paths, or an empty string if none are found.
+ */
+const getItemValue = (item: object, valuePaths: Array<string> | string): string => {
+
+  const retrieveValue = (path) => {
+    if (!path) return ''
+
+    // Function to retrieve a single value from the item based on a path
+    const result = path.split('.').reduce((result, key) => {
+      if (result && isObject(result)) {
+        // Handle array indexing in the path (e.g., sections[0].serialNumber)
+        if (key.includes('[')) {
+          const [mainKey, index] = key.split(/\[|\]/).filter(Boolean)
+          return result[mainKey]?.[parseInt(index)]
+        }
+        // Otherwise, retrieve the nested value
+        return result[key]
+      }
+      // Return empty string if the path is invalid
+      return ''
+    }, item)
+
+    // Format the value as a date if the path includes 'date'
+    if (path.toLowerCase().includes('date') && result) {
+      return shortPacificDate(result)
+    }
+
+    return result
+  }
+
+  // If valuePaths is an array, retrieve and concatenate values for each path
+  if (Array.isArray(valuePaths)) {
+    return valuePaths.map(retrieveValue).filter(Boolean).join(' ')
+  }
+
+  // Otherwise, retrieve the single value
+  return retrieveValue(valuePaths)
+}
+
 </script>
 <style lang="scss" scoped>
 @import '@/assets/styles/theme';
+.expanded-row-cell {
+  border-bottom: 0!important;
+}
+.hide-show-chevron {
+  background-color: $app-blue;
+  border-radius: 50%;
+  color: white;
+}
 </style>

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

@@ -91,7 +91,4 @@ const tab = ref(0)
   max-height: 55px;
   margin: 0 2.5px;
 }
-.v-window {
-  min-height: 400px
-}
 </style>

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

@@ -0,0 +1,200 @@
+<template>
+  <section
+    id="mhr-history-description"
+    class="pr-4"
+  >
+    <v-row class="ma-0">
+      <v-col
+        cols="3"
+        class="pl-0"
+      >
+        <h4>Year of Manufacture</h4>
+      </v-col>
+      <v-col>
+        <p>{{ content?.baseInformation?.year || '(Not Entered)' }}</p>
+      </v-col>
+    </v-row>
+
+    <v-row
+      v-if="content?.csaNumber"
+      noGutters
+      class="py-3"
+    >
+      <v-col cols="3">
+        <h4>CSA Number</h4>
+      </v-col>
+      <v-col
+        cols="6"
+        class="pl-3"
+      >
+        <p>{{ content?.csaNumber || '(Not Entered)' }}</p>
+      </v-col>
+      <v-col cols="3">
+        <h4>CSA Standard</h4>
+      </v-col>
+      <v-col
+        cols="6"
+        class="pl-3"
+      >
+        <p>{{ content?.csaStandard || '(Not Entered)' }}</p>
+      </v-col>
+    </v-row>
+
+    <v-row
+      v-else-if="content?.engineerName"
+      noGutters
+      class="py-3"
+    >
+      <v-col cols="3">
+        <h4>Engineer's Name</h4>
+      </v-col>
+      <v-col
+        cols="6"
+        class="pl-3"
+      >
+        <p>{{ content?.engineerName || '(Not Entered)' }}</p>
+      </v-col>
+      <v-col cols="3">
+        <h4>Date of Engineer's Report</h4>
+      </v-col>
+      <v-col
+        cols="6"
+        class="pl-3"
+      >
+        <p>{{ shortPacificDate(content?.engineerDate) || '(Not Entered)' }}</p>
+      </v-col>
+    </v-row>
+
+    <v-row
+      v-else
+      noGutters
+      class="py-3"
+    >
+      <v-col cols="3">
+        <h4>Home Certification</h4>
+      </v-col>
+      <v-col class="pl-3">
+        <p>{{ 'There is no certification available for this home.' }}</p>
+      </v-col>
+    </v-row>
+
+    <v-row class="ma-0">
+      <v-col
+        cols="12"
+        class="pl-0"
+      >
+        <h4>Home Sections</h4>
+        <HomeSectionsTable
+          class="mt-n3"
+          :homeSections="content?.sections"
+          :isReviewMode="true"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row class="ma-0">
+      <v-col
+        cols="3"
+        class="pl-0"
+      >
+        <h4>Rebuilt Status</h4>
+      </v-col>
+      <v-col>
+        <p>{{ content?.rebuiltRemarks || '(Not Entered)' }}</p>
+      </v-col>
+    </v-row>
+
+    <v-row class="ma-0">
+      <v-col
+        cols="3"
+        class="pl-0"
+      >
+        <h4>Other Information</h4>
+      </v-col>
+      <v-col>
+        <p>{{ content?.otherRemarks || '(Not Entered)' }}</p>
+      </v-col>
+    </v-row>
+
+    <v-row
+      noGutters
+      class="py-6 condensed-row"
+    >
+      <v-col cols="3">
+        <h4>Registration Date</h4>
+      </v-col>
+      <v-col
+        cols="6"
+        class="pl-3"
+      >
+        <p>{{ shortPacificDate(content?.createDateTime) || '(Not Entered)' }}</p>
+      </v-col>
+      <v-col cols="3">
+        <h4>Document Type</h4>
+      </v-col>
+      <v-col
+        cols="6"
+        class="pl-3"
+      >
+        <p>{{ content?.registrationDescription || '(Not Entered)' }}</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>
+    </v-row>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { HomeSectionsTable } from '@/components/tables/mhr'
+import { DescriptionIF } from '@/interfaces'
+import { shortPacificDate } from '@/utils'
+
+/** Props **/
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = withDefaults(defineProps<{
+  content: DescriptionIF
+}>(), {
+  content: null
+})
+
+</script>
+<style lang="scss" scoped>
+@import '@/assets/styles/theme';
+.v-row {
+  min-height: 65px;
+  border-top: 1px solid $gray3;
+}
+p {
+  line-height: 2.25rem;
+}
+.condensed-row {
+  p, h4 {
+    line-height: 1.5rem;
+  }
+}
+:deep(.v-col-3) {
+  flex: 0 0 26.25%;
+  max-width: 26.25%;
+}
+:deep(#mh-home-sections-table) {
+  .column-mdl {
+    width: 26.25%
+  }
+}
+</style>

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

@@ -0,0 +1 @@
+export { default as MhrHistoryDescription } from './MhrHistoryDescription.vue'

ppr-ui/src/interfaces/data-table-interfaces/table-headers-interface.ts

@@ -1,8 +1,9 @@
 import { APISearchTypes } from '@/enums'
 
 export interface BaseHeaderIF {
-    text: string
-    value: string
+    name?: string
+    text?: string
+    value: string|Array<string>
     class?: string
     sortable?: boolean
     width?: string