Refactored filtering to be more flexible
Cagatay Civici
parent
005c818922
commit
b53a5a81b7
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div :class="containerClass">
|
||||
<div class="p-fluid p-column-filter-element" v-if="display === 'row'" >
|
||||
<component :is="filterElement" :field="field" />
|
||||
<component :is="filterElement" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
|
||||
</div>
|
||||
<button ref="icon" v-if="showMenuButton" type="button" class="p-column-filter-menu-button p-link" aria-haspopup="true" :aria-expanded="overlayVisible"
|
||||
:class="{'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter()}"
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<div v-for="(fieldConstraint,i) of fieldConstraints" :key="i" class="p-column-filter-constraint">
|
||||
<CFDropdown v-if="showMatchModes && matchModes" :options="matchModes" :modelValue="fieldConstraint.matchMode" optionLabel="label" optionValue="value"
|
||||
@update:modelValue="onMenuMatchModeChange($event, i)" class="p-column-filter-matchmode-dropdown"></CFDropdown>
|
||||
<component v-if="display === 'menu'" :is="filterElement" :field="field" :index="i"/>
|
||||
<component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
|
||||
<div v-if="i !== 0">
|
||||
<CFButton v-if="showRemoveIcon" type="button" icon="pi pi-trash" class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm" @click="removeConstraint(i)" :label="removeRuleButtonLabel"></CFButton>
|
||||
</div>
|
||||
|
|
@ -54,7 +54,7 @@ import Dropdown from 'primevue/dropdown';
|
|||
import Button from 'primevue/button';
|
||||
|
||||
export default {
|
||||
emits: ['filtermeta-change'],
|
||||
emits: ['filter-change', 'filter-apply'],
|
||||
props: {
|
||||
field: {
|
||||
type: String,
|
||||
|
|
@ -150,12 +150,12 @@ export default {
|
|||
_filters[this.field].matchMode = this.defaultMatchMode;
|
||||
}
|
||||
|
||||
this.$emit('filtermeta-change', _filters);
|
||||
this.$emit('filter-change', _filters);
|
||||
this.$emit('filter-apply');
|
||||
this.hide();
|
||||
},
|
||||
applyFilter() {
|
||||
let _filters = {...this.filters};
|
||||
this.$emit('filtermeta-change', _filters);
|
||||
this.$emit('filter-apply');
|
||||
this.hide();
|
||||
},
|
||||
hasFilter() {
|
||||
|
|
@ -215,7 +215,8 @@ export default {
|
|||
onRowMatchModeChange(matchMode) {
|
||||
let _filters = {...this.filters};
|
||||
_filters[this.field].matchMode = matchMode;
|
||||
this.$emit('filtermeta-change', _filters);
|
||||
this.$emit('filter-change', _filters);
|
||||
this.$emit('filter-apply');
|
||||
this.hide();
|
||||
},
|
||||
onRowMatchModeKeyDown(event) {
|
||||
|
|
@ -248,6 +249,37 @@ export default {
|
|||
isRowMatchModeSelected(matchMode) {
|
||||
return (this.filters[this.field]).matchMode === matchMode;
|
||||
},
|
||||
onOperatorChange(value) {
|
||||
let _filters = {...this.filters};
|
||||
_filters[this.field].forEach(filterMeta => {
|
||||
filterMeta.operator = value;
|
||||
});
|
||||
|
||||
if (!this.showApplyButton) {
|
||||
this.$emit('filter-change', _filters);
|
||||
}
|
||||
},
|
||||
onMenuMatchModeChange(value, index) {
|
||||
let _filters = {...this.filters};
|
||||
_filters[this.field][index].matchMode = value;
|
||||
|
||||
if (!this.showApplyButton) {
|
||||
this.$emit('filter-change', _filters);
|
||||
}
|
||||
},
|
||||
addConstraint() {
|
||||
let _filters = {...this.filters};
|
||||
_filters[this.field].push({value: null, matchMode: this.defaultMatchMode});
|
||||
this.$emit('filter-change', _filters);
|
||||
},
|
||||
removeConstraint(index) {
|
||||
let _filters = {...this.filters};
|
||||
_filters[this.field].splice(index, 1);
|
||||
this.$emit('filter-change', _filters);
|
||||
},
|
||||
filterCallback() {
|
||||
this.$emit('filter-apply');
|
||||
},
|
||||
findNextItem(item) {
|
||||
let nextItem = item.nextElementSibling;
|
||||
|
||||
|
|
@ -340,34 +372,6 @@ export default {
|
|||
window.removeEventListener('resize', this.resizeListener);
|
||||
this.resizeListener = null;
|
||||
}
|
||||
},
|
||||
onOperatorChange(value) {
|
||||
let _filters = {...this.filters};
|
||||
_filters[this.field].forEach(filterMeta => {
|
||||
filterMeta.operator = value;
|
||||
});
|
||||
|
||||
if (!this.showApplyButton) {
|
||||
this.$emit('filtermeta-change', _filters);
|
||||
}
|
||||
},
|
||||
onMenuMatchModeChange(value, index) {
|
||||
let _filters = {...this.filters};
|
||||
_filters[this.field][index].matchMode = value;
|
||||
|
||||
if (!this.showApplyButton) {
|
||||
this.$emit('filtermeta-change', _filters);
|
||||
}
|
||||
},
|
||||
addConstraint() {
|
||||
let _filters = {...this.filters};
|
||||
_filters[this.field].push({value: null, matchMode: this.defaultMatchMode});
|
||||
this.$emit('filtermeta-change', _filters);
|
||||
},
|
||||
removeConstraint(index) {
|
||||
let _filters = {...this.filters};
|
||||
_filters[this.field].splice(index, 1);
|
||||
this.$emit('filtermeta-change', _filters);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@
|
|||
<table ref="table" role="grid">
|
||||
<DTTableHeader :columnGroup="headerColumnGroup" :columns="columns" :rowGroupMode="rowGroupMode"
|
||||
:groupRowsBy="groupRowsBy" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"
|
||||
:sortMode="sortMode" :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta" :filters="filters" :filterDisplay="filterDisplay"
|
||||
@column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)" @filtermeta-change="onFilterMetaChange"
|
||||
:sortMode="sortMode" :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta" :filters="d_filters" :filterDisplay="filterDisplay"
|
||||
@column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)" @filter-change="onFilterChange" @filter-apply="onFilterApply"
|
||||
@column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)"
|
||||
@column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
|
||||
<DTTableBody :value="dataToRender" :columns="columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
|
||||
|
|
@ -372,10 +372,6 @@ export default {
|
|||
virtualScrollDelay: {
|
||||
type: Number,
|
||||
default: 150
|
||||
},
|
||||
filterLayout: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -388,7 +384,8 @@ export default {
|
|||
d_selectionKeys: null,
|
||||
d_expandedRowKeys: null,
|
||||
d_columnOrder: null,
|
||||
d_editingRowKeys: null
|
||||
d_editingRowKeys: null,
|
||||
d_filters: this.cloneFilters(this.filters)
|
||||
};
|
||||
},
|
||||
rowTouched: false,
|
||||
|
|
@ -439,6 +436,9 @@ export default {
|
|||
if (this.dataKey) {
|
||||
this.updateEditingRowKeys(newValue);
|
||||
}
|
||||
},
|
||||
filters(newValue) {
|
||||
this.d_filters = this.cloneFilters(newValue);
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
|
|
@ -1703,8 +1703,23 @@ export default {
|
|||
getChildren() {
|
||||
return this.$slots.default ? this.$slots.default() : null;
|
||||
},
|
||||
onFilterMetaChange(event) {
|
||||
this.$emit('update:filters', event)
|
||||
onFilterChange(filters) {
|
||||
this.d_filters = filters;
|
||||
},
|
||||
onFilterApply() {
|
||||
this.$emit('update:filters', this.d_filters);
|
||||
},
|
||||
cloneFilters() {
|
||||
let cloned = {};
|
||||
if (this.filters) {
|
||||
for (let prop in this.filters) {
|
||||
if (Object.prototype.hasOwnProperty.call(this.filters, prop)) {
|
||||
cloned[prop] = {...this.filters[prop]};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return cloned;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode') ==='multiple' && filterDisplay !== 'row'" />
|
||||
<DTColumnFilter v-if="filterDisplay === 'menu' && filters && filters[columnProp(col, 'filterField')||columnProp(col, 'field')]" :field="columnProp(col, 'filterField')||columnProp(col, 'field')" :type="columnProp(col, 'dataType')" display="menu"
|
||||
:showMenu="columnProp(col, 'showFilterMenu')" :filterElement="col.children && col.children.filter" :filterHeader="col.children && col.children.filterHeader" :filterFooter="col.children && col.children.filterFooter"
|
||||
:filters="filters" @filtermeta-change="$emit('filtermeta-change', $event)"
|
||||
:filters="filters" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
|
||||
:showOperator="columnProp(col, 'showFilterOperator')" :showClearButton="columnProp(col, 'showClearButton')" :showApplyButton="columnProp(col, 'showApplyButton')"
|
||||
:showMatchModes="columnProp(col, 'showFilterMatchModes')" :showAddButton="columnProp(col, 'showAddButton')" :matchModeOptions="columnProp(col, 'filterMatchModeOptions')" :maxConstraints="columnProp(col, 'maxConstraints')" />
|
||||
</div>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
:class="getFilterColumnHeaderClass(col)" :style="columnProp(col, 'filterHeaderStyle')">
|
||||
<DTColumnFilter v-if="filters && filters[columnProp(col, 'filterField')||columnProp(col, 'field')]" :field="columnProp(col, 'filterField')||columnProp(col, 'field')" :type="columnProp(col, 'dataType')" display="row"
|
||||
:showMenu="columnProp(col, 'showFilterMenu')" :filterElement="col.children && col.children.filter" :filterHeader="col.children && col.children.filterHeader" :filterFooter="col.children && col.children.filterFooter"
|
||||
:filters="filters" @filtermeta-change="$emit('filtermeta-change', $event)"
|
||||
:filters="filters" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
|
||||
:showOperator="columnProp(col, 'showFilterOperator')" :showClearButton="columnProp(col, 'showClearButton')" :showApplyButton="columnProp(col, 'showApplyButton')"
|
||||
:showMatchModes="columnProp(col, 'showFilterMatchModes')" :showAddButton="columnProp(col, 'showAddButton')" :matchModeOptions="columnProp(col, 'filterMatchModeOptions')" :maxConstraints="columnProp(col, 'maxConstraints')" />
|
||||
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode')==='multiple'" />
|
||||
|
|
@ -62,7 +62,7 @@ import ColumnFilter from './ColumnFilter';
|
|||
|
||||
export default {
|
||||
emits: ['column-click', 'column-mousedown', 'column-dragstart', 'column-dragover', 'column-dragleave', 'column-drop',
|
||||
'column-resizestart', 'checkbox-change', 'column-click','filtermeta-change'],
|
||||
'column-resizestart', 'checkbox-change', 'column-click','filter-change', 'filter-apply'],
|
||||
props: {
|
||||
columnGroup: {
|
||||
type: null,
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@
|
|||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<h5>Filter Menu</h5>
|
||||
<p>Filters are displayed in an overlay..</p>
|
||||
<p>Filters are displayed in an overlay.</p>
|
||||
<DataTable :value="customers1" :paginator="true" class="p-datatable-customers p-datatable-gridlines" :rows="10"
|
||||
dataKey="id" :filters="filters1" filterDisplay="menu" :loading="loading1">
|
||||
dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1">
|
||||
<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()"/>
|
||||
|
|
@ -29,33 +29,33 @@
|
|||
Loading customers data. Please wait.
|
||||
</template>
|
||||
<Column field="name" header="Name">
|
||||
<template #body="slotProps">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Name</span>
|
||||
{{slotProps.data.name}}
|
||||
{{data.name}}
|
||||
</template>
|
||||
<template #filter="{index}">
|
||||
<InputText type="text" v-model="filters1['name'][index].value" class="p-column-filter" placeholder="Search by name"/>
|
||||
<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="slotProps">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Country</span>
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
|
||||
<span class="image-text">{{slotProps.data.country.name}}</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="{index}">
|
||||
<InputText type="text" v-model="filters1['country.name'][index].value" class="p-column-filter" placeholder="Search by country"/>
|
||||
<template #filter="{filterModel}">
|
||||
<InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country"/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :showFilterOperator="false" :showAddButton="false">
|
||||
<template #body="slotProps">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Agent</span>
|
||||
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
|
||||
<span class="image-text">{{slotProps.data.representative.name}}</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>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<div class="p-mb-3 p-text-bold">Agent Picker</div>
|
||||
<MultiSelect v-model="filters1['representative'].value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
|
||||
<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" />
|
||||
|
|
@ -66,30 +66,30 @@
|
|||
</template>
|
||||
</Column>
|
||||
<Column header="Date" filterField="date" dataType="date">
|
||||
<template #body="slotProps">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Date</span>
|
||||
{{slotProps.data.date}}
|
||||
{{data.date}}
|
||||
</template>
|
||||
<template #filter="{index}">
|
||||
<Calendar v-model="filters1['date'][index].value" dateFormat="mm/dd/yy" />
|
||||
<template #filter="{filterModel}">
|
||||
<Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Balance" filterField="balance" dataType="numeric">
|
||||
<template #body="slotProps">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Balance</span>
|
||||
{{formatCurrency(slotProps.data.balance)}}
|
||||
{{formatCurrency(data.balance)}}
|
||||
</template>
|
||||
<template #filter="{index}">
|
||||
<InputNumber v-model="filters1['balance'][index].value" mode="currency" currency="USD" locale="en-US" />
|
||||
<template #filter="{filterModel}">
|
||||
<InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="status" header="Status">
|
||||
<template #body="slotProps">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Status</span>
|
||||
<span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
|
||||
<span :class="'customer-badge status-' + data.status">{{data.status}}</span>
|
||||
</template>
|
||||
<template #filter="{index}">
|
||||
<Dropdown v-model="filters1['status'][index].value" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
|
||||
<template #filter="{filterModel}">
|
||||
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
|
||||
<template #option="slotProps">
|
||||
<span :class="'customer-badge status-' + slotProps.option">{{slotProps.option}}</span>
|
||||
</template>
|
||||
|
|
@ -97,12 +97,12 @@
|
|||
</template>
|
||||
</Column>
|
||||
<Column field="activity" header="Activity" :showFilterMatchModes="false" :showFilterOperator="false" :showAddButton="false">
|
||||
<template #body="slotProps">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Status</span>
|
||||
<ProgressBar :value="slotProps.data.activity" :showValue="false"></ProgressBar>
|
||||
<ProgressBar :value="data.activity" :showValue="false"></ProgressBar>
|
||||
</template>
|
||||
<template #filter>
|
||||
<Slider v-model="filters1['activity'].value" range class="p-m-3"></Slider>
|
||||
<template #filter={filterModel,filterCallback}>
|
||||
<Slider v-model="filterModel.value" range @slideend="filterCallback()" class="p-m-3"></Slider>
|
||||
<div class="p-d-flex p-ai-center p-jc-between p-px-2">
|
||||
<span>{{filters1['activity'].value[0]}}</span>
|
||||
<span>{{filters1['activity'].value[1]}}</span>
|
||||
|
|
@ -110,12 +110,12 @@
|
|||
</template>
|
||||
</Column>
|
||||
<Column field="verified" header="Verified" dataType="boolean" headerStyle="width: 8rem" bodyClass="p-text-center" :showFilterMatchModes="false" :showFilterOperator="false" :showAddButton="false">
|
||||
<template #body="slotProps">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Verified</span>
|
||||
<i class="pi" :class="{'true-icon pi-check-circle': slotProps.data.verified, 'false-icon pi-times-circle': !slotProps.data.verified}"></i>
|
||||
<i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
|
||||
</template>
|
||||
<template #filter>
|
||||
<TriStateCheckbox v-model="filters1['verified'].value" />
|
||||
<template #filter={filterModel,filterCallback}>
|
||||
<TriStateCheckbox v-model="filterModel.value" @change="filterCallback()" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
<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" :filters="filters2" filterDisplay="row" :loading="loading2">
|
||||
dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2">
|
||||
<template #header>
|
||||
<div class="p-d-flex p-jc-end">
|
||||
<span class="p-input-icon-left ">
|
||||
|
|
@ -141,32 +141,32 @@
|
|||
Loading customers data. Please wait.
|
||||
</template>
|
||||
<Column field="name" header="Name">
|
||||
<template #body="slotProps">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Name</span>
|
||||
{{slotProps.data.name}}
|
||||
{{data.name}}
|
||||
</template>
|
||||
<template #filter>
|
||||
<InputText type="text" v-model="filters2['name'].value" class="p-column-filter" placeholder="Search by name"/>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by name"/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Country" filterField="country.name">
|
||||
<template #body="slotProps">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Country</span>
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
|
||||
<span class="image-text">{{slotProps.data.country.name}}</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>
|
||||
<InputText type="text" v-model="filters2['country.name'].value" class="p-column-filter" placeholder="Search by country"/>
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search by country"/>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Agent" filterField="representative" :showFilterMenu="false">
|
||||
<template #body="slotProps">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Agent</span>
|
||||
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
|
||||
<span class="image-text">{{slotProps.data.representative.name}}</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>
|
||||
<MultiSelect v-model="filters2['representative'].value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
|
||||
<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" />
|
||||
|
|
@ -177,12 +177,12 @@
|
|||
</template>
|
||||
</Column>
|
||||
<Column field="status" header="Status" :showFilterMenu="false">
|
||||
<template #body="slotProps">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Status</span>
|
||||
<span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
|
||||
<span :class="'customer-badge status-' + data.status">{{data.status}}</span>
|
||||
</template>
|
||||
<template #filter>
|
||||
<Dropdown v-model="filters2['status'].value" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<Dropdown v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
|
||||
<template #option="slotProps">
|
||||
<span :class="'customer-badge status-' + slotProps.option">{{slotProps.option}}</span>
|
||||
</template>
|
||||
|
|
@ -190,12 +190,12 @@
|
|||
</template>
|
||||
</Column>
|
||||
<Column field="verified" header="Verified" dataType="boolean" headerStyle="width: 6rem">
|
||||
<template #body="slotProps">
|
||||
<template #body="{data}">
|
||||
<span class="p-column-title">Verified</span>
|
||||
<i class="pi" :class="{'true-icon pi-check-circle': slotProps.data.verified, 'false-icon pi-times-circle': !slotProps.data.verified}"></i>
|
||||
<i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
|
||||
</template>
|
||||
<template #filter>
|
||||
<TriStateCheckbox v-model="filters2['verified'].value" />
|
||||
<template #filter="{filterModel,filterCallback}">
|
||||
<TriStateCheckbox v-model="filterModel.value" @change="filterCallback()"/>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
|
|
|||
Loading…
Reference in New Issue