Skip to content

Commit

Permalink
Fixed #979 - FilterService Utility
Browse files Browse the repository at this point in the history
  • Loading branch information
cagataycivici committed Feb 16, 2021
1 parent 49aae7d commit 0115aec
Show file tree
Hide file tree
Showing 4 changed files with 395 additions and 0 deletions.
5 changes: 5 additions & 0 deletions public/demo/menu/menu.json
Original file line number Diff line number Diff line change
Expand Up @@ -377,6 +377,11 @@
"name": "DataView",
"to": "/dataview"
},
{
"name": "FilterService",
"to": "/filterservice",
"badge": "New"
},
{
"name": "FullCalendar",
"to": "/fullcalendar"
Expand Down
5 changes: 5 additions & 0 deletions src/router/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -347,6 +347,11 @@ const routes = [
name: 'fieldset',
component: () => import('../views/fieldset/FieldsetDemo.vue')
},
{
path: '/filterservice',
name: 'filterservice',
component: () => import('../views/filterservice/FilterServiceDemo.vue')
},
{
path: '/fileupload',
name: 'fileupload',
Expand Down
95 changes: 95 additions & 0 deletions src/views/filterservice/FilterServiceDemo.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>FilterService</h1>
<p>FilterService is a helper utility to filter collections against constraints.</p>
</div>
</div>

<div class="content-section implementation">
<div class="card">
<h5>Table Integration</h5>
<p>A custom equals filter that checks for exact case sensitive value is registered and defined as a match mode of a column filter.</p>

<DataTable :value="customers" :paginator="true" class="p-datatable-customers" :rows="10"
dataKey="id" v-model:filters="filters" filterDisplay="row" :loading="loading">
<template #empty>
No customers found.
</template>
<template #loading>
Loading customers data. Please wait.
</template>
<Column field="name" header="Name" :filterMatchModeOptions="matchModeOptions">
<template #body="{data}">
{{data.name}}
</template>
<template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`"/>
</template>
</Column>
<Column header="Country" filterField="country.name" :filterMatchModeOptions="matchModeOptions">
<template #body="{data}">
<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 - ${filterModel.matchMode}`" />
</template>
</Column>
</DataTable>
</div>
</div>

<FilterServiceDoc />
</div>
</template>

<script>
import FilterServiceDoc from './FilterServiceDoc';
import {FilterMatchMode,FilterService} from 'primevue/api';
import CustomerService from '../../service/CustomerService';
const YOUR_FILTER = 'YOUR FILTER';
export default {
data() {
return {
customers: null,
filters: {
'name': {value: null, matchMode: YOUR_FILTER},
'country.name': {value: null, matchMode: FilterMatchMode.STARTS_WITH}
},
matchModeOptions: [
{label: 'Your Equals', value: YOUR_FILTER},
{label: 'Starts With', value: FilterMatchMode.STARTS_WITH}
],
loading: true
}
},
created() {
this.customerService = new CustomerService();
},
mounted() {
this.customerService.getCustomersLarge().then(data => {
this.customers = data;
this.loading = false;
});
FilterService.register(YOUR_FILTER, (value, filter) => {
if (filter === undefined || filter === null || filter.trim() === '') {
return true;
}
if (value === undefined || value === null) {
return false;
}
return value.toString() === filter.toString();
});
},
components: {
'FilterServiceDoc': FilterServiceDoc
}
}
</script>
Loading

0 comments on commit 0115aec

Please sign in to comment.