Role Management

The Pro theme allows you to add user roles. By default, the theme comes with Admin, Creator and Member roles. To access the role management example click the "Examples/Roles" link in the left sidebar or add /examples/roles/list to the URL. Here you can add/edit new roles. To add a new role, click the "Add role" button. To edit an existing role, click the "Edit" icon (available on every table row). In both cases, you will be directed to a form which allows you to modify the name and description of a role.

The store used for role functionality is found in src\store\role.module.js

You can find the compoments for role functionality in src\views\examples\Roles folder.

Roles Component

<template>
  <div class="py-4 container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="pb-0 card-header">
            <div class="d-lg-flex">
              <div>
                <h5 class="mb-0">Roles List</h5>
              </div>
              <div class="my-auto mt-4 ms-auto mt-lg-0">
                <div class="my-auto ms-auto">
                  <a href="./new" class="mb-0 btn bg-gradient-success btn-sm"
                    >+&nbsp; New Role</a
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="px-0 pb-0 card-body">
            <div class="table-responsive">
              <table id="roles-list" ref="rolesList" class="table table-flush">
                <thead class="thead-light">
                  <tr>
                    <th title="name">Name</th>
                    <th title="created_at">Created At</th>
                    <th data-sortable="false">Action</th>
                  </tr>
                </thead>
                <tbody class="text-sm">
                </tbody>
                <tfoot>
                  <tr>
                    <th>Name</th>
                    <th>Create at</th>
                    <th>Action</th>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
          <div
            class="d-flex justify-content-center justify-content-sm-between flex-wrap"
          >
            <div class="ms-3">
              <p>
                Showing {{ pagination?.from }} to {{ pagination?.to }} of
                {{ pagination?.total }} entries
              </p>
            </div>
            <BasePagination
              class="pagination-success pagination-md me-3"
              :per-page="pagination?.perPage"
              :value="pagination?.currentPage"
              :total="pagination?.total"
              @click="getDataFromPage($event)"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { DataTable } from "simple-datatables";
import BasePagination from "/src/components/BasePagination.vue";
import eventTable from "/src/mixins/eventTable.js";
import store from "/src/store";
import _ from "lodash";

var currentQuery = "";
var currentPerPage = 10;
var currentPage = 1;
var currentSort = "created_at";
var loading = require("/src/assets/img/loading.gif");

const getRolesList = _.debounce(async function (params) {
  await store.dispatch("roles/getRoles", {
    ...(params.sort ? { sort: params.sort } : {}),
    filter: {
      ...(params.query ? { name: params.query } : {}),
    },
    page: {
      number: params.nr,
      size: params.perpage,
    },
  });
}, 300);

export default {
  name: "Roles",
  components: {
    BasePagination,
  },
  mixins: [eventTable],
  data() {
    return {
      rolesAux: [],
      pagination: {},
      tableRoles: null,
    };
  },
  computed: {
    rolesList() {
      return this.$store.getters["roles/roles"]?.data;
    },
    metaPage() {
      return this.$store.getters["roles/roles"]?.meta;
    },
  },
  watch: {
    metaPage: {
      handler: "reactivePagination",
      immediate: false,
      deep: true,
    },
    rolesList: {
      handler: "reactiveTable",
      immediate: false,
      deep: true,
    },
  },

  async mounted() {
    if (this.$refs.rolesList) {
      this.tableRoles = new DataTable(this.$refs.rolesList, {
        fixedHeight: false,
      });

      document.querySelector(".dataTable-bottom").remove();
      this.tableRoles.label = null;
      this.tableRoles.setMessage(
        `<img src="${loading}" width="100" height="100" alt="loading" />`
      );

      await getRolesList({
        query: currentQuery,
        perpage: currentPerPage,
        nr: currentPage,
        sort: currentSort,
      });

      this.tableRoles.on("datatable.perpage", async function (perpage) {
        this.setMessage(
          `<img src="${loading}" width="100" height="100" alt="loading" />`
        );
        await getRolesList({
          query: currentQuery,
          perpage: (currentPerPage = perpage),
          nr: (currentPage = 1),
          sort: currentSort,
        });
      });

      this.tableRoles.on("datatable.sort", async function (column, direction) {
        this.setMessage(
          `<img src="${loading}" width="100" height="100" alt="loading" />`
        );
        direction = direction == "asc" ? "" : "-";
        column = this.headings[column].title;
        await getRolesList({
          query: currentQuery,
          perpage: currentPerPage,
          nr: currentPage,
          sort: (currentSort = direction + column),
        });
      });

      // eslint-disable-next-line no-unused-vars
      this.tableRoles.on("datatable.search", async function (query, matched) {
        this.setMessage(
          `<img src="${loading}" width="100" height="100" alt="loading" />`
        );
        await getRolesList({
          query: (currentQuery = query),
          perpage: currentPerPage,
          nr: (currentPage = 1),
          sort: currentSort,
        });
      });
    }
  },

  beforeUnmount() {
    currentQuery = "";
    currentPerPage = 10;
    currentPage = 1;
    currentSort = "created_at";
  },

  methods: {
    async getDataFromPage(page) {
      await getRolesList({
        query: currentQuery,
        perpage: currentPerPage,
        nr: (currentPage = page),
        sort: currentSort,
      });
    },

    async reactivePagination() {
      this.pagination = this.metaPage?.page;
    },

    async reactiveTable() {
      this.rolesAux = [];
      if (this.rolesList?.length > 0) {
        this.rolesList.forEach((row) => {
          this.rolesAux.push([
            `<h6 class="my-auto">${row.name}</h6>`,
            row.created_at,
            this.actionEditButton(row.id, "Edit Role") +
              this.actionDeleteButton(row.id, "Delete Role"),
          ]);
        });
        this.tableRoles.data = [];
        this.tableRoles.refresh();
        document.querySelector(".dataTable-input").value = currentQuery;
        this.tableRoles.insert({ data: this.rolesAux });
        this.removeEvent();
        this.eventToCall({
          table: this.tableRoles,
          redirectPath: "Edit Role",
          deletePath: "roles/deleteRole",
          getPath: "roles/getRoles",
          textDelete: "Role deleted successfully!",
          textDefaultData: "roles",
          textDeleteError: "This role still has associated users.",
          params: {
            query: currentQuery,
            perpage: currentPerPage,
            nr: currentPage,
            sort: currentSort,
          },
        });
      } else {
        this.tableRoles.setMessage("No results match your search query");
      }
    },
  },
};
</script>

1<template>
2  <div class="py-4 container-fluid">
3    <div class="row">
4      <div class="col-12">
5        <div class="card">
6          <div class="pb-0 card-header">
7            <div class="d-lg-flex">
8              <div>
9                <h5 class="mb-0">Roles List</h5>
10              </div>
11              <div class="my-auto mt-4 ms-auto mt-lg-0">
12                <div class="my-auto ms-auto">
13                  <a href="./new" class="mb-0 btn bg-gradient-success btn-sm"
14                    >+&nbsp; New Role</a
15                  >
16                </div>
17              </div>
18            </div>
19          </div>
20          <div class="px-0 pb-0 card-body">
21            <div class="table-responsive">
22              <table id="roles-list" ref="rolesList" class="table table-flush">
23                <thead class="thead-light">
24                  <tr>
25                    <th title="name">Name</th>
26                    <th title="created_at">Created At</th>
27                    <th data-sortable="false">Action</th>
28                  </tr>
29                </thead>
30                <tbody class="text-sm">
31                </tbody>
32                <tfoot>
33                  <tr>
34                    <th>Name</th>
35                    <th>Create at</th>
36                    <th>Action</th>
37                  </tr>
38                </tfoot>
39              </table>
40            </div>
41          </div>
42          <div
43            class="d-flex justify-content-center justify-content-sm-between flex-wrap"
44          >
45            <div class="ms-3">
46              <p>
47                Showing {{ pagination?.from }} to {{ pagination?.to }} of
48                {{ pagination?.total }} entries
49              </p>
50            </div>
51            <BasePagination
52              class="pagination-success pagination-md me-3"
53              :per-page="pagination?.perPage"
54              :value="pagination?.currentPage"
55              :total="pagination?.total"
56              @click="getDataFromPage($event)"
57            />
58          </div>
59        </div>
60      </div>
61    </div>
62  </div>
63</template>
64
65<script>
66import { DataTable } from "simple-datatables";
67import BasePagination from "/src/components/BasePagination.vue";
68import eventTable from "/src/mixins/eventTable.js";
69import store from "/src/store";
70import _ from "lodash";
71
72var currentQuery = "";
73var currentPerPage = 10;
74var currentPage = 1;
75var currentSort = "created_at";
76var loading = require("/src/assets/img/loading.gif");
77
78const getRolesList = _.debounce(async function (params) {
79  await store.dispatch("roles/getRoles", {
80    ...(params.sort ? { sort: params.sort } : {}),
81    filter: {
82      ...(params.query ? { name: params.query } : {}),
83    },
84    page: {
85      number: params.nr,
86      size: params.perpage,
87    },
88  });
89}, 300);
90
91export default {
92  name: "Roles",
93  components: {
94    BasePagination,
95  },
96  mixins: [eventTable],
97  data() {
98    return {
99      rolesAux: [],
100      pagination: {},
101      tableRoles: null,
102    };
103  },
104  computed: {
105    rolesList() {
106      return this.$store.getters["roles/roles"]?.data;
107    },
108    metaPage() {
109      return this.$store.getters["roles/roles"]?.meta;
110    },
111  },
112  watch: {
113    metaPage: {
114      handler: "reactivePagination",
115      immediate: false,
116      deep: true,
117    },
118    rolesList: {
119      handler: "reactiveTable",
120      immediate: false,
121      deep: true,
122    },
123  },
124
125  async mounted() {
126    if (this.$refs.rolesList) {
127      this.tableRoles = new DataTable(this.$refs.rolesList, {
128        fixedHeight: false,
129      });
130
131      document.querySelector(".dataTable-bottom").remove();
132      this.tableRoles.label = null;
133      this.tableRoles.setMessage(
134        `<img src="${loading}" width="100" height="100" alt="loading" />`
135      );
136
137      await getRolesList({
138        query: currentQuery,
139        perpage: currentPerPage,
140        nr: currentPage,
141        sort: currentSort,
142      });
143
144      this.tableRoles.on("datatable.perpage", async function (perpage) {
145        this.setMessage(
146          `<img src="${loading}" width="100" height="100" alt="loading" />`
147        );
148        await getRolesList({
149          query: currentQuery,
150          perpage: (currentPerPage = perpage),
151          nr: (currentPage = 1),
152          sort: currentSort,
153        });
154      });
155
156      this.tableRoles.on("datatable.sort", async function (column, direction) {
157        this.setMessage(
158          `<img src="${loading}" width="100" height="100" alt="loading" />`
159        );
160        direction = direction == "asc" ? "" : "-";
161        column = this.headings[column].title;
162        await getRolesList({
163          query: currentQuery,
164          perpage: currentPerPage,
165          nr: currentPage,
166          sort: (currentSort = direction + column),
167        });
168      });
169
170      // eslint-disable-next-line no-unused-vars
171      this.tableRoles.on("datatable.search", async function (query, matched) {
172        this.setMessage(
173          `<img src="${loading}" width="100" height="100" alt="loading" />`
174        );
175        await getRolesList({
176          query: (currentQuery = query),
177          perpage: currentPerPage,
178          nr: (currentPage = 1),
179          sort: currentSort,
180        });
181      });
182    }
183  },
184
185  beforeUnmount() {
186    currentQuery = "";
187    currentPerPage = 10;
188    currentPage = 1;
189    currentSort = "created_at";
190  },
191
192  methods: {
193    async getDataFromPage(page) {
194      await getRolesList({
195        query: currentQuery,
196        perpage: currentPerPage,
197        nr: (currentPage = page),
198        sort: currentSort,
199      });
200    },
201
202    async reactivePagination() {
203      this.pagination = this.metaPage?.page;
204    },
205
206    async reactiveTable() {
207      this.rolesAux = [];
208      if (this.rolesList?.length > 0) {
209        this.rolesList.forEach((row) => {
210          this.rolesAux.push([
211            `<h6 class="my-auto">${row.name}</h6>`,
212            row.created_at,
213            this.actionEditButton(row.id, "Edit Role") +
214              this.actionDeleteButton(row.id, "Delete Role"),
215          ]);
216        });
217        this.tableRoles.data = [];
218        this.tableRoles.refresh();
219        document.querySelector(".dataTable-input").value = currentQuery;
220        this.tableRoles.insert({ data: this.rolesAux });
221        this.removeEvent();
222        this.eventToCall({
223          table: this.tableRoles,
224          redirectPath: "Edit Role",
225          deletePath: "roles/deleteRole",
226          getPath: "roles/getRoles",
227          textDelete: "Role deleted successfully!",
228          textDefaultData: "roles",
229          textDeleteError: "This role still has associated users.",
230          params: {
231            query: currentQuery,
232            perpage: currentPerPage,
233            nr: currentPage,
234            sort: currentSort,
235          },
236        });
237      } else {
238        this.tableRoles.setMessage("No results match your search query");
239      }
240    },
241  },
242};
243</script>
244
245