From 31c100bb1286e2c3a2f155c3b3261bd1f1fc6314 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 1 Jul 2020 13:51:46 +0300
Subject: [PATCH] New crud demo

---
 src/service/ProductService.js                 |   2 +-
 src/views/datatable/DataTableCrudDemo.vue     | 512 +++++++++++++-----
 .../datatable/DataTableRowExpandDemo.vue      |   8 +-
 src/views/datatable/DataTableRowGroupDemo.vue |  12 +-
 src/views/dialog/DialogDemo.vue               |   2 +-
 5 files changed, 377 insertions(+), 159 deletions(-)

diff --git a/src/service/ProductService.js b/src/service/ProductService.js
index 78e3eb2bc..2499b2f32 100644
--- a/src/service/ProductService.js
+++ b/src/service/ProductService.js
@@ -9,7 +9,7 @@ export default class ProductService {
 	getProducts() {
 		return axios.get('demo/data/products.json').then(res => res.data.data);
     }
-    
+
     getProductsWithOrdersSmall() {
 		return axios.get('demo/data/products-orders-small.json').then(res => res.data.data);
 	}
diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue
index 415edff73..4b19dba3b 100755
--- a/src/views/datatable/DataTableCrudDemo.vue
+++ b/src/views/datatable/DataTableCrudDemo.vue
@@ -9,51 +9,128 @@
 
 		<div class="content-section implementation">
             <div class="card">
-                <DataTable :value="cars" selectionMode="single" :selection.sync="selectedCar" @row-select="onRowSelect" dataKey="vin"
-                    :paginator="true" :rows="15">
-                    <template #header>
-                        CRUD for Cars
+                <Toolbar class="p-mb-4">
+                    <template slot="left">
+                        <Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" />
+                        <Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                     </template>
-                    <Column field="vin" header="Vin" :sortable="true"></Column>
-                    <Column field="year" header="Year" :sortable="true"></Column>
-                    <Column field="brand" header="Brand" :sortable="true"></Column>
-                    <Column field="color" header="Color" :sortable="true"></Column>
-                    <template #footer>
-                        <div style="text-align:left">
-                            <Button abel="Add" icon="pi pi-plus" @click="addNewCar" />
+
+                    <template slot="right">
+                        <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2" />
+                        <Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"  />
+                    </template>
+                </Toolbar>
+
+                <DataTable ref="dt" :value="products" :selection.sync="selectedProducts" dataKey="id"
+                    :paginator="true" :rows="10" :filters="filters"
+                    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]"
+                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products">
+                    <template #header>
+                        <div class="table-header">
+                            <h5 class="p-m-0">Manage Products</h5>
+                            <span class="p-input-icon-left">
+                                <i class="pi pi-search" />
+                                <InputText v-model="filters['global']" placeholder="Search..." />
+                            </span>
                         </div>
                     </template>
+
+                    <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
+                    <Column field="code" header="Code" sortable></Column>
+                    <Column field="name" header="Name" sortable></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="price" header="Price" sortable>
+                        <template #body="slotProps">
+                            {{formatCurrency(slotProps.data.price)}}
+                        </template>
+                    </Column>
+                    <Column field="category" header="Category" sortable></Column>
+                    <Column field="rating" header="Reviews" sortable>
+                        <template #body="slotProps">
+                           <Rating :value="slotProps.data.rating" :readonly="true" :cancel="false" />
+                        </template>
+                    </Column>
+                    <Column field="inventoryStatus" header="Status" sortable>
+                        <template #body="slotProps">
+                            <span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
+                        </template>
+                    </Column>
+                    <Column>
+                        <template #body="slotProps">
+                            <Button icon="pi pi-pencil" class="p-button-rounded p-button-success p-mr-2" @click="editProduct(slotProps.data)" />
+                            <Button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)" />
+                        </template>
+                    </Column>
                 </DataTable>
             </div>
 
-            <Dialog :visible.sync="dialogVisible" :style="{width: '400px'}" header="Car Details" :modal="true">
-                <div class="p-cardialog-content">
-                    <div class="p-grid p-fluid" v-if="car">
-                        <div class="p-col-4"><label for="vin">Vin</label></div>
-                        <div class="p-col-8">
-                            <InputText id="vin" v-model="car.vin" :disabled="true" autocomplete="off" />
-                        </div>
+            <Dialog :visible.sync="dialogVisible" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
+                <img :src="'demo/images/product/' + product.image" :alt="product.image" class="product-image" v-if="product.image" />
+                <div class="p-field">
+                    <label for="name">Name</label>
+                    <InputText id="name" v-model.trim="product.name" required="true" autofocus />
+                    <small id="name-help" class="p-invalid" v-if="submitted && !product.name">Name is required.</small>
+                </div>
+                <div class="p-field">
+                    <label for="description">Description</label>
+                    <Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" />
+                </div>
 
-                        <div class="p-col-4"><label for="year">Year</label></div>
-                        <div class="p-col-8">
-                            <InputText id="year" v-model="car.year" autocomplete="off" />
+                <div class="p-field">
+                    <label class="p-mb-3">Category</label>
+                    <div class="p-formgrid p-grid">
+                        <div class="p-field-radiobutton p-col-6">
+                            <RadioButton id="category1" name="category" value="Accessories" v-model="product.category" />
+                            <label for="category1">Accessories</label>
                         </div>
-
-                        <div class="p-col-4"><label for="brand">Brand</label></div>
-                        <div class="p-col-8">
-                            <InputText id="brand" v-model="car.brand" autocomplete="off" />
+                        <div class="p-field-radiobutton p-col-6">
+                            <RadioButton id="category2" name="category" value="Clothing" v-model="product.category" />
+                            <label for="category2">Clothing</label>
                         </div>
-
-                        <div class="p-col-4"><label for="color">Color</label></div>
-                        <div class="p-col-8">
-                            <InputText id="color" v-model="car.color" autocomplete="off" />
+                        <div class="p-field-radiobutton p-col-6">
+                            <RadioButton id="category3" name="category" value="Electronics" v-model="product.category" />
+                            <label for="category3">Electronics</label>
+                        </div>
+                        <div class="p-field-radiobutton p-col-6">
+                            <RadioButton id="category4" name="category" value="Fitness" v-model="product.category" />
+                            <label for="category4">Fitness</label>
                         </div>
                     </div>
                 </div>
 
+                <div class="p-formgrid p-grid">
+                    <div class="p-field p-col">
+                        <label for="price">Price</label>
+                        <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
+                    </div>
+                    <div class="p-field p-col">
+                        <label for="quantity">Quantity</label>
+                        <InputNumber id="quantity" v-model="product.quantity" integeronly />
+                    </div>
+                </div>
                 <template #footer>
-                    <Button label="Delete" icon="pi pi-times" @click="deleteCar" class="p-button-danger" />
-                    <Button label="Save" icon="pi pi-check" @click="saveCar" class="p-button-success" />
+                    <Button label="Cancel" icon="pi pi-times" class="p-button-text" @click="hideDialog"/>
+                    <Button label="Save" icon="pi pi-check" class="p-button-text" @click="saveProduct" />
+                </template>
+            </Dialog>
+
+            <Dialog :visible.sync="deleteProductDialogVisible" :style="{width: '450px'}" header="Confirm" :modal="true">
+                <p v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</p>
+                <template #footer>
+                    <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductDialogVisible = false"/>
+                    <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" />
+                </template>
+            </Dialog>
+
+            <Dialog :visible.sync="deleteSelectedProductsDialogVisible" :style="{width: '450px'}" header="Confirm" :modal="true">
+                <p v-if="product">Are you sure you want to delete selected products?</p>
+                <template #footer>
+                    <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteSelectedProductsDialogVisible = false"/>
+                    <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" />
                 </template>
             </Dialog>
 		</div>
@@ -63,122 +140,229 @@
                 <TabPanel header="Source">
 <CodeHighlight>
 <template v-pre>
-&lt;DataTable :value="cars" selectionMode="single" :selection.sync="selectedCar" @row-select="onRowSelect" dataKey="vin"
-    :paginator="true" :rows="15"&gt;
-    &lt;template #header&gt;
-        CRUD for Cars
+&lt;Toolbar class="p-mb-4"&gt;
+    &lt;template slot="left"&gt;
+        &lt;Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" /&gt;
+        &lt;Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" /&gt;
     &lt;/template&gt;
-    &lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
-    &lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
-    &lt;Column field="brand" header="Brand" :sortable="true"&gt;&lt;/Column&gt;
-    &lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
-    &lt;template #footer&gt;
-        &lt;div style="text-align:left"&gt;
-            &lt;Button abel="Add" icon="pi pi-plus" @click="addNewCar" /&gt;
+
+    &lt;template slot="right"&gt;
+        &lt;FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2" /&gt;
+        &lt;Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"  /&gt;
+    &lt;/template&gt;
+&lt;/Toolbar&gt;
+
+&lt;DataTable ref="dt" :value="products" :selection.sync="selectedProducts" dataKey="id"
+    :paginator="true" :rows="10" :filters="filters"
+    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]"
+    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"&gt;
+    &lt;template #header&gt;
+        &lt;div class="table-header"&gt;
+            &lt;h5 class="p-m-0"&gt;Manage Products&lt;/h5&gt;
+            &lt;span class="p-input-icon-left"&gt;
+                &lt;i class="pi pi-search" /&gt;
+                &lt;InputText v-model="filters['global']" placeholder="Search..." /&gt;
+            &lt;/span&gt;
         &lt;/div&gt;
     &lt;/template&gt;
+
+    &lt;Column selectionMode="multiple" headerStyle="width: 3rem"&gt;&lt;/Column&gt;
+    &lt;Column field="code" header="Code" sortable&gt;&lt;/Column&gt;
+    &lt;Column field="name" header="Name" sortable&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="price" header="Price" sortable&gt;
+        &lt;template #body="slotProps"&gt;
+            {{formatCurrency(slotProps.data.price)}}
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="category" header="Category" sortable&gt;&lt;/Column&gt;
+    &lt;Column field="rating" header="Reviews" sortable&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 field="inventoryStatus" header="Status" sortable&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;Column&gt;
+        &lt;template #body="slotProps"&gt;
+            &lt;Button icon="pi pi-pencil" class="p-button-rounded p-button-success p-mr-2" @click="editProduct(slotProps.data)" /&gt;
+            &lt;Button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)" /&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
 &lt;/DataTable&gt;
+&lt;/div&gt;
 
-&lt;Dialog :visible.sync="dialogVisible" :style="{width: '400px'}" header="Car Details" :modal="true"&gt;
-    &lt;div class="p-cardialog-content"&gt;
-        &lt;div class="p-grid p-fluid" v-if="car"&gt;
-            &lt;div class="p-col-4"&gt;&lt;label for="vin"&gt;Vin&lt;/label&gt;&lt;/div&gt;
-            &lt;div class="p-col-8"&gt;
-                &lt;InputText id="vin" v-model="car.vin" :disabled="true" autocomplete="off" /&gt;
-            &lt;/div&gt;
+&lt;Dialog :visible.sync="dialogVisible" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid"&gt;
+&lt;img :src="'demo/images/product/' + product.image" :alt="product.image" class="product-image" v-if="product.image" /&gt;
+&lt;div class="p-field"&gt;
+    &lt;label for="name"&gt;Name&lt;/label&gt;
+    &lt;InputText id="name" v-model.trim="product.name" required="true" autofocus /&gt;
+    &lt;small id="name-help" class="p-invalid" v-if="submitted && !product.name"&gt;Name is required.&lt;/small&gt;
+&lt;/div&gt;
+&lt;div class="p-field"&gt;
+    &lt;label for="description"&gt;Description&lt;/label&gt;
+    &lt;Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" /&gt;
+&lt;/div&gt;
 
-            &lt;div class="p-col-4"&gt;&lt;label for="year"&gt;Year&lt;/label&gt;&lt;/div&gt;
-            &lt;div class="p-col-8"&gt;
-                &lt;InputText id="year" v-model="car.year" autocomplete="off" /&gt;
-            &lt;/div&gt;
-
-            &lt;div class="p-col-4"&gt;&lt;label for="brand"&gt;Brand&lt;/label&gt;&lt;/div&gt;
-            &lt;div class="p-col-8"&gt;
-                &lt;InputText id="brand" v-model="car.brand" autocomplete="off" /&gt;
-            &lt;/div&gt;
-
-            &lt;div class="p-col-4"&gt;&lt;label for="color"&gt;Color&lt;/label&gt;&lt;/div&gt;
-            &lt;div class="p-col-8"&gt;
-                &lt;InputText id="color" v-model="car.color" autocomplete="off" /&gt;
-            &lt;/div&gt;
+&lt;div class="p-field"&gt;
+    &lt;label class="p-mb-3"&gt;Category&lt;/label&gt;
+    &lt;div class="p-formgrid p-grid"&gt;
+        &lt;div class="p-field-radiobutton p-col-6"&gt;
+            &lt;RadioButton id="category1" name="category" value="Accessories" v-model="product.category" /&gt;
+            &lt;label for="category1"&gt;Accessories&lt;/label&gt;
+        &lt;/div&gt;
+        &lt;div class="p-field-radiobutton p-col-6"&gt;
+            &lt;RadioButton id="category2" name="category" value="Clothing" v-model="product.category" /&gt;
+            &lt;label for="category2"&gt;Clothing&lt;/label&gt;
+        &lt;/div&gt;
+        &lt;div class="p-field-radiobutton p-col-6"&gt;
+            &lt;RadioButton id="category3" name="category" value="Electronics" v-model="product.category" /&gt;
+            &lt;label for="category3"&gt;Electronics&lt;/label&gt;
+        &lt;/div&gt;
+        &lt;div class="p-field-radiobutton p-col-6"&gt;
+            &lt;RadioButton id="category4" name="category" value="Fitness" v-model="product.category" /&gt;
+            &lt;label for="category4"&gt;Fitness&lt;/label&gt;
         &lt;/div&gt;
     &lt;/div&gt;
+&lt;/div&gt;
 
-    &lt;template #footer&gt;
-        &lt;Button label="Delete" icon="pi pi-times" @click="deleteCar" class="p-button-danger" /&gt;
-        &lt;Button label="Save" icon="pi pi-check" @click="saveCar" class="p-button-success" /&gt;
-    &lt;/template&gt;
+&lt;div class="p-formgrid p-grid"&gt;
+    &lt;div class="p-field p-col"&gt;
+        &lt;label for="price"&gt;Price&lt;/label&gt;
+        &lt;InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" /&gt;
+    &lt;/div&gt;
+    &lt;div class="p-field p-col"&gt;
+        &lt;label for="quantity"&gt;Quantity&lt;/label&gt;
+        &lt;InputNumber id="quantity" v-model="product.quantity" integeronly /&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+&lt;template #footer&gt;
+    &lt;Button label="Cancel" icon="pi pi-times" class="p-button-text" @click="hideDialog"/&gt;
+    &lt;Button label="Save" icon="pi pi-check" class="p-button-text" @click="saveProduct" /&gt;
+&lt;/template&gt;
+&lt;/Dialog&gt;
+
+&lt;Dialog :visible.sync="deleteProductDialogVisible" :style="{width: '450px'}" header="Confirm" :modal="true"&gt;
+&lt;p v-if="product"&gt;Are you sure you want to delete &lt;b&gt;{{product.name}}&lt;/b&gt;?&lt;/p&gt;
+&lt;template #footer&gt;
+    &lt;Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductDialogVisible = false"/&gt;
+    &lt;Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" /&gt;
+&lt;/template&gt;
+&lt;/Dialog&gt;
+
+&lt;Dialog :visible.sync="deleteSelectedProductsDialogVisible" :style="{width: '450px'}" header="Confirm" :modal="true"&gt;
+&lt;p v-if="product"&gt;Are you sure you want to delete selected products?&lt;/p&gt;
+&lt;template #footer&gt;
+    &lt;Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteSelectedProductsDialogVisible = false"/&gt;
+    &lt;Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" /&gt;
+&lt;/template&gt;
 &lt;/Dialog&gt;
 </template>
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
-import CarService from '../../service/CarService';
+import ProductService from '../../service/ProductService';
 
 export default {
     data() {
         return {
-            cars: null,
+            products: null,
             dialogVisible: false,
-            car: null,
-            selectedCar: null
+            deleteProductDialogVisible: false,
+            deleteSelectedProductsDialogVisible: false,
+            product: {},
+            selectedProducts: null,
+            filters: {},
+            submitted: false
         }
     },
-    carService: null,
+    productService: null,
     created() {
-        this.carService = new CarService();
+        this.productService = new ProductService();
     },
     mounted() {
-        this.carService.getCarsSmall().then(data => this.cars = data);
+        this.productService.getProducts().then(data => this.products = data);
     },
     methods: {
-        addNewCar() {
-            this.car = {vin: this.generateVin(), year: '', brand: '', color: ''};
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+        },
+        openNew() {
+            this.product = {};
             this.dialogVisible = true;
         },
-        deleteCar() {
-            let index = this.findIndexByVin(this.car.vin);
-            this.cars = this.cars.filter((val,i) => i !== index);
+        hideDialog() {
             this.dialogVisible = false;
-            this.car = null;
-            this.selectedCar = null;
+            this.submitted = false;
         },
-        saveCar() {
-            let index = this.findIndexByVin(this.car.vin);
-            let cars = [...this.cars];
-            if (index === -1)
-                cars.push(this.car);
-            else
-                cars[index] = this.car;
+        saveProduct() {
+            this.submitted = true;
+
+            if (this.product.id) {
+                this.$set(this.products, this.findIndexById(this.product.id), this.product);
+                this.$toast.add({severity:'success', summary: 'Product Updated', life: 3000});
+            }
+            else {
+                this.product.id = this.createId();
+                this.products.push(this.product);
+                this.$toast.add({severity:'success', summary: 'Product Created', life: 3000});
+            }
 
-            this.cars = cars;
             this.dialogVisible = false;
-            this.car = null;
-            this.selectedCar = null;
+            this.product = {};
+
         },
-        onRowSelect(event) {
-            this.car = {...event.data};
+        editProduct(product) {
+            this.product = {...product};
             this.dialogVisible = true;
         },
-        generateVin() {
-            let result = '';
-            let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-            let charactersLength = characters.length;
-            for ( var i = 0; i &lt; 8; i++ ) {
-                result += characters.charAt(Math.floor(Math.random() * charactersLength));
-            }
-            return result;
+        confirmDeleteProduct(product) {
+            this.product = product;
+            this.deleteProductDialogVisible = true;
         },
-        findIndexByVin(vin) {
+        deleteProduct() {
+            this.products = this.products.filter(val => val.id !== this.product.id);
+            this.deleteProductDialogVisible = false;
+            this.product = {};
+            this.$toast.add({severity:'success', summary: 'Product Deleted', life: 3000});
+        },
+        findIndexById(id) {
             let index = -1;
-            for (let i = 0; i &lt; this.cars.length; i++) {
-                if (this.cars[i].vin === vin) {
+            for (let i = 0; i &lt; this.products.length; i++) {
+                if (this.products[i].id === id) {
                     index = i;
                     break;
                 }
             }
 
             return index;
+        },
+        createId() {
+            let id = '';
+            var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+            for ( var i = 0; i &lt; 5; i++ ) {
+                id += chars.charAt(Math.floor(Math.random() * chars.length));
+            }
+            return id;
+        },
+        exportCSV() {
+            this.$refs.dt.exportCSV();
+        },
+        confirmDeleteSelected() {
+            this.deleteSelectedProductsDialogVisible = true;
+        },
+        deleteSelectedProducts() {
+            this.products = this.products.filter(val => !this.selectedProducts.includes(val));
+            this.deleteSelectedProductsDialogVisible = false;
+            this.selectedProducts = null;
+            this.$toast.add({severity:'success', summary: 'Completed', life: 3000});
         }
     }
 }
@@ -190,87 +374,121 @@ export default {
 </template>
 
 <script>
-import CarService from '../../service/CarService';
+import ProductService from '../../service/ProductService';
 
 export default {
     data() {
         return {
-            cars: null,
+            products: null,
             dialogVisible: false,
-            car: null,
-            selectedCar: null
+            deleteProductDialogVisible: false,
+            deleteSelectedProductsDialogVisible: false,
+            product: {},
+            selectedProducts: null,
+            filters: {},
+            submitted: false
         }
     },
-    carService: null,
+    productService: null,
     created() {
-        this.carService = new CarService();
+        this.productService = new ProductService();
     },
     mounted() {
-        this.carService.getCarsSmall().then(data => this.cars = data);
+        this.productService.getProducts().then(data => this.products = data);
     },
     methods: {
-        addNewCar() {
-            this.car = {vin: this.generateVin(), year: '', brand: '', color: ''};
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+        },
+        openNew() {
+            this.product = {};
             this.dialogVisible = true;
         },
-        deleteCar() {
-            let index = this.findIndexByVin(this.car.vin);
-            this.cars = this.cars.filter((val,i) => i !== index);
+        hideDialog() {
             this.dialogVisible = false;
-            this.car = null;
-            this.selectedCar = null;
+            this.submitted = false;
         },
-        saveCar() {
-            let index = this.findIndexByVin(this.car.vin);
-            let cars = [...this.cars];
-            if (index === -1)
-                cars.push(this.car);
-            else
-                cars[index] = this.car;
+        saveProduct() {
+            this.submitted = true;
+
+            if (this.product.id) {
+                this.$set(this.products, this.findIndexById(this.product.id), this.product);
+                this.$toast.add({severity:'success', summary: 'Product Updated', life: 3000});
+            }
+            else {
+                this.product.id = this.createId();
+                this.products.push(this.product);
+                this.$toast.add({severity:'success', summary: 'Product Created', life: 3000});
+            }
 
-            this.cars = cars;
             this.dialogVisible = false;
-            this.car = null;
-            this.selectedCar = null;
+            this.product = {};
+
         },
-        onRowSelect(event) {
-            this.car = {...event.data};
+        editProduct(product) {
+            this.product = {...product};
             this.dialogVisible = true;
         },
-        generateVin() {
-            let result = '';
-            let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-            let charactersLength = characters.length;
-            for ( var i = 0; i < 8; i++ ) {
-                result += characters.charAt(Math.floor(Math.random() * charactersLength));
-            }
-            return result;
+        confirmDeleteProduct(product) {
+            this.product = product;
+            this.deleteProductDialogVisible = true;
         },
-        findIndexByVin(vin) {
+        deleteProduct() {
+            this.products = this.products.filter(val => val.id !== this.product.id);
+            this.deleteProductDialogVisible = false;
+            this.product = {};
+            this.$toast.add({severity:'success', summary: 'Product Deleted', life: 3000});
+        },
+        findIndexById(id) {
             let index = -1;
-            for (let i = 0; i < this.cars.length; i++) {
-                if (this.cars[i].vin === vin) {
+            for (let i = 0; i < this.products.length; i++) {
+                if (this.products[i].id === id) {
                     index = i;
                     break;
                 }
             }
 
             return index;
+        },
+        createId() {
+            let id = '';
+            var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+            for ( var i = 0; i < 5; i++ ) {
+                id += chars.charAt(Math.floor(Math.random() * chars.length));
+            }
+            return id;
+        },
+        exportCSV() {
+            this.$refs.dt.exportCSV();
+        },
+        confirmDeleteSelected() {
+            this.deleteSelectedProductsDialogVisible = true;
+        },
+        deleteSelectedProducts() {
+            this.products = this.products.filter(val => !this.selectedProducts.includes(val));
+            this.deleteSelectedProductsDialogVisible = false;
+            this.selectedProducts = null;
+            this.$toast.add({severity:'success', summary: 'Completed', life: 3000});
         }
     }
 }
 </script>
 
 <style scoped>
-.p-cardialog-content {
-    padding: 1rem;
+.table-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
-.p-cardialog-content .p-col-4 {
-    padding: .75rem;
+.product-image {
+    width: 100px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
 }
 
-.p-cardialog-content .p-col-8 {
-    padding: .5rem;
+.p-dialog .product-image {
+    width: 150px;
+    margin: 0 auto 2rem auto;
+    display: block;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableRowExpandDemo.vue b/src/views/datatable/DataTableRowExpandDemo.vue
index 6adce955d..aa9c127a3 100755
--- a/src/views/datatable/DataTableRowExpandDemo.vue
+++ b/src/views/datatable/DataTableRowExpandDemo.vue
@@ -35,7 +35,7 @@
                            <Rating :value="slotProps.data.rating" :readonly="true" :cancel="false" />
                         </template>
                     </Column>
-                    <Column header="Status" sortable>
+                    <Column field="inventoryStatus" header="Status" sortable>
                         <template #body="slotProps">
                             <span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
                         </template>
@@ -52,7 +52,7 @@
                                         {{formatCurrency(slotProps.data.amount)}}
                                     </template>
                                 </Column>
-                                <Column header="Status" sortable>
+                                <Column field="status" header="Status" sortable>
                                     <template #body="slotProps">
                                         <span :class="'order-badge order-' + slotProps.data.status.toLowerCase()">{{slotProps.data.status}}</span>
                                     </template>
@@ -100,7 +100,7 @@
             &lt;Rating :value="slotProps.data.rating" :readonly="true" :cancel="false" /&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;Column header="Status" sortable&gt;
+    &lt;Column field="inventoryStatus" header="Status" sortable&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;
@@ -117,7 +117,7 @@
                         {{formatCurrency(slotProps.data.amount)}}
                     &lt;/template&gt;
                 &lt;/Column&gt;
-                &lt;Column header="Status" sortable&gt;
+                &lt;Column field="status" header="Status" sortable&gt;
                     &lt;template #body="slotProps"&gt;
                         &lt;span :class="'order-badge order-' + slotProps.data.status.toLowerCase()"&gt;{{slotProps.data.status}}&lt;/span&gt;
                     &lt;/template&gt;
diff --git a/src/views/datatable/DataTableRowGroupDemo.vue b/src/views/datatable/DataTableRowGroupDemo.vue
index d7460401a..730af253a 100755
--- a/src/views/datatable/DataTableRowGroupDemo.vue
+++ b/src/views/datatable/DataTableRowGroupDemo.vue
@@ -27,7 +27,7 @@
                             <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
                         </template>
                     </Column>
-                    <Column field="date" header="date"></Column>
+                    <Column field="date" header="Date"></Column>
                     <template #groupheader="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>
@@ -60,7 +60,7 @@
                             <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
                         </template>
                     </Column>
-                    <Column field="date" header="date"></Column>
+                    <Column field="date" header="Date"></Column>
                     <template #groupheader="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>
@@ -100,7 +100,7 @@
                             <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
                         </template>
                     </Column>
-                    <Column field="date" header="date"></Column>
+                    <Column field="date" header="Date"></Column>
                 </DataTable>
             </div>
 		</div>
@@ -129,7 +129,7 @@
                 &lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column field="date" header="date"&gt;&lt;/Column&gt;
+        &lt;Column field="date" header="Date"&gt;&lt;/Column&gt;
         &lt;template #groupheader="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;
@@ -162,7 +162,7 @@
                 &lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column field="date" header="date"&gt;&lt;/Column&gt;
+        &lt;Column field="date" header="Date"&gt;&lt;/Column&gt;
         &lt;template #groupheader="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;
@@ -202,7 +202,7 @@
                 &lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column field="date" header="date"&gt;&lt;/Column&gt;
+        &lt;Column field="date" header="Date"&gt;&lt;/Column&gt;
     &lt;/DataTable&gt;
 &lt;/div&gt;
 </template>
diff --git a/src/views/dialog/DialogDemo.vue b/src/views/dialog/DialogDemo.vue
index 114732d93..714751bbb 100755
--- a/src/views/dialog/DialogDemo.vue
+++ b/src/views/dialog/DialogDemo.vue
@@ -11,7 +11,7 @@
             <div class="card">
                 <h5>Basic</h5>
                 <Button label="Show" icon="pi pi-external-link" @click="openBasic" />
-                <Dialog header="Header " :visible.sync="displayBasic" :style="{width: '50vw'}">
+                <Dialog header="Header" :visible.sync="displayBasic" :style="{width: '50vw'}">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat