From f09acaaffeec25646af047186b3bcae2ee1741c2 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Tue, 16 Feb 2021 14:07:25 +0300 Subject: [PATCH] Source code for new filtering --- src/views/datatable/DataTableFilterDemo.vue | 289 ++++++++++++++++++++ 1 file changed, 289 insertions(+) diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue index 2c2276aa5..540934c73 100755 --- a/src/views/datatable/DataTableFilterDemo.vue +++ b/src/views/datatable/DataTableFilterDemo.vue @@ -223,12 +223,301 @@ 

 

+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}
+            }
+        }
+    }
+}