From 4e73eade184a767f76604edd518352cf2ed194b6 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Wed, 3 Jul 2024 13:56:00 +0200 Subject: [PATCH] wip: use AutocompleteDatalist in rules too --- umap/static/umap/js/modules/rules.js | 15 ++++++++++++++- umap/static/umap/js/umap.js | 11 +++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/umap/static/umap/js/modules/rules.js b/umap/static/umap/js/modules/rules.js index ed541b03..49a78d8a 100644 --- a/umap/static/umap/js/modules/rules.js +++ b/umap/static/umap/js/modules/rules.js @@ -1,5 +1,6 @@ import { DomEvent, DomUtil, stamp } from '../../vendors/leaflet/leaflet-src.esm.js' import { translate } from './i18n.js' +import { AutocompleteDatalist } from './autocomplete.js' import * as Utils from './utils.js' export class Rule { @@ -89,7 +90,7 @@ class ConditionalRule extends Rule { } constructor(map, condition = '', options = {}) { - super() + super(condition) this._isDirty = false this.map = map this.active = true @@ -134,6 +135,18 @@ class ConditionalRule extends Rule { const builder = new U.FormBuilder(this, options) const defaultShapeProperties = DomUtil.add('div', '', container) defaultShapeProperties.appendChild(builder.build()) + const autocomplete = new AutocompleteDatalist(builder.helpers.condition.input) + const properties = this.map.allProperties() + autocomplete.suggestions = properties + autocomplete.input.addEventListener('input', (event) => { + const value = event.target.value + if (properties.includes(value)) { + autocomplete.suggestions = [`${value}=`, `${value}!=`, `${value}>`, `${value}<`] + } else if (value.endsWith('=')) { + const key = value.split('!')[0].split('=')[0] + autocomplete.suggestions = this.map.sortedValues(key).map((str) => `${value}${str || ''}`) + } + }) this.map.editPanel.open({ content: container }) } diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js index d1ef06d2..4ba4b130 100644 --- a/umap/static/umap/js/umap.js +++ b/umap/static/umap/js/umap.js @@ -262,6 +262,17 @@ U.Map = L.Map.extend({ this.onDataLayersChanged() }, + allProperties: function () { + return [].concat(...this.datalayers_index.map((dl) => dl._propertiesIndex)) + }, + + sortedValues: function (property) { + return [] + .concat(...this.datalayers_index.map((dl) => dl.sortedValues(property))) + .filter((val, idx, arr) => arr.indexOf(val) === idx) + .sort(U.Utils.naturalSort) + }, + redrawVisibleDataLayers: function () { this.eachVisibleDataLayer((datalayer) => { datalayer.redraw()