From 5facd389d972031ba709dc548853413ac89a7cb6 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 30 Oct 2023 09:51:54 -0700
Subject: [PATCH 1/3] Refactor filters into a reusable component

---
 .../components/filters}/content.svelte           | 15 +++++++++------
 .../components/filters}/filters.svelte           | 16 ++++++++++++++--
 src/lib/components/filters/index.ts              |  1 +
 .../components/filters}/store.ts                 | 12 ++----------
 src/lib/components/viewSelector.svelte           | 10 +---------
 src/lib/helpers/load.ts                          |  4 ++++
 src/lib/helpers/types.ts                         | 10 ++++++++++
 src/lib/layout/gridHeader.svelte                 |  2 +-
 .../database-[database]/[[page]]/store.ts        | 16 +++++-----------
 .../collection-[collection]/+page.svelte         |  9 +++++----
 .../collection-[collection]/+page.ts             |  7 ++++---
 .../collection-[collection]/store.ts             |  9 +--------
 .../collection-[collection]/table.svelte         |  3 ++-
 .../databases/database-[database]/store.ts       | 10 +++++-----
 .../console/project-[project]/databases/store.ts | 10 +++++-----
 15 files changed, 69 insertions(+), 65 deletions(-)
 rename src/{routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters) => lib/components/filters}/content.svelte (93%)
 rename src/{routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters) => lib/components/filters}/filters.svelte (84%)
 create mode 100644 src/lib/components/filters/index.ts
 rename src/{routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters) => lib/components/filters}/store.ts (84%)

diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/content.svelte b/src/lib/components/filters/content.svelte
similarity index 93%
rename from src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/content.svelte
rename to src/lib/components/filters/content.svelte
index 19b464b679..736f54dc0d 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/content.svelte
+++ b/src/lib/components/filters/content.svelte
@@ -4,8 +4,11 @@
     import InputText from '$lib/elements/forms/inputText.svelte';
     import { Query } from '@appwrite.io/console';
     import { createEventDispatcher } from 'svelte';
-    import { columns } from '../store';
-    import { tags, type Column, type Operator, queries } from './store';
+    import { tags, type Operator, queries } from './store';
+    import type { Column } from '$lib/helpers/types';
+    import type { Writable } from 'svelte/store';
+
+    export let columns: Writable<Column[]>;
 
     const dispatch = createEventDispatcher<{
         clear: void;
@@ -31,22 +34,22 @@
         'greater than': {
             toQuery: (attr, input) => Query.greaterThan(attr, Number(input)),
             toTag: (attribute, input) => `**${attribute}** greater than **${input}**`,
-            types: ['integer', 'double']
+            types: ['integer', 'double', 'datetime']
         },
         'greater than or equal to': {
             toQuery: (attr, input) => Query.greaterThanEqual(attr, Number(input)),
             toTag: (attribute, input) => `**${attribute}** greater than or equal to **${input}**`,
-            types: ['integer', 'double']
+            types: ['integer', 'double', 'datetime']
         },
         'less than': {
             toQuery: Query.lessThan,
             toTag: (attribute, input) => `**${attribute}** less than **${input}**`,
-            types: ['integer', 'double']
+            types: ['integer', 'double', 'datetime']
         },
         'less than or equal to': {
             toQuery: Query.lessThanEqual,
             toTag: (attribute, input) => `**${attribute}** less than or equal to **${input}**`,
-            types: ['integer', 'double']
+            types: ['integer', 'double', 'datetime']
         },
         equal: {
             toQuery: Query.equal,
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/filters.svelte b/src/lib/components/filters/filters.svelte
similarity index 84%
rename from src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/filters.svelte
rename to src/lib/components/filters/filters.svelte
index 7aa33e4972..cd2f8bfd99 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/filters.svelte
+++ b/src/lib/components/filters/filters.svelte
@@ -2,8 +2,16 @@
     import { beforeNavigate } from '$app/navigation';
     import { Drop, Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
+    import type { Column } from '$lib/helpers/types';
+    import type { Writable } from 'svelte/store';
     import Content from './content.svelte';
-    import { queries, queriesAreDirty, tags } from './store';
+    import { queries, queriesAreDirty, queryParamToMap, tags } from './store';
+
+    export let query = '[]';
+    export let columns: Writable<Column[]>;
+
+    const parsedQueries = queryParamToMap(query);
+    queries.set(parsedQueries);
 
     // We need to separate them so we don't trigger Drop's handlers
     let showFiltersDesktop = false;
@@ -33,6 +41,7 @@
             <div class="dropped card">
                 <p>Apply filter rules to refine the table view</p>
                 <Content
+                    {columns}
                     on:apply={(e) => (applied = e.detail.applied)}
                     on:clear={() => (applied = 0)} />
                 <hr />
@@ -61,7 +70,10 @@
         description="Apply filter rules to refine the table view"
         bind:show={showFiltersMobile}
         size="big">
-        <Content on:apply={(e) => (applied = e.detail.applied)} on:clear={() => (applied = 0)} />
+        <Content
+            {columns}
+            on:apply={(e) => (applied = e.detail.applied)}
+            on:clear={() => (applied = 0)} />
         <svelte:fragment slot="footer">
             <Button text on:click={queries.clearAll}>Clear all</Button>
             <Button on:click={queries.apply} disabled={!$queriesAreDirty}>Apply</Button
diff --git a/src/lib/components/filters/index.ts b/src/lib/components/filters/index.ts
new file mode 100644
index 0000000000..e2684f988f
--- /dev/null
+++ b/src/lib/components/filters/index.ts
@@ -0,0 +1 @@
+export { default as filters } from './filters.svelte';
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/store.ts b/src/lib/components/filters/store.ts
similarity index 84%
rename from src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/store.ts
rename to src/lib/components/filters/store.ts
index 48d971e077..aa027c74fe 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/store.ts
+++ b/src/lib/components/filters/store.ts
@@ -1,17 +1,9 @@
 import { goto } from '$app/navigation';
 
-import { derived, get, writable, type Writable } from 'svelte/store';
-import type { columns } from '../store';
+import { derived, get, writable } from 'svelte/store';
 import { page } from '$app/stores';
 import deepEqual from 'deep-equal';
-
-const columnTypes = ['string', 'integer', 'double', 'boolean', 'datetime', 'relationship'] as const;
-type ColumnType = (typeof columnTypes)[number];
-
-type StoreValues<Store> = Store extends Writable<infer T> ? T : never;
-export type Column = Omit<StoreValues<typeof columns>[number], 'type'> & {
-    type: ColumnType;
-};
+import type { Column, ColumnType } from '$lib/helpers/types';
 
 export type Operator = {
     toTag: (attribute: string, input?: string | number) => string;
diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte
index c5987d501c..0ece86889c 100644
--- a/src/lib/components/viewSelector.svelte
+++ b/src/lib/components/viewSelector.svelte
@@ -1,12 +1,3 @@
-<script context="module" lang="ts">
-    export type Column = {
-        id: string;
-        title: string;
-        show: boolean;
-        width?: number;
-    };
-</script>
-
 <script lang="ts">
     import { Button, InputChoice } from '$lib/elements/forms';
     import { DropList } from '.';
@@ -16,6 +7,7 @@
     import { onMount } from 'svelte';
     import { View } from '$lib/helpers/load';
     import { tooltip } from '$lib/actions/tooltip';
+    import type { Column } from '$lib/helpers/types';
 
     export let columns: Writable<Column[]>;
     export let view: View;
diff --git a/src/lib/helpers/load.ts b/src/lib/helpers/load.ts
index 6478fcd9f7..2b31035078 100644
--- a/src/lib/helpers/load.ts
+++ b/src/lib/helpers/load.ts
@@ -32,6 +32,10 @@ export function getSearch(url: URL): string | undefined {
     return url.searchParams.get('search') ?? undefined;
 }
 
+export function getQuery(url: URL): string | undefined {
+    return url.searchParams.get('query') ?? undefined;
+}
+
 type TabElement = { href: string; title: string; hasChildren?: boolean };
 
 export function isTabSelected(
diff --git a/src/lib/helpers/types.ts b/src/lib/helpers/types.ts
index e0e822c271..b6d02e7a17 100644
--- a/src/lib/helpers/types.ts
+++ b/src/lib/helpers/types.ts
@@ -12,3 +12,13 @@ export function isHTMLInputElement(el: unknown): el is HTMLInputElement {
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 export type Prettify<T> = T & {};
+
+const columnTypes = ['string', 'integer', 'double', 'boolean', 'datetime', 'relationship'] as const;
+export type ColumnType = (typeof columnTypes)[number];
+export type Column = {
+    id: string;
+    title: string;
+    type: ColumnType;
+    show: boolean;
+    width?: number;
+};
diff --git a/src/lib/layout/gridHeader.svelte b/src/lib/layout/gridHeader.svelte
index 81b9b42d10..27b478ac87 100644
--- a/src/lib/layout/gridHeader.svelte
+++ b/src/lib/layout/gridHeader.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Heading, ViewSelector } from '$lib/components';
     import type { View } from '$lib/helpers/load';
-    import type { Column } from '$lib/components/viewSelector.svelte';
+    import type { Column } from '$lib/helpers/types';
     import type { Writable } from 'svelte/store';
 
     export let title: string;
diff --git a/src/routes/console/project-[project]/databases/database-[database]/[[page]]/store.ts b/src/routes/console/project-[project]/databases/database-[database]/[[page]]/store.ts
index cbe1ca5bfd..58d166cd28 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/[[page]]/store.ts
+++ b/src/routes/console/project-[project]/databases/database-[database]/[[page]]/store.ts
@@ -1,15 +1,9 @@
+import type { Column } from '$lib/helpers/types';
 import { writable } from 'svelte/store';
 
-export type Column = {
-    id: string;
-    title: string;
-    show: boolean;
-    width?: number;
-};
-
 export const columns = writable<Column[]>([
-    { id: '$id', title: 'Database ID', show: true, width: 150 },
-    { id: 'name', title: 'Name', show: true, width: 120 },
-    { id: '$createdAt', title: 'Created', show: true, width: 120 },
-    { id: '$updatedAt', title: 'Updated', show: true, width: 120 }
+    { id: '$id', title: 'Database ID', type: 'string', show: true, width: 150 },
+    { id: 'name', title: 'Name', type: 'string', show: true, width: 120 },
+    { id: '$createdAt', title: 'Created', type: 'string', show: true, width: 120 },
+    { id: '$updatedAt', title: 'Updated', type: 'string', show: true, width: 120 }
 ]);
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index 60fe0cf3e5..632c492363 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { Empty, EmptySearch, Heading, PaginationWithLimit } from '$lib/components';
+    import Filters from '$lib/components/filters/filters.svelte';
+    import { hasPageQueries, queries } from '$lib/components/filters/store';
     import ViewSelector from '$lib/components/viewSelector.svelte';
     import { Button } from '$lib/elements/forms';
+    import type { ColumnType } from '$lib/helpers/types';
     import { Container } from '$lib/layout';
     import { preferences } from '$lib/stores/preferences';
     import { wizard } from '$lib/stores/wizard';
     import type { PageData } from './$types';
-    import Filters from './(filters)/filters.svelte';
-    import { hasPageQueries, queries } from './(filters)/store';
     import CreateAttributeDropdown from './attributes/createAttributeDropdown.svelte';
     import type { Option } from './attributes/store';
     import CreateAttribute from './createAttribute.svelte';
@@ -27,7 +28,7 @@
         $collection.attributes.map((attribute) => ({
             id: attribute.key,
             title: attribute.key,
-            type: attribute.type,
+            type: attribute.type as ColumnType,
             show: selected?.includes(attribute.key) ?? true
         }))
     );
@@ -54,7 +55,7 @@
             </Button>
         </div>
 
-        <Filters />
+        <Filters query={data.query} {columns} />
 
         <div class="u-flex u-main-end u-gap-16">
             <ViewSelector
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.ts
index 9161f4f22d..e020d69d25 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.ts
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.ts
@@ -1,10 +1,9 @@
 import { Dependencies, PAGE_LIMIT } from '$lib/constants';
-import { getLimit, getPage, getView, pageToOffset, View } from '$lib/helpers/load';
+import { getLimit, getPage, getQuery, getView, pageToOffset, View } from '$lib/helpers/load';
 import { sdk } from '$lib/stores/sdk';
 import { Query } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
-
-import { queries, queryParamToMap } from './(filters)/store';
+import { queries, queryParamToMap } from '$lib/components/filters/store';
 
 export const load: PageLoad = async ({ params, depends, url, route }) => {
     depends(Dependencies.DOCUMENTS);
@@ -12,6 +11,7 @@ export const load: PageLoad = async ({ params, depends, url, route }) => {
     const limit = getLimit(url, route, PAGE_LIMIT);
     const view = getView(url, route, View.Grid);
     const offset = pageToOffset(page, limit);
+    const query = getQuery(url);
 
     const paramQueries = url.searchParams.get('query');
     const parsedQueries = queryParamToMap(paramQueries || '[]');
@@ -21,6 +21,7 @@ export const load: PageLoad = async ({ params, depends, url, route }) => {
         offset,
         limit,
         view,
+        query,
         documents: await sdk.forProject.databases.listDocuments(
             params.database,
             params.collection,
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/store.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/store.ts
index 600a216112..4408ca1eaf 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/store.ts
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/store.ts
@@ -1,4 +1,5 @@
 import { page } from '$app/stores';
+import type { Column } from '$lib/helpers/types';
 import type { Models } from '@appwrite.io/console';
 import { derived, writable } from 'svelte/store';
 
@@ -16,14 +17,6 @@ export type Attributes =
 type Collection = Omit<Models.Collection, 'attributes'> & {
     attributes: Array<Attributes>;
 };
-export type Column = {
-    id: string;
-    title: string;
-    show: boolean;
-    type?: string;
-    twoWay?: string;
-    width?: number;
-};
 
 export const collection = derived(page, ($page) => $page.data.collection as Collection);
 export const attributes = derived(
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
index 8e3fed2d69..03b1def2d2 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -29,6 +29,7 @@
     import RelationshipsModal from './relationshipsModal.svelte';
     import { attributes, collection, columns } from './store';
     import { clickOnEnter } from '$lib/helpers/a11y';
+    import type { ColumnType } from '$lib/helpers/types';
 
     export let data: PageData;
 
@@ -89,7 +90,7 @@
             $collection.attributes.map((attribute) => ({
                 id: attribute.key,
                 title: attribute.key,
-                type: attribute.type,
+                type: attribute.type as ColumnType,
                 show: selected?.includes(attribute.key) ?? true
             }))
         );
diff --git a/src/routes/console/project-[project]/databases/database-[database]/store.ts b/src/routes/console/project-[project]/databases/database-[database]/store.ts
index f023e8738f..35f8a9c595 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/store.ts
+++ b/src/routes/console/project-[project]/databases/database-[database]/store.ts
@@ -1,5 +1,5 @@
 import { page } from '$app/stores';
-import type { Column } from '$lib/components/viewSelector.svelte';
+import type { Column } from '$lib/helpers/types';
 import type { Models } from '@appwrite.io/console';
 import { derived, writable } from 'svelte/store';
 
@@ -7,8 +7,8 @@ export const database = derived(page, ($page) => $page.data.database as Models.D
 export const showCreate = writable(false);
 
 export const columns = writable<Column[]>([
-    { id: '$id', title: 'Collection ID', show: true, width: 150 },
-    { id: 'name', title: 'Name', show: true, width: 120 },
-    { id: '$createdAt', title: 'Created', show: true, width: 120 },
-    { id: '$updatedAt', title: 'Updated', show: true, width: 120 }
+    { id: '$id', title: 'Collection ID', type: 'string', show: true, width: 150 },
+    { id: 'name', title: 'Name', type: 'string', show: true, width: 120 },
+    { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 120 },
+    { id: '$updatedAt', title: 'Updated', type: 'datetime', show: true, width: 120 }
 ]);
diff --git a/src/routes/console/project-[project]/databases/store.ts b/src/routes/console/project-[project]/databases/store.ts
index e482977447..ff4697d56a 100644
--- a/src/routes/console/project-[project]/databases/store.ts
+++ b/src/routes/console/project-[project]/databases/store.ts
@@ -1,9 +1,9 @@
-import type { Column } from '$lib/components/viewSelector.svelte';
+import type { Column } from '$lib/helpers/types';
 import { writable } from 'svelte/store';
 
 export const columns = writable<Column[]>([
-    { id: '$id', title: 'Database ID', show: true, width: 150 },
-    { id: 'name', title: 'Name', show: true, width: 120 },
-    { id: '$createdAt', title: 'Created', show: true, width: 120 },
-    { id: '$updatedAt', title: 'Updated', show: true, width: 120 }
+    { id: '$id', title: 'Database ID', type: 'string', show: true, width: 150 },
+    { id: 'name', title: 'Name', type: 'string', show: true, width: 120 },
+    { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 120 },
+    { id: '$updatedAt', title: 'Updated', type: 'datetime', show: true, width: 120 }
 ]);

From 496dd4fe8eced3407d75b7a41d20602967a2993d Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 30 Oct 2023 10:19:54 -0700
Subject: [PATCH 2/3] Fix filtering on falsy values

---
 src/lib/components/filters/content.svelte | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/filters/content.svelte b/src/lib/components/filters/content.svelte
index 736f54dc0d..d960cc5bd9 100644
--- a/src/lib/components/filters/content.svelte
+++ b/src/lib/components/filters/content.svelte
@@ -100,19 +100,17 @@
 
     // This Map is keyed by tags, and has a query as the value
     function addFilter() {
-        if (column && operator) {
-            queries.addFilter({ column, operator, value });
-            value = null;
-        }
+        if (!column || !operator) return;
+
+        queries.addFilter({ column, operator, value: value ?? '' });
+        value = null;
     }
 
     function tagFormat(node: HTMLElement) {
         node.innerHTML = node.innerHTML.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>');
     }
 
-    $: isDisabled = (function getDisabled() {
-        return !operator || (!operator?.hideInput && !value);
-    })();
+    $: isDisabled = !operator;
 </script>
 
 <div>

From e76b9aec4b1a73fe2a3a798dea8842f25ad3268c Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 30 Oct 2023 10:20:23 -0700
Subject: [PATCH 3/3] Fix filtering on booleans

---
 src/lib/components/filters/content.svelte | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/lib/components/filters/content.svelte b/src/lib/components/filters/content.svelte
index d960cc5bd9..6da14dcc69 100644
--- a/src/lib/components/filters/content.svelte
+++ b/src/lib/components/filters/content.svelte
@@ -135,6 +135,16 @@
             <div class="u-margin-block-start-8">
                 {#if column.type === 'integer' || column.type === 'double'}
                     <InputNumber id="value" bind:value placeholder="Enter value" />
+                {:else if column.type === 'boolean'}
+                    <InputSelect
+                        id="value"
+                        placeholder="Select a value"
+                        required={true}
+                        options={[
+                            { label: 'True', value: true },
+                            { label: 'False', value: false }
+                        ].filter(Boolean)}
+                        bind:value />
                 {:else}
                     <InputText id="value" bind:value placeholder="Enter value" />
                 {/if}