Merge pull request #137 from Geode-solutions/next

Next

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) {

components/FileSelector.vue

@@ -2,7 +2,7 @@
   <FetchingData v-if="loading" />
   <FileUploader
     v-else
-    v-bind="{ multiple, accept }"
+    v-bind="{ multiple, accept, files }"
     @files_uploaded="files_uploaded_event"
   />
 </template>
@@ -20,6 +20,7 @@
   const props = defineProps({
     multiple: { type: Boolean, required: true },
     supported_feature: { type: String, required: false, default: null },
+    files: { type: Array, required: false, default: [] },
   })
 
   const { multiple, supported_feature } = props
@@ -51,6 +52,5 @@
     )
     toggle_loading()
   }
-
   await get_allowed_files()
 </script>

components/FileUploader.vue

@@ -39,7 +39,9 @@
   const props = defineProps({
     multiple: { type: Boolean, required: true },
     accept: { type: String, required: true },
+    files: { type: Array, required: false, default: [] },
   })
+
   const { multiple, accept } = toRefs(props)
 
   const label = multiple ? "Please select file(s)" : "Please select a file"
@@ -77,6 +79,11 @@
     toggle_loading()
   }
 
+  if (props.files.length) {
+    files.value = props.files
+    upload_files()
+  }
+
   function clear() {
     files.value = []
     emit("files_uploaded", files.value)

composables/api_fetch.js

@@ -4,20 +4,15 @@ 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({
-      code: 400,
-      route: schema.$id,
-      name: "Bad request",
-      description: error,
-    })
+    feedback_store.add_error(400, schema.$id, "Bad request", error)
     throw new Error(schema.$id.concat(": ", error))
   }
 
@@ -34,41 +29,46 @@ export function api_fetch(
   if (schema.max_retry) {
     request_options.max_retry = schema.max_retry
   }
-  return useFetch(schema.$id, {
-    baseURL: geode_store.base_url,
-    ...request_options,
-    onRequestError({ error }) {
-      geode_store.stop_request()
-      errors_store.add_error({
-        code: error.code,
-        route: schema.$id,
-        name: error.message,
-        description: error.stack,
-      })
-      if (request_error_function) {
-        request_error_function(error)
-      }
-    },
-    onResponse({ response }) {
-      if (response.ok) {
-        geode_store.stop_request()
-        if (response_function) {
-          response_function(response)
+  return new Promise((resolve, reject) => {
+    useFetch(schema.$id, {
+      baseURL: geode_store.base_url,
+      ...request_options,
+      async onRequestError({ error }) {
+        await geode_store.stop_request()
+        await feedback_store.add_error(
+          error.code,
+          schema.$id,
+          error.message,
+          error.stack,
+        )
+        if (request_error_function) {
+          await request_error_function(error)
+        }
+        reject(error)
+      },
+      async onResponse({ response }) {
+        if (response.ok) {
+          await geode_store.stop_request()
+          if (response_function) {
+            await response_function(response)
+          }
+          resolve(response)
         }
-      }
-    },
-    onResponseError({ response }) {
-      geode_store.stop_request()
-      errors_store.add_error({
-        code: response.status,
-        route: schema.$id,
-        name: response._data.name,
-        description: response._data.description,
-      })
-      if (response_error_function) {
-        response_error_function(response)
-      }
-    },
+      },
+      async onResponseError({ response }) {
+        await geode_store.stop_request()
+        await feedback_store.add_error(
+          response.status,
+          schema.$id,
+          response._data.name,
+          response._data.description,
+        )
+        if (response_error_function) {
+          await response_error_function(response)
+        }
+        reject(response)
+      },
+    })
   })
 }
 

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,12 +22,7 @@ export async function upload_file(
     ...request_options,
     onRequestError({ error }) {
       geode_store.stop_request()
-      errors_store.add_error({
-        code: error.code,
-        route: route,
-        name: error.message,
-        description: error.stack,
-      })
+      feedback_store.add_error(error.code, route, error.message, error.stack)
       if (request_error_function) {
         request_error_function(error)
       }
@@ -42,12 +37,12 @@ export async function upload_file(
     },
     onResponseError({ response }) {
       geode_store.stop_request()
-      errors_store.add_error({
-        code: response.status,
-        route: route,
-        name: response._data.name,
-        description: response._data.description,
-      })
+      feedback_store.add_error(
+        response.status,
+        route,
+        response._data.name,
+        response._data.description,
+      )
       if (response_error_function) {
         response_error_function(response)
       }

composables/viewer_call.js

@@ -2,18 +2,13 @@ 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({
-      code: 400,
-      route: schema.route,
-      name: "Bad request",
-      description: error,
-    })
+    feedback_store.add_error(400, schema.route, "Bad request", error)
     throw new Error(schema.route.concat(": ", error))
   }
 
@@ -41,12 +36,12 @@ export function viewer_call(
           },
         )
         .catch((error) => {
-          errors_store.add_error({
-            code: error.code,
-            route: schema.route,
-            name: error.message,
-            description: error.message,
-          })
+          feedback_store.add_error(
+            error.code,
+            schema.route,
+            error.message,
+            error.message,
+          )
           if (response_error_function) {
             response_error_function(error)
           }

nuxt.config.js

@@ -9,7 +9,10 @@ export default defineNuxtConfig({
     },
   },
 
-  modules: [["@pinia/nuxt", { autoImports: ["defineStore"] }], "@vueuse/nuxt"],
+  modules: [
+    ["@pinia/nuxt", { autoImports: ["defineStore", "storeToRefs"] }],
+    "@vueuse/nuxt",
+  ],
   imports: {
     dirs: ["stores"],
   },