filter

src/components/IssueFilter.vue

@@ -1,29 +1,37 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import AssigneeFilter from '@/components/AssigneeFilter.vue'
 import TextFilter from '@/components/TextFilter.vue'
 
 interface Props {
   text?: string | null
+  assigneeId?: string | null
 }
 
-withDefaults(defineProps<Props>(), { text: null })
-const emit = defineEmits<{ 'update:text': [value: string | null] }>()
+const props = withDefaults(defineProps<Props>(), { text: null, assigneeId: null })
+const emit = defineEmits<{
+  'update:text': [value: string | null]
+  'update:assigneeId': [value: string | null]
+  'update:clear': []
+}>()
 
-function onChanged(value: string[]) {
-  console.log(value)
+const selectedAssignees = computed(() => (props.assigneeId ? [props.assigneeId] : []))
+
+function onAssigneeChanged(value: string[]) {
+  emit('update:assigneeId', value.at(-1) ?? null)
 }
 </script>
 
 <template>
-  <div class="u-grid2 ga-4 align-center">
+  <div class="filter-grid ga-4 align-center">
     <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>
+    <assignee-filter :selected="selectedAssignees" @changed="onAssigneeChanged" />
+    <v-btn prepend-icon="mdi-close" variant="tonal" @click="emit('update:clear')">Clear Filters</v-btn>
   </div>
 </template>
 
 <style scoped lang="scss">
-.u-grid2 {
+.filter-grid {
   display: grid;
   grid-template-columns: 1fr auto auto;
 }