Category Management

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

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

You can find the compoments for category functionality in src\views\examples\Categories folder.

Categories 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">Categories 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 Category</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="px-0 pb-0 card-body">
          <div class="table-responsive">
            <table
              id="categories-list"
              ref="categoriesList"
              class="table table-flush"
            >
              <thead class="thead-light">
                <tr>
                  <th title="name">Name</th>
                  <th title="description">Description</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>Description</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">Categories 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 Category</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
22              id="categories-list"
23              ref="categoriesList"
24              class="table table-flush"
25            >
26              <thead class="thead-light">
27                <tr>
28                  <th title="name">Name</th>
29                  <th title="description">Description</th>
30                  <th title="created_at">Created At</th>
31                  <th data-sortable="false">Action</th>
32                </tr>
33              </thead>
34              <tbody class="text-sm">
35              </tbody>
36              <tfoot>
37                <tr>
38                  <th>Name</th>
39                  <th>Description</th>
40                  <th>Create at</th>
41                  <th>Action</th>
42                </tr>
43              </tfoot>
44            </table>
45          </div>
46        </div>
47        <div
48          class="d-flex justify-content-center justify-content-sm-between flex-wrap"
49        >
50          <div class="ms-3">
51            <p>
52              Showing {{ pagination?.from }} to {{ pagination?.to }} of
53              {{ pagination?.total }} entries
54            </p>
55          </div>
56          <BasePagination
57            class="pagination-success pagination-md me-3"
58            :per-page="pagination?.perPage"
59            :value="pagination?.currentPage"
60            :total="pagination?.total"
61            @click="getDataFromPage($event)"
62          />
63        </div>
64      </div>
65    </div>
66  </div>
67</div>
68