From 4cbb445301d89e9a35a9e13cea414c810f8cfc62 Mon Sep 17 00:00:00 2001
From: "kyle.watson" <kyle.watson@samsonvt.com>
Date: Sat, 27 Jun 2020 11:41:34 +0100
Subject: [PATCH] Added 5 toast max shown

---
 src/renderer/components/ft-toast/ft-toast.css | 13 ++++---
 src/renderer/components/ft-toast/ft-toast.js  | 39 ++++++++++++-------
 src/renderer/components/ft-toast/ft-toast.vue | 18 +++++----
 3 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
index 4c1e5309..3540f99c 100644
--- a/src/renderer/components/ft-toast/ft-toast.css
+++ b/src/renderer/components/ft-toast/ft-toast.css
@@ -1,12 +1,15 @@
+.toast-holder {
+  position: fixed;
+  left: 50vw;
+  transform: translate(-50%, 0);
+  bottom: 50px;
+  z-index: 1;
+}
+
 .toast {
   display: flex;
   padding: 10px;
   overflow-y: auto;
-  position: fixed;
-  left: 50vw;
-  transform: translate(-50%, 0);
-  bottom: 100px;
-  z-index: 1;
   background-color: var(--primary-input-color);
   opacity: 0;
   border-radius: 20px;
diff --git a/src/renderer/components/ft-toast/ft-toast.js b/src/renderer/components/ft-toast/ft-toast.js
index 27c87c36..431ea3ee 100644
--- a/src/renderer/components/ft-toast/ft-toast.js
+++ b/src/renderer/components/ft-toast/ft-toast.js
@@ -5,9 +5,13 @@ export default Vue.extend({
   name: 'FtToast',
   data: function () {
     return {
-      isOpen: false,
-      message: '',
-      action: () => {},
+      toasts: [
+        {isOpen: false, message: '', action: null, timeout: null},
+        {isOpen: false, message: '', action: null, timeout: null},
+        {isOpen: false, message: '', action: null, timeout: null},
+        {isOpen: false, message: '', action: null, timeout: null},
+        {isOpen: false, message: '', action: null, timeout: null}
+      ],
       queue: [],
     }
   },
@@ -15,27 +19,32 @@ export default Vue.extend({
     FtToastEvents.$on('toast.open', this.open)
   },
   methods: {
-    performAction: function () {
-      this.action()
-      this.close()
+    performAction: function (index) {
+      this.toasts[index].action()
+      this.close(index)
     },
-    close: function () {
-      this.isOpen = false
+    close: function (index) {
+      clearTimeout(this.toasts[index].timeout);
+      this.toasts[index].isOpen = false
       if(this.queue.length !== 0) {
         const toast = this.queue.shift()
         this.open(toast.message, toast.action)
       }
     },
     open: function (message, action) {
-      if (this.isOpen) {
-        this.queue.push({ message: message, action: action })
-        return
+      for(let i = this.toasts.length - 1; i >= 0 ; i--){
+        if (!this.toasts[i].isOpen) {
+          return this.showToast(message, action, i)
+        }
       }
-      this.message = message
-      this.action = action || (() => {});
-      this.isOpen = true
-      setTimeout(this.close, 2000)
+      this.queue.push({ message: message, action: action })
     },
+    showToast: function(message, action, index) {
+      this.toasts[index].message = message
+      this.toasts[index].action = action || (() => {})
+      this.toasts[index].isOpen = true
+      this.toasts[index].timeout = setTimeout(this.close, 2000, index)
+    }
   },
   beforeDestroy: function () {
     FtToastEvents.$off('toast.open', this.open)
diff --git a/src/renderer/components/ft-toast/ft-toast.vue b/src/renderer/components/ft-toast/ft-toast.vue
index 23f95ecb..b0e33953 100644
--- a/src/renderer/components/ft-toast/ft-toast.vue
+++ b/src/renderer/components/ft-toast/ft-toast.vue
@@ -1,11 +1,15 @@
 <template>
-  <div
-    ref="toast"
-    class="toast"
-    :class="{ closed: !isOpen, open: isOpen }"
-    @click="performAction()"
-  >
-  <p class="message"> {{ message }} </p></div>
+  <div class="toast-holder">
+    <div
+      v-for="(toast, index) in toasts"
+      :key="'toast-' + index"
+      class="toast"
+      :class="{ closed: !toast.isOpen, open: toast.isOpen }"
+      @click="performAction(index)"
+    >
+      <p class="message">{{ toast.message }}</p>
+    </div>
+  </div>
 </template>
 
 <script src="./ft-toast.js" />