multiple filter

src/components/IssueFilter.vue

@@ -3,19 +3,18 @@ import { computed } from 'vue'
 import AssigneeFilter from '@/components/AssigneeFilter.vue'
 import TextFilter from '@/components/TextFilter.vue'
 import StatusFilter from '@/components/StatusFilter.vue'
-import ProjectMenu from '@/components/ProjectMenu.vue'
 
 interface Props {
   text?: string | null
   assigneeId?: string | null
-  status?: string | null
+  status?: string[]
 }
 
-const props = withDefaults(defineProps<Props>(), { text: null, assigneeId: null })
+const props = withDefaults(defineProps<Props>(), { text: null, assigneeId: null, status: () => [] })
 const emit = defineEmits<{
   'update:text': [value: string | null]
   'update:assigneeId': [value: string | null]
-  'update:status': [value: string | null]
+  'update:status': [value: string[]]
   'update:clear': []
 }>()
 
@@ -25,14 +24,13 @@ function onAssigneeChanged(value: string[]) {
   emit('update:assigneeId', value.at(-1) ?? null)
 }
 
-function onStatusChanged(alias: string) {
-  emit('update:status', alias)
+function onStatusChanged(value: string[]) {
+  emit('update:status', value)
 }
 </script>
 
 <template>
   <div class="filter-grid ga-4 align-center">
-    <project-menu />
     <text-filter :model-value="text" @update:model-value="emit('update:text', $event)" />
     <status-filter :status="status" @changed="onStatusChanged" />
     <assignee-filter :selected="selectedAssignees" @changed="onAssigneeChanged" />
@@ -43,6 +41,6 @@ function onStatusChanged(alias: string) {
 <style scoped lang="scss">
 .filter-grid {
   display: grid;
-  grid-template-columns: auto 1fr auto auto auto;
+  grid-template-columns: 1fr auto auto auto;
 }
 </style>

src/components/StatusFilter.vue

@@ -3,19 +3,25 @@ import { useStatusStore } from '@/stores/status.ts'
 import { ref, watch } from 'vue'
 
 interface Props {
-  status?: string | null
+  status?: string[]
 }
 
-const { status } = defineProps<Props>()
-const emit = defineEmits<{ changed: [value: string] }>()
+const { status = [] } = defineProps<Props>()
+const emit = defineEmits<{ changed: [value: string[]] }>()
 const statusStore = useStatusStore()
-const selected = ref(status)
-const onUpdate = (val: unknown) => emit('changed', val as string)
+const selected = ref<string[]>([...status])
+
+// Keep store order so the same filter always yields the same URL
+const onUpdate = (val: unknown) => {
+  if (!Array.isArray(val)) return
+  const order = statusStore.statuses?.map((el) => el.alias) ?? []
+  emit('changed', [...val].sort((a, b) => order.indexOf(a) - order.indexOf(b)))
+}
 
 watch(
   () => status,
   (val) => {
-    selected.value = val
+    selected.value = [...val]
   },
 )
 </script>
@@ -24,6 +30,7 @@ watch(
   <v-btn-toggle
     v-model="selected"
     divided
+    multiple
     border
     size="default"
     density="comfortable"