From bd299170b26ee9e3da6d5eee0276a20a3cee2e2b Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 14 Jun 2022 14:06:35 +0300
Subject: [PATCH] Update demo

---
 src/views/dynamicdialog/DynamicDialogDemo.vue | 13 +++++++-----
 src/views/dynamicdialog/InfoDemo.vue          |  6 ++++--
 src/views/dynamicdialog/ProductListDemo.vue   | 20 +++++++++++++------
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/views/dynamicdialog/DynamicDialogDemo.vue b/src/views/dynamicdialog/DynamicDialogDemo.vue
index b4436a7e6..5f1be3584 100644
--- a/src/views/dynamicdialog/DynamicDialogDemo.vue
+++ b/src/views/dynamicdialog/DynamicDialogDemo.vue
@@ -10,7 +10,7 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <Button label="Show" @click="onShow" />
+                <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
 
                 <DynamicDialog />
             </div>
@@ -28,13 +28,16 @@ import DynamicDialogDoc from './DynamicDialogDoc.vue';
 
 export default {
     methods:{
-        onShow() {
+        showProducts() {
             const dialogRef = this.$dialog.open(ProductListDemo, {
                 props: {
                     header: 'Product List',
                     style: {
-                        width: '50%',
-                        height: '550px',
+                        width: '50vw',
+                    },
+                    breakpoints:{
+                        '960px': '75vw',
+                        '640px': '90vw'
                     },
                     modal: true
                 },
@@ -42,7 +45,7 @@ export default {
                     footer: () => {
                         return [
                             h(Button, { label: "No", icon: "pi pi-times", onClick: () => dialogRef.hide({ buttonType: 'No' }), class: "p-button-text" }),
-                            h(Button, { label: "Yes", icon: "pi pi-check", onClick: () => dialogRef.hide({ buttonType: 'Yes' }), autofocus: true })
+                            h(Button, { label: "Yes", icon: "pi pi-check", onClick: () => dialogRef.hide({ buttonType: 'Yes' }), autofocus: true})
                         ]
                     }
                 },
diff --git a/src/views/dynamicdialog/InfoDemo.vue b/src/views/dynamicdialog/InfoDemo.vue
index 12337bcac..e3587e339 100644
--- a/src/views/dynamicdialog/InfoDemo.vue
+++ b/src/views/dynamicdialog/InfoDemo.vue
@@ -1,7 +1,9 @@
 <template>
-    <div class="flex flex-column align-items-center justify-content-center row-gap-3">
+    <div>
         <p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
-        <Button type="button" label="Close" @click="closeDialog"></Button>
+        <div class="flex justify-content-end">
+            <Button type="button" label="Close" @click="closeDialog"></Button>
+        </div>
     </div>
 </template>
 
diff --git a/src/views/dynamicdialog/ProductListDemo.vue b/src/views/dynamicdialog/ProductListDemo.vue
index 57c117f8e..e959c30a9 100644
--- a/src/views/dynamicdialog/ProductListDemo.vue
+++ b/src/views/dynamicdialog/ProductListDemo.vue
@@ -1,17 +1,25 @@
 <template>
 	<div>
-        <Button label="Info" icon="pi pi-info-circle" class="p-button-sm p-button-outlined p-button-info my-2" @click="onInfoShow" />
+        <div class="flex justify-content-end mt-1 mb-3">
+            <Button icon="pi pi-external-link" label="Nested Dialog" class="p-button-outlined p-button-success" @click="showInfo" />
+        </div>
         <DataTable :value="products" responsiveLayout="scroll">
 			<Column field="code" header="Code"></Column>
 			<Column field="name" header="Name"></Column>
+            <Column header="Image">
+                <template #body="slotProps">
+                    <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
+                </template>
+            </Column>
 			<Column field="category" header="Category"></Column>
 			<Column field="quantity" header="Quantity"></Column>
-            <Column>
+            <Column style="width:5rem">
                 <template #body="slotProps">
-                    <Button type="button" icon="pi pi-cog" @click="closeDialog(slotProps.data)"></Button>
+                    <Button type="button" icon="pi pi-plus" class="p-button-text p-button-rounded" @click="selectProduct(slotProps.data)"></Button>
                 </template>
             </Column>
 		</DataTable>
+
 	</div>
 </template>
 
@@ -31,13 +39,13 @@ export default {
         this.productService = new ProductService();
     },
     mounted() {
-        this.productService.getProductsSmall().then(data => this.products = data);
+        this.productService.getProductsSmall().then(data => this.products = data.slice(0,5));
     },
     methods: {
-        closeDialog(data) {
+        selectProduct(data) {
             this.dialogRef.hide(data);
         },
-        onInfoShow() {
+        showInfo() {
             this.$dialog.open(InfoDemo, {
                 props: {
                     header: 'Information',