From abef1428190db1882697b08694237eff7546f759 Mon Sep 17 00:00:00 2001
From: Mouad Taoussi <50294614+mouadTaoussi@users.noreply.github.com>
Date: Thu, 30 Sep 2021 13:53:16 +0100
Subject: [PATCH] [Feature Request]: Support Remaining time progress in
 Notification (programmatically) (#3536)

* Initial code

* Finishing

* Finished

* Snapshot written

* Make progress not rounded

* added remaining time progressbar in Notification

* added remaining time progressbar in Notification

* Ran tests

* used rounded property in progress component

* support remaining time progress in notification that opens programmatically

* support remaining time progress in notification that opens programmatically

* added example

* added example and used v-show in Message.vue
---
 .../notification/examples/ExAutoClose.vue     |  3 ++-
 .../examples/ExProgrammatically.vue           | 13 ++++++++++
 src/components/message/Message.vue            |  2 +-
 src/components/notification/Notification.vue  |  2 +-
 src/scss/components/_message.scss             |  2 +-
 src/utils/MessageMixin.js                     | 24 +++++++++++--------
 6 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/docs/pages/components/notification/examples/ExAutoClose.vue b/docs/pages/components/notification/examples/ExAutoClose.vue
index 0254c784f..f29365c31 100644
--- a/docs/pages/components/notification/examples/ExAutoClose.vue
+++ b/docs/pages/components/notification/examples/ExAutoClose.vue
@@ -5,7 +5,8 @@
             :disabled="isActive"
             @click="isActive = true" />
         <b-notification
-            auto-close type="is-danger"
+            auto-close 
+            type="is-danger"
             v-model="isActive"
             aria-close-label="Close notification">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
diff --git a/docs/pages/components/notification/examples/ExProgrammatically.vue b/docs/pages/components/notification/examples/ExProgrammatically.vue
index 73719205a..f75f471b3 100644
--- a/docs/pages/components/notification/examples/ExProgrammatically.vue
+++ b/docs/pages/components/notification/examples/ExProgrammatically.vue
@@ -20,6 +20,11 @@
                 type="is-link"
                 size="is-medium"
                 @click="pause" />
+            <b-button
+                label="Launch notification (shows remaining time in progress)"
+                type="is-primary"
+                size="is-medium"
+                @click="progress" />
         </div>
     </section>
 </template>
@@ -55,6 +60,14 @@
                     pauseOnHover: true,
                 })
             },
+            progress() {
+                this.$buefy.notification.open({
+                    message: `I can show you a little progress bar displaying the remaining time!`,
+                    duration: 5000,
+                    progressBar: true,
+                    type: 'is-primary',
+                })
+            },
         }
     }
 </script>
diff --git a/src/components/message/Message.vue b/src/components/message/Message.vue
index c71d93cae..b67435057 100644
--- a/src/components/message/Message.vue
+++ b/src/components/message/Message.vue
@@ -1,7 +1,7 @@
 <template>
     <transition name="fade">
         <article
-            v-if="isActive"
+            v-show="isActive"
             class="message"
             :class="[type, size]">
             <header v-if="$slots.header || title" class="message-header">
diff --git a/src/components/notification/Notification.vue b/src/components/notification/Notification.vue
index 2ff9bb3a2..656dafb9a 100644
--- a/src/components/notification/Notification.vue
+++ b/src/components/notification/Notification.vue
@@ -32,7 +32,7 @@
                 </div>
             </div>
             <b-progress
-                v-if="autoClose && progressBar"
+                v-if="progressBar"
                 :value="remainingTime - 1"
                 :max="duration / 1000 - 1"
                 :type="type"
diff --git a/src/scss/components/_message.scss b/src/scss/components/_message.scss
index abefefd3a..e02b29c96 100644
--- a/src/scss/components/_message.scss
+++ b/src/scss/components/_message.scss
@@ -5,6 +5,6 @@
         border: 0;
     }
     progress {
-    	height: 10px;
+    	height: 5px;
     }
 }
diff --git a/src/utils/MessageMixin.js b/src/utils/MessageMixin.js
index 443a39c95..63ff5bc48 100644
--- a/src/utils/MessageMixin.js
+++ b/src/utils/MessageMixin.js
@@ -88,6 +88,7 @@ export default {
          */
         close() {
             this.isActive = false
+            this.resetDurationProgress()
             this.$emit('close')
             this.$emit('update:active', false)
         },
@@ -107,25 +108,28 @@ export default {
             }
         },
         setDurationProgress() {
-            if (this.autoClose && this.progressBar) {
+            if (this.progressBar) {
                 /**
                  * Runs every one second to set the duration passed before
-                 * the alert will auto close to show it in the progress bar
+                 * the alert will auto close to show it in the progress bar (Remaining Time)
                  */
                 this.progress = setInterval(() => {
-                    if (this.remainingTime !== 0 && this.active) {
+                    if (this.remainingTime !== 0) {
                         this.remainingTime -= 1
                     } else {
-                        /**
-                        * Wait until the component get closed and then reset
-                        **/
-                        window.setTimeout(() => {
-                            this.remainingTime = this.duration / 1000
-                            clearInterval(this.progress)
-                        }, 100)
+                        this.resetDurationProgress()
                     }
                 }, 1000)
             }
+        },
+        resetDurationProgress() {
+            /**
+             * Wait until the component get closed and then reset
+             **/
+            window.setTimeout(() => {
+                this.remainingTime = this.duration / 1000
+                clearInterval(this.progress)
+            }, 100)
         }
     },
     mounted() {