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';
111
112export default {
113  components: {
114    Alert,
115    IconAdd,
116    IconEdit,
117    IconTrashcan,
118    ModalAddRoleGroup,
119    TableRowAction,
120    TableToolbar,
121  },
122  mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin],
123  data() {
124    return {
125      isBusy: true,
126      activeRoleGroup: null,
127      fields: [
128        {
129          key: 'checkbox',
130          sortable: false,
131        },
132        {
133          key: 'groupName',
134          sortable: true,
135          label: this.$t('pageLdap.tableRoleGroups.groupName'),
136        },
137        {
138          key: 'groupPrivilege',
139          sortable: true,
140          label: this.$t('pageLdap.tableRoleGroups.groupPrivilege'),
141        },
142        {
143          key: 'actions',
144          sortable: false,
145          label: '',
146          tdClass: 'text-right',
147        },
148      ],
149      batchActions: [
150        {
151          value: 'delete',
152          label: this.$t('global.action.delete'),
153        },
154      ],
155      selectedRows: selectedRows,
156      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
157      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
158    };
159  },
160  computed: {
161    ...mapGetters('ldap', ['isServiceEnabled', 'enabledRoleGroups']),
162    tableItems() {
163      return this.enabledRoleGroups.map(({ LocalRole, RemoteGroup }) => {
164        return {
165          groupName: RemoteGroup,
166          groupPrivilege: LocalRole,
167          actions: [
168            {
169              value: 'edit',
170              title: this.$t('global.action.edit'),
171              enabled: this.isServiceEnabled,
172            },
173            {
174              value: 'delete',
175              title: this.$t('global.action.delete'),
176              enabled: this.isServiceEnabled,
177            },
178          ],
179        };
180      });
181    },
182  },
183  created() {
184    this.$store.dispatch('userManagement/getAccountRoles').finally(() => {
185      this.isBusy = false;
186    });
187  },
188  methods: {
189    onBatchAction() {
190      this.$bvModal
191        .msgBoxConfirm(
192          this.$tc(
193            'pageLdap.modal.deleteRoleGroupBatchConfirmMessage',
194            this.selectedRows.length,
195          ),
196          {
197            title: this.$t('pageLdap.modal.deleteRoleGroup'),
198            okTitle: this.$t('global.action.delete'),
199            cancelTitle: this.$t('global.action.cancel'),
200            autoFocusButton: 'ok',
201          },
202        )
203        .then((deleteConfirmed) => {
204          if (deleteConfirmed) {
205            this.startLoader();
206            this.$store
207              .dispatch('ldap/deleteRoleGroup', {
208                roleGroups: this.selectedRows,
209              })
210              .then((success) => this.successToast(success))
211              .catch(({ message }) => this.errorToast(message))
212              .finally(() => this.endLoader());
213          }
214        });
215    },
216    onTableRowAction(action, row) {
217      switch (action) {
218        case 'edit':
219          this.initRoleGroupModal(row);
220          break;
221        case 'delete':
222          this.$bvModal
223            .msgBoxConfirm(
224              this.$t('pageLdap.modal.deleteRoleGroupConfirmMessage', {
225                groupName: row.groupName,
226              }),
227              {
228                title: this.$t('pageLdap.modal.deleteRoleGroup'),
229                okTitle: this.$t('global.action.delete'),
230                cancelTitle: this.$t('global.action.cancel'),
231                autoFocusButton: 'ok',
232              },
233            )
234            .then((deleteConfirmed) => {
235              if (deleteConfirmed) {
236                this.startLoader();
237                this.$store
238                  .dispatch('ldap/deleteRoleGroup', { roleGroups: [row] })
239                  .then((success) => this.successToast(success))
240                  .catch(({ message }) => this.errorToast(message))
241                  .finally(() => this.endLoader());
242              }
243            });
244          break;
245      }
246    },
247    initRoleGroupModal(roleGroup) {
248      this.activeRoleGroup = roleGroup;
249      this.$bvModal.show('modal-role-group');
250    },
251    saveRoleGroup({ addNew, groupName, groupPrivilege }) {
252      this.activeRoleGroup = null;
253      const data = { groupName, groupPrivilege };
254      this.startLoader();
255      if (addNew) {
256        this.$store
257          .dispatch('ldap/addNewRoleGroup', data)
258          .then((success) => this.successToast(success))
259          .catch(({ message }) => this.errorToast(message))
260          .finally(() => this.endLoader());
261      } else {
262        this.$store
263          .dispatch('ldap/saveRoleGroup', data)
264          .then((success) => this.successToast(success))
265          .catch(({ message }) => this.errorToast(message))
266          .finally(() => this.endLoader());
267      }
268    },
269  },
270};
271</script>
272