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