Web: always show active status filters
Fix a bug where the filter would only show available statuses and thus make it impossible to disable a filter that's no longer available. For example, when showing only `active` tasks, and no task is active any more, it would remove the "filter circle" for `active` status, and thus make it impossible to disable the filter. Now the filter will always show all enabled statuses, even when there is no more job/task with that status.
This commit is contained in:
parent
8730157c1c
commit
30a30f154b
@ -1,14 +1,25 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import { indicator } from '@/statusindicator';
|
||||
|
||||
defineProps(['availableStatuses', 'activeStatuses']);
|
||||
const props = defineProps(['availableStatuses', 'activeStatuses']);
|
||||
const emit = defineEmits(['click'])
|
||||
|
||||
/**
|
||||
* visibleStatuses is a union between `availableStatuses` and `activeStatuses`,
|
||||
* and ensures that when a filter is active, it's also shown (even when it's no
|
||||
* longer available) so that it can be deactivated again.
|
||||
*/
|
||||
const visibleStatuses = computed(() => {
|
||||
const available = props.availableStatuses;
|
||||
const unavailable = props.activeStatuses.filter((status) => available.indexOf(status) == -1);
|
||||
return available.concat(unavailable);
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul class="status-filter-bar">
|
||||
<li v-for="status in availableStatuses" class="status-filter-indicator"
|
||||
<li v-for="status in visibleStatuses" class="status-filter-indicator"
|
||||
:data-status="status"
|
||||
:class="{active: activeStatuses.indexOf(status) >= 0}"
|
||||
@click="emit('click', status)"
|
||||
|
Loading…
x
Reference in New Issue
Block a user