filters improvements

front/js/svelte/content/tools/AppliedFilter.svelte

@@ -1,6 +1,8 @@
 <script>
-    import {createEventDispatcher} from "svelte";
+    import {createEventDispatcher, getContext} from "svelte";
+    import {previewTitle} from "../../records/Preview";
 
+    const channel = getContext("channel");
     const dispatch = createEventDispatcher();
     export let schema;
     export let operators;
@@ -8,14 +10,22 @@
     export let value;
     export let inModal;
     export let modalUrl;
+    export let records;
+    export let graph;
     // export let systemFields;
 
     let filterSplit = key.split("_");
     let operator = filterSplit[filterSplit.length - 1] ?? "eq";
-    
+
     let fieldName = key.replace("_" + operator, "");
     let filterField = schema.fields.find((f) => f.name === fieldName);
     let filterLabel = filterField?.label ?? fieldName;
+    let filterRecord = null;
+    let isReference = key.startsWith("children")
+    if (isReference) {
+        filterRecord = graph.records.find(r => r.id === value)
+
+    }
 
     function removeFilter(e, k) {
         e.preventDefault();
@@ -32,20 +42,28 @@
 </script>
 
 <span
-    class="applied-filter d-inline-block border border-primary rounded lx-small-text  me-1 px-2 py-1"
-    style="line-height:22px ;"
+        class="applied-filter d-inline-block border border-primary rounded lx-small-text  me-1 px-2 py-1"
+        style="line-height:22px ;"
 >
     <div class="d-flex align-items-center justify-content-center">
-        {filterLabel}
+    {#if isReference && filterRecord}
+         {previewTitle(channel.schemas, filterRecord)}
+
+    {:else}
+
+
+            {filterLabel}
         {operators.find((o) => o.name === operator)?.symbol ?? ""}
         {value}
+
+    {/if}
         <button
-            on:click={(e) => removeFilter(e, key)}
-            type="button"
-            class="btn-close btn-close ms-1"
-            aria-label="Close"
+                on:click={(e) => removeFilter(e, key)}
+                type="button"
+                class="btn-close btn-close ms-1"
+                aria-label="Close"
         />
-    </div>
+        </div>
 </span>
 
 <style>

front/js/svelte/content/tools/FilterFields.svelte

@@ -1,6 +1,8 @@
 <script>
     import Icon from "../../common/Icon.svelte";
     import {createEventDispatcher} from "svelte";
+    import FilterReferenceInput from "./FilterReferenceInput.svelte";
+    import Dropdown from "../../common/Dropdown.svelte";
 
     const dispatch = createEventDispatcher();
     export let schema;
@@ -8,6 +10,8 @@
     export let operators;
     export let inModal;
     export let modalUrl;
+
+    let dropdown;
     let search = "";
     let systemFieldsFiltered = systemFields;
     if (schema.type == "collection") {
@@ -15,14 +19,13 @@
     }
 
     let filterableFields = [...schema.fields, ...systemFieldsFiltered].filter(
-        (f) => !["file", "json", "tab"].includes(f.ui)
+        (f) => !["file", "json"].includes(f.info?.name ?? f.ui)
     );
-
     let selectedField;
-   
+
     let selectedInput = "";
     $: operatorsFiltered = operators.filter(
-        (o) => o.uis.includes(selectedField?.ui) || o.uis[0] == "*"
+        (o) => o.uis.includes(selectedField?.info?.name) || o.uis[0] == "*"
     );
 
     $: selectedOperator = operatorsFiltered[0];
@@ -30,16 +33,26 @@
     function addFilter(e) {
         e.preventDefault();
         let filterPrefix = "";
+        let filterKey;
         if (schema.fields.find(f => f.name === selectedField.name)) {
-            filterPrefix = "data.";
+
+            if (selectedField.info.name == "reference" && selectedOperator.name == "eq") {
+                filterPrefix = "children." + selectedField.name + ".id";
+                filterKey = `filter[${filterPrefix}]`;
+            } else {
+                filterPrefix = "data.";
+                filterKey = `filter[${filterPrefix + selectedField.name}_${selectedOperator.name}]`;
+            }
+
         }
 
-        let filterKey = `filter[${filterPrefix + selectedField.name}_${selectedOperator.name}]`;
+
         const url = new URL(modalUrl ?? window.location.href);
         url.searchParams.set("skip", "0");
         url.searchParams.set(filterKey, selectedInput);
         if (inModal) {
             dispatch("refresh", url);
+            dropdown.hide()
         } else {
             window.location = url;
         }
@@ -70,18 +83,12 @@
 </script>
 
 <div class="mx-2 d-flex align-items-center">
-    <div class="btn-group">
-        <button
-            class="btn btn-sm btn-outline-primary dropdown-toggle d-flex align-items-center"
-            type="button"
-            data-bs-toggle="dropdown"
-            data-bs-auto-close="outside"
-            aria-expanded="false"
-        >
-            <Icon icon="filter"/>
-            <span class="ms-1">Filter</span>
-        </button>
-        <div class="dropdown-menu" style="width:300px;">
+        <Dropdown bind:this={dropdown} width="300">
+            <div slot="button">
+                <Icon icon="filter"/>
+                <span class="ms-1">Filter</span>
+            </div>
+
             <div class="px-3 py-1 d-flex align-items-center">
                 <select bind:value={selectedField} class="form-select">
                     {#each filterableFields as field}
@@ -97,17 +104,21 @@
                 </select>
             </div>
             <div class="px-3 py-1 d-flex align-items-center">
-                <input
-                    type="text"
-                    class="form-control"
-                    bind:value={selectedInput}
-                />
+                {#if selectedField?.info?.name === "reference" && selectedOperator.name === "eq"}
+                    <FilterReferenceInput field={selectedField} bind:value={selectedInput} on:addFilter={addFilter}/>
+                {:else}
+                    <input
+                            type="text"
+                            class="form-control"
+                            bind:value={selectedInput}
+                    />
+                {/if}
             </div>
             <div class="px-3 py-1 d-flex align-items-center">
                 <button
-                    on:click={addFilter}
-                    class="btn btn-outline-primary"
-                    type="button"
+                        on:click={addFilter}
+                        class="btn btn-outline-primary"
+                        type="button"
                 >
                     Add filter
                 </button>
@@ -118,14 +129,13 @@
             <form on:submit={submitSearch}>
                 <div class="px-3 py-1 d-flex align-items-center">
                     <input
-                        bind:value={search}
-                        type="search"
-                        class="form-control"
-                        placeholder="Advanced filters"
-                        required
+                            bind:value={search}
+                            type="search"
+                            class="form-control"
+                            placeholder="Advanced filters"
+                            required
                     />
                 </div>
             </form>
-        </div>
-    </div>
+        </Dropdown>
 </div>

front/js/svelte/content/tools/FilterReferenceInput.svelte

@@ -0,0 +1,78 @@
+<script>
+    import {createEventDispatcher, getContext} from "svelte";
+    import {debounce} from "lodash";
+    import {previewTitle} from "../../records/Preview";
+
+
+    const channel = getContext("channel");
+    const dispatch = createEventDispatcher();
+
+    export let value = "";
+    export let field;
+
+    let search = ""
+    $: searchOptions = []
+
+
+    const updateResults = debounce((e) => {
+        axios
+            .get(channel.lucentUrl + "/records/suggestions", {
+                params: {
+                    schema: field.collections[0],
+                    field: "search",
+                    value: search,
+                    ui: "search",
+                },
+            })
+            .then((response) => {
+                searchOptions = response.data;
+            })
+            .catch((error) => {
+                searchOptions = [];
+                console.log(error);
+            });
+    }, 500);
+
+    function apply(e, newOption) {
+        e.preventDefault();
+        value = newOption.id
+        dispatch("addFilter");
+        value = ""
+
+    }
+
+</script>
+
+<input
+        type="search"
+        on:keyup={updateResults}
+        class="form-control dropdown-toggle"
+        bind:value={search}
+        placeholder={"Search for "+field.label}
+        data-bs-toggle="dropdown"
+        autocomplete="off"
+/>
+
+<div class="dropdown-menu w-100">
+
+    {#if searchOptions}
+        {#each searchOptions as option (option.id)}
+            <div
+                    on:click={(e) => apply(e, option)}
+                    on:keypress={(e) => apply(e, option)}
+            >
+            <span class="dropdown-item">
+                {previewTitle(channel.schemas, option)}
+            </span>
+            </div>
+
+        {:else}
+
+            Start typing...
+        {/each}
+    {/if}
+</div>
+
+
+
+

front/js/svelte/content/tools/Tools.svelte

@@ -18,6 +18,7 @@
     export let modalUrl;
     export let isWritable;
     export let records;
+    export let graph;
     export let systemFields = [];
     // export let visibleFields = [];
 
@@ -151,6 +152,8 @@
                     value={v}
                     {inModal}
                     {modalUrl}
+                    {records}
+                    {graph}
                     {systemFields}
                     on:refresh
             />