@geode/opengeodeweb-front 10.32.2-rc.1 → 10.32.2-rc.2

package/app/components/DragAndDrop.vue

@@ -6,7 +6,7 @@ import DragAndDropOverlay from "./DragAndDropInternal/DragAndDropOverlay.vue";
 const { multiple, accept, loading, showExtensions, fullscreen, inline, showOverlay, texts } =
   defineProps({
     multiple: { type: Boolean, default: false },
-    accept: { type: String, default: "" },
+    accept: { type: [String, Array], default: "" },
     loading: { type: Boolean, default: false },
     showExtensions: { type: Boolean, default: true },
     fullscreen: { type: Boolean, default: false },
@@ -29,6 +29,52 @@ const isInternalDrag = ref(false);
 const dragCounter = ref(0);
 const fileInput = ref(undefined);
 
+const WILDCARD_SUFFIX_LENGTH = 2;
+
+function isFileAccepted(file, acceptValue) {
+  const fileName = (file.name || "").toLowerCase();
+  const fileType = (file.type || "").toLowerCase();
+  const isVext = fileName.endsWith(".vext");
+
+  if (!acceptValue) {
+    return !isVext;
+  }
+  let rules = [];
+  if (Array.isArray(acceptValue)) {
+    rules = acceptValue;
+  } else if (typeof acceptValue === "string") {
+    rules = acceptValue.split(",");
+  }
+  rules = rules.map((rule) => String(rule).trim()).filter(Boolean);
+  if (rules.length === 0) {
+    return !isVext;
+  }
+
+  return rules.some((rule) => {
+    let cleanRule = rule.toLowerCase();
+    if (!cleanRule) {
+      return !isVext;
+    }
+    if (cleanRule === "*" || cleanRule === "*.*") {
+      return !isVext;
+    }
+    if (cleanRule.startsWith("*.")) {
+      cleanRule = cleanRule.slice(1);
+    }
+    if (cleanRule.startsWith(".")) {
+      return fileName.endsWith(cleanRule);
+    }
+    if (cleanRule.includes("/")) {
+      if (cleanRule.endsWith("/*")) {
+        const typeGroup = cleanRule.slice(0, -WILDCARD_SUFFIX_LENGTH);
+        return fileType.startsWith(typeGroup);
+      }
+      return fileType === cleanRule;
+    }
+    return fileName.endsWith(`.${cleanRule}`);
+  });
+}
+
 function triggerFileDialog() {
   fileInput.value?.click();
 }
@@ -58,7 +104,7 @@ function onDrop(event) {
   event.preventDefault();
   dragCounter.value = 0;
   isDragging.value = false;
-  const files = [...event.dataTransfer.files];
+  const files = [...event.dataTransfer.files].filter((file) => isFileAccepted(file, accept));
   if (files.length > 0) {
     emit("files-selected", files);
   }

package/app/components/DragAndDropInternal/DragAndDropInline.vue

@@ -12,7 +12,7 @@ const { isDragging, loading, texts, accept, showExtensions } = defineProps({
       loading: "Loading...",
     }),
   },
-  accept: { type: String, default: "" },
+  accept: { type: [String, Array], default: "" },
   showExtensions: { type: Boolean, required: true },
 });
 
@@ -51,7 +51,7 @@ const emit = defineEmits(["click"]);
           v-if="accept && showExtensions"
           class="text-body-2 text-white opacity-60 bg-transparent"
         >
-          {{ accept }}
+          {{ Array.isArray(accept) ? accept.join(", ") : accept }}
         </v-sheet>
       </v-card-text>
     </GlassCard>

package/app/components/DragAndDropInternal/DragAndDropOverlay.vue

@@ -14,7 +14,7 @@ const { isDragging, showOverlay, fullscreen, loading, texts, multiple, accept, s
       }),
     },
     multiple: { type: Boolean, required: true },
-    accept: { type: String, default: "" },
+    accept: { type: [String, Array], default: "" },
     showExtensions: { type: Boolean, required: true },
   });
 </script>
@@ -76,7 +76,7 @@ const { isDragging, showOverlay, fullscreen, loading, texts, multiple, accept, s
                 :size="fullscreen ? 'x-large' : 'large'"
                 class="px-8 glow-chip"
               >
-                Accepted formats: {{ accept }}
+                Accepted formats: {{ Array.isArray(accept) ? accept.join(", ") : accept }}
               </v-chip>
 
               <v-sheet

package/app/components/FileUploader.vue

@@ -8,7 +8,7 @@ const emit = defineEmits(["files_uploaded", "decrement_step", "reset_values"]);
 
 const { multiple, accept, files, autoUpload, showOverlay, mini } = defineProps({
   multiple: { type: Boolean, default: false },
-  accept: { type: String, default: "" },
+  accept: { type: [String, Array], default: "" },
   files: { type: Array, default: () => [] },
   autoUpload: { type: Boolean, default: true },
   showOverlay: { type: Boolean, default: false },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.32.2-rc.1",
+  "version": "10.32.2-rc.2",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {

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

@@ -0,0 +1,89 @@
+// Third party imports
+import { describe, expect, test } from "vitest";
+import { flushPromises } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+
+// Local imports
+import { setupActivePinia, vuetify } from "@ogw_tests/utils";
+import DragAndDrop from "@ogw_front/components/DragAndDrop";
+
+describe("drag and drop", () => {
+  const pinia = setupActivePinia();
+
+  test("ignores dropped files that do not match accept prop", async () => {
+    const wrapper = await mountSuspended(DragAndDrop, {
+      global: {
+        plugins: [vuetify, pinia],
+      },
+      props: {
+        accept: ".vtp,.vts",
+      },
+    });
+
+    const dropEvent = new Event("drop", { bubbles: true, cancelable: true });
+    Object.defineProperty(dropEvent, "dataTransfer", {
+      value: {
+        files: [new File(["extension_data"], "plugin.vext")],
+        types: ["Files"],
+      },
+    });
+
+    globalThis.dispatchEvent(dropEvent);
+    await flushPromises();
+
+    expect(wrapper.emitted("files-selected")).toBeUndefined();
+  });
+
+  test("emits files-selected when dropped file matches accept prop", async () => {
+    const wrapper = await mountSuspended(DragAndDrop, {
+      global: {
+        plugins: [vuetify, pinia],
+      },
+      props: {
+        accept: ".vtp,.vts",
+      },
+    });
+
+    const validFile = new File(["mesh_data"], "model.vtp");
+    const dropEvent = new Event("drop", { bubbles: true, cancelable: true });
+    Object.defineProperty(dropEvent, "dataTransfer", {
+      value: {
+        files: [validFile],
+        types: ["Files"],
+      },
+    });
+
+    globalThis.dispatchEvent(dropEvent);
+    await flushPromises();
+
+    expect(wrapper.emitted("files-selected")).toBeDefined();
+    expect(wrapper.emitted("files-selected")[0][0]).toStrictEqual([validFile]);
+  });
+
+  test("accepts general files but excludes .vext when accept prop is empty", async () => {
+    const wrapper = await mountSuspended(DragAndDrop, {
+      global: {
+        plugins: [vuetify, pinia],
+      },
+      props: {
+        accept: "",
+      },
+    });
+
+    const dataFile = new File(["any_data"], "data_file.txt");
+    const extensionFile = new File(["extension_data"], "plugin.vext");
+    const dropEvent = new Event("drop", { bubbles: true, cancelable: true });
+    Object.defineProperty(dropEvent, "dataTransfer", {
+      value: {
+        files: [dataFile, extensionFile],
+        types: ["Files"],
+      },
+    });
+
+    globalThis.dispatchEvent(dropEvent);
+    await flushPromises();
+
+    expect(wrapper.emitted("files-selected")).toBeDefined();
+    expect(wrapper.emitted("files-selected")[0][0]).toStrictEqual([dataFile]);
+  });
+});