@geode/opengeodeweb-front 10.2.1-rc.2 → 10.2.1-rc.3

package/app/components/Carousel.vue

@@ -1,23 +1,3 @@
-<template>
-  <ClientOnly>
-    <Carousel :settings="carrousel_settings">
-      <Slide
-        v-for="(item, index) in props.items"
-        :key="index"
-        class="carousel__slide"
-      >
-        <a :href="item.url" target="_blank">
-          <img :src="item.logo" class="carousel__item" />
-        </a>
-      </Slide>
-      <template #addons>
-        <Navigation />
-        <Pagination />
-      </template>
-    </Carousel>
-  </ClientOnly>
-</template>
-
 <script setup>
   import "vue3-carousel/dist/carousel.css"
   import { Carousel, Slide, Navigation, Pagination } from "vue3-carousel"
@@ -62,6 +42,26 @@
   })
 </script>
 
+<template>
+  <ClientOnly>
+    <Carousel :settings="carrousel_settings">
+      <Slide
+        v-for="(item, index) in props.items"
+        :key="index"
+        class="carousel__slide"
+      >
+        <a :href="item.url" target="_blank">
+          <img :src="item.logo" class="carousel__item" />
+        </a>
+      </Slide>
+      <template #addons>
+        <Navigation />
+        <Pagination />
+      </template>
+    </Carousel>
+  </ClientOnly>
+</template>
+
 <style scoped>
   .carousel__item {
     min-height: 200px;

package/app/components/CrsSelector.vue

@@ -1,28 +1,3 @@
-<template>
-  <v-text-field
-    v-model="search"
-    append-icon="mdi-magnify"
-    label="Search"
-    single-line
-    hide-details
-  ></v-text-field>
-  <v-data-table
-    v-model="selected_crs"
-    :v-model:items-per-page="10"
-    :headers="headers"
-    :items="crs_list"
-    item-value="code"
-    class="elevation-1"
-    density="compact"
-    fixed-header
-    select-strategy="single"
-    show-select
-    :search="search"
-    :loading="data_table_loading"
-    loading-text="Loading... Please wait"
-  ></v-data-table>
-</template>
-
 <script setup>
   import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
   const schema = schemas.opengeodeweb_back.geographic_coordinate_systems
@@ -89,3 +64,28 @@
 
   await get_crs_table()
 </script>
+
+<template>
+  <v-text-field
+    v-model="search"
+    append-icon="mdi-magnify"
+    label="Search"
+    single-line
+    hide-details
+  ></v-text-field>
+  <v-data-table
+    v-model="selected_crs"
+    :v-model:items-per-page="10"
+    :headers="headers"
+    :items="crs_list"
+    item-value="code"
+    class="elevation-1"
+    density="compact"
+    fixed-header
+    select-strategy="single"
+    show-select
+    :search="search"
+    :loading="data_table_loading"
+    loading-text="Loading... Please wait"
+  ></v-data-table>
+</template>

package/app/components/DragAndDrop.vue

@@ -1,3 +1,34 @@
+<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>
+
 <template>
   <v-hover v-slot="{ isHovering, props: hoverProps }">
     <v-card
@@ -73,37 +104,6 @@
   </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;

package/app/components/ExtensionSelector.vue

@@ -1,59 +1,3 @@
-<template>
-  <FetchingData v-if="loading" />
-  <v-row v-else class="justify-left">
-    <v-col
-      v-for="(
-        output_extensions, output_geode_object
-      ) in geode_objects_and_output_extensions"
-      :key="output_geode_object"
-      class="justify-left"
-    >
-      <v-card class="card ma-2 pa-2" width="100%">
-        <v-card-title
-          v-tooltip:bottom="`Export as a ${output_geode_object}`"
-          v-bind="props"
-        >
-          {{ output_geode_object }}
-        </v-card-title>
-        <v-card-text>
-          <v-row>
-            <v-col
-              v-for="(extension, output_extension) in output_extensions"
-              :key="output_extension"
-              cols="auto"
-              class="pa-0"
-            >
-              <v-tooltip
-                :disabled="extension.is_saveable"
-                text="Data not saveable with this file extension"
-                location="bottom"
-              >
-                <template v-slot:activator="{ props }">
-                  <span v-bind="props">
-                    <v-card
-                      class="card ma-2"
-                      :color="extension.is_saveable ? 'primary' : 'grey'"
-                      hover
-                      @click="
-                        update_values(output_geode_object, output_extension)
-                      "
-                      :disabled="!extension.is_saveable"
-                    >
-                      <v-card-title align="center">
-                        {{ output_extension }}
-                      </v-card-title>
-                    </v-card>
-                  </span>
-                </template>
-              </v-tooltip>
-            </v-col>
-          </v-row>
-        </v-card-text>
-      </v-card>
-    </v-col>
-  </v-row>
-</template>
-
 <script setup>
   import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 
@@ -128,3 +72,59 @@
 
   await get_output_file_extensions()
 </script>
+
+<template>
+  <FetchingData v-if="loading" />
+  <v-row v-else class="justify-left">
+    <v-col
+      v-for="(
+        output_extensions, output_geode_object
+      ) in geode_objects_and_output_extensions"
+      :key="output_geode_object"
+      class="justify-left"
+    >
+      <v-card class="card ma-2 pa-2" width="100%">
+        <v-card-title
+          v-tooltip:bottom="`Export as a ${output_geode_object}`"
+          v-bind="props"
+        >
+          {{ output_geode_object }}
+        </v-card-title>
+        <v-card-text>
+          <v-row>
+            <v-col
+              v-for="(extension, output_extension) in output_extensions"
+              :key="output_extension"
+              cols="auto"
+              class="pa-0"
+            >
+              <v-tooltip
+                :disabled="extension.is_saveable"
+                text="Data not saveable with this file extension"
+                location="bottom"
+              >
+                <template v-slot:activator="{ props }">
+                  <span v-bind="props">
+                    <v-card
+                      class="card ma-2"
+                      :color="extension.is_saveable ? 'primary' : 'grey'"
+                      hover
+                      @click="
+                        update_values(output_geode_object, output_extension)
+                      "
+                      :disabled="!extension.is_saveable"
+                    >
+                      <v-card-title align="center">
+                        {{ output_extension }}
+                      </v-card-title>
+                    </v-card>
+                  </span>
+                </template>
+              </v-tooltip>
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>

package/app/components/FeedBack/ErrorBanner.vue

@@ -1,3 +1,12 @@
+<script setup>
+  import { useFeedbackStore } from "@ogw_front/stores/feedback"
+  const feedbackStore = useFeedbackStore()
+
+  function reload() {
+    window.location.reload()
+  }
+</script>
+
 <template>
   <v-banner
     v-if="feedbackStore.server_error"
@@ -41,12 +50,3 @@
     </v-row>
   </v-banner>
 </template>
-
-<script setup>
-  import { useFeedbackStore } from "@ogw_front/stores/feedback"
-  const feedbackStore = useFeedbackStore()
-
-  function reload() {
-    window.location.reload()
-  }
-</script>

package/app/components/FeedBack/Snackers.vue

@@ -1,3 +1,14 @@
+<script setup>
+  import { useFeedbackStore } from "@ogw_front/stores/feedback"
+
+  const feedbackStore = useFeedbackStore()
+  const show = ref(true)
+
+  function calc_margin(index) {
+    return index * 60 + 8 + "px"
+  }
+</script>
+
 <template>
   <v-snackbar
     v-for="(feedback, index) in feedbackStore.feedbacks"
@@ -60,17 +71,6 @@
   </v-snackbar>
 </template>
 
-<script setup>
-  import { useFeedbackStore } from "@ogw_front/stores/feedback"
-
-  const feedbackStore = useFeedbackStore()
-  const show = ref(true)
-
-  function calc_margin(index) {
-    return index * 60 + 8 + "px"
-  }
-</script>
-
 <style scoped>
   .v-snackbar :deep(.v-snackbar__content) {
     width: 100%;

package/app/components/FileSelector.vue

@@ -1,12 +1,3 @@
-<template>
-  <FetchingData v-if="loading" />
-  <FileUploader
-    v-else
-    v-bind="{ multiple, accept, files: internal_files, auto_upload }"
-    @files_uploaded="files_uploaded_event"
-  />
-</template>
-
 <script setup>
   import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 
@@ -62,3 +53,12 @@
 
   await get_allowed_files()
 </script>
+
+<template>
+  <FetchingData v-if="loading" />
+  <FileUploader
+    v-else
+    v-bind="{ multiple, accept, files: internal_files, auto_upload }"
+    @files_uploaded="files_uploaded_event"
+  />
+</template>

package/app/components/FileUploader.vue

@@ -1,57 +1,3 @@
-<template>
-  <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"
-        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
-      >
-    </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"
@@ -142,3 +88,57 @@
     }
   })
 </script>
+
+<template>
+  <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"
+        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
+      >
+    </v-btn>
+  </v-card-actions>
+</template>

package/app/components/HybridRenderingView.vue

@@ -1,19 +1,3 @@
-<template>
-  <ClientOnly>
-    <div class="fill-height" style="position: relative">
-      <VeaseViewToolbar />
-      <slot name="ui"></slot>
-      <v-col
-        class="pa-0"
-        ref="viewer"
-        style="height: 100%; overflow: hidden; position: relative; z-index: 0"
-        @click="get_x_y"
-        @keydown.esc="viewerStore.toggle_picking_mode(false)"
-      />
-    </div>
-  </ClientOnly>
-</template>
-
 <script setup>
   import VeaseViewToolbar from "@ogw_front/components/VeaseViewToolbar"
 
@@ -64,6 +48,22 @@
   }
 </script>
 
+<template>
+  <ClientOnly>
+    <div class="fill-height" style="position: relative">
+      <VeaseViewToolbar />
+      <slot name="ui"></slot>
+      <v-col
+        class="pa-0"
+        ref="viewer"
+        style="height: 100%; overflow: hidden; position: relative; z-index: 0"
+        @click="get_x_y"
+        @keydown.esc="viewerStore.toggle_picking_mode(false)"
+      />
+    </div>
+  </ClientOnly>
+</template>
+
 <style>
   img {
     pointer-events: none;

package/app/components/InfraConnected.vue

@@ -1,9 +1,9 @@
-<template>
-  <slot v-if="infraStore.microservices_connected" />
-</template>
-
 <script setup>
   import { useInfraStore } from "@ogw_front/stores/infra"
   const infraStore = useInfraStore()
   console.log("TEST", { infraStore })
 </script>
+
+<template>
+  <slot v-if="infraStore.microservices_connected" />
+</template>

package/app/components/Inspector/InspectionButton.vue

@@ -1,19 +1,3 @@
-<template>
-  <div class="pa-0">
-    <v-btn
-      :loading="loading"
-      color="primary"
-      @click="get_inspection_results(props.geode_object_type, props.filename)"
-    >
-      Inspect
-      <template #loader>
-        <v-progress-circular indeterminate size="20" color="white" width="3" />
-      </template>
-    </v-btn>
-    <v-btn variant="text" @click="emit('decrement_step')">Cancel</v-btn>
-  </div>
-</template>
-
 <script setup>
   import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
   import { useGeodeStore } from "@ogw_front/stores/geode"
@@ -47,3 +31,19 @@
     toggle_loading()
   }
 </script>
+
+<template>
+  <div class="pa-0">
+    <v-btn
+      :loading="loading"
+      color="primary"
+      @click="get_inspection_results(props.geode_object_type, props.filename)"
+    >
+      Inspect
+      <template #loader>
+        <v-progress-circular indeterminate size="20" color="white" width="3" />
+      </template>
+    </v-btn>
+    <v-btn variant="text" @click="emit('decrement_step')">Cancel</v-btn>
+  </div>
+</template>

package/app/components/Inspector/ResultPanel.vue

@@ -1,3 +1,18 @@
+<script setup>
+  import InspectorResultPanel from "@ogw_front/components/Inspector/ResultPanel"
+
+  const props = defineProps({
+    inspection_result: { type: Array, required: true },
+  })
+  const opened_panels = ref([])
+
+  onMounted(async () => {
+    opened_panels.value = props.inspection_result
+      .map((result, i) => (result.nb_issues > 0 ? i : -1))
+      .filter((index) => index !== -1)
+  })
+</script>
+
 <template>
   <v-container class="pa-2">
     <v-expansion-panels v-model="opened_panels" multiple elevation="5">
@@ -40,18 +55,3 @@
     </v-expansion-panels>
   </v-container>
 </template>
-
-<script setup>
-  import InspectorResultPanel from "@ogw_front/components/Inspector/ResultPanel"
-
-  const props = defineProps({
-    inspection_result: { type: Array, required: true },
-  })
-  const opened_panels = ref([])
-
-  onMounted(async () => {
-    opened_panels.value = props.inspection_result
-      .map((result, i) => (result.nb_issues > 0 ? i : -1))
-      .filter((index) => index !== -1)
-  })
-</script>

package/app/components/Launcher.vue

@@ -1,3 +1,21 @@
+<script setup>
+  import Status from "@ogw_front/utils/status"
+  import Loading from "@ogw_front/components/Loading"
+  import Recaptcha from "@ogw_front/components/Recaptcha"
+  import { useInfraStore } from "@ogw_front/stores/infra"
+
+  const infraStore = useInfraStore()
+
+  watch(
+    () => infraStore.is_captcha_validated,
+    (value, oldValue) => {
+      if (value && !oldValue && import.meta.client) {
+        infraStore.create_backend()
+      }
+    },
+  )
+</script>
+
 <template>
   <v-container class="justify">
     <v-row align-content="center" align="center">
@@ -16,21 +34,3 @@
     </v-row>
   </v-container>
 </template>
-
-<script setup>
-  import Status from "@ogw_front/utils/status"
-  import Loading from "@ogw_front/components/Loading"
-  import Recaptcha from "@ogw_front/components/Recaptcha"
-  import { useInfraStore } from "@ogw_front/stores/infra"
-
-  const infraStore = useInfraStore()
-
-  watch(
-    () => infraStore.is_captcha_validated,
-    (value, oldValue) => {
-      if (value && !oldValue && import.meta.client) {
-        infraStore.create_backend()
-      }
-    },
-  )
-</script>