components tag order added
This commit is contained in:
Bahadır Sofuoğlu
@@ -1,3 +1,106 @@
|
||||
<script setup>
|
||||
import { FilterMatchMode, FilterOperator } from 'primevue/api';
|
||||
import CustomerService from '@/layout/service/CustomerService';
|
||||
import ProductService from '@/layout/service/ProductService';
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const customer1 = ref(null);
|
||||
const customer2 = ref(null);
|
||||
const customer3 = ref(null);
|
||||
const filters1 = 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 loading1 = ref(null);
|
||||
const loading2 = ref(null);
|
||||
const idFrozen = ref(false);
|
||||
const products = ref(null);
|
||||
const expandedRows = ref([]);
|
||||
const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
|
||||
const representatives = ref([
|
||||
{ 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' }
|
||||
]);
|
||||
|
||||
const customerService = new CustomerService();
|
||||
const productService = new ProductService();
|
||||
|
||||
onMounted(() => {
|
||||
productService.getProductsWithOrdersSmall().then((data) => (products.value = data));
|
||||
customerService.getCustomersLarge().then((data) => {
|
||||
customer1.value = data;
|
||||
loading1.value = false;
|
||||
customer1.value.forEach((customer) => (customer.date = new Date(customer.date)));
|
||||
});
|
||||
customerService.getCustomersLarge().then((data) => (customer2.value = data));
|
||||
customerService.getCustomersMedium().then((data) => (customer3.value = data));
|
||||
loading2.value = false;
|
||||
});
|
||||
|
||||
const initFilters1 = () => {
|
||||
filters1.value = {
|
||||
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 }
|
||||
};
|
||||
console.log(filters1);
|
||||
};
|
||||
|
||||
const clearFilter1 = () => {
|
||||
initFilters1();
|
||||
};
|
||||
const expandAll = () => {
|
||||
expandedRows.value = products.value.filter((p) => p.id);
|
||||
};
|
||||
const collapseAll = () => {
|
||||
expandedRows.value = null;
|
||||
};
|
||||
const formatCurrency = (value) => {
|
||||
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
|
||||
};
|
||||
|
||||
const formatDate = (value) => {
|
||||
return value.toLocaleDateString('en-US', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
const calculateCustomerTotal = (name) => {
|
||||
let total = 0;
|
||||
if (customer3.value) {
|
||||
for (let customer of customer3.value) {
|
||||
if (customer.representative.name === name) {
|
||||
total++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return total;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
@@ -275,109 +378,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { FilterMatchMode, FilterOperator } from 'primevue/api';
|
||||
import CustomerService from '@/layout/service/CustomerService';
|
||||
import ProductService from '@/layout/service/ProductService';
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const customer1 = ref(null);
|
||||
const customer2 = ref(null);
|
||||
const customer3 = ref(null);
|
||||
const filters1 = 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 loading1 = ref(null);
|
||||
const loading2 = ref(null);
|
||||
const idFrozen = ref(false);
|
||||
const products = ref(null);
|
||||
const expandedRows = ref([]);
|
||||
const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
|
||||
const representatives = ref([
|
||||
{ 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' }
|
||||
]);
|
||||
|
||||
const customerService = new CustomerService();
|
||||
const productService = new ProductService();
|
||||
|
||||
onMounted(() => {
|
||||
productService.getProductsWithOrdersSmall().then((data) => (products.value = data));
|
||||
customerService.getCustomersLarge().then((data) => {
|
||||
customer1.value = data;
|
||||
loading1.value = false;
|
||||
customer1.value.forEach((customer) => (customer.date = new Date(customer.date)));
|
||||
});
|
||||
customerService.getCustomersLarge().then((data) => (customer2.value = data));
|
||||
customerService.getCustomersMedium().then((data) => (customer3.value = data));
|
||||
loading2.value = false;
|
||||
});
|
||||
|
||||
const initFilters1 = () => {
|
||||
filters1.value = {
|
||||
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 }
|
||||
};
|
||||
console.log(filters1);
|
||||
};
|
||||
|
||||
const clearFilter1 = () => {
|
||||
initFilters1();
|
||||
};
|
||||
const expandAll = () => {
|
||||
expandedRows.value = products.value.filter((p) => p.id);
|
||||
};
|
||||
const collapseAll = () => {
|
||||
expandedRows.value = null;
|
||||
};
|
||||
const formatCurrency = (value) => {
|
||||
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
|
||||
};
|
||||
|
||||
const formatDate = (value) => {
|
||||
return value.toLocaleDateString('en-US', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
const calculateCustomerTotal = (name) => {
|
||||
let total = 0;
|
||||
if (customer3.value) {
|
||||
for (let customer of customer3.value) {
|
||||
if (customer.representative.name === name) {
|
||||
total++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return total;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/assets/demo/styles/badges.scss';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user