From 30c13eaf05e638afcfbb2b24182bbedabca490c7 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 26 Jul 2024 17:20:37 +0200
Subject: [PATCH] feat: mobile view

---
 src/lib/components/filters/filters.svelte     |   2 +
 src/lib/elements/pill.svelte                  |  12 +-
 .../executions/+page.svelte                   | 172 ++++++++++++------
 3 files changed, 132 insertions(+), 54 deletions(-)

diff --git a/src/lib/components/filters/filters.svelte b/src/lib/components/filters/filters.svelte
index 793864e32..eca7e5f27 100644
--- a/src/lib/components/filters/filters.svelte
+++ b/src/lib/components/filters/filters.svelte
@@ -105,9 +105,11 @@
                   operatorKey !== ValidOperators.IsNull);
 
     function toggleDropdown() {
+        dispatch('toggle', { show: !showFiltersDesktop });
         showFiltersDesktop = !showFiltersDesktop;
     }
     function toggleMobileModal() {
+        dispatch('toggle', { show: !showFiltersMobile });
         showFiltersMobile = !showFiltersMobile;
     }
 </script>
diff --git a/src/lib/elements/pill.svelte b/src/lib/elements/pill.svelte
index 1c2ef4e6f..c5d129b6f 100644
--- a/src/lib/elements/pill.svelte
+++ b/src/lib/elements/pill.svelte
@@ -12,6 +12,9 @@
     export let external = false;
     export let href: string = null;
     export let event: string = null;
+    export let style = '';
+    let classes = '';
+    export { classes as class };
 
     function track() {
         if (!event) {
@@ -26,10 +29,11 @@
 
 {#if href}
     <a
+        {style}
         {href}
         target={external ? '_blank' : '_self'}
         rel={external ? 'noopener noreferrer' : ''}
-        class="tag"
+        class="tag {classes}"
         class:is-disabled={disabled}
         class:is-selected={selected}
         class:is-success={success}
@@ -42,9 +46,10 @@
     <button
         on:click
         on:click={track}
+        {style}
         {disabled}
         type={submit ? 'submit' : 'button'}
-        class="tag"
+        class="tag {classes}"
         class:is-disabled={disabled}
         class:is-selected={selected}
         class:is-success={success}
@@ -55,7 +60,8 @@
     </button>
 {:else}
     <div
-        class="tag"
+        class="tag {classes}"
+        {style}
         class:is-disabled={disabled}
         class:is-selected={selected}
         class:is-success={success}
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 ca8c26ff8..86b420ea1 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
@@ -2,7 +2,7 @@
     import { afterNavigate, invalidate } from '$app/navigation';
     import { Alert, EmptySearch, PaginationWithLimit, ViewSelector } from '$lib/components';
     import { BillingPlan, Dependencies } from '$lib/constants';
-    import { Button, FormList } from '$lib/elements/forms';
+    import { Button, FormList, InputSelect } from '$lib/elements/forms';
     import { hoursToDays } from '$lib/helpers/date';
     import { Container, ContainerHeader } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
@@ -22,6 +22,7 @@
     import { addFilter, tags, ValidOperators } from '$lib/components/filters/store';
     import QuickFilters from './quickFilters.svelte';
     import InputText from '$lib/elements/forms/inputText.svelte';
+    import { Pill } from '$lib/elements';
 
     export let data;
 
@@ -125,7 +126,21 @@
             type: 'integer',
             show: true,
             width: 80,
-            format: 'integer'
+            format: 'integer',
+            elements: [
+                {
+                    value: 1,
+                    label: 'more than 1 second'
+                },
+                {
+                    value: 5,
+                    label: 'more than 5 seconds'
+                },
+                {
+                    value: 30,
+                    label: 'more than 30 seconds'
+                }
+            ]
         }
     ]);
 
@@ -133,8 +148,19 @@
     let pathQuery: string;
     const idColumn = $columns.find((col) => col.id === '$id');
     let idQuery: string;
+    const durationColumn = $columns.find((col) => col.id === 'duration');
+    const durationOptions = [
+        ...durationColumn.elements,
+        {
+            value: null,
+            label: 'Select duration'
+        }
+    ] as { value: string; label: string }[];
+    let durationQuery: string = null;
 
+    let showMobileFilters = false;
     onMount(() => {
+        data?.query ? (showMobileFilters = true) : (showMobileFilters = false);
         return sdk.forConsole.client.subscribe('console', (response) => {
             if (response.events.includes('functions.*.executions.*')) {
                 invalidate(Dependencies.EXECUTIONS);
@@ -159,6 +185,11 @@
             tagList.forEach((tag) => queries.removeFilter(tag));
             addFilter($columns, idColumn.id, ValidOperators.StartsWith, idQuery);
         }
+        if (durationQuery) {
+            const tagList = $tags.filter((tag) => tag.tag.includes(durationColumn.title));
+            tagList.forEach((tag) => queries.removeFilter(tag));
+            addFilter($columns, durationColumn.id, ValidOperators.GreaterThan, durationQuery);
+        }
         queries.apply();
     }
 </script>
@@ -203,8 +234,12 @@
                 let:toggle
                 quickFilters
                 clearOnClick
-                enableApply={!!pathQuery || !!idQuery}
-                on:apply={applyFilters}>
+                enableApply={!!pathQuery || !!idQuery || !!durationQuery}
+                on:apply={applyFilters}
+                on:toggle={() => {
+                    pathQuery = idQuery = '';
+                    durationQuery = null;
+                }}>
                 <div class="u-flex u-gap-4">
                     <Button text on:click={toggle} {disabled} noMargin ariaLabel="open filter">
                         <span class="icon-filter-line" />
@@ -223,6 +258,11 @@
                                 label={pathColumn.title}
                                 id={pathColumn.id}
                                 placeholder="/" />
+                            <InputSelect
+                                id={durationColumn.id}
+                                label={durationColumn.title}
+                                options={durationOptions}
+                                bind:value={durationQuery} />
                             <InputText
                                 bind:value={idQuery}
                                 label={idColumn.title}
@@ -247,55 +287,85 @@
             </Button>
         </div>
     </div>
-
-    <div class="u-flex u-main-space-between u-margin-block-start-16 is-only-mobile">
-        <!-- <QuickFilters {columns} /> -->
-
-        <Filters
-            query={data.query}
-            {columns}
-            quickFilters
-            clearOnClick
-            enableApply={!!pathQuery || !!idQuery}
-            on:apply={applyFilters}>
-            <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">More filters</span>
-                    {#if tagCount}
-                        <span class="inline-tag">{tagCount}</span>
-                    {/if}
-                </Button>
-            </svelte:fragment>
-            <svelte:fragment slot="quick">
-                <p>Apply <b>quick</b> filter rules to refine the table view</p>
-                <form on:submit|preventDefault class="u-margin-block-start-16">
-                    <FormList gap={16}>
-                        <InputText
-                            bind:value={pathQuery}
-                            label={pathColumn.title}
-                            id={pathColumn.id}
-                            placeholder="/" />
-                        <InputText
-                            bind:value={idQuery}
-                            label={idColumn.title}
-                            id={idColumn.id}
-                            placeholder="Enter ID" />
-                    </FormList>
-                </form>
-                <ul class="u-flex u-flex-wrap u-cross-center u-gap-8 u-margin-block-start-16">
-                    <TagList />
-                </ul>
-            </svelte:fragment>
-        </Filters>
-        <div class=" u-flex u-gap-16">
-            <ViewSelector view={View.Table} {columns} hideView allowNoColumns />
+    <div class="is-only-mobile">
+        <div class="u-flex u-main-space-between u-margin-block-start-16">
             <Button
-                event="execute_function"
-                href={`${base}/project-${$project.$id}/functions/function-${$func.$id}/executions/execute-function`}
-                disabled={!$func.$id || !$func?.deployment}>
-                <span class="text">Execute</span>
+                text
+                on:click={() => (showMobileFilters = !showMobileFilters)}
+                ariaLabel="toggle filters"
+                noMargin>
+                <span class="icon-filter-line" />
+                <span class="text">Filters</span>
             </Button>
+
+            <div class=" u-flex u-gap-16">
+                <ViewSelector view={View.Table} {columns} hideView allowNoColumns />
+                <Button
+                    event="execute_function"
+                    href={`${base}/project-${$project.$id}/functions/function-${$func.$id}/executions/execute-function`}
+                    disabled={!$func.$id || !$func?.deployment}>
+                    <span class="text">Execute</span>
+                </Button>
+            </div>
+        </div>
+        <div
+            class:u-hide={!showMobileFilters}
+            class:u-flex={showMobileFilters}
+            class=" u-gap-8 u-flex-wrap u-margin-block-start-16">
+            <QuickFilters {columns} />
+
+            <Filters
+                query={data.query}
+                {columns}
+                quickFilters
+                clearOnClick
+                enableApply={!!pathQuery || !!idQuery || !!durationQuery}
+                on:apply={applyFilters}
+                on:toggle={() => {
+                    pathQuery = idQuery = '';
+                    durationQuery = null;
+                }}>
+                <svelte:fragment slot="mobile" let:disabled let:toggle>
+                    <Pill
+                        button
+                        on:click={toggle}
+                        {disabled}
+                        class="u-flex u-gap-4 u-cross-center"
+                        style="--p-tag-content-height: auto">
+                        <!-- <span class="icon-filter-line" /> -->
+                        <span class="text">More filters</span>
+                        {#if tagCount}
+                            <span class="inline-tag">{tagCount}</span>
+                        {/if}
+                        <span class="icon-cheveron-down" />
+                    </Pill>
+                </svelte:fragment>
+                <svelte:fragment slot="quick">
+                    <p>Apply <b>quick</b> filter rules to refine the table view</p>
+                    <form on:submit|preventDefault class="u-margin-block-start-16">
+                        <FormList gap={16}>
+                            <InputText
+                                bind:value={pathQuery}
+                                label={pathColumn.title}
+                                id={pathColumn.id}
+                                placeholder="/" />
+                            <InputSelect
+                                id={durationColumn.id}
+                                label={durationColumn.title}
+                                options={durationOptions}
+                                bind:value={durationQuery} />
+                            <InputText
+                                bind:value={idQuery}
+                                label={idColumn.title}
+                                id={idColumn.id}
+                                placeholder="Enter ID" />
+                        </FormList>
+                    </form>
+                    <ul class="u-flex u-flex-wrap u-cross-center u-gap-8 u-margin-block-start-16">
+                        <TagList />
+                    </ul>
+                </svelte:fragment>
+            </Filters>
         </div>
     </div>