Item Management
Item management is the most advanced example included in the Pro theme, because every item has a picture, belongs to a category and has multiple tags. To access this example click the "Examples/Item Management" link in the left sidebar or add /examples/item-management/list-items to the URL. Here you can manage the items. A list of items will appear once you start adding them (to access the add page click "Add item"). On the add page, besides the Name and Description fields (which are present in most of the CRUD examples) you can see a category dropdown, which contains the categories you added, a file input and a tag multi select. If you did not add any categories or tags, please go to the corresponding sections (category management, tag management) and add some.
The store used for item functionality is found in stores\ItemService.js.
You can find the compoments for items functionality in pages\examples\item-management folder.
Items Listing Component
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">Items 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/item-management/add-item' })"> 6 <span class="btn-inner--text">Add Item</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="item-table" class="table table-flush"> 16 <thead class="thead-light"> 17 <tr> 18 <th>NAME</th> 19 <th>CATEGORY</th> 20 <th data-sortable="false">PICTURE</th> 21 <th>TAGS</th> 22 <th>CREATED AT</th> 23 <th v-if="isForDisplay()" data-sortable="false">ACTIONS</th> 24 </tr> 25 </thead> 26 <tbody> 27 <tr v-for="{ id, name, category, image, tags, created_at } of pageItems" :key="id"> 28 <td class="text-sm font-weight-normal">{{ name }}</td> 29 <td class="text-sm font-weight-normal">{{ category.name }}</td> 30 <td class="text-sm font-weight-normal"> 31 <img :src="image ? image : defaultAvatar" width="100" height="100" alt="avatar" class="rounded" /> 32 </td> 33 <td class="text-sm font-weight-normal"> 34 <div class="d-flex flex-wrap"> 35 <span v-for="{ name, color } of tags" class="badge" 36 :style="{ 'background-color': color, 'margin': '0.1rem' }"> 37 {{ name }} 38 </span> 39 </div> 40 </td> 41 <td class="text-sm font-weight-normal">{{ created_at }}</td> 42 <td v-if="isForDisplay()" class="text-sm font-weight-normal"> 43 <div class="d-flex align-items-center ms-auto"> 44 <div class="cursor-pointer edit"> 45 <i :class="`fas fa-user-edit text-secondary edit-id`"></i> 46 </div> 47 <div class="mx-3 cursor-pointer delete"> 48 <i :class="`fas fa-trash text-secondary delete-id`"></i> 49 </div> 50 </div> 51 </td> 52 </tr> 53 </tbody> 54 </table> 55 <div class="d-flex justify-content-center justify-content-sm-between flex-wrap"> 56 <div class="ms-3"> 57 <p> 58 Showing {{ pagination.total ? pagination?.from : 0 }} to {{ pagination?.to }} of 59 {{ pagination.total }} entries 60 </p> 61 </div> 62 <BasePagination v-model="pagination.currentPage" class="pagination-success pagination-md me-3" 63 :value="pagination.currentPage" :per-page="pagination.perPage" :total="pagination.total" 64 @click="handlePageChange($event)" /> 65 </div> 66 </div> 67 </div> 68</div>
Add/Edit Item
1<div class="mt-4"> 2 <form role="form" @submit.prevent="submitForm"> 3 <div class="d-flex flex-column max-content align-items-center mb-4 mx-4"> 4 <img :src="imgSrc" class="rounded d-flex justify-content-center argon-image" width="200" height="200"> 5 <div class="mt-2 d-flex justify-content-center"> 6 <ArgonButton v-if="imgSrc !== defaultAvatar" type="button" @click.prevent="handleFileRemove()" 7 class="btn base-button btn btn-sm btn-danger btn-button mx-2"> 8 <span><i class="fa fa-times"></i> Remove </span> 9 </ArgonButton> 10 <ArgonButton type="button" class="btn base-button btn btn-sm btn-primary btn-button"> 11 <label for="imageInput" class="mb-0"> 12 {{ imgSrc !== defaultAvatar ? 'Change' : 'Select image' }} 13 </label> 14 <input ref="file" id="imageInput" accept="image/*" type="file" style="display: none;" 15 v-on:change="handleFileUpload()" /> 16 </ArgonButton> 17 </div> 18 <span v-if="isError('image', errorsRef)" style="color: #fd5c70; margin: 5px; font-size: 12px">{{ 19 getErrorMessage('image', errorsRef) }}</span> 20 </div> 21 <div class="col-12 mt-sm-0"> 22 <label>Name</label> 23 <ArgonInput id="name" name="name" class="multisteps-form__input" type="text" placeholder="Item Name" 24 v-model="formData.name" :error="isError('name', errorsRef)" 25 :errorMessage="getErrorMessage('name', errorsRef)" /> 26 </div> 27 <div class="col-12 mt-sm-0"> 28 <label>Description</label> 29 <quill-editor id="description" name="description" class="multisteps-form__input" contentType="html" 30 v-model:content="formData.description" :aria-errormessage="isError('description', errorsRef)" 31 :error="isError('description', errorsRef)" style="min-height:150px;" /> 32 <span v-if="isError('description', errorsRef)" style="color: #fd5c70; margin-left: 5px; font-size: 12px">{{ 33 getErrorMessage('description', 34 errorsRef) }}</span> 35 </div> 36 <div class="col-12 mt-3"> 37 <label>Category</label> 38 <select id="choices-category" class="form-control" name="choices-category" v-model="formData.category"> 39 <option v-for="category of categoryStore.allCategoriesList" :value="category.id">{{ 40 category.name 41 }}</option> 42 </select> 43 </div> 44 <div class="col-12 mt-3"> 45 <label>Tags</label> 46 <select id="choices-tags" style="margin-bottom: 0px;" name="choices-tags" multiple v-model="formData.tags"> 47 <option v-for="tag of tagStore.allTagsList" :value="tag.id" value="Choice 1">{{ tag.name }}</option> 48 </select> 49 <span v-if="isError('tags', errorsRef)" style="color: #fd5c70; margin-left: 5px; font-size: 12px">{{ 50 getErrorMessage('tags', errorsRef) }}</span> 51 </div> 52 <div class="col-12 mt-3"> 53 <label>Status</label> 54 <ArgonRadio id="published" name="status" value="published" v-model="formData.status" checked>Published 55 </ArgonRadio> 56 <ArgonRadio id="draft" name="status" value="draft" v-model="formData.status">Draft</ArgonRadio> 57 <ArgonRadio id="archive" name="status" value="archive" v-model="formData.status">Archive</ArgonRadio> 58 </div> 59 <div class="col-12 mt-3"> 60 <label>Show on homepage?</label> 61 <ArgonSwitch id="isOnHomepage" name="isOnHomepage" v-model="formData.isOnHomepage" /> 62 </div> 63 <div class="col-2 mt-3"> 64 <label>Date</label> 65 <ArgonInput type="date" placeholder="Date" v-model="formData.date" /> 66 </div> 67 68 <div class="button-row d-flex mt-4"> 69 <ArgonButton type="submit" color="primary" variant="gradient" class="ms-auto mb-0"> 70 Add Item 71 </ArgonButton> 72 </div> 73 </form> 74</div>