Add safeguard as not to show too much mappings in the searchableMappingSelector

This commit is contained in:
pietervdvn 2022-07-13 23:10:56 +02:00
parent 9327d96550
commit 4a2bc533ee
2 changed files with 15 additions and 7 deletions

View file

@ -138,6 +138,10 @@ export class SearchablePillsSelector<T> extends Combine implements InputElement<
searchValue?: UIEventSource<string>, searchValue?: UIEventSource<string>,
onNoMatches?: BaseUIElement, onNoMatches?: BaseUIElement,
onNoSearchMade?: BaseUIElement, onNoSearchMade?: BaseUIElement,
/**
* Shows this if there are many (>200) possible mappings
*/
onManyElements?: BaseUIElement,
selectIfSingle?: false | boolean, selectIfSingle?: false | boolean,
searchAreaClass?: string searchAreaClass?: string
}) { }) {
@ -193,10 +197,10 @@ export class SearchablePillsSelector<T> extends Combine implements InputElement<
}; };
}) })
let somethingShown: Store<boolean> let totalShown: Store<number>
if (options.selectIfSingle) { if (options.selectIfSingle) {
let forcedSelection : { value: T, show: SelfHidingToggle } = undefined let forcedSelection : { value: T, show: SelfHidingToggle } = undefined
somethingShown = searchValue.map(_ => { totalShown = searchValue.map(_ => {
let totalShown = 0; let totalShown = 0;
let lastShownValue: { value: T, show: SelfHidingToggle } let lastShownValue: { value: T, show: SelfHidingToggle }
for (const mv of mappedValues) { for (const mv of mappedValues) {
@ -218,10 +222,10 @@ export class SearchablePillsSelector<T> extends Combine implements InputElement<
selectedElements.setData([]) selectedElements.setData([])
} }
return totalShown > 0 return totalShown
}, mappedValues.map(mv => mv.show.GetValue())) }, mappedValues.map(mv => mv.show.GetValue()))
} else { } else {
somethingShown = searchValue.map(_ => mappedValues.some(mv => mv.show.isShown.data), mappedValues.map(mv => mv.show.GetValue())) totalShown = searchValue.map(_ => mappedValues.filter(mv => mv.show.isShown.data).length, mappedValues.map(mv => mv.show.GetValue()))
} }
@ -231,18 +235,21 @@ export class SearchablePillsSelector<T> extends Combine implements InputElement<
if (options?.onNoSearchMade !== undefined && (searchValue.data === undefined || searchValue.data.length === 0)) { if (options?.onNoSearchMade !== undefined && (searchValue.data === undefined || searchValue.data.length === 0)) {
return options?.onNoSearchMade return options?.onNoSearchMade
} }
if (!somethingShown.data) { if (totalShown.data == 0) {
return onEmpty return onEmpty
} }
if(totalShown.data >= 200){
return options?.onManyElements ?? Translations.t.general.useSearch;
}
mappedValues.sort((a, b) => a.mainTerm[lng] < b.mainTerm[lng] ? -1 : 1) mappedValues.sort((a, b) => a.mainTerm[lng] < b.mainTerm[lng] ? -1 : 1)
return new Combine(mappedValues.map(e => e.show)) return new Combine(mappedValues.map(e => e.show))
.SetClass("flex flex-wrap w-full content-start") .SetClass("flex flex-wrap w-full content-start")
.SetClass(options?.searchAreaClass ?? "") .SetClass(options?.searchAreaClass ?? "")
}, [somethingShown, searchValue])) }, [totalShown, searchValue]))
]) ])
this.selectedElements = selectedElements; this.selectedElements = selectedElements;
this.someMatchFound = somethingShown; this.someMatchFound = totalShown.map(t => t > 0);
} }

View file

@ -235,6 +235,7 @@
"skip": "Skip this question", "skip": "Skip this question",
"skippedQuestions": "Some questions are skipped", "skippedQuestions": "Some questions are skipped",
"testing": "Testing - changes won't be saved", "testing": "Testing - changes won't be saved",
"useSearch": "Use the search above to see presets",
"weekdays": { "weekdays": {
"abbreviations": { "abbreviations": {
"friday": "Fri", "friday": "Fri",