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/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.

The store used for category functionality is found in stores\CategoryStore.js.

You can find the compoments for category functionality in pages\examples\category-management folder.

<div class="card shadow-lg mx-4 p-3 mt-4">
    <div class="d-flex justify-content-between px-4 pt-3">
        <h5 class="font-weight-bolder mb-0">Categories List</h5>
        <button v-if="isForDisplay()" type="button" class="btn base-button btn-icon btn-fab btn-primary btn-sm"
            @click.prevent="router.push({ path: '/examples/category-management/add-category' })">
            <span class="btn-inner--text">Add Category</span>
        </button>
    </div>
    <div class="mt-4">
        <div class="table-responsive">
            <div class="dataTable-search search-block">
                <ArgonInput v-model="search" class="dataTable-input search-input-table" placeholder="Search..."
                    type="text" />
            </div>
            <table id="category-table" class="table table-flush">
                <thead class="thead-light">
                    <tr>
                        <th>NAME</th>
                        <th>DESCRIPTION</th>
                        <th>CREATED AT</th>
                        <th v-if="isForDisplay()" data-sortable="false">ACTIONS</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="{ id, name, description, created_at } of pageItems" :key="id">
                        <td class="text-sm font-weight-normal">{{ name }}</td>
                        <td class="text-sm font-weight-normal">{{ description }}</td>
                        <td class="text-sm font-weight-normal">{{ created_at }}</td>
                        <td v-if="isForDisplay()" class="text-sm font-weight-normal">
                            <div class="d-flex align-items-center ms-auto">
                                <div class="cursor-pointer edit">
                                    <i :class="`fas fa-user-edit text-secondary edit-id`"></i>
                                </div>
                                <div class="mx-3 cursor-pointer delete">
                                    <i :class="`fas fa-trash text-secondary delete-id`"></i>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="d-flex justify-content-center justify-content-sm-between flex-wrap">
                <div class="ms-3">
                    <p>
                        Showing {{ pagination.total ? pagination?.from : 0 }} to {{ pagination?.to }} of
                        {{ pagination.total }} entries
                    </p>
                </div>
                <BasePagination v-model="pagination.currentPage" class="pagination-success pagination-md me-3"
                    :value="pagination.currentPage" :per-page="pagination.perPage" :total="pagination.total"
                    @click="handlePageChange($event)" />
            </div>
        </div>
    </div>
</div>

1<div class="card shadow-lg mx-4 p-3 mt-4">
2    <div class="d-flex justify-content-between px-4 pt-3">
3        <h5 class="font-weight-bolder mb-0">Categories List</h5>
4        <button v-if="isForDisplay()" type="button" class="btn base-button btn-icon btn-fab btn-primary btn-sm"
5            @click.prevent="router.push({ path: '/examples/category-management/add-category' })">
6            <span class="btn-inner--text">Add Category</span>
7        </button>
8    </div>
9    <div class="mt-4">
10        <div class="table-responsive">
11            <div class="dataTable-search search-block">
12                <ArgonInput v-model="search" class="dataTable-input search-input-table" placeholder="Search..."
13                    type="text" />
14            </div>
15            <table id="category-table" class="table table-flush">
16                <thead class="thead-light">
17                    <tr>
18                        <th>NAME</th>
19                        <th>DESCRIPTION</th>
20                        <th>CREATED AT</th>
21                        <th v-if="isForDisplay()" data-sortable="false">ACTIONS</th>
22                    </tr>
23                </thead>
24                <tbody>
25                    <tr v-for="{ id, name, description, created_at } of pageItems" :key="id">
26                        <td class="text-sm font-weight-normal">{{ name }}</td>
27                        <td class="text-sm font-weight-normal">{{ description }}</td>
28                        <td class="text-sm font-weight-normal">{{ created_at }}</td>
29                        <td v-if="isForDisplay()" class="text-sm font-weight-normal">
30                            <div class="d-flex align-items-center ms-auto">
31                                <div class="cursor-pointer edit">
32                                    <i :class="`fas fa-user-edit text-secondary edit-id`"></i>
33                                </div>
34                                <div class="mx-3 cursor-pointer delete">
35                                    <i :class="`fas fa-trash text-secondary delete-id`"></i>
36                                </div>
37                            </div>
38                        </td>
39                    </tr>
40                </tbody>
41            </table>
42            <div class="d-flex justify-content-center justify-content-sm-between flex-wrap">
43                <div class="ms-3">
44                    <p>
45                        Showing {{ pagination.total ? pagination?.from : 0 }} to {{ pagination?.to }} of
46                        {{ pagination.total }} entries
47                    </p>
48                </div>
49                <BasePagination v-model="pagination.currentPage" class="pagination-success pagination-md me-3"
50                    :value="pagination.currentPage" :per-page="pagination.perPage" :total="pagination.total"
51                    @click="handlePageChange($event)" />
52            </div>
53        </div>
54    </div>
55</div>

Add/Edit Category

<div class="mt-4">
    <form role="form" @submit.prevent="submitForm">
        <div class="col-12 mt-sm-0">
            <label>Name</label>
            <ArgonInput id="name" name="name" class="multisteps-form__input" type="text" placeholder="Name"
                v-model="formData.name" :error="isError('name', errorsRef)"
                :errorMessage="getErrorMessage('name', errorsRef)" />
        </div>
        <div class="col-12 mt-sm-0">
            <label>Description</label>
            <ArgonInput id="description" name="description" class="multisteps-form__input" type="text"
                placeholder="Description" v-model="formData.description" :error="isError('description', errorsRef)"
                :errorMessage="getErrorMessage('description', errorsRef)" />
        </div>
        <div class="button-row d-flex mt-4">
            <ArgonButton type="submit" color="primary" variant="gradient" class="ms-auto mb-0">
                Add Category
            </ArgonButton>
        </div>
    </form>
</div>

1<div class="mt-4">
2    <form role="form" @submit.prevent="submitForm">
3        <div class="col-12 mt-sm-0">
4            <label>Name</label>
5            <ArgonInput id="name" name="name" class="multisteps-form__input" type="text" placeholder="Name"
6                v-model="formData.name" :error="isError('name', errorsRef)"
7                :errorMessage="getErrorMessage('name', errorsRef)" />
8        </div>
9        <div class="col-12 mt-sm-0">
10            <label>Description</label>
11            <ArgonInput id="description" name="description" class="multisteps-form__input" type="text"
12                placeholder="Description" v-model="formData.description" :error="isError('description', errorsRef)"
13                :errorMessage="getErrorMessage('description', errorsRef)" />
14        </div>
15        <div class="button-row d-flex mt-4">
16            <ArgonButton type="submit" color="primary" variant="gradient" class="ms-auto mb-0">
17                Add Category
18            </ArgonButton>
19        </div>
20    </form>
21</div>

Category Management

Category List Component

Add/Edit Category