Update to PrimeVue v4
This commit is contained in:
Cagatay Civici
@@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { ref, onBeforeMount, reactive } from 'vue';
|
||||
import { FilterMatchMode, FilterOperator } from 'primevue/api';
|
||||
import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
|
||||
import { CustomerService } from '@/service/CustomerService';
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
@@ -128,25 +128,18 @@ const calculateCustomerTotal = (name) => {
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Filter Menu</h5>
|
||||
<DataTable
|
||||
:value="customer1"
|
||||
:paginator="true"
|
||||
:rows="10"
|
||||
dataKey="id"
|
||||
:rowHover="true"
|
||||
v-model:filters="filters1"
|
||||
filterDisplay="menu"
|
||||
:loading="loading1"
|
||||
:filters="filters1"
|
||||
<DataTable :value="customer1" :paginator="true" :rows="10" dataKey="id" :rowHover="true"
|
||||
v-model:filters="filters1" filterDisplay="menu" :loading="loading1" :filters="filters1"
|
||||
:globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']"
|
||||
showGridlines
|
||||
>
|
||||
showGridlines>
|
||||
<template #header>
|
||||
<div class="flex justify-content-between flex-column sm:flex-row">
|
||||
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter1()" />
|
||||
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined
|
||||
@click="clearFilter1()" />
|
||||
<IconField iconPosition="left">
|
||||
<InputIcon class="pi pi-search" />
|
||||
<InputText v-model="filters1['global'].value" placeholder="Keyword Search" style="width: 100%" />
|
||||
<InputText v-model="filters1['global'].value" placeholder="Keyword Search"
|
||||
style="width: 100%" />
|
||||
</IconField>
|
||||
</div>
|
||||
</template>
|
||||
@@ -157,40 +150,52 @@ const calculateCustomerTotal = (name) => {
|
||||
{{ data.name }}
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by name" />
|
||||
<InputText type="text" v-model="filterModel.value" class="p-column-filter"
|
||||
placeholder="Search by name" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Country" filterField="country.name" style="min-width: 12rem">
|
||||
<template #body="{ data }">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<img alt="flag" src="/demo/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
|
||||
<img alt="flag" src="/demo/images/flag/flag_placeholder.png"
|
||||
:class="`flag flag-${data.country.code}`" style="width: 24px" />
|
||||
<span>{{ data.country.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country" />
|
||||
<InputText type="text" v-model="filterModel.value" class="p-column-filter"
|
||||
placeholder="Search by country" />
|
||||
</template>
|
||||
<template #filterclear="{ filterCallback }">
|
||||
<Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
|
||||
<Button type="button" icon="pi pi-times" @click="filterCallback()"
|
||||
severity="secondary"></Button>
|
||||
</template>
|
||||
<template #filterapply="{ filterCallback }">
|
||||
<Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
|
||||
<Button type="button" icon="pi pi-check" @click="filterCallback()"
|
||||
severity="success"></Button>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
|
||||
<Column header="Agent" filterField="representative" :showFilterMatchModes="false"
|
||||
:filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
|
||||
<template #body="{ data }">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
|
||||
<img :alt="data.representative.name"
|
||||
:src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`"
|
||||
style="width: 32px" />
|
||||
<span>{{ data.representative.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<div class="mb-3 text-bold">Agent Picker</div>
|
||||
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
|
||||
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name"
|
||||
placeholder="Any" class="p-column-filter">
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-representative-option">
|
||||
<img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
|
||||
<span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ slotProps.option.name }}</span>
|
||||
<img :alt="slotProps.option.name"
|
||||
:src="'/demo/images/avatar/' + slotProps.option.image" width="32"
|
||||
style="vertical-align: middle" />
|
||||
<span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{
|
||||
slotProps.option.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</MultiSelect>
|
||||
@@ -212,18 +217,22 @@ const calculateCustomerTotal = (name) => {
|
||||
<InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="status" header="Status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
|
||||
<Column field="status" header="Status" :filterMenuStyle="{ width: '14rem' }"
|
||||
style="min-width: 12rem">
|
||||
<template #body="{ data }">
|
||||
<Tag :severity="getSeverity(data.status)">{{ data.status.toUpperCase() }}</Tag>
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
|
||||
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Any"
|
||||
class="p-column-filter" :showClear="true">
|
||||
<template #value="slotProps">
|
||||
<Tag :severity="getSeverity(slotProps.value)" v-if="slotProps.value">{{ slotProps.value }} </Tag>
|
||||
<Tag :severity="getSeverity(slotProps.value)" v-if="slotProps.value">{{
|
||||
slotProps.value }} </Tag>
|
||||
<span v-else>{{ slotProps.placeholder }}</span>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<Tag :severity="getSeverity(slotProps.option)">{{ slotProps.option.toUpperCase() }}</Tag>
|
||||
<Tag :severity="getSeverity(slotProps.option)">{{ slotProps.option.toUpperCase() }}
|
||||
</Tag>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</template>
|
||||
@@ -240,9 +249,11 @@ const calculateCustomerTotal = (name) => {
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width: 8rem">
|
||||
<Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center"
|
||||
style="min-width: 8rem">
|
||||
<template #body="{ data }">
|
||||
<i class="pi" :class="{ 'text-green-500 pi-check-circle': data.verified, 'text-pink-500 pi-times-circle': !data.verified }"></i>
|
||||
<i class="pi"
|
||||
:class="{ 'text-green-500 pi-check-circle': data.verified, 'text-pink-500 pi-times-circle': !data.verified }"></i>
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<TriStateCheckbox v-model="filterModel.value" />
|
||||
@@ -255,15 +266,18 @@ const calculateCustomerTotal = (name) => {
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Frozen Columns</h5>
|
||||
<ToggleButton v-model="idFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Id" offLabel="Freeze Id" style="width: 10rem" />
|
||||
<ToggleButton v-model="idFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Id"
|
||||
offLabel="Freeze Id" style="width: 10rem" />
|
||||
|
||||
<DataTable :value="customer2" :scrollable="true" scrollHeight="400px" :loading="loading2" scrollDirection="both" class="mt-3">
|
||||
<DataTable :value="customer2" :scrollable="true" scrollHeight="400px" :loading="loading2"
|
||||
scrollDirection="both" class="mt-3">
|
||||
<Column field="name" header="Name" style="min-width: 200px" frozen></Column>
|
||||
<Column field="id" header="Id" style="min-width: 100px" :frozen="idFrozen"></Column>
|
||||
<Column field="country.name" header="Country" :style="{ width: '200px' }">
|
||||
<template #body="{ data }">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<img alt="flag" src="/demo/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
|
||||
<img alt="flag" src="/demo/images/flag/flag_placeholder.png"
|
||||
:class="`flag flag-${data.country.code}`" style="width: 24px" />
|
||||
<span>{{ data.country.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -279,7 +293,9 @@ const calculateCustomerTotal = (name) => {
|
||||
<Column field="representative.name" header="Representative" style="min-width: 200px">
|
||||
<template #body="{ data }">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
|
||||
<img :alt="data.representative.name"
|
||||
:src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`"
|
||||
style="width: 32px" />
|
||||
<span>{{ data.representative.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -296,7 +312,8 @@ const calculateCustomerTotal = (name) => {
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Row Expand</h5>
|
||||
<DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id" tableStyle="min-width: 60rem">
|
||||
<DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id"
|
||||
tableStyle="min-width: 60rem">
|
||||
<template #header>
|
||||
<div>
|
||||
<Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2 mb-2" />
|
||||
@@ -311,7 +328,8 @@ const calculateCustomerTotal = (name) => {
|
||||
</Column>
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
<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">
|
||||
@@ -322,8 +340,8 @@ const calculateCustomerTotal = (name) => {
|
||||
<Column field="category" header="Category" :sortable="true">
|
||||
<template #body="slotProps">
|
||||
{{ formatCurrency(slotProps.data.category) }}
|
||||
</template></Column
|
||||
>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="rating" header="Reviews" :sortable="true">
|
||||
<template #body="slotProps">
|
||||
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
|
||||
@@ -331,7 +349,8 @@ const calculateCustomerTotal = (name) => {
|
||||
</Column>
|
||||
<Column field="inventoryStatus" header="Status" :sortable="true">
|
||||
<template #body="slotProps">
|
||||
<Tag :severity="getBadgeSeverity(slotProps.data.inventoryStatus)">{{ slotProps.data.inventoryStatus }}</Tag>
|
||||
<Tag :severity="getBadgeSeverity(slotProps.data.inventoryStatus)">{{
|
||||
slotProps.data.inventoryStatus }}</Tag>
|
||||
</template>
|
||||
</Column>
|
||||
<template #expansion="slotProps">
|
||||
@@ -360,7 +379,9 @@ const calculateCustomerTotal = (name) => {
|
||||
</Column>
|
||||
<Column field="status" header="Status" :sortable="true">
|
||||
<template #body="slotProps">
|
||||
<span :class="'order-badge order-' + (slotProps.data.status ? slotProps.data.status.toLowerCase() : '')">{{ slotProps.data.status }}</span>
|
||||
<span
|
||||
:class="'order-badge order-' + (slotProps.data.status ? slotProps.data.status.toLowerCase() : '')">{{
|
||||
slotProps.data.status }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column headerStyle="width:4rem">
|
||||
@@ -378,13 +399,15 @@ const calculateCustomerTotal = (name) => {
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Subheader Grouping</h5>
|
||||
<DataTable :value="customer3" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px">
|
||||
<DataTable :value="customer3" rowGroupMode="subheader" groupRowsBy="representative.name"
|
||||
sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px">
|
||||
<Column field="representative.name" header="Representative"></Column>
|
||||
<Column field="name" header="Name" style="min-width: 200px"></Column>
|
||||
<Column field="country" header="Country" style="min-width: 200px">
|
||||
<template #body="{ data }">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<img alt="flag" src="/demo/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
|
||||
<img alt="flag" src="/demo/images/flag/flag_placeholder.png"
|
||||
:class="`flag flag-${data.country.code}`" style="width: 24px" />
|
||||
<span>{{ data.country.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -392,18 +415,22 @@ const calculateCustomerTotal = (name) => {
|
||||
<Column field="company" header="Company" style="min-width: 200px"></Column>
|
||||
<Column field="status" header="Status" style="min-width: 200px">
|
||||
<template #body="slotProps">
|
||||
<Tag :severity="getSeverity(slotProps.data.status)">{{ slotProps.data.status.toUpperCase() }}</Tag>
|
||||
<Tag :severity="getSeverity(slotProps.data.status)">{{ slotProps.data.status.toUpperCase()
|
||||
}}</Tag>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="date" header="Date" style="min-width: 200px"></Column>
|
||||
<template #groupheader="slotProps">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
|
||||
<img :alt="slotProps.data.representative.name"
|
||||
:src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32"
|
||||
style="vertical-align: middle" />
|
||||
<span>{{ slotProps.data.representative.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #groupfooter="slotProps">
|
||||
<td style="text-align: right" class="text-bold pr-6">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</td>
|
||||
<td style="text-align: right" class="text-bold pr-6">Total Customers: {{
|
||||
calculateCustomerTotal(slotProps.data.representative.name) }}</td>
|
||||
</template>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user