From 35b5433d38f0b6621ae1194924d48742e5640527 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Fri, 8 Feb 2019 16:16:00 +0300
Subject: [PATCH] Options for Toast

---
 src/App.vue                           |  3 ++
 src/components/toast/Toast.vue        | 15 +++++++-
 src/components/toast/ToastMessage.vue |  6 ++-
 src/components/toast/ToastService.js  |  6 +++
 src/views/toast/ToastDemo.vue         | 55 ++++++++++++++++++++++++---
 5 files changed, 78 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a076bd7b0..633046367 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,6 +8,9 @@
             <app-footer />
         </div>
         <Toast />
+        <Toast position="topleft" group="tl" />
+        <Toast position="bottomleft" group="bl" />
+        <Toast position="bottomright" group="br" />
     </div>
 </template>
 
diff --git a/src/components/toast/Toast.vue b/src/components/toast/Toast.vue
index cb04bbe7c..eb6c81a01 100644
--- a/src/components/toast/Toast.vue
+++ b/src/components/toast/Toast.vue
@@ -12,6 +12,7 @@ var messageIdx = 0;
 
 export default {
     props: {
+        group: String,
         position: {
             type: String,
             default: 'topright'
@@ -23,7 +24,19 @@ export default {
         }
     },
     mounted() {
-        ToastEventBus.$on('add', (message) => this.add(message));
+        ToastEventBus.$on('add', (message) => {
+            if (this.group == message.group) {
+                this.add(message);
+            }
+        });
+        ToastEventBus.$on('remove-group', (group) => {
+            if (this.group === group) {
+                this.messages = [];
+            }
+        });
+        ToastEventBus.$on('remove-all-groups', () => {
+            this.messages = [];
+        });
     },
     methods: {
         add(message) {
diff --git a/src/components/toast/ToastMessage.vue b/src/components/toast/ToastMessage.vue
index 966d4797b..d8b0a8908 100644
--- a/src/components/toast/ToastMessage.vue
+++ b/src/components/toast/ToastMessage.vue
@@ -21,7 +21,11 @@ export default {
         message: null
     },
     mounted() {
-        
+        if (this.message.life) {
+            setTimeout(() => {
+                this.close();
+            }, this.message.life)
+        }
     },
     methods: {
         close() {
diff --git a/src/components/toast/ToastService.js b/src/components/toast/ToastService.js
index a44f00a10..7d59efa4f 100644
--- a/src/components/toast/ToastService.js
+++ b/src/components/toast/ToastService.js
@@ -6,6 +6,12 @@ const ToastService = {
         Vue.prototype.$toast = {
             add: (message) => {
                 ToastEventBus.$emit('add', message);
+            },
+            removeGroup: (group) => {
+                ToastEventBus.$emit('remove-group', group);
+            },
+            removeAllGroups: () => {
+                ToastEventBus.$emit('remove-all-groups');
             }
         }
     }
diff --git a/src/views/toast/ToastDemo.vue b/src/views/toast/ToastDemo.vue
index 452d5758d..878be9a2c 100644
--- a/src/views/toast/ToastDemo.vue
+++ b/src/views/toast/ToastDemo.vue
@@ -23,6 +23,32 @@
                     <Button label="Error" class="p-button-danger" @click="showError" />
                 </div>
             </div>
+
+            <h3>Positions</h3>
+            <div class="p-grid">
+                <div class="p-col-12 p-md-4">
+                    <Button label="Top Left" @click="showTopLeft" />
+                </div>
+                <div class="p-col-12 p-md-4">
+                    <Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
+                </div>
+                <div class="p-col-12 p-md-4">
+                    <Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
+                </div>
+            </div>
+
+            <h3>Options</h3>
+            <div class="p-grid">
+                <div class="p-col-12 p-md-6">
+                    <Button @click="showMultiple" label="Multiple" class="p-button-warning" />
+                </div>
+                <div class="p-col-12 p-md-6">
+                    <Button @click="showSticky" label="Sticky" />
+                </div>
+            </div>
+            
+            <h3>Remove All</h3>
+            <Button @click="clear" label="Clear" />
         </div>
     </div>
 </template>
@@ -32,21 +58,40 @@ export default {
     data() {
         return {
             messages: [],
-            count: 0
         }
     },
     methods: {
         showSuccess() {
-            this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order submitted'});
+            this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order submitted', life: 3000});
         },
         showInfo() {
-            this.$toast.add({severity:'info', summary: 'Info Message', detail:'PrimeNG rocks'});
+            this.$toast.add({severity:'info', summary: 'Info Message', detail:'PrimeVue rocks', life: 3000});
         },
         showWarn() {
-            this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'There are unsaved changes'});
+            this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'There are unsaved changes', life: 3000});
         },
         showError() {
-            this.$toast.add({severity:'error', summary: 'Error Message', detail:'Validation failed'});
+            this.$toast.add({severity:'error', summary: 'Error Message', detail:'Validation failed', life: 3000});
+        },
+        showTopLeft() {
+            this.$toast.add({severity: 'info', summary: 'Info ', detail: 'You need to close Me', group: 'tl', life: 3000});
+        },
+        showBottomLeft() {
+            this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'There are unsaved changes', group: 'bl', life: 3000});
+        },
+        showBottomRight() {
+            this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order submitted', group: 'br', life: 3000});
+        },
+        showSticky() {
+            this.$toast.add({severity: 'info', summary: 'Sticky Message', detail: 'You need to close Me'});
+        },
+        showMultiple() {
+            this.$toast.add({severity:'info', summary:'Message 1', detail:'PrimeVue rocks', life: 3000});
+            this.$toast.add({severity:'info', summary:'Message 1', detail:'PrimeVue rocks', life: 3000});
+            this.$toast.add({severity:'info', summary:'Message 1', detail:'PrimeVue rocks', life: 3000});
+        },
+        clear() {
+            this.$toast.removeAllGroups();
         }
     }
 }