1<template>
2  <b-table stacked="sm" hover small :items="items" :fields="fields">
3    <template #cell(administrator)="data">
4      <template v-if="data.value">
5        <checkmark20 />
6      </template>
7    </template>
8    <template #cell(operator)="data">
9      <template v-if="data.value">
10        <checkmark20 />
11      </template>
12    </template>
13    <template #cell(readonly)="data">
14      <template v-if="data.value">
15        <checkmark20 />
16      </template>
17    </template>
18    <template #cell(noaccess)="data">
19      <template v-if="data.value">
20        <checkmark20 />
21      </template>
22    </template>
23  </b-table>
24</template>
25
26<script>
27import Checkmark20 from '@carbon/icons-vue/es/checkmark/20';
28
29export default {
30  components: {
31    Checkmark20,
32  },
33  data() {
34    return {
35      items: [
36        {
37          description: this.$t(
38            'pageUserManagement.tableRoles.configureComponentsManagedByThisService'
39          ),
40          administrator: true,
41          operator: true,
42          readonly: false,
43          noaccess: false,
44        },
45        {
46          description: this.$t(
47            'pageUserManagement.tableRoles.configureManagerResources'
48          ),
49          administrator: true,
50          operator: false,
51          readonly: false,
52          noaccess: false,
53        },
54        {
55          description: this.$t(
56            'pageUserManagement.tableRoles.updatePasswordForCurrentUserAccount'
57          ),
58          administrator: true,
59          operator: true,
60          readonly: true,
61          noaccess: false,
62        },
63        {
64          description: this.$t(
65            'pageUserManagement.tableRoles.configureUsersAndTheirAccounts'
66          ),
67          administrator: true,
68          operator: false,
69          readonly: false,
70          noaccess: false,
71        },
72        {
73          description: this.$t(
74            'pageUserManagement.tableRoles.logInToTheServiceAndReadResources'
75          ),
76          administrator: true,
77          operator: true,
78          readonly: true,
79          noaccess: false,
80        },
81      ],
82      fields: [
83        { key: 'description', label: 'Privilege' },
84        { key: 'administrator', label: 'Administrator', class: 'text-center' },
85        { key: 'operator', label: 'Operator', class: 'text-center' },
86        { key: 'readonly', label: 'ReadOnly', class: 'text-center' },
87        { key: 'noaccess', label: 'NoAccess', class: 'text-center' },
88      ],
89    };
90  },
91};
92</script>
93