refactor

front/dist/manifest.json

@@ -1,14 +1,14 @@
 {
   "main.js": {
-    "file": "assets/main.cd4a87f1.js",
+    "file": "assets/main.999d669b.js",
     "src": "main.js",
     "isEntry": true,
     "css": [
-      "assets/main.66909535.css"
+      "assets/main.ffd76273.css"
     ]
   },
   "main.css": {
-    "file": "assets/main.66909535.css",
+    "file": "assets/main.ffd76273.css",
     "src": "main.css"
   }
 }

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

@@ -10,25 +10,57 @@
     export let value;
     export let inModal;
     export let modalUrl;
-    export let records;
     export let graph;
-    // export let systemFields;
 
-    let filterSplit = key.split("_");
+    let filter = {
-    let operator = filterSplit[filterSplit.length - 1] ?? "eq";
+        label: "",
+        operator: "",
+        value: value,
+        isReference: key.startsWith("children"),
+    };
 
-    let fieldName = key.replace("_" + operator, "");
+    filter = [
-    let filterField = schema.fields.find((f) => f.name === fieldName);
+        extractOperator(key),
-    let filterLabel = filterField?.label ?? fieldName;
+        extractLabel(schema, key),
-    let filterRecord = null;
+    ].reduce((mem, fn) => fn(mem), filter);
-    let isReference = key.startsWith("children")
+
-    if (isReference) {
+    function extractOperator(key) {
-        filterRecord = graph.records.find(r => r.id === value)
+        return (filter) => {
+            if (filter.isReference) {
+                filter.operator = "eq";
+                return filter;
+            }
+            const filterSplit = key.split("_");
+            filter.operator = filterSplit[filterSplit.length - 1] ?? "eq";
+            return filter;
+        };
+    }
+
+    function extractLabel(schema, key) {
+        return (filter) => {
+            let fieldName = "";
+            if (filter.isReference) {
+                fieldName = key.split(".")[1];
+            } else {
+                fieldName = key.replace("_" + filter.operator, "");
+            }
+            const filterField = schema.fields.find((f) => f.name === fieldName);
+            filter.label = filterField?.label ?? fieldName;
+            return filter;
+        }
 
     }
 
-    function removeFilter(e, k) {
+    const filterRecord = extractFilterRecord(graph, value);
-        e.preventDefault();
+
+    function extractFilterRecord(graph, value) {
+        if (!filter.isReference) {
+            return null;
+        }
+        return graph.records.find(r => r.id === value);
+    }
+
+    function removeFilter(k) {
         let filterKey = `filter[${k}]`;
         const url = new URL(modalUrl ?? window.location.href);
         url.searchParams.set("skip", "0");
@@ -36,39 +68,31 @@
         if (inModal) {
             dispatch("refresh", url);
         } else {
-            window.location = url;
+            window.location.replace(url);
         }
     }
 </script>
 
-<span
+<span class="applied-filter d-inline-block border border-primary rounded lx-small-text  me-1 px-2 py-1">
-        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">
-    {#if isReference && filterRecord}
+        {#if filter.isReference && filterRecord}
-         {previewTitle(channel.schemas, filterRecord)}
+              {filter.label} is {previewTitle(channel.schemas, filterRecord)}
-
+        {:else}
-    {:else}
+              {filter.label} {operators.find((o) => o.name === filter.operator)?.symbol ?? ""} {value}
-
+        {/if}
-
-            {filterLabel}
-        {operators.find((o) => o.name === operator)?.symbol ?? ""}
-        {value}
-
-    {/if}
         <button
-                on:click={(e) => removeFilter(e, key)}
+                on:click|preventDefault={() => removeFilter(key)}
                 type="button"
                 class="btn-close btn-close ms-1"
                 aria-label="Close"
         />
-        </div>
+    </div>
 </span>
 
 <style>
     .applied-filter {
         background-color: #fff;
+        line-height: 22px;
     }
 
     .applied-filter:hover {

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

@@ -77,7 +77,7 @@
         if (inModal) {
             dispatch("refresh", url);
         } else {
-            window.location = url;
+            window.location.replace(url);
         }
     }
 </script>

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

@@ -152,9 +152,7 @@
                     value={v}
                     {inModal}
                     {modalUrl}
-                    {records}
                     {graph}
-                    {systemFields}
                     on:refresh
             />
         {/each}