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/Tag Management" link in the left sidebar or add /examples/tag-management/list-tags 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 tag functionality can be found in stores\TagStore.js.

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

Tags Listing Component

<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">Tags 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/tag-management/add-tag' })">
            <span class="btn-inner--text">Add Tag</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="tag-table" class="table table-flush">
                <thead class="thead-light">
                    <tr>
                        <th>NAME</th>
                        <th data-sortable="false">COLOR</th>
                        <th>CREATED AT</th>
                        <th v-if="isForDisplay()" data-sortable="false">ACTIONS</th>
                    </tr>
                </thead>
                <tbody class="table-body">
                    <tr v-for="{ id, name, color, created_at } of pageItems" :key="id">
                        <td class="text-sm font-weight-normal">{{ name }}</td>
                        <td class="text-sm font-weight-normal">
                            <span class="badge" :style="{ 'background-color': color }">{{ name }}</span>
                        </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">Tags 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/tag-management/add-tag' })">
6            <span class="btn-inner--text">Add Tag</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="tag-table" class="table table-flush">
16                <thead class="thead-light">
17                    <tr>
18                        <th>NAME</th>
19                        <th data-sortable="false">COLOR</th>
20                        <th>CREATED AT</th>
21                        <th v-if="isForDisplay()" data-sortable="false">ACTIONS</th>
22                    </tr>
23                </thead>
24                <tbody class="table-body">
25                    <tr v-for="{ id, name, color, created_at } of pageItems" :key="id">
26                        <td class="text-sm font-weight-normal">{{ name }}</td>
27                        <td class="text-sm font-weight-normal">
28                            <span class="badge" :style="{ 'background-color': color }">{{ name }}</span>
29                        </td>
30                        <td class="text-sm font-weight-normal">{{ created_at }}</td>
31                        <td v-if="isForDisplay()" class="text-sm font-weight-normal">
32                            <div class="d-flex align-items-center ms-auto">
33                                <div class=" cursor-pointer edit">
34                                    <i :class="`fas fa-user-edit text-secondary edit-id`"></i>
35                                </div>
36                                <div class="mx-3 cursor-pointer delete">
37                                    <i :class="`fas fa-trash text-secondary delete-id`"></i>
38                                </div>
39                            </div>
40                        </td>
41                    </tr>
42                </tbody>
43            </table>
44            <div class="d-flex justify-content-center justify-content-sm-between flex-wrap">
45                <div class="ms-3">
46                    <p>
47                        Showing {{ pagination.total ? pagination?.from : 0 }} to {{ pagination?.to }} of
48                        {{ pagination.total }} entries
49                    </p>
50                </div>
51                <BasePagination v-model="pagination.currentPage" class="pagination-success pagination-md me-3"
52                    :value="pagination.currentPage" :per-page="pagination.perPage" :total="pagination.total"
53                    @click="handlePageChange($event)" />
54            </div>
55        </div>
56    </div>
57</div>

Add/Edit Tag

<div class="mt-4">
    <form role="form" @submit.prevent="submitForm">
        <div class="col-12 mt-sm-0">
            <label>Name</label>
            <ArgonInput id="tag" name="tag" class="multisteps-form__input" type="text" placeholder="Tag Name"
                v-model="formData.tag" :error="isError('tag', errorsRef)"
                :errorMessage="getErrorMessage('tag', errorsRef)" />
        </div>
        <div class="col-12 mt-sm-0">
            <label>Color</label>
            <slider v-model="formData.color" class="w-100" />
        </div>
        <div class="button-row d-flex mt-4">
            <ArgonButton type="submit" color="primary" variant="gradient" class="ms-auto mb-0">
                Add Tag
            </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="tag" name="tag" class="multisteps-form__input" type="text" placeholder="Tag Name"
6                v-model="formData.tag" :error="isError('tag', errorsRef)"
7                :errorMessage="getErrorMessage('tag', errorsRef)" />
8        </div>
9        <div class="col-12 mt-sm-0">
10            <label>Color</label>
11            <slider v-model="formData.color" class="w-100" />
12        </div>
13        <div class="button-row d-flex mt-4">
14            <ArgonButton type="submit" color="primary" variant="gradient" class="ms-auto mb-0">
15                Add Tag
16            </ArgonButton>
17        </div>
18    </form>
19</div>