fix(LoaderComponents): Add loader and new logic for components loader

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

@@ -0,0 +1,142 @@
+<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 { useTreeScroll } from "@ogw_front/composables/use_tree_scroll";
+import { useVirtualTree } from "@ogw_front/composables/use_virtual_tree";
+
+const {
+  items,
+  opened = [],
+  selected = [],
+  scrollTop = 0,
+  options = {},
+} = defineProps({
+  items: { type: Array, required: true },
+  opened: { type: Array },
+  selected: { type: Array },
+  scrollTop: { type: Number },
+  options: { type: Object },
+});
+
+const emit = defineEmits(["update:opened", "update:selected", "click:item", "update:scrollTop"]);
+
+const {
+  actualItemProps,
+  actualSelection,
+  displayItems,
+  toggleOpen,
+  toggleSelect,
+  isSelected,
+  getIndeterminate,
+} = useVirtualTree(
+  computed(() => ({
+    items,
+    opened,
+    selected,
+    ...options,
+  })),
+  emit,
+);
+
+const { virtualScrollRef, stickyHeader, handleScroll } = useTreeScroll(
+  computed(() => ({ scrollTop })),
+  emit,
+  displayItems,
+  actualItemProps,
+);
+
+function handleItemClick(item) {
+  if (item.isLeaf) {
+    toggleSelect(item.raw);
+    emit("click:item", item.raw);
+  } else {
+    toggleOpen(item.raw);
+  }
+}
+</script>
+
+<template>
+  <div class="common-tree-view-wrapper">
+    <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 }">
+        <v-list-item
+          :class="['tree-row-wrapper', { 'leaf-row': item.isLeaf }]"
+          class="pa-0"
+          @click="handleItemClick(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 {
+  flex-grow: 1;
+  min-height: 0;
+  overflow-y: auto !important;
+}
+
+.tree-row-wrapper {
+  min-height: 44px !important;
+  cursor: pointer;
+}
+
+:deep(.v-list-item__content) {
+  padding: 0 !important;
+  display: block !important;
+}
+
+:deep(.v-list-item__overlay) {
+  display: none !important;
+}
+
+.v-list-item:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+</style>

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

@@ -9,7 +9,7 @@ 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"]);
 </script>
 
 <template>
@@ -53,6 +53,13 @@ const emit = defineEmits(["update:search", "toggle-sort"]);
           </v-list-item>
         </v-list>
       </v-menu>
+      <ActionButton
+        tooltip="Collapse All"
+        icon="mdi-collapse-all-outline"
+        tooltipLocation="bottom"
+        class="ml-1"
+        @click="emit('collapse-all')"
+      />
     </v-col>
   </v-row>
 </template>

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

@@ -1,37 +1,62 @@
 <script setup>
-const { item, showTooltip } = defineProps({
+const { item, isLeaf = undefined } = defineProps({
   item: { type: Object, required: true },
-  showTooltip: { type: Boolean, default: false },
+  isLeaf: { type: Boolean },
 });
 
-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;

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 },
+});
+
+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>

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

@@ -0,0 +1,75 @@
+<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-checkbox-btn
+        v-if="selection.selectable"
+        :model-value="isSelected(item.raw)"
+        :indeterminate="getIndeterminate(item.raw)"
+        density="compact"
+        hide-details
+        color="black"
+        @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;
+}
+
+:deep(.v-checkbox-btn .v-selection-control__input .v-icon) {
+  color: #000 !important;
+}
+</style>