DocsItem 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 roles functionality is found in src\store\modules\items-module.vue
You can find the compoments for items functionality in src\views\Examples\ItemManagement folder.
List Items
<div>
<div
class="col-12 d-flex justify-content-center justify-content-sm-between flex-wrap"
>
<el-select
class="select-primary pagination-select"
v-model="pagination.perPage"
placeholder="Per page"
>
<el-option
class="select-primary"
v-for="item in pagination.perPageOptions"
:key="item"
:label="item"
:value="item"
>
</el-option>
</el-select>
<div>
<base-input
v-model="query"
type="search"
prepend-icon="fas fa-search"
placeholder="Search..."
clearable
/>
</div>
</div>
<el-table
class="table-responsive align-items-center table-flush"
header-row-class-name="thead-light"
:data="items"
@sort-change="sortChange"
>
<div slot="empty" v-if="loading">
<img src="/img/loading.gif" style="height: 100px; width: 100px" />
</div>
<el-table-column
label="Name"
min-width="240px"
prop="name"
sortable="custom"
/>
<el-table-column
label="Category"
min-width="140px"
prop="category.name"
sortable="custom"
/>
<el-table-column label="Picture" min-width="150px">
<template v-slot="{ row }">
<img
v-if="row.image"
:src="row.image"
style="width: 100px; height: auto"
alt="avatar"
/>
</template>
</el-table-column>
<el-table-column
label="Tags"
min-width="170px"
max-width="400px"
prop="tags.name"
sortable="custom"
>
<template slot-scope="{ row }">
<span
v-for="(tag, index) in row.tags"
:key="'tag' + index"
class="badge badge-default"
:style="{ backgroundColor: tag.color, margin: '.1rem' }"
>{{ tag.name }}</span
>
</template>
</el-table-column>
<el-table-column
label="Created At"
prop="created_at"
min-width="190px"
sortable="custom"
/>
<el-table-column min-width="120px" align="center">
<div slot-scope="{ row }" class="table-actions">
<el-tooltip content="Edit" placement="top">
<a
type="text"
@click="editItem(row)"
class="table-action"
data-toggle="tooltip"
style="cursor: pointer"
>
<i class="fas fa-user-edit"></i>
</a>
</el-tooltip>
<el-tooltip content="Delete" placement="top">
<a
type="text"
@click="deleteItem(row.id)"
class="table-action table-action-delete"
data-toggle="tooltip"
style="cursor: pointer"
>
<i class="fas fa-trash"></i>
</a>
</el-tooltip>
</div>
</el-table-column>
</el-table>
</div>
Add/Edit Item
<card>
<div slot="header" class="row align-items-center">
<div class="col-8">
<h3 class="mb-0">Edit Item</h3>
</div>
<div class="col-4 text-right">
<base-button
@click="goBack"
type="button"
class="btn btn-sm btn-primary"
>Back to list</base-button
>
</div>
</div>
<div class="card-body">
<form ref="profile_form" @submit.prevent="handleSubmit">
<div class="form-group">
<label class="form-control-label"> Picture </label>
<div v-if="file" class="profile-image card-img pb-4">
<img
:src="`${item.image}`"
class="profile-image argon-image"
/>
</div>
<div v-else class="profile-image">
<img src="/img/placeholder.jpg" class="argon-image" />
</div>
<div class="image-upload">
<base-button
v-if="file"
type="button"
class="btn btn-sm btn-danger"
@click="removeImage"
>
<span>
<i class="fa fa-times" />
Remove
</span>
</base-button>
<base-button type="button" class="btn btn-sm btn-primary">
<label v-if="!file" for="imageInput" class="mb-0"
>Select image</label
>
<label v-else for="imageInput" class="mb-0">Change</label>
<input
id="imageInput"
ref="imageInput"
accept="image/*"
type="file"
style="display: none"
@change="onSelectFile"
/>
</base-button>
</div>
</div>
<validation-error :errors="apiValidationErrors.attachment" />
<base-input
label="Name"
prepend-icon="fas fa-user"
v-model="item.name"
/>
<validation-error :errors="apiValidationErrors.name" />
<base-input label="Description">
<html-editor v-model="item.description" name="editor" />
</base-input>
<validation-error :errors="apiValidationErrors.description" />
<base-input label="Category">
<el-select
name="category"
v-model="item.category.id"
prepend-icon="fas fa-user"
>
<el-option
v-for="single_category in all_categories"
:key="single_category.id"
:value="single_category.id"
:label="single_category.name"
>
</el-option>
</el-select>
</base-input>
<base-input label="Tags">
<el-select v-model="tags" multiple placeholder="Select...">
<el-option
v-for="single_tag in all_tags"
:key="single_tag.id"
:value="single_tag.id"
:label="single_tag.name"
>
</el-option>
</el-select>
</base-input>
<base-input label="Status">
<base-radio v-model="item.status" name="published" class="mb-3">
Published
</base-radio>
<base-radio v-model="item.status" name="draft" class="mb-3">
Draft
</base-radio>
<base-radio v-model="item.status" name="archive" class="mb-3">
Archive
</base-radio>
</base-input>
<base-input label="Show on homepage?">
<base-switch
class="mr-1"
v-model="item.is_on_homepage"
></base-switch>
</base-input>
<base-input label="Date">
<flat-picker
slot-scope="{ focus, blur }"
@on-open="focus"
@on-close="blur"
:config="{ allowInput: true }"
class="form-control datepicker"
v-model="item.date_at"
>
</flat-picker>
</base-input>
<validation-error :errors="apiValidationErrors.date_at" />
<div class="my-4">
<base-button
type="button"
class="btn btn-sm btn-primary"
native-type="submit"
>
Update Item
</base-button>
</div>
</form>
</div>
</card>