Добавлен нечеткий поиск и сортировку в выпадающие списки в разделе LTD

frontend/src/components/MultiSelectFilter.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 import type { SelectOption } from '../utils/teamLtdFilters'
 
 const props = defineProps<{
@@ -12,6 +12,9 @@ const model = defineModel<string[]>({ default: () => [] })
 
 const open = ref(false)
 const root = ref<HTMLElement | null>(null)
+const searchInput = ref<HTMLInputElement | null>(null)
+const query = ref('')
+const pinned = ref<Set<string>>(new Set())
 
 const selectedLabel = computed(() => {
   if (model.value.length === 0) {
@@ -26,8 +29,65 @@ const selectedLabel = computed(() => {
   return `Выбрано: ${model.value.length}`
 })
 
+function fuzzyScore(text: string, search: string): number | null {
+  const normalizedSearch = search.trim().toLowerCase()
+  if (normalizedSearch === '') {
+    return 0
+  }
+
+  const normalizedText = text.toLowerCase()
+
+  const substringIndex = normalizedText.indexOf(normalizedSearch)
+  if (substringIndex !== -1) {
+    return substringIndex
+  }
+
+  let textPointer = 0
+  let score = 1000
+  for (const char of normalizedSearch) {
+    const foundIndex = normalizedText.indexOf(char, textPointer)
+    if (foundIndex === -1) {
+      return null
+    }
+    score += foundIndex
+    textPointer = foundIndex + 1
+  }
+
+  return score
+}
+
+const visibleOptions = computed(() => {
+  const scored = props.options
+    .map((option) => ({ option, score: fuzzyScore(option.label, query.value) }))
+    .filter((item): item is { option: SelectOption; score: number } => item.score !== null)
+
+  scored.sort((left, right) => {
+    const leftPinned = pinned.value.has(left.option.value) ? 0 : 1
+    const rightPinned = pinned.value.has(right.option.value) ? 0 : 1
+    if (leftPinned !== rightPinned) {
+      return leftPinned - rightPinned
+    }
+
+    if (left.score !== right.score) {
+      return left.score - right.score
+    }
+
+    return left.option.label.localeCompare(right.option.label, 'ru')
+  })
+
+  return scored.map((item) => item.option)
+})
+
 function toggleOpen() {
   open.value = !open.value
+
+  if (open.value) {
+    query.value = ''
+    pinned.value = new Set(model.value)
+    void nextTick(() => {
+      searchInput.value?.focus()
+    })
+  }
 }
 
 function toggleValue(value: string) {
@@ -41,6 +101,7 @@ function toggleValue(value: string) {
 
 function clearSelection() {
   model.value = []
+  pinned.value = new Set()
 }
 
 function handleDocumentClick(event: MouseEvent) {
@@ -72,6 +133,15 @@ onUnmounted(() => {
     </button>
 
     <div v-if="open" class="multi-select__panel" @click.stop>
+      <div class="multi-select__search">
+        <input
+          ref="searchInput"
+          v-model="query"
+          type="text"
+          class="multi-select__search-input"
+          placeholder="Поиск..."
+        />
+      </div>
       <button
         v-if="model.length > 0"
         type="button"
@@ -80,7 +150,8 @@ onUnmounted(() => {
       >
         Сбросить
       </button>
-      <label v-for="option in options" :key="option.value" class="multi-select__option">
+      <div class="multi-select__list">
+        <label v-for="option in visibleOptions" :key="option.value" class="multi-select__option">
           <input
             type="checkbox"
             class="multi-select__checkbox"
@@ -90,6 +161,8 @@ onUnmounted(() => {
           <span class="multi-select__option-label">{{ option.label }}</span>
         </label>
         <div v-if="options.length === 0" class="multi-select__empty">Нет вариантов</div>
+        <div v-else-if="visibleOptions.length === 0" class="multi-select__empty">Ничего не найдено</div>
+      </div>
     </div>
   </div>
 </template>
@@ -158,11 +231,10 @@ onUnmounted(() => {
   z-index: 20;
   display: flex;
   flex-direction: column;
-  gap: 2px;
   min-width: 100%;
   max-width: 320px;
-  max-height: 280px;
-  overflow: auto;
+  max-height: 320px;
+  overflow: hidden;
   padding: 6px;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 10px;
@@ -170,6 +242,38 @@ onUnmounted(() => {
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
 }
 
+.multi-select__search {
+  padding: 2px 2px 6px;
+}
+
+.multi-select__search-input {
+  width: 100%;
+  padding: 7px 10px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.03);
+  color: #f1f4f7;
+  font: inherit;
+  font-size: 0.875rem;
+  outline: none;
+  transition: border-color 0.12s ease;
+}
+
+.multi-select__search-input:focus {
+  border-color: rgba(41, 165, 255, 0.55);
+}
+
+.multi-select__search-input::placeholder {
+  color: rgba(241, 244, 247, 0.4);
+}
+
+.multi-select__list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow-y: auto;
+}
+
 .multi-select__clear {
   align-self: flex-start;
   margin: 2px 4px 6px;