Merge pull request #180 from Geode-solutions/feat/feedbacks_timeout

feat(feedback timeout): auto customisable timeout

Author: JulienChampagnol

.eslintrc.cjs

@@ -7,7 +7,7 @@ module.exports = {
   },
   extends: [
     "eslint:recommended",
-    "plugin:vue/vue3-recommended",
+    "plugin:vue/recommended",
     "plugin:vuetify/recommended",
     "plugin:nuxt/recommended",
   ],

components/FeedBack/Snackers.vue

@@ -51,7 +51,7 @@
           variant="flat"
           size="20"
           :color="feedback.type"
-          @click="feedback_store.delete_feedback(index)"
+          @click="feedback_store.delete_feedback(feedback.id)"
         >
           <v-icon icon="mdi-close" size="20" color="white" />
         </v-btn>

package.json

@@ -17,7 +17,7 @@
     "eslint-plugin-nuxt": "^4.0.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-prettier-vue": "^5.0.0",
-    "eslint-plugin-vue": "^9.26.0",
+    "eslint-plugin-vue": "^9.33.0",
     "eslint-plugin-vuetify": "^2.4.0",
     "happy-dom": "^15.11.7",
     "jsdom": "^24.1.3",
@@ -54,6 +54,7 @@
     "pinia": "^2.2.2",
     "sass": "^1.77.8",
     "semver": "^7.6.3",
+    "uuid": "^11.1.0",
     "vue-recaptcha": "^2.0.3",
     "vue3-carousel": "^0.3.3"
   },

stores/feedback.js

@@ -1,26 +1,41 @@
+import { v4 as uuidv4 } from "uuid"
+
 export const use_feedback_store = defineStore("feedback", {
   state: () => ({
     feedbacks: [],
     server_error: false,
+    feedbacks_timeout_miliseconds: 5000,
   }),
   actions: {
     async add_error(code, route, name, description) {
+      const feedbackId = uuidv4()
       await this.feedbacks.push({
+        id: feedbackId,
         type: "error",
         code,
         route,
         name,
         description,
       })
+      setTimeout(() => {
+        this.delete_feedback(feedbackId)
+      }, this.feedbacks_timeout_miliseconds)
     },
     async add_success(description) {
+      const feedbackId = uuidv4()
       await this.feedbacks.push({
+        id: feedbackId,
         type: "success",
         description,
       })
+      setTimeout(() => {
+        this.delete_feedback(feedbackId)
+      }, this.feedbacks_timeout_miliseconds)
     },
-    async delete_feedback(feedback_index) {
-      await this.feedbacks.splice(feedback_index, 1)
+    async delete_feedback(feedbackId) {
+      this.feedbacks = this.feedbacks.filter(
+        (feedback) => feedback.id !== feedbackId,
+      )
     },
     async delete_server_error() {
       this.server_error = false

test/stores/Feedback.nuxt.test.js

@@ -34,11 +34,32 @@ describe("Feedback Store", () => {
       })
     })
 
+    describe("add_error", () => {
+      test("test feedbacks_timeout", () => {
+        feedback_store.feedbacks_timeout_miliseconds = 500
+        feedback_store.add_error(
+          500,
+          "/test",
+          "test message",
+          "test description",
+        )
+        expect(feedback_store.feedbacks.length).toBe(1)
+        setTimeout(() => {
+          expect(feedback_store.feedbacks.length).toBe(0)
+        }, 1000)
+      })
+    })
+
     describe("add_success", () => {
       test("test add_success", () => {
+        feedback_store.feedbacks_timeout_miliseconds = 500
         feedback_store.add_success("test description")
         expect(feedback_store.feedbacks.length).toBe(1)
         expect(feedback_store.feedbacks[0].type).toBe("success")
+
+        setTimeout(() => {
+          expect(feedback_store.feedbacks.length).toBe(0)
+        }, 1000)
       })
     })
     describe("delete_feedback", () => {