Bastian-Greshake-Tzovaras/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Huge refactoring: split readonly and writable stores

Browse source
This commit is contained in:
Pieter Vander Vennet 2022-06-05 02:24:14 +02:00
parent 0946d8ac9c
commit 4283b76f36
95 changed files with 819 additions and 625 deletions
Download patch file Download diff file Expand all files Collapse all files

27
UI/BigComponents/FilterView.ts
View file

@ -2,12 +2,12 @@ import {Utils} from "../../Utils";
import {FixedInputElement} from "../Input/FixedInputElement";
import {RadioButton} from "../Input/RadioButton";
import {VariableUiElement} from "../Base/VariableUIElement";
import Toggle from "../Input/Toggle";
import Toggle, {ClickableToggle} from "../Input/Toggle";
import Combine from "../Base/Combine";
import Translations from "../i18n/Translations";
import {Translation} from "../i18n/Translation";
import Svg from "../../Svg";
import {UIEventSource} from "../../Logic/UIEventSource";
import {ImmutableStore, Store, UIEventSource} from "../../Logic/UIEventSource";
import BaseUIElement from "../BaseUIElement";
import State from "../../State";
import FilteredLayer, {FilterState} from "../../Models/FilteredLayer";
@ -20,7 +20,6 @@ import {QueryParameters} from "../../Logic/Web/QueryParameters";
import {TagUtils} from "../../Logic/Tags/TagUtils";
import {InputElement} from "../Input/InputElement";
import {DropDown} from "../Input/DropDown";
import {UIElement} from "../UIElement";
export default class FilterView extends VariableUiElement {
constructor(filteredLayer: UIEventSource<FilteredLayer[]>,
@ -180,7 +179,8 @@ export default class FilterView extends VariableUiElement {
const filter = filterConfig.options[0]
const mappings = new Map<string, BaseUIElement>()
let allValid = new UIEventSource(true)
let allValid: Store<boolean> = new ImmutableStore(true)
var allFields: InputElement<string>[] = []
const properties = new UIEventSource<any>({})
for (const {name, type} of filter.fields) {
const value = QueryParameters.GetQueryParameter("filter-" + filterConfig.id + "-" + name, "", "Value for filter " + filterConfig.id)
@ -193,10 +193,11 @@ export default class FilterView extends VariableUiElement {
properties.data[name] = v.toLowerCase();
properties.ping()
})
allFields.push(field)
allValid = allValid.map(previous => previous && field.IsValid(stable.data) && stable.data !== "", [stable])
}
const tr = new SubstitutedTranslation(filter.question, new UIEventSource<any>({id: filterConfig.id}), State.state, mappings)
const trigger: UIEventSource<FilterState> = allValid.map(isValid => {
const trigger: Store<FilterState> = allValid.map(isValid => {
if (!isValid) {
return undefined
}
@ -221,8 +222,16 @@ export default class FilterView extends VariableUiElement {
state: JSON.stringify(props)
}
}, [properties])
const settableFilter = new UIEventSource<FilterState>(undefined)
trigger.addCallbackAndRun(state => settableFilter.setData(state))
settableFilter.addCallback(state => {
if(state.currentFilter === undefined){
allFields.forEach(f => f.GetValue().setData(undefined));
}
})
return [tr, trigger];
return [tr, settableFilter];
}
private static createCheckboxFilter(filterConfig: FilterConfig): [BaseUIElement, UIEventSource<FilterState>] {
@ -231,14 +240,14 @@ export default class FilterView extends VariableUiElement {
const icon = Svg.checkbox_filled_svg().SetClass("block mr-2 w-6");
const iconUnselected = Svg.checkbox_empty_svg().SetClass("block mr-2 w-6");
const toggle = new Toggle(
const toggle = new ClickableToggle(
new Combine([icon, option.question.Clone().SetClass("block")]).SetClass("flex"),
new Combine([iconUnselected, option.question.Clone().SetClass("block")]).SetClass("flex")
)
.ToggleOnClick()
.SetClass("block m-1")
return [toggle, toggle.isEnabled.map(enabled => enabled ? {
return [toggle, toggle.isEnabled.sync(enabled => enabled ? {
currentFilter: option.osmTags,
state: "true"
} : undefined, [],
@ -272,7 +281,7 @@ export default class FilterView extends VariableUiElement {
}
return [filterPicker,
filterPicker.GetValue().map(
filterPicker.GetValue().sync(
i => values[i],
[],
selected => {