xref: /openbmc/webui-vue/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue (revision ce7db82c9582c4dac04ac81d9af6b557ae7965e3)
1<template>
2  <div>
3    <b-row>
4      <b-col md="9">
5        <alert :show="isServiceEnabled === false" variant="info">
6          {{ $t('pageLdap.tableRoleGroups.alertContent') }}
7        </alert>
8      </b-col>
9    </b-row>
10    <b-row>
11      <b-col class="text-right" md="9">
12        <b-btn
13          variant="primary"
14          :disabled="!isServiceEnabled"
15          @click="initRoleGroupModal(null)"
16        >
17          <icon-add />
18          {{ $t('pageLdap.addRoleGroup') }}
19        </b-btn>
20      </b-col>
21    </b-row>
22    <b-row>
23      <b-col md="9">
24        <table-toolbar
25          ref="toolbar"
26          :selected-items-count="selectedRows.length"
27          :actions="batchActions"
28          @clear-selected="clearSelectedRows($refs.table)"
29          @batch-action="onBatchAction"
30        />
31        <b-table
32          ref="table"
33          responsive
34          selectable
35          show-empty
36          no-select-on-click
37          hover
38          no-sort-reset
39          sort-icon-left
40          :busy="isBusy"
41          :items="tableItems"
42          :fields="fields"
43          :empty-text="$t('global.table.emptyMessage')"
44          @row-selected="onRowSelected($event, tableItems.length)"
45        >
46          <!-- Checkbox column -->
47          <template #head(checkbox)>
48            <b-form-checkbox
49              v-model="tableHeaderCheckboxModel"
50              :indeterminate="tableHeaderCheckboxIndeterminate"
51              :disabled="!isServiceEnabled"
52              @change="onChangeHeaderCheckbox($refs.table)"
53            >
54              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
55            </b-form-checkbox>
56          </template>
57          <template #cell(checkbox)="row">
58            <b-form-checkbox
59              v-model="row.rowSelected"
60              :disabled="!isServiceEnabled"
61              @change="toggleSelectRow($refs.table, row.index)"
62            >
63              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
64            </b-form-checkbox>
65          </template>
66
67          <!-- table actions column -->
68          <template #cell(actions)="{ item }">
69            <table-row-action
70              v-for="(action, index) in item.actions"
71              :key="index"
72              :value="action.value"
73              :enabled="action.enabled"
74              :title="action.title"
75              @click-table-action="onTableRowAction($event, item)"
76            >
77              <template #icon>
78                <icon-edit v-if="action.value === 'edit'" />
79                <icon-trashcan v-if="action.value === 'delete'" />
80              </template>
81            </table-row-action>
82          </template>
83        </b-table>
84      </b-col>
85    </b-row>
86    <modal-add-role-group
87      :role-group="activeRoleGroup"
88      @ok="saveRoleGroup"
89      @hidden="activeRoleGroup = null"
90    />
91  </div>
92</template>
93
94<script>
95import IconEdit from '@carbon/icons-vue/es/edit/20';
96import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
97import IconAdd from '@carbon/icons-vue/es/add--alt/20';
98import { mapGetters } from 'vuex';
99
100import Alert from '@/components/Global/Alert';
101import TableToolbar from '@/components/Global/TableToolbar';
102import TableRowAction from '@/components/Global/TableRowAction';
103import BVTableSelectableMixin, {
104  selectedRows,
105  tableHeaderCheckboxModel,
106  tableHeaderCheckboxIndeterminate,
107} from '@/components/Mixins/BVTableSelectableMixin';
108import BVToastMixin from '@/components/Mixins/BVToastMixin';
109import ModalAddRoleGroup from './ModalAddRoleGroup';
110import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
111import { useI18n } from 'vue-i18n';
112import i18n from '@/i18n';
113
114export default {
115  components: {
116    Alert,
117    IconAdd,
118    IconEdit,
119    IconTrashcan,
120    ModalAddRoleGroup,
121    TableRowAction,
122    TableToolbar,
123  },
124  mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin],
125  data() {
126    return {
127      $t: useI18n().t,
128      isBusy: true,
129      activeRoleGroup: null,
130      fields: [
131        {
132          key: 'checkbox',
133          sortable: false,
134        },
135        {
136          key: 'groupName',
137          sortable: true,
138          label: i18n.global.t('pageLdap.tableRoleGroups.groupName'),
139        },
140        {
141          key: 'groupPrivilege',
142          sortable: true,
143          label: i18n.global.t('pageLdap.tableRoleGroups.groupPrivilege'),
144        },
145        {
146          key: 'actions',
147          sortable: false,
148          label: '',
149          tdClass: 'text-right',
150        },
151      ],
152      batchActions: [
153        {
154          value: 'delete',
155          label: i18n.global.t('global.action.delete'),
156        },
157      ],
158      selectedRows: selectedRows,
159      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
160      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
161    };
162  },
163  computed: {
164    ...mapGetters('ldap', ['isServiceEnabled', 'enabledRoleGroups']),
165    tableItems() {
166      return this.enabledRoleGroups.map(({ LocalRole, RemoteGroup }) => {
167        return {
168          groupName: RemoteGroup,
169          groupPrivilege: LocalRole,
170          actions: [
171            {
172              value: 'edit',
173              title: i18n.global.t('global.action.edit'),
174              enabled: this.isServiceEnabled,
175            },
176            {
177              value: 'delete',
178              title: i18n.global.t('global.action.delete'),
179              enabled: this.isServiceEnabled,
180            },
181          ],
182        };
183      });
184    },
185  },
186  created() {
187    this.$store.dispatch('userManagement/getAccountRoles').finally(() => {
188      this.isBusy = false;
189    });
190  },
191  methods: {
192    onBatchAction() {
193      this.$bvModal
194        .msgBoxConfirm(
195          i18n.global.t(
196            'pageLdap.modal.deleteRoleGroupBatchConfirmMessage',
197            this.selectedRows.length,
198          ),
199          {
200            title: i18n.global.t('pageLdap.modal.deleteRoleGroup'),
201            okTitle: i18n.global.t('global.action.delete'),
202            cancelTitle: i18n.global.t('global.action.cancel'),
203            autoFocusButton: 'ok',
204          },
205        )
206        .then((deleteConfirmed) => {
207          if (deleteConfirmed) {
208            this.startLoader();
209            this.$store
210              .dispatch('ldap/deleteRoleGroup', {
211                roleGroups: this.selectedRows,
212              })
213              .then((success) => this.successToast(success))
214              .catch(({ message }) => this.errorToast(message))
215              .finally(() => this.endLoader());
216          }
217        });
218    },
219    onTableRowAction(action, row) {
220      switch (action) {
221        case 'edit':
222          this.initRoleGroupModal(row);
223          break;
224        case 'delete':
225          this.$bvModal
226            .msgBoxConfirm(
227              i18n.global.t('pageLdap.modal.deleteRoleGroupConfirmMessage', {
228                groupName: row.groupName,
229              }),
230              {
231                title: i18n.global.t('pageLdap.modal.deleteRoleGroup'),
232                okTitle: i18n.global.t('global.action.delete'),
233                cancelTitle: i18n.global.t('global.action.cancel'),
234                autoFocusButton: 'ok',
235              },
236            )
237            .then((deleteConfirmed) => {
238              if (deleteConfirmed) {
239                this.startLoader();
240                this.$store
241                  .dispatch('ldap/deleteRoleGroup', { roleGroups: [row] })
242                  .then((success) => this.successToast(success))
243                  .catch(({ message }) => this.errorToast(message))
244                  .finally(() => this.endLoader());
245              }
246            });
247          break;
248      }
249    },
250    initRoleGroupModal(roleGroup) {
251      this.activeRoleGroup = roleGroup;
252      this.$bvModal.show('modal-role-group');
253    },
254    saveRoleGroup({ addNew, groupName, groupPrivilege }) {
255      this.activeRoleGroup = null;
256      const data = { groupName, groupPrivilege };
257      this.startLoader();
258      if (addNew) {
259        this.$store
260          .dispatch('ldap/addNewRoleGroup', data)
261          .then((success) => this.successToast(success))
262          .catch(({ message }) => this.errorToast(message))
263          .finally(() => this.endLoader());
264      } else {
265        this.$store
266          .dispatch('ldap/saveRoleGroup', data)
267          .then((success) => this.successToast(success))
268          .catch(({ message }) => this.errorToast(message))
269          .finally(() => this.endLoader());
270      }
271    },
272  },
273};
274</script>
275