From 45b90e6888fa6ed432f0d264801df038d40672f8 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Tue, 11 Jan 2022 00:01:01 +0800
Subject: [PATCH] Filter UI tweaks (#10951)

* Make AND/OR language consistent in Filter UI

* tweaks

* use em-dash as separator

* prevent and/or group disappearing for UX
---
 app/src/interfaces/_system/system-filter/nodes.vue | 14 ++++++++++++--
 .../_system/system-filter/system-filter.vue        | 14 ++++----------
 app/src/lang/translations/en-US.yaml               |  2 ++
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/app/src/interfaces/_system/system-filter/nodes.vue b/app/src/interfaces/_system/system-filter/nodes.vue
index bc194439b2..f4dc3681e9 100644
--- a/app/src/interfaces/_system/system-filter/nodes.vue
+++ b/app/src/interfaces/_system/system-filter/nodes.vue
@@ -58,9 +58,19 @@
 						<v-icon name="drag_indicator" class="drag-handle" small />
 						<div class="logic-type" :class="{ or: filterInfo[index].name === '_or' }">
 							<span class="key" @click="toggleLogic(index)">
-								{{ filterInfo[index].name === '_and' ? t('interfaces.filter.all') : t('interfaces.filter.any') }}
+								{{
+									filterInfo[index].name === '_and'
+										? t('interfaces.filter.logic_type_and')
+										: t('interfaces.filter.logic_type_or')
+								}}
+							</span>
+							<span class="text">
+								{{
+									`— ${filterInfo[index].name === '_and' ? t('interfaces.filter.all') : t('interfaces.filter.any')} ${t(
+										'interfaces.filter.of_the_following'
+									)}`
+								}}
 							</span>
-							<span class="text">{{ t('interfaces.filter.of_the_following') }}</span>
 						</div>
 						<span class="delete">
 							<v-icon
diff --git a/app/src/interfaces/_system/system-filter/system-filter.vue b/app/src/interfaces/_system/system-filter/system-filter.vue
index 79beaee4e3..ab30262d05 100644
--- a/app/src/interfaces/_system/system-filter/system-filter.vue
+++ b/app/src/interfaces/_system/system-filter/system-filter.vue
@@ -111,16 +111,10 @@ export default defineComponent({
 				}
 			},
 			set(newVal) {
-				switch (newVal.length) {
-					case 0:
-						emit('input', null);
-						break;
-					case 1:
-						emit('input', newVal[0]);
-						break;
-					default:
-						emit('input', { _and: newVal });
-						break;
+				if (newVal.length === 0) {
+					emit('input', null);
+				} else {
+					emit('input', { _and: newVal });
 				}
 			},
 		});
diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index 8f691705ee..34151a94af 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -1254,6 +1254,8 @@ interfaces:
     add_filter: Add Filter
     add_group: And / Or group
     add_value: Add Value
+    logic_type_and: AND
+    logic_type_or: OR
     all: All
     any: Any
     and: and