Merge pull request #654 from appwrite/feat-filters

Update Filters to not allow filtering on all columns

src/lib/components/emptyFilter.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import { EmptySearch } from '.';
+    import { queries } from './filters';
+
+    export let resource;
+</script>
+
+<EmptySearch hidePages>
+    <div class="common-section">
+        <div class="u-text-center common-section">
+            <b class="body-text-2 u-bold">Sorry, we couldn't find any {resource}.</b>
+            <p>There are no {resource} that match your filters.</p>
+        </div>
+        <div class="u-flex common-section u-main-center">
+            <Button
+                secondary
+                on:click={() => {
+                    queries.clearAll();
+                    queries.apply();
+                }}>
+                Clear filters
+            </Button>
+        </div>
+    </div>
+</EmptySearch>

src/lib/components/filters/content.svelte

@@ -118,10 +118,12 @@
         <div class="selects u-flex u-gap-8 u-margin-block-start-16">
             <InputSelect
                 id="column"
-                options={$columns.map((c) => ({
-                    label: c.title,
-                    value: c.id
-                }))}
+                options={$columns
+                    .filter((c) => c.filter !== false)
+                    .map((c) => ({
+                        label: c.title,
+                        value: c.id
+                    }))}
                 placeholder="Select column"
                 bind:value={columnId} />
             <InputSelect

src/lib/components/filters/index.ts

@@ -1 +1,2 @@
-export { default as filters } from './filters.svelte';
+export { default as Filters } from './filters.svelte';
+export { hasPageQueries, queryParamToMap, queries } from '$lib/components/filters/store';

src/lib/components/index.ts

@@ -15,6 +15,7 @@ export { default as UploadBox } from './uploadBox.svelte';
 export { default as List } from './list.svelte';
 export { default as ListItem } from './listItem.svelte';
 export { default as Empty } from './empty.svelte';
+export { default as EmptyFilter } from './emptyFilter.svelte';
 export { default as EmptySearch } from './emptySearch.svelte';
 export { default as Drop } from './drop.svelte';
 export { default as DropList } from './dropList.svelte';

src/lib/helpers/types.ts

@@ -19,6 +19,13 @@ export type Column = {
     id: string;
     title: string;
     type: ColumnType;
+    /**
+     * Set to false to hide by default
+     */
     show: boolean;
     width?: number;
+    /**
+     * Set to false to disable filtering for this column
+     */
+    filter?: boolean;
 };

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte

@@ -1,8 +1,7 @@
 <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 { Filters, hasPageQueries, queries } from '$lib/components/filters';
     import ViewSelector from '$lib/components/viewSelector.svelte';
     import { Button } from '$lib/elements/forms';
     import type { ColumnType } from '$lib/helpers/types';

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.ts

@@ -3,7 +3,7 @@ import { getLimit, getPage, getQuery, getView, pageToOffset, View } from '$lib/h
 import { sdk } from '$lib/stores/sdk';
 import { Query } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
-import { queries, queryParamToMap } from '$lib/components/filters/store';
+import { queries, queryParamToMap } from '$lib/components/filters';
 
 export const load: PageLoad = async ({ params, depends, url, route }) => {
     depends(Dependencies.DOCUMENTS);

src/routes/console/project-[project]/messaging/+page.svelte

@@ -3,6 +3,7 @@
     import { page } from '$app/stores';
     import {
         Empty,
+        EmptyFilter,
         EmptySearch,
         FloatingActionBar,
         Heading,
@@ -30,7 +31,7 @@
     import MessageStatusPill from './messageStatusPill.svelte';
     import CreateMessageDropdown from './createMessageDropdown.svelte';
     import ProviderType, { ProviderTypes } from './providerType.svelte';
-    import Filters from '$lib/components/filters/filters.svelte';
+    import { Filters, hasPageQueries } from '$lib/components/filters';
     import FailedModal from './failedModal.svelte';
 
     export let data: PageData;
@@ -183,6 +184,8 @@
             limit={data.limit}
             offset={data.offset}
             total={data.messages.total} />
+    {:else if $hasPageQueries}
+        <EmptyFilter resource="messages" />
         <!-- TODO: remove data.search != 'empty' when the API is ready with data -->
     {:else if data.search && data.search != 'empty'}
         <EmptySearch>

src/routes/console/project-[project]/messaging/+page.ts

@@ -13,7 +13,7 @@ import { messages as data, providersById } from './store';
 import type { Message } from './store';
 import { Query } from '@appwrite.io/console';
 import { sdk } from '$lib/stores/sdk';
-import { queries, queryParamToMap } from '$lib/components/filters/store';
+import { queries, queryParamToMap } from '$lib/components/filters';
 
 export const load: PageLoad = async ({ url, route }) => {
     const page = getPage(url);

src/routes/console/project-[project]/messaging/createMessageDropdown.svelte

@@ -11,7 +11,7 @@
     export let showCreateDropdown = false;
 </script>
 
-<DropList bind:show={showCreateDropdown} scrollable>
+<DropList bind:show={showCreateDropdown} scrollable placement="bottom-end">
     <slot>
         <Button on:click={() => (showCreateDropdown = !showCreateDropdown)} event="create_message">
             <span class="icon-plus" aria-hidden="true" />

src/routes/console/project-[project]/messaging/providers/+page.svelte

@@ -7,12 +7,13 @@
         SearchQuery,
         PaginationWithLimit,
         Heading,
-        ViewSelector
+        ViewSelector,
+        EmptyFilter
     } from '$lib/components';
     import { Container } from '$lib/layout';
     import type { PageData } from './$types';
     import { columns } from './store';
-    import Filters from '$lib/components/filters/filters.svelte';
+    import { Filters, hasPageQueries } from '$lib/components/filters';
     import CreateProviderDropdown from './createProviderDropdown.svelte';
     import Table from './table.svelte';
 
@@ -68,6 +69,8 @@
             limit={data.limit}
             offset={data.offset}
             total={data.providers.total} />
+    {:else if $hasPageQueries}
+        <EmptyFilter resource="providers" />
     {:else if data.search && data.search != 'empty'}
         <EmptySearch>
             <div class="u-text-center">

src/routes/console/project-[project]/messaging/providers/+page.ts

@@ -11,7 +11,7 @@ import {
 } from '$lib/helpers/load';
 import { Dependencies, PAGE_LIMIT } from '$lib/constants';
 import { providersById, type Provider } from '../store';
-import { queries, queryParamToMap } from '$lib/components/filters/store';
+import { queries, queryParamToMap } from '$lib/components/filters';
 
 const providers = Object.values(providersById);
 

src/routes/console/project-[project]/messaging/providers/createProviderDropdown.svelte

@@ -16,7 +16,7 @@
     ): value is T[keyof T] => Object.values<string>(enumType).includes(value);
 </script>
 
-<DropList bind:show={showCreateDropdown} scrollable>
+<DropList bind:show={showCreateDropdown} scrollable placement="bottom-end">
     <slot>
         <Button on:click={() => (showCreateDropdown = !showCreateDropdown)} event="create_provider">
             <span class="icon-plus" aria-hidden="true" />