wip: allow to change target of new filter

Author: yohanboniface

umap/static/umap/css/form.css

@@ -94,6 +94,13 @@ select {
     border-width: 1px;
 }
 
+.dark select[disabled],
+select[disabled] {
+    background-color: var(--color-mediumGray);
+    color: var(--color-lightGray);
+    cursor: not-allowed;
+}
+
 select[multiple="multiple"] {
     height: auto;
 }

umap/static/umap/js/modules/filters.js

@@ -283,17 +283,30 @@ export default class Filters {
     if (['Number', 'Date', 'Datetime'].includes(field?.type)) {
       widget = 'minmax'
     }
-    const properties = { name, widget, ...(this.defined.get(name) || {}) }
+    const properties = {
+      target: this._parent,
+      name,
+      widget,
+      ...(this.defined.get(name) || {}),
+    }
     const fieldKeys = name
       ? [name]
       : ['', ...this._parent.fieldKeys.filter((key) => !this.defined.has(key))]
     const metadata = [
+      [
+        'target',
+        {
+          handler: 'FilterTargetSelect',
+          label: translate('Apply filter to'),
+          disabled: Boolean(name),
+        },
+      ],
       [
         'name',
         {
           handler: 'Select',
           selectOptions: fieldKeys,
-          label: translate('Field to filter on'),
+          label: translate('Filter on'),
         },
       ],
       [
@@ -309,7 +322,7 @@ export default class Filters {
         },
       ],
     ]
-    const form = new Form(properties, metadata)
+    const form = new Form(properties, metadata, { umap: this._umap })
     let label
     if (name) {
       label = translate('Edit filter')
@@ -331,13 +344,16 @@ export default class Filters {
     })
 
     return this._umap.dialog.open({ template: container }).then(() => {
+      const target = properties.target
       if (!properties.name) return
       if (name) {
-        this.update({ ...properties })
+        target.filters.update({ ...properties })
       } else {
-        this.add({ ...properties })
+        target.filters.add({ ...properties })
       }
-      this._parent.edit().then((panel) => panel.scrollTo('details#fields-management'))
+      target.filters._parent
+        .edit()
+        .then((panel) => panel.scrollTo('details#fields-management'))
     })
   }
 
@@ -408,7 +424,7 @@ Fields.MinMaxBase = class extends Fields.FilterBase {
   }
 
   prepareForHTML(value) {
-    return value.valueOf()
+    return value?.valueOf() || null
   }
 
   getTemplate() {
@@ -539,3 +555,42 @@ Fields.FilterByDateTime = class extends Fields.FilterByDate {
     return this.toLocaleDateTime(value).toISOString().slice(0, -1)
   }
 }
+
+Fields.FilterTargetSelect = class extends Fields.Select {
+  getOptions() {
+    const options = []
+    if (this.builder.properties.umap.fields.size) {
+      options.push([
+        `map:${this.builder.properties.umap.id}`,
+        `${this.builder.properties.umap.properties.name} (${translate('all layers')})`,
+      ])
+    }
+    this.builder.properties.umap.datalayers.reverse().map((datalayer) => {
+      if (datalayer.isBrowsable() && datalayer.fields.size) {
+        options.push([
+          `layer:${datalayer.id}`,
+          `${datalayer.getName()}  (${translate('single layer')})`,
+        ])
+      }
+    })
+    return options
+  }
+
+  toHTML() {
+    if (!this.obj.target) return null
+    // TODO: better way to check for class
+    // Importing DataLayer will end in circular import
+    const type = this.obj.target._umap ? 'layer' : 'map'
+    return `${type}:${this.obj.target?.id}`
+  }
+
+  toJS() {
+    const value = this.value()
+    if (!value) return null
+    const [type, id] = value.split(':')
+    if (type === 'map') {
+      return this.builder.properties.umap
+    }
+    return this.builder.properties.umap.datalayers[id]
+  }
+}

umap/static/umap/js/modules/form/fields.js

@@ -390,6 +390,9 @@ Fields.Select = class extends Fields.Base {
 
   build() {
     this.select = this.elements.select
+    if (this.properties.disabled) {
+      this.select.disabled = true
+    }
     this.validValues = []
     this.buildOptions()
     this.select.addEventListener('change', () => this.sync())

umap/tests/integration/test_filters.py

@@ -468,3 +468,85 @@ def test_can_create_filter_from_new_field(live_server, page, openmap):
             "widget": "checkbox",
         },
     }
+
+
+def test_can_create_new_filter_on_map_from_panel(live_server, page, openmap):
+    openmap.settings["properties"]["onLoadPanel"] = "datafilters"
+    openmap.settings["properties"]["fields"] = [
+        {"key": "name", "type": "String"},
+        {"key": "foobar", "type": "Number"},
+        {"key": "description", "type": "Text"},
+    ]
+    openmap.save()
+    DataLayerFactory(map=openmap, data=DATALAYER_DATA1)
+    page.goto(f"{live_server.url}{openmap.get_absolute_url()}?edit")
+    page.get_by_role("button", name="Add filter").click()
+    page.get_by_label("Filter on").select_option("foobar")
+    page.get_by_role("textbox", name="Human readable name of the").fill("Foo Bar")
+    page.wait_for_timeout(300)
+    page.get_by_text("radio").click()
+    page.get_by_role("button", name="OK").click()
+    expect(
+        page.locator(".panel.left").get_by_role("group", name="Foo Bar")
+    ).to_be_visible()
+    with page.expect_response(re.compile("./update/settings/.*")):
+        page.get_by_role("button", name="Save", exact=True).click()
+    saved = Map.objects.first()
+    assert saved.settings["properties"]["filters"] == {
+        "foobar": {"label": "Foo Bar", "widget": "radio"}
+    }
+
+
+def test_can_create_new_filter_on_datalayer_from_panel(live_server, page, openmap):
+    openmap.settings["properties"]["fields"] = [
+        {"key": "name", "type": "String"},
+        {"key": "foobar", "type": "Number"},
+        {"key": "description", "type": "Text"},
+    ]
+    openmap.save()
+    datalayer = DataLayerFactory(map=openmap, data=DATALAYER_DATA1)
+    page.goto(
+        f"{live_server.url}{openmap.get_absolute_url()}?edit&onLoadPanel=datafilters"
+    )
+    page.get_by_role("button", name="Add filter").click()
+    expect(page.get_by_label("Apply filter to")).to_have_value(f"map:{openmap.pk}")
+    page.get_by_label("Apply filter to").select_option(f"layer:{datalayer.pk}")
+    page.get_by_label("Filter on").select_option("mynumber")
+    page.get_by_role("textbox", name="Human readable name of the").fill("Foo Bar")
+    page.wait_for_timeout(300)
+    page.get_by_text("radio").click()
+    page.get_by_role("button", name="OK").click()
+    expect(
+        page.locator(".panel.left").get_by_role("group", name="Foo Bar")
+    ).to_be_visible()
+    with page.expect_response(re.compile("./datalayer/update/.*")):
+        page.get_by_role("button", name="Save", exact=True).click()
+    saved = DataLayer.objects.first()
+    assert saved.settings["filters"] == {
+        "mynumber": {"label": "Foo Bar", "widget": "radio"}
+    }
+
+
+def test_can_edit_filter_from_panel(live_server, page, openmap):
+    openmap.settings["properties"]["fields"] = [
+        {"key": "name", "type": "String"},
+        {"key": "foobar", "type": "Number"},
+        {"key": "description", "type": "Text"},
+    ]
+    openmap.settings["properties"]["filters"] = {
+        "foobar": {"widget": "minmax", "label": "Foo Bar"},
+        "name": {"widget": "checkbox", "label": "Bar Foo"},
+    }
+    openmap.save()
+    page.goto(
+        f"{live_server.url}{openmap.get_absolute_url()}?edit&onLoadPanel=datafilters"
+    )
+    page.get_by_role("group", name="Foo Bar").get_by_role("button").click()
+    expect(page.get_by_label("Apply filter to")).to_have_value("map:1")
+    expect(page.get_by_label("Apply filter to")).to_be_disabled()
+    page.get_by_role("textbox", name="Human readable name of the").fill("Foo Bar Baz")
+    page.wait_for_timeout(300)  # Input throttling.
+    page.get_by_role("button", name="OK").click()
+    expect(
+        page.get_by_role("group", name="Foo Bar Baz").locator("legend")
+    ).to_be_visible()