User Managemant

PRO

The Pro theme comes with an out of the box user management option. To access this option ,click the `Examples (API)/User Management` link in the left sidebar or add /examples/user-management/list-users to the URL.
The first thing you will see is a list of existing users. You can add new ones by clicking the `Add user` button (above the table on the right). On the Add user page, you will find a form which allows you to fill out the user`s name, email, role and password.

You can find the compoments for user functionality in `src\views\examplesApi\UserManagement` folder.
The store used for user functionality is found in `src\store\user.module.js` and you can find the service file in `src\services\user.service.js`.
Once you add more users, the list will grow and for every user you will have edit and delete options (access these options by clicking the icons for those actions that appears at the end of every row).

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