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

State demo

pull/358/head
cagataycivici 2020-06-30 18:09:07 +03:00
parent 1231f0cd90
commit 70552919a0
3 changed files with 259 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/assets/styles/app/_demo.scss
View File

@ -59,4 +59,27 @@
background: #FEEDAF; background: #FEEDAF;
color: #8A5340; color: #8A5340;
} }
}
.image-text {
vertical-align: middle;
margin-left: .5rem;
}
.p-multiselect-representative-option {
display: inline-block;
vertical-align: middle;
img {
vertical-align: middle;
width: 24px;
}
span {
margin-top: .125rem;
}
}
.p-column-filter {
width: 100%;
} }

23
src/views/datatable/DataTableDemo.vue
View File

@ -178,25 +178,6 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.image-text {
vertical-align: middle;
margin-left: .5rem;
}
.p-multiselect-representative-option {
display: inline-block;
vertical-align: middle;
img {
vertical-align: middle;
width: 24px;
}
span {
margin-top: .125rem;
}
}
/deep/ .p-paginator { /deep/ .p-paginator {
.p-paginator-current { .p-paginator-current {
margin-left: auto; margin-left: auto;
@ -212,10 +193,6 @@ export default {
} }
} }
/deep/ .p-column-filter {
width: 100%;
}
.table-header { .table-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

446
src/views/datatable/DataTableStateDemo.vue
View File

@ -10,88 +10,118 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Session Storage</h5> <h5>Session Storage</h5>
<DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters" <DataTable :value="customers" :paginator="true" :rows="10" :filters.sync="filters1"
:selection.sync="selectedCar1" selectionMode="single" dataKey="vin" :selection.sync="selectedCustomer1" selectionMode="single" dataKey="id"
stateStorage="session" stateKey="dt-state-demo-session"> stateStorage="session" stateKey="dt-state-demo-session">
<template #header> <template #header>
<div style="text-align: right"> <span class="p-input-icon-left">
<i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i> <i class="pi pi-search" />
<InputText v-model="filters['global']" placeholder="Global Search" size="50" /> <InputText v-model="filters1['global']" placeholder="Global Search" />
</div> </span>
</template> </template>
<Column field="vin" header="Vin" filterMatchMode="startsWith" :sortable="true"> <Column field="name" header="Name" :sortable="true">
<template #filter> <template #filter>
<InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" /> <InputText type="text" v-model="filters1['name']" class="p-column-filter" placeholder="Search by name"/>
</template> </template>
</Column> </Column>
<Column field="year" header="Year" filterMatchMode="contains" :sortable="true"> <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains">
<template #body="slotProps">
<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>
</template>
<template #filter> <template #filter>
<InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" /> <InputText type="text" v-model="filters1['country.name']" class="p-column-filter" placeholder="Search by country"/>
</template> </template>
</Column> </Column>
<Column field="brand" header="Brand" filterMatchMode="equals" :sortable="true"> <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in">
<template #filter> <template #body="slotProps">
<Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true"> <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>
</template>
<template #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-clearfix p-dropdown-car-option"> <div class="p-multiselect-representative-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /> <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span>{{slotProps.option.brand}}</span> <span class="image-text">{{slotProps.option.name}}</span>
</div> </div>
</template> </template>
</MultiSelect>
</template>
</Column>
<Column field="status" header="Status" :sortable="true" filterMatchMode="equals">
<template #body="slotProps">
<span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
</template>
<template #filter>
<Dropdown v-model="filters1['status']" :options="statuses" placeholder="Select a Status" class="p-column-filter" :showClear="true">
<template #option="slotProps">
<span :class="'customer-badge status-' + slotProps.option">{{slotProps.option}}</span>
</template>
</Dropdown> </Dropdown>
</template> </template>
</Column> </Column>
<Column field="color" header="Color" filterMatchMode="in" :sortable="true">
<template #filter>
<MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" />
</template>
</Column>
<template #empty> <template #empty>
No records found. No customers found.
</template> </template>
</DataTable> </DataTable>
</div> </div>
<div class="card"> <div class="card">
<h5>Local Storage</h5> <h5>Local Storage</h5>
<DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters" <DataTable :value="customers" :paginator="true" :rows="10" :filters.sync="filters2"
:selection.sync="selectedCar2" selectionMode="single" dataKey="vin" :selection.sync="selectedCustomer2" selectionMode="single" dataKey="id"
stateStorage="local" stateKey="dt-state-demo-local"> stateStorage="session" stateKey="dt-state-demo-local">
<template #header> <template #header>
<div style="text-align: right"> <span class="p-input-icon-left">
<i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i> <i class="pi pi-search" />
<InputText v-model="filters['global']" placeholder="Global Search" size="50" /> <InputText v-model="filters2['global']" placeholder="Global Search" />
</div> </span>
</template> </template>
<Column field="vin" header="Vin" filterMatchMode="startsWith" :sortable="true"> <Column field="name" header="Name" :sortable="true">
<template #filter> <template #filter>
<InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" /> <InputText type="text" v-model="filters2['name']" class="p-column-filter" placeholder="Search by name"/>
</template> </template>
</Column> </Column>
<Column field="year" header="Year" filterMatchMode="contains" :sortable="true"> <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains">
<template #body="slotProps">
<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>
</template>
<template #filter> <template #filter>
<InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" /> <InputText type="text" v-model="filters2['country.name']" class="p-column-filter" placeholder="Search by country"/>
</template> </template>
</Column> </Column>
<Column field="brand" header="Brand" filterMatchMode="equals" :sortable="true"> <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in">
<template #filter> <template #body="slotProps">
<Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true"> <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>
</template>
<template #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-clearfix p-dropdown-car-option"> <div class="p-multiselect-representative-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /> <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span>{{slotProps.option.brand}}</span> <span class="image-text">{{slotProps.option.name}}</span>
</div> </div>
</template> </template>
</MultiSelect>
</template>
</Column>
<Column field="status" header="Status" :sortable="true" filterMatchMode="equals">
<template #body="slotProps">
<span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
</template>
<template #filter>
<Dropdown v-model="filters2['status']" :options="statuses" placeholder="Select a Status" class="p-column-filter" :showClear="true">
<template #option="slotProps">
<span :class="'customer-badge status-' + slotProps.option">{{slotProps.option}}</span>
</template>
</Dropdown> </Dropdown>
</template> </template>
</Column> </Column>
<Column field="color" header="Color" filterMatchMode="in" :sortable="true">
<template #filter>
<MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" />
</template>
</Column>
<template #empty> <template #empty>
No records found. No customers found.
</template> </template>
</DataTable> </DataTable>
</div> </div>
@ -102,132 +132,161 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;h3&gt;Session Storage&lt;/h3&gt; &lt;div class="card"&gt;
&lt;DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters" &lt;h5&gt;Session Storage&lt;/h5&gt;
:selection.sync="selectedCar1" selectionMode="single" dataKey="vin" &lt;DataTable :value="customers" :paginator="true" :rows="10" :filters.sync="filters1"
stateStorage="session" stateKey="dt-state-demo-session"&gt; :selection.sync="selectedCustomer1" selectionMode="single" dataKey="id"
&lt;template #header&gt; stateStorage="session" stateKey="dt-state-demo-session"&gt;
&lt;div style="text-align: right"&gt; &lt;template #header&gt;
&lt;i class="pi pi-search" style="margin: 4px 4px 0px 0px;"&gt;&lt;/i&gt; &lt;span class="p-input-icon-left"&gt;
&lt;InputText v-model="filters['global']" placeholder="Global Search" size="50" /&gt; &lt;i class="pi pi-search" /&gt;
&lt;/div&gt; &lt;InputText v-model="filters1['global']" placeholder="Global Search" /&gt;
&lt;/template&gt; &lt;/span&gt;
&lt;Column field="vin" header="Vin" filterMatchMode="startsWith" :sortable="true"&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;Column field="name" header="Name" :sortable="true"&gt;
&lt;Column field="year" header="Year" filterMatchMode="contains" :sortable="true"&gt; &lt;template #filter&gt;
&lt;template #filter&gt; &lt;InputText type="text" v-model="filters1['name']" class="p-column-filter" placeholder="Search by name"/&gt;
&lt;InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" /&gt; &lt;/template&gt;
&lt;/Column&gt;
&lt;Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains"&gt;
&lt;template #body="slotProps"&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /&gt;
&lt;span class="image-text"&gt;{{slotProps.data.country.name}}&lt;/span&gt;
&lt;/template&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters1['country.name']" class="p-column-filter" placeholder="Search by country"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in"&gt;
&lt;template #body="slotProps"&gt;
&lt;img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /&gt;
&lt;span class="image-text"&gt;{{slotProps.data.representative.name}}&lt;/span&gt;
&lt;/template&gt;
&lt;template #filter&gt;
&lt;MultiSelect v-model="filters1['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-multiselect-representative-option"&gt;
&lt;img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /&gt;
&lt;span class="image-text"&gt;{{slotProps.option.name}}&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/MultiSelect&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="status" header="Status" :sortable="true" filterMatchMode="equals"&gt;
&lt;template #body="slotProps"&gt;
&lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt;
&lt;/template&gt;
&lt;template #filter&gt;
&lt;Dropdown v-model="filters1['status']" :options="statuses" placeholder="Select a Status" class="p-column-filter" :showClear="true"&gt;
&lt;template #option="slotProps"&gt;
&lt;span :class="'customer-badge status-' + slotProps.option"&gt;{{slotProps.option}}&lt;/span&gt;
&lt;/template&gt;
&lt;/Dropdown&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;template #empty&gt;
No customers found.
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/DataTable&gt;
&lt;Column field="brand" header="Brand" filterMatchMode="equals" :sortable="true"&gt; &lt;/div&gt;
&lt;template #filter&gt;
&lt;Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-clearfix p-dropdown-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;&#123;&#123;slotProps.option.brand&#125;&#125;&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Dropdown&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="color" header="Color" filterMatchMode="in" :sortable="true"&gt;
&lt;template #filter&gt;
&lt;MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;template #empty&gt;
No records found.
&lt;/template&gt;
&lt;/DataTable&gt;
&lt;h3&gt;Local Storage&lt;/h3&gt; &lt;div class="card"&gt;
&lt;DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters" &lt;h5&gt;Local Storage&lt;/h5&gt;
:selection.sync="selectedCar2" selectionMode="single" dataKey="vin" &lt;DataTable :value="customers" :paginator="true" :rows="10" :filters.sync="filters2"
stateStorage="local" stateKey="dt-state-demo-local"&gt; :selection.sync="selectedCustomer2" selectionMode="single" dataKey="id"
&lt;template #header&gt; stateStorage="session" stateKey="dt-state-demo-local"&gt;
&lt;div style="text-align: right"&gt; &lt;template #header&gt;
&lt;i class="pi pi-search" style="margin: 4px 4px 0px 0px;"&gt;&lt;/i&gt; &lt;span class="p-input-icon-left"&gt;
&lt;InputText v-model="filters['global']" placeholder="Global Search" size="50" /&gt; &lt;i class="pi pi-search" /&gt;
&lt;/div&gt; &lt;InputText v-model="filters2['global']" placeholder="Global Search" /&gt;
&lt;/template&gt; &lt;/span&gt;
&lt;Column field="vin" header="Vin" filterMatchMode="startsWith" :sortable="true"&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;Column field="name" header="Name" :sortable="true"&gt;
&lt;Column field="year" header="Year" filterMatchMode="contains" :sortable="true"&gt; &lt;template #filter&gt;
&lt;template #filter&gt; &lt;InputText type="text" v-model="filters2['name']" class="p-column-filter" placeholder="Search by name"/&gt;
&lt;InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" /&gt; &lt;/template&gt;
&lt;/Column&gt;
&lt;Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains"&gt;
&lt;template #body="slotProps"&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /&gt;
&lt;span class="image-text"&gt;{{slotProps.data.country.name}}&lt;/span&gt;
&lt;/template&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters2['country.name']" class="p-column-filter" placeholder="Search by country"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in"&gt;
&lt;template #body="slotProps"&gt;
&lt;img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /&gt;
&lt;span class="image-text"&gt;{{slotProps.data.representative.name}}&lt;/span&gt;
&lt;/template&gt;
&lt;template #filter&gt;
&lt;MultiSelect v-model="filters2['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-multiselect-representative-option"&gt;
&lt;img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /&gt;
&lt;span class="image-text"&gt;{{slotProps.option.name}}&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/MultiSelect&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="status" header="Status" :sortable="true" filterMatchMode="equals"&gt;
&lt;template #body="slotProps"&gt;
&lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt;
&lt;/template&gt;
&lt;template #filter&gt;
&lt;Dropdown v-model="filters2['status']" :options="statuses" placeholder="Select a Status" class="p-column-filter" :showClear="true"&gt;
&lt;template #option="slotProps"&gt;
&lt;span :class="'customer-badge status-' + slotProps.option"&gt;{{slotProps.option}}&lt;/span&gt;
&lt;/template&gt;
&lt;/Dropdown&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;template #empty&gt;
No customers found.
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/DataTable&gt;
&lt;Column field="brand" header="Brand" filterMatchMode="equals" :sortable="true"&gt; &lt;/div&gt;
&lt;template #filter&gt;
&lt;Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-clearfix p-dropdown-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;&#123;&#123;slotProps.option.brand&#125;&#125;&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Dropdown&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="color" header="Color" filterMatchMode="in" :sortable="true"&gt;
&lt;template #filter&gt;
&lt;MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;template #empty&gt;
No records found.
&lt;/template&gt;
&lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
import CarService from '../../service/CarService'; import CustomerService from '../../service/CustomerService';
import DataTableDoc from './DataTableDoc';
export default { export default {
data() { data() {
return { return {
filters: {}, customers: null,
brands: [ selectedCustomer1: null,
{brand: 'Audi', value: 'Audi'}, selectedCustomer2: null,
{brand: 'BMW', value: 'BMW'}, filters1: {},
{brand: 'Fiat', value: 'Fiat'}, filters2: {},
{brand: 'Honda', value: 'Honda'}, loading: true,
{brand: 'Jaguar', value: 'Jaguar'}, representatives: [
{brand: 'Mercedes', value: 'Mercedes'}, {name: "Amy Elsner", image: 'amyelsner.png'},
{brand: 'Renault', value: 'Renault'}, {name: "Anna Fali", image: 'annafali.png'},
{brand: 'Volkswagen', value: 'Volkswagen'}, {name: "Asiya Javayant", image: 'asiyajavayant.png'},
{brand: 'Volvo', value: 'Volvo'} {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'}
], ],
colors: [ statuses: [
{name: 'White', value: 'White'}, 'unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'
{name: 'Green', value: 'Green'}, ]
{name: 'Silver', value: 'Silver'},
{name: 'Black', value: 'Black'},
{name: 'Red', value: 'Red'},
{name: 'Maroon', value: 'Maroon'},
{name: 'Brown', value: 'Brown'},
{name: 'Orange', value: 'Orange'},
{name: 'Blue', value: 'Blue'}
],
selectedCar1: null,
selectedCar2: null,
cars: null
} }
}, },
carService: null,
created() { created() {
this.carService = new CarService(); this.customerService = new CustomerService();
}, },
mounted() { mounted() {
this.carService.getCarsMedium().then(data => this.cars = data); this.customerService.getCustomersMedium().then(data => this.customers = data);
} }
} }
</CodeHighlight> </CodeHighlight>
@ -238,73 +297,40 @@ export default {
</template> </template>
<script> <script>
import CarService from '../../service/CarService'; import CustomerService from '../../service/CustomerService';
import DataTableDoc from './DataTableDoc';
export default { export default {
data() { data() {
return { return {
filters: {}, customers: null,
brands: [ selectedCustomer1: null,
{brand: 'Audi', value: 'Audi'}, selectedCustomer2: null,
{brand: 'BMW', value: 'BMW'}, filters1: {},
{brand: 'Fiat', value: 'Fiat'}, filters2: {},
{brand: 'Honda', value: 'Honda'}, loading: true,
{brand: 'Jaguar', value: 'Jaguar'}, representatives: [
{brand: 'Mercedes', value: 'Mercedes'}, {name: "Amy Elsner", image: 'amyelsner.png'},
{brand: 'Renault', value: 'Renault'}, {name: "Anna Fali", image: 'annafali.png'},
{brand: 'Volkswagen', value: 'Volkswagen'}, {name: "Asiya Javayant", image: 'asiyajavayant.png'},
{brand: 'Volvo', value: 'Volvo'} {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'}
], ],
colors: [ statuses: [
{name: 'White', value: 'White'}, 'unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'
{name: 'Green', value: 'Green'}, ]
{name: 'Silver', value: 'Silver'},
{name: 'Black', value: 'Black'},
{name: 'Red', value: 'Red'},
{name: 'Maroon', value: 'Maroon'},
{name: 'Brown', value: 'Brown'},
{name: 'Orange', value: 'Orange'},
{name: 'Blue', value: 'Blue'}
],
selectedCar1: null,
selectedCar2: null,
cars: null
} }
}, },
carService: null,
created() { created() {
this.carService = new CarService(); this.customerService = new CustomerService();
}, },
mounted() { mounted() {
this.carService.getCarsMedium().then(data => this.cars = data); this.customerService.getCustomersMedium().then(data => this.customers = data);
} }
} }
</script> </script>
<style lang="scss" scoped>
/deep/ .p-dropdown-label {
text-align: left;
}
.p-column-filter {
margin-top: .5rem;
}
.p-multiselect {
width: 100%;
margin-top: .5rem;
}
.p-dropdown-car-option {
img {
vertical-align: middle;
margin-right: .5rem;
width: 24px;
}
span {
float: right;
margin-top: .125rem;
}
}
</style>