@geode/opengeodeweb-front 10.2.0-rc.2 → 10.2.1-rc.1

package/app/components/DragAndDrop.vue

@@ -0,0 +1,120 @@
+<template>
+  <v-hover v-slot="{ isHovering, props: hoverProps }">
+    <v-card
+      v-bind="hoverProps"
+      class="text-center cursor-pointer"
+      :class="{
+        'elevation-4': isHovering || isDragging,
+        'elevation-0': !(isHovering || isDragging),
+      }"
+      :style="{
+        position: 'relative',
+        overflow: 'hidden',
+        transition: 'all 0.3s ease',
+        background:
+          isHovering || isDragging
+            ? 'rgba(var(--v-theme-primary), 0.05)'
+            : 'rgba(0, 0, 0, 0.02)',
+        border: `2px dashed ${
+          isHovering || isDragging ? 'rgb(var(--v-theme-primary))' : '#e0e0e0'
+        }`,
+        transform: isHovering || isDragging ? 'translateY(-2px)' : 'none',
+        pointerEvents: loading ? 'none' : 'auto',
+        opacity: loading ? 0.6 : 1,
+      }"
+      rounded="xl"
+      @click="triggerFileDialog"
+      @dragover.prevent="isDragging = true"
+      @dragleave.prevent="isDragging = false"
+      @drop.prevent="handleDrop"
+    >
+      <v-card-text class="pa-8">
+        <v-sheet
+          class="mx-auto mb-6 d-flex align-center justify-center"
+          :color="isHovering || isDragging ? 'primary' : 'grey-lighten-2'"
+          :elevation="isHovering || isDragging ? 4 : 0"
+          rounded="circle"
+          width="80"
+          height="80"
+          style="transition: all 0.3s ease"
+        >
+          <v-icon
+            :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
+            size="40"
+            :color="isHovering || isDragging ? 'white' : 'grey-darken-1'"
+            :class="{ rotating: loading }"
+          />
+        </v-sheet>
+
+        <v-card-title
+          class="text-h6 font-weight-bold justify-center pa-0 mb-1"
+          :class="
+            isHovering || isDragging ? 'text-primary' : 'text-grey-darken-2'
+          "
+          style="transition: color 0.3s ease"
+        >
+          {{ loading ? loadingText : isDragging ? dropText : idleText }}
+        </v-card-title>
+
+        <v-card-subtitle v-if="showExtensions" class="text-body-2 pa-0">
+          {{ accept ? `(${accept} files)` : "All files allowed" }}
+        </v-card-subtitle>
+      </v-card-text>
+
+      <input
+        ref="fileInput"
+        type="file"
+        class="d-none"
+        :multiple="multiple"
+        :accept="accept"
+        @change="handleFileSelect"
+      />
+    </v-card>
+  </v-hover>
+</template>
+
+<script setup>
+  const props = defineProps({
+    multiple: { type: Boolean, default: false },
+    accept: { type: String, default: "" },
+    loading: { type: Boolean, default: false },
+    showExtensions: { type: Boolean, default: true },
+    idleText: { type: String, default: "Click or Drag & Drop files" },
+    dropText: { type: String, default: "Drop to upload" },
+    loadingText: { type: String, default: "Uploading..." },
+  })
+
+  const emit = defineEmits(["files-selected"])
+
+  const isDragging = ref(false)
+  const fileInput = ref(null)
+
+  const triggerFileDialog = () => fileInput.value?.click()
+
+  function handleDrop(e) {
+    isDragging.value = false
+    const files = Array.from(e.dataTransfer.files)
+    emit("files-selected", files)
+  }
+
+  function handleFileSelect(e) {
+    const files = Array.from(e.target.files)
+    emit("files-selected", files)
+    e.target.value = ""
+  }
+</script>
+
+<style scoped>
+  .rotating {
+    animation: rotate 1s linear infinite;
+  }
+
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>

package/app/components/FileSelector.vue

@@ -15,6 +15,7 @@
   import { useGeodeStore } from "@ogw_front/stores/geode"
 
   const schema = schemas.opengeodeweb_back.allowed_files
+
   const emit = defineEmits([
     "update_values",
     "increment_step",
@@ -23,12 +24,10 @@
 
   const props = defineProps({
     multiple: { type: Boolean, required: true },
-    files: { type: Array, required: false, default: [] },
-    auto_upload: { type: Boolean, required: false, default: true },
+    files: { type: Array, default: () => [] },
+    auto_upload: { type: Boolean, default: true },
   })
 
-  const { multiple } = props
-
   const internal_files = ref(props.files)
   const auto_upload = ref(props.auto_upload)
   const accept = ref("")
@@ -36,14 +35,13 @@
 
   watch(
     () => props.files,
-    (newVal) => {
-      internal_files.value = newVal
-    },
-    { deep: true },
+    (val) => (internal_files.value = val),
+  )
+
+  watch(
+    () => props.auto_upload,
+    (val) => (auto_upload.value = val),
   )
-  watch(props.auto_upload, (newVal) => {
-    auto_upload.value = newVal
-  })
 
   const toggle_loading = useToggle(loading)
 
@@ -58,10 +56,9 @@
     toggle_loading()
     const geodeStore = useGeodeStore()
     const response = await geodeStore.request(schema, {})
-    accept.value = response.extensions
-      .map((extension) => "." + extension)
-      .join(",")
+    accept.value = response.extensions.map((e) => `.${e}`).join(",")
     toggle_loading()
   }
+
   await get_allowed_files()
 </script>

package/app/components/FileUploader.vue

@@ -1,43 +1,65 @@
 <template>
-  <v-row>
-    <v-col class="pa-0">
-      <v-file-input
-        v-model="internal_files"
-        :multiple="props.multiple"
-        :label="label"
-        :accept="props.accept"
-        :rules="[(value) => !!value || 'The file is mandatory']"
-        color="primary"
-        :hide-input="props.mini"
-        :hide-details="props.mini"
-        chips
-        counter
-        show-size
-        @click:clear="clear()"
-      />
-    </v-col>
-  </v-row>
-  <v-row v-if="!props.auto_upload">
-    <v-col cols="auto">
-      <v-btn
+  <DragAndDrop
+    :multiple="props.multiple"
+    :accept="props.accept"
+    :loading="loading"
+    :show-extensions="false"
+    @files-selected="processSelectedFiles"
+  />
+
+  <v-card-text v-if="internal_files.length" class="mt-4">
+    <v-sheet class="d-flex align-center mb-3" color="transparent">
+      <v-icon icon="mdi-file-check" class="mr-2" color="primary" />
+      <span class="text-subtitle-2 font-weight-bold"> Selected Files </span>
+      <v-chip size="x-small" class="ml-2" color="primary" variant="flat">
+        {{ internal_files.length }}
+      </v-chip>
+    </v-sheet>
+
+    <v-sheet class="d-flex flex-wrap gap-2" color="transparent">
+      <v-chip
+        v-for="(file, index) in internal_files"
+        :key="index"
+        closable
+        size="small"
         color="primary"
-        :disabled="!internal_files.length && !files_uploaded"
-        :loading="loading"
-        class="pa-2"
-        @click="upload_files"
+        variant="tonal"
+        class="font-weight-medium"
+        @click:close="removeFile(index)"
+      >
+        <v-icon start size="16">mdi-file-outline</v-icon>
+        {{ file.name }}
+      </v-chip>
+    </v-sheet>
+  </v-card-text>
+
+  <v-card-actions v-if="!props.auto_upload && internal_files.length">
+    <v-btn
+      color="primary"
+      variant="elevated"
+      size="large"
+      rounded="lg"
+      :loading="loading"
+      class="text-none px-3 font-weight-bold"
+      @click="upload_files"
+    >
+      <v-icon start size="20">mdi-cloud-upload-outline</v-icon>
+      Upload {{ internal_files.length }} file<span
+        v-if="internal_files.length > 1"
+        >s</span
       >
-        Upload file(s)
-      </v-btn>
-    </v-col>
-  </v-row>
+    </v-btn>
+  </v-card-actions>
 </template>
 
 <script setup>
   import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
   import { upload_file } from "@ogw_front/utils/upload_file"
+  import DragAndDrop from "@ogw_front/components/DragAndDrop"
+
   const schema = schemas.opengeodeweb_back.upload_file
 
-  const emit = defineEmits(["files_uploaded", "decrement_step"])
+  const emit = defineEmits(["files_uploaded", "decrement_step", "reset_values"])
 
   const props = defineProps({
     multiple: { type: Boolean, required: true },
@@ -47,15 +69,28 @@
     mini: { type: Boolean, required: false, default: false },
   })
 
-  const label = props.multiple
-    ? "Please select file(s) to import"
-    : "Please select a file to import"
   const internal_files = ref(props.files)
   const loading = ref(false)
   const files_uploaded = ref(false)
 
   const toggle_loading = useToggle(loading)
 
+  function processSelectedFiles(files) {
+    if (props.multiple) {
+      internal_files.value = [...internal_files.value, ...files]
+    } else {
+      internal_files.value = [files[0]]
+    }
+  }
+
+  function removeFile(index) {
+    internal_files.value.splice(index, 1)
+    if (internal_files.value.length === 0) {
+      files_uploaded.value = false
+      emit("files_uploaded", [])
+    }
+  }
+
   async function upload_files() {
     toggle_loading()
     var promise_array = []
@@ -92,11 +127,6 @@
     }
   }
 
-  function clear() {
-    internal_files.value = []
-    emit("files_uploaded", internal_files.value)
-  }
-
   watch(
     () => props.files,
     (newVal) => {
@@ -107,17 +137,8 @@
 
   watch(internal_files, (value) => {
     files_uploaded.value = false
-    if (props.auto_upload) {
-      if (props.multiple.value == false) {
-        internal_files.value = [value]
-      }
+    if (props.auto_upload && value.length > 0) {
       upload_files()
     }
   })
 </script>
-
-<style scoped>
-  .div.v-input__details {
-    display: none;
-  }
-</style>

package/app/components/Launcher.vue

@@ -8,7 +8,7 @@
         align-self="center"
         style="z-index: 1000"
       >
-        <Recaptcha :color="'secondary'" />
+        <Recaptcha :button_color="'secondary'" />
       </v-col>
       <v-col v-else-if="infraStore.status == Status.CREATING">
         <Loading />

package/app/components/Recaptcha.vue

@@ -31,7 +31,7 @@
     <VCol cols="4" class="d-flex justify-center align-center">
       <VBtn
         :text="props.button_label"
-        :color="props.button_color"
+        :color="props.color || props.button_color"
         @click="submit_recaptcha"
       />
     </VCol>
@@ -53,11 +53,16 @@
       required: false,
       default: "white",
     },
+    color: {
+      type: String,
+      required: false,
+    },
   })
   const infraStore = useInfraStore()
   const name = ref("")
   const email = ref("")
   const launch = ref(false)
+  const valid = ref(false)
   const emailRules = [
     (value) => {
       if (value) {

package/app/components/Step.vue

@@ -1,62 +1,61 @@
 <template>
-  <v-stepper-content :step="step_index + 1">
-    <v-row
-      align="center"
-      class="mb-4 py-2"
-      @click="set_current_step(step_index)"
-    >
-      <v-col cols="auto" class="d-flex justify-center align-center">
-        <v-icon
-          v-if="current_step_index > step_index"
-          icon="mdi-check-circle"
-          color="grey"
-        />
-        <v-icon
-          v-else-if="current_step_index == step_index"
-          :icon="`mdi-numeric-${step_index + 1}-circle`"
-          color="primary"
-        />
-        <v-icon
-          v-else
-          :icon="`mdi-numeric-${step_index + 1}-circle`"
-          color="grey"
-        />
-      </v-col>
-      <v-col>
-        <p class="m-0 font-weight-bold">
-          {{ steps[step_index].step_title }}
-        </p>
-      </v-col>
-      <v-chip-group
-        v-if="
-          steps[step_index].chips.length && current_step_index >= step_index
-        "
-        column
-        class="d-flex flex-wrap ma-2 overflow-y-auto"
-        multiple
-        style="max-height: 150px"
+  <v-stepper-vertical-item
+    :value="step_index + 1"
+    :editable="step_index < current_step_index"
+    color="primary"
+    hide-actions
+  >
+    <template #title>
+      <v-sheet
+        color="transparent"
+        class="d-flex flex-column justify-center ps-2"
       >
-        <v-chip
-          v-for="(chip, chip_index) in steps[step_index].chips"
-          :key="chip_index"
-          class="ma-1"
-          :title="chip"
+        <v-text
+          tag="h3"
+          class="text-subtitle-1 font-weight-bold mb-0 transition-swing"
+          :class="
+            current_step_index === step_index
+              ? 'text-primary'
+              : 'text-grey-darken-1'
+          "
         >
-          {{ truncate(chip, 50) }}
-        </v-chip>
-      </v-chip-group>
-    </v-row>
-    <component
-      v-if="step_index == current_step_index"
-      :key="step_index"
-      :is="steps[step_index].component.component_name"
-      v-bind="steps[step_index].component.component_options"
-      @increment_step="increment_step"
-      @decrement_step="decrement_step"
-      @update_values="update_values_event"
-      @reset_values="$emit('reset_values')"
-    />
-  </v-stepper-content>
+          {{ steps[step_index].step_title }}
+        </v-text>
+
+        <v-sheet
+          v-if="sortedChips.length && current_step_index >= step_index"
+          color="transparent"
+          class="d-flex flex-wrap mt-2"
+        >
+          <v-chip
+            v-for="(chip, chip_index) in sortedChips"
+            :key="chip_index"
+            size="small"
+            class="me-2 mb-1 font-weight-medium"
+            color="primary"
+            variant="tonal"
+          >
+            {{ truncate(chip, 30) }}
+          </v-chip>
+        </v-sheet>
+      </v-sheet>
+    </template>
+
+    <v-card-text class="pt-0">
+      <v-divider class="mb-6 opacity-10" />
+
+      <component
+        v-if="step_index === current_step_index"
+        :key="step_index"
+        :is="steps[step_index].component.component_name"
+        v-bind="steps[step_index].component.component_options"
+        @increment_step="increment_step"
+        @decrement_step="decrement_step"
+        @update_values="update_values_event"
+        @reset_values="$emit('reset_values')"
+      />
+    </v-card-text>
+  </v-stepper-vertical-item>
 </template>
 
 <script setup>
@@ -74,9 +73,11 @@
   const stepper_tree = inject("stepper_tree")
   const { current_step_index, steps } = toRefs(stepper_tree)
 
-  function set_current_step(step_index) {
-    stepper_tree.current_step_index = step_index
-  }
+  watch(current_step_index, (newVal, oldVal) => {
+    if (newVal < oldVal) {
+      stepper_tree.navigating_back = true
+    }
+  })
 
   function update_values_event(keys_values_object) {
     for (const [key, value] of Object.entries(keys_values_object)) {

package/app/components/Stepper.vue

@@ -1,20 +1,30 @@
 <template>
+  <v-card-item class="flex-shrink-0 pa-0">
+    <v-card-title
+      class="text-h4 text-primary px-8 pt-6 pb-4 font-weight-bold d-flex align-center"
+    >
+      <v-icon icon="mdi-file-upload-outline" class="mr-3" />
+      Import Data
+    </v-card-title>
+
+    <v-card-subtitle class="px-8 pb-4 text-medium">
+      Choose a file to import.
+    </v-card-subtitle>
+  </v-card-item>
+
   <v-stepper-vertical
-    v-model="current_step_index"
-    class="pa-4 ma-0"
-    elevation="1"
-    rounded
+    :model-value="current_step_index + 1"
+    @update:model-value="current_step_index = $event - 1"
+    flat
+    non-linear
+    class="pa-0 ma-0 bg-white rounded-xl overflow-hidden"
   >
-    <v-stepper-items>
-      <v-col cols="12">
-        <Step
-          v-for="(step, index) in steps"
-          :key="step"
-          :step_index="index"
-          @reset_values="emit('reset_values')"
-        />
-      </v-col>
-    </v-stepper-items>
+    <Step
+      v-for="(step, index) in steps"
+      :key="index"
+      :step_index="index"
+      @reset_values="emit('reset_values')"
+    />
   </v-stepper-vertical>
 </template>
 

package/app/plugins/auto_store_register.js

@@ -10,15 +10,19 @@ const autoStoreRegister = ({ store }) => {
   console.log(`[AutoRegister] Store "${store.$id}" processed`)
 }
 
-export default defineNuxtPlugin((nuxtApp) => {
-  const { $pinia } = nuxtApp
-  if (!$pinia) {
-    console.warn("Pinia instance not available.")
-    return
-  }
+export default defineNuxtPlugin({
+  name: "auto-store-register",
+  dependsOn: ["pinia"],
+  setup(nuxtApp) {
+    const { $pinia } = nuxtApp
+    if (!$pinia) {
+      console.warn("Pinia instance not available.")
+      return
+    }
 
-  $pinia.use(autoStoreRegister)
-  console.log(
-    "[AUTOREGISTER PLUGIN] Loaded automatically from OpenGeodeWeb-Front",
-  )
+    $pinia.use(autoStoreRegister)
+    console.log(
+      "[AUTOREGISTER PLUGIN] Loaded automatically from OpenGeodeWeb-Front",
+    )
+  },
 })

package/app/stores/data.js

@@ -103,7 +103,7 @@ export const useDataStore = defineStore("data", () => {
 
   async function addModelComponents(values) {
     if (!values || values.length === 0) {
-      console.warn("[addModelComponents] No mesh components to add")
+      console.debug("[addModelComponents] No mesh components to add")
       return
     }
     values.map((value) => {

package/internal/database/tables/model_components.js

@@ -1,4 +1,4 @@
 export const modelComponentsTable = {
   name: "model_components",
-  schema: "[id+geode_id], viewer_id, type, name, created_at",
+  schema: "[id+geode_id], [id+type], viewer_id, type, name, created_at",
 }

package/internal/stores/model/blocks.js

@@ -32,6 +32,9 @@ export function useModelBlocksStyle() {
     modelBlockStyle(id, block_id).visibility = visibility
   }
   async function setModelBlocksVisibility(id, block_ids, visibility) {
+    if (!block_ids || block_ids.length === 0) {
+      return
+    }
     const blocks_viewer_ids = await dataStore.getMeshComponentsViewerIds(
       id,
       block_ids,
@@ -70,6 +73,9 @@ export function useModelBlocksStyle() {
   }
 
   async function setModelBlocksColor(id, block_ids, color) {
+    if (!block_ids || block_ids.length === 0) {
+      return
+    }
     const blocks_viewer_ids = await dataStore.getMeshComponentsViewerIds(
       id,
       block_ids,

package/internal/stores/model/corners.js

@@ -32,6 +32,9 @@ export function useModelCornersStyle() {
     modelCornerStyle(id, corner_id).visibility = visibility
   }
   async function setModelCornersVisibility(id, corner_ids, visibility) {
+    if (!corner_ids || corner_ids.length === 0) {
+      return
+    }
     const corner_viewer_ids = await dataStore.getMeshComponentsViewerIds(
       id,
       corner_ids,
@@ -71,6 +74,9 @@ export function useModelCornersStyle() {
   }
 
   async function setModelCornersColor(id, corner_ids, color) {
+    if (!corner_ids || corner_ids.length === 0) {
+      return
+    }
     const corner_viewer_ids = await dataStore.getMeshComponentsViewerIds(
       id,
       corner_ids,

package/internal/stores/model/lines.js

@@ -32,6 +32,9 @@ export function useModelLinesStyle() {
     modelLineStyle(id, line_id).visibility = visibility
   }
   async function setModelLinesVisibility(id, line_ids, visibility) {
+    if (!line_ids || line_ids.length === 0) {
+      return
+    }
     const line_viewer_ids = await dataStore.getMeshComponentsViewerIds(
       id,
       line_ids,
@@ -69,6 +72,9 @@ export function useModelLinesStyle() {
     modelLineStyle(id, line_id).color = color
   }
   async function setModelLinesColor(id, line_ids, color) {
+    if (!line_ids || line_ids.length === 0) {
+      return
+    }
     const line_viewer_ids = await dataStore.getMeshComponentsViewerIds(
       id,
       line_ids,

package/internal/stores/model/surfaces.js

@@ -31,6 +31,9 @@ export function useModelSurfacesStyle() {
     modelSurfaceStyle(id, surface_id).visibility = visibility
   }
   async function setModelSurfacesVisibility(id, surface_ids, visibility) {
+    if (!surface_ids || surface_ids.length === 0) {
+      return
+    }
     const surface_viewer_ids = await dataStore.getMeshComponentsViewerIds(
       id,
       surface_ids,
@@ -68,6 +71,9 @@ export function useModelSurfacesStyle() {
   }
 
   async function setModelSurfacesColor(id, surface_ids, color) {
+    if (!surface_ids || surface_ids.length === 0) {
+      return
+    }
     const surface_viewer_ids = await dataStore.getMeshComponentsViewerIds(
       id,
       surface_ids,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@geode/opengeodeweb-front",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "type": "module",
-  "version": "10.2.0-rc.2",
+  "version": "10.2.1-rc.1",
   "main": "./nuxt.config.js",
   "scripts": {
     "lint": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",

package/tests/integration/microservices/back/requirements.txt

@@ -5,4 +5,4 @@
 #    pip-compile --output-file=tests/integration/microservices/back/requirements.txt tests/integration/microservices/back/requirements.in
 #
 
-opengeodeweb-back==6.*,>=6.0.0rc2
+opengeodeweb-back==6.*,>=6.0.0

package/tests/integration/microservices/viewer/requirements.txt

@@ -5,4 +5,4 @@
 #    pip-compile --output-file=tests/integration/microservices/viewer/requirements.txt tests/integration/microservices/viewer/requirements.in
 #
 
-opengeodeweb-viewer==1.*,>=1.15.0rc2
+opengeodeweb-viewer==1.*,>=1.15.0

package/tests/unit/components/FileSelector.nuxt.test.js

@@ -46,11 +46,13 @@ describe("FileSelector", async () => {
       handler: () => ({}),
     })
 
-    const v_file_input = file_uploader.findComponent(components.VFileInput)
-    await v_file_input.trigger("click")
+    const v_file_input = file_uploader.find('input[type="file"]')
     const files = [new File(["fake_file"], "fake_file.txt")]
     const auto_upload = false
-    await v_file_input.setValue(files)
+    Object.defineProperty(v_file_input.element, "files", {
+      value: files,
+      writable: true,
+    })
     await v_file_input.trigger("change")
     const v_btn = wrapper.findComponent(components.VBtn)
     await v_btn.trigger("click")

package/tests/unit/components/FileUploader.nuxt.test.js

@@ -43,10 +43,11 @@ describe("FileUploader", async () => {
         props: { multiple: false, accept: "*.txt" },
       })
 
-      const v_file_input = wrapper.findComponent(components.VFileInput)
-      await v_file_input.trigger("click")
-
-      await v_file_input.setValue(files)
+      const v_file_input = wrapper.find('input[type="file"]')
+      Object.defineProperty(v_file_input.element, "files", {
+        value: files,
+        writable: true,
+      })
       await v_file_input.trigger("change")
       const v_btn = wrapper.findComponent(components.VBtn)
 

package/tests/unit/components/MissingFilesSelector.nuxt.test.js

@@ -55,10 +55,12 @@ describe("MissingFilesSelector", async () => {
     const file_uploader = wrapper.findComponent(FileUploader)
     expect(file_uploader.exists()).toBe(true)
 
-    const v_file_input = file_uploader.findComponent(components.VFileInput)
-    await v_file_input.trigger("click")
+    const v_file_input = file_uploader.find('input[type="file"]')
     const files = [new File(["fake_file"], "fake_file.txt")]
-    await v_file_input.setValue(files)
+    Object.defineProperty(v_file_input.element, "files", {
+      value: files,
+      writable: true,
+    })
     await v_file_input.trigger("change")
     const v_btn = file_uploader.findComponent(components.VBtn)