@geode/opengeodeweb-front 6.2.1 → 6.3.0

package/components/ObjectSelector.vue

@@ -3,7 +3,6 @@
   <v-row v-else-if="Object.keys(allowed_objects).length" class="justify-left">
     <v-col v-for="(value, key) in allowed_objects" :key="key" cols="2" md="2">
       <v-tooltip
-        :disabled="value.is_saveable"
         :text="
           value['is_loadable']
             ? geode_objects[key].tooltip
@@ -18,13 +17,13 @@
               class="card ma-2"
               hover
               rounded
+              @click="set_geode_object(key)"
               :disabled="!value['is_loadable']"
               :elevation="value['is_loadable'] ? 5 : 3"
             >
               <v-img
                 :src="geode_objects[key].image"
                 cover
-                @click="set_geode_object(key)"
                 :class="!value['is_loadable'] ? 'disabled' : ''"
               />
             </v-card>
@@ -50,9 +49,10 @@
 </template>
 
 <script setup>
-  import { toRaw } from "vue"
   import geode_objects from "@/assets/geode_objects"
-  import schema from "@/assets/schemas/ObjectSelector.json"
+  import schemas from "@geode/opengeodeweb-back/schemas.json"
+
+  const schema = schemas.opengeodeweb_back.allowed_objects
 
   const emit = defineEmits(["update_values", "increment_step"])
 
@@ -60,7 +60,6 @@
     filenames: { type: Array, required: true },
     key: { type: String, required: false, default: null },
   })
-
   const { filenames, key } = props
 
   const loading = ref(false)
@@ -69,7 +68,7 @@
 
   async function get_allowed_objects() {
     toggle_loading()
-    allowed_objects.value = []
+    allowed_objects.value = {}
     var promise_array = []
     for (const filename of filenames) {
       const params = { filename, key }
@@ -81,14 +80,7 @@
               reject()
             },
             response_function: (response) => {
-              if (toRaw(allowed_objects.value).length == 0) {
-                allowed_objects.value = response._data.allowed_objects
-              } else {
-                allowed_objects.value = toRaw(allowed_objects.value).filter(
-                  (value) => response._data.allowed_objects.includes(value),
-                )
-              }
-              resolve()
+              resolve(response._data.allowed_objects)
             },
             response_error_function: () => {
               reject()
@@ -98,7 +90,23 @@
       })
       promise_array.push(promise)
     }
-    await Promise.all(promise_array)
+    const values = await Promise.all(promise_array)
+    const all_keys = [...new Set(values.flatMap((value) => Object.keys(value)))]
+    const common_keys = all_keys.filter(
+      (i) => !values.some((j) => !Object.keys(j).includes(i)),
+    )
+    var final_object = {}
+    for (const key of common_keys) {
+      for (const value of values) {
+        if (value[key].is_loadable == false) {
+          final_object[key] = { is_loadable: false }
+        } else {
+          final_object[key] = { is_loadable: true }
+        }
+      }
+    }
+
+    allowed_objects.value = final_object
     toggle_loading()
   }
 
@@ -109,9 +117,7 @@
     }
   }
 
-  onMounted(() => {
-    get_allowed_objects()
-  })
+  await get_allowed_objects()
 </script>
 
 <style scoped>

package/components/PackagesVersions.vue

@@ -29,32 +29,33 @@
 
   const packages_versions = ref([])
 
-  function get_packages_versions() {
-    api_fetch(
-      { schema },
-      {
-        response_function: (response) => {
-          packages_versions.value = response._data.versions
+  async function get_packages_versions() {
+    const array_promise = []
+
+    const promise = new Promise((resolve, reject) => {
+      api_fetch(
+        { schema },
+        {
+          request_error_function: () => {
+            reject()
+          },
+          response_function: (response) => {
+            packages_versions.value = response._data.versions
+            resolve()
+          },
+          response_error_function: () => {
+            reject()
+          },
         },
-      },
-    )
+      )
+    })
+    array_promise.push(promise)
+    await Promise.all(array_promise)
   }
 
-  watch(is_running, (value) => {
-    if (value === true) {
-      get_packages_versions()
-    }
-  })
-
-  onMounted(() => {
-    if (is_running.value) {
-      get_packages_versions()
-    }
+  watch(is_running, () => {
+    get_packages_versions()
   })
 
-  onActivated(() => {
-    if (is_running.value === true) {
-      get_packages_versions()
-    }
-  })
+  await get_packages_versions()
 </script>

package/components/Wrapper.vue

@@ -1,9 +1,6 @@
 <template>
   <v-container>
     <v-row class="flex-column">
-      <v-col>
-        <Header :tool_name="tool_name" :cards_list="cards_list" />
-      </v-col>
       <v-col v-if="!is_running">
         <Launcher />
       </v-col>
@@ -23,10 +20,6 @@
 
   const props = defineProps({
     versions_schema: { type: Object, required: true },
-    cards_list: { type: Array, required: true },
   })
-  const { cards_list, versions_schema } = props
-
-  const stepper_tree = inject("stepper_tree")
-  const { tool_name } = stepper_tree
+  const { versions_schema } = props
 </script>

package/composables/api_fetch.js

@@ -12,22 +12,24 @@ export function api_fetch(
 
   const ajv = new Ajv()
 
-  ajv.addKeyword("method")
+  ajv.addKeyword("methods")
+  ajv.addKeyword("route")
   ajv.addKeyword("max_retry")
   const valid = ajv.validate(schema, body)
   if (!valid) {
     errors_store.add_error({
-      code: "400",
+      code: 400,
       route: schema.$id,
       name: "Bad request",
       description: ajv.errorsText(),
     })
-    return
+    throw new Error(schema.$id.concat(": ", ajv.errorsText()))
   }
-
   geode_store.start_request()
-
-  const request_options = { method: schema["method"] }
+  const method = schema.methods.filter((m) => m !== "OPTIONS")[0]
+  const request_options = {
+    method: method,
+  }
   if (!_.isEmpty(body)) {
     request_options.body = body
   }
@@ -35,12 +37,10 @@ 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 }) {
-      // console.log("onRequestError", error)
       geode_store.stop_request()
       errors_store.add_error({
         code: error.code,
@@ -53,7 +53,6 @@ export function api_fetch(
       }
     },
     onResponse({ response }) {
-      // console.log(response)
       if (response.ok) {
         geode_store.stop_request()
         if (response_function) {
@@ -62,7 +61,6 @@ export function api_fetch(
       }
     },
     onResponseError({ response }) {
-      // console.log(response)
       geode_store.stop_request()
       errors_store.add_error({
         code: response.status,

package/composables/runFunctionIfCloudRunning.js

@@ -1,7 +1,6 @@
-export default function (function_to_run) {
+export default async function (function_to_run) {
   const cloud_store = use_cloud_store()
   const { is_running } = storeToRefs(cloud_store)
-
   if (is_running.value) {
     function_to_run()
   } else {

package/composables/upload_file.js

@@ -1,9 +1,12 @@
-export function upload_file(
+export async function upload_file(
   { route, file },
   { request_error_function, response_function, response_error_function } = {},
 ) {
   const errors_store = use_errors_store()
   const geode_store = use_geode_store()
+  if (!(file instanceof File)) {
+    throw new Error("file must be a instance of File")
+  }
 
   const body = new FormData()
   body.append("file", file)

package/nuxt.config.js

@@ -1,7 +1,35 @@
 export default defineNuxtConfig({
+  runtimeConfig: {
+    public: {
+      VIEWER_PROTOCOL: process.env.NODE_ENV === "production" ? "wss" : "ws",
+      GEODE_PROTOCOL: process.env.NODE_ENV === "production" ? "https" : "http",
+      VIEWER_PORT: process.env.NODE_ENV === "production" ? "443" : "1234",
+      GEODE_PORT: process.env.NODE_ENV === "production" ? "443" : "5000",
+      SITE_BRANCH:
+        process.env.NODE_ENV === "production" ? process.env.SITE_BRANCH : "",
+      PROJECT: process.env.NODE_ENV === "production" ? process.env.PROJECT : "",
+      NODE_ENV: process.env.NODE_ENV,
+    },
+  },
+
+  modules: [["@pinia/nuxt", { autoImports: ["defineStore"] }], "@vueuse/nuxt"],
   imports: {
     dirs: ["stores"],
   },
 
-  modules: [["@pinia/nuxt", { autoImports: ["defineStore"] }], "@vueuse/nuxt"],
+  // ** Global CSS
+  css: ["vuetify/lib/styles/main.sass"],
+
+  // ** Build configuration
+  build: {
+    transpile: ["vuetify"],
+  },
+
+  vue: {
+    compilerOptions: {
+      isCustomElement: (tag) => ["md-linedivider"].includes(tag),
+    },
+  },
+
+  testUtils: {},
 })

package/package.json

@@ -1,40 +1,56 @@
 {
   "name": "@geode/opengeodeweb-front",
   "scripts": {
-    "lint": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
+    "lint": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "devDependencies": {
+    "@nuxt/test-utils": "^3.11.0",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitest/coverage-v8": "^1.2.2",
+    "@vue/test-utils": "^2.4.4",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-nuxt": "^4.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-prettier-vue": "^5.0.0",
-    "eslint-plugin-vue": "^9.19.2",
+    "eslint-plugin-vue": "^9.21.0",
     "eslint-plugin-vuetify": "^2.1.1",
-    "nuxt": "^3.8.2",
-    "prettier": "3.1.1"
+    "happy-dom": "^13.3.8",
+    "jsdom": "^24.0.0",
+    "nuxt": "^3.10.0",
+    "playwright-core": "^1.41.1",
+    "prettier": "3.2.4",
+    "resize-observer-polyfill": "^1.5.1",
+    "vite": "^5.0.12",
+    "vite-plugin-vuetify": "^2.0.1",
+    "vitest": "^1.2.2",
+    "vitest-environment-nuxt": "^1.0.0"
   },
   "overrides": {
     "vue": "latest"
   },
   "description": "OpenSource Vue/Vuetify framework for web applications",
   "type": "module",
-  "version": "6.2.1",
+  "version": "6.3.0",
   "main": "./nuxt.config.js",
   "dependencies": {
-    "@kitware/vtk.js": "^29.2.0",
-    "@mdi/font": "^7.3.67",
+    "@geode/opengeodeweb-back": "3.3.2",
+    "@kitware/vtk.js": "^29.4.6",
+    "@mdi/font": "^7.4.47",
     "@pinia/nuxt": "^0.5.1",
-    "@types/node": "^20.10.5",
-    "@vueuse/components": "^10.7.0",
-    "@vueuse/core": "^10.7.0",
+    "@types/node": "^20.11.13",
+    "@vueuse/components": "^10.7.2",
+    "@vueuse/core": "^10.7.2",
+    "@vueuse/nuxt": "^10.7.2",
     "ajv": "^8.12.0",
-    "lodash": "^4.17.21",
     "pinia": "^2.1.7",
-    "sass": "^1.69.5",
+    "sass": "^1.70.0",
     "semver": "^7.5.4",
     "vue-recaptcha": "^2.0.3",
-    "vuetify": "^3.4.7",
+    "vue3-carousel": "^0.3.1",
+    "vuetify": "^3.5.1",
     "wslink": "^1.12.4"
   },
   "repository": {

package/stores/cloud.js

@@ -1,4 +1,4 @@
-import { useStorage } from "@vueuse/core"
+import { useFetch, useStorage } from "@vueuse/core"
 
 export const use_cloud_store = defineStore("cloud", {
   state: () => ({
@@ -7,6 +7,14 @@ export const use_cloud_store = defineStore("cloud", {
     is_connexion_launched: false,
   }),
   getters: {
+    api_url: () => {
+      const public_runtime_config = useRuntimeConfig().public
+      if (public_runtime_config.NODE_ENV == "test") {
+        return ""
+      }
+      var api_url = `${public_runtime_config.GEODE_PROTOCOL}://${public_runtime_config.API_URL}:${public_runtime_config.GEODE_PORT}`
+      return api_url
+    },
     is_running: () => {
       return use_geode_store().is_running && use_websocket_store().is_running
     },
@@ -31,7 +39,6 @@ export const use_cloud_store = defineStore("cloud", {
         const { data, error } = await useFetch(`${geode_store.base_url}/ping`, {
           method: "POST",
         })
-        console.log("error", error)
         if (data.value !== null) {
           geode_store.is_running = true
           return geode_store.ping_task()
@@ -43,16 +50,20 @@ export const use_cloud_store = defineStore("cloud", {
     async create_backend() {
       const geode_store = use_geode_store()
       const errors_store = use_errors_store()
-      const config = useRuntimeConfig()
-      const public_runtime_config = config.public
-      const { data, error } = await useFetch(
-        `${public_runtime_config.GEODE_PROTOCOL}://${public_runtime_config.API_URL}:${public_runtime_config.GEODE_PORT}${public_runtime_config.SITE_BRANCH}/${public_runtime_config.PROJECT}/createbackend`,
-        { method: "POST" },
+      const public_runtime_config = useRuntimeConfig().public
+      const url = this.api_url.concat(
+        public_runtime_config.PROJECT,
+        public_runtime_config.SITE_BRANCH,
+        "/createbackend",
       )
+      const { data, error } = await useFetch(url, {
+        method: "POST",
+      })
       if (data.value !== null) {
+        console.log("DATA", data)
         this.ID = data.value.ID
         localStorage.setItem("ID", data.value.ID)
-        geode_store.is_running = true
+        geode_store.$patch({ is_running: true })
         return geode_store.ping_task()
       } else {
         console.log("error : ", error)

package/stores/geode.js

@@ -6,9 +6,10 @@ export const use_geode_store = defineStore("geode", {
   getters: {
     base_url: () => {
       const cloud_store = use_cloud_store()
+      const api_url = cloud_store.api_url
+      var geode_url = `${api_url}`
       const public_runtime_config = useRuntimeConfig().public
-      var geode_url = `${public_runtime_config.GEODE_PROTOCOL}://${public_runtime_config.API_URL}:${public_runtime_config.GEODE_PORT}`
-      if (process.env.NODE_ENV == "production") {
+      if (public_runtime_config.NODE_ENV == "production") {
         geode_url += `/${cloud_store.ID}/geode`
       }
       return geode_url
@@ -23,14 +24,15 @@ export const use_geode_store = defineStore("geode", {
     },
     async do_ping() {
       const errors_store = use_errors_store()
-      const { data, error } = await useFetch(`${this.base_url}/ping`, {
+      const { data } = await useFetch(`${this.base_url}/ping`, {
         method: "POST",
       })
       if (data.value !== null) {
         this.is_running = true
+        return
       } else {
-        errors_store.server_error = true
-        console.log("error : ", error)
+        errors_store.$patch({ server_error: true })
+        return
       }
     },
     start_request() {

package/test/components/CrsSelector.nuxt.test.js

@@ -0,0 +1,54 @@
+// @vitest-environment nuxt
+
+import { describe, expect, test } from "vitest"
+import { registerEndpoint, mountSuspended } from "@nuxt/test-utils/runtime"
+
+import { createVuetify } from "vuetify"
+import * as components from "vuetify/components"
+import * as directives from "vuetify/directives"
+
+import CrsSelector from "@/components/CrsSelector.vue"
+import schemas from "@geode/opengeodeweb-back/schemas.json"
+
+const crs_selector_schema =
+  schemas.opengeodeweb_back.geographic_coordinate_systems
+
+const vuetify = createVuetify({
+  components,
+  directives,
+})
+
+describe("CrsSelector.vue", async () => {
+  test(`BRep`, async () => {
+    const crs_list = [
+      {
+        authority: "EPSG",
+        code: "2000",
+        name: "Anguilla 1957 / British West Indies Grid",
+      },
+    ]
+    registerEndpoint(crs_selector_schema.$id, {
+      method: crs_selector_schema.methods.filter((m) => m !== "OPTIONS")[0],
+      handler: () => ({
+        crs_list,
+      }),
+    })
+    const key_to_update = "key"
+    const wrapper = await mountSuspended(CrsSelector, {
+      global: {
+        plugins: [vuetify],
+      },
+      props: { input_geode_object: "BRep", key_to_update },
+    })
+    const td = await wrapper.find("td")
+    await wrapper.vm.$nextTick()
+    const input = await td.find("input")
+    console.log("toto", input)
+    await input.trigger("click")
+    expect(wrapper.emitted()).toHaveProperty("update_values")
+    expect(wrapper.emitted().update_values).toHaveLength(1)
+    expect(wrapper.emitted().update_values[0][0]).toEqual({
+      [key_to_update]: crs_list[0],
+    })
+  })
+})

package/test/components/ErrorsBanner.nuxt.test.js

@@ -0,0 +1,46 @@
+// @vitest-environment nuxt
+
+import { describe, expect, test, vi } from "vitest"
+import { mount } from "@vue/test-utils"
+import { createVuetify } from "vuetify"
+import * as components from "vuetify/components"
+import * as directives from "vuetify/directives"
+
+import ErrorsBanner from "@/components/Errors/Banner.vue"
+
+const vuetify = createVuetify({
+  components,
+  directives,
+})
+
+describe("ErrorsBanner.vue", async () => {
+  test(`Test reload`, async () => {
+    const wrapper = mount(ErrorsBanner, {
+      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 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, {
+        global: {
+          plugins: [vuetify],
+        },
+      })
+
+      const errors_store = use_errors_store()
+      await errors_store.$patch({ server_error: true })
+      expect(errors_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)
+    })
+})

package/test/components/ErrorsSnackers.nuxt.test.js

@@ -0,0 +1,37 @@
+// @vitest-environment nuxt
+
+import { describe, expect, test } from "vitest"
+import { mount } from "@vue/test-utils"
+import { createVuetify } from "vuetify"
+import * as components from "vuetify/components"
+import * as directives from "vuetify/directives"
+
+import ErrorsSnackers from "@/components/Errors/Snackers.vue"
+
+const vuetify = createVuetify({
+  components,
+  directives,
+})
+
+describe("ErrorsSnackers.vue", async () => {
+  test(`Test delete error`, async () => {
+    const wrapper = await mount(ErrorsSnackers, {
+      global: {
+        plugins: [vuetify],
+      },
+    })
+
+    const errors_store = use_errors_store()
+    const error = {
+      code: 404,
+      route: "/test",
+      name: "Test message",
+      description: "Test desription",
+    }
+    await errors_store.add_error(error)
+    expect(errors_store.errors.length).toBe(1)
+    const v_btn = wrapper.findComponent(components.VBtn)
+    await v_btn.trigger("click")
+    expect(errors_store.errors.length).toBe(0)
+  })
+})

package/test/components/ExtensionSelector.nuxt.test.js

@@ -0,0 +1,52 @@
+// @vitest-environment nuxt
+
+import { describe, expect, test } from "vitest"
+import { registerEndpoint, mountSuspended } from "@nuxt/test-utils/runtime"
+
+import { createVuetify } from "vuetify"
+import * as components from "vuetify/components"
+import * as directives from "vuetify/directives"
+
+import ExtensionSelector from "@/components/ExtensionSelector.vue"
+
+import schemas from "@geode/opengeodeweb-back/schemas.json"
+
+const geode_objects_and_output_extensions =
+  schemas.opengeodeweb_back.geode_objects_and_output_extensions
+
+const vuetify = createVuetify({
+  components,
+  directives,
+})
+
+describe("ExtensionSelector.vue", async () => {
+  test(`Select geode_object & extension`, async () => {
+    const output_geode_object = "BRep"
+    const output_extension = "msh"
+
+    registerEndpoint(geode_objects_and_output_extensions.$id, {
+      method: geode_objects_and_output_extensions.methods[0],
+      handler: () => ({
+        geode_objects_and_output_extensions: {
+          BRep: { msh: { is_saveable: true } },
+        },
+      }),
+    })
+    const wrapper = await mountSuspended(ExtensionSelector, {
+      global: {
+        plugins: [vuetify],
+      },
+      props: { input_geode_object: "BRep", filenames: ["test.toto"] },
+    })
+    await nextTick()
+    expect(wrapper.exists()).toBe(true)
+    const v_card = await wrapper.findAllComponents(components.VCard)
+    await v_card[1].trigger("click")
+    expect(wrapper.emitted()).toHaveProperty("update_values")
+    expect(wrapper.emitted().update_values).toHaveLength(1)
+    expect(wrapper.emitted().update_values[0][0]).toEqual({
+      output_geode_object,
+      output_extension,
+    })
+  })
+})