MasterClass/resources/app/backoffice/admin/user_role.js

class UserRole {
  constructor() {
    this._table = this._prepTbl();
    this._prepBtn();
    this._form = document.querySelector("#userRoleForm");
    this._initEventListeners();
  }

  _prepTbl() {
    const dtable = $('#user_role_list').DataTable({
      "autoWidth": false,
      "responsive": true,
      "processing": true, //Feature control the processing indicator.
      "order": [0], //Initial no order.
      "oLanguage": fr_onload_lang.oLanguage,
      "serverSide": true,
      "ajax": {
        url: app.get_vars().baseurl+"user_role/fetch",
        type: "POST"
      },
      "columnDefs":[
        {
          "targets":[0],
          "visible": false,
          "searchable": false
        }
      ],
      "columns": [
          // { "data": "event_order" },
          { "data": "role_id", render : function(data, type, full, meta){
            return full.role_id;
          }},
          { "data": "name", render : function(data, type, full, meta){
              return full.name;
          }},
          { "data": "action" , "orderable": false, render : function(data, type, full, meta) {
            let btns = "";
            if (authorize(PAGE_CODE['sys_settings'], PRIVS[PAGE_CODE['sys_settings']]['user_role_edit'])) {
              btns += `<button class="btn btn-primary btn-xs" id="toggle-edit-modal" data-role-id="${full.role_id}" data-role="${full.name}" data-privs='${full.privs}'><i class="fa fa-edit"></i> Edit</button>`;
            }

            if (authorize(PAGE_CODE['sys_settings'], PRIVS[PAGE_CODE['sys_settings']]['user_role_delete'])) {
              btns += `&nbsp;&nbsp;<button class="btn btn-primary btn-xs" id="delete-role" data-role-id="${full.role_id}" data-role="${full.name}"><i class="fa fa-remove"></i> Delete</button>`;
            }
            return btns;
          }
          },
          { "data": "privs", render : function(data, type, full, meta){
            let privs = JSON.parse(full.privs);
            let privTbl = `<div class="row">`;
            Object.getOwnPropertyNames(privs).forEach(key => {
              if (key !== 'misc') {
                if (privs[key].length === 0) {
                  return;
                }
                privTbl += `<div class="table-responsive">`;
                privTbl += `<table class="table table-bordered"><tbody>`;
                privTbl += `<tr><td width="200px">${PAGE_NAME[key]}</td>`;
                privTbl += `<td>`;
                privTbl += `<ul>`;
                for (let i = 0; i < privs[key].length; i++ ) {
                  // Do not display user role action "19 - Access configuration du système page"
                  if (key == 'sys_set' && privs[key][i] == 18) {
                    continue;
                  }
                  privTbl += `<li>${PRIV_DESC[key+privs[key][i]]}</li>`;
                }
                privTbl += `</ul>`;
                privTbl += `</td>`;
                privTbl += `</tr>`;
                privTbl += `</tbody></table>`;
                privTbl += `</div>`;
              }
            });
            privTbl += `</div>`;
            return privTbl;
          }},
      ],
    });
    return dtable;
  }

  _prepBtn () {
    /*Create the toggle add modal button */
    const btnHolder = document.getElementsByClassName("dataTables_filter")[0];
    const btn = document.createElement('button');
    btn.setAttribute("class", "btn btn-primary btn-sm");
    btn.setAttribute("type", "button");
    btn.setAttribute("style", "margin-left: 4px");
    /* Create button text */
    const btnTxt = document.createElement("span");
    btnTxt.setAttribute("class", "glyphicon glyphicon-plus");
    btn.appendChild(btnTxt);
    btn.appendChild(document.createTextNode(" Add user role"));
    btnHolder.appendChild(btn);

    this._addBtn = btn;
  }

  _initEventListeners() {
    const submitForm = document.querySelector("#save-user-role");
    const userRoleObj = this;

    submitForm.addEventListener('click', () => {
      app.modal.confirm_box({
        "title": "Confirmer Action",
        "message": '<p style="text-align: justify">Enregistrez les changements ?</p>',
        "_continue": function() {
          userRoleObj.saveRole();
        },
        "id": "user_role_conf_modal",
        "className": "user_role_conf_modal"
      });
    });

    $(document).on('click', '#delete-role', function() {
      if(USER_ROLE == this.dataset.roleId) {
        app._notify('warning', 'Cannot delete own user role');
      } else {
        userRoleObj.deleteRole(this.dataset.roleId, this.dataset.role)
      }
    });

    this._addBtn.addEventListener('click', () => {
      this._form.reset();
      /* Set modal title*/
      $('#userRoleModalTitle').html("Ajouter un nouveau rôle d'utilisateur");
      /* remove role id */
      $('input#role_id').remove();
      $('#userRoleModal').modal("show");
    });

    /* Edit user role modal */
    let form = this._form;
    $(document).on('click', '#toggle-edit-modal', function(event) {
      event.preventDefault();
      if(USER_ROLE == this.dataset.roleId) {
        app._notify('warning', 'Cannot edit own user role');
      } else {
        /* Act on the event */
        $('#userRoleModalTitle').html("Modifier le rôle de l'utilisateur");
        $('#userRoleModal').modal("show");

        /* Add the role id */
        $(`#${form.id}`).append(`<input type="hidden" name="role_id" id="role_id" value="${this.dataset.roleId}" />`);
        /* Check all that match the user privileges*/
        form.reset();
        $('input#role').val(this.dataset.role);
        const privs = JSON.parse(this.dataset.privs);
        Object.getOwnPropertyNames(privs).forEach(key => {
          privs[key].forEach((el) => {
            let privName = key+el;
            $(`#${privName}`).prop("checked", true);
          });
          //use key and value here
        });
        $(`[type=checkbox]`).trigger("change");
      }
    });
  }

  verifyRolePageAccess( page ) {
    // These are the menu sidebar in BO page that have submenu/subpages
    const pages = ['email', 'sys_set', 'pers'];

    return pages.includes(page)
  }

  saveRole() {
    let formData = new FormData(document.querySelector("#userRoleForm"));
    let data = {
      privs: {}
    };

    this.verifyRolePageAccess()
    /* Store privileges per section in an array, store everything else as string */
    for (let [key, value] of formData.entries()) {
      if (["role", "role_id"].indexOf(key) != -1) {
        data[key] = value;
      } else {
        if (!(data.privs[key] instanceof Array)) {
          data.privs[key] = [];
        }

        /**
         * This is the remedy to pages that have submenu, when no page is assigned to a role,
         * Meaning All the submenu is not accessible,the main menu as well should not be displayed.
         *
         * This is applicable to this main menu ['email', 'sys_set', 'pers']
         *
         * email = (page = 8)
         * sys_set = (page = 18)
         * pers = (view = 0)
         */
        if ( this.verifyRolePageAccess(key) && !data.privs[key].includes(value) ) {
          let val = 18
          if ( key === 'email') val = 8
          else if (key === 'pers') val = 0

          data.privs[key].push(parseInt(val))
        }

        data.privs[key].push(parseInt(value));
      }
    }
    let table = this._table;
    let form = this._form;

    let url = app.get_vars().baseurl+"user_role/add";
    if (data.role_id) {
      url = app.get_vars().baseurl+"user_role/update";
    }
    $.ajax({
      url : url,
      data : data,
      type: "POST",
      success : function(response) {
          app._notify(response.mtype, response.message);
          if (response.mtype == 'success') {
            table.ajax.reload();
            form.reset();
            $('#userRoleModal').modal("hide");
          }
      }
    });
  }

  deleteRole (roleId, roleName) {

    app.modal.confirm_box({
      "message" : "Delete user role "+" <b>"+roleName+"</b>?<br/><br><span class='label label-danger' style='font-size: 12px;'>"+app.get_vars()._app.cma_msg.note+"</span>",
      "_continue" : function() {
        $.ajax({
          "url" : app.get_vars().baseurl+"user_role/delete",
          "type" : "POST",
          "dataType" : "json",
          "data" : { "roleId" : roleId },
          "success" : function(result){
            if(app.isalive(result)) {
              app._notify(result.mtype, result.message);
              $('#user_role_list').DataTable().ajax.reload(null, false);
            }
          }
        });
      },
      "id" : "delete_confirm_box",
      "className" : "delete_confirm_box"
    });
  }
}

if (authorize(PAGE_CODE['sys_settings'], PRIVS[PAGE_CODE['sys_settings']]['user_role_view']))
{
  const userRole = new UserRole();

  $('[type=checkbox].readonly').on('click', function() {
    return false;
  });

  /* Check clicked priv for checkboxes that depend on it */
  $('[type=checkbox].priv-with-depend-dependency, .priv-with-dependency').on('click change', function() {
    let elWithDepend = $(`[data-depend-id=${this.id}]`).toArray();
    let checked = this.checked;
    /* Disable/Enable dependency based on checked property */
    if (!checked || this.hasAttribute("readonly")) {
      elWithDepend.forEach((el) => {
        /* Set element to readonly if this element is unchecked*/
        el.setAttribute("readonly", "readonly");
        /* Trigger change event on dependent element to change status of sub dependencies*/
        $("#" + el.id).trigger("change");
      });
    } else {
      elWithDepend.forEach((el) => {
        el.removeAttribute("readonly", "readonly");
        $("#" + el.id).trigger("change");
      });
    }
  });

  /* Check clicked priv for dependencies */
  $(document).on('click', '.priv-with-depend', function() {
    if (this.dataset && this.dataset.dependId) {
      let dependEl = $(`#${this.dataset.dependId}`);
      if (dependEl.prop("checked") === false || dependEl.attr("readonly")) {
        app._notify("info", `This depends on "${PRIV_DESC[this.dataset.dependId]}" privilege.`);
        return false;
      }
    }
  });

}