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        {
84          key: 'description',
85          label: this.$t('pageUserManagement.tableRoles.privilege'),
86        },
87        {
88          key: 'administrator',
89          label: this.$t('pageUserManagement.tableRoles.administrator'),
90          class: 'text-center',
91        },
92        {
93          key: 'operator',
94          label: this.$t('pageUserManagement.tableRoles.operator'),
95          class: 'text-center',
96        },
97        {
98          key: 'readonly',
99          label: this.$t('pageUserManagement.tableRoles.readOnly'),
100          class: 'text-center',
101        },
102        {
103          key: 'noaccess',
104          label: this.$t('pageUserManagement.tableRoles.noAccess'),
105          class: 'text-center',
106        },
107      ],
108    };
109  },
110};
111</script>
112