colors and filters
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
<script>
|
||||
import Icon from "../../common/Icon.svelte";
|
||||
import {createEventDispatcher} from "svelte";
|
||||
import FilterReferenceInput from "./FilterReferenceInput.svelte";
|
||||
import Dropdown from "../../common/Dropdown.svelte";
|
||||
import FilterReferenceInput from "./FilterReferenceInput.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
export let schema;
|
||||
@@ -11,53 +11,14 @@
|
||||
export let inModal;
|
||||
export let modalUrl;
|
||||
|
||||
|
||||
let dropdown;
|
||||
let search = "";
|
||||
let systemFieldsFiltered = systemFields;
|
||||
if (schema.type == "collection") {
|
||||
if (schema.type === "collection") {
|
||||
systemFieldsFiltered = systemFields.filter((f) => f.files === false);
|
||||
}
|
||||
|
||||
let filterableFields = [...schema.fields, ...systemFieldsFiltered].filter(
|
||||
(f) => !["file", "json"].includes(f.info?.name ?? f.ui)
|
||||
);
|
||||
let selectedField;
|
||||
|
||||
let selectedInput = "";
|
||||
$: operatorsFiltered = operators.filter(
|
||||
(o) => o.uis.includes(selectedField?.info?.name) || o.uis[0] == "*"
|
||||
);
|
||||
|
||||
$: selectedOperator = operatorsFiltered[0];
|
||||
|
||||
function addFilter(e) {
|
||||
e.preventDefault();
|
||||
let filterPrefix = "";
|
||||
let filterKey;
|
||||
if (schema.fields.find(f => f.name === selectedField.name)) {
|
||||
|
||||
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}]`;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
function submitSearch(e) {
|
||||
e.preventDefault();
|
||||
let filterKeyValue = search.split("=")[0] ?? "";
|
||||
@@ -79,63 +40,188 @@
|
||||
} else {
|
||||
window.location.replace(url);
|
||||
}
|
||||
resetFilters();
|
||||
}
|
||||
|
||||
|
||||
// New Start
|
||||
let selectedInput = null;
|
||||
let activeField = null;
|
||||
let activeReference = null;
|
||||
let activeOperator = null;
|
||||
let activeMenu = "main";
|
||||
let activeOperators = null;
|
||||
let dataFields = [...schema.fields, ...systemFieldsFiltered].filter(
|
||||
(f) => !["file", "json", "reference"].includes(f.info?.name ?? f.ui)
|
||||
);
|
||||
let referenceFields = [...schema.fields].filter(
|
||||
(f) => ["reference"].includes(f.info?.name ?? f.ui)
|
||||
);
|
||||
|
||||
function selectField(e, field) {
|
||||
activeField = field;
|
||||
activeOperators = operators.filter(
|
||||
(o) => o.uis.includes(activeField?.info?.name) || o.uis[0] === "*"
|
||||
);
|
||||
}
|
||||
|
||||
function selectReference(e, field) {
|
||||
activeReference = field;
|
||||
activeOperator = operators.find(o => o.name === "eq")
|
||||
}
|
||||
|
||||
function applyFilter(e) {
|
||||
e.preventDefault();
|
||||
let filterPrefix = "";
|
||||
let filterKey;
|
||||
let selectedField = activeField ?? activeReference;
|
||||
if (schema.fields.find(f => f.name === selectedField.name)) {
|
||||
if (selectedField.info.name === "reference" && activeOperator.name === "eq") {
|
||||
filterPrefix = "children." + selectedField.name + ".id";
|
||||
filterKey = `filter[${filterPrefix}]`;
|
||||
} else {
|
||||
filterPrefix = "data.";
|
||||
filterKey = `filter[${filterPrefix + selectedField.name}_${activeOperator.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.close()
|
||||
} else {
|
||||
window.location.href = url.toString();
|
||||
}
|
||||
resetFilters();
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
activeField = null;
|
||||
activeOperator = null;
|
||||
activeMenu = "main";
|
||||
activeReference = null;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="mx-2 d-flex align-items-center">
|
||||
<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}
|
||||
<option value={field}>{field.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="px-3 py-1 d-flex align-items-center">
|
||||
<select class="form-select" bind:value={selectedOperator}>
|
||||
{#each operatorsFiltered as operator}
|
||||
<option value={operator}>{operator.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="px-3 py-1 d-flex align-items-center">
|
||||
{#if selectedField?.info?.name === "reference" && selectedOperator.name === "eq"}
|
||||
<FilterReferenceInput field={selectedField} bind:value={selectedInput} on:addFilter={addFilter}/>
|
||||
{:else}
|
||||
<div>
|
||||
<Dropdown bind:this={dropdown}>
|
||||
<div slot="button">
|
||||
<Icon icon="filter"/>
|
||||
<span class="ms-1">Filter</span>
|
||||
</div>
|
||||
<div class:hide={activeMenu !== "main"}>
|
||||
<button class="dropdown-item button" on:click={e => activeMenu = "byField" }>
|
||||
Filter by field
|
||||
</button>
|
||||
<button class="dropdown-item button" on:click={e => activeMenu = "byReference" }>
|
||||
Filter by Reference
|
||||
</button>
|
||||
<button class="dropdown-item button" on:click={e => activeMenu = "advanced" }>
|
||||
Advanced filter
|
||||
</button>
|
||||
</div>
|
||||
<div class:hide={activeMenu !== "byField"}>
|
||||
{#if !activeField}
|
||||
<button class="dropdown-item button" on:click={e => activeMenu = "main" }>
|
||||
<Icon icon="arrow-left"></Icon>
|
||||
Back
|
||||
</button>
|
||||
{#each dataFields as field}
|
||||
<button class="dropdown-item button" on:click={e => selectField(e,field)}>
|
||||
{field.label}
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
{#if activeField && !activeOperator}
|
||||
<button class="dropdown-item button" on:click={e => activeField = null }>
|
||||
<Icon icon="arrow-left"></Icon>
|
||||
Back
|
||||
</button>
|
||||
<div class="selected-filter">field: {activeField.label}</div>
|
||||
|
||||
{#each activeOperators as operator}
|
||||
<button class="dropdown-item button" on:click={e => activeOperator = operator }>
|
||||
{operator.label}
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if activeField && activeOperator}
|
||||
<button class="dropdown-item button" on:click={e => activeOperator = null }>
|
||||
<Icon icon="arrow-left"></Icon>
|
||||
Back
|
||||
</button>
|
||||
<div class="selected-filter">field: {activeField.label} operator: {activeOperator.label}</div>
|
||||
<div class="filter-input">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
bind:value={selectedInput}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="px-3 py-1 d-flex align-items-center">
|
||||
</div>
|
||||
<button
|
||||
on:click={addFilter}
|
||||
class="btn btn-outline-primary"
|
||||
on:click={applyFilter}
|
||||
class="button applied-filter"
|
||||
type="button"
|
||||
>
|
||||
Add filter
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<hr/>
|
||||
<div><h6 class="dropdown-header">Advanced filters</h6></div>
|
||||
<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
|
||||
/>
|
||||
</div>
|
||||
<div class:hide={activeMenu !== "byReference"}>
|
||||
{#if !activeReference}
|
||||
<button class="dropdown-item button" on:click={e => activeMenu = "main" }>
|
||||
<Icon icon="arrow-left"></Icon>
|
||||
Back
|
||||
</button>
|
||||
{#each referenceFields as field}
|
||||
<button class="dropdown-item button" on:click={e => selectReference(e,field)}>
|
||||
{field.label}
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if activeReference}
|
||||
<button class="dropdown-item button" on:click={e => activeReference = null }>
|
||||
<Icon icon="arrow-left"></Icon>
|
||||
Back
|
||||
</button>
|
||||
<div class="selected-filter">field: {activeReference.label}</div>
|
||||
<div class="mt-2">
|
||||
<FilterReferenceInput field={activeReference} bind:value={selectedInput}
|
||||
on:addFilter={applyFilter}/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
</div>
|
||||
<div class:hide={activeMenu !== "advanced"}>
|
||||
<button class="dropdown-item button" on:click={e => activeMenu = "main" }>
|
||||
<Icon icon="arrow-left"></Icon>
|
||||
Back
|
||||
</button>
|
||||
<form on:submit={submitSearch}>
|
||||
<input
|
||||
bind:value={search}
|
||||
type="search"
|
||||
class="mb-2 mt-2"
|
||||
placeholder="Advanced filters"
|
||||
required
|
||||
/>
|
||||
|
||||
<button class="button applied-filter">
|
||||
Submit
|
||||
</button>
|
||||
|
||||
</form>
|
||||
</Dropdown>
|
||||
|
||||
|
||||
</div>
|
||||
</Dropdown>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -42,35 +42,37 @@
|
||||
}
|
||||
|
||||
</script>
|
||||
<div class="reference-tags">
|
||||
<input
|
||||
type="search"
|
||||
on:keyup={updateResults}
|
||||
bind:value={search}
|
||||
placeholder={"Search for "+field.label}
|
||||
autocomplete="off"
|
||||
/>
|
||||
|
||||
<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="reference-tags-results">
|
||||
|
||||
<div class="dropdown-menu w-100">
|
||||
{#if searchOptions}
|
||||
{#each searchOptions as option (option.id)}
|
||||
<div
|
||||
class="reference-tags-option"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:click={(e) => apply(e, option)}
|
||||
on:keypress={(e) => apply(e, option)}
|
||||
>
|
||||
{previewTitle(channel.schemas, option)}
|
||||
</div>
|
||||
|
||||
{#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}
|
||||
{:else}
|
||||
<div
|
||||
class="start-typing">
|
||||
Start typing...
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user