vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

responsive demo global filter fix

pull/1237/head
Tuğçe Küçükoğlu 2021-05-03 12:32:17 +03:00
parent e230370091
commit 40f82b34c6
1 changed files with 48 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/views/responsive/ResponsiveDemo.vue
View File

@ -270,7 +270,7 @@
DataTable DataTable
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters['global']" placeholder="Global Search" /> <InputText v-model="filters['global'].value" placeholder="Global Search" />
</span> </span>
</div> </div>
</template> </template>
@ -523,6 +523,7 @@
</template> </template>
<script> <script>
import { FilterMatchMode, FilterOperator } from 'primevue/api';
import CustomerService from '../../service/CustomerService'; import CustomerService from '../../service/CustomerService';
import CountryService from '../../service/CountryService'; import CountryService from '../../service/CountryService';
import ProductService from '../../service/ProductService'; import ProductService from '../../service/ProductService';
@ -530,12 +531,11 @@ import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
customers: null, customers: null,
selectedCustomers: null, selectedCustomers: null,
products: null, products: null,
selectedProduct: null, selectedProduct: null,
filters: {}, filters: null,
floatValue: null, floatValue: null,
autoValue: null, autoValue: null,
selectedAutoValue: null, selectedAutoValue: null,
@ -1000,7 +1000,7 @@ export default {
DataTable DataTable
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters['global']" placeholder="Global Search" /> <InputText v-model="filters['global'].value" placeholder="Global Search" />
</span> </span>
</div> </div>
</template> </template>
@ -1255,6 +1255,7 @@ export default {
</template> </template>
<script> <script>
import { FilterMatchMode, FilterOperator } from 'primevue/api';
import CustomerService from './service/CustomerService'; import CustomerService from './service/CustomerService';
import CountryService from './service/CountryService'; import CountryService from './service/CountryService';
import ProductService from './service/ProductService'; import ProductService from './service/ProductService';
@ -1266,7 +1267,7 @@ export default {
selectedCustomers: null, selectedCustomers: null,
products: null, products: null,
selectedProduct: null, selectedProduct: null,
filters: {}, filters: null,
floatValue: null, floatValue: null,
autoValue: null, autoValue: null,
selectedAutoValue: null, selectedAutoValue: null,
@ -1470,6 +1471,7 @@ export default {
this.countryService = new CountryService(); this.countryService = new CountryService();
this.customerService = new CustomerService(); this.customerService = new CustomerService();
this.productService = new ProductService(); this.productService = new ProductService();
this.initFilters();
}, },
mounted() { mounted() {
this.countryService.getCountries().then(data => this.autoValue = data); this.countryService.getCountries().then(data => this.autoValue = data);
@ -1544,6 +1546,19 @@ export default {
onProductSelect(event) { onProductSelect(event) {
this.$refs.op.hide(); this.$refs.op.hide();
this.$toast.add({severity:'info', summary: 'Product Selected', detail: event.data.name, life: 3000}); this.$toast.add({severity:'info', summary: 'Product Selected', detail: event.data.name, life: 3000});
},
initFilters() {
this.filters = {
'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}
}
} }
} }
} }
@ -1877,7 +1892,7 @@ export default {
DataTable DataTable
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters['global']" placeholder="Global Search" /> <InputText v-model="filters['global'].value" placeholder="Global Search" />
</span> </span>
</div> </div>
</template> </template>
@ -2132,7 +2147,8 @@ export default {
</template> </template>
<script> <script>
import {ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { FilterMatchMode, FilterOperator } from 'primevue/api';
import { useToast } from 'primevue/usetoast'; import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm'; import { useConfirm } from 'primevue/useconfirm';
import CustomerService from './service/CustomerService'; import CustomerService from './service/CustomerService';
@ -2153,7 +2169,17 @@ export default {
const selectedCustomers = ref(null); const selectedCustomers = ref(null);
const products = ref(null); const products = ref(null);
const selectedProduct = ref(null); const selectedProduct = ref(null);
const filters = ref({}); const filters = ref({
'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}
});
const floatValue = ref(null); const floatValue = ref(null);
const autoValue = ref(null); const autoValue = ref(null);
const selectedAutoValue = ref(null); const selectedAutoValue = ref(null);
@ -2506,6 +2532,7 @@ export default {
this.countryService = new CountryService(); this.countryService = new CountryService();
this.customerService = new CustomerService(); this.customerService = new CustomerService();
this.productService = new ProductService(); this.productService = new ProductService();
this.initFilters();
}, },
mounted() { mounted() {
this.countryService.getCountries().then(data => this.autoValue = data); this.countryService.getCountries().then(data => this.autoValue = data);
@ -2580,6 +2607,19 @@ export default {
onProductSelect(event) { onProductSelect(event) {
this.$refs.op.hide(); this.$refs.op.hide();
this.$toast.add({severity:'info', summary: 'Product Selected', detail: event.data.name, life: 3000}); this.$toast.add({severity:'info', summary: 'Product Selected', detail: event.data.name, life: 3000});
},
initFilters() {
this.filters = {
'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}
}
} }
} }
} }