Feat/multiple object tree

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

@@ -0,0 +1,58 @@
+<script setup>
+import ActionButton from "@ogw_front/components/ActionButton.vue";
+import SearchBar from "@ogw_front/components/SearchBar.vue";
+
+const { search, sortType, filterOptions, availableFilterOptions } = defineProps({
+  search: { type: String, required: true },
+  sortType: { type: String, required: true },
+  filterOptions: { type: Object, required: true },
+  availableFilterOptions: { type: Array, required: true },
+});
+
+const emit = defineEmits(["update:search", "toggle-sort"]);
+</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 }">
+          <ActionButton
+            tooltip="Filter options"
+            icon="mdi-filter-variant"
+            tooltipLocation="bottom"
+            class="ml-1"
+            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>
+    </v-col>
+  </v-row>
+</template>

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

@@ -0,0 +1,49 @@
+<script setup>
+const { item, showTooltip } = defineProps({
+  item: { type: Object, required: true },
+  showTooltip: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["contextmenu"]);
+
+const actualItem = computed(() => item.raw || item);
+</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
+        >
+        <span class="text-caption font-italic border-t-sm d-flex align-center">
+          <strong class="mr-1">Status:</strong>
+          {{ actualItem.is_active ? "Active" : "Inactive" }}
+        </span>
+      </div>
+    </v-tooltip>
+  </span>
+</template>
+
+<style scoped>
+.tree-item-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.inactive-item {
+  opacity: 0.4;
+  font-style: italic;
+}
+</style>

app/components/Viewer/ObjectTree/Box.vue

@@ -0,0 +1,132 @@
+<script setup>
+const SCROLL_SYNC_DELAY = 50;
+const SCROLL_THRESHOLD = 1;
+const { title, closable, icon, mdiIcon, scrollTop } = defineProps({
+  title: { type: String, required: true },
+  closable: { type: Boolean, default: false },
+  icon: { type: String, default: "" },
+  mdiIcon: { type: String, default: "" },
+  scrollTop: { type: Number, default: 0 },
+});
+
+const emit = defineEmits(["close", "dragstart", "update:scrollTop"]);
+
+const scrollContainer = ref(undefined);
+let isApplyingScroll = false;
+let resizeObserver = undefined;
+
+function handleScroll(event) {
+  if (isApplyingScroll) {
+    return;
+  }
+  emit("update:scrollTop", event.target.scrollTop);
+}
+
+function applyScrollTop(val) {
+  if (scrollContainer.value) {
+    isApplyingScroll = true;
+    scrollContainer.value.scrollTop = val;
+    setTimeout(() => {
+      isApplyingScroll = false;
+    }, SCROLL_SYNC_DELAY);
+  }
+}
+
+onMounted(() => {
+  if (scrollContainer.value) {
+    applyScrollTop(scrollTop);
+
+    resizeObserver = new ResizeObserver(() => {
+      if (
+        scrollContainer.value &&
+        Math.abs(scrollContainer.value.scrollTop - scrollTop) > SCROLL_THRESHOLD
+      ) {
+        applyScrollTop(scrollTop);
+      }
+    });
+
+    resizeObserver.observe(scrollContainer.value);
+  }
+});
+
+onUnmounted(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+  }
+});
+
+watch(
+  () => scrollTop,
+  (newVal) => {
+    if (
+      scrollContainer.value &&
+      Math.abs(scrollContainer.value.scrollTop - newVal) > SCROLL_THRESHOLD
+    ) {
+      applyScrollTop(newVal);
+    }
+  },
+);
+</script>
+
+<template>
+  <v-card variant="outlined" class="tree-box d-flex flex-column">
+    <v-card-title
+      class="tree-box-header d-flex align-center"
+      :class="{ 'cursor-grab': closable }"
+      :draggable="closable"
+      @dragstart="emit('dragstart', $event)"
+    >
+      <v-img
+        v-if="icon"
+        :src="icon"
+        width="24"
+        height="24"
+        max-width="24"
+        class="mr-2"
+        style="filter: brightness(0); display: flex; align-items: center"
+      />
+      <v-icon v-else-if="mdiIcon" size="24" class="mr-2">{{ mdiIcon }}</v-icon>
+      <v-icon v-else-if="closable" size="24" class="mr-2">mdi-drag-variant</v-icon>
+      <span
+        class="text-subtitle-2 font-weight-bold d-inline-flex align-center"
+        style="height: 24px; line-height: 1"
+      >
+        {{ title }}
+      </span>
+      <v-spacer />
+      <v-btn
+        v-if="closable"
+        icon="mdi-close"
+        variant="text"
+        size="x-small"
+        @click="emit('close')"
+      />
+    </v-card-title>
+    <v-divider />
+    <v-card-text class="pa-0 flex-grow-1 overflow-hidden d-flex flex-column">
+      <div
+        ref="scrollContainer"
+        class="flex-grow-1 overflow-y-auto overflow-x-hidden"
+        @scroll="handleScroll"
+      >
+        <slot />
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.tree-box {
+  height: 100%;
+  border-radius: 16px;
+  background-color: transparent !important;
+  backdrop-filter: blur(2px);
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.tree-box-header {
+  height: 40px !important;
+  padding: 0 8px !important;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+</style>