From 6abb878e349ee4f1c1435ecf39724329fb2e70f2 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 27 Jun 2024 17:33:03 +0200
Subject: [PATCH] feat: mobile view

---
 src/lib/components/filters/filters.svelte     | 26 +++++----
 .../executions/+page.svelte                   | 53 +++++++------------
 2 files changed, 35 insertions(+), 44 deletions(-)

diff --git a/src/lib/components/filters/filters.svelte b/src/lib/components/filters/filters.svelte
index 5c0814eb1..8d16ef03a 100644
--- a/src/lib/components/filters/filters.svelte
+++ b/src/lib/components/filters/filters.svelte
@@ -61,6 +61,9 @@
     function toggleDropdown() {
         showFiltersDesktop = !showFiltersDesktop;
     }
+    function toggleMobileModal() {
+        showFiltersMobile = !showFiltersMobile;
+    }
 </script>
 
 <div class="is-not-mobile">
@@ -103,15 +106,20 @@
 </div>
 
 <div class="is-only-mobile">
-    <Button secondary on:click={() => (showFiltersMobile = !showFiltersMobile)} {fullWidthMobile}>
-        <i class="icon-filter u-opacity-50" />
-        Filters
-        {#if applied > 0}
-            <span class="inline-tag">
-                {applied}
-            </span>
-        {/if}
-    </Button>
+    <slot name="mobile" {disabled} toggle={toggleMobileModal}>
+        <Button
+            secondary
+            on:click={() => (showFiltersMobile = !showFiltersMobile)}
+            {fullWidthMobile}>
+            <i class="icon-filter u-opacity-50" />
+            Filters
+            {#if applied > 0}
+                <span class="inline-tag">
+                    {applied}
+                </span>
+            {/if}
+        </Button>
+    </slot>
 
     <Modal
         title="Filters"
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 a352292aa..e9e81e168 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
@@ -170,42 +170,25 @@
         </div>
     </div>
 
-    <div class="u-flex u-flex-vertical u-gap-16 u-margin-block-start-16 is-only-mobile">
-        <div class=" u-flex u-gap-16">
-            <div class="u-flex-basis-50-percent">
-                <ViewSelector
-                    view={View.Table}
-                    {columns}
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile
-                    fullWidthMobile />
-            </div>
-            <div class="u-flex-basis-50-percent">
-                <Filters query={data.query} {columns} fullWidthMobile singleCondition />
-            </div>
-        </div>
-        <Button
-            event="execute_function"
-            href={`${base}/console/project-${$project.$id}/functions/function-${$func.$id}/executions/execute-function`}
-            fullWidthMobile>
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Execute now</span>
-        </Button>
-        <div>
-            <TagList />
-            {#if $tags?.length}
-                <div style="flex-basis:1px; background-color:hsl(var(--color-border)); width: 1px">
-                </div>
-                <Button
-                    text
-                    on:click={() => {
-                        queries.clearAll();
-                        queries.apply();
-                    }}>
-                    Clear all
+    <div class="u-flex u-main-space-between u-margin-block-start-16 is-only-mobile">
+        <Filters query={data.query} {columns}>
+            <svelte:fragment slot="mobile" let:disabled let:toggle>
+                <Button text on:click={toggle} {disabled} ariaLabel="open filter" noMargin>
+                    <span class="icon-filter-line" />
+                    <span class="text">Filters</span>
+                    {#if $tags?.length}
+                        <span class="inline-tag">{$tags?.length}</span>
+                    {/if}
                 </Button>
-            {/if}
+            </svelte:fragment>
+        </Filters>
+        <div class=" u-flex u-gap-16">
+            <ViewSelector view={View.Table} {columns} hideView allowNoColumns />
+            <Button
+                event="execute_function"
+                href={`${base}/console/project-${$project.$id}/functions/function-${$func.$id}/executions/execute-function`}>
+                <span class="text">Execute</span>
+            </Button>
         </div>
     </div>