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