@geode/opengeodeweb-front 10.20.0-rc.3 → 10.20.0-rc.4

package/app/components/csv-preview/CsvPreviewer.vue

@@ -35,7 +35,7 @@ function autoDetectSeparator(content) {
     .slice(0, MAX_CONTENT_SLICE)
     .split(/\r?\n/u)
     .slice(0, MAX_LINES_FOR_DETECTION);
-  const candidates = [",", ";", "\t", "|"];
+  const candidates = [",", ";", "\t", "|", " "];
   let best = ",";
   let maxCount = -1;
 
@@ -132,12 +132,23 @@ const computedResult = computed(() => {
     firstRow: firstRow.value,
     headerRow: headerRow.value,
     separator: separator.value,
-    xColumn: xIndex === -1 ? 0 : xIndex,
-    yColumn: yIndex === -1 ? 1 : yIndex,
-    zColumn: zIndex === -1 ? 2 : zIndex,
+    xColumn: xIndex,
+    yColumn: yIndex,
+    zColumn: zIndex,
   };
 });
 
+const isFormValid = computed(
+  () =>
+    separator.value !== "" &&
+    separator.value !== undefined &&
+    headerRow.value !== undefined &&
+    firstRow.value !== undefined &&
+    xColumn.value !== undefined &&
+    yColumn.value !== undefined &&
+    zColumn.value !== undefined,
+);
+
 watch([separator, headerRow, firstRow], () => {
   parseContent();
   xColumn.value = undefined;
@@ -232,7 +243,7 @@ function onConfirm() {
           color="primary"
           class="text-none px-8 rounded-lg font-weight-bold"
           @click="onConfirm"
-          :disabled="!previewHeaders.length"
+          :disabled="!previewHeaders.length || !isFormValid"
         >
           Confirm
         </v-btn>

package/app/components/csv-preview/CsvSettings.vue

@@ -22,12 +22,42 @@ const separators = [
   { title: "Comma (,)", value: "," },
   { title: "Semicolon (;)", value: ";" },
   { title: "Tab (\\t)", value: "\t" },
+  { title: "Space ( )", value: " " },
   { title: "Pipe (|)", value: "|" },
+  { title: "Custom", value: "custom" },
 ];
 
-const internalSeparator = computed({
-  get: () => separator,
-  set: (value) => emit("update:separator", value),
+const selectedType = ref(",");
+const customValue = ref("");
+
+watch(
+  () => separator,
+  (newVal) => {
+    const predefined = separators.find((sep) => sep.value === newVal && sep.value !== "custom");
+    if (predefined) {
+      selectedType.value = predefined.value;
+    } else {
+      selectedType.value = "custom";
+      if (customValue.value !== newVal) {
+        customValue.value = newVal || "";
+      }
+    }
+  },
+  { immediate: true },
+);
+
+watch(selectedType, (newVal) => {
+  if (newVal === "custom") {
+    emit("update:separator", customValue.value);
+  } else {
+    emit("update:separator", newVal);
+  }
+});
+
+watch(customValue, (newVal) => {
+  if (selectedType.value === "custom") {
+    emit("update:separator", newVal);
+  }
 });
 
 const internalHeaderRow = computed({
@@ -61,8 +91,10 @@ const internalZColumn = computed({
     <div class="text-overline mb-4 text-primary font-weight-bold">Parser Settings</div>
 
     <v-select
-      v-model="internalSeparator"
+      v-model="selectedType"
       :items="separators"
+      item-title="title"
+      item-value="value"
       label="Separator"
       variant="outlined"
       density="compact"
@@ -71,8 +103,8 @@ const internalZColumn = computed({
     />
 
     <v-text-field
-      v-if="!separators.find((s) => s.value === separator)"
-      v-model="internalSeparator"
+      v-if="selectedType === 'custom'"
+      v-model="customValue"
       label="Custom Separator"
       variant="outlined"
       density="compact"

package/package.json

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