From 2581254a0290e90bd87f643056baa5a7efc13ffb Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 27 Sep 2023 20:13:23 -0700
Subject: [PATCH] refactor(web): key actions component filter props

---
 web/components/KeyActions.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/web/components/KeyActions.vue b/web/components/KeyActions.vue
index 208e4368c..3daf438db 100644
--- a/web/components/KeyActions.vue
+++ b/web/components/KeyActions.vue
@@ -3,16 +3,28 @@ import { storeToRefs } from 'pinia';
 
 import { useServerStore } from '~/store/server';
 
-defineProps<{
+const props = defineProps<{
+  filterBy?: string[] | undefined;
+  filterOut?: string[] | undefined;
   t: any;
 }>();
 
 const { keyActions } = storeToRefs(useServerStore());
+
+const filteredKeyActions = computed(() => {
+  if (!keyActions.value || (!props.filterOut && !props.filterBy)) return keyActions.value;
+
+  return keyActions.value.filter((action: { name: string; }) => {
+    return props.filterOut
+      ? !props.filterOut?.includes(action.name)
+      : props.filterBy?.includes(action.name);
+  });
+});
 </script>
 
 <template>
-  <ul v-if="keyActions" class="flex flex-col gap-y-8px">
-    <li v-for="action in keyActions" :key="action.name">
+  <ul v-if="filteredKeyActions" class="flex flex-col gap-y-8px">
+    <li v-for="action in filteredKeyActions" :key="action.name">
       <BrandButton
         class="w-full sm:max-w-300px"
         :disabled="action?.disabled"