1<template> 2 <page-section :section-title="$t('pageInventory.assemblies')"> 3 <b-table 4 sort-icon-left 5 no-sort-reset 6 hover 7 responsive="md" 8 :items="items" 9 :fields="fields" 10 show-empty 11 :empty-text="$t('global.table.emptyMessage')" 12 :busy="isBusy" 13 > 14 <!-- Expand chevron icon --> 15 <template #cell(expandRow)="row"> 16 <b-button 17 variant="link" 18 data-test-id="hardwareStatus-button-expandAssembly" 19 :title="expandRowLabel" 20 class="btn-icon-only" 21 @click="toggleRowDetails(row)" 22 > 23 <icon-chevron /> 24 <span class="sr-only">{{ expandRowLabel }}</span> 25 </b-button> 26 </template> 27 28 <!-- Toggle identify LED --> 29 <template #cell(identifyLed)="row"> 30 <b-form-checkbox 31 v-if="hasIdentifyLed(row.item.identifyLed)" 32 v-model="row.item.identifyLed" 33 name="switch" 34 switch 35 @change="toggleIdentifyLedValue(row.item)" 36 > 37 <span v-if="row.item.identifyLed"> 38 {{ $t('global.status.on') }} 39 </span> 40 <span v-else> {{ $t('global.status.off') }} </span> 41 </b-form-checkbox> 42 <div v-else>--</div> 43 </template> 44 45 <template #row-details="{ item }"> 46 <b-container fluid> 47 <b-row> 48 <b-col class="mt-2" sm="6" xl="6"> 49 <!-- Nmae --> 50 <dt>{{ $t('pageInventory.table.name') }}:</dt> 51 <dd>{{ dataFormatter(item.name) }}</dd> 52 <!-- Serial number --> 53 <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt> 54 <dd>{{ dataFormatter(item.serialNumber) }}</dd> 55 </b-col> 56 <b-col class="mt-2" sm="6" xl="6"> 57 <!-- Model--> 58 <dt>Model</dt> 59 <dd>{{ dataFormatter(item.model) }}</dd> 60 <!-- Spare Part Number --> 61 <dt>Spare Part Number</dt> 62 <dd>{{ dataFormatter(item.sparePartNumber) }}</dd> 63 </b-col> 64 </b-row> 65 </b-container> 66 </template> 67 </b-table> 68 </page-section> 69</template> 70 71<script> 72import PageSection from '@/components/Global/PageSection'; 73import IconChevron from '@carbon/icons-vue/es/chevron--down/20'; 74import BVToastMixin from '@/components/Mixins/BVToastMixin'; 75import TableRowExpandMixin, { 76 expandRowLabel, 77} from '@/components/Mixins/TableRowExpandMixin'; 78import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; 79import { useI18n } from 'vue-i18n'; 80import i18n from '@/i18n'; 81 82export default { 83 components: { IconChevron, PageSection }, 84 mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin], 85 data() { 86 return { 87 $t: useI18n().t, 88 isBusy: true, 89 fields: [ 90 { 91 key: 'expandRow', 92 label: '', 93 tdClass: 'table-row-expand', 94 }, 95 { 96 key: 'name', 97 label: i18n.global.t('pageInventory.table.id'), 98 formatter: this.dataFormatter, 99 sortable: true, 100 }, 101 { 102 key: 'partNumber', 103 label: i18n.global.t('pageInventory.table.partNumber'), 104 formatter: this.dataFormatter, 105 sortable: true, 106 }, 107 { 108 key: 'locationNumber', 109 label: i18n.global.t('pageInventory.table.locationNumber'), 110 formatter: this.dataFormatter, 111 sortable: true, 112 }, 113 { 114 key: 'identifyLed', 115 label: i18n.global.t('pageInventory.table.identifyLed'), 116 formatter: this.dataFormatter, 117 }, 118 ], 119 expandRowLabel: expandRowLabel, 120 }; 121 }, 122 computed: { 123 assemblies() { 124 return this.$store.getters['assemblies/assemblies']; 125 }, 126 items() { 127 if (this.assemblies) { 128 return this.assemblies; 129 } else { 130 return []; 131 } 132 }, 133 }, 134 created() { 135 this.$store.dispatch('assemblies/getAssemblyInfo').finally(() => { 136 // Emit initial data fetch complete to parent component 137 this.$root.$emit('hardware-status-assembly-complete'); 138 this.isBusy = false; 139 }); 140 }, 141 methods: { 142 toggleIdentifyLedValue(row) { 143 this.$store 144 .dispatch('assemblies/updateIdentifyLedValue', { 145 uri: row.uri, 146 memberId: row.id, 147 identifyLed: row.identifyLed, 148 }) 149 .then((message) => this.successToast(message)) 150 .catch(({ message }) => this.errorToast(message)); 151 }, 152 hasIdentifyLed(identifyLed) { 153 return typeof identifyLed === 'boolean'; 154 }, 155 }, 156}; 157</script> 158