Tag Management

Out of the box you will have an example of tag management (for the cases in which you are developing a blog or a shop). To access this example, click the "Examples/Tags" link in the left sidebar or add /examples/tags/list to the URL. You can add and edit tags here, but you can only delete them if they are not attached to any items.

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

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

Tags Component

 <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">Tags 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 Tag</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="px-0 pb-0 card-body">
          <div class="table-responsive">
            <table id="tags-list" ref="tagsList" class="table table-flush">
              <thead class="thead-light">
                <tr>
                  <th title="name">Name</th>
                  <th data-sortable="false">Color</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>Color</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>

1 <div class="py-4 container-fluid">
2  <div class="row">
3    <div class="col-12">
4      <div class="card">
5        <div class="pb-0 card-header">
6          <div class="d-lg-flex">
7            <div>
8              <h5 class="mb-0">Tags List</h5>
9            </div>
10            <div class="my-auto mt-4 ms-auto mt-lg-0">
11              <div class="my-auto ms-auto">
12                <a href="./new" class="mb-0 btn bg-gradient-success btn-sm"
13                  >+&nbsp; New Tag</a
14                >
15              </div>
16            </div>
17          </div>
18        </div>
19        <div class="px-0 pb-0 card-body">
20          <div class="table-responsive">
21            <table id="tags-list" ref="tagsList" class="table table-flush">
22              <thead class="thead-light">
23                <tr>
24                  <th title="name">Name</th>
25                  <th data-sortable="false">Color</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>Color</th>
36                  <th>Create at</th>
37                  <th>Action</th>
38                </tr>
39              </tfoot>
40            </table>
41          </div>
42        </div>
43        <div
44          class="d-flex justify-content-center justify-content-sm-between flex-wrap"
45        >
46          <div class="ms-3">
47            <p>
48              Showing {{ pagination?.from }} to {{ pagination?.to }} of
49              {{ pagination?.total }} entries
50            </p>
51          </div>
52          <BasePagination
53            class="pagination-success pagination-md me-3"
54            :per-page="pagination?.perPage"
55            :value="pagination?.currentPage"
56            :total="pagination?.total"
57            @click="getDataFromPage($event)"
58          />
59        </div>
60      </div>
61    </div>
62  </div>
63</div>
64