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';
79
80export default {
81  components: { IconChevron, PageSection },
82  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
83  data() {
84    return {
85      isBusy: true,
86      fields: [
87        {
88          key: 'expandRow',
89          label: '',
90          tdClass: 'table-row-expand',
91        },
92        {
93          key: 'name',
94          label: this.$t('pageInventory.table.id'),
95          formatter: this.dataFormatter,
96          sortable: true,
97        },
98        {
99          key: 'partNumber',
100          label: this.$t('pageInventory.table.partNumber'),
101          formatter: this.dataFormatter,
102          sortable: true,
103        },
104        {
105          key: 'locationNumber',
106          label: this.$t('pageInventory.table.locationNumber'),
107          formatter: this.dataFormatter,
108          sortable: true,
109        },
110        {
111          key: 'identifyLed',
112          label: this.$t('pageInventory.table.identifyLed'),
113          formatter: this.dataFormatter,
114        },
115      ],
116      expandRowLabel: expandRowLabel,
117    };
118  },
119  computed: {
120    assemblies() {
121      return this.$store.getters['assemblies/assemblies'];
122    },
123    items() {
124      if (this.assemblies) {
125        return this.assemblies;
126      } else {
127        return [];
128      }
129    },
130  },
131  created() {
132    this.$store.dispatch('assemblies/getAssemblyInfo').finally(() => {
133      // Emit initial data fetch complete to parent component
134      this.$root.$emit('hardware-status-assembly-complete');
135      this.isBusy = false;
136    });
137  },
138  methods: {
139    toggleIdentifyLedValue(row) {
140      this.$store
141        .dispatch('assemblies/updateIdentifyLedValue', {
142          uri: row.uri,
143          memberId: row.id,
144          identifyLed: row.identifyLed,
145        })
146        .catch(({ message }) => this.errorToast(message));
147    },
148    hasIdentifyLed(identifyLed) {
149      return typeof identifyLed === 'boolean';
150    },
151  },
152};
153</script>
154