@geode/opengeodeweb-front 4.0.0 → 5.0.0

package/components/CrsSelector.vue

@@ -24,18 +24,19 @@
 </template>
 
 <script setup>
-  import { useToggle } from "@vueuse/core"
-
-  const stepper_tree = inject("stepper_tree")
-  const { geode_object } = stepper_tree
+  const emit = defineEmits([
+    "update_values",
+    "increment_step",
+    "decrement_step",
+  ])
 
   const props = defineProps({
-    variable_to_update: { type: String, required: true },
-    variable_to_increment: { type: String, required: true },
+    input_geode_object: { type: String, required: true },
+    key_to_update: { type: String, required: true },
     schema: { type: Object, required: true },
   })
 
-  const { variable_to_update, variable_to_increment, schema } = props
+  const { input_geode_object, key_to_update, schema } = props
 
   const search = ref("")
   const data_table_loading = ref(false)
@@ -45,14 +46,13 @@
 
   watch(selected_crs, (new_value) => {
     const crs = get_selected_crs(new_value[0])
-    set_crs(crs)
+    const keys_values_object = {
+      [key_to_update]: crs,
+    }
+    emit("update_values", keys_values_object)
+    emit("increment_step")
   })
 
-  function set_crs(crs_value) {
-    stepper_tree[variable_to_update] = crs_value
-    stepper_tree[variable_to_increment]++
-  }
-
   function get_selected_crs(crs_code) {
     for (let i = 0; i <= crs_list.value.length; i++) {
       if (crs_list.value[i]["code"] == crs_code) {
@@ -62,7 +62,7 @@
   }
 
   async function get_crs_table() {
-    const params = { geode_object: geode_object }
+    const params = { input_geode_object }
     toggle_loading()
     await api_fetch(
       { schema, params },

package/components/Errors/Banner.vue

@@ -50,9 +50,3 @@
     window.location.reload()
   }
 </script>
-
-<style scoped>
-  .v-btn {
-    text-transform: unset !important;
-  }
-</style>

package/components/ExtensionSelector.vue

@@ -1,61 +1,88 @@
 <template>
-  <v-row class="justify-left">
-    <v-col
-      v-for="file_extension in file_extensions"
-      :key="file_extension"
-      cols="2"
-    >
-      <v-card
-        class="card ma-2"
-        hover
-        elevation="5"
-        @click="set_output_extension(file_extension)"
-      >
-        <v-card-title align="center">
-          {{ file_extension }}
-        </v-card-title>
-      </v-card>
-    </v-col>
+  <FetchingData v-if="loading" />
+  <v-row
+    v-for="item in geode_objects_and_output_extensions"
+    :key="item.geode_object"
+    class="justify-left"
+  >
+    <v-card class="card ma-2 pa-2" width="100%">
+      <v-tooltip :text="`Export as a ${item.geode_object}`" location="bottom">
+        <template v-slot:activator="{ props }">
+          <v-card-title v-bind="props">
+            {{ item.geode_object }}
+          </v-card-title>
+        </template>
+      </v-tooltip>
+      <v-card-text>
+        <v-row>
+          <v-col
+            v-for="output_extension in item.output_extensions"
+            :key="output_extension"
+            cols="auto"
+            class="pa-0"
+          >
+            <v-card
+              class="card ma-2"
+              color="primary"
+              hover
+              @click="set_variables(item.geode_object, output_extension)"
+            >
+              <v-card-title align="center">
+                {{ output_extension }}
+              </v-card-title>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
   </v-row>
 </template>
 
 <script setup>
-  const stepper_tree = inject("stepper_tree")
-  const { geode_object } = stepper_tree
+  const emit = defineEmits([
+    "update_values",
+    "increment_step",
+    "decrement_step",
+  ])
 
   const props = defineProps({
-    variable_to_update: { type: String, required: true },
-    variable_to_increment: { type: String, required: true },
+    input_geode_object: { type: String, required: true },
     schema: { type: Object, required: true },
   })
-  const { variable_to_update, variable_to_increment, schema } = props
+  const { input_geode_object, schema } = props
 
-  const file_extensions = ref([])
+  const geode_objects_and_output_extensions = ref([])
+  const loading = ref(false)
+
+  const toggle_loading = useToggle(loading)
 
   async function get_output_file_extensions() {
-    const params = { geode_object: geode_object }
+    toggle_loading()
+    const params = { input_geode_object }
     await api_fetch(
       { schema, params },
       {
         response_function: (response) => {
-          file_extensions.value = response._data.output_file_extensions
+          geode_objects_and_output_extensions.value =
+            response._data.geode_objects_and_output_extensions
         },
       },
     )
+    toggle_loading()
   }
 
-  function set_output_extension(extension) {
-    stepper_tree[variable_to_update] = extension
-    stepper_tree[variable_to_increment]++
+  function set_variables(geode_object, output_extension) {
+    if (geode_object != "" && output_extension != "") {
+      const keys_values_object = {
+        output_geode_object: geode_object,
+        output_extension,
+      }
+      emit("update_values", keys_values_object)
+      emit("increment_step")
+    }
   }
 
   onMounted(() => {
     get_output_file_extensions()
   })
 </script>
-
-<style scoped>
-  .card {
-    border-radius: 15px;
-  }
-</style>

package/components/FetchingData.vue

@@ -0,0 +1,17 @@
+<template>
+  <Transition name="slide-fade" class="pa-0">
+    <v-row align="center" class="pa-0">
+      <v-col cols="auto" class="pa-0">
+        <v-progress-circular
+          :size="22"
+          :width="3"
+          color="primary"
+          indeterminate
+        />
+      </v-col>
+      <v-col cols="auto">
+        <p>Fetching data...</p>
+      </v-col>
+    </v-row>
+  </Transition>
+</template>

package/components/FileSelector.vue

@@ -1,58 +1,56 @@
 <template>
-  <v-file-input
-    v-model="files"
-    :multiple="multiple"
-    :label="label"
-    :accept="accept"
-    :rules="[(value) => !!value || 'The file is mandatory']"
-    color="primary"
-    chips
-    counter
-    show-size
-    @click:clear="stepper_tree.files = []"
+  <FetchingData v-if="loading" />
+  <FileUploader
+    v-else
+    v-bind="{ multiple, accept, route }"
+    @files_uploaded="files_uploaded_event"
   />
 </template>
 
 <script setup>
-  const stepper_tree = inject("stepper_tree")
+  const emit = defineEmits([
+    "update_values",
+    "increment_step",
+    "decrement_step",
+  ])
 
   const props = defineProps({
     multiple: { type: Boolean, required: true },
-    label: { type: String, required: true },
-    variable_to_update: { type: String, required: true },
-    variable_to_increment: { type: String, required: true },
+    key: { type: String, required: false, default: "" },
+    route: { type: String, required: false, default: "" },
     schema: { type: Object, required: true },
   })
-  const { multiple, label, variable_to_update, variable_to_increment, schema } =
-    props
+
+  const { multiple, key, route, schema } = props
 
   const accept = ref("")
-  const files = ref([])
+  const loading = ref(false)
 
-  watch(files, (value) => {
-    stepper_tree[variable_to_update] = value
-    stepper_tree[variable_to_increment]++
-  })
+  const toggle_loading = useToggle(loading)
 
-  function fill_extensions(response) {
-    const extensions = response._data.extensions
-      .map((extension) => "." + extension)
-      .join(",")
-    accept.value = extensions
+  function files_uploaded_event(value) {
+    if (value.length) {
+      emit("update_values", { files: value })
+      emit("increment_step")
+    }
   }
 
   async function get_allowed_files() {
+    toggle_loading()
+    const params = { key }
     await api_fetch(
-      { schema },
+      { schema, params },
       {
         response_function: (response) => {
-          fill_extensions(response)
+          accept.value = response._data.extensions
+            .map((extension) => "." + extension)
+            .join(",")
         },
       },
     )
+    toggle_loading()
   }
-
-  onMounted(async () => {
-    await get_allowed_files()
+  onMounted(() => {
+    get_allowed_files()
   })
 </script>

package/components/FileUploader.vue

@@ -0,0 +1,72 @@
+<template>
+  <v-row>
+    <v-col class="pa-0">
+      <v-file-input
+        v-model="files"
+        :multiple="multiple"
+        :label="label"
+        :accept="accept"
+        :rules="[(value) => !!value || 'The file is mandatory']"
+        color="primary"
+        chips
+        counter
+        show-size
+        @click:clear="clear()"
+      />
+    </v-col>
+  </v-row>
+  <v-row>
+    <v-col cols="auto">
+      <v-btn
+        @click="upload_files()"
+        color="primary"
+        :disabled="!files.length && !files_uploaded"
+        :loading="loading"
+        class="pa-2"
+      >
+        Upload file(s)</v-btn
+      >
+    </v-col>
+  </v-row>
+</template>
+
+<script setup>
+  const emit = defineEmits(["files_uploaded", "decrement_step"])
+
+  const props = defineProps({
+    multiple: { type: Boolean, required: true },
+    accept: { type: String, required: true },
+    route: { type: String, required: true },
+  })
+  const { multiple, accept, route } = toRefs(props)
+
+  const label = multiple ? "Please select file(s)" : "Please select a file"
+  const files = ref([])
+  const loading = ref(false)
+  const files_uploaded = ref(false)
+
+  const toggle_loading = useToggle(loading)
+
+  async function upload_files() {
+    toggle_loading()
+    await upload_file(
+      { route, files: multiple ? files.value : [files.value[0]] },
+      {
+        response_function: () => {
+          files_uploaded.value = true
+          emit("files_uploaded", files.value)
+        },
+      },
+    )
+    toggle_loading()
+  }
+
+  function clear() {
+    files.value = []
+    emit("files_uploaded", files.value)
+  }
+
+  watch(files, () => {
+    files_uploaded.value = false
+  })
+</script>

package/components/Header.vue

@@ -6,14 +6,7 @@
     <v-col>
       <v-row class="justify-center">
         <v-col v-for="(card, i) in cards_list" :key="i" cols="11" md="5">
-          <v-card
-            class="card"
-            hover
-            elevation="5"
-            :href="card.href"
-            rounded
-            target="_blank"
-          >
+          <v-card class="card" hover :href="card.href" rounded target="_blank">
             <v-card-title
               primary-title
               class="justify-center text-h6"

package/components/Launcher.vue

@@ -10,9 +10,7 @@
         <h4 class="pb-3">Please complete the recaptcha to launch the app</h4>
         <Recaptcha :site_key="site_key" />
       </v-col>
-      <v-col
-        v-else-if="!cloud_store.is_running && cloud_store.is_connexion_launched"
-      >
+      <v-col v-else-if="!is_running && is_connexion_launched">
         <Loading />
       </v-col>
     </v-row>
@@ -22,7 +20,8 @@
 <script setup>
   const websocket_store = use_websocket_store()
   const cloud_store = use_cloud_store()
-  const { is_captcha_validated } = storeToRefs(cloud_store)
+  const { is_captcha_validated, is_connexion_launched, is_running } =
+    storeToRefs(cloud_store)
 
   const site_key = useRuntimeConfig().public.RECAPTCHA_SITE_KEY
 
@@ -32,8 +31,4 @@
       await websocket_store.ws_connect()
     }
   })
-
-  onMounted(() => {
-    console.log("onMounted", useRuntimeConfig())
-  })
 </script>

package/components/Loading.vue

@@ -1,7 +1,7 @@
 <template>
   <v-row justify="center">
     <v-col cols="12" class="ma-3">
-      <v-card class="card" loading elevation="5">
+      <v-card loading>
         <v-card-title class="text-center">
           Cloud instance is starting...
         </v-card-title>

package/components/MissingFilesSelector.vue

@@ -0,0 +1,115 @@
+<template>
+  <FetchingData v-if="loading" />
+  <v-container v-else-if="has_missing_files">
+    <v-row v-if="mandatory_files.length" align="center">
+      <v-col cols="auto" class="pa-0">
+        <v-icon color="warning" icon="mdi-file-document-alert-outline" />
+      </v-col>
+      <p class="pa-1">Mandatory files:</p>
+      <v-col v-for="mandatory_file in mandatory_files" cols="auto" class="pa-0">
+        <v-chip>{{ mandatory_file }}</v-chip>
+      </v-col>
+    </v-row>
+    <v-row v-if="additional_files.length" align="center">
+      <v-col cols="auto" class="pa-0">
+        <v-icon color="accent" icon="mdi-file-document-plus-outline" />
+      </v-col>
+      <p class="pa-1">Additional files:</p>
+      <v-col
+        v-for="additional_file in additional_files"
+        cols="auto"
+        class="pa-0"
+      >
+        <v-chip>{{ additional_file }}</v-chip>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12">
+        <FileUploader
+          v-bind="{ multiple, accept, route }"
+          @files_uploaded="files_uploaded"
+        />
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col
+        v-if="!mandatory_files.length && additional_files.length"
+        cols="auto"
+      >
+        <v-btn @click="skip_step()" color="warning"> Skip step </v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+  const emit = defineEmits([
+    "update_values",
+    "increment_step",
+    "decrement_step",
+  ])
+
+  const props = defineProps({
+    multiple: { type: Boolean, required: true },
+    input_geode_object: { type: String, required: true },
+    files: { type: Array, required: true },
+    route: { type: String, required: true },
+    schema: { type: Object, required: true },
+  })
+
+  const { multiple, input_geode_object, files, route, schema } = props
+
+  const accept = ref("")
+  const loading = ref(false)
+  const has_missing_files = ref(false)
+  const mandatory_files = ref([])
+  const additional_files = ref([])
+  const toggle_loading = useToggle(loading)
+
+  function files_uploaded(value) {
+    emit("update_values", { additional_files: value })
+    missing_files()
+  }
+
+  async function missing_files() {
+    has_missing_files.value = false
+    mandatory_files.value = []
+    additional_files.value = []
+    toggle_loading()
+    for (const file of files) {
+      const params = { input_geode_object, filename: file.name }
+      await api_fetch(
+        { schema, params },
+        {
+          response_function: (response) => {
+            has_missing_files.value = response._data.has_missing_files
+            mandatory_files.value = [].concat(
+              mandatory_files.value,
+              response._data.mandatory_files,
+            )
+            additional_files.value = [].concat(
+              additional_files.value,
+              response._data.additional_files,
+            )
+            const files_list = [].concat(
+              mandatory_files.value,
+              additional_files.value,
+            )
+            accept.value = files_list
+              .map((filename) => "." + filename.split(".").pop())
+              .join(",")
+            if (!has_missing_files.value) {
+              console.log("MISSING FILESSELECTOR increment_step")
+              emit("increment_step")
+            }
+          },
+        },
+      )
+    }
+    toggle_loading()
+  }
+
+  onMounted(() => {
+    missing_files()
+  })
+</script>

package/components/ObjectSelector.vue

@@ -1,7 +1,8 @@
 <template>
-  <v-row v-if="allowed_objects.length" class="justify-left">
+  <FetchingData v-if="loading" />
+  <v-row v-else-if="allowed_objects.length" class="justify-left">
     <v-col v-for="object in allowed_objects" :key="object" cols="2" md="2">
-      <v-card v-ripple class="card ma-2" hover elevation="5" rounded>
+      <v-card v-ripple class="card ma-2" hover rounded>
         <v-img
           :src="geode_objects[object].image"
           cover
@@ -14,7 +15,7 @@
     </v-col>
   </v-row>
   <v-row v-else class="pa-5">
-    <v-card class="card" variant="tonal" elevation="5" rounded>
+    <v-card class="card" variant="tonal" rounded>
       <v-card-text>
         This file format isn't supported! Please check the
         <a
@@ -32,21 +33,24 @@
 <script setup>
   import geode_objects from "@/assets/geode_objects"
 
-  const stepper_tree = inject("stepper_tree")
-  const { files } = stepper_tree
+  const emit = defineEmits(["update_values", "increment_step"])
 
   const props = defineProps({
-    variable_to_update: { type: String, required: true },
-    variable_to_increment: { type: String, required: true },
+    files: { type: Array, required: true },
+    key: { type: String, required: false, default: null },
     schema: { type: Object, required: true },
   })
 
-  const { variable_to_update, variable_to_increment, schema } = props
+  const { files, key, schema } = props
 
+  const loading = ref(false)
   const allowed_objects = ref([])
 
+  const toggle_loading = useToggle(loading)
+
   async function get_allowed_objects() {
-    const params = { filename: files[0].name }
+    const params = { filename: files[0].name, key }
+    toggle_loading()
     await api_fetch(
       { schema, params },
       {
@@ -55,20 +59,17 @@
         },
       },
     )
+    toggle_loading()
   }
 
   function set_geode_object(geode_object) {
-    stepper_tree[variable_to_update] = geode_object
-    stepper_tree[variable_to_increment]++
+    if (geode_object != "") {
+      emit("update_values", { input_geode_object: geode_object })
+      emit("increment_step")
+    }
   }
 
   onMounted(() => {
     get_allowed_objects()
   })
 </script>
-
-<style scoped>
-  .card {
-    border-radius: 15px;
-  }
-</style>

package/components/Recaptcha.vue

@@ -22,8 +22,6 @@
   })
   const { site_key } = props
 
-  console.log("site_key", site_key)
-
   onMounted(() => {
     if (process.client) {
       const config = useRuntimeConfig()

package/components/RemoteRenderingView.vue

@@ -94,7 +94,6 @@
     if (!is_running.value) {
       return
     }
-    console.log("connecting", client.value)
     const session = client.value.getConnection().getSession()
     view.setSession(session)
     view.setViewId(viewId.value)

package/components/Step.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card class="pa-5 card" elevation="5">
+  <v-card class="pa-5">
     <v-row align="center" @click="set_current_step(step_index)">
       <v-col cols="auto">
         <v-icon
@@ -41,10 +41,10 @@
         <component
           :is="steps[step_index].component.component_name"
           v-bind="steps[step_index].component.component_options"
+          @update_values="update_values_event"
+          @increment_step="increment_step()"
+          @decrement_step="decrement_step()"
         />
-        <v-btn v-if="skippable()" @click="skipStep()" color="primary"
-          >Skip step</v-btn
-        >
       </v-col>
     </Transition>
   </v-card>
@@ -58,28 +58,28 @@
   const stepper_tree = inject("stepper_tree")
   const { current_step_index, steps } = toRefs(stepper_tree)
 
-  function skippable() {
-    if (stepper_tree.steps[step_index].component.skippable !== undefined) {
-      return stepper_tree.steps[step_index].component.skippable
-    } else {
-      return false
+  function set_current_step(step_index) {
+    stepper_tree.current_step_index = step_index
+  }
+
+  function update_values_event(keys_values_object) {
+    console.log("update_values_event", keys_values_object)
+    for (const [key, value] of Object.entries(keys_values_object)) {
+      console.log(key, value)
+      stepper_tree[key] = value
     }
   }
 
-  function skipStep() {
+  function increment_step() {
     stepper_tree.current_step_index++
   }
 
-  function set_current_step(step_index) {
-    stepper_tree.current_step_index = step_index
+  function decrement_step() {
+    stepper_tree.current_step_index--
   }
 </script>
 
-<style>
-  .card {
-    border-radius: 15px;
-  }
-
+<style scoped>
   .slide-fade-enter-active {
     transition: all 0.5s ease-out;
   }

package/components/Wrapper.vue

@@ -4,13 +4,13 @@
       <v-col>
         <Header :tool_name="tool_name" :cards_list="cards_list" />
       </v-col>
-      <v-col v-if="!cloud_store.is_running">
+      <v-col v-if="!is_running">
         <Launcher />
       </v-col>
-      <v-col v-if="cloud_store.is_running">
+      <v-col v-if="is_running">
         <Stepper />
       </v-col>
-      <v-col v-if="cloud_store.is_running">
+      <v-col v-if="is_running">
         <PackagesVersions :schema="versions_schema" />
       </v-col>
     </v-row>
@@ -19,6 +19,7 @@
 
 <script setup>
   const cloud_store = use_cloud_store()
+  const { is_running } = storeToRefs(cloud_store)
 
   const props = defineProps({
     versions_schema: { type: Object, required: true },

package/nuxt.config.js

@@ -3,5 +3,5 @@ export default defineNuxtConfig({
     dirs: ["stores"],
   },
 
-  modules: [["@pinia/nuxt", { autoImports: ["defineStore"] }]],
+  modules: [["@pinia/nuxt", { autoImports: ["defineStore"] }], "@vueuse/nuxt"],
 })

package/package.json

@@ -19,7 +19,7 @@
   },
   "description": "OpenSource Vue/Vuetify framework for web applications",
   "type": "module",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "main": "./nuxt.config.js",
   "dependencies": {
     "@kitware/vtk.js": "^29.1.1",

package/stores/errors.js

@@ -6,7 +6,6 @@ export const use_errors_store = defineStore("errors", {
   actions: {
     add_error(error_object) {
       this.errors.push(error_object)
-      console.log(this.errors)
     },
     delete_error(error_index) {
       this.errors.splice(error_index, 1)