filter

src/components/IssueFilter.vue

@@ -2,16 +2,19 @@
 import { computed } from 'vue'
 import AssigneeFilter from '@/components/AssigneeFilter.vue'
 import TextFilter from '@/components/TextFilter.vue'
+import StatusFilter from '@/components/StatusFilter.vue'
 
 interface Props {
   text?: string | null
   assigneeId?: string | null
+  status?: 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:status': [value: string | null]
   'update:clear': []
 }>()
 
@@ -20,11 +23,16 @@ const selectedAssignees = computed(() => (props.assigneeId ? [props.assigneeId]
 function onAssigneeChanged(value: string[]) {
   emit('update:assigneeId', value.at(-1) ?? null)
 }
+
+function onStatusChanged(alias: string) {
+  emit('update:status', alias)
+}
 </script>
 
 <template>
   <div class="filter-grid ga-4 align-center">
     <text-filter :model-value="text" @update:model-value="emit('update:text', $event)" />
+    <status-filter :status="status" @changed="onStatusChanged" />
     <assignee-filter :selected="selectedAssignees" @changed="onAssigneeChanged" />
     <v-btn prepend-icon="mdi-close" variant="tonal" @click="emit('update:clear')">Clear Filters</v-btn>
   </div>
@@ -33,6 +41,6 @@ function onAssigneeChanged(value: string[]) {
 <style scoped lang="scss">
 .filter-grid {
   display: grid;
-  grid-template-columns: 1fr auto auto;
+  grid-template-columns: 1fr auto auto auto;
 }
 </style>