blender/flamenco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: always show active status filters

Browse Source 
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:
Sybren A. Stüvel 2022-05-20 12:17:06 +02:00
parent 8730157c1c
commit 30a30f154b
1 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/app/src/components/StatusFilterBar.vue
View File

@ -1,14 +1,25 @@
<script setup> <script setup>
import { ref } from 'vue' import { computed } from 'vue'
import { indicator } from '@/statusindicator'; import { indicator } from '@/statusindicator';
defineProps(['availableStatuses', 'activeStatuses']); const props = defineProps(['availableStatuses', 'activeStatuses']);
const emit = defineEmits(['click']) 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> </script>
<template> <template>
<ul class="status-filter-bar"> <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" :data-status="status"
:class="{active: activeStatuses.indexOf(status) >= 0}" :class="{active: activeStatuses.indexOf(status) >= 0}"
@click="emit('click', status)" @click="emit('click', status)"