From ca30a2ddeee7c77940e85a17b7a90e8487248c25 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 26 Jun 2024 16:33:39 +0200
Subject: [PATCH] feat: create tagList component, fix logic for enums and
 arrays

---
 src/lib/components/filters/content.svelte     | 48 ++---------------
 src/lib/components/filters/filters.svelte     |  6 ++-
 src/lib/components/filters/index.ts           |  1 +
 src/lib/components/filters/store.ts           | 16 +++++-
 src/lib/components/filters/tagList.svelte     | 51 +++++++++++++++++++
 .../executions/+page.svelte                   |  5 +-
 6 files changed, 76 insertions(+), 51 deletions(-)
 create mode 100644 src/lib/components/filters/tagList.svelte

diff --git a/src/lib/components/filters/content.svelte b/src/lib/components/filters/content.svelte
index b954e1514..6bba3b686 100644
--- a/src/lib/components/filters/content.svelte
+++ b/src/lib/components/filters/content.svelte
@@ -10,10 +10,10 @@
         InputDateTime
     } from '$lib/elements/forms';
     import { createEventDispatcher, onMount } from 'svelte';
-    import { tags, queries, type TagValue, operators, addFilter } from './store';
+    import { tags, operators, addFilter } from './store';
     import type { Column } from '$lib/helpers/types';
     import type { Writable } from 'svelte/store';
-    import { tooltip } from '$lib/actions/tooltip';
+    import { TagList } from '.';
 
     // We cast to any to not cause type errors in the input components
     /* eslint  @typescript-eslint/no-explicit-any: 'off' */
@@ -52,21 +52,6 @@
         arrayValues = [];
     }
 
-    function tagFormat(node: HTMLElement) {
-        node.innerHTML = node.innerHTML.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>');
-    }
-
-    function isTypeTagValue(obj: any): obj is TagValue {
-        if (typeof obj === 'string') return false;
-        return (
-            obj &&
-            typeof obj.tag === 'string' &&
-            (typeof obj.value === 'string' ||
-                typeof obj.value === 'number' ||
-                Array.isArray(obj.value))
-        );
-    }
-
     const dispatch = createEventDispatcher<{
         clear: void;
         apply: { applied: number };
@@ -154,34 +139,7 @@
     </form>
 
     <ul class="u-flex u-flex-wrap u-cross-center u-gap-8 u-margin-block-start-16 tags">
-        {#each $tags as tag (tag)}
-            {#if isTypeTagValue(tag)}
-                <button
-                    use:tooltip={{
-                        content: tag?.value?.toString()
-                    }}
-                    class="tag"
-                    on:click={() => {
-                        queries.removeFilter(tag);
-                    }}>
-                    <span class="text" use:tagFormat>
-                        {tag.tag}
-                    </span>
-                    <i class="icon-x" />
-                </button>
-            {:else}
-                <button
-                    class="tag"
-                    on:click={() => {
-                        queries.removeFilter(tag);
-                    }}>
-                    <span class="text" use:tagFormat>
-                        {tag}
-                    </span>
-                    <i class="icon-x" />
-                </button>
-            {/if}
-        {/each}
+        <TagList />
     </ul>
 </div>
 
diff --git a/src/lib/components/filters/filters.svelte b/src/lib/components/filters/filters.svelte
index 45e121eb7..f56584fe0 100644
--- a/src/lib/components/filters/filters.svelte
+++ b/src/lib/components/filters/filters.svelte
@@ -39,7 +39,7 @@
     }
 
     function apply() {
-        if (selectedColumn && operatorKey && value) {
+        if (selectedColumn && operatorKey && (value || arrayValues.length)) {
             addFilter($columns, selectedColumn, operatorKey, value, arrayValues);
             selectedColumn = null;
             value = null;
@@ -53,7 +53,9 @@
         selectedColumn = null;
     }
 
-    $: isButtonDisabled = $queriesAreDirty ? false : !selectedColumn || !operatorKey || !value;
+    $: isButtonDisabled = $queriesAreDirty
+        ? false
+        : !selectedColumn || !operatorKey || (!value && !arrayValues.length);
 </script>
 
 <div class="is-not-mobile">
diff --git a/src/lib/components/filters/index.ts b/src/lib/components/filters/index.ts
index 223e43ebf..7d3b7f3d2 100644
--- a/src/lib/components/filters/index.ts
+++ b/src/lib/components/filters/index.ts
@@ -1,2 +1,3 @@
 export { default as Filters } from './filters.svelte';
+export { default as TagList } from './tagList.svelte';
 export { hasPageQueries, queryParamToMap, queries } from '$lib/components/filters/store';
diff --git a/src/lib/components/filters/store.ts b/src/lib/components/filters/store.ts
index eb20d01e2..a3a94bd31 100644
--- a/src/lib/components/filters/store.ts
+++ b/src/lib/components/filters/store.ts
@@ -170,14 +170,26 @@ const operatorsDefault = new Map<
         ValidOperators.Equal,
         {
             query: Query.equal,
-            types: [ValidTypes.String, ValidTypes.Integer, ValidTypes.Double, ValidTypes.Boolean]
+            types: [
+                ValidTypes.String,
+                ValidTypes.Integer,
+                ValidTypes.Double,
+                ValidTypes.Boolean,
+                ValidTypes.Enum
+            ]
         }
     ],
     [
         ValidOperators.NotEqual,
         {
             query: Query.notEqual,
-            types: [ValidTypes.String, ValidTypes.Integer, ValidTypes.Double, ValidTypes.Boolean]
+            types: [
+                ValidTypes.String,
+                ValidTypes.Integer,
+                ValidTypes.Double,
+                ValidTypes.Boolean,
+                ValidTypes.Enum
+            ]
         }
     ],
     [
diff --git a/src/lib/components/filters/tagList.svelte b/src/lib/components/filters/tagList.svelte
new file mode 100644
index 000000000..6b69efa4c
--- /dev/null
+++ b/src/lib/components/filters/tagList.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { tooltip } from '$lib/actions/tooltip';
+
+    import { queries, tags, type TagValue } from './store';
+
+    function tagFormat(node: HTMLElement) {
+        node.innerHTML = node.innerHTML.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>');
+    }
+
+    function isTypeTagValue(obj: any): obj is TagValue {
+        if (typeof obj === 'string') return false;
+        return (
+            obj &&
+            typeof obj.tag === 'string' &&
+            (typeof obj.value === 'string' ||
+                typeof obj.value === 'number' ||
+                Array.isArray(obj.value))
+        );
+    }
+</script>
+
+{#each $tags as tag (tag)}
+    {#if isTypeTagValue(tag)}
+        <button
+            use:tooltip={{
+                content: tag?.value?.toString()
+            }}
+            class="tag"
+            on:click={() => {
+                queries.removeFilter(tag);
+                queries.apply();
+            }}>
+            <span class="text" use:tagFormat>
+                {tag.tag}
+            </span>
+            <i class="icon-x" />
+        </button>
+    {:else}
+        <button
+            class="tag"
+            on:click={() => {
+                queries.removeFilter(tag);
+                queries.apply();
+            }}>
+            <span class="text" use:tagFormat>
+                {tag}
+            </span>
+            <i class="icon-x" />
+        </button>
+    {/if}
+{/each}
diff --git a/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte
index 2b0794b8c..963022919 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte
@@ -14,7 +14,7 @@
     import Create from '../create.svelte';
     import { abbreviateNumber } from '$lib/helpers/numbers';
     import { base } from '$app/paths';
-    import { Filters } from '$lib/components/filters';
+    import { Filters, TagList } from '$lib/components/filters';
     import { writable } from 'svelte/store';
     import type { Column } from '$lib/helpers/types';
     import { View } from '$lib/helpers/load';
@@ -29,7 +29,7 @@
         {
             id: 'status',
             title: 'Status',
-            type: 'string',
+            type: 'enum',
             show: true,
             width: 110,
             array: true,
@@ -101,6 +101,7 @@
 </script>
 
 <Container>
+    <TagList />
     <ContainerHeader title="Executions">
         <svelte:fragment slot="tooltip" let:tier let:limit let:upgradeMethod>
             <p class="u-bold">The {tier} plan has limits</p>