@geode/opengeodeweb-front 10.14.1 → 10.14.2-rc.1

package/.oxlintrc.json

@@ -92,6 +92,12 @@
         "ignore": [-1, 0, 1, 2, 3, 4],
         "ignoreArrayIndexes": true
       }
+    ],
+    "eslint/no-underscore-dangle": [
+      "error",
+      {
+        "allow": ["_data", "__dirname", "__VEASE_UTILS__", "__VEASE_STORES__", "__VEASE_SCHEMAS__"]
+      }
     ]
   },
   "overrides": [
@@ -117,6 +123,7 @@
       "rules": {
         "vitest/require-hook": "off",
         "vitest/no-hooks": "off",
+        "jest/no-hooks": "off",
         "vitest/no-importing-vitest-globals": "off",
         "max-lines-per-function": "off",
         "max-statements": "off",
@@ -124,8 +131,11 @@
         "vitest/prefer-to-be-falsy": "off",
         "vitest/require-test-timeout": "warn",
         "vitest/prefer-importing-vitest-globals": "off",
-        "jest/consistent-test-it": ["error", { "fn": "test", "withinDescribe": "test" }],
-        "vitest/prefer-spy-on": "off"
+        "jest/consistent-test-it": "off",
+        "vitest/consistent-test-it": ["error", { "fn": "test", "withinDescribe": "test" }],
+        "vitest/prefer-spy-on": "off",
+        "vitest/prefer-expect-assertions": "off",
+        "jest/prefer-expect-assertions": "off"
       }
     },
     {

package/app/components/SearchBar.vue

@@ -1,7 +1,7 @@
 <script setup>
 const { modelValue, label } = defineProps({
   modelValue: { type: String, default: "" },
-  label: { type: String, default: "Search..." },
+  label: { type: String, default: "" },
 });
 
 const emit = defineEmits(["update:modelValue"]);

package/app/components/Viewer/ContextMenu.vue

@@ -4,7 +4,6 @@ import { useMenuStore } from "@ogw_front/stores/menu";
 
 const RADIUS = 80;
 const MARGIN_OFFSET = 40;
-const Z_INDEX_MENU = 1000;
 const Z_INDEX_ACTIVE_ITEM = 10;
 const Z_INDEX_BASE_ITEM = 1;
 const FULL_ANGLE = 360;
@@ -34,7 +33,7 @@ const menuX = ref(x);
 const menuY = ref(y);
 
 watch(
-  () => [x, y],
+  () => [x, y, containerWidth, containerHeight],
   ([newX, newY]) => {
     const { x: clampedX, y: clampedY } = clampPosition(newX, newY);
     menuX.value = clampedX;
@@ -110,7 +109,6 @@ function getMenuStyle() {
     position: "fixed",
     left: `${menuStore.containerLeft + menuX.value - RADIUS}px`,
     top: `${menuStore.containerTop + menuY.value - RADIUS}px`,
-    zIndex: Z_INDEX_MENU,
   };
 }
 

package/app/components/Viewer/ContextMenuItem.vue

@@ -29,7 +29,7 @@ const optionsStyle = computed(() => {
   if (!is_active.value || !optionsHeight.value) {
     return {};
   }
-  const angle = (itemProps.index / itemProps.totalItems) * 2 * Math.PI;
+  const angle = (index / itemProps.totalItems) * 2 * Math.PI;
   const radius = RADIUS;
   const absoluteButtonY = menuStore.menuY + Math.sin(angle) * radius;
   const height = optionsHeight.value;
@@ -89,7 +89,6 @@ function toggleOptions() {
     >
       <GlassCard
         @click.stop
-        :title="tooltip"
         width="320"
         :max-height="maxCardHeight"
         :ripple="false"
@@ -98,6 +97,7 @@ function toggleOptions() {
         class="elevation-24"
         style="overflow: hidden; display: flex; flex-direction: column"
       >
+        <v-card-title>{{ tooltip }}</v-card-title>
         <v-card-text class="pa-5" style="overflow-y: auto; flex: 1; min-height: 0">
           <slot name="options" />
         </v-card-text>

package/app/components/Viewer/ObjectTree/Base/CommonTreeView.vue

@@ -0,0 +1,189 @@
+<script setup>
+import StickyHeader from "@ogw_front/components/Viewer/ObjectTree/Base/StickyHeader.vue";
+import TreeRow from "@ogw_front/components/Viewer/ObjectTree/Base/TreeRow.vue";
+import { useTreeKeyboardNav } from "@ogw_front/composables/tree_keyboard_nav";
+import { useTreeScroll } from "@ogw_front/composables/tree_scroll";
+import { useVirtualTree } from "@ogw_front/composables/virtual_tree";
+
+const { items, opened, selected, scrollTop, options } = defineProps({
+  items: { type: Array, required: true },
+  opened: { type: Array, required: false, default: () => [] },
+  selected: { type: Array, required: false, default: () => [] },
+  scrollTop: { type: Number, required: false, default: 0 },
+  options: { type: Object, required: false, default: () => ({}) },
+});
+
+const treeWrapper = ref(undefined);
+
+const emit = defineEmits([
+  "update:opened",
+  "update:selected",
+  "click:item",
+  "update:scrollTop",
+  "hover:enter",
+  "hover:leave",
+]);
+
+const {
+  actualItemProps,
+  actualSelection,
+  displayItems,
+  toggleOpen,
+  toggleSelect,
+  isSelected,
+  getIndeterminate,
+} = useVirtualTree(
+  computed(() => ({
+    items,
+    opened,
+    selected,
+    ...options,
+  })),
+  emit,
+);
+
+const { virtualScrollRef, stickyHeader, handleScroll, scrollToIndex } = useTreeScroll(
+  computed(() => ({ scrollTop })),
+  emit,
+  displayItems,
+  actualItemProps,
+);
+
+function handleItemClick(item, index) {
+  if (index !== undefined) {
+    focusedIndex.value = index;
+  }
+  if (item.isLeaf) {
+    toggleSelect(item.raw);
+    emit("click:item", item.raw);
+  } else {
+    toggleOpen(item.raw);
+  }
+}
+
+const { focusedIndex, handleKeyDown } = useTreeKeyboardNav(
+  displayItems,
+  emit,
+  scrollToIndex,
+  toggleOpen,
+  handleItemClick,
+);
+</script>
+
+<template>
+  <div
+    ref="treeWrapper"
+    class="common-tree-view-wrapper"
+    tabindex="0"
+    @keydown="handleKeyDown"
+    @mousedown="treeWrapper.focus()"
+  >
+    <StickyHeader
+      v-if="stickyHeader"
+      :item="stickyHeader"
+      :item-props="actualItemProps"
+      :selection="actualSelection"
+      :is-selected="isSelected"
+      :get-indeterminate="getIndeterminate"
+      @toggle-open="toggleOpen"
+      @toggle-select="toggleSelect"
+    >
+      <template #title="slotProps">
+        <slot name="title" v-bind="slotProps" />
+      </template>
+    </StickyHeader>
+
+    <v-virtual-scroll
+      ref="virtualScrollRef"
+      :items="displayItems"
+      :item-height="actualItemProps.height"
+      class="common-tree-view"
+      @scroll="handleScroll"
+    >
+      <template #default="{ item, index }">
+        <v-list-item
+          :class="[
+            'tree-row-wrapper',
+            { 'leaf-row': item.isLeaf, 'is-focused': focusedIndex === index },
+          ]"
+          class="pa-0"
+          tabindex="-1"
+          @mousedown.prevent
+          @click="
+            handleItemClick(item, index);
+            treeWrapper.focus();
+          "
+          @mouseenter="emit('hover:enter', { item })"
+          @mouseleave="emit('hover:leave', { item })"
+        >
+          <TreeRow
+            :item="item"
+            :item-props="actualItemProps"
+            :selection="actualSelection"
+            :is-selected="isSelected"
+            :get-indeterminate="getIndeterminate"
+            @toggle-open="toggleOpen"
+            @toggle-select="toggleSelect"
+          >
+            <template #title="slotProps">
+              <slot name="title" v-bind="slotProps" />
+            </template>
+            <template #append="slotProps">
+              <slot name="append" v-bind="slotProps" />
+            </template>
+          </TreeRow>
+        </v-list-item>
+      </template>
+    </v-virtual-scroll>
+  </div>
+</template>
+
+<style scoped>
+.common-tree-view-wrapper {
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.common-tree-view-wrapper:focus {
+  outline: none;
+}
+
+.common-tree-view {
+  flex-grow: 1;
+  min-height: 0;
+  overflow-y: auto !important;
+}
+
+.v-list-item {
+  background-color: transparent !important;
+  transition: none !important;
+}
+
+.tree-row-wrapper {
+  min-height: 44px !important;
+  cursor: pointer;
+  border-radius: 8px;
+  margin: 1px 4px;
+}
+
+.tree-row-wrapper.is-focused {
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.15);
+}
+
+.tree-row-wrapper:hover:not(.is-focused) {
+  background-color: rgba(0, 0, 0, 0.04) !important;
+}
+
+:deep(.v-list-item__content) {
+  padding: 0 !important;
+  display: block !important;
+}
+
+:deep(.v-list-item__overlay) {
+  display: none !important;
+}
+</style>

package/app/components/Viewer/ObjectTree/Base/Controls.vue

@@ -9,50 +9,136 @@ const { search, sortType, filterOptions, availableFilterOptions } = defineProps(
   availableFilterOptions: { type: Array, required: true },
 });
 
-const emit = defineEmits(["update:search", "toggle-sort"]);
+const emit = defineEmits(["update:search", "toggle-sort", "collapse-all"]);
+
+const showSearch = ref(false);
+
+watch(
+  () => showSearch.value,
+  (val) => {
+    if (!val) {
+      emit("update:search", "");
+    }
+  },
+);
 </script>
 
 <template>
-  <v-row dense align="center" class="pa-2">
-    <v-col>
-      <SearchBar
-        :model-value="search"
-        label="Search"
-        color="black"
-        base-color="black"
-        @update:model-value="emit('update:search', $event)"
-      />
-    </v-col>
-    <v-col cols="auto" class="d-flex align-center">
-      <ActionButton
-        :tooltip="'Sort by ' + (sortType === 'name' ? 'ID' : 'Name')"
-        :icon="
-          sortType === 'name' ? 'mdi-sort-alphabetical-ascending' : 'mdi-sort-numeric-ascending'
-        "
-        tooltipLocation="bottom"
-        @click="emit('toggle-sort')"
-      />
-      <v-menu :close-on-content-click="false">
-        <template #activator="{ props: menuProps }">
+  <v-row dense align="center" class="pa-2 py-1">
+    <v-col cols="12">
+      <div
+        class="controls-capsule d-flex align-center rounded-pill px-1 overflow-hidden"
+        :class="{ 'is-expanded': showSearch }"
+      >
+        <ActionButton
+          :tooltip="showSearch ? 'Hide search' : 'Show search'"
+          icon="mdi-magnify"
+          tooltipLocation="bottom"
+          variant="text"
+          color="black"
+          @click="showSearch = !showSearch"
+        />
+
+        <v-expand-x-transition>
+          <div v-if="showSearch" class="flex-grow-1 ms-1 text-no-wrap overflow-hidden">
+            <SearchBar
+              :model-value="search"
+              placeholder="Search objects..."
+              color="black"
+              base-color="black"
+              variant="plain"
+              density="compact"
+              prepend-inner-icon=""
+              autofocus
+              @update:model-value="emit('update:search', $event)"
+            />
+          </div>
+        </v-expand-x-transition>
+
+        <div class="d-flex align-center">
+          <v-fade-transition>
+            <v-divider
+              v-if="!showSearch"
+              vertical
+              inset
+              class="mx-1 align-self-center"
+              style="height: 20px"
+            />
+          </v-fade-transition>
           <ActionButton
-            tooltip="Filter options"
-            icon="mdi-filter-variant"
+            :tooltip="'Sort by ' + (sortType === 'name' ? 'ID' : 'Name')"
+            :icon="
+              sortType === 'name' ? 'mdi-sort-alphabetical-ascending' : 'mdi-sort-numeric-ascending'
+            "
+            variant="text"
+            color="black"
             tooltipLocation="bottom"
-            class="ml-1"
-            v-bind="menuProps"
+            @click="emit('toggle-sort')"
           />
-        </template>
-        <v-list class="mt-1">
-          <v-list-item v-for="category_id in availableFilterOptions" :key="category_id">
-            <v-checkbox
-              v-model="filterOptions[category_id]"
-              :label="category_id"
-              hide-details
-              density="compact"
-            />
-          </v-list-item>
-        </v-list>
-      </v-menu>
+          <v-menu :close-on-content-click="false">
+            <template #activator="{ props: menuProps }">
+              <ActionButton
+                tooltip="Filter options"
+                icon="mdi-filter-variant"
+                variant="text"
+                color="black"
+                tooltipLocation="bottom"
+                v-bind="menuProps"
+              />
+            </template>
+            <v-list class="mt-1">
+              <v-list-item v-for="category_id in availableFilterOptions" :key="category_id">
+                <v-checkbox
+                  v-model="filterOptions[category_id]"
+                  :label="category_id"
+                  hide-details
+                  density="compact"
+                />
+              </v-list-item>
+            </v-list>
+          </v-menu>
+          <ActionButton
+            tooltip="Collapse All"
+            icon="mdi-collapse-all-outline"
+            variant="text"
+            color="black"
+            tooltipLocation="bottom"
+            @click="emit('collapse-all')"
+          />
+        </div>
+      </div>
     </v-col>
   </v-row>
 </template>
+
+<style scoped>
+.controls-capsule {
+  height: 40px;
+  border: 1px solid transparent;
+  transition: all 0.3s ease;
+  width: fit-content;
+}
+
+.controls-capsule.is-expanded {
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.controls-capsule:hover:not(.is-expanded) {
+  background-color: rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+:deep(.v-field__input) {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  min-height: 40px !important;
+  display: flex;
+  align-items: center;
+}
+
+:deep(.v-field__field) {
+  height: 40px !important;
+}
+</style>

package/app/components/Viewer/ObjectTree/Base/ItemLabel.vue

@@ -1,37 +1,62 @@
 <script setup>
-const { item, showTooltip } = defineProps({
+const { item, isLeaf } = defineProps({
   item: { type: Object, required: true },
-  showTooltip: { type: Boolean, default: false },
+  isLeaf: { type: Boolean, required: false, default: undefined },
 });
 
-const emit = defineEmits(["contextmenu"]);
+const emit = defineEmits(["contextmenu", "mouseenter", "mouseleave"]);
 
 const actualItem = computed(() => item.raw || item);
+
+const tooltipDisabled = computed(() => {
+  if (isLeaf !== undefined) {
+    return !isLeaf;
+  }
+  return actualItem.value.children && actualItem.value.children.length > 0;
+});
 </script>
 
 <template>
-  <span
-    class="tree-item-label"
-    :class="{ 'inactive-item': actualItem.is_active === false }"
-    @contextmenu.prevent.stop="emit('contextmenu', $event)"
-  >
-    {{ actualItem.title }}
-    <v-tooltip v-if="showTooltip && actualItem.category" activator="parent" location="right">
-      <div class="d-flex flex-column pa-1">
-        <span class="text-caption"><strong>ID:</strong> {{ actualItem.id }}</span>
-        <span v-if="actualItem.title" class="text-caption"
-          ><strong>Name:</strong> {{ actualItem.title }}</span
+  <div class="tree-item-label-container w-100">
+    <v-tooltip :disabled="tooltipDisabled" location="right" open-delay="400">
+      <template #activator="{ props: tooltipProps }">
+        <span
+          v-bind="tooltipProps"
+          class="tree-item-label"
+          :class="{ 'inactive-item': actualItem.is_active === false }"
+          @contextmenu.prevent.stop="emit('contextmenu', $event)"
+          @mouseenter="emit('mouseenter')"
+          @mouseleave="emit('mouseleave')"
         >
-        <span class="text-caption font-italic border-t-sm d-flex align-center">
-          <strong class="mr-1">Status:</strong>
-          {{ actualItem.is_active ? "Active" : "Inactive" }}
+          {{ actualItem.title }}
+        </span>
+      </template>
+
+      <div class="d-flex flex-column ga-1">
+        <span class="text-caption">
+          <strong class="text-white">ID:</strong> {{ actualItem.id }}
+        </span>
+        <span v-if="actualItem.title" class="text-caption">
+          <strong class="text-white">Name:</strong> {{ actualItem.title }}
+        </span>
+        <span class="text-caption">
+          <strong class="text-white">Status:</strong>
+          <i class="ml-1">{{ actualItem.is_active ? "Active" : "Inactive" }}</i>
         </span>
       </div>
     </v-tooltip>
-  </span>
+  </div>
 </template>
 
 <style scoped>
+.tree-item-label-container {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  height: 100%;
+  width: 100%;
+}
+
 .tree-item-label {
   white-space: nowrap;
   overflow: hidden;

package/app/components/Viewer/ObjectTree/Base/StickyHeader.vue

@@ -0,0 +1,46 @@
+<script setup>
+import TreeRow from "@ogw_front/components/Viewer/ObjectTree/Base/TreeRow.vue";
+
+const { item, itemProps, selection, isSelected, getIndeterminate } = defineProps({
+  item: { type: Object, required: true },
+  itemProps: { type: Object, required: true },
+  selection: { type: Object, required: true },
+  isSelected: { type: Function, required: true },
+  getIndeterminate: { type: Function, required: true },
+});
+
+const emit = defineEmits(["toggle-open", "toggle-select"]);
+</script>
+
+<template>
+  <div class="sticky-tree-header tree-row" @click="$emit('toggle-open', item.raw)">
+    <TreeRow
+      :item="item"
+      :item-props="itemProps"
+      :selection="selection"
+      :is-selected="isSelected"
+      :get-indeterminate="getIndeterminate"
+      @toggle-open="$emit('toggle-open', $event)"
+      @toggle-select="$emit('toggle-select', $event)"
+    >
+      <template #title="slotProps">
+        <slot name="title" v-bind="slotProps" />
+      </template>
+    </TreeRow>
+  </div>
+</template>
+
+<style scoped>
+.sticky-tree-header {
+  flex-shrink: 0;
+  background-color: transparent;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  z-index: 20;
+}
+
+.sticky-tree-header:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+</style>

package/app/components/Viewer/ObjectTree/Base/TreeRow.vue

@@ -0,0 +1,77 @@
+<script setup>
+const { item, itemProps, selection, isSelected, getIndeterminate } = defineProps({
+  item: { type: Object, required: true },
+  itemProps: { type: Object, required: true },
+  selection: { type: Object, required: true },
+  isSelected: { type: Function, required: true },
+  getIndeterminate: { type: Function, required: true },
+});
+
+defineEmits(["toggle-open", "toggle-select"]);
+
+const INDENT_STEP = 16;
+</script>
+
+<template>
+  <div class="tree-row-content d-flex align-center px-4 ps-3 w-100">
+    <div
+      v-if="item.depth > 0"
+      class="flex-shrink-0"
+      :style="{ width: `${item.depth * INDENT_STEP}px` }"
+    />
+
+    <div class="d-flex align-center flex-shrink-0">
+      <v-icon
+        v-if="!item.isLeaf"
+        :icon="item.isOpen ? 'mdi-menu-down' : 'mdi-menu-right'"
+        class="me-1"
+        color="black"
+        @click.stop="$emit('toggle-open', item.raw)"
+      />
+      <div v-else class="icon-placeholder" />
+
+      <v-btn
+        v-if="selection.selectable"
+        :icon="
+          getIndeterminate(item.raw)
+            ? 'mdi-eye-minus'
+            : isSelected(item.raw)
+              ? 'mdi-eye'
+              : 'mdi-eye-off'
+        "
+        variant="text"
+        density="compact"
+        color="black"
+        class="flex-shrink-0"
+        @click.stop="$emit('toggle-select', item.raw)"
+        @mousedown.stop
+      />
+    </div>
+
+    <div class="tree-title flex-grow-1 overflow-hidden d-flex align-center ms-1 pt-1">
+      <slot name="title" :item="item.raw" :is-leaf="item.isLeaf">
+        <v-list-item-title :class="{ 'font-weight-bold': !item.isLeaf }" class="text-black">
+          {{ item.raw[itemProps.title] || item.id }}
+        </v-list-item-title>
+      </slot>
+    </div>
+
+    <div class="ms-auto d-flex align-center">
+      <slot name="append" :item="item.raw" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tree-row-content {
+  min-height: 44px;
+}
+
+.icon-placeholder {
+  width: 24px;
+}
+
+.tree-title {
+  min-height: 24px;
+}
+</style>