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(API)/Categories" link in the left sidebar or add /categoies-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.

You can find the compoments for category functionality in src\views\examples-api\categories folder.

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

Category List Examples

<table id="category-list" ref="table" class="table table-flush">
    <thead class="thead-light">
      <tr>
        <th data-sortable="false" class="w-20">Name</th>
        <th title="description" class="w-40">Description</th>
        <th title="created_at" class="w-20">Created at</th>
        <th data-sortable="false" class="text-end">Action</th>
      </tr>
    </thead>
    <tbody class="text-sm">
    </tbody>
  </table>

1<table id="category-list" ref="table" class="table table-flush">
2    <thead class="thead-light">
3      <tr>
4        <th data-sortable="false" class="w-20">Name</th>
5        <th title="description" class="w-40">Description</th>
6        <th title="created_at" class="w-20">Created at</th>
7        <th data-sortable="false" class="text-end">Action</th>
8      </tr>
9    </thead>
10    <tbody class="text-sm">
11    </tbody>
12  </table>

Add/Edit Examples

<div class="card-body">
    <form>

        <div class="row mt-5">
            <div class="col-10">

                <material-input id="name" v-model:value="category.name" label="Name" variant="static"
                    name="name"></material-input>
                <validation-error :errors="apiValidationErrors.name"></validation-error>

            </div>
        </div>

        <div class="row mt-4 mb-5 d-flex align-items-end">
            
            <div class="col-10">
            <material-input id="description" v-model:value="category.description" label="Description" variant="static"
                    name="description"></material-input>
                <validation-error :errors="apiValidationErrors.description"></validation-error>
            </div>
            <div class="col-2 text-end">
                <material-button class="float-right btn btm-sm" @click.prevent="handleAdd">Add
                    Category</material-button>
            </div>
        </div>
    </form>
</div>

1<div class="card-body">
2    <form>
3
4        <div class="row mt-5">
5            <div class="col-10">
6
7                <material-input id="name" v-model:value="category.name" label="Name" variant="static"
8                    name="name"></material-input>
9                <validation-error :errors="apiValidationErrors.name"></validation-error>
10
11            </div>
12        </div>
13
14        <div class="row mt-4 mb-5 d-flex align-items-end">
15            
16            <div class="col-10">
17            <material-input id="description" v-model:value="category.description" label="Description" variant="static"
18                    name="description"></material-input>
19                <validation-error :errors="apiValidationErrors.description"></validation-error>
20            </div>
21            <div class="col-2 text-end">
22                <material-button class="float-right btn btm-sm" @click.prevent="handleAdd">Add
23                    Category</material-button>
24            </div>
25        </div>
26    </form>
27</div>
28