@geode/opengeodeweb-front 9.7.0-rc.2 → 9.7.0-rc.4

package/.eslintrc.cjs

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

package/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/components/Launcher.vue

@@ -2,7 +2,7 @@
   <v-container class="justify">
     <v-row align-content="center" align="center">
       <v-col
-        v-if="!is_captcha_validated"
+        v-if="!infra_store.is_captcha_validated"
         class="align"
         cols="12"
         align-self="center"
@@ -21,16 +21,21 @@
 <script setup>
   import Status from "@/utils/status.js"
 
-  const viewer_store = use_viewer_store()
   const infra_store = use_infra_store()
-  const { is_captcha_validated } = storeToRefs(infra_store)
-
   const site_key = useRuntimeConfig().public.RECAPTCHA_SITE_KEY
 
-  watch(is_captcha_validated, async (value) => {
-    if (value === true && process.client) {
-      await infra_store.create_backend()
-      await viewer_store.ws_connect()
+  watch(
+    () => infra_store.is_captcha_validated,
+    (value, oldValue) => {
+      if (value && !oldValue && process.client) {
+        infra_store.create_backend()
+      }
+    },
+  )
+
+  onMounted(() => {
+    if (infra_store.is_captcha_validated) {
+      infra_store.create_backend()
     }
   })
 </script>

package/components/Loading.vue

@@ -3,14 +3,14 @@
     <v-col cols="12" class="ma-3">
       <v-card loading>
         <v-card-title class="text-center">
-          Cloud instance is starting...
+          Microservices are starting...
         </v-card-title>
         <v-card-subtitle class="text-center">
           Why do you have to wait?
         </v-card-subtitle>
         <v-card-text class="text-center">
-          We start our server only on demand... and this takes a few minutes
-          before you can use our free app.
+          We start our microservices only on demand... and this takes a few
+          minutes before you can use our free app.
           <br />
           This is aligned with our energy sobriety policy. So be patient
           <v-icon color="primary" size="20">

package/components/PackagesVersions.vue

@@ -52,9 +52,12 @@
     await Promise.all(array_promise)
   }
 
-  watch(geode_store.status, (value) => {
-    if (value == Status.CONNECTED) get_packages_versions()
-  })
+  watch(
+    () => geode_store.status,
+    (value) => {
+      if (value == Status.CONNECTED) get_packages_versions()
+    },
+  )
 
   await get_packages_versions()
 </script>

package/components/Recaptcha.vue

@@ -2,10 +2,10 @@
   <ClientOnly>
     <vue-recaptcha
       ref="recaptcha"
-      :sitekey="site_key"
+      :sitekey="props.site_key"
       :load-recaptcha-script="true"
       align-self="center"
-      @expired="is_captcha_validated = false"
+      @expired="infra_store.is_captcha_validated = false"
       @verify="submit_recaptcha"
     />
   </ClientOnly>
@@ -14,12 +14,10 @@
 <script setup>
   import { VueRecaptcha } from "vue-recaptcha"
   const infra_store = use_infra_store()
-  const { is_captcha_validated } = storeToRefs(infra_store)
 
   const props = defineProps({
     site_key: { type: String, required: true },
   })
-  const { site_key } = props
 
   onMounted(() => {
     if (process.client) {

package/components/RemoteRenderingView.vue

@@ -14,7 +14,7 @@
         "
         class="pa-0"
         @click="get_x_y"
-        @keydown.esc="app_store.toggle_picking_mode(false)"
+        @keydown.esc="viewer_store.toggle_picking_mode(false)"
       />
     </div>
   </ClientOnly>
@@ -26,8 +26,12 @@
   import viewer_schemas from "@geode/opengeodeweb-viewer/schemas.json"
   import Status from "@/utils/status.js"
 
+  const props = defineProps({
+    viewId: { type: String, default: "-1" },
+  })
+
   const viewer_store = use_viewer_store()
-  const viewer = ref(null)
+  const viewer = useTemplateRef("viewer")
   const { width, height } = useElementSize(viewer)
 
   const { width: windowWidth, height: windowHeight } = useWindowSize()
@@ -43,13 +47,7 @@
     }
   }
 
-  const props = defineProps({
-    viewId: { type: String, default: "-1" },
-  })
-
-  const { viewId } = toRefs(props)
   const connected = ref(false)
-
   const view = vtkRemoteView.newInstance({
     rpcWheelEvent: "viewport.mouse.zoom.wheel",
   })
@@ -69,33 +67,42 @@
     resize()
   })
 
-  watch(viewer_store.picking_mode, (value) => {
-    const cursor = value ? "crosshair" : "pointer"
-    view.getCanvasView().setCursor(cursor)
-  })
+  watch(
+    () => viewer_store.picking_mode,
+    (value) => {
+      const cursor = value ? "crosshair" : "pointer"
+      view.getCanvasView().setCursor(cursor)
+    },
+  )
 
   watch([width, height], () => {
     resize()
   })
 
-  watch(viewer_store.client, () => {
-    connect()
-  })
-
-  watch(viewId, (id) => {
-    if (connected.value) {
-      view.setViewId(id)
-      view.render()
-    }
-  })
+  watch(
+    () => viewer_store.client,
+    () => {
+      connect()
+    },
+  )
+
+  watch(
+    () => props.viewId,
+    (id) => {
+      if (connected.value) {
+        view.setViewId(id)
+        view.render()
+      }
+    },
+  )
 
   function connect() {
-    if (!viewer_store.status !== Status.CONNECTED) {
+    if (viewer_store.status !== Status.CONNECTED) {
       return
     }
     const session = viewer_store.client.value.getConnection().getSession()
     view.setSession(session)
-    view.setViewId(viewId.value)
+    view.setViewId(props.viewId)
     connected.value = true
     view.render()
   }

package/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",
@@ -37,7 +37,7 @@
   },
   "description": "OpenSource Vue/Vuetify framework for web applications",
   "type": "module",
-  "version": "9.7.0-rc.2",
+  "version": "9.7.0-rc.4",
   "main": "./nuxt.config.js",
   "dependencies": {
     "@geode/opengeodeweb-back": "5.6.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"
   },

package/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

package/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", () => {