Source code for new filtering
Cagatay Civici
parent
47eaf46da7
commit
f09acaaffe
|
|
@ -223,12 +223,301 @@
|
|||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<pre v-code><code><template v-pre>
|
||||
<div class="card">
|
||||
<h5>Filter Menu</h5>
|
||||
<p>Filters are displayed in an overlay.</p>
|
||||
<DataTable :value="customers1" :paginator="true" class="p-datatable-customers p-datatable-gridlines" :rows="10"
|
||||
dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1"
|
||||
:globalFilterFields="['name','country.name','representative.name','balance','status']">
|
||||
<template #header>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"/>
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters1['global'].value" placeholder="Keyword Search" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #empty>
|
||||
No customers found.
|
||||
</template>
|
||||
<template #loading>
|
||||
Loading customers data. Please wait.
|
||||
</template>
|
||||
<Column field="name" header="Name">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Name</span>
|
||||
{{data.name}}
|
||||
</template>
|
||||
<template #filter="{filterModel}">
|
||||
<InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by name"/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Country" filterField="country.name">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Country</span>
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
|
||||
<span class="image-text">{{data.country.name}}</span>
|
||||
</template>
|
||||
<template #filter="{filterModel}">
|
||||
<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()" class="p-button-secondary"></Button>
|
||||
</template>
|
||||
<template #filterapply="{filterCallback}">
|
||||
<Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>
|
||||
</template>
|
||||
<template #filterfooter>
|
||||
<div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Agent</span>
|
||||
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
|
||||
<span class="image-text">{{data.representative.name}}</span>
|
||||
</template>
|
||||
<template #filter="{filterModel}">
|
||||
<div class="p-mb-3 p-text-bold">Agent Picker</div>
|
||||
<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 class="image-text">{{slotProps.option.name}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</MultiSelect>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Date" filterField="date" dataType="date">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Date</span>
|
||||
{{formatDate(data.date)}}
|
||||
</template>
|
||||
<template #filter="{filterModel}">
|
||||
<Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Balance" filterField="balance" dataType="numeric">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Balance</span>
|
||||
{{formatCurrency(data.balance)}}
|
||||
</template>
|
||||
<template #filter="{filterModel}">
|
||||
<InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="status" header="Status" :filterMenuStyle="{'width':'14rem'}">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Status</span>
|
||||
<span :class="'customer-badge status-' + data.status">{{data.status}}</span>
|
||||
</template>
|
||||
<template #filter="{filterModel}">
|
||||
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
|
||||
<template #value="slotProps">
|
||||
<span :class="'customer-badge status-' + slotProps.value">{{slotProps.value}}</span>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<span :class="'customer-badge status-' + slotProps.option">{{slotProps.option}}</span>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="activity" header="Activity" :showFilterMatchModes="false">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Status</span>
|
||||
<ProgressBar :value="data.activity" :showValue="false"></ProgressBar>
|
||||
</template>
|
||||
<template #filter={filterModel}>
|
||||
<Slider v-model="filterModel.value" range class="p-m-3"></Slider>
|
||||
<div class="p-d-flex p-ai-center p-jc-between p-px-2">
|
||||
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
|
||||
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="verified" header="Verified" dataType="boolean" headerStyle="width: 8rem" bodyClass="p-text-center">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Verified</span>
|
||||
<i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
|
||||
</template>
|
||||
<template #filter={filterModel}>
|
||||
<TriStateCheckbox v-model="filterModel.value" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Filter Row</h5>
|
||||
<p>Filters are displayed inline within a separate row.</p>
|
||||
<DataTable :value="customers2" :paginator="true" class="p-datatable-customers" :rows="10"
|
||||
dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2"
|
||||
:globalFilterFields="['name','country.name','representative.name','status']">
|
||||
<template #header>
|
||||
<div class="p-d-flex p-jc-end">
|
||||
<span class="p-input-icon-left ">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters2['global'].value" placeholder="Keyword Search" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #empty>
|
||||
No customers found.
|
||||
</template>
|
||||
<template #loading>
|
||||
Loading customers data. Please wait.
|
||||
</template>
|
||||
<Column field="name" header="Name">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Name</span>
|
||||
{{data.name}}
|
||||
</template>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`" v-tooltip.top.focus="'Hit enter key to filter'"/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Country" filterField="country.name">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Country</span>
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
|
||||
<span class="image-text">{{data.country.name}}</span>
|
||||
</template>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<InputText type="text" v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" placeholder="Search by country" v-tooltip.top.focus="'Filter as you type'"/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Agent" filterField="representative" :showFilterMenu="false">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Agent</span>
|
||||
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
|
||||
<span class="image-text">{{data.representative.name}}</span>
|
||||
</template>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<MultiSelect v-model="filterModel.value" @change="filterCallback()" :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 class="image-text">{{slotProps.option.name}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</MultiSelect>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="status" header="Status" :showFilterMenu="false">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Status</span>
|
||||
<span :class="'customer-badge status-' + data.status">{{data.status}}</span>
|
||||
</template>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<Dropdown v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
|
||||
<template #value="slotProps">
|
||||
<span :class="'customer-badge status-' + slotProps.value">{{slotProps.value}}</span>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<span :class="'customer-badge status-' + slotProps.option">{{slotProps.option}}</span>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="verified" header="Verified" dataType="boolean" headerStyle="width: 6rem">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Verified</span>
|
||||
<i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
|
||||
</template>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<TriStateCheckbox v-model="filterModel.value" @change="filterCallback()"/>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
</code></pre>
|
||||
|
||||
<pre v-code.script><code>
|
||||
import CustomerService from '../../service/CustomerService';
|
||||
import {FilterMatchMode,FilterOperator} from 'primevue/api';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
customers1: null,
|
||||
customers2: null,
|
||||
filters1: null,
|
||||
filters2: {
|
||||
'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
|
||||
'name': {value: null, matchMode: FilterMatchMode.STARTS_WITH},
|
||||
'country.name': {value: null, matchMode: FilterMatchMode.STARTS_WITH},
|
||||
'representative': {value: null, matchMode: FilterMatchMode.IN},
|
||||
'status': {value: null, matchMode: FilterMatchMode.EQUALS},
|
||||
'verified': {value: null, matchMode: FilterMatchMode.EQUALS}
|
||||
},
|
||||
representatives: [
|
||||
{name: "Amy Elsner", image: 'amyelsner.png'},
|
||||
{name: "Anna Fali", image: 'annafali.png'},
|
||||
{name: "Asiya Javayant", image: 'asiyajavayant.png'},
|
||||
{name: "Bernardo Dominic", image: 'bernardodominic.png'},
|
||||
{name: "Elwin Sharvill", image: 'elwinsharvill.png'},
|
||||
{name: "Ioni Bowcher", image: 'ionibowcher.png'},
|
||||
{name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'},
|
||||
{name: "Onyama Limba", image: 'onyamalimba.png'},
|
||||
{name: "Stephen Shaw", image: 'stephenshaw.png'},
|
||||
{name: "XuXue Feng", image: 'xuxuefeng.png'}
|
||||
],
|
||||
statuses: [
|
||||
'unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'
|
||||
],
|
||||
loading1: true,
|
||||
loading2: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.customerService = new CustomerService();
|
||||
this.initFilters1();
|
||||
},
|
||||
mounted() {
|
||||
this.customerService.getCustomersLarge().then(data => {
|
||||
this.customers1 = data;
|
||||
this.loading1 = false;
|
||||
this.customers1.forEach(customer => customer.date = new Date(customer.date));
|
||||
});
|
||||
|
||||
this.customerService.getCustomersLarge().then(data => {
|
||||
this.customers2 = data;
|
||||
this.loading2 = false;
|
||||
this.customers2.forEach(customer => customer.date = new Date(customer.date));
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
formatDate(value) {
|
||||
return value.toLocaleDateString('en-US', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
});
|
||||
},
|
||||
formatCurrency(value) {
|
||||
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
|
||||
},
|
||||
clearFilter1() {
|
||||
this.initFilters1();
|
||||
},
|
||||
initFilters1() {
|
||||
this.filters1 = {
|
||||
'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
|
||||
'name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
|
||||
'country.name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
|
||||
'representative': {value: null, matchMode: FilterMatchMode.IN},
|
||||
'date': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.DATE_IS}]},
|
||||
'balance': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]},
|
||||
'status': {operator: FilterOperator.OR, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]},
|
||||
'activity': {value: null, matchMode: FilterMatchMode.BETWEEN},
|
||||
'verified': {value: null, matchMode: FilterMatchMode.EQUALS}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
|
|
|
|||
Loading…
Reference in New Issue