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(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 firs icon in last Actions section for selected row and 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 stores\RoleStore.js.

You can find the compoments for role functionality in pages\examples\role-management folder.

Roles Listing Component

<div class="card shadow-lg mx-4 p-3 mt-4">
    <div class="d-flex justify-content-between px-4 pt-3">
        <h5 class="font-weight-bolder mb-0">Roles List</h5>
        <button type="button" class="btn base-button btn-icon btn-fab btn-primary btn-sm"
            @click.prevent="router.push({ path: '/examples/role-management/add-role' })">
            <span class="btn-inner--text">Add Role</span>
        </button>
    </div>
    <div class="mt-4">
        <div class="table-responsive">
            <div class="dataTable-search search-block">
                <ArgonInput v-model="search" class="dataTable-input search-input-table" placeholder="Search..."
                    type="text" />
            </div>
            <table id="role-table" class="table table-flush">
                <thead class="thead-light">
                    <tr>
                        <th>NAME</th>
                        <th>CREATED AT</th>
                        <th data-sortable="false">ACTIONS</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="{ id, name, created_at } of pageItems" :key="id">
                        <td class="text-sm font-weight-normal">{{ name }}</td>
                        <td class="text-sm font-weight-normal">{{ created_at }}</td>
                        <td class="text-sm font-weight-normal">
                            <div class="d-flex align-items-center ms-auto">
                                <div class="cursor-pointer edit">
                                    <i :class="`fas fa-user-edit text-secondary edit-id`"></i>
                                </div>
                                <div class="mx-3 cursor-pointer delete">
                                    <i :class="`fas fa-trash text-secondary delete-id`"></i>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="d-flex justify-content-center justify-content-sm-between flex-wrap">
                <div class="ms-3">
                    <p>
                        Showing {{ pagination.total ? pagination?.from : 0 }} to {{ pagination?.to }} of
                        {{ pagination.total }} entries
                    </p>
                </div>
                <BasePagination v-model="pagination.currentPage" class="pagination-success pagination-md me-3"
                    :value="pagination.currentPage" :per-page="pagination.perPage" :total="pagination.total"
                    @click="handlePageChange($event)" />
            </div>
        </div>
    </div>
</div>

1<div class="card shadow-lg mx-4 p-3 mt-4">
2    <div class="d-flex justify-content-between px-4 pt-3">
3        <h5 class="font-weight-bolder mb-0">Roles List</h5>
4        <button type="button" class="btn base-button btn-icon btn-fab btn-primary btn-sm"
5            @click.prevent="router.push({ path: '/examples/role-management/add-role' })">
6            <span class="btn-inner--text">Add Role</span>
7        </button>
8    </div>
9    <div class="mt-4">
10        <div class="table-responsive">
11            <div class="dataTable-search search-block">
12                <ArgonInput v-model="search" class="dataTable-input search-input-table" placeholder="Search..."
13                    type="text" />
14            </div>
15            <table id="role-table" class="table table-flush">
16                <thead class="thead-light">
17                    <tr>
18                        <th>NAME</th>
19                        <th>CREATED AT</th>
20                        <th data-sortable="false">ACTIONS</th>
21                    </tr>
22                </thead>
23                <tbody>
24                    <tr v-for="{ id, name, created_at } of pageItems" :key="id">
25                        <td class="text-sm font-weight-normal">{{ name }}</td>
26                        <td class="text-sm font-weight-normal">{{ created_at }}</td>
27                        <td class="text-sm font-weight-normal">
28                            <div class="d-flex align-items-center ms-auto">
29                                <div class="cursor-pointer edit">
30                                    <i :class="`fas fa-user-edit text-secondary edit-id`"></i>
31                                </div>
32                                <div class="mx-3 cursor-pointer delete">
33                                    <i :class="`fas fa-trash text-secondary delete-id`"></i>
34                                </div>
35                            </div>
36                        </td>
37                    </tr>
38                </tbody>
39            </table>
40            <div class="d-flex justify-content-center justify-content-sm-between flex-wrap">
41                <div class="ms-3">
42                    <p>
43                        Showing {{ pagination.total ? pagination?.from : 0 }} to {{ pagination?.to }} of
44                        {{ pagination.total }} entries
45                    </p>
46                </div>
47                <BasePagination v-model="pagination.currentPage" class="pagination-success pagination-md me-3"
48                    :value="pagination.currentPage" :per-page="pagination.perPage" :total="pagination.total"
49                    @click="handlePageChange($event)" />
50            </div>
51        </div>
52    </div>
53</div>

Add/Edit Role

<div class="mt-4">
    <form role="form" @submit.prevent="submitForm">
        <div class="col-12 mt-sm-0">
            <label>Name</label>
            <ArgonInput id="role" name="role" class="multisteps-form__input"
                type="text" placeholder="Role Name"
                v-model="formData.role" :error="isError('role', errorsRef)"
                :errorMessage="getErrorMessage('role', errorsRef)" />
        </div>
        <div class="button-row d-flex mt-4">
            <ArgonButton type="submit" color="primary" variant="gradient" class="ms-auto mb-0">
                Add Role
            </ArgonButton>
        </div>
    </form>
</div>

1<div class="mt-4">
2    <form role="form" @submit.prevent="submitForm">
3        <div class="col-12 mt-sm-0">
4            <label>Name</label>
5            <ArgonInput id="role" name="role" class="multisteps-form__input"
6                type="text" placeholder="Role Name"
7                v-model="formData.role" :error="isError('role', errorsRef)"
8                :errorMessage="getErrorMessage('role', errorsRef)" />
9        </div>
10        <div class="button-row d-flex mt-4">
11            <ArgonButton type="submit" color="primary" variant="gradient" class="ms-auto mb-0">
12                Add Role
13            </ArgonButton>
14        </div>
15    </form>
16</div>