@geode/opengeodeweb-front 10.34.0-rc.2 → 10.34.0-rc.21

package/app/components/DeleteDialog.vue

@@ -1,22 +1,24 @@
-<script setup>
+<script setup lang="ts">
 import GlassCard from "./GlassCard.vue";
 
-const { show, item, selectedCount } = defineProps({
-  show: {
-    type: Boolean,
-    default: false,
-  },
-  item: {
-    type: Object,
-    default: undefined,
-  },
-  selectedCount: {
-    type: Number,
-    default: 0,
-  },
-});
+interface DeleteItem {
+  name: string;
+}
 
-const emit = defineEmits(["update:show", "confirm"]);
+interface Props {
+  show?: boolean;
+  item?: DeleteItem;
+  selectedCount?: number;
+}
+
+const { show = false, item = undefined, selectedCount = 0 } = defineProps<Props>();
+
+interface Emits {
+  "update:show": [value: boolean];
+  confirm: [];
+}
+
+const emit = defineEmits<Emits>();
 </script>
 
 <template>

package/app/components/DragAndDrop.vue

@@ -1,37 +1,52 @@
-<script setup>
+<script setup lang="ts">
 import { onMounted, onUnmounted, ref } from "vue";
 import DragAndDropInline from "./DragAndDropInternal/DragAndDropInline.vue";
 import DragAndDropOverlay from "./DragAndDropInternal/DragAndDropOverlay.vue";
 
-const { multiple, accept, loading, showExtensions, fullscreen, inline, showOverlay, texts } =
-  defineProps({
-    multiple: { type: Boolean, default: false },
-    accept: { type: [String, Array], default: "" },
-    loading: { type: Boolean, default: false },
-    showExtensions: { type: Boolean, default: true },
-    fullscreen: { type: Boolean, default: false },
-    inline: { type: Boolean, default: true },
-    showOverlay: { type: Boolean, default: true },
-    texts: {
-      type: Object,
-      default: () => ({
-        idle: "Click or drag and drop",
-        drop: "Drop files here",
-        loading: "Loading...",
-      }),
-    },
-  });
+interface DragAndDropTexts {
+  idle: string;
+  drop: string;
+  loading: string;
+}
+
+interface Props {
+  multiple?: boolean;
+  accept?: string | string[];
+  loading?: boolean;
+  showExtensions?: boolean;
+  fullscreen?: boolean;
+  inline?: boolean;
+  showOverlay?: boolean;
+  texts?: DragAndDropTexts;
+}
 
-const emit = defineEmits(["files-selected"]);
+const {
+  multiple = false,
+  accept = "",
+  loading = false,
+  showExtensions = true,
+  fullscreen = false,
+  inline = true,
+  showOverlay = true,
+  texts = {
+    idle: "Click or drag and drop",
+    drop: "Drop files here",
+    loading: "Loading...",
+  },
+} = defineProps<Props>();
+
+const emit = defineEmits<{
+  "files-selected": [files: File[]];
+}>();
 
 const isDragging = ref(false);
 const isInternalDrag = ref(false);
 const dragCounter = ref(0);
-const fileInput = ref(undefined);
+const fileInput = ref<HTMLInputElement | undefined>(undefined);
 
 const WILDCARD_SUFFIX_LENGTH = 2;
 
-function isFileAccepted(file, acceptValue) {
+function isFileAccepted(file: File, acceptValue: string | string[] | undefined): boolean {
   const fileName = (file.name || "").toLowerCase();
   const fileType = (file.type || "").toLowerCase();
   const isVext = fileName.endsWith(".vext");
@@ -39,7 +54,7 @@ function isFileAccepted(file, acceptValue) {
   if (!acceptValue) {
     return !isVext;
   }
-  let rules = [];
+  let rules: string[] = [];
   if (Array.isArray(acceptValue)) {
     rules = acceptValue;
   } else if (typeof acceptValue === "string") {
@@ -75,18 +90,18 @@ function isFileAccepted(file, acceptValue) {
   });
 }
 
-function triggerFileDialog() {
+function triggerFileDialog(): void {
   fileInput.value?.click();
 }
 
-function onDragEnter(event) {
-  if (!isInternalDrag.value && event.dataTransfer.types.includes("Files")) {
+function onDragEnter(event: DragEvent): void {
+  if (!isInternalDrag.value && event.dataTransfer?.types.includes("Files")) {
     dragCounter.value += 1;
     isDragging.value = true;
   }
 }
 
-function onDragLeave() {
+function onDragLeave(): void {
   dragCounter.value -= 1;
   if (dragCounter.value <= 0) {
     isDragging.value = false;
@@ -94,23 +109,25 @@ function onDragLeave() {
   }
 }
 
-function onDragOver(event) {
-  if (!isInternalDrag.value && event.dataTransfer.types.includes("Files")) {
+function onDragOver(event: DragEvent): void {
+  if (!isInternalDrag.value && event.dataTransfer?.types.includes("Files")) {
     event.preventDefault();
   }
 }
 
-function onDrop(event) {
+function onDrop(event: DragEvent): void {
   event.preventDefault();
   dragCounter.value = 0;
   isDragging.value = false;
-  const files = [...event.dataTransfer.files].filter((file) => isFileAccepted(file, accept));
+  const files = [...(event.dataTransfer?.files ?? [])].filter((file) =>
+    isFileAccepted(file, accept),
+  );
   if (files.length > 0) {
     emit("files-selected", files);
   }
 }
 
-function onKeyDown(event) {
+function onKeyDown(event: KeyboardEvent): void {
   if (event.key === "Escape") {
     event.preventDefault();
     event.stopPropagation();
@@ -119,19 +136,20 @@ function onKeyDown(event) {
   }
 }
 
-function handleFileSelect(event) {
-  const files = [...event.target.files];
+function handleFileSelect(event: Event): void {
+  const target = event.target as HTMLInputElement;
+  const files = [...(target.files ?? [])];
   if (files.length > 0) {
     emit("files-selected", files);
   }
-  event.target.value = "";
+  target.value = "";
 }
 
-function onInternalDragStart() {
+function onInternalDragStart(): void {
   isInternalDrag.value = true;
 }
 
-function onInternalDragEnd() {
+function onInternalDragEnd(): void {
   isInternalDrag.value = false;
 }
 

package/app/components/DragAndDropInternal/DragAndDropInline.vue

@@ -1,22 +1,37 @@
-<script setup>
-import GlassCard from "@ogw_front/components/GlassCard";
+<script setup lang="ts">
+import GlassCard from "@ogw_front/components/GlassCard.vue";
 
-const { isDragging, loading, texts, accept, showExtensions } = defineProps({
-  isDragging: { type: Boolean, required: true },
-  loading: { type: Boolean, required: true },
-  texts: {
-    type: Object,
-    default: () => ({
-      idle: "Click or drag and drop",
-      drop: "Drop files here",
-      loading: "Loading...",
-    }),
+interface DragAndDropTexts {
+  idle: string;
+  drop: string;
+  loading: string;
+}
+
+interface Props {
+  isDragging: boolean;
+  loading: boolean;
+  texts?: DragAndDropTexts;
+  accept?: string | string[];
+  showExtensions: boolean;
+}
+
+const {
+  isDragging,
+  loading,
+  texts = {
+    idle: "Click or drag and drop",
+    drop: "Drop files here",
+    loading: "Loading...",
   },
-  accept: { type: [String, Array], default: "" },
-  showExtensions: { type: Boolean, required: true },
-});
+  accept = "",
+  showExtensions,
+} = defineProps<Props>();
+
+interface Emits {
+  click: [];
+}
 
-const emit = defineEmits(["click"]);
+const emit = defineEmits<Emits>();
 </script>
 
 <template>

package/app/components/DragAndDropInternal/DragAndDropOverlay.vue

@@ -1,22 +1,35 @@
-<script setup>
-const { isDragging, showOverlay, fullscreen, loading, texts, multiple, accept, showExtensions } =
-  defineProps({
-    isDragging: { type: Boolean, required: true },
-    showOverlay: { type: Boolean, required: true },
-    fullscreen: { type: Boolean, required: true },
-    loading: { type: Boolean, required: true },
-    texts: {
-      type: Object,
-      default: () => ({
-        idle: "Click or drag and drop",
-        drop: "Drop files here",
-        loading: "Loading...",
-      }),
-    },
-    multiple: { type: Boolean, required: true },
-    accept: { type: [String, Array], default: "" },
-    showExtensions: { type: Boolean, required: true },
-  });
+<script setup lang="ts">
+interface DragAndDropTexts {
+  idle: string;
+  drop: string;
+  loading: string;
+}
+
+interface Props {
+  isDragging: boolean;
+  showOverlay: boolean;
+  fullscreen: boolean;
+  loading: boolean;
+  texts?: DragAndDropTexts;
+  multiple: boolean;
+  accept?: string | string[];
+  showExtensions: boolean;
+}
+
+const {
+  isDragging,
+  showOverlay,
+  fullscreen,
+  loading,
+  texts = {
+    idle: "Click or drag and drop",
+    drop: "Drop files here",
+    loading: "Loading...",
+  },
+  multiple,
+  accept = "",
+  showExtensions,
+} = defineProps<Props>();
 </script>
 
 <template>

package/app/components/ExtensionSelector.vue

@@ -1,41 +1,57 @@
-<script setup>
+<script setup lang="ts">
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 
-import FetchingData from "@ogw_front/components/FetchingData";
+import FetchingData from "@ogw_front/components/FetchingData.vue";
 import { useBackStore } from "@ogw_front/stores/back";
 
 const schema = schemas.opengeodeweb_back.geode_objects_and_output_extensions;
-const emit = defineEmits(["update_values", "increment_step", "decrement_step"]);
+const emit = defineEmits<{
+  update_values: [values: { output_geode_object: string; output_extension: string }];
+  increment_step: [];
+  decrement_step: [];
+}>();
 
-const { geodeObjectType, filenames } = defineProps({
-  geodeObjectType: { type: String, required: true },
-  filenames: { type: Array, required: true },
-});
-const geode_objects_and_output_extensions = ref({});
-const loading = ref(false);
+interface Props {
+  geodeObjectType: string;
+  filenames: string[];
+}
+
+const { geodeObjectType, filenames } = defineProps<Props>();
+type OutputExtensions = Record<string, { is_saveable: boolean }>;
+
+const geode_objects_and_output_extensions = ref<Record<string, OutputExtensions>>({});
+const loading = ref<boolean>(false);
 
 const toggle_loading = useToggle(loading);
 
-async function get_output_file_extensions() {
+async function get_output_file_extensions(): Promise<void> {
   toggle_loading();
   geode_objects_and_output_extensions.value = {};
   const backStore = useBackStore();
-  const values = await Promise.all(
-    filenames.map(async (filename) => {
+  const values: Record<string, OutputExtensions>[] = await Promise.all(
+    filenames.map(async (filename): Promise<Record<string, OutputExtensions>> => {
       const params = { geode_object_type: geodeObjectType, filename };
       const response = await backStore.request({ schema, params });
-      return response.geode_objects_and_output_extensions;
+      return (
+        response as {
+          geode_objects_and_output_extensions: Record<string, OutputExtensions>;
+        }
+      ).geode_objects_and_output_extensions;
     }),
   );
   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)));
-  const final_object = {};
+  const final_object: Record<string, OutputExtensions> = {};
   for (const key of common_keys) {
     final_object[key] = {};
     for (const value of values) {
-      for (const extension of Object.keys(value[key])) {
+      const extensions = value[key];
+      if (!extensions) {
+        continue;
+      }
+      for (const extension of Object.keys(extensions)) {
         final_object[key][extension] = {
-          is_saveable: value[key][extension].is_saveable,
+          is_saveable: extensions[extension].is_saveable,
         };
       }
     }
@@ -44,7 +60,7 @@ async function get_output_file_extensions() {
   toggle_loading();
 }
 
-function update_values(output_geode_object, output_extension) {
+function update_values(output_geode_object: string, output_extension: string): void {
   if (output_geode_object !== "" && output_extension !== "") {
     emit("update_values", {
       output_geode_object,
@@ -67,7 +83,7 @@ await get_output_file_extensions();
       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">
+        <v-card-title v-tooltip:bottom="`Export as a ${output_geode_object}`">
           {{ output_geode_object }}
         </v-card-title>
         <v-card-text>

package/app/components/FeedBack/ErrorBanner.vue

@@ -1,11 +1,13 @@
-<script setup>
+<script setup lang="ts">
 import { useFeedbackStore } from "@ogw_front/stores/feedback";
 
 const feedbackStore = useFeedbackStore();
 
-function reload() {
+function reload(): void {
   globalThis.location.reload();
 }
+
+defineExpose({ reload });
 </script>
 
 <template>
@@ -18,7 +20,6 @@ function reload() {
     <v-row>
       <v-col cols="auto" class="text-white text-center">
         <v-icon
-          v-bind="props"
           color="white"
           class="justify-right"
           v-tooltip:bottom="'We turn off our server automatically after 5 minutes of inactivity'"

package/app/components/FeedBack/Snackers.vue

@@ -1,13 +1,13 @@
-<script setup>
+<script setup lang="ts">
 import { useFeedbackStore } from "@ogw_front/stores/feedback";
 
 const MARGIN_BETWEEN_SNACKERS = 60;
 const FIRST_SNACKER_MARGIN = 8;
 
 const feedbackStore = useFeedbackStore();
-const show = ref(true);
+const show = ref<boolean>(true);
 
-function calc_margin(index) {
+function calc_margin(index: number): string {
   return `${index * MARGIN_BETWEEN_SNACKERS + FIRST_SNACKER_MARGIN}px`;
 }
 </script>
@@ -15,8 +15,9 @@ function calc_margin(index) {
 <template>
   <v-snackbar
     v-for="(feedback, index) in feedbackStore.feedbacks"
-    :key="feedback"
+    :key="feedback.id"
     v-model="show"
+    data-testid="feedbackSnackbar"
     :style="{ 'margin-bottom': calc_margin(index) }"
     :color="feedback.type"
     location="bottom right"
@@ -67,7 +68,7 @@ function calc_margin(index) {
           variant="flat"
           size="20"
           :color="feedback.type"
-          @click="feedbackStore.delete_feedback(feedback.id)"
+          @click.stop="feedbackStore.delete_feedback(feedback.id)"
         >
           <v-icon icon="mdi-close" size="20" color="white" />
         </v-btn>

package/app/components/FetchingData.vue

@@ -1,22 +1,18 @@
-<script setup>
+<script setup lang="ts">
 const DEFAULT_SIZE = 22;
 const DEFAULT_WIDTH = 3;
 
+interface Props {
+  text?: string;
+  size?: number | string;
+  width?: number | string;
+}
+
 const {
   text = "Fetching data...",
   size = DEFAULT_SIZE,
   width = DEFAULT_WIDTH,
-} = defineProps({
-  text: {
-    type: String,
-  },
-  size: {
-    type: [Number, String],
-  },
-  width: {
-    type: [Number, String],
-  },
-});
+} = defineProps<Props>();
 </script>
 
 <template>

package/app/components/FileSelector.vue

@@ -1,25 +1,33 @@
-<script setup>
+<script setup lang="ts">
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 
-import FetchingData from "@ogw_front/components/FetchingData";
-import FileUploader from "@ogw_front/components/FileUploader";
+import FetchingData from "@ogw_front/components/FetchingData.vue";
+import FileUploader from "@ogw_front/components/FileUploader.vue";
 import { useBackStore } from "@ogw_front/stores/back";
 
 const schema = schemas.opengeodeweb_back.allowed_files;
 
-const emit = defineEmits(["update_values", "increment_step", "decrement_step"]);
+interface Emits {
+  update_values: [values: { files: unknown[]; autoUpload: boolean }];
+  increment_step: [];
+  decrement_step: [];
+}
+
+const emit = defineEmits<Emits>();
+
+interface Props {
+  multiple: boolean;
+  files?: File[];
+  autoUpload?: boolean;
+  showOverlay?: boolean;
+}
 
-const { multiple, files, autoUpload, showOverlay } = defineProps({
-  multiple: { type: Boolean, required: true },
-  files: { type: Array, default: () => [] },
-  autoUpload: { type: Boolean, default: true },
-  showOverlay: { type: Boolean, default: true },
-});
+const { multiple, files = [], autoUpload = true, showOverlay = true } = defineProps<Props>();
 
-const internal_files = ref(files);
-const internal_auto_upload = ref(autoUpload);
-const accept = ref("");
-const loading = ref(false);
+const internal_files = ref<File[]>(files);
+const internal_auto_upload = ref<boolean>(autoUpload);
+const accept = ref<string>("");
+const loading = ref<boolean>(false);
 
 watch(
   () => files,
@@ -37,17 +45,19 @@ watch(
 
 const toggle_loading = useToggle(loading);
 
-function files_uploaded_event(value) {
+function files_uploaded_event(value: unknown[]): void {
   if (value.length > 0) {
     emit("update_values", { files: value, autoUpload: false });
     emit("increment_step");
   }
 }
 
-async function get_allowed_files() {
+async function get_allowed_files(): Promise<void> {
   toggle_loading();
   const backStore = useBackStore();
-  const response = await backStore.request({ schema });
+  const response = (await backStore.request({ schema })) as {
+    extensions: string[];
+  };
   accept.value = response.extensions.map((extension) => `.${extension}`).join(",");
   toggle_loading();
 }