10934 create demo search option in landscape screen

src/main/style/template/menu-content-template/_menu-content-template.scss

@@ -12,6 +12,8 @@ $jhlite-menu-content-template-color-divider: colors.$jhlite-global-color-fill-se
   min-height: 0;
 
   &--content {
+    display: flex;
+    flex-direction: column;
     height: inherit;
   }
 

src/main/webapp/app/module/primary/landscape/Landscape.component.ts

@@ -22,7 +22,7 @@ import { LandscapeSelectionElement } from '@/module/domain/landscape/LandscapeSe
 import { ALERT_BUS } from '@/shared/alert/application/AlertProvider';
 import { IconVue } from '@/shared/icon/infrastructure/primary';
 import { Loader } from '@/shared/loader/infrastructure/primary/Loader';
-import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, Ref, ref } from 'vue';
+import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, Ref, ref, watch } from 'vue';
 import { castValue, empty } from '../PropertyValue';
 import { LandscapeLoaderVue } from '../landscape-loader';
 import { LandscapeMiniMapVue } from '../landscape-minimap';
@@ -84,6 +84,51 @@ export default defineComponent({
 
     const operationInProgress = ref(false);
 
+    const searchQuery = ref('');
+    const highlightedModule = ref<ModuleSlug | null>(null);
+
+    const performSearch = () => {
+      highlightModule(searchQuery.value);
+    };
+
+    const clearSearch = () => {
+      searchQuery.value = '';
+      highlightedModule.value = null;
+    };
+
+    const scrollToHighlightedModule = () => {
+      if (highlightedModule.value) {
+        const element = landscapeElements.value.get(highlightedModule.value.get());
+        if (element) {
+          element.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+            inline: 'center'
+          });
+        }
+      }
+    };
+
+    const highlightModule = (query: string) => {
+      if (!query) {
+        highlightedModule.value = null;
+        return;
+      }
+
+      const lowercaseQuery = query.toLowerCase();
+      const foundModule = Array.from(landscapeElements.value.keys()).find(
+        (key) => key.toLowerCase().includes(lowercaseQuery)
+      );
+
+      highlightedModule.value = foundModule ? new ModuleSlug(foundModule) : null;
+
+      nextTick(scrollToHighlightedModule);
+    };
+
+    watch(searchQuery, (newValue) => {
+      highlightModule(newValue);
+    });
+
     const selectedPreset = ref<Preset | null>(null);
     const selectedPresetName = computed(() => selectedPreset.value?.name ?? '');
 
@@ -308,10 +353,18 @@ export default defineComponent({
         selectionClass(module) +
         applicationClass(module) +
         flavorClass() +
-        anchorPointClass(module)
+        anchorPointClass(module) +
+        searchHighlightClass(module)
       );
     };
 
+    const searchHighlightClass = (module: LandscapeElementId): string => {
+      if (highlightedModule.value && module.get() === highlightedModule.value.get()) {
+        return ' -search-highlighted';
+      }
+      return '';
+    };
+
     const operationInProgressClass = (): string => {
       if (operationInProgress.value) {
         return ' -not-selectable';
@@ -633,6 +686,9 @@ export default defineComponent({
       grabbing,
       canLoadMiniMap,
       selectedPresetName,
+      searchQuery,
+      performSearch,
+      clearSearch,
     };
   },
 });

src/main/webapp/app/module/primary/landscape/Landscape.html

@@ -1,92 +1,118 @@
 <LandscapeLoaderVue v-if="levels.isLoading()" />
 <div class="jhipster-landscape jhlite-menu-content-template" v-else data-selector="landscape">
-  <div class="jhipster-landscape-modes-selection">
-    <div class="jhlite-mode-switch">
-      <div class="jhlite-mode-switch--modes">
-        <button
-          class="jhlite-button-switch"
-          :class="modeSwitchClass('COMPACTED')"
-          @click="selectMode('COMPACTED')"
-          data-selector="compacted-mode-button"
-        >
-          Compacted
-        </button>
-        <button
-          class="jhlite-button-switch"
-          :class="modeSwitchClass('EXTENDED')"
-          @click="selectMode('EXTENDED')"
-          data-selector="extended-mode-button"
-        >
-          Extended
-        </button>
+  <div class="jhlite-menu-content-template--content">
+    <div class="jhipster-landscape-modes-selection">
+      <div class="jhlite-mode-switch">
+        <div class="jhlite-mode-switch--modes">
+          <button
+            class="jhlite-button-switch"
+            :class="modeSwitchClass('COMPACTED')"
+            @click="selectMode('COMPACTED')"
+            data-selector="compacted-mode-button"
+          >
+            Compacted
+          </button>
+          <button
+            class="jhlite-button-switch"
+            :class="modeSwitchClass('EXTENDED')"
+            @click="selectMode('EXTENDED')"
+            data-selector="extended-mode-button"
+          >
+            Extended
+          </button>
+        </div>
       </div>
     </div>
-  </div>
-  <div class="jhipster-landscape-preset-selection">
-    <LandscapePresetConfigurationVue :selectedPresetName="selectedPresetName" @selected="selectModulesFromPreset" />
-  </div>
-
-  <div
-    :class="landscapeClass()"
-    ref="landscapeContainer"
-    data-selector="landscape-container"
-    @mousedown="startGrabbing"
-    @mousemove="grabbing"
-    @mouseup="stopGrabbing"
-    @mouseleave="stopGrabbing"
-  >
-    <div class="jhipster-landscape-levels">
-      <ul class="jhipster-landscape-levels--level" :class="modeClass()" v-for="level in levels.value()">
-        <li class="jhipster-landscape-element" v-for="element in level.elements" :class="modeClass()">
-          <div
-            class="jhipster-landscape-feature"
-            :class="elementFlavor(element.slug())"
-            :data-selector="`${element.slugString()}-feature`"
-            v-if="isFeature(element)"
-            :ref="el => landscapeElements.set(element.slugString(), el)"
-          >
-            <h2 class="jhipster-landscape-feature--title" :class="modeClass()">{{ element.slugString() }}</h2>
-            <ul class="jhipster-landscape-feature--modules">
-              <li class="jhipster-landscape-feature--module" v-for="module in element.modules">
-                <LandscapeModuleVue
-                  :module="module"
-                  :landscapeElements="landscapeElements"
-                  :moduleFlavor="elementFlavor(module.slug())"
-                  @over="emphasizeModule(module.slug())"
-                  @out="deEmphasizeModule()"
-                  @clicked="toggleModule(module.slug())"
-                  @apply="applyModule(module.slug())"
-                />
-              </li>
-            </ul>
+    <div class="jhipster-landscape-header">
+      <div class="jhipster-landscape-search-container">
+        <div class="jhipster-landscape-search">
+          <div class="jhlite-field--field">
+            <input
+              type="text"
+              id="landscape-search"
+              class="jhlite-input-text"
+              placeholder="Search modules..."
+              v-model="searchQuery"
+              @input="performSearch"
+              data-selector="landscape-search-input"
+            />
           </div>
-
-          <LandscapeModuleVue
-            :module="element"
-            :landscapeElements="landscapeElements"
-            :moduleFlavor="elementFlavor(element.slug())"
-            @over="emphasizeModule(element.slug())"
-            @out="deEmphasizeModule()"
-            @clicked="toggleModule(element.slug())"
-            @apply="applyModule(element.slug())"
-            v-else
-          />
-        </li>
-      </ul>
+          <button
+            class="jhipster-landscape-search-close"
+            @click="clearSearch"
+            aria-label="Close search"
+          >
+            &times;
+          </button>
+        </div>
+      </div>
+      <div class="jhipster-landscape-preset-selection">
+        <LandscapePresetConfigurationVue :selectedPresetName="selectedPresetName" @selected="selectModulesFromPreset" />
+      </div>
     </div>
 
-    <svg
-      class="jhipster-landscape-connectors"
-      :style="`width: ${landscapeSize.width}px; height: ${landscapeSize.height}px`"
-      data-selector="landscape-connectors"
+    <div
+      :class="landscapeClass()"
+      ref="landscapeContainer"
+      data-selector="landscape-container"
+      @mousedown="startGrabbing"
+      @mousemove="grabbing"
+      @mouseup="stopGrabbing"
+      @mouseleave="stopGrabbing"
     >
-      <path
-        v-for="connector in landscapeConnectors"
-        class="jhipster-landscape-connectors--line"
-        :class="elementFlavor(connector.startingElement)"
-        :d="connector.path"
-      />
-    </svg>
+      <div class="jhipster-landscape-levels">
+        <ul class="jhipster-landscape-levels--level" :class="modeClass()" v-for="level in levels.value()">
+          <li class="jhipster-landscape-element" v-for="element in level.elements" :class="modeClass()">
+            <div
+              class="jhipster-landscape-feature"
+              :class="elementFlavor(element.slug())"
+              :data-selector="`${element.slugString()}-feature`"
+              v-if="isFeature(element)"
+              :ref="el => landscapeElements.set(element.slugString(), el)"
+            >
+              <h2 class="jhipster-landscape-feature--title" :class="modeClass()">{{ element.slugString() }}</h2>
+              <ul class="jhipster-landscape-feature--modules">
+                <li class="jhipster-landscape-feature--module" v-for="module in element.modules">
+                  <LandscapeModuleVue
+                    :module="module"
+                    :landscapeElements="landscapeElements"
+                    :moduleFlavor="elementFlavor(module.slug())"
+                    @over="emphasizeModule(module.slug())"
+                    @out="deEmphasizeModule()"
+                    @clicked="toggleModule(module.slug())"
+                    @apply="applyModule(module.slug())"
+                  />
+                </li>
+              </ul>
+            </div>
+
+            <LandscapeModuleVue
+              :module="element"
+              :landscapeElements="landscapeElements"
+              :moduleFlavor="elementFlavor(element.slug())"
+              @over="emphasizeModule(element.slug())"
+              @out="deEmphasizeModule()"
+              @clicked="toggleModule(element.slug())"
+              @apply="applyModule(element.slug())"
+              v-else
+            />
+          </li>
+        </ul>
+      </div>
+
+      <svg
+        class="jhipster-landscape-connectors"
+        :style="`width: ${landscapeSize.width}px; height: ${landscapeSize.height}px`"
+        data-selector="landscape-connectors"
+      >
+        <path
+          v-for="connector in landscapeConnectors"
+          class="jhipster-landscape-connectors--line"
+          :class="elementFlavor(connector.startingElement)"
+          :d="connector.path"
+        />
+      </svg>
+    </div>
   </div>
 
   <div class="jhlite-menu-content-template--menu">