From 70552919a0e03f27873d80c5dc329f16c2a6c9aa Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 30 Jun 2020 18:09:07 +0300
Subject: [PATCH] State demo

---
 src/assets/styles/app/_demo.scss           |  23 ++
 src/views/datatable/DataTableDemo.vue      |  23 --
 src/views/datatable/DataTableStateDemo.vue | 446 +++++++++++----------
 3 files changed, 259 insertions(+), 233 deletions(-)

diff --git a/src/assets/styles/app/_demo.scss b/src/assets/styles/app/_demo.scss
index 9e43c9850..05506fe2a 100644
--- a/src/assets/styles/app/_demo.scss
+++ b/src/assets/styles/app/_demo.scss
@@ -59,4 +59,27 @@
         background: #FEEDAF;
         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%;
 }
\ No newline at end of file
diff --git a/src/views/datatable/DataTableDemo.vue b/src/views/datatable/DataTableDemo.vue
index d21984b06..620d4d718 100755
--- a/src/views/datatable/DataTableDemo.vue
+++ b/src/views/datatable/DataTableDemo.vue
@@ -178,25 +178,6 @@ export default {
 </script>
 
 <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 {
     .p-paginator-current {
         margin-left: auto;
@@ -212,10 +193,6 @@ export default {
     }
 }
 
-/deep/ .p-column-filter {
-    width: 100%;
-}
-
 .table-header {
     display: flex;
     justify-content: space-between;
diff --git a/src/views/datatable/DataTableStateDemo.vue b/src/views/datatable/DataTableStateDemo.vue
index ff5b19327..24a61cfe9 100755
--- a/src/views/datatable/DataTableStateDemo.vue
+++ b/src/views/datatable/DataTableStateDemo.vue
@@ -10,88 +10,118 @@
 		<div class="content-section implementation">
             <div class="card">
                 <h5>Session Storage</h5>
-                <DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters"
-                    :selection.sync="selectedCar1" selectionMode="single" dataKey="vin"
+                <DataTable :value="customers" :paginator="true" :rows="10" :filters.sync="filters1"
+                    :selection.sync="selectedCustomer1" selectionMode="single" dataKey="id"
                     stateStorage="session" stateKey="dt-state-demo-session">
                     <template #header>
-                        <div style="text-align: right">
-                            <i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i>
-                            <InputText v-model="filters['global']" placeholder="Global Search" size="50" />
-                        </div>
+                       <span class="p-input-icon-left">
+                            <i class="pi pi-search" />
+                            <InputText v-model="filters1['global']" placeholder="Global Search" />
+                        </span>
                     </template>
-                    <Column field="vin" header="Vin" filterMatchMode="startsWith" :sortable="true">
+                    <Column field="name" header="Name" :sortable="true">
                         <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>
                     </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>
-                            <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>
                     </Column>
-                    <Column field="brand" header="Brand" filterMatchMode="equals" :sortable="true">
-                        <template #filter>
-                            <Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true">
+                    <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in">
+                        <template #body="slotProps">
+                            <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">
-                                    <div class="p-clearfix p-dropdown-car-option">
-                                        <img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
-                                        <span>{{slotProps.option.brand}}</span>
+                                    <div class="p-multiselect-representative-option">
+                                        <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <span class="image-text">{{slotProps.option.name}}</span>
                                     </div>
                                 </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>
                         </template>
                     </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>
-                        No records found.
+                        No customers found.
                     </template>
                 </DataTable>
             </div>
 
             <div class="card">
                 <h5>Local Storage</h5>
-                <DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters"
-                    :selection.sync="selectedCar2" selectionMode="single" dataKey="vin"
-                    stateStorage="local" stateKey="dt-state-demo-local">
+                <DataTable :value="customers" :paginator="true" :rows="10" :filters.sync="filters2"
+                    :selection.sync="selectedCustomer2" selectionMode="single" dataKey="id"
+                    stateStorage="session" stateKey="dt-state-demo-local">
                     <template #header>
-                        <div style="text-align: right">
-                            <i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i>
-                            <InputText v-model="filters['global']" placeholder="Global Search" size="50" />
-                        </div>
+                       <span class="p-input-icon-left">
+                            <i class="pi pi-search" />
+                            <InputText v-model="filters2['global']" placeholder="Global Search" />
+                        </span>
                     </template>
-                    <Column field="vin" header="Vin" filterMatchMode="startsWith" :sortable="true">
+                    <Column field="name" header="Name" :sortable="true">
                         <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>
                     </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>
-                            <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>
                     </Column>
-                    <Column field="brand" header="Brand" filterMatchMode="equals" :sortable="true">
-                        <template #filter>
-                            <Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true">
+                    <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in">
+                        <template #body="slotProps">
+                            <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">
-                                    <div class="p-clearfix p-dropdown-car-option">
-                                        <img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
-                                        <span>{{slotProps.option.brand}}</span>
+                                    <div class="p-multiselect-representative-option">
+                                        <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <span class="image-text">{{slotProps.option.name}}</span>
                                     </div>
                                 </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>
                         </template>
                     </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>
-                        No records found.
+                        No customers found.
                     </template>
                 </DataTable>
             </div>
@@ -102,132 +132,161 @@
                 <TabPanel header="Source">
 <CodeHighlight>
 <template v-pre>
-&lt;h3&gt;Session Storage&lt;/h3&gt;
-&lt;DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters"
-    :selection.sync="selectedCar1" selectionMode="single" dataKey="vin"
-    stateStorage="session" stateKey="dt-state-demo-session"&gt;
-    &lt;template #header&gt;
-        &lt;div style="text-align: right"&gt;
-            &lt;i class="pi pi-search" style="margin: 4px 4px 0px 0px;"&gt;&lt;/i&gt;
-            &lt;InputText v-model="filters['global']" placeholder="Global Search" size="50" /&gt;
-        &lt;/div&gt;
-    &lt;/template&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;div class="card"&gt;
+    &lt;h5&gt;Session Storage&lt;/h5&gt;
+    &lt;DataTable :value="customers" :paginator="true" :rows="10" :filters.sync="filters1"
+        :selection.sync="selectedCustomer1" selectionMode="single" dataKey="id"
+        stateStorage="session" stateKey="dt-state-demo-session"&gt;
+        &lt;template #header&gt;
+            &lt;span class="p-input-icon-left"&gt;
+                &lt;i class="pi pi-search" /&gt;
+                &lt;InputText v-model="filters1['global']" placeholder="Global Search" /&gt;
+            &lt;/span&gt;
         &lt;/template&gt;
-    &lt;/Column&gt;
-    &lt;Column field="year" header="Year" filterMatchMode="contains" :sortable="true"&gt;
-        &lt;template #filter&gt;
-            &lt;InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" /&gt;
+        &lt;Column field="name" header="Name" :sortable="true"&gt;
+            &lt;template #filter&gt;
+                &lt;InputText type="text" v-model="filters1['name']" class="p-column-filter" placeholder="Search by name"/&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;/Column&gt;
-    &lt;Column field="brand" header="Brand" filterMatchMode="equals" :sortable="true"&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;/DataTable&gt;
+    &lt;/div&gt;
 
-&lt;h3&gt;Local Storage&lt;/h3&gt;
-&lt;DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters"
-    :selection.sync="selectedCar2" selectionMode="single" dataKey="vin"
-    stateStorage="local" stateKey="dt-state-demo-local"&gt;
-    &lt;template #header&gt;
-        &lt;div style="text-align: right"&gt;
-            &lt;i class="pi pi-search" style="margin: 4px 4px 0px 0px;"&gt;&lt;/i&gt;
-            &lt;InputText v-model="filters['global']" placeholder="Global Search" size="50" /&gt;
-        &lt;/div&gt;
-    &lt;/template&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;div class="card"&gt;
+    &lt;h5&gt;Local Storage&lt;/h5&gt;
+    &lt;DataTable :value="customers" :paginator="true" :rows="10" :filters.sync="filters2"
+        :selection.sync="selectedCustomer2" selectionMode="single" dataKey="id"
+        stateStorage="session" stateKey="dt-state-demo-local"&gt;
+        &lt;template #header&gt;
+            &lt;span class="p-input-icon-left"&gt;
+                &lt;i class="pi pi-search" /&gt;
+                &lt;InputText v-model="filters2['global']" placeholder="Global Search" /&gt;
+            &lt;/span&gt;
         &lt;/template&gt;
-    &lt;/Column&gt;
-    &lt;Column field="year" header="Year" filterMatchMode="contains" :sortable="true"&gt;
-        &lt;template #filter&gt;
-            &lt;InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" /&gt;
+        &lt;Column field="name" header="Name" :sortable="true"&gt;
+            &lt;template #filter&gt;
+                &lt;InputText type="text" v-model="filters2['name']" class="p-column-filter" placeholder="Search by name"/&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;/Column&gt;
-    &lt;Column field="brand" header="Brand" filterMatchMode="equals" :sortable="true"&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;/DataTable&gt;
+    &lt;/div&gt;
 </template>
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
-import CarService from '../../service/CarService';
+import CustomerService from '../../service/CustomerService';
+import DataTableDoc from './DataTableDoc';
 
 export default {
     data() {
         return {
-            filters: {},
-            brands: [
-                {brand: 'Audi', value: 'Audi'},
-                {brand: 'BMW', value: 'BMW'},
-                {brand: 'Fiat', value: 'Fiat'},
-                {brand: 'Honda', value: 'Honda'},
-                {brand: 'Jaguar', value: 'Jaguar'},
-                {brand: 'Mercedes', value: 'Mercedes'},
-                {brand: 'Renault', value: 'Renault'},
-                {brand: 'Volkswagen', value: 'Volkswagen'},
-                {brand: 'Volvo', value: 'Volvo'}
+            customers: null,
+            selectedCustomer1: null,
+            selectedCustomer2: null,
+            filters1: {},
+            filters2: {},
+            loading: true,
+            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'}
             ],
-            colors: [
-                {name: 'White', value: 'White'},
-                {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
+            statuses: [
+                'unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'
+            ]
         }
     },
-    carService: null,
     created() {
-        this.carService = new CarService();
+        this.customerService = new CustomerService();
     },
     mounted() {
-        this.carService.getCarsMedium().then(data => this.cars = data);
+        this.customerService.getCustomersMedium().then(data => this.customers = data);
     }
 }
 </CodeHighlight>
@@ -238,73 +297,40 @@ export default {
 </template>
 
 <script>
-import CarService from '../../service/CarService';
+import CustomerService from '../../service/CustomerService';
+import DataTableDoc from './DataTableDoc';
 
 export default {
     data() {
         return {
-            filters: {},
-            brands: [
-                {brand: 'Audi', value: 'Audi'},
-                {brand: 'BMW', value: 'BMW'},
-                {brand: 'Fiat', value: 'Fiat'},
-                {brand: 'Honda', value: 'Honda'},
-                {brand: 'Jaguar', value: 'Jaguar'},
-                {brand: 'Mercedes', value: 'Mercedes'},
-                {brand: 'Renault', value: 'Renault'},
-                {brand: 'Volkswagen', value: 'Volkswagen'},
-                {brand: 'Volvo', value: 'Volvo'}
+            customers: null,
+            selectedCustomer1: null,
+            selectedCustomer2: null,
+            filters1: {},
+            filters2: {},
+            loading: true,
+            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'}
             ],
-            colors: [
-                {name: 'White', value: 'White'},
-                {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
+            statuses: [
+                'unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'
+            ]
         }
     },
-    carService: null,
     created() {
-        this.carService = new CarService();
+        this.customerService = new CustomerService();
     },
     mounted() {
-        this.carService.getCarsMedium().then(data => this.cars = data);
+        this.customerService.getCustomersMedium().then(data => this.customers = data);
     }
 }
-</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>
\ No newline at end of file
+</script>
\ No newline at end of file