forked from MapComplete/MapComplete
		
	Use a dropdown if there are a lot of options to choose from in tagrenderingquestion
This commit is contained in:
		
							parent
							
								
									1609c63f3b
								
							
						
					
					
						commit
						55f03c3de7
					
				
					 2 changed files with 59 additions and 20 deletions
				
			
		| 
						 | 
				
			
			@ -23,6 +23,7 @@ import {Tag} from "../../Logic/Tags/Tag";
 | 
			
		|||
import {And} from "../../Logic/Tags/And";
 | 
			
		||||
import {TagUtils} from "../../Logic/Tags/TagUtils";
 | 
			
		||||
import BaseUIElement from "../BaseUIElement";
 | 
			
		||||
import {DropDown} from "../Input/DropDown";
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
 * Shows the question element.
 | 
			
		||||
| 
						 | 
				
			
			@ -96,7 +97,6 @@ export default class TagRenderingQuestion extends UIElement {
 | 
			
		|||
        ).SetClass("block break-all")
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
        
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    InnerRender() {
 | 
			
		||||
| 
						 | 
				
			
			@ -111,24 +111,58 @@ export default class TagRenderingQuestion extends UIElement {
 | 
			
		|||
    }
 | 
			
		||||
 | 
			
		||||
    private GenerateInputElement(): InputElement<TagsFilter> {
 | 
			
		||||
        const ff = this.GenerateFreeform();
 | 
			
		||||
        const self = this;
 | 
			
		||||
        let mappings =
 | 
			
		||||
            (this._configuration.mappings ?? []).map(mapping => self.GenerateMappingElement(mapping));
 | 
			
		||||
        mappings = Utils.NoNull(mappings);
 | 
			
		||||
        let inputEls: InputElement<TagsFilter>[];
 | 
			
		||||
 | 
			
		||||
        if (mappings.length == 0) {
 | 
			
		||||
        const mappings = (this._configuration.mappings??[])
 | 
			
		||||
            .filter(            mapping => {
 | 
			
		||||
                if(mapping.hideInAnswer === true){
 | 
			
		||||
                    return false;
 | 
			
		||||
                }
 | 
			
		||||
                if (typeof (mapping.hideInAnswer) !== "boolean" && mapping.hideInAnswer.matchesProperties(this._tags.data)) {
 | 
			
		||||
                    return false;
 | 
			
		||||
                }
 | 
			
		||||
                return true;
 | 
			
		||||
            })
 | 
			
		||||
      
 | 
			
		||||
        
 | 
			
		||||
        let allIfNots: TagsFilter[] = Utils.NoNull(this._configuration.mappings?.map(m => m.ifnot) ?? []    );
 | 
			
		||||
        const ff = this.GenerateFreeform();
 | 
			
		||||
        const hasImages = mappings.filter(mapping => mapping.then.ExtractImages().length > 0).length > 0
 | 
			
		||||
 | 
			
		||||
        if (mappings.length < 8 || this._configuration.multiAnswer || hasImages) {
 | 
			
		||||
            inputEls = (mappings ?? []).map(mapping => self.GenerateMappingElement(mapping, allIfNots));
 | 
			
		||||
            inputEls = Utils.NoNull(inputEls);
 | 
			
		||||
        } else {
 | 
			
		||||
            const dropdown: InputElement<TagsFilter> = new DropDown("",
 | 
			
		||||
                mappings.map(mapping => {
 | 
			
		||||
                    return {
 | 
			
		||||
                        value: new And([mapping.if, ...allIfNots]),
 | 
			
		||||
                        shown: Translations.WT(mapping.then).Clone()
 | 
			
		||||
                    }
 | 
			
		||||
                })
 | 
			
		||||
            )
 | 
			
		||||
 | 
			
		||||
            if (ff == undefined) {
 | 
			
		||||
                return dropdown;
 | 
			
		||||
            } else {
 | 
			
		||||
                inputEls = [dropdown]
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
        if (inputEls.length == 0) {
 | 
			
		||||
            return ff;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        if (ff) {
 | 
			
		||||
            mappings.push(ff);
 | 
			
		||||
            inputEls.push(ff);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        if (this._configuration.multiAnswer) {
 | 
			
		||||
            return this.GenerateMultiAnswer(mappings, ff, this._configuration.mappings.map(mp => mp.ifnot))
 | 
			
		||||
            return this.GenerateMultiAnswer(inputEls, ff, this._configuration.mappings.map(mp => mp.ifnot))
 | 
			
		||||
        } else {
 | 
			
		||||
            return new RadioButton(mappings, false)
 | 
			
		||||
            return new RadioButton(inputEls, false)
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
    }
 | 
			
		||||
| 
						 | 
				
			
			@ -237,16 +271,16 @@ export default class TagRenderingQuestion extends UIElement {
 | 
			
		|||
        if: TagsFilter,
 | 
			
		||||
        then: Translation,
 | 
			
		||||
        hideInAnswer: boolean | TagsFilter
 | 
			
		||||
    }): InputElement<TagsFilter> {
 | 
			
		||||
        if (mapping.hideInAnswer === true) {
 | 
			
		||||
            return undefined;
 | 
			
		||||
        }
 | 
			
		||||
        if (typeof (mapping.hideInAnswer) !== "boolean" && mapping.hideInAnswer.matchesProperties(this._tags.data)) {
 | 
			
		||||
            return undefined;
 | 
			
		||||
    }, ifNot?: TagsFilter[]): InputElement<TagsFilter> {
 | 
			
		||||
       
 | 
			
		||||
        let tagging = mapping.if;
 | 
			
		||||
        if (ifNot.length > 0) {
 | 
			
		||||
            tagging = new And([tagging, ...ifNot])
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        return new FixedInputElement(
 | 
			
		||||
            new SubstitutedTranslation(mapping.then, this._tags),
 | 
			
		||||
            mapping.if,
 | 
			
		||||
            tagging,
 | 
			
		||||
            (t0, t1) => t1.isEquivalent(t0));
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -159,7 +159,12 @@ export default class ShowDataLayer {
 | 
			
		|||
                return;
 | 
			
		||||
            }
 | 
			
		||||
            if (selected.properties.id === feature.properties.id) {
 | 
			
		||||
                leafletLayer.openPopup()
 | 
			
		||||
                // A small sanity check to prevent infinite loops:
 | 
			
		||||
                // If a feature is rendered both as way and as point, opening one popup might trigger the other to open, which might trigger the one to open again
 | 
			
		||||
                if(selected.geometry.type === feature.geometry.type){
 | 
			
		||||
                    leafletLayer.openPopup()    
 | 
			
		||||
                }
 | 
			
		||||
                
 | 
			
		||||
            }
 | 
			
		||||
        })
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue