From 68a89c7903d563c9040292765802eb26e9718927 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 30 Jun 2020 15:32:48 +0300
Subject: [PATCH] Templating demo

---
 .../datatable/DataTableTemplatingDemo.vue     | 172 +++++++++++++-----
 1 file changed, 130 insertions(+), 42 deletions(-)

diff --git a/src/views/datatable/DataTableTemplatingDemo.vue b/src/views/datatable/DataTableTemplatingDemo.vue
index 829d678d8..d3a730d56 100755
--- a/src/views/datatable/DataTableTemplatingDemo.vue
+++ b/src/views/datatable/DataTableTemplatingDemo.vue
@@ -9,35 +9,42 @@
 
 		<div class="content-section implementation">
             <div class="card">
-                <DataTable :value="cars">
+                <DataTable :value="products">
                     <template #header>
                         <div class="table-header">
-                            List of Cars
+                            Products
                             <Button icon="pi pi-refresh" />
                         </div>
                     </template>
-                    <Column field="vin" header="Vin"></Column>
-                    <Column field="year" header="Year"></Column>
-                    <Column field="brand" header="Brand">
-                        <template #body="slotProps">
-                            <img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"  width="48px"/>
+                    <Column field="name" header="Name"></Column>
+                    <Column header="Image">
+                         <template #body="slotProps">
+                            <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
                         </template>
                     </Column>
-                    <Column field="color" header="Color"></Column>
-                    <Column headerStyle="width: 8em" bodyStyle="text-align: center">
-                        <template #header>
-                            <Button type="button" icon="pi pi-cog"></Button>
-                        </template>
+                    <Column field="price" header="Price">
                         <template #body="slotProps">
-                            <Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"></Button>
-                            <Button type="button" icon="pi pi-pencil" class="p-button-warning"></Button>
+                            {{formatCurrency(slotProps.data.price)}}
+                        </template>
+                    </Column>
+                    <Column field="category" header="Category"></Column>
+                    <Column field="rating" header="Reviews">
+                        <template #body="slotProps">
+                           <Rating :value="slotProps.data.rating" :readonly="true" :cancel="false" />
+                        </template>
+                    </Column>
+                    <Column header="Status">
+                        <template #body="slotProps">
+                            <span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
                         </template>
                     </Column>
                     <template #footer>
-                        In total there are {{cars ? cars.length : 0 }} cars.
+                        In total there are {{products ? products.length : 0 }} products.
                     </template>
                 </DataTable>
             </div>
+
+            
 		</div>
 
         <div class="content-section documentation">
@@ -45,54 +52,101 @@
                 <TabPanel header="Source">
 <CodeHighlight>
 <template v-pre>
-&lt;DataTable :value="cars"&gt;
+&lt;DataTable :value="products"&gt;
     &lt;template #header&gt;
-        &lt;div style="line-height:1.87em" class="p-clearfix"&gt;
-            &lt;Button icon="pi pi-refresh" style="float: left"/&gt;
-            List of Cars
+        &lt;div class="table-header"&gt;
+            Products
+            &lt;Button icon="pi pi-refresh" /&gt;
         &lt;/div&gt;
     &lt;/template&gt;
-    &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
-    &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
-    &lt;Column field="brand" header="Brand"&gt;
-        &lt;template #body="slotProps"&gt;
-            &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"  width="48px"/&gt;
+    &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
+    &lt;Column header="Image"&gt;
+            &lt;template #body="slotProps"&gt;
+            &lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
-    &lt;Column headerStyle="width: 8em" bodyStyle="text-align: center"&gt;
-        &lt;template #header&gt;
-            &lt;Button type="button" icon="pi pi-cog"&gt;&lt;/Button&gt;
-        &lt;/template&gt;
+    &lt;Column field="price" header="Price"&gt;
         &lt;template #body="slotProps"&gt;
-            &lt;Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"&gt;&lt;/Button&gt;
-            &lt;Button type="button" icon="pi pi-pencil" class="p-button-warning"&gt;&lt;/Button&gt;
+            {{formatCurrency(slotProps.data.price)}}
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
+    &lt;Column field="rating" header="Reviews"&gt;
+        &lt;template #body="slotProps"&gt;
+            &lt;Rating :value="slotProps.data.rating" :readonly="true" :cancel="false" /&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column header="Status"&gt;
+        &lt;template #body="slotProps"&gt;
+            &lt;span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
     &lt;template #footer&gt;
-        In total there are &#123;&#123;cars ? cars.length : 0 &#125;&#125; cars.
+        In total there are {{products ? products.length : 0 }} products.
     &lt;/template&gt;
 &lt;/DataTable&gt;
 </template>
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
-import CarService from '../../service/CarService';
+import ProductService from '../../service/ProductService';
 
 export default {
     data() {
         return {
-            cars: null
+            products: null
         }
     },
-    carService: null,
+    productService: null,
     created() {
-        this.carService = new CarService();
+        this.productService = new ProductService();
     },
     mounted() {
-        this.carService.getCarsSmall().then(data => this.cars = data);
+        this.productService.getProductsSmall().then(data => this.products = data);
+    },
+    methods: {
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+        }
     }
 }
+</CodeHighlight>
+
+<CodeHighlight lang="css">
+.table-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.product-badge {
+    border-radius: 2px;
+    padding: .25em .5rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: .3px;
+
+    &.status-instock {
+        background: #C8E6C9;
+        color: #256029;
+    }
+    
+    &.status-outofstock {
+        background: #FFCDD2;
+        color: #C63737;
+    }
+    
+    &.status-lowstock {
+        background: #FEEDAF;
+        color: #8A5340;
+    }
+}
+
+.product-image {
+    width: 100px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
+}
 </CodeHighlight>
 
                 </TabPanel>
@@ -102,20 +156,25 @@ export default {
 </template>
 
 <script>
-import CarService from '../../service/CarService';
+import ProductService from '../../service/ProductService';
 
 export default {
     data() {
         return {
-            cars: null
+            products: null
         }
     },
-    carService: null,
+    productService: null,
     created() {
-        this.carService = new CarService();
+        this.productService = new ProductService();
     },
     mounted() {
-        this.carService.getCarsSmall().then(data => this.cars = data);
+        this.productService.getProductsSmall().then(data => this.products = data);
+    },
+    methods: {
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+        }
     }
 }
 </script>
@@ -126,4 +185,33 @@ export default {
     align-items: center;
     justify-content: space-between;
 }
+
+.product-badge {
+    border-radius: 2px;
+    padding: .25em .5rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: .3px;
+
+    &.status-instock {
+        background: #C8E6C9;
+        color: #256029;
+    }
+    
+    &.status-outofstock {
+        background: #FFCDD2;
+        color: #C63737;
+    }
+    
+    &.status-lowstock {
+        background: #FEEDAF;
+        color: #8A5340;
+    }
+}
+
+.product-image {
+    width: 100px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
+}
 </style>
\ No newline at end of file