Merge pull request #2338 from appwrite/spatial-type-attributes

Author: ItzNotABug

package.json

@@ -22,7 +22,7 @@
     },
     "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
-        "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@6031134",
+        "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@7747562",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@f4da718",
         "@appwrite.io/pink-legacy": "^1.0.3",

pnpm-lock.yaml

@@ -6,10 +6,11 @@
         InputText,
         InputTags,
         InputSelectCheckbox,
-        InputDateTime
+        InputDateTime,
+        InputPoint
     } from '$lib/elements/forms';
     import { onMount, createEventDispatcher } from 'svelte';
-    import { operators, addFilter, queries, tags } from './store';
+    import { operators, addFilter, queries, tags, ValidOperators } from './store';
     import type { Column } from '$lib/helpers/types';
     import type { Writable } from 'svelte/store';
     import { TagList } from '.';
@@ -18,6 +19,7 @@
 
     let {
         value = $bindable(null),
+        distanceValue = $bindable(null),
         columns,
         columnId = $bindable(null),
         arrayValues = $bindable([]),
@@ -27,6 +29,7 @@
         // We cast to any to not cause type errors in the input components
         /* eslint  @typescript-eslint/no-explicit-any: 'off' */
         value?: any;
+        distanceValue?: number | null;
         columns: Writable<Column[]>;
         columnId?: string | null;
         arrayValues?: string[];
@@ -61,21 +64,57 @@
         }));
     });
 
+    // Check if the current operator is a distance-based operator
+    let isDistanceOperator = $derived(
+        operatorKey &&
+            [
+                ValidOperators.DistanceEqual,
+                ValidOperators.DistanceNotEqual,
+                ValidOperators.DistanceGreaterThan,
+                ValidOperators.DistanceLessThan
+            ].includes(operatorKey as ValidOperators)
+    );
+
     onMount(() => {
         value = column?.array ? [] : null;
         if (column?.type === 'datetime') {
             const now = new Date();
             value = now.toISOString().slice(0, 16);
         }
+        // Initialize spatial data with default values
+        if (column?.type === 'point') {
+            value = [0, 0];
+        } else if (column?.type === 'linestring') {
+            value = [
+                [0, 0],
+                [1, 1]
+            ];
+        } else if (column?.type === 'polygon') {
+            value = [
+                [
+                    [0, 0],
+                    [1, 1],
+                    [2, 2],
+                    [0, 0]
+                ]
+            ];
+        }
     });
 
     const dispatch = createEventDispatcher<{ clear: void; apply: { applied: number } }>();
 
     function addFilterAndReset() {
-        addFilter(columnsArray, columnId, operatorKey, value, arrayValues);
+        // For distance operators, pass the distance as a separate parameter
+        if (isDistanceOperator && distanceValue !== null && value !== null) {
+            addFilter(columnsArray, columnId, operatorKey, value, arrayValues, distanceValue);
+        } else {
+            addFilter(columnsArray, columnId, operatorKey, value, arrayValues);
+        }
+
         columnId = null;
         operatorKey = null;
         value = null;
+        distanceValue = null;
         arrayValues = [];
         dispatch('apply', { applied: appliedTags.length });
         if (singleCondition) {
@@ -143,11 +182,29 @@
                         {#key value}
                             <InputDateTime id="value" bind:value step={60} type="datetime-local" />
                         {/key}
+                    {:else if column.type === 'point' || column.type === 'linestring' || column.type === 'polygon'}
+                        <InputPoint
+                            values={value || [0, 0]}
+                            onChangePoint={(index, newValue) => {
+                                if (!value) value = [0, 0];
+                                value[index] = newValue;
+                            }} />
                     {:else}
                         <InputText id="value" bind:value placeholder="Enter value" />
                     {/if}
                 </ul>
             {/if}
+
+            {#if isDistanceOperator}
+                <div class="u-margin-block-start-8">
+                    <InputNumber
+                        id="distance"
+                        bind:value={distanceValue}
+                        placeholder="Enter distance"
+                        step={0.001}
+                        required />
+                </div>
+            {/if}
         {/if}
         {#if !singleCondition}
             <Button text disabled={isDisabled} class="u-margin-block-start-4" submit>

src/lib/components/filters/content.svelte

@@ -36,6 +36,7 @@
 
     /* eslint  @typescript-eslint/no-explicit-any: 'off' */
     let value: any = null;
+    let distanceValue: number | null = null;
     let selectedColumn: string | null = null;
     let operatorKey: string | null = null;
     let arrayValues: string[] = [];
@@ -46,6 +47,16 @@
 
     $: filtersAppliedCount = $tags.length;
 
+    // Check if the current operator is a distance-based operator
+    $: isDistanceOperator =
+        operatorKey &&
+        [
+            ValidOperators.DistanceEqual,
+            ValidOperators.DistanceNotEqual,
+            ValidOperators.DistanceGreaterThan,
+            ValidOperators.DistanceLessThan
+        ].includes(operatorKey as ValidOperators);
+
     beforeNavigate(() => {
         showFiltersDesktop = false;
         showFiltersMobile = false;
@@ -54,6 +65,8 @@
 
     function clearAll() {
         selectedColumn = null;
+        value = null;
+        distanceValue = null;
         queries.clearAll();
         if (clearOnClick) {
             trackEvent(Submit.FilterClear, { source: analyticsSource });
@@ -73,9 +86,15 @@
                 value ||
                 arrayValues.length)
         ) {
-            addFilter($columns, selectedColumn, operatorKey, value, arrayValues);
+            // For distance operators, pass the distance as a separate parameter
+            if (isDistanceOperator && distanceValue !== null && value !== null) {
+                addFilter($columns, selectedColumn, operatorKey, value, arrayValues, distanceValue);
+            } else {
+                addFilter($columns, selectedColumn, operatorKey, value, arrayValues);
+            }
             selectedColumn = null;
             value = null;
+            distanceValue = null;
             operatorKey = null;
             arrayValues = [];
         }
@@ -97,6 +116,7 @@
     $: if (!showFiltersDesktop && !showFiltersMobile) {
         selectedColumn = null;
         value = null;
+        distanceValue = null;
         operatorKey = null;
         arrayValues = [];
     }
@@ -163,6 +183,7 @@
                                 bind:columnId={selectedColumn}
                                 bind:operatorKey
                                 bind:value
+                                bind:distanceValue
                                 bind:arrayValues
                                 {columns}
                                 {singleCondition}
@@ -225,6 +246,7 @@
                 bind:columnId={selectedColumn}
                 bind:operatorKey
                 bind:value
+                bind:distanceValue
                 bind:arrayValues
                 {singleCondition}
                 on:apply={afterApply}