Update to PrimeVue v4
This commit is contained in:
Cagatay Civici
+49
-37
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { FilterMatchMode } from 'primevue/api';
|
||||
import { FilterMatchMode } from '@primevue/core/api';
|
||||
import { ref, onMounted, onBeforeMount } from 'vue';
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
@@ -143,34 +143,30 @@ const initFilters = () => {
|
||||
<template v-slot:start>
|
||||
<div class="my-2">
|
||||
<Button label="New" icon="pi pi-plus" class="mr-2" severity="success" @click="openNew" />
|
||||
<Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
|
||||
<Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected"
|
||||
:disabled="!selectedProducts || !selectedProducts.length" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:end>
|
||||
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" />
|
||||
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import"
|
||||
chooseLabel="Import" class="mr-2 inline-block" />
|
||||
<Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
|
||||
</template>
|
||||
</Toolbar>
|
||||
|
||||
<DataTable
|
||||
ref="dt"
|
||||
:value="products"
|
||||
v-model:selection="selectedProducts"
|
||||
dataKey="id"
|
||||
:paginator="true"
|
||||
:rows="10"
|
||||
:filters="filters"
|
||||
<DataTable ref="dt" :value="products" v-model:selection="selectedProducts" dataKey="id"
|
||||
:paginator="true" :rows="10" :filters="filters"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
:rowsPerPageOptions="[5, 10, 25]"
|
||||
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
|
||||
>
|
||||
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products">
|
||||
<template #header>
|
||||
<div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h5 class="m-0">Manage Products</h5>
|
||||
<IconField iconPosition="left" class="block mt-2 md:mt-0">
|
||||
<InputIcon class="pi pi-search" />
|
||||
<InputText class="w-full sm:w-auto" v-model="filters['global'].value" placeholder="Search..." />
|
||||
<InputText class="w-full sm:w-auto" v-model="filters['global'].value"
|
||||
placeholder="Search..." />
|
||||
</IconField>
|
||||
</div>
|
||||
</template>
|
||||
@@ -191,7 +187,8 @@ const initFilters = () => {
|
||||
<Column header="Image" headerStyle="width:14%; min-width:10rem;">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Image</span>
|
||||
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
|
||||
<img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image"
|
||||
class="shadow-2" width="100" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="price" header="Price" :sortable="true" headerStyle="width:14%; min-width:8rem;">
|
||||
@@ -200,7 +197,8 @@ const initFilters = () => {
|
||||
{{ formatCurrency(slotProps.data.price) }}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="category" header="Category" :sortable="true" headerStyle="width:14%; min-width:10rem;">
|
||||
<Column field="category" header="Category" :sortable="true"
|
||||
headerStyle="width:14%; min-width:10rem;">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Category</span>
|
||||
{{ slotProps.data.category }}
|
||||
@@ -212,25 +210,32 @@ const initFilters = () => {
|
||||
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="inventoryStatus" header="Status" :sortable="true" headerStyle="width:14%; min-width:10rem;">
|
||||
<Column field="inventoryStatus" header="Status" :sortable="true"
|
||||
headerStyle="width:14%; min-width:10rem;">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Status</span>
|
||||
<Tag :severity="getBadgeSeverity(slotProps.data.inventoryStatus)">{{ slotProps.data.inventoryStatus }}</Tag>
|
||||
<Tag :severity="getBadgeSeverity(slotProps.data.inventoryStatus)">{{
|
||||
slotProps.data.inventoryStatus }}</Tag>
|
||||
</template>
|
||||
</Column>
|
||||
<Column headerStyle="min-width:10rem;">
|
||||
<template #body="slotProps">
|
||||
<Button icon="pi pi-pencil" class="mr-2" severity="success" rounded @click="editProduct(slotProps.data)" />
|
||||
<Button icon="pi pi-trash" class="mt-2" severity="warning" rounded @click="confirmDeleteProduct(slotProps.data)" />
|
||||
<Button icon="pi pi-pencil" class="mr-2" severity="success" rounded
|
||||
@click="editProduct(slotProps.data)" />
|
||||
<Button icon="pi pi-trash" class="mt-2" severity="warning" rounded
|
||||
@click="confirmDeleteProduct(slotProps.data)" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
||||
<Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true" class="p-fluid">
|
||||
<img :src="'/demo/images/product/' + product.image" :alt="product.image" v-if="product.image" width="150" class="mt-0 mx-auto mb-5 block shadow-2" />
|
||||
<Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details"
|
||||
:modal="true" class="p-fluid">
|
||||
<img :src="'/demo/images/product/' + product.image" :alt="product.image" v-if="product.image"
|
||||
width="150" class="mt-0 mx-auto mb-5 block shadow-2" />
|
||||
<div class="field">
|
||||
<label for="name">Name</label>
|
||||
<InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
|
||||
<InputText id="name" v-model.trim="product.name" required="true" autofocus
|
||||
:invalid="submitted && !product.name" />
|
||||
<small class="p-invalid" v-if="submitted && !product.name">Name is required.</small>
|
||||
</div>
|
||||
<div class="field">
|
||||
@@ -240,13 +245,16 @@ const initFilters = () => {
|
||||
|
||||
<div class="field">
|
||||
<label for="inventoryStatus" class="mb-3">Inventory Status</label>
|
||||
<Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
|
||||
<Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses"
|
||||
optionLabel="label" placeholder="Select a Status">
|
||||
<template #value="slotProps">
|
||||
<div v-if="slotProps.value && slotProps.value.value">
|
||||
<span :class="'product-badge status-' + slotProps.value.value">{{ slotProps.value.label }}</span>
|
||||
<span :class="'product-badge status-' + slotProps.value.value">{{
|
||||
slotProps.value.label }}</span>
|
||||
</div>
|
||||
<div v-else-if="slotProps.value && !slotProps.value.value">
|
||||
<span :class="'product-badge status-' + slotProps.value.toLowerCase()">{{ slotProps.value }}</span>
|
||||
<span :class="'product-badge status-' + slotProps.value.toLowerCase()">{{
|
||||
slotProps.value }}</span>
|
||||
</div>
|
||||
<span v-else>
|
||||
{{ slotProps.placeholder }}
|
||||
@@ -259,19 +267,23 @@ const initFilters = () => {
|
||||
<label class="mb-3">Category</label>
|
||||
<div class="formgrid grid">
|
||||
<div class="field-radiobutton col-6">
|
||||
<RadioButton id="category1" name="category" value="Accessories" v-model="product.category" />
|
||||
<RadioButton id="category1" name="category" value="Accessories"
|
||||
v-model="product.category" />
|
||||
<label for="category1">Accessories</label>
|
||||
</div>
|
||||
<div class="field-radiobutton col-6">
|
||||
<RadioButton id="category2" name="category" value="Clothing" v-model="product.category" />
|
||||
<RadioButton id="category2" name="category" value="Clothing"
|
||||
v-model="product.category" />
|
||||
<label for="category2">Clothing</label>
|
||||
</div>
|
||||
<div class="field-radiobutton col-6">
|
||||
<RadioButton id="category3" name="category" value="Electronics" v-model="product.category" />
|
||||
<RadioButton id="category3" name="category" value="Electronics"
|
||||
v-model="product.category" />
|
||||
<label for="category3">Electronics</label>
|
||||
</div>
|
||||
<div class="field-radiobutton col-6">
|
||||
<RadioButton id="category4" name="category" value="Fitness" v-model="product.category" />
|
||||
<RadioButton id="category4" name="category" value="Fitness"
|
||||
v-model="product.category" />
|
||||
<label for="category4">Fitness</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -280,7 +292,8 @@ const initFilters = () => {
|
||||
<div class="formgrid grid">
|
||||
<div class="field col">
|
||||
<label for="price">Price</label>
|
||||
<InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" :invalid="submitted && !product.price" :required="true" />
|
||||
<InputNumber id="price" v-model="product.price" mode="currency" currency="USD"
|
||||
locale="en-US" :invalid="submitted && !product.price" :required="true" />
|
||||
<small class="p-invalid" v-if="submitted && !product.price">Price is required.</small>
|
||||
</div>
|
||||
<div class="field col">
|
||||
@@ -294,13 +307,11 @@ const initFilters = () => {
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
<Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
|
||||
<Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm"
|
||||
:modal="true">
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
|
||||
<span v-if="product"
|
||||
>Are you sure you want to delete <b>{{ product.name }}</b
|
||||
>?</span
|
||||
>
|
||||
<span v-if="product">Are you sure you want to delete <b>{{ product.name }}</b>?</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
<Button label="No" icon="pi pi-times" text @click="deleteProductDialog = false" />
|
||||
@@ -308,7 +319,8 @@ const initFilters = () => {
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
<Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
|
||||
<Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm"
|
||||
:modal="true">
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
|
||||
<span v-if="product">Are you sure you want to delete the selected products?</span>
|
||||
|
||||
Reference in New Issue
Block a user