@geode/opengeodeweb-front 10.3.3-rc.1 → 10.4.0-rc.1

package/app/components/DeleteDialog.vue

@@ -0,0 +1,122 @@
+<script setup>
+  import GlassCard from "./GlassCard.vue"
+
+  const { show, item, selectedCount } = defineProps({
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    item: {
+      type: Object,
+      default: null,
+    },
+    selectedCount: {
+      type: Number,
+      default: 0,
+    },
+  })
+
+  const emit = defineEmits(["update:show", "confirm"])
+</script>
+
+<template>
+  <v-dialog
+    :model-value="show"
+    @update:model-value="emit('update:show', $event)"
+    max-width="400"
+  >
+    <GlassCard v-if="item" variant="panel" padding="pa-8">
+      <v-card-title
+        class="pb-2 text-h5 font-weight-bold d-flex align-center text-white"
+      >
+        <v-icon
+          icon="mdi-trash-can-outline"
+          class="mr-3 text-h4"
+          color="error"
+        ></v-icon>
+        Delete Item
+      </v-card-title>
+
+      <v-card-text class="pa-0 mt-4 text-white opacity-80">
+        Are you sure you want to delete this item?
+        <div
+          class="bg-white-opacity-5 rounded-lg pa-4 my-6 font-weight-bold border-thin text-center"
+        >
+          {{ item.name }}
+        </div>
+      </v-card-text>
+
+      <v-card-actions class="px-0 pb-0">
+        <v-btn
+          variant="text"
+          color="white"
+          size="large"
+          @click="emit('update:show', false)"
+          class="text-none rounded-lg"
+        >
+          <v-icon start>mdi-close-circle-outline</v-icon>
+          Cancel
+        </v-btn>
+
+        <v-spacer />
+
+        <v-btn
+          color="error"
+          size="large"
+          variant="flat"
+          @click="emit('confirm')"
+          class="text-none rounded-lg font-weight-bold"
+          elevation="4"
+        >
+          <v-icon start>mdi-trash-can-outline</v-icon>
+          Delete
+        </v-btn>
+      </v-card-actions>
+    </GlassCard>
+
+    <GlassCard v-else variant="panel" padding="pa-8">
+      <v-card-title
+        class="pb-2 text-h5 font-weight-bold d-flex align-center text-white"
+      >
+        <v-icon
+          icon="mdi-alert-circle-outline"
+          class="mr-3 text-h4"
+          color="error"
+        ></v-icon>
+        Delete Items
+      </v-card-title>
+
+      <v-card-text class="pa-0 mt-4 text-white opacity-80">
+        Are you sure you want to delete
+        <strong class="text-white">{{ selectedCount }}</strong> items?
+      </v-card-text>
+
+      <v-card-actions class="px-0 pb-0 mt-8">
+        <v-btn
+          variant="text"
+          color="white"
+          size="large"
+          @click="emit('update:show', false)"
+          class="text-none rounded-lg"
+        >
+          <v-icon start>mdi-close-circle-outline</v-icon>
+          Cancel
+        </v-btn>
+
+        <v-spacer />
+
+        <v-btn
+          color="error"
+          size="large"
+          variant="flat"
+          @click="emit('confirm')"
+          class="text-none rounded-lg font-weight-bold"
+          elevation="4"
+        >
+          <v-icon start>mdi-trash-can-outline</v-icon>
+          Delete All
+        </v-btn>
+      </v-card-actions>
+    </GlassCard>
+  </v-dialog>
+</template>

package/app/components/GlassCard.vue

@@ -1,4 +1,5 @@
 <script setup>
+  import { computed, useAttrs } from "vue"
   defineProps({
     variant: {
       type: String,
@@ -16,11 +17,9 @@
 
 <template>
   <v-card
-    v-bind="$attrs"
     @mousedown.stop
     @click.stop
     @dblclick.stop
-    @wheel.stop
     @contextmenu.stop
     flat
     :ripple="isInteractive"

package/app/components/SearchBar.vue

@@ -0,0 +1,34 @@
+<template>
+  <v-text-field
+    :model-value="modelValue"
+    @update:model-value="$emit('update:modelValue', $event)"
+    prepend-inner-icon="mdi-magnify"
+    :label="label"
+    variant="outlined"
+    density="compact"
+    hide-details
+    bg-color="transparent"
+    color="white"
+    base-color="white"
+    v-bind="$attrs"
+  >
+    <template v-for="(_, slot) in $slots" v-slot:[slot]="scope">
+      <slot :name="slot" v-bind="scope || {}"></slot>
+    </template>
+  </v-text-field>
+</template>
+
+<script setup>
+  defineProps({
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    label: {
+      type: String,
+      default: "Search...",
+    },
+  })
+
+  defineEmits(["update:modelValue"])
+</script>

package/app/components/Stepper.vue

@@ -1,7 +1,7 @@
 <script setup>
   import Step from "@ogw_front/components/Step"
 
-  const emit = defineEmits(["reset_values"])
+  const emit = defineEmits(["reset_values", "close"])
   const stepper_tree = inject("stepper_tree")
   const { steps, current_step_index } = toRefs(stepper_tree)
 </script>
@@ -28,7 +28,7 @@
     @update:model-value="current_step_index = $event - 1"
     flat
     non-linear
-    class="pa-0 ma-0 bg-transparent rounded-xl overflow-hidden custom-stepper"
+    class="pa-0 ma-0 bg-transparent rounded-xl overflow-hidden custom-stepper flex-grow-1"
   >
     <Step
       v-for="(step, index) in steps"

package/app/stores/data.js

@@ -15,32 +15,21 @@ const viewer_generic_schemas = viewer_schemas.opengeodeweb_viewer.generic
 export const useDataStore = defineStore("data", () => {
   const viewerStore = useViewerStore()
 
-  const itemCache = new Map()
   function getItem(id) {
     if (!id) {
-      const emptyRef = ref({})
-      emptyRef.fetch = async () => ({})
-      return emptyRef
+      return ref({})
     }
-    if (itemCache.has(id)) {
-      return itemCache.get(id)
-    }
-    const observable = useObservable(
+    return useObservable(
       liveQuery(() => database.data.get(id)),
       { initialValue: {} },
     )
-    observable.fetch = () => database.data.get(id)
-    itemCache.set(id, observable)
-    return observable
   }
 
   function getAllItems() {
-    const observable = useObservable(
+    return useObservable(
       liveQuery(() => database.data.toArray()),
       { initialValue: [] },
     )
-    observable.fetch = () => database.data.toArray()
-    return observable
   }
 
   async function formatedMeshComponents(id) {
@@ -167,7 +156,7 @@ export const useDataStore = defineStore("data", () => {
   }
 
   async function exportStores() {
-    const items = await getAllItems().fetch()
+    const items = await database.data.toArray()
     return { items }
   }
 

package/app/stores/data_style.js

@@ -1,4 +1,5 @@
 import { getDefaultStyle } from "@ogw_front/utils/default_styles"
+import { database } from "../../internal/database/database.js"
 import { useDataStore } from "@ogw_front/stores/data"
 import { useDataStyleStateStore } from "../../internal/stores/data_style/state"
 import useMeshStyle from "../../internal/stores/data_style/mesh/index"
@@ -15,7 +16,7 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
   }
 
   async function setVisibility(id, visibility) {
-    const item = await dataStore.getItem(id).fetch()
+    const item = await database.data.get(id)
     const viewer_type = item?.viewer_type
     if (!viewer_type) {
       throw new Error(`Item not found or not loaded: ${id}`)
@@ -31,7 +32,7 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
   }
 
   async function applyDefaultStyle(id) {
-    const item = await dataStore.getItem(id).fetch()
+    const item = await database.data.get(id)
     const viewer_type = item?.viewer_type
     if (!viewer_type) {
       throw new Error(`Item not found or not loaded: ${id}`)

package/app/stores/hybrid_viewer.js

@@ -6,6 +6,7 @@ import { newInstance as vtkMapper } from "@kitware/vtk.js/Rendering/Core/Mapper"
 import { newInstance as vtkXMLPolyDataReader } from "@kitware/vtk.js/IO/XML/XMLPolyDataReader"
 
 import Status from "@ogw_front/utils/status"
+import { database } from "../../internal/database/database.js"
 import { useDataStore } from "@ogw_front/stores/data"
 import { useViewerStore } from "@ogw_front/stores/viewer"
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
@@ -73,8 +74,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     if (!genericRenderWindow.value) {
       return
     }
-    const item = dataStore.getItem(id)
-    const value = await item.fetch()
+    const value = await database.data.get(id)
     console.log("hybridViewerStore.addItem", { value })
     const reader = vtkXMLPolyDataReader()
     const textEncoder = new TextEncoder()

package/internal/database/database.js

@@ -14,37 +14,60 @@ class Database extends Dexie {
   }
 
   static async addTable(tableName, schemaDefinition) {
-    const tempDb = new Database()
-    await tempDb.open()
+    await this.addTables({ [tableName]: schemaDefinition })
+  }
 
-    if (tempDb.tables.some((table) => table.name === tableName)) {
-      tempDb.close()
-      return tempDb
-    }
+  static async addTables(newTables) {
+    const tempDb = new Dexie("Database")
+    await tempDb.open()
 
     const currentVersion = tempDb.verno
     const currentStores = {}
 
+    currentStores[dataTable.name] = dataTable.schema
+    currentStores[modelComponentsTable.name] = modelComponentsTable.schema
+
     for (const table of tempDb.tables) {
       const keyPath = table.schema.primKey.src
       const indexes = table.schema.indexes.map((index) => index.src)
-      currentStores[table.name] = [keyPath, ...indexes].join(",")
+      const parts = keyPath ? [keyPath, ...indexes] : indexes
+      currentStores[table.name] = parts.join(",")
     }
 
     tempDb.close()
 
-    const newDb = new ExtendedDatabase(
-      currentVersion,
-      currentStores,
-      tableName,
-      schemaDefinition,
+    const allExisting = Object.keys(newTables).every(
+      (tableName) => currentStores[tableName],
     )
-    await newDb.open()
 
-    return newDb
+    database.close()
+
+    if (allExisting) {
+      const existingDb = new Dexie("Database")
+      for (let version = 1; version <= currentVersion; version += 1) {
+        if (version === 1) {
+          existingDb.version(1).stores({
+            [dataTable.name]: dataTable.schema,
+            [modelComponentsTable.name]: modelComponentsTable.schema,
+          })
+        } else {
+          existingDb.version(version).stores(currentStores)
+        }
+      }
+      await existingDb.open()
+      database = existingDb
+    } else {
+      const newDb = new ExtendedDatabase(
+        currentVersion,
+        currentStores,
+        newTables,
+      )
+      await newDb.open()
+      database = newDb
+    }
   }
 }
 
-const database = new Database()
+let database = new Database()
 
 export { Database, database }

package/internal/database/extended_database.js

@@ -3,7 +3,7 @@ import { dataTable } from "./tables/data_table"
 import { modelComponentsTable } from "./tables/model_components"
 
 export class ExtendedDatabase extends Dexie {
-  constructor(currentVersion, currentStores, tableName, schemaDefinition) {
+  constructor(currentVersion, currentStores, newTables) {
     super("Database")
 
     for (let version = 1; version <= currentVersion; version += 1) {
@@ -19,7 +19,7 @@ export class ExtendedDatabase extends Dexie {
 
     this.version(currentVersion + 1).stores({
       ...currentStores,
-      [tableName]: schemaDefinition,
+      ...newTables,
     })
   }
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@geode/opengeodeweb-front",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "type": "module",
-  "version": "10.3.3-rc.1",
+  "version": "10.4.0-rc.1",
   "main": "./nuxt.config.js",
   "scripts": {
     "lint": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",