pull/1147/head
Tuğçe Küçükoğlu 2021-04-06 14:55:43 +03:00
parent e0a5809722
commit b40d8d7204
2 changed files with 27 additions and 27 deletions

View File

@ -236,7 +236,7 @@ button {
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
data() { setup() {
const blockedPanel = ref(false); const blockedPanel = ref(false);
const blockedDocument = ref(false); const blockedDocument = ref(false);
const blockDocument = () => { const blockDocument = () => {

View File

@ -184,7 +184,7 @@ export default {
</Column> </Column>
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width:25%"> <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width:25%">
<template #body="slotProps"> <template #body="slotProps">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="30" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="20" />
<span class="image-text">{{slotProps.data.country.name}}</span> <span class="image-text">{{slotProps.data.country.name}}</span>
</template> </template>
<template #filter> <template #filter>
@ -193,14 +193,14 @@ export default {
</Column> </Column>
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width:25%"> <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width:25%">
<template #body="slotProps"> <template #body="slotProps">
<img :alt="slotProps.data.representative.name" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="20" style="vertical-align: middle" />
<span class="image-text">{{slotProps.data.representative.name}}</span> <span class="image-text">{{slotProps.data.representative.name}}</span>
</template> </template>
<template #filter> <template #filter>
<MultiSelect v-model="filters1['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter"> <MultiSelect v-model="filters1['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32" style="vertical-align: middle" /> <img :alt="slotProps.option.name" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="20" style="vertical-align: middle" />
<span class="image-text">{{slotProps.option.name}}</span> <span class="image-text">{{slotProps.option.name}}</span>
</div> </div>
</template> </template>
@ -243,7 +243,7 @@ export default {
</Column> </Column>
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width:25%"> <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width:25%">
<template #body="slotProps"> <template #body="slotProps">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="30" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="20" />
<span class="image-text">{{slotProps.data.country.name}}</span> <span class="image-text">{{slotProps.data.country.name}}</span>
</template> </template>
<template #filter> <template #filter>
@ -252,14 +252,14 @@ export default {
</Column> </Column>
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width:25%"> <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width:25%">
<template #body="slotProps"> <template #body="slotProps">
<img :alt="slotProps.data.representative.name" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="20" style="vertical-align: middle" />
<span class="image-text">{{slotProps.data.representative.name}}</span> <span class="image-text">{{slotProps.data.representative.name}}</span>
</template> </template>
<template #filter> <template #filter>
<MultiSelect v-model="filters2['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter"> <MultiSelect v-model="filters2['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32" style="vertical-align: middle" /> <img :alt="slotProps.option.name" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="20" style="vertical-align: middle" />
<span class="image-text">{{slotProps.option.name}}</span> <span class="image-text">{{slotProps.option.name}}</span>
</div> </div>
</template> </template>
@ -349,7 +349,7 @@ export default {
</Column> </Column>
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width:25%"> <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width:25%">
<template #body="slotProps"> <template #body="slotProps">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="30" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="20" />
<span class="image-text">{{slotProps.data.country.name}}</span> <span class="image-text">{{slotProps.data.country.name}}</span>
</template> </template>
<template #filter> <template #filter>
@ -358,14 +358,14 @@ export default {
</Column> </Column>
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width:25%"> <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width:25%">
<template #body="slotProps"> <template #body="slotProps">
<img :alt="slotProps.data.representative.name" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="20" style="vertical-align: middle" />
<span class="image-text">{{slotProps.data.representative.name}}</span> <span class="image-text">{{slotProps.data.representative.name}}</span>
</template> </template>
<template #filter> <template #filter>
<MultiSelect v-model="filters1['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter"> <MultiSelect v-model="filters1['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32" style="vertical-align: middle" /> <img :alt="slotProps.option.name" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="20" style="vertical-align: middle" />
<span class="image-text">{{slotProps.option.name}}</span> <span class="image-text">{{slotProps.option.name}}</span>
</div> </div>
</template> </template>
@ -408,7 +408,7 @@ export default {
</Column> </Column>
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width:25%"> <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width:25%">
<template #body="slotProps"> <template #body="slotProps">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="30" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="20" />
<span class="image-text">{{slotProps.data.country.name}}</span> <span class="image-text">{{slotProps.data.country.name}}</span>
</template> </template>
<template #filter> <template #filter>
@ -417,14 +417,14 @@ export default {
</Column> </Column>
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width:25%"> <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width:25%">
<template #body="slotProps"> <template #body="slotProps">
<img :alt="slotProps.data.representative.name" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="20" style="vertical-align: middle" />
<span class="image-text">{{slotProps.data.representative.name}}</span> <span class="image-text">{{slotProps.data.representative.name}}</span>
</template> </template>
<template #filter> <template #filter>
<MultiSelect v-model="filters2['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter"> <MultiSelect v-model="filters2['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32" style="vertical-align: middle" /> <img :alt="slotProps.option.name" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="20" style="vertical-align: middle" />
<span class="image-text">{{slotProps.option.name}}</span> <span class="image-text">{{slotProps.option.name}}</span>
</div> </div>
</template> </template>
@ -457,13 +457,18 @@ import CustomerService from './service/CustomerService';
export default { export default {
setup() { setup() {
onMounted(() => {
customerService.value.getCustomersMedium().then(data => customers.value = data);
})
const customers = ref(); const customers = ref();
const customerService = ref(new CustomerService());
const selectedCustomer1 = ref(); const selectedCustomer1 = ref();
const selectedCustomer2 = ref(); const selectedCustomer2 = ref();
const filters1: {}, const filters1 = ref({});
const filters2: {}, const filters2 = ref({});
const loading: true, const loading = ref(true);
const representatives: [ const representatives = ref([
{name: "Amy Elsner", image: 'amyelsner.png'}, {name: "Amy Elsner", image: 'amyelsner.png'},
{name: "Anna Fali", image: 'annafali.png'}, {name: "Anna Fali", image: 'annafali.png'},
{name: "Asiya Javayant", image: 'asiyajavayant.png'}, {name: "Asiya Javayant", image: 'asiyajavayant.png'},
@ -474,17 +479,12 @@ export default {
{name: "Onyama Limba", image: 'onyamalimba.png'}, {name: "Onyama Limba", image: 'onyamalimba.png'},
{name: "Stephen Shaw", image: 'stephenshaw.png'}, {name: "Stephen Shaw", image: 'stephenshaw.png'},
{name: "XuXue Feng", image: 'xuxuefeng.png'} {name: "XuXue Feng", image: 'xuxuefeng.png'}
], ]);
statuses: [ const statuses = ref([
'unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal' 'unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'
] ]);
},
customerService: null, return { customers, customerService, selectedCustomer1, selectedCustomer2, filters1, filters2, loading, representatives, statuses }
created() {
this.customerService = new CustomerService();
},
mounted() {
this.customerService.getCustomersMedium().then(data => this.customers = data);
} }
} }
<\\/script> <\\/script>