From 30a30f154ba327f23d37858a8200331399526fae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Fri, 20 May 2022 12:17:06 +0200
Subject: [PATCH] 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.
---
 web/app/src/components/StatusFilterBar.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/web/app/src/components/StatusFilterBar.vue b/web/app/src/components/StatusFilterBar.vue
index faff6a4c..fc1df0b0 100644
--- a/web/app/src/components/StatusFilterBar.vue
+++ b/web/app/src/components/StatusFilterBar.vue
@@ -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)"