ColumnWrapper.vue
2 years ago
CxVuiCollapseMini.vue
2 years ago
CxVuiDate.vue
2 years ago
CxVuiFSelect.vue
2 years ago
CxVuiPopup.vue
2 years ago
CxVuiSelect.vue
2 years ago
CxVuiTabs.vue
2 years ago
CxVuiTabsPanel.vue
2 years ago
Delimiter.vue
2 years ago
DetailsTable.vue
2 years ago
DetailsTableRow.vue
2 years ago
DetailsTableRowValue.vue
2 years ago
ExternalLink.vue
2 years ago
ListComponents.vue
2 years ago
PrintButton.vue
2 years ago
RowWrapper.vue
2 years ago
Tooltip.vue
2 years ago
DetailsTable.vue
64 lines
| 1 | <template> |
| 2 | <section class="table-details"> |
| 3 | <DetailsTableRow |
| 4 | v-for="( column, columnName ) in columns" |
| 5 | :key="columnName" |
| 6 | v-if="canShow( columnName )" |
| 7 | :type="getType( columnName )" |
| 8 | > |
| 9 | <template #name>{{ column.label }}</template> |
| 10 | <template #value> |
| 11 | <template v-if="'object' === typeof getColumnValue( columnName, false )"> |
| 12 | <DetailsTableRowValue |
| 13 | :value="getColumnValue( columnName, false )" |
| 14 | :columns="(column.children || {})" |
| 15 | /> |
| 16 | </template> |
| 17 | <template v-else>{{ getColumnValue( columnName, '' ) }}</template> |
| 18 | </template> |
| 19 | </DetailsTableRow> |
| 20 | </section> |
| 21 | </template> |
| 22 | |
| 23 | <script> |
| 24 | import DetailsTableRowValue from './DetailsTableRowValue'; |
| 25 | import DetailsTableRow from './DetailsTableRow'; |
| 26 | |
| 27 | export default { |
| 28 | name: 'DetailsTable', |
| 29 | components: { DetailsTableRow, DetailsTableRowValue }, |
| 30 | props: { |
| 31 | columns: { |
| 32 | type: Object, |
| 33 | }, |
| 34 | source: { |
| 35 | type: Object, |
| 36 | }, |
| 37 | }, |
| 38 | methods: { |
| 39 | getColumnValue( column, ifEmpty = false ) { |
| 40 | return this.source[ column ] ? this.source[ column ].value : ifEmpty; |
| 41 | }, |
| 42 | hasValueOrAnotherType( column ) { |
| 43 | return ( this.getColumnValue( column ) || 'rowValue' !== this.getType( column ) ); |
| 44 | }, |
| 45 | getType( column ) { |
| 46 | return this.columns[ column ].type ?? 'rowValue'; |
| 47 | }, |
| 48 | canShow( columnName ) { |
| 49 | const type = this.getType( columnName ); |
| 50 | const inDetails = false !== this.columns[ columnName ].show_in_details; |
| 51 | const value = this.getColumnValue( columnName ); |
| 52 | |
| 53 | return inDetails && ( 'rowValue' !== type || value ); |
| 54 | }, |
| 55 | }, |
| 56 | }; |
| 57 | </script> |
| 58 | |
| 59 | <style lang="scss"> |
| 60 | .table-details { |
| 61 | display: flex; |
| 62 | flex-direction: column; |
| 63 | } |
| 64 | </style> |