Merge pull request #133 from Geode-solutions/feat/feedback_store

Feat/feedback store

Author: JulienChampagnol

components/Errors/Banner.vue renamed to components/FeedBack/ErrorBanner.vue

@@ -1,8 +1,8 @@
 <template>
   <v-banner
-    v-if="server_error"
+    v-if="feedback_store.server_error"
     elevation="2"
-    style="background-color: grey; z-index: 100"
+    style="background-color: grey; z-index: 9999"
     position="fixed"
   >
     <v-row>
@@ -33,7 +33,7 @@
           size="20"
           color="grey"
           class=".align-center"
-          @click="errors_store.delete_server_error()"
+          @click="feedback_store.delete_server_error()"
         >
           <v-icon icon="mdi-close" size="20" color="white" />
         </v-btn>
@@ -43,8 +43,7 @@
 </template>
 
 <script setup>
-  const errors_store = use_errors_store()
-  const { server_error } = storeToRefs(errors_store)
+  const feedback_store = use_feedback_store()
 
   function reload() {
     window.location.reload()

components/Errors/Snackers.vue renamed to components/FeedBack/Snackers.vue

@@ -1,21 +1,21 @@
 <template>
   <v-snackbar
-    v-for="(error, index) in errors"
-    :key="index"
+    v-for="(feedback, index) in feedback_store.feedbacks"
+    :key="feedback"
     v-model="show"
     :style="{ 'margin-bottom': calc_margin(index) }"
-    color="error"
+    :color="feedback.type"
     location="bottom right"
     transition="slide-x-reverse-transition"
-    max-width="30%"
+    max-width="200px"
     height="20px"
   >
     <v-row dense class="flex-nowrap">
       <v-col cols="auto">
-        <v-tooltip location="left">
+        <v-tooltip v-if="feedback.type === 'error'" location="left">
           <span>
-            error: {{ error.code }} {{ error.name }}<br />
-            ressource: {{ error.route }}
+            error: {{ feedback.code }} {{ feedback.name }}<br />
+            ressource: {{ feedback.route }}
             <br />
           </span>
           <template #activator="{ props }">
@@ -24,16 +24,21 @@
             </v-icon>
           </template>
         </v-tooltip>
+        <v-tooltip v-else-if="feedback.type === 'success'" location="left">
+          <v-icon color="white" class="justify-right">
+            mdi-check-circle-outline
+          </v-icon>
+        </v-tooltip>
       </v-col>
       <v-col cols="9" class="text-no-wrap overflow-hidden">
         <v-tooltip location="top">
           <span>
-            {{ error.description }}
+            {{ feedback.description }}
             <br />
           </span>
           <template #activator="{ props }">
             <div v-bind="props">
-              {{ error.description }}
+              {{ feedback.description }}
             </div>
           </template>
         </v-tooltip>
@@ -44,8 +49,8 @@
           icon
           variant="flat"
           size="20"
-          color="error"
-          @click="errors_store.delete_error(index)"
+          :color="feedback.type"
+          @click="feedback_store.delete_feedback(index)"
         >
           <v-icon icon="mdi-close" size="20" color="white" />
         </v-btn>
@@ -55,9 +60,7 @@
 </template>
 
 <script setup>
-  const errors_store = use_errors_store()
-  const { errors } = storeToRefs(errors_store)
-
+  const feedback_store = use_feedback_store()
   const show = true
 
   function calc_margin(index) {

composables/api_fetch.js

@@ -4,15 +4,16 @@ export function api_fetch(
   { schema, params },
   { request_error_function, response_function, response_error_function } = {},
 ) {
-  const errors_store = use_errors_store()
+  const feedback_store = use_feedback_store()
   const geode_store = use_geode_store()
 
   const body = params || {}
 
   const { valid, error } = validate_schema(schema, body)
 
   if (!valid) {
-    errors_store.add_error({
+    feedback_store.add_feedback({
+      type: "error",
       code: 400,
       route: schema.$id,
       name: "Bad request",
@@ -39,7 +40,8 @@ export function api_fetch(
     ...request_options,
     onRequestError({ error }) {
       geode_store.stop_request()
-      errors_store.add_error({
+      feedback_store.add_feedback({
+        type: "error",
         code: error.code,
         route: schema.$id,
         name: error.message,
@@ -59,7 +61,8 @@ export function api_fetch(
     },
     onResponseError({ response }) {
       geode_store.stop_request()
-      errors_store.add_error({
+      feedback_store.add_feedback({
+        type: "error",
         code: response.status,
         route: schema.$id,
         name: response._data.name,

composables/upload_file.js

@@ -2,7 +2,7 @@ export async function upload_file(
   { route, file },
   { request_error_function, response_function, response_error_function } = {},
 ) {
-  const errors_store = use_errors_store()
+  const feedback_store = use_feedback_store()
   const geode_store = use_geode_store()
   if (!(file instanceof File)) {
     throw new Error("file must be a instance of File")
@@ -22,7 +22,8 @@ export async function upload_file(
     ...request_options,
     onRequestError({ error }) {
       geode_store.stop_request()
-      errors_store.add_error({
+      feedback_store.add_feedback({
+        type: "error",
         code: error.code,
         route: route,
         name: error.message,
@@ -42,7 +43,8 @@ export async function upload_file(
     },
     onResponseError({ response }) {
       geode_store.stop_request()
-      errors_store.add_error({
+      feedback_store.add_feedback({
+        type: "error",
         code: response.status,
         route: route,
         name: response._data.name,

composables/viewer_call.js

@@ -2,13 +2,14 @@ export function viewer_call(
   { schema, params = {} },
   { request_error_function, response_function, response_error_function } = {},
 ) {
-  const errors_store = use_errors_store()
+  const feedback_store = use_feedback_store()
   const viewer_store = use_viewer_store()
 
   const { valid, error } = validate_schema(schema, params)
 
   if (!valid) {
-    errors_store.add_error({
+    feedback_store.add_feedback({
+      type: "error",
       code: 400,
       route: schema.route,
       name: "Bad request",
@@ -41,7 +42,8 @@ export function viewer_call(
           },
         )
         .catch((error) => {
-          errors_store.add_error({
+          feedback_store.add_feedback({
+            type: "error",
             code: error.code,
             route: schema.route,
             name: error.message,

stores/errors.js

@@ -0,0 +1,17 @@
+export const use_feedback_store = defineStore("feedback", {
+  state: () => ({
+    feedbacks: [],
+    server_error: false,
+  }),
+  actions: {
+    add_feedback(feedback) {
+      this.feedbacks.push(feedback)
+    },
+    delete_feedback(feedback_index) {
+      this.feedbacks.splice(feedback_index, 1)
+    },
+    delete_server_error() {
+      this.server_error = false
+    },
+  },
+})

stores/feedback.js

@@ -24,15 +24,15 @@ export const use_geode_store = defineStore("geode", {
       setInterval(() => this.do_ping(), 10 * 1000)
     },
     async do_ping() {
-      const errors_store = use_errors_store()
+      const feedback_store = use_feedback_store()
       const { data } = await useFetch(`${this.base_url}/ping`, {
         method: "POST",
       })
       if (data.value !== null) {
         this.is_running = true
         return
       } else {
-        errors_store.$patch({ server_error: true })
+        feedback_store.$patch({ server_error: true })
         return
       }
     },

stores/geode.js

@@ -63,7 +63,7 @@ export const use_infra_store = defineStore("infra", {
     async create_backend() {
       const geode_store = use_geode_store()
       const viewer_store = use_viewer_store()
-      const errors_store = use_errors_store()
+      const feedback_store = use_feedback_store()
 
       if (isElectron()) {
         await window.electronAPI.run_back(geode_store.PORT)
@@ -87,7 +87,7 @@ export const use_infra_store = defineStore("infra", {
           geode_store.$patch({ is_running: true })
           return geode_store.ping_task()
         } else {
-          errors_store.server_error = true
+          feedback_store.server_error = true
         }
       }
     },

stores/infra.js

@@ -6,41 +6,41 @@ import { createVuetify } from "vuetify"
 import * as components from "vuetify/components"
 import * as directives from "vuetify/directives"
 
-import ErrorsBanner from "@/components/Errors/Banner.vue"
+import FeedBackErrorBanner from "@/components/FeedBack/ErrorBanner.vue"
 
 const vuetify = createVuetify({
   components,
   directives,
 })
 
-describe("ErrorsBanner.vue", async () => {
+describe("FeedBackErrorBanner.vue", async () => {
   test(`Test reload`, async () => {
-    const wrapper = mount(ErrorsBanner, {
+    const wrapper = mount(FeedBackErrorBanner, {
       global: {
         plugins: [vuetify],
       },
     })
     const reload_spy = vi.spyOn(wrapper.vm, "reload")
-    const errors_store = use_errors_store()
-    await errors_store.$patch({ server_error: true })
-    expect(errors_store.server_error).toBe(true)
+    const feedback_store = use_feedback_store()
+    await feedback_store.$patch({ server_error: true })
+    expect(feedback_store.server_error).toBe(true)
     const v_btn = wrapper.findAll(".v-btn")
     await v_btn[0].trigger("click")
 
     expect(reload_spy).toHaveBeenCalledTimes(1)
   }),
     test(`Test delete error`, async () => {
-      const wrapper = mount(ErrorsBanner, {
+      const wrapper = mount(FeedBackErrorBanner, {
         global: {
           plugins: [vuetify],
         },
       })
 
-      const errors_store = use_errors_store()
-      await errors_store.$patch({ server_error: true })
-      expect(errors_store.server_error).toBe(true)
+      const feedback_store = use_feedback_store()
+      await feedback_store.$patch({ server_error: true })
+      expect(feedback_store.server_error).toBe(true)
       const v_btn = wrapper.findAll(".v-btn")
       await v_btn[1].trigger("click")
-      expect(errors_store.server_error).toBe(false)
+      expect(feedback_store.server_error).toBe(false)
     })
 })