Fix/components

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;

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>

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;

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>

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>

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%;

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>