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