Role Managemant

PRO

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 (API)/Role Management` link in the left sidebar or add /examples/role-management/list-roles 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 role icon from table. In both cases, you will be directed to a form which allows you to modify the name of a role.

You can find the compoments for role functionality in `src\views\examplesApi\RoleManagement` folder.
The store used for role functionality is found in `src\store\role.module.js` and you can find the service file in `src\services\role.service.js`.

Role List

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">Role List</h5>
10              </div>
11              <div class="my-auto mt-4 ms-auto mt-lg-0">
12                <div class="my-auto ms-auto">
13                  <router-link :to="{ name: 'Add Role' }" 
14                    class="mb-0 btn bg-gradient-success btn-sm">
15                      <i class="fa fa-plus me-1"/> Add Role
16                  </router-link>
17                </div>
18              </div>
19            </div>
20          </div>
21          <hr>
22          <div class="px-0 pb-0 card-body">
23            <div class="dataTable-search search-block">
24                <input v-model="search" class="dataTable-input search-input-table" placeholder="Search..." type="text">
25            </div>
26            <div class="table-responsive">
27              <table id="role-list" ref="roleList" class="table table-flush">
28                <thead class="thead-light">
29                  <tr>
30                    <th title="name">Name</th>
31                    <th title="created_at">Create at</th>
32                    <th data-sortable="false">Action</th>
33                  </tr>
34                </thead>
35                <tbody class="text-sm">
36                </tbody>
37                <tfoot>
38                  <tr>
39                    <th>Name</th>
40                    <th>Create at</th>
41                    <th>Action</th>
42                  </tr>
43                </tfoot>
44              </table>
45            </div>
46          </div>
47        </div>
48      </div>
49    </div>
50  </div>
51</template>

<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">Role List</h5>
              </div>
              <div class="my-auto mt-4 ms-auto mt-lg-0">
                <div class="my-auto ms-auto">
                  <router-link :to="{ name: 'Add Role' }" 
                    class="mb-0 btn bg-gradient-success btn-sm">
                      <i class="fa fa-plus me-1"/> Add Role
                  </router-link>
                </div>
              </div>
            </div>
          </div>
          <hr>
          <div class="px-0 pb-0 card-body">
            <div class="dataTable-search search-block">
                <input v-model="search" class="dataTable-input search-input-table" placeholder="Search..." type="text">
            </div>
            <div class="table-responsive">
              <table id="role-list" ref="roleList" class="table table-flush">
                <thead class="thead-light">
                  <tr>
                    <th title="name">Name</th>
                    <th title="created_at">Create 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>
      </div>
    </div>
  </div>
</template>