@geode/opengeodeweb-front 10.6.2 → 10.7.0-rc.1

package/app/components/ExtensionSelector.vue

@@ -1,85 +1,74 @@
 <script setup>
-  import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
+import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 
-  import FetchingData from "@ogw_front/components/FetchingData"
-  import { useGeodeStore } from "@ogw_front/stores/geode"
+import FetchingData from "@ogw_front/components/FetchingData";
+import { useGeodeStore } from "@ogw_front/stores/geode";
 
-  const schema = schemas.opengeodeweb_back.geode_objects_and_output_extensions
-  const emit = defineEmits([
-    "update_values",
-    "increment_step",
-    "decrement_step",
-  ])
+const schema = schemas.opengeodeweb_back.geode_objects_and_output_extensions;
+const emit = defineEmits(["update_values", "increment_step", "decrement_step"]);
 
-  const { geode_object_type, filenames } = defineProps({
-    geode_object_type: { type: String, required: true },
-    filenames: { type: Array, required: true },
-  })
-  const geode_objects_and_output_extensions = ref({})
-  const loading = ref(false)
+const { geode_object_type, filenames } = defineProps({
+  geode_object_type: { type: String, required: true },
+  filenames: { type: Array, required: true },
+});
+const geode_objects_and_output_extensions = ref({});
+const loading = ref(false);
 
-  const toggle_loading = useToggle(loading)
+const toggle_loading = useToggle(loading);
 
-  async function get_output_file_extensions() {
-    toggle_loading()
-    geode_objects_and_output_extensions.value = {}
-    const geodeStore = useGeodeStore()
-    const values = await Promise.all(
-      filenames.map(async (filename) => {
-        const response = await geodeStore.request(schema, {
-          geode_object_type,
-          filename,
-        })
-        return response.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 = {}
-    for (const key of common_keys) {
-      final_object[key] = {}
-      for (const value of values) {
-        for (const extension of Object.keys(value[key])) {
-          final_object[key][extension] = {
-            is_saveable: value[key][extension].is_saveable,
-          }
-        }
+async function get_output_file_extensions() {
+  toggle_loading();
+  geode_objects_and_output_extensions.value = {};
+  const geodeStore = useGeodeStore();
+  const values = await Promise.all(
+    filenames.map(async (filename) => {
+      const response = await geodeStore.request(schema, {
+        geode_object_type,
+        filename,
+      });
+      return response.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 = {};
+  for (const key of common_keys) {
+    final_object[key] = {};
+    for (const value of values) {
+      for (const extension of Object.keys(value[key])) {
+        final_object[key][extension] = {
+          is_saveable: value[key][extension].is_saveable,
+        };
       }
     }
-    geode_objects_and_output_extensions.value = final_object
-    toggle_loading()
   }
+  geode_objects_and_output_extensions.value = final_object;
+  toggle_loading();
+}
 
-  function update_values(output_geode_object, output_extension) {
-    if (output_geode_object !== "" && output_extension !== "") {
-      emit("update_values", {
-        output_geode_object,
-        output_extension,
-      })
-      emit("increment_step")
-    }
+function update_values(output_geode_object, output_extension) {
+  if (output_geode_object !== "" && output_extension !== "") {
+    emit("update_values", {
+      output_geode_object,
+      output_extension,
+    });
+    emit("increment_step");
   }
+}
 
-  await get_output_file_extensions()
+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"
+      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"
-        >
+        <v-card-title v-tooltip:bottom="`Export as a ${output_geode_object}`" v-bind="props">
           {{ output_geode_object }}
         </v-card-title>
         <v-card-text>
@@ -101,9 +90,7 @@
                       class="card ma-2"
                       :color="extension.is_saveable ? 'primary' : 'grey'"
                       hover
-                      @click="
-                        update_values(output_geode_object, output_extension)
-                      "
+                      @click="update_values(output_geode_object, output_extension)"
                       :disabled="!extension.is_saveable"
                     >
                       <v-card-title align="center">

package/app/components/FeedBack/ErrorBanner.vue

@@ -1,10 +1,10 @@
 <script setup>
-  import { useFeedbackStore } from "@ogw_front/stores/feedback"
-  const feedbackStore = useFeedbackStore()
+import { useFeedbackStore } from "@ogw_front/stores/feedback";
+const feedbackStore = useFeedbackStore();
 
-  function reload() {
-    globalThis.location.reload()
-  }
+function reload() {
+  globalThis.location.reload();
+}
 </script>
 
 <template>
@@ -20,16 +20,13 @@
           v-bind="props"
           color="white"
           class="justify-right"
-          v-tooltip:bottom="
-            'We turn off our server automatically after 5 minutes of inactivity'
-          "
+          v-tooltip:bottom="'We turn off our server automatically after 5 minutes of inactivity'"
         >
           mdi-information-outline
         </v-icon>
       </v-col>
       <v-col cols="auto" class="text-white font-weight-bold">
-        Server timed out due to inactivity, please reload this page or click
-        here:
+        Server timed out due to inactivity, please reload this page or click here:
       </v-col>
       <v-col class="align-items" cols="auto">
         <v-btn color="grey" density="compact" @click="reload()"> Reload </v-btn>

package/app/components/FeedBack/Snackers.vue

@@ -1,15 +1,15 @@
 <script setup>
-  import { useFeedbackStore } from "@ogw_front/stores/feedback"
+import { useFeedbackStore } from "@ogw_front/stores/feedback";
 
-  const MARGIN_BETWEEN_SNACKERS = 60
-  const FIRST_SNACKER_MARGIN = 8
+const MARGIN_BETWEEN_SNACKERS = 60;
+const FIRST_SNACKER_MARGIN = 8;
 
-  const feedbackStore = useFeedbackStore()
-  const show = ref(true)
+const feedbackStore = useFeedbackStore();
+const show = ref(true);
 
-  function calc_margin(index) {
-    return `${index * MARGIN_BETWEEN_SNACKERS + FIRST_SNACKER_MARGIN}px`
-  }
+function calc_margin(index) {
+  return `${index * MARGIN_BETWEEN_SNACKERS + FIRST_SNACKER_MARGIN}px`;
+}
 </script>
 
 <template>
@@ -40,9 +40,7 @@
           </template>
         </v-tooltip>
         <v-tooltip v-else-if="feedback.type === 'success'" location="left">
-          <v-icon color="white" class="justify-right">
-            mdi-check-circle-outline
-          </v-icon>
+          <v-icon color="white" class="justify-right"> mdi-check-circle-outline </v-icon>
         </v-tooltip>
       </v-col>
       <v-col cols="9" class="text-no-wrap overflow-hidden">
@@ -75,7 +73,7 @@
 </template>
 
 <style scoped>
-  .v-snackbar :deep(.v-snackbar__content) {
-    width: 100%;
-  }
+.v-snackbar :deep(.v-snackbar__content) {
+  width: 100%;
+}
 </style>

package/app/components/FetchingData.vue

@@ -2,12 +2,7 @@
   <Transition name="slide-fade" class="pa-0">
     <v-row align="center" class="pa-0">
       <v-col cols="auto" class="pa-0">
-        <v-progress-circular
-          :size="22"
-          :width="3"
-          color="primary"
-          indeterminate
-        />
+        <v-progress-circular :size="22" :width="3" color="primary" indeterminate />
       </v-col>
       <v-col cols="auto">
         <p>Fetching data...</p>

package/app/components/FileSelector.vue

@@ -1,63 +1,57 @@
 <script setup>
-  import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
+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 { useGeodeStore } from "@ogw_front/stores/geode"
+import FetchingData from "@ogw_front/components/FetchingData";
+import FileUploader from "@ogw_front/components/FileUploader";
+import { useGeodeStore } from "@ogw_front/stores/geode";
 
-  const schema = schemas.opengeodeweb_back.allowed_files
+const schema = schemas.opengeodeweb_back.allowed_files;
 
-  const emit = defineEmits([
-    "update_values",
-    "increment_step",
-    "decrement_step",
-  ])
+const emit = defineEmits(["update_values", "increment_step", "decrement_step"]);
 
-  const { multiple, files, auto_upload } = defineProps({
-    multiple: { type: Boolean, required: true },
-    files: { type: Array, default: () => [] },
-    auto_upload: { type: Boolean, default: true },
-  })
+const { multiple, files, auto_upload } = defineProps({
+  multiple: { type: Boolean, required: true },
+  files: { type: Array, default: () => [] },
+  auto_upload: { type: Boolean, default: true },
+});
 
-  const internal_files = ref(files)
-  const internal_auto_upload = ref(auto_upload)
-  const accept = ref("")
-  const loading = ref(false)
+const internal_files = ref(files);
+const internal_auto_upload = ref(auto_upload);
+const accept = ref("");
+const loading = ref(false);
 
-  watch(
-    () => files,
-    (val) => {
-      internal_files.value = val
-    },
-  )
+watch(
+  () => files,
+  (val) => {
+    internal_files.value = val;
+  },
+);
 
-  watch(
-    () => auto_upload,
-    (val) => {
-      internal_auto_upload.value = val
-    },
-  )
+watch(
+  () => auto_upload,
+  (val) => {
+    internal_auto_upload.value = val;
+  },
+);
 
-  const toggle_loading = useToggle(loading)
+const toggle_loading = useToggle(loading);
 
-  function files_uploaded_event(value) {
-    if (value.length > 0) {
-      emit("update_values", { files: value, auto_upload: false })
-      emit("increment_step")
-    }
+function files_uploaded_event(value) {
+  if (value.length > 0) {
+    emit("update_values", { files: value, auto_upload: false });
+    emit("increment_step");
   }
+}
 
-  async function get_allowed_files() {
-    toggle_loading()
-    const geodeStore = useGeodeStore()
-    const response = await geodeStore.request(schema, {})
-    accept.value = response.extensions
-      .map((extension) => `.${extension}`)
-      .join(",")
-    toggle_loading()
-  }
+async function get_allowed_files() {
+  toggle_loading();
+  const geodeStore = useGeodeStore();
+  const response = await geodeStore.request(schema, {});
+  accept.value = response.extensions.map((extension) => `.${extension}`).join(",");
+  toggle_loading();
+}
 
-  await get_allowed_files()
+await get_allowed_files();
 </script>
 
 <template>

package/app/components/FileUploader.vue

@@ -1,74 +1,72 @@
 <script setup>
-  import DragAndDrop from "@ogw_front/components/DragAndDrop"
-  import { useGeodeStore } from "@ogw_front/stores/geode"
+import DragAndDrop from "@ogw_front/components/DragAndDrop";
+import { useGeodeStore } from "@ogw_front/stores/geode";
 
-  const emit = defineEmits(["files_uploaded", "decrement_step", "reset_values"])
+const emit = defineEmits(["files_uploaded", "decrement_step", "reset_values"]);
 
-  const { multiple, accept, files, auto_upload, mini } = defineProps({
-    multiple: { type: Boolean, required: true },
-    accept: { type: String, required: true },
-    files: { type: Array, required: false, default: [] },
-    auto_upload: { type: Boolean, required: false, default: false },
-    mini: { type: Boolean, required: false, default: false },
-  })
+const { multiple, accept, files, auto_upload, mini } = defineProps({
+  multiple: { type: Boolean, required: true },
+  accept: { type: String, required: true },
+  files: { type: Array, required: false, default: [] },
+  auto_upload: { type: Boolean, required: false, default: false },
+  mini: { type: Boolean, required: false, default: false },
+});
 
-  const geodeStore = useGeodeStore()
+const geodeStore = useGeodeStore();
 
-  const internal_files = ref(files)
-  const loading = ref(false)
-  const files_uploaded = ref(false)
+const internal_files = ref(files);
+const loading = ref(false);
+const files_uploaded = ref(false);
 
-  const toggle_loading = useToggle(loading)
+const toggle_loading = useToggle(loading);
 
-  function processSelectedFiles(selected_files) {
-    if (multiple) {
-      internal_files.value = [...internal_files.value, ...selected_files]
-    } else {
-      internal_files.value = [selected_files[0]]
-    }
+function processSelectedFiles(selected_files) {
+  if (multiple) {
+    internal_files.value = [...internal_files.value, ...selected_files];
+  } else {
+    internal_files.value = [selected_files[0]];
   }
+}
 
-  function removeFile(index) {
-    internal_files.value.splice(index, 1)
-    if (internal_files.value.length === 0) {
-      files_uploaded.value = false
-      emit("files_uploaded", [])
-    }
+function removeFile(index) {
+  internal_files.value.splice(index, 1);
+  if (internal_files.value.length === 0) {
+    files_uploaded.value = false;
+    emit("files_uploaded", []);
   }
-
-  async function upload_files() {
-    toggle_loading()
-    const promise_array = internal_files.value.map((file) =>
-      geodeStore.upload(file),
-    )
-    await Promise.all(promise_array)
-    files_uploaded.value = true
-    emit("files_uploaded", internal_files.value)
-
-    toggle_loading()
+}
+
+async function upload_files() {
+  toggle_loading();
+  const promise_array = internal_files.value.map((file) => geodeStore.upload(file));
+  await Promise.all(promise_array);
+  files_uploaded.value = true;
+  emit("files_uploaded", internal_files.value);
+
+  toggle_loading();
+}
+
+if (files.length > 0) {
+  internal_files.value = files;
+  if (auto_upload) {
+    upload_files();
   }
-
-  if (files.length > 0) {
-    internal_files.value = files
-    if (auto_upload) {
-      upload_files()
-    }
+}
+
+watch(
+  () => files,
+  (newVal) => {
+    internal_files.value = newVal;
+  },
+  { deep: true },
+);
+
+watch(internal_files, (value) => {
+  files_uploaded.value = false;
+  if (auto_upload && value.length > 0) {
+    upload_files();
   }
-
-  watch(
-    () => files,
-    (newVal) => {
-      internal_files.value = newVal
-    },
-    { deep: true },
-  )
-
-  watch(internal_files, (value) => {
-    files_uploaded.value = false
-    if (auto_upload && value.length > 0) {
-      upload_files()
-    }
-  })
+});
 </script>
 
 <template>
@@ -83,15 +81,8 @@
   <v-card-text v-if="internal_files.length" class="mt-6">
     <v-sheet class="d-flex align-center mb-4" color="transparent">
       <v-icon icon="mdi-file-check" class="mr-3" color="primary" size="24" />
-      <span class="text-subtitle-1 font-weight-bold text-white">
-        Selected Files
-      </span>
-      <v-chip
-        size="small"
-        class="ml-3 bg-white-opacity-10"
-        color="white"
-        variant="flat"
-      >
+      <span class="text-subtitle-1 font-weight-bold text-white"> Selected Files </span>
+      <v-chip size="small" class="ml-3 bg-white-opacity-10" color="white" variant="flat">
         {{ internal_files.length }}
       </v-chip>
     </v-sheet>
@@ -111,18 +102,13 @@
         <v-icon start size="18" color="primary">mdi-file-outline</v-icon>
         <span class="text-white">{{ file.name }}</span>
         <template #close>
-          <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100"
-            >mdi-close-circle</v-icon
-          >
+          <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100">mdi-close-circle</v-icon>
         </template>
       </v-chip>
     </v-sheet>
   </v-card-text>
 
-  <v-card-actions
-    v-if="!auto_upload && internal_files.length"
-    class="mt-6 pa-0"
-  >
+  <v-card-actions v-if="!auto_upload && internal_files.length" class="mt-6 pa-0">
     <v-btn
       color="primary"
       variant="flat"
@@ -134,10 +120,7 @@
       @click="upload_files"
     >
       <v-icon start size="22">mdi-cloud-upload</v-icon>
-      Upload {{ internal_files.length }} file<span
-        v-if="internal_files.length > 1"
-        >s</span
-      >
+      Upload {{ internal_files.length }} file<span v-if="internal_files.length > 1">s</span>
     </v-btn>
   </v-card-actions>
 </template>

package/app/components/GlassCard.vue

@@ -1,18 +1,18 @@
 <script setup>
-  import { computed, useAttrs } from "vue"
-  const { variant, rounded, padding, theme } = defineProps({
-    variant: {
-      type: String,
-      default: "panel",
-      validator: (valid) => ["panel", "ui"].includes(valid),
-    },
-    rounded: { type: String, default: "xl" },
-    padding: { type: String, default: "pa-6" },
-    theme: { type: String, default: undefined },
-  })
+import { computed, useAttrs } from "vue";
+const { variant, rounded, padding, theme } = defineProps({
+  variant: {
+    type: String,
+    default: "panel",
+    validator: (valid) => ["panel", "ui"].includes(valid),
+  },
+  rounded: { type: String, default: "xl" },
+  padding: { type: String, default: "pa-6" },
+  theme: { type: String, default: undefined },
+});
 
-  const attrs = useAttrs()
-  const isInteractive = computed(() => Boolean(attrs.onClick))
+const attrs = useAttrs();
+const isInteractive = computed(() => Boolean(attrs.onClick));
 </script>
 
 <template>
@@ -39,11 +39,11 @@
 </template>
 
 <style scoped>
-  .border-thin {
-    border-style: solid !important;
-  }
+.border-thin {
+  border-style: solid !important;
+}
 
-  .cursor-default {
-    cursor: default !important;
-  }
+.cursor-default {
+  cursor: default !important;
+}
 </style>