Source: components/FeaturesTable.js

  1. /**
  2.  * @module components/FeaturesTable.js
  3.  * @name FeaturesTable
  4.  * @copyright 2024 3Liz
  5.  * @author DOUCHIN Michaël
  6.  * @license MPL-2.0
  7.  */
  9. import { html, render } from 'lit-html';
  10. import { mainLizmap, mainEventDispatcher } from '../modules/Globals.js';
  12. import GeoJSON from 'ol/format/GeoJSON.js';
  14. /**
  15.  * @class
  16.  * @name FeaturesTable
  17.  * @summary Allows to display a compact list of vector layer features labels
  18.  * @augments HTMLElement
  19.  * @description lizmap-features-table
  20.  * @fires FeaturesTable#features.table.item.highlighted
  21.  * @fires FeaturesTable#features.table.item.dragged
  22.  * @fires FeaturesTable#features.table.rendered
  23.  * @example <caption>Example of use</caption>
  24.  * <lizmap-features-table draggable="yes" sortingOrder="asc" sortingField="libsquart"
  25.  *                        withGeometry="1" expressionFilter="quartmno = 'HO'"
  26.  *                        uniqueField="id" layerId="subdistrict_24ceec66_e7fe_46a2_b57a_af5c50389649"
  27.  *                        layerTitle="child sub-districts"
  28.  *                        (optional) data-show-highlighted-feature-geometry="true"
  29.  *                        (optional) data-center-to-highlighted-feature-geometry="true"
  30.  *                        (optional) data-max-features="100"
  31.  *                        (optional) data-active-item-feature-id="5"
  32.  *                        >
  33.  *      <lizmap-field data-alias="District's name" data-description="Label of district's name">
  34.  *         "libsquart"
  35.  *      </lizmap-field>
  36.  * </lizmap-features-table>
  37.  */
  38. export default class FeaturesTable extends HTMLElement {
  40.     constructor() {
  41.         super();
  43.         // Random element id
  44.         if (window.isSecureContext) {
  45.             this.id = window.crypto.randomUUID();
  46.         } else {
  47.             this.id = btoa(String.fromCharCode(...new Uint8Array( Array(30).fill().map(() => Math.round(Math.random() * 30)) )));
  48.         }
  50.         // Layer name
  51.         this.layerTitle = this.getAttribute('layerTitle') || 'Features table: error';
  53.         // Layer id
  54.         this.layerId = this.getAttribute('layerId');
  56.         // Error text
  57.         this.error = null;
  59.         // Get the layer name & configuration
  60.         this.layerConfig = null;
  61.         if (mainLizmap.initialConfig.layers.layerIds.includes(this.layerId)) {
  62.             this.layerConfig = mainLizmap.initialConfig.layers.getLayerConfigByLayerId(this.layerId);
  63.         }
  65.         // Primary key field
  66.         this.uniqueField = this.getAttribute('uniqueField');
  68.         // Expression filter
  69.         this.expressionFilter = this.getAttribute('expressionFilter');
  71.         // Get the geometry or NetworkError
  72.         this.withGeometry = this.hasAttribute('withGeometry');
  74.         // Sorting attribute
  75.         this.sortingField = this.getAttribute('sortingField');
  76.         // Sorting order
  77.         const sortingOrder = this.getAttribute('sortingOrder');
  78.         this.sortingOrder = (sortingOrder !== null && ['asc', 'desc'].includes(sortingOrder.toLowerCase())) ? sortingOrder : 'asc';
  80.         // open popup ?
  81.         this.openPopup = (this.layerConfig && this.layerConfig.popup);
  83.         // Add drag&drop capability ?
  84.         const draggable = this.getAttribute('draggable');
  85.         this.itemsDraggable = (draggable !== null && ['yes', 'no'].includes(draggable.toLowerCase())) ? draggable : 'no';
  87.         // Features
  88.         this.features = [];
  90.         // Additional Fields JSON
  91.         this.additionalFields = {fields:[]};
  93.         // Clicked item line number
  94.         this.activeItemLineNumber = null;
  96.         // Maximum number of features
  97.         this.maxFeatures = (this.dataset.maxFeatures > 0) ? this.dataset.maxFeatures : 1000;
  98.     }
  100.     /**
  101.      * Load features from the layer and configured filter
  102.      */
  103.     async load() {
  104.         if (this.dataset.showHighlightedFeatureGeometry === 'true') {
  105.             // Remove the highlight on the map
  106.             mainLizmap.map.clearHighlightFeatures();
  107.         }
  109.         // Build needed fields
  110.         let fields = `${this.uniqueField}`;
  111.         if (this.sortingField) {
  112.             fields += ',' + this.sortingField;
  113.         }
  115.         let uniqueAdditionalFields = [];
  117.         // Create a unique JSON object for PHP request
  118.         if (!this.isAdditionalFieldsEmpty()) {
  119.             uniqueAdditionalFields = {};
  121.             this.additionalFields.fields.forEach(field => {
  122.                 uniqueAdditionalFields[field.alias] = field.expression;
  123.             });
  124.         }
  125.         // Get the features corresponding to the given parameters from attributes
  126.         mainLizmap.featuresTable.getFeatures(this.layerId, this.expressionFilter, this.withGeometry, fields, uniqueAdditionalFields, this.maxFeatures, this.sortingField, this.sortingOrder)
  127.             .then(displayExpressions => {
  128.                 // Check for errors
  129.                 if (!('status' in displayExpressions)) return;
  131.                 if (displayExpressions.status != 'success') {
  132.                     console.error(displayExpressions.error);
  133.                 } else {
  135.                     // Set component data property
  136.                     this.features = displayExpressions.data;
  137.                 }
  139.                 // Render
  140.                 this.render();
  142.                 // If an error occurred, replace empty content with error
  143.                 if (displayExpressions.status != 'success') {
  144.                     this.querySelector('table.lizmap-features-table-container').innerHTML = `<p style="padding: 3px;">
  145.                     ${displayExpressions.error}
  146.                     </p>`;
  147.                 }
  148.             })
  149.             .catch(err => {
  150.                 // Display an error message
  151.                 console.warn(err.message);
  152.                 this.innerHTML = `<p style="padding: 3px;">${err.message}</p>`;
  153.             })
  154.     }
  156.     /**
  157.      * Render component from the template using Lit
  158.      */
  159.     render() {
  160.         // Render with lit-html
  161.         render(this._template(), this);
  163.         // If there is not features, add empty content in the container
  164.         if (this.features.length === 0) {
  165.             this.querySelector('table.lizmap-features-table-container').innerHTML = '&nbsp;';
  166.         } else {
  168.             // Add drag & drop capabilities if option is set
  169.             if (this.itemsDraggable == 'yes') {
  170.                 this.addDragAndDropCapabilities();
  171.             }
  173.             // Toggle the feature detail
  174.             this.toggleFeatureDetail();
  175.         }
  177.         /**
  178.          * When the table has been successfully displayed. The event carries the lizmap-features-table HTML element ID
  179.          * @event features.table.rendered
  180.          * @property {string} elementId HTML element ID
  181.          */
  182.         mainEventDispatcher.dispatch({
  183.             type: 'features.table.rendered',
  184.             elementId: this.id
  185.         });
  187.     }
  189.     /**
  190.      * Get the feature corresponding to the given feature ID
  191.      * @param {number} featureId WFS Feature ID
  192.      * @returns {object | null} WFS Feature
  193.      */
  194.     getFeatureById(featureId) {
  195.         if (this.features.length === 0) {
  196.             return null;
  197.         }
  199.         return this.features.find(feature => feature.properties.feature_id == featureId);
  200.     }
  202.     /**
  203.      * Toggle the display of the active feature details
  204.      *
  205.      */
  206.     toggleFeatureDetail() {
  207.         // Do nothing if features have not been fetched yet
  208.         // This is important to be able to create a new element
  209.         // with its attribute data-active-item-feature-id set to a feature ID
  210.         if (!this.features.length) return;
  212.         // Get the value store in the dataset attribute
  213.         const activeItemFeatureId = this.dataset.activeItemFeatureId;
  214.         // console.log(`Toggle. activeItemFeatureId = ${activeItemFeatureId}`);
  216.         // We should hide or display the features details
  217.         // depending on the attribute value
  218.         // If it is empty or a string 'null', hide the popup and remove the geometry
  219.         // It is set to an existing feature ID, display the popup and the feature geometry
  220.         if (!activeItemFeatureId || activeItemFeatureId === 'null') {
  221.             // activeItemFeatureId empty or a string 'null'
  222.             // deactivate the display of feature details (popup, geometry, etc.)
  223.             if (this.openPopup) {
  224.                 // Hide the popup and display the list of features
  225.                 const item = this.querySelector('tr.lizmap-features-table-item.popup-displayed');
  226.                 if (item) item.classList.remove('popup-displayed');
  228.                 // Set the tr title back to original
  229.                 this.querySelectorAll('tr.lizmap-features-table-item').forEach(tr => {
  230.                     tr.setAttribute(
  231.                         'title',
  232.                         `${lizDict['featuresTable.item.hover'] + '.'} ${this.itemsDraggable == 'yes' ? lizDict['featuresTable.item.draggable.hover'] + '.' : ''}`
  233.                     );
  234.                 });
  236.                 // Also remove the popup-displayed class from the div
  237.                 const div = this.querySelector('div.lizmap-features-table.popup-displayed');
  238.                 if (div) div.classList.remove('popup-displayed');
  239.             }
  241.             // Remove the highlight on the map
  242.             if (this.dataset.showHighlightedFeatureGeometry === 'true') {
  243.                 mainLizmap.map.clearHighlightFeatures();
  244.             }
  246.             // Reset the active line number
  247.             this.activeItemLineNumber = null;
  248.         } else {
  249.             // activeItemFeatureId is set
  250.             // activate the display of feature details (popup, geometry, etc.)
  252.             // Set the active line number
  253.             const lineTr = this.querySelector(`tr.lizmap-features-table-item[data-feature-id="${activeItemFeatureId}"]`);
  254.             if (lineTr) {
  255.                 this.activeItemLineNumber = parseInt(lineTr.dataset.lineId);
  256.             }
  258.             // Get the WFS feature
  259.             const activeFeature = this.getFeatureById(activeItemFeatureId);
  260.             // If no feature corresponds, we should deactivate the features detail
  261.             if (!activeFeature) {
  262.                 this.setAttribute("data-active-item-feature-id", "");
  264.                 return;
  265.             }
  267.             // Display the feature popup
  268.             if (this.openPopup) {
  269.                 this.displayFeaturePopup(activeFeature);
  270.             }
  272.             // Center the map on the clicked element if the feature has a geometry
  273.             if (activeFeature.geometry && this.dataset.centerToHighlightedFeatureGeometry === 'true') {
  274.                 const geom = (new GeoJSON()).readGeometry(activeFeature.geometry, {
  275.                     dataProjection: 'EPSG:4326',
  276.                     featureProjection: lizMap.mainLizmap.projection
  277.                 });
  278.                 mainLizmap.map.zoomToGeometryOrExtent(geom, { duration: 150 });
  279.             }
  281.             // Highlight the clicked element on the map
  282.             if (this.dataset.showHighlightedFeatureGeometry === 'true') {
  283.                 mainLizmap.map.setHighlightFeatures(
  284.                     activeFeature,
  285.                     "geojson",
  286.                     "EPSG:4326",
  287.                 );
  288.             }
  290.             // Dispatch event
  291.             /**
  292.              * When the user has selected an item and highlighted it
  293.              * @event features.table.item.highlighted
  294.              * @property {string} itemFeatureId The feature ID of the selected item
  295.              */
  296.             mainEventDispatcher.dispatch({
  297.                 type: 'features.table.item.highlighted',
  298.                 itemFeatureId: activeItemFeatureId,
  299.             });
  301.         }
  302.     }
  304.     /**
  305.      * Get the feature popup HTML content
  306.      * and display it
  307.      * @param {object} feature WFS feature
  308.      */
  309.     displayFeaturePopup(feature) {
  310.         // Get the default title for the table lines (tr)
  311.         const defaultItemTitle = `${lizDict['featuresTable.item.hover']}. ${this.itemsDraggable == 'yes' ? lizDict['featuresTable.item.draggable.hover'] + '.' : ''}`;
  313.         // Fetch the feature popup HTML and use it to display the popup
  314.         mainLizmap.featuresTable.openPopup(
  315.             this.layerId,
  316.             feature,
  317.             this.uniqueField,
  318.             this.querySelector('div.lizmap-features-table-item-popup'),
  319.             function(aLayerId, aFeature, aTarget) {
  320.                 // Add bootstrap classes to the popup tables
  321.                 const popupTable = aTarget.querySelector('table.lizmapPopupTable');
  322.                 if (popupTable) {
  323.                     popupTable.classList.add('table', 'table-condensed', 'table-sm', 'table-bordered', 'table-striped');
  324.                 }
  326.                 // Show popup and hide other children
  327.                 const featuresTableDiv = aTarget.parentElement;
  328.                 if (featuresTableDiv) {
  329.                     // Add class to the parent
  330.                     featuresTableDiv.classList.add('popup-displayed');
  332.                     // Remove popup-displayed for all other items
  333.                     // And restore previous title
  334.                     var items = featuresTableDiv.querySelectorAll('table.lizmap-features-table-container tr.lizmap-features-table-item.popup-displayed');
  335.                     Array.from(items).forEach(item => {
  336.                         item.classList.remove('popup-displayed');
  337.                         item.setAttribute('title', defaultItemTitle);
  338.                     });
  340.                     // Add class to the active item
  341.                     const childSelector = `tr.lizmap-features-table-item[data-feature-id="${feature.properties.feature_id}"]`;
  342.                     const activeItem = featuresTableDiv.querySelector(childSelector);
  343.                     if (activeItem) activeItem.classList.add('popup-displayed');
  345.                     // Change title
  346.                     activeItem.setAttribute(
  347.                         'title',
  348.                         lizDict['featuresTable.item.active.hover']
  349.                     );
  351.                     // Toggle previous/next buttons depending on active line id
  352.                     const previousButton = featuresTableDiv.querySelector('div.lizmap-features-table-toolbar button.previous-popup');
  353.                     const nextButton = featuresTableDiv.querySelector('div.lizmap-features-table-toolbar button.next-popup');
  354.                     previousButton.style.display = (activeItem.dataset.lineId == 1) ? 'none' : 'initial';
  355.                     nextButton.style.display = (activeItem.dataset.lineId == featuresTableDiv.dataset.featuresCount) ? 'none' : 'initial';
  356.                 }
  357.             }
  358.         );
  359.     }
  361.     /**
  362.      * Display a popup when a feature item is clicked
  363.      * @param {Event} event Click event on a feature item
  364.      * @param {number} featureId WFS feature ID
  365.      */
  366.     onItemClick(event, featureId) {
  367.         // console.log('onItemClick - top');
  368.         // Check if the item was active
  369.         const itemWasActive = (this.dataset.activeItemFeatureId == featureId);
  371.         // Set the features table properties
  372.         if (!itemWasActive) {
  373.             this.setAttribute('data-active-item-feature-id', featureId);
  374.         } else {
  375.             this.setAttribute('data-active-item-feature-id', "");
  376.             this.activeItemLineNumber = null;
  377.         }
  378.     }
  381.     /**
  382.      * Add drag&drop capabilities to the lizmap-features-table element
  383.      *
  384.      * A request is sent when the order changes
  385.      */
  386.     addDragAndDropCapabilities() {
  387.         // Add drag and drop events to table items
  388.         const items = this.querySelectorAll('table.lizmap-features-table-container tr.lizmap-features-table-item');
  389.         if (!items) return;
  391.         Array.from(items).forEach(item => {
  392.             item.setAttribute('draggable', 'true');
  393.             item.addEventListener('dragstart', onDragStart)
  394.             item.addEventListener('drop', OnDropped)
  395.             item.addEventListener('dragenter', onDragEnter)
  396.             item.addEventListener('dragover', onDragOver)
  397.             item.addEventListener('dragleave', onDragLeave)
  398.             item.addEventListener('dragend', onDragEnd)
  399.         });
  401.         // Utility functions for drag & drop capability
  402.         /**
  403.          * Action when an item is dragged
  404.          * @param {Event} e Drag event
  405.          */
  406.         function onDragStart (e) {
  407.             const index = [].indexOf.call(e.target.parentElement.children, e.target);
  408.             e.dataTransfer.setData('text/plain', index)
  409.         }
  411.         /**
  412.          * Action on drag enter
  413.          * @param {Event} e Drag event
  414.          */
  415.         function onDragEnter (e) {
  416.             cancelDefault(e);
  417.         }
  419.         /**
  420.          * Action when an item is dragged over another
  421.          * @param {Event} e Drag event
  422.          */
  423.         function onDragOver (e) {
  424.             // Change the target element's style to signify a drag over event
  425.             // has occurred
  426.             e.currentTarget.style.background = "lightblue";
  428.             cancelDefault(e);
  429.         }
  431.         /**
  432.          * Action when an item is dragged out of another
  433.          * @param {Event} e Drag event
  434.          */
  435.         function onDragLeave (e) {
  436.             // Change the target element's style back to default
  437.             e.currentTarget.style.background = "";
  438.             cancelDefault(e);
  439.         }
  441.         /**
  442.          * Wait for a delay
  443.          * @param {number} delay Delay in milliseconds
  444.          * @returns {Promise} Promise that resolves after the delay
  445.          */
  446.         function waitForIt(delay) {
  447.             return new Promise((resolve) => setTimeout(resolve, delay))
  448.         }
  450.         /**
  451.          * Action when an item is dropped
  452.          * @param {Event} e Drag event
  453.          */
  454.         function OnDropped (e) {
  455.             cancelDefault(e)
  457.             // Change the target element's style back to default
  458.             // Celui sur lequel on a lâché l'item déplacé
  459.             e.currentTarget.style.background = "";
  461.             // Get item
  462.             const item = e.currentTarget;
  464.             // Get dragged item old and new index
  465.             const oldIndex = e.dataTransfer.getData('text/plain');
  467.             // Get the dropped item
  468.             const dropped = item.parentElement.children[oldIndex];
  470.             // Emphasize the element
  471.             // So that the user sees it well after drop
  472.             dropped.style.border = "2px solid var(--color-contrasted-elements)";
  474.             // Move the dropped items at new place
  475.             item.before(dropped);
  477.             // Set the new line number to the items
  478.             let i = 1;
  479.             for (const child of item.parentElement.children) {
  480.                 if (!child.classList.contains('lizmap-features-table-item')) {
  481.                     continue;
  482.                 }
  483.                 const lineId = i;
  484.                 child.dataset.lineId = lineId;
  485.                 i++;
  486.             }
  488.             // Send event
  489.             const movedFeatureId = dropped.dataset.featureId;
  490.             const newItem = item.parentElement.querySelector(`tr.lizmap-features-table-item[data-feature-id="${movedFeatureId}"]`);
  492.             // Set the new active line number
  493.             this.activeItemLineNumber = parseInt(newItem.dataset.lineId);
  495.             /**
  496.              * When the user has dropped an item in a new position
  497.              * @event features.table.item.dragged
  498.              * @property {string} itemFeatureId The vector feature ID
  499.              * @property {string} itemOldLineId The original line ID before dropping the item
  500.              * @property {string} itemNewLineId The new line ID after dropping the item in a new position
  501.              */
  502.             mainEventDispatcher.dispatch({
  503.                 type: 'features.table.item.dragged',
  504.                 itemFeatureId: movedFeatureId,
  505.                 itemOldLineId: dropped.dataset.lineId,
  506.                 itemNewLineId: newItem.dataset.lineId
  507.             });
  508.         }
  510.         /**
  511.          * Action when an item has finished being dragged
  512.          * @param {Event} e Drag event
  513.          */
  514.         async function onDragEnd (e) {
  515.             // Restore style after some time
  516.             await waitForIt(3000);
  517.             e.target.style.border = "";
  518.             // e.target.style.backgroundColor = "";
  520.             cancelDefault(e);
  521.         }
  523.         /**
  524.          * Prevent the default behavior of an event
  525.          * @param {Event} e event
  526.          * @returns {boolean} False
  527.          */
  528.         function cancelDefault (e) {
  529.             e.preventDefault();
  530.             e.stopPropagation();
  532.             return false;
  533.         }
  536.     }
  539.     connectedCallback() {
  540.         // console.log('connectedCallback - top');
  541.         if (this.querySelector("lizmap-field")) {
  542.             const listField = this.querySelectorAll("lizmap-field");
  544.             const verifiedFields = this.verifyFields(listField);
  546.             verifiedFields.forEach((field) => {
  547.                 const fieldExpression = field.innerText;
  548.                 const fieldDescription = field.dataset.description;
  549.                 let fieldAlias = field.dataset.alias;
  550.                 if (!fieldAlias) fieldAlias = fieldExpression.replaceAll('"', '');
  551.                 // Prevent all fields goes on one tab instead of the other when multiple layers are clicked on
  552.                 if (btoa(fieldAlias) in this.additionalFields.fields) {
  553.                     field.remove();
  554.                     return;
  555.                 }
  557.                 this.additionalFields.fields.push({
  558.                     'alias': btoa(fieldAlias),
  559.                     'expression': fieldExpression,
  560.                     'description': fieldDescription
  561.                 });
  563.                 field.remove();
  564.             });
  565.         }
  567.         // Template
  568.         this._template = () => html`
  569.             <div class="lizmap-features-table" data-features-count="${this.features.length}"
  570.                 title="${lizDict['bob']}">
  571.                 <h4>${this.layerTitle}</h4>
  572.                 <div class="lizmap-features-table-toolbar">
  573.                     <button class="btn btn-mini previous-popup"
  574.                         title="${lizDict['featuresTable.toolbar.previous']}"
  575.                         @click=${() => {
  576.                         // Click on the previous item
  577.                         const lineNumber = this.activeItemLineNumber - 1;
  578.                         const featureDiv = this.querySelector(`tr.lizmap-features-table-item[data-line-id="${lineNumber}"]`);
  579.                         if (featureDiv) featureDiv.click();
  580.                     }}></button>
  581.                     <button class="btn btn-mini next-popup"
  582.                         title="${lizDict['featuresTable.toolbar.next']}"
  583.                         @click=${() => {
  584.                         // Click on the next item
  585.                         const lineNumber = this.activeItemLineNumber + 1;
  586.                         const featureDiv = this.querySelector(`tr.lizmap-features-table-item[data-line-id="${lineNumber}"]`);
  587.                         if (featureDiv) featureDiv.click();
  588.                     }}></button>
  589.                     <button class="btn btn-mini close-popup"
  590.                         title="${lizDict['featuresTable.toolbar.close']}"
  591.                         @click=${() => {
  592.                         const checkFeatureId = (this.dataset.activeItemFeatureId) ?? "";
  593.                         if (!checkFeatureId) return;
  594.                         this.dataset.activeItemFeatureId = ""
  595.                     }}></button>
  596.                 </div>
  597.                 <table class="table table-sm table-bordered table-condensed lizmap-features-table-container">
  598.                     ${this.buildLabels()}
  599.                     <tbody>
  600.                         ${this.features.map((feature, idx) =>
  601.                         html`
  602.                         <tr
  603.                             class="lizmap-features-table-item ${this.openPopup ? 'has-action' : ''}"
  604.                             data-layer-id="${this.layerId}"
  605.                             data-feature-id="${feature.properties.feature_id}"
  606.                             data-line-id="${idx+1}"
  607.                             title="${this.openPopup ? lizDict['featuresTable.item.hover'] + '.': ''} ${this.itemsDraggable == 'yes' ? lizDict['featuresTable.item.draggable.hover'] + '.' : ''}"
  608.                             @click=${event => {
  609.                                 this.onItemClick(event, feature.properties.feature_id);
  610.                             }}
  611.                         >
  612.                             ${this.buildColumns(feature.properties)}
  613.                         </tr>
  614.                         `
  615.                         )}
  616.                     </tbody>
  617.                 </table>
  618.                 <div class="lizmap-features-table-item-popup"></div>
  619.             </div>
  620.         `;
  622.         // Load
  623.         this.load();
  624.     }
  626.     /**
  627.      * Build the columns of the table
  628.      * @param {object} properties - Object containing the properties of the feature
  629.      * @returns {TemplateResult} The columns of the table
  630.      */
  631.     buildColumns(properties) {
  633.         let result = html`
  634.                 ${this.buildDisplayExpressionColumn(properties)}
  635.             `;
  637.         if (!this.isAdditionalFieldsEmpty()) {
  638.             this.additionalFields.fields.forEach(field => {
  639.                 let td = html`
  640.                 <td
  641.                   class="lizmap-features-table-item"
  642.                 >
  643.                     ${properties[field.alias]}
  644.                 </td>
  645.             `;
  646.                 result = html`
  647.                 ${result}
  648.                 ${td}
  649.             `;
  650.             });
  651.         }
  653.         return result;
  654.     }
  656.     /**
  657.      * Initialize tab with the first column "display_expression"
  658.      * @param {object} properties - Object containing the properties of the feature
  659.      * @returns {TemplateResult} The first column of the table
  660.      */
  661.     buildDisplayExpressionColumn(properties) {
  662.         if (this.isGeneralLabelExisting()) {
  663.             return html`
  664.                 <td class="lizmap-features-table-item">
  665.                     ${properties.display_expression}
  666.                 </td>
  667.             `;
  668.         } else {
  669.             return html``;
  670.         }
  671.     }
  673.     /**
  674.      * Initialize the labels of the table
  675.      * @returns {TemplateResult} The labels of the table
  676.      */
  677.     buildLabels() {
  678.         if (this.isAdditionalFieldsEmpty()) {
  679.             return html``;
  680.         }
  682.         let result;
  684.         this.additionalFields.fields.forEach(field => {
  685.             let th = html`
  686.             <th
  687.               class="border lizmap-features-table-item"
  688.               title="${(field.description) ? field.description : ''}"
  689.             >
  690.               ${atob(field.alias)}
  691.             </th>
  692.             `;
  693.             result = html`
  694.                 ${result}
  695.                 ${th}
  696.             `;
  697.         });
  699.         if (this.isGeneralLabelExisting()) {
  700.             // First th to create an empty column for "display_expression"
  701.             return html`
  702.                 <thead>
  703.                     <tr class="border-0">
  704.                         <th class="border-0 lizmap-features-table-item-empty"></th>
  705.                         ${result}
  706.                     </tr>
  707.                 </thead>
  708.             `;
  709.         } else {
  710.             return html`
  711.                 <thead>
  712.                     <tr>
  713.                         ${result}
  714.                     </tr>
  715.                 </thead>
  716.             `;
  717.         }
  720.     }
  722.     /**
  723.      * Check if the additionalFields property is empty
  724.      * @returns {boolean} True if the additionalFields property is empty
  725.      */
  726.     isAdditionalFieldsEmpty() {
  727.         return this.additionalFields.fields.length === 0;
  728.     }
  730.     /**
  731.      * Check if the general label "display_expression" is existing
  732.      * @returns {boolean} True if the general label "display_expression" is existing
  733.      */
  734.     isGeneralLabelExisting() {
  735.         return this.features[0].properties.hasOwnProperty('display_expression');
  736.     }
  738.     /**
  739.      * Verify if there's no fields with the same alias or expression
  740.      * @param {Array.<object>} listField - List of fields
  741.      * @returns {Array.<object>} - List of verified fields
  742.      */
  743.     verifyFields(listField) {
  744.         let verifiedFields = [listField[0]];
  746.         for (let i = 1; i < listField.length; i++) {
  747.             const fieldAlias = listField[i].dataset.alias;
  748.             const fieldExpression = listField[i].innerText;
  749.             let isValid = true;
  751.             verifiedFields.forEach(field => {
  752.                 if (field.innerText === fieldExpression) {
  753.                     listField[i].remove();
  754.                     isValid = false;
  755.                 } else if (field.dataset.alias === fieldAlias && field.dataset.alias !== "") {
  756.                     // Remove the field if the alias is already used but not when they are both empty because fields will be automatically different
  757.                     listField[i].remove();
  758.                     isValid = false;
  759.                 }
  760.             })
  762.             if (isValid) {
  763.                 verifiedFields.push(listField[i]);
  764.             }
  765.         }
  767.         return verifiedFields;
  768.     }
  770.     static get observedAttributes() { return ['updated','expressionfilter', 'data-active-item-feature-id']; }
  772.     attributeChangedCallback(name, oldValue, newValue) {
  773.         // Listen to the change of the updated attribute
  774.         // This will trigger the load (refresh the content)
  775.         // Be aware that the name returned here is always lowercase
  776.         if (name === 'updated') {
  777.             // console.log('Reload features table');
  778.             this.load();
  779.         }
  781.         // Also reload when the expressionFilter has changed
  782.         if (name === 'expressionfilter') {
  783.             // Prevent features table to load two time at its creation
  784.             if (oldValue && newValue && oldValue != newValue) {
  785.                 // console.log('Reload the table with the new expressionFilter');
  786.                 this.expressionFilter = newValue;
  787.                 this.load();
  788.             }
  789.         }
  791.         // Check for the data-active-item-feature-id
  792.         if (name === 'data-active-item-feature-id') {
  793.             if (oldValue != newValue) {
  794.                 // console.log(`Attribute data-active-item-feature-id changed, OLD = ${oldValue}, NEW = ${newValue}`);
  795.                 this.toggleFeatureDetail();
  796.             }
  797.         }
  798.     }
  799.     disconnectedCallback() {
  801.     }
  802. }