filter

src/api/issue.api.ts

@@ -51,11 +51,18 @@ export async function itemsList(params: {
   page: number
   limit: number
   text?: string | null
+  status?: string | null
+  assigneeId?: string | null
   projectId?: string | null
 }) {
-  // `text` (free-text search) has no backend support yet — kept in the
+  const query = toQuery({
-  // signature so callers don't need to change, but not sent over the wire.
+    page: params.page,
-  const query = toQuery({ page: params.page, limit: params.limit, projectId: params.projectId })
+    limit: params.limit,
+    projectId: params.projectId,
+    text: params.text,
+    assigneeId: params.assigneeId,
+    status: params.status,
+  })
   return apiClient.get<{ list: Issue[]; meta: Meta }>(`/api/issues/list${query}`)
 }
 

src/components/AssigneeFilter.vue

@@ -37,7 +37,10 @@ function toggle(id: string) {
 
 function onMenuSelect(value: unknown) {
   if (Array.isArray(value)) {
-    emit('changed', value.filter((el): el is string => typeof el === 'string'))
+    emit(
+      'changed',
+      value.filter((el): el is string => typeof el === 'string'),
+    )
   }
 }
 
@@ -142,7 +145,7 @@ onMounted(() => {
   }
 
   &:hover {
-    transform: translateY(-0.25rem);
+    transform: translateY(0rem);
   }
 }
 </style>

src/components/IssueFilter.vue

@@ -1,8 +1,14 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import AssigneeFilter from '@/components/AssigneeFilter.vue'
 import TextFilter from '@/components/TextFilter.vue'
 
+interface Props {
+  text?: string | null
+}
+
+withDefaults(defineProps<Props>(), { text: null })
+const emit = defineEmits<{ 'update:text': [value: string | null] }>()
+
 function onChanged(value: string[]) {
   console.log(value)
 }
@@ -10,7 +16,7 @@ function onChanged(value: string[]) {
 
 <template>
   <div class="u-grid2 ga-4 align-center">
-    <text-filter />
+    <text-filter :model-value="text" @update:model-value="emit('update:text', $event)" />
     <assignee-filter @changed="onChanged" :selected="['4Jpoz4EgViFrMpl7jQ969mVyX2IFYg5H']" />
     <v-btn variant="text">clear filters</v-btn>
   </div>

src/components/TextFilter.vue

@@ -1,15 +1,29 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
-const text = ref<string | null>(null)
+interface Props {
+  modelValue?: string | null
+}
+
+const props = withDefaults(defineProps<Props>(), { modelValue: null })
+const emit = defineEmits<{ 'update:modelValue': [value: string | null] }>()
+
+const text = ref(props.modelValue)
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    text.value = value
+  },
+)
 
 function onSearch() {
-  console.log('onSearch', text.value)
+  emit('update:modelValue', text.value || null)
 }
 
 function onClear() {
-  text.value = ''
+  text.value = null
-  console.log('onClear', text.value)
+  emit('update:modelValue', null)
 }
 </script>
 

src/stores/issue.ts

@@ -24,7 +24,14 @@ export const useIssueStore = defineStore('item', () => {
     totalPages: 0,
   })
 
-  async function list(params: { page: number; limit: number; text?: string | null; projectId?: string | null }) {
+  async function list(params: {
+    page: number
+    limit: number
+    text?: string | null
+    status?: string | null
+    assigneeId?: string | null
+    projectId?: string | null
+  }) {
     try {
       const res = await itemsList(params)
       issues.value = res.list

src/views/Issues/IssuesListView.vue

@@ -48,10 +48,6 @@ async function load() {
   await fetch()
 }
 
-// async function onSearch() {
-//   await updatePage(1)
-// }
-
 function syncQuery() {
   const query: Record<string, string> = { page: String(page.value) }
 
@@ -90,6 +86,12 @@ async function updatePage(val: number) {
   await load()
 }
 
+async function onTextChanged(value: string | null) {
+  text.value = value
+  page.value = 1
+  await load()
+}
+
 function close() {
   selected.value = []
 }
@@ -151,7 +153,7 @@ async function onDeleteBatch() {
   <div class="d-flex flex-column ga-2">
     <div class="u-grid ga-1">
       <div class="u-height">
-        <issue-filter class="mb-2" />
+        <issue-filter class="mb-2" :text="text" @update:text="onTextChanged" />
         <v-list class="pa-0" density="compact" v-model:selected="selected" mandatory>
           <v-list-item>
             <template #prepend>