From bb4ddf3f36e3d66f42a027ea5f9a5e2eb499dfd2 Mon Sep 17 00:00:00 2001
From: Vadim <vadim.olonin@gmail.com>
Date: Fri, 25 Sep 2026 15:29:51 +0300
Subject: [PATCH] filter

---
 src/components/AssigneeFilter.vue       | 160 +++++++++++++++++++++---
 src/components/AssigneeFilterAvatar.vue | 148 ----------------------
 src/components/IssueFilter.vue          |  12 +-
 3 files changed, 151 insertions(+), 169 deletions(-)
 delete mode 100644 src/components/AssigneeFilterAvatar.vue

diff --git a/src/components/AssigneeFilter.vue b/src/components/AssigneeFilter.vue
index d8ade23..c620edc 100644
--- a/src/components/AssigneeFilter.vue
+++ b/src/components/AssigneeFilter.vue
@@ -1,20 +1,148 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { itemsList } from '@/api/user.api.ts'
+import type { User } from '@/api/user.api.ts'
+
+interface Props {
+  selected?: string[]
+}
+
+const props = withDefaults(defineProps<Props>(), { selected: () => [] })
+const emit = defineEmits<{ changed: [value: string[]] }>()
+
+const PAGE_SIZE = 20
+const AVATAR_LIMIT = 5
+
+const users = ref<User[]>([])
+const page = ref(0)
+const hasMore = ref(true)
+const totalCount = ref(0)
+const hoveredId = ref<string | null>(null)
+
+const avatarUsers = computed(() => users.value.slice(0, AVATAR_LIMIT))
+const extraCount = computed(() => Math.max(totalCount.value - AVATAR_LIMIT, 0))
+
+function initials(user: Pick<User, 'name' | 'email'>) {
+  return (user.name || user.email || '?')[0]!.toUpperCase()
+}
+
+function isSelected(id: string) {
+  return props.selected.includes(id)
+}
+
+function toggle(id: string) {
+  const next = isSelected(id) ? props.selected.filter((el) => el !== id) : [...props.selected, id]
+  emit('changed', next)
+}
+
+function onMenuSelect(value: unknown) {
+  if (Array.isArray(value)) {
+    emit('changed', value.filter((el): el is string => typeof el === 'string'))
+  }
+}
+
+async function loadMore({ done }: { done: (status: 'ok' | 'empty' | 'error') => void }) {
+  if (!hasMore.value) {
+    done('empty')
+    return
+  }
+
+  try {
+    const nextPage = page.value + 1
+    const res = await itemsList({ page: nextPage, limit: PAGE_SIZE })
+    users.value.push(...res.list)
+    page.value = nextPage
+    totalCount.value = res.meta.totalCount
+    hasMore.value = nextPage < res.meta.totalPages
+    done(hasMore.value ? 'ok' : 'empty')
+  } catch {
+    done('error')
+  }
+}
+
+onMounted(() => {
+  loadMore({ done: () => {} })
+})
+</script>
 
 <template>
-  <v-select
-    variant="outlined"
-    clearable
-    :items="[
-      { id: 1, image: 'A' },
-      { id: 2, image: 'B' },
-      { id: 3, image: 'C' },
-      { id: 4, image: 'D' },
-    ]"
-  >
-    <template #item>
-      <div>a</div>
-    </template>
-  </v-select>
+  <div class="d-flex align-center">
+    <v-avatar
+      v-for="(user, index) in avatarUsers"
+      :key="user.id"
+      rounded="circle"
+      border
+      density="compact"
+      :image="user.image ?? undefined"
+      :text="initials(user)"
+      class="stack-avatar cursor-pointer"
+      :class="{ 'bg-primary': isSelected(user.id) }"
+      :style="{ zIndex: hoveredId === user.id ? avatarUsers.length + 1 : avatarUsers.length - index }"
+      @mouseenter="hoveredId = user.id"
+      @mouseleave="hoveredId = null"
+      @click="toggle(user.id)"
+    />
+
+    <v-menu>
+      <template v-slot:activator="{ props: activatorProps }">
+        <v-avatar
+          rounded="circle"
+          border
+          density="compact"
+          variant="tonal"
+          class="stack-avatar cursor-pointer"
+          :style="{ zIndex: hoveredId === 'more' ? avatarUsers.length + 1 : 0 }"
+          v-bind="activatorProps"
+          @mouseenter="hoveredId = 'more'"
+          @mouseleave="hoveredId = null"
+        >
+          <span v-if="extraCount > 0" class="text-caption">+{{ extraCount }}</span>
+          <v-icon v-else icon="mdi-dots-horizontal" size="small" />
+        </v-avatar>
+      </template>
+
+      <v-infinite-scroll height="16rem" @load="loadMore">
+        <v-list
+          border
+          width="12rem"
+          class="mt-1"
+          select-strategy="leaf"
+          density="compact"
+          :selected="selected"
+          @update:selected="onMenuSelect"
+        >
+          <v-list-item v-for="user in users" :key="user.id" :value="user.id">
+            <div class="d-flex align-center ga-2">
+              <v-avatar
+                :image="user.image ?? undefined"
+                :text="initials(user)"
+                rounded="circle"
+                density="compact"
+                border
+                color="primary"
+              />
+              <div>{{ user.name || user.email }}</div>
+            </div>
+          </v-list-item>
+        </v-list>
+
+        <template #empty />
+      </v-infinite-scroll>
+    </v-menu>
+  </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.stack-avatar {
+  position: relative;
+  transition: transform 0.15s ease;
+
+  &:not(:first-child) {
+    margin-left: -0.75rem;
+  }
+
+  &:hover {
+    transform: translateY(-0.25rem);
+  }
+}
+</style>
diff --git a/src/components/AssigneeFilterAvatar.vue b/src/components/AssigneeFilterAvatar.vue
deleted file mode 100644
index c620edc..0000000
--- a/src/components/AssigneeFilterAvatar.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { itemsList } from '@/api/user.api.ts'
-import type { User } from '@/api/user.api.ts'
-
-interface Props {
-  selected?: string[]
-}
-
-const props = withDefaults(defineProps<Props>(), { selected: () => [] })
-const emit = defineEmits<{ changed: [value: string[]] }>()
-
-const PAGE_SIZE = 20
-const AVATAR_LIMIT = 5
-
-const users = ref<User[]>([])
-const page = ref(0)
-const hasMore = ref(true)
-const totalCount = ref(0)
-const hoveredId = ref<string | null>(null)
-
-const avatarUsers = computed(() => users.value.slice(0, AVATAR_LIMIT))
-const extraCount = computed(() => Math.max(totalCount.value - AVATAR_LIMIT, 0))
-
-function initials(user: Pick<User, 'name' | 'email'>) {
-  return (user.name || user.email || '?')[0]!.toUpperCase()
-}
-
-function isSelected(id: string) {
-  return props.selected.includes(id)
-}
-
-function toggle(id: string) {
-  const next = isSelected(id) ? props.selected.filter((el) => el !== id) : [...props.selected, id]
-  emit('changed', next)
-}
-
-function onMenuSelect(value: unknown) {
-  if (Array.isArray(value)) {
-    emit('changed', value.filter((el): el is string => typeof el === 'string'))
-  }
-}
-
-async function loadMore({ done }: { done: (status: 'ok' | 'empty' | 'error') => void }) {
-  if (!hasMore.value) {
-    done('empty')
-    return
-  }
-
-  try {
-    const nextPage = page.value + 1
-    const res = await itemsList({ page: nextPage, limit: PAGE_SIZE })
-    users.value.push(...res.list)
-    page.value = nextPage
-    totalCount.value = res.meta.totalCount
-    hasMore.value = nextPage < res.meta.totalPages
-    done(hasMore.value ? 'ok' : 'empty')
-  } catch {
-    done('error')
-  }
-}
-
-onMounted(() => {
-  loadMore({ done: () => {} })
-})
-</script>
-
-<template>
-  <div class="d-flex align-center">
-    <v-avatar
-      v-for="(user, index) in avatarUsers"
-      :key="user.id"
-      rounded="circle"
-      border
-      density="compact"
-      :image="user.image ?? undefined"
-      :text="initials(user)"
-      class="stack-avatar cursor-pointer"
-      :class="{ 'bg-primary': isSelected(user.id) }"
-      :style="{ zIndex: hoveredId === user.id ? avatarUsers.length + 1 : avatarUsers.length - index }"
-      @mouseenter="hoveredId = user.id"
-      @mouseleave="hoveredId = null"
-      @click="toggle(user.id)"
-    />
-
-    <v-menu>
-      <template v-slot:activator="{ props: activatorProps }">
-        <v-avatar
-          rounded="circle"
-          border
-          density="compact"
-          variant="tonal"
-          class="stack-avatar cursor-pointer"
-          :style="{ zIndex: hoveredId === 'more' ? avatarUsers.length + 1 : 0 }"
-          v-bind="activatorProps"
-          @mouseenter="hoveredId = 'more'"
-          @mouseleave="hoveredId = null"
-        >
-          <span v-if="extraCount > 0" class="text-caption">+{{ extraCount }}</span>
-          <v-icon v-else icon="mdi-dots-horizontal" size="small" />
-        </v-avatar>
-      </template>
-
-      <v-infinite-scroll height="16rem" @load="loadMore">
-        <v-list
-          border
-          width="12rem"
-          class="mt-1"
-          select-strategy="leaf"
-          density="compact"
-          :selected="selected"
-          @update:selected="onMenuSelect"
-        >
-          <v-list-item v-for="user in users" :key="user.id" :value="user.id">
-            <div class="d-flex align-center ga-2">
-              <v-avatar
-                :image="user.image ?? undefined"
-                :text="initials(user)"
-                rounded="circle"
-                density="compact"
-                border
-                color="primary"
-              />
-              <div>{{ user.name || user.email }}</div>
-            </div>
-          </v-list-item>
-        </v-list>
-
-        <template #empty />
-      </v-infinite-scroll>
-    </v-menu>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.stack-avatar {
-  position: relative;
-  transition: transform 0.15s ease;
-
-  &:not(:first-child) {
-    margin-left: -0.75rem;
-  }
-
-  &:hover {
-    transform: translateY(-0.25rem);
-  }
-}
-</style>
diff --git a/src/components/IssueFilter.vue b/src/components/IssueFilter.vue
index 973c186..0957e9d 100644
--- a/src/components/IssueFilter.vue
+++ b/src/components/IssueFilter.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import AssigneeFilter from '@/components/AssigneeFilter.vue'
-import AssigneeFilterAvatar from '@/components/AssigneeFilterAvatar.vue'
 import TextFilter from '@/components/TextFilter.vue'
+
+function onChanged(value: string[]) {
+  console.log(value)
+}
 </script>
 
 <template>
-  <div class="u-grid2 ga-1 align-center">
+  <div class="u-grid2 ga-4 align-center">
     <text-filter />
-    <assignee-filter />
-    <assignee-filter-avatar />
+    <assignee-filter @changed="onChanged" :selected="['4Jpoz4EgViFrMpl7jQ969mVyX2IFYg5H']" />
     <v-btn variant="text">clear filters</v-btn>
   </div>
 </template>
@@ -17,6 +19,6 @@ import TextFilter from '@/components/TextFilter.vue'
 <style scoped lang="scss">
 .u-grid2 {
   display: grid;
-  grid-template-columns: 1fr 10rem auto auto;
+  grid-template-columns: 1fr auto auto;
 }
 </style>