diff --git a/umap/static/umap/js/modules/data/layer.js b/umap/static/umap/js/modules/data/layer.js index cdb2c9ee..6a3e3c74 100644 --- a/umap/static/umap/js/modules/data/layer.js +++ b/umap/static/umap/js/modules/data/layer.js @@ -428,6 +428,10 @@ export class DataLayer extends ServerStored { if (idx !== -1) this._propertiesIndex.splice(idx, 1) } + allProperties() { + return this._propertiesIndex + } + sortedValues(property) { return Object.values(this._features) .map((feature) => feature.properties[property]) diff --git a/umap/static/umap/js/modules/global.js b/umap/static/umap/js/modules/global.js index 8f56d3b5..d6502b2f 100644 --- a/umap/static/umap/js/modules/global.js +++ b/umap/static/umap/js/modules/global.js @@ -1,5 +1,5 @@ import { uMapAlert as Alert } from '../components/alerts/alert.js' -import { AjaxAutocomplete, AjaxAutocompleteMultiple } from './autocomplete.js' +import { AjaxAutocomplete, AjaxAutocompleteMultiple, AutocompleteDatalist } from './autocomplete.js' import Help from './help.js' import { ServerRequest } from './request.js' import { SCHEMA } from './schema.js' @@ -17,6 +17,7 @@ window.U = { Alert, AjaxAutocomplete, AjaxAutocompleteMultiple, + AutocompleteDatalist, Help, Icon, LAYER_TYPES, diff --git a/umap/static/umap/js/modules/umap.js b/umap/static/umap/js/modules/umap.js index b0696827..4aa4091e 100644 --- a/umap/static/umap/js/modules/umap.js +++ b/umap/static/umap/js/modules/umap.js @@ -684,7 +684,7 @@ export default class Umap extends ServerStored { } allProperties() { - return [].concat(...this.datalayersIndex.map((dl) => dl._propertiesIndex)) + return [].concat(...this.datalayersIndex.map((dl) => dl.allProperties())) } sortedValues(property) { diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js index c7ea1bed..b4b9115a 100644 --- a/umap/static/umap/js/umap.forms.js +++ b/umap/static/umap/js/umap.forms.js @@ -448,6 +448,17 @@ L.FormBuilder.BlurInput.include({ }, }) +// Adds an autocomplete using all available user defined properties +L.FormBuilder.PropertyInput = L.FormBuilder.BlurInput.extend({ + build: function () { + L.FormBuilder.BlurInput.prototype.build.call(this) + const autocomplete = new U.AutocompleteDatalist(this.input) + // Will be used on Umap and DataLayer + const properties = this.builder.obj.allProperties() + autocomplete.suggestions = properties + }, +}) + L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ type: () => 'hidden', @@ -1110,10 +1121,11 @@ U.FormBuilder = L.FormBuilder.extend({ }, customHandlers: { - sortKey: 'BlurInput', + sortKey: 'PropertyInput', easing: 'Switch', - facetKey: 'BlurInput', - slugKey: 'BlurInput', + facetKey: 'PropertyInput', + slugKey: 'PropertyInput', + labelKey: 'PropertyInput', }, computeDefaultOptions: function () {