Category Managemant

PRO

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 (API)/Category Management` link in the left sidebar or add /examples/category-management/list-categories to the URL.
You can add and edit categories here, but you can only delete them if they are not attached to any items.

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

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">Category 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: 'Category Add' }"
14                                      class="mb-0 btn bg-gradient-success btn-sm">
15                                      <i class="fa fa-plus me-1"/> Add Category
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="category-list" ref="categoryList" class="table table-flush">
28                              <thead class="thead-light">
29                                  <tr>
30                                      <th title="name">Name</th>
31                                      <th title="description">Description</th>
32                                      <th title="created_at">Create at</th>
33                                      <th data-sortable="false">Action</th>
34                                  </tr>
35                              </thead>
36                              <tbody class="text-sm">
37                              </tbody>
38                              <tfoot>
39                                  <tr>
40                                      <th>Name</th>
41                                      <th>Description</th>
42                                      <th>Create at</th>
43                                      <th>Action</th>
44                                  </tr>
45                              </tfoot>
46                          </table>
47                      </div>
48                  </div>
49              </div>
50          </div>
51      </div>
52  </div>
53</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">Category List</h5>
                          </div>
                          <div class="my-auto mt-4 ms-auto mt-lg-0">
                              <div class="my-auto ms-auto">
                                  <router-link :to="{ name: 'Category Add' }"
                                      class="mb-0 btn bg-gradient-success btn-sm">
                                      <i class="fa fa-plus me-1"/> Add Category
                                  </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="category-list" ref="categoryList" class="table table-flush">
                              <thead class="thead-light">
                                  <tr>
                                      <th title="name">Name</th>
                                      <th title="description">Description</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>Description</th>
                                      <th>Create at</th>
                                      <th>Action</th>
                                  </tr>
                              </tfoot>
                          </table>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>