Item Managemant

PRO

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 (API)/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.

You can find the components for item functionality in `src\views\examplesApi\ItemManagement` folder.
The store used for item functionality is found in `src\store\item.module.js` and you can find the service file in `src\services\item.service.js`.

Item List

1<template>
2  <div class="py-4 container-fluid">
3    <div class="row">
4      <div class="col-12">
5        <div class="card">
6          <div class="pb-0 card-header">
7            <div class="d-lg-flex">
8              <div>
9                <h5 class="mb-0">Item List</h5>
10              </div>
11              <div class="my-auto mt-4 ms-auto mt-lg-0">
12                <div class="my-auto ms-auto">
13                  <router-link :to="{ name: 'Add Item' }" class="mb-0 btn bg-gradient-success btn-sm">
14                    <i class="fa fa-plus me-1" /> Add Item
15                  </router-link>
16                </div>
17              </div>
18            </div>
19          </div>
20          <hr>
21          <div class="px-0 pb-0 card-body">
22            <div class="dataTable-search search-block">
23                <input v-model="search" class="dataTable-input search-input-table" placeholder="Search..." type="text">
24            </div>
25            <div class="table-responsive">
26              <table id="item-list" ref="itemList" class="table table-flush">
27                <thead class="thead-light">
28                  <tr>
29                    <th title="name">Name</th>
30                    <th title="category.name">Category</th>
31                    <th data-sortable="false">Picture</th>
32                    <th title="tags.name">Tags</th>
33                    <th title="created_at">Create at</th>
34                    <th data-sortable="false">Action</th>
35                  </tr>
36                </thead>
37                <tbody class="text-sm">
38                </tbody>
39                <tfoot>
40                  <tr>
41                    <th>Name</th>
42                    <th>Category</th>
43                    <th>Picture</th>
44                    <th>Tags</th>
45                    <th>Create at</th>
46                    <th>Action</th>
47                  </tr>
48                </tfoot>
49              </table>
50            </div>
51          </div>
52        </div>
53      </div>
54    </div>
55  </div>
56</template>

<template>
  <div class="py-4 container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="pb-0 card-header">
            <div class="d-lg-flex">
              <div>
                <h5 class="mb-0">Item List</h5>
              </div>
              <div class="my-auto mt-4 ms-auto mt-lg-0">
                <div class="my-auto ms-auto">
                  <router-link :to="{ name: 'Add Item' }" class="mb-0 btn bg-gradient-success btn-sm">
                    <i class="fa fa-plus me-1" /> Add Item
                  </router-link>
                </div>
              </div>
            </div>
          </div>
          <hr>
          <div class="px-0 pb-0 card-body">
            <div class="dataTable-search search-block">
                <input v-model="search" class="dataTable-input search-input-table" placeholder="Search..." type="text">
            </div>
            <div class="table-responsive">
              <table id="item-list" ref="itemList" class="table table-flush">
                <thead class="thead-light">
                  <tr>
                    <th title="name">Name</th>
                    <th title="category.name">Category</th>
                    <th data-sortable="false">Picture</th>
                    <th title="tags.name">Tags</th>
                    <th title="created_at">Create at</th>
                    <th data-sortable="false">Action</th>
                  </tr>
                </thead>
                <tbody class="text-sm">
                </tbody>
                <tfoot>
                  <tr>
                    <th>Name</th>
                    <th>Category</th>
                    <th>Picture</th>
                    <th>Tags</th>
                    <th>Create at</th>
                    <th>Action</th>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>