New Lizmap web component lizmap-features-table to display a compact list of features

[mdouchin]

This lizmap-features-table web component allows to display a compact list of vector layer features labels:

• The QGIS "Display name" is used as the feature label: an expression can be used to tweak its content, configured in the Tooltip tab of the QGIS vector layer properties. For example:

  CONCAT(
      "quartiers_libquart", ' - ', "libsquart", ' (', to_int(area(@geometry)/10000), ' ha)'
  )

  will produce a text like MONTPELLIER CENTRE - Les Aubes (85 ha)
• If the popup is configured for the given layer, a click on a feature label display its popup under the list of features

It will be used in future in several contexts:

• To display the child elements of a popup object
• To display the child elements in an editing form
• To display a compact list of features anywhere else needed (for example in the expression based HTML popup)

As any HTML web component, it can be used by writing an HTML element with attributes allowing to configure its source data and behaviour, for example:

<lizmap-features-table
    layertitle="child sub-districts"
    layerid="sousquartiers_24ceec66_e7fe_46a2_b57a_af5c50389649"
    uniquefield="id"
    expressionfilter="quartmno = 'MC'"
    withgeometry
    sortingfield="libsquart"
    sortingorder="asc"
    draggable="yes"
/>

The following attributes allow configuring the table:

• layertitle : the title to use at the top of the table
• layerid: The QGIS vector layer internal ID. It can be found in QGIS vector layer properties dialogue, tab Variables
• uniquefield: the unique identifier of the layer features. Use the primary key if possible.
• expressionfilter: a QGIS expression allowing to filter the displayed features. If no filter is set, all the features will be shown. Beware of bad performances for heavy datasets.
• withgeometry: If this attribute exists (with or without a value), the geometries will also be used and downloaded. Use it at present if the feature display expression depends on the geometry, for example if it contains a calculation made from the geometry, e.g. area(@geometry). In the future, this will also be used to draw the geometry on the map.
• sortingfield and sortingorder: allow defining in which order the features must be displayed. Default is the alphabetical order of the display expression values. asc means ascending order, and desc means descending order.
• draggable: if set with the value yes, the user will be able to change the position of an item in the table by dragging and dropping it.

Events will be fired

• features.table.rendered When the table has been successfully displayed. The event carries the lizmap-features-table HTML element ID
• features.table.item.dragged when the user has dropped an item in a new position. The event carries 3 properties:
  • itemFeatureId: the vector feature ID
  • itemOldLineId: the original line ID before dropping the item
  • itemNewLineId: the new line ID after dropping the item in a new position

Funded by Ville d'Avignon https://cartes.mairie-avignon.com/

[rldhont]

Use the new API.

[Gustry]

I just noticed this while translating on Transifex new strings.
This PR uses item/items :

For consistency with QGIS and other parts of Lizmap, shouldn't we use feature ?
I'm just trying to be consistent across the application.

[erw-1]

When a feature table item is selected, other items are automatically hidden, as expected. However, if there is another feature table in the selected feature, new items are also hidden before they can be picked, because they share the same CSS selector.

You could introduce a hierarchy level into the selector to differentiate between parent and child feature tables.

Video example (FRA): https://youtu.be/zZafmypUBVs

[rldhont]

Hi @erw-1 if you find an issue, please open one.

[rldhont]

@erw-1 you can also provide a Pull Request if you have a solution to fix it.

[erw-1]

Here, this is my first contribution/ pull request ever! Hopefully I did things right.
I'm a GIS student, learning dev stuff recreationally at the moment.

#5037