src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue

<template>
  <div>
    <b-row>
      <b-col md="9">
        <alert :show="isServiceEnabled === false" variant="info">
          {{ $t('pageLdap.tableRoleGroups.alertContent') }}
        </alert>
      </b-col>
    </b-row>
    <b-row>
      <b-col class="text-end" md="9">
        <b-btn
          variant="primary"
          :disabled="!isServiceEnabled"
          @click="initRoleGroupModal(null)"
        >
          <icon-add />
          {{ $t('pageLdap.addRoleGroup') }}
        </b-btn>
      </b-col>
    </b-row>
    <b-row>
      <b-col md="9">
        <table-toolbar
          ref="toolbar"
          :selected-items-count="
            Array.isArray(selectedRows) ? selectedRows.length : 0
          "
          :actions="batchActions"
          @clear-selected="clearSelectedRows($refs.table)"
          @batch-action="onBatchAction"
        />
        <b-table
          ref="table"
          responsive
          selectable
          show-empty
          no-select-on-click
          hover
          must-sort
          sort-icon-left
          thead-class="table-light"
          :busy="isBusy"
          :items="tableItems"
          :fields="fields"
          :empty-text="$t('global.table.emptyMessage')"
          @row-selected="onRowSelected($event, tableItems.length)"
        >
          <!-- Checkbox column -->
          <template #head(checkbox)>
            <b-form-checkbox
              v-model="tableHeaderCheckboxModel"
              :indeterminate="tableHeaderCheckboxIndeterminate"
              :disabled="!isServiceEnabled"
              @change="onChangeHeaderCheckbox($refs.table, $event)"
            >
              <span class="visually-hidden-focusable">
                {{ $t('global.table.selectAll') }}
              </span>
            </b-form-checkbox>
          </template>
          <template #cell(checkbox)="row">
            <b-form-checkbox
              v-model="row.rowSelected"
              :disabled="!isServiceEnabled"
              @change="toggleSelectRow($refs.table, row.index)"
            >
              <span class="visually-hidden-focusable">
                {{ $t('global.table.selectItem') }}
              </span>
            </b-form-checkbox>
          </template>

          <!-- table actions column -->
          <template #cell(actions)="{ item }">
            <table-row-action
              v-for="(action, index) in item.actions"
              :key="index"
              :value="action.value"
              :enabled="action.enabled"
              :title="action.title"
              @click-table-action="onTableRowAction($event, item)"
            >
              <template #icon>
                <icon-edit v-if="action.value === 'edit'" />
                <icon-trashcan v-if="action.value === 'delete'" />
              </template>
            </table-row-action>
          </template>
        </b-table>
      </b-col>
    </b-row>
    <modal-add-role-group
      v-model="showRoleGroupModal"
      :role-group="activeRoleGroup"
      @ok="saveRoleGroup"
      @hidden="activeRoleGroup = null"
    />
  </div>
</template>

<script>
import IconEdit from '@carbon/icons-vue/es/edit/20';
import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
import IconAdd from '@carbon/icons-vue/es/add--alt/20';
import { mapGetters } from 'vuex';

import Alert from '@/components/Global/Alert';
import TableToolbar from '@/components/Global/TableToolbar';
import TableRowAction from '@/components/Global/TableRowAction';
import BVTableSelectableMixin, {
  selectedRows,
  tableHeaderCheckboxModel,
  tableHeaderCheckboxIndeterminate,
} from '@/components/Mixins/BVTableSelectableMixin';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import ModalAddRoleGroup from './ModalAddRoleGroup';
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
import { useI18n } from 'vue-i18n';
import i18n from '@/i18n';
import { useModal } from 'bootstrap-vue-next';

export default {
  components: {
    Alert,
    IconAdd,
    IconEdit,
    IconTrashcan,
    ModalAddRoleGroup,
    TableRowAction,
    TableToolbar,
  },
  mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin],
  setup() {
    const bvModal = useModal();
    return { bvModal };
  },
  data() {
    return {
      $t: useI18n().t,
      isBusy: true,
      activeRoleGroup: null,
      showRoleGroupModal: false,
      fields: [
        {
          key: 'checkbox',
          sortable: false,
        },
        {
          key: 'groupName',
          sortable: true,
          label: i18n.global.t('pageLdap.tableRoleGroups.groupName'),
        },
        {
          key: 'groupPrivilege',
          sortable: true,
          label: i18n.global.t('pageLdap.tableRoleGroups.groupPrivilege'),
        },
        {
          key: 'actions',
          sortable: false,
          label: '',
          tdClass: 'text-end',
        },
      ],
      batchActions: [
        {
          value: 'delete',
          label: i18n.global.t('global.action.delete'),
        },
      ],
      selectedRows: selectedRows,
      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
    };
  },
  computed: {
    ...mapGetters('ldap', ['isServiceEnabled', 'enabledRoleGroups']),
    tableItems() {
      return this.enabledRoleGroups.map(({ LocalRole, RemoteGroup }) => {
        return {
          groupName: RemoteGroup,
          groupPrivilege: LocalRole,
          actions: [
            {
              value: 'edit',
              title: i18n.global.t('global.action.edit'),
              enabled: this.isServiceEnabled,
            },
            {
              value: 'delete',
              title: i18n.global.t('global.action.delete'),
              enabled: this.isServiceEnabled,
            },
          ],
        };
      });
    },
  },
  created() {
    this.$store.dispatch('userManagement/getAccountRoles').finally(() => {
      this.isBusy = false;
    });
  },
  methods: {
    onBatchAction() {
      const count = this.selectedRows.length;
      this.confirmDialog(
        i18n.global.t(
          'pageLdap.modal.deleteRoleGroupBatchConfirmMessage',
          count,
        ),
        {
          title: i18n.global.t('pageLdap.modal.deleteRoleGroup'),
          okTitle: i18n.global.t('global.action.delete'),
          cancelTitle: i18n.global.t('global.action.cancel'),
          autoFocusButton: 'ok',
        },
      ).then((deleteConfirmed) => {
        if (deleteConfirmed) {
          this.startLoader();
          this.$store
            .dispatch('ldap/deleteRoleGroup', {
              roleGroups: this.selectedRows,
            })
            .then((success) => this.successToast(success))
            .catch(({ message }) => this.errorToast(message))
            .finally(() => this.endLoader());
        }
      });
    },
    onTableRowAction(action, row) {
      switch (action) {
        case 'edit':
          this.initRoleGroupModal(row);
          break;
        case 'delete':
          this.confirmDialog(
            i18n.global.t('pageLdap.modal.deleteRoleGroupConfirmMessage', {
              groupName: row.groupName,
            }),
            {
              title: i18n.global.t('pageLdap.modal.deleteRoleGroup'),
              okTitle: i18n.global.t('global.action.delete'),
              cancelTitle: i18n.global.t('global.action.cancel'),
              autoFocusButton: 'ok',
            },
          ).then((deleteConfirmed) => {
            if (deleteConfirmed) {
              this.startLoader();
              this.$store
                .dispatch('ldap/deleteRoleGroup', {
                  roleGroups: [row],
                })
                .then((success) => this.successToast(success))
                .catch(({ message }) => this.errorToast(message))
                .finally(() => this.endLoader());
            }
          });
          break;
      }
    },
    confirmDialog(message, options = {}) {
      return this.$confirm({ message, ...options });
    },
    initRoleGroupModal(roleGroup) {
      this.activeRoleGroup = roleGroup;
      this.showRoleGroupModal = true;
    },
    saveRoleGroup({ addNew, groupName, groupPrivilege }) {
      this.activeRoleGroup = null;
      const data = { groupName, groupPrivilege };
      this.startLoader();
      if (addNew) {
        this.$store
          .dispatch('ldap/addNewRoleGroup', data)
          .then((success) => this.successToast(success))
          .catch(({ message }) => this.errorToast(message))
          .finally(() => this.endLoader());
      } else {
        this.$store
          .dispatch('ldap/saveRoleGroup', data)
          .then((success) => this.successToast(success))
          .catch(({ message }) => this.errorToast(message))
          .finally(() => this.endLoader());
      }
    },
  },
};
</script>