<template>
<data-table
:headers="headers"
:items="obCollection.getModelList()"
:options.sync="pagination"
:total="serverItemsLength"
:last-page="serverLastPage"
:loading="bLocalLoading"
btn-action-path="products"
btn-action-item-key-id="id"
hide-btn-action-view
@delete="deleteItem"
>
<template v-slot:[`item.name`]="{ item }">
<name-with-avatar :name="item.name" :path="item.thumbnail" />
</template>
<template v-slot:[`item.active`]="{ item }">
<active-icon :active="item.active" />
</template>
<template v-slot:[`item.price`]="{ item }">
<v-chip label v-if="item.offers.length">
<strong class="mr-2">{{ item.offers[0].currency }}</strong>
<span>{{ item.offers[0].price }}</span>
</v-chip>
<v-chip label v-else>0</v-chip>
</template>
</data-table>
</template>
<script lang="ts">
import { Mixins, Component, Watch } from "vue-property-decorator";
import ProductMixin from "@/modules/products/mixins/Product";
import DataTable from "@bit/planetadeleste.gui.ui.data-table/index.vue";
import ActiveIcon from "@/components/common/ActiveIcon.vue";
import ProductsForm from "@/modules/products/components/Form.vue";
import NameWithAvatar from "@/components/common/NameWithAvatar.vue";
import { DataTableHeader } from "vuetify";
@Component({
components: {
DataTable,
ActiveIcon,
ProductsForm,
NameWithAvatar,
},
})
export default class ProductsList extends Mixins(ProductMixin) {
headers: DataTableHeader[] = [
{ text: "name", value: "name" },
{ text: "active", value: "active", class: "mw-150", sortable: false },
{
text: "price",
value: "price",
sortable: false,
},
{
text: "category",
value: "category_name",
},
{
text: "actions",
value: "actions",
align: "end",
sortable: false,
},
];
mounted() {
this.headers = this.$_.map(this.headers, (item) => {
item.text = this.$_.toString(this.$t(item.text));
return item;
});
this.index();
}
}
</script>