ol-wfst 4.2.0 → 4.4.0

package/lib/ol-wfst.js

@@ -1,7 +1,7 @@
 /*!
- * ol-wfst - v4.2.0
+ * ol-wfst - v4.4.0
  * https://github.com/GastonZalba/ol-wfst#readme
- * Built: Sat Sep 30 2023 12:32:25 GMT-0300 (Argentina Standard Time)
+ * Built: Sun May 05 2024 21:49:12 GMT-0300 (Argentina Standard Time)
 */
 import CircleStyle from 'ol/style/Circle.js';
 import Fill$1 from 'ol/style/Fill.js';
@@ -657,6 +657,9 @@ class WmsLayer extends Mixin(BaseLayer, (TileLayer)) {
         if (options.beforeTransactFeature) {
             this.beforeTransactFeature = options.beforeTransactFeature;
         }
+        if (options.beforeShowFieldsModal) {
+            this.beforeShowFieldsModal = options.beforeShowFieldsModal;
+        }
         this._formatGeoJSON = new GeoJSON();
         const geoserver = options.geoserver;
         const source = new WmsSource({
@@ -724,6 +727,9 @@ class WmsLayer extends Mixin(BaseLayer, (TileLayer)) {
             const data = await response.json();
             let features = this._parseFeaturesFromResponse(data);
             const featuresId = features.map((f) => f.getId());
+            if (!featuresId.length) {
+                return;
+            }
             const fullResList = await this._getFullResGeometryById(featuresId);
             if (fullResList) {
                 features = fullResList;
@@ -947,17 +953,21 @@ class LayersControl extends Observable {
             layer.setVisible(false);
         }
     }
+    /**
+     * Called when a layer is selected in the widget
+     * @param evt
+     * @param layer
+     */
     _layerChangeHandler(evt, layer) {
-        const radioInput = evt.currentTarget;
-        const parentDiv = radioInput.closest('.wfst--layer-control');
-        // Deselect DOM previous layer
         const selected = document.querySelector('.ol-wfst--selected-on');
-        if (selected)
-            selected.classList.remove('ol-wfst--selected-on');
+        const parentDiv = evt.currentTarget.closest('.wfst--layer-control');
+        // Deselect DOM previous layer
+        selected.classList.remove('ol-wfst--selected-on');
         // Select this layer
         parentDiv.classList.add('ol-wfst--selected-on');
         setActiveLayerToInsertEls(layer);
         this._changeStateSelect(layer);
+        this.dispatchEvent('changeLayer');
     }
     render() {
         return (createElement(null, null,
@@ -1416,23 +1426,37 @@ class EditFieldsModal extends Observable {
     constructor(options) {
         super();
         this._options = options;
-        const footer = `
-            <button type="button" class="btn btn-sm btn-link btn-third" data-action="delete" data-dismiss="modal">
-                ${I18N.labels.delete}
-            </button>
-            <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">
-                ${I18N.labels.cancel}
-            </button>
-            <button type="button" class="btn btn-sm btn-primary" data-action="save" data-dismiss="modal">
-                ${I18N.labels.save}
-            </button>
-        `;
-        this._modal = new Modal(Object.assign(Object.assign({}, this._options), { header: true, headerClose: true, title: '', content: '<div></div>', footer: footer }));
+        this._modal = new Modal(Object.assign(Object.assign({}, this._options.modal), { header: true, headerClose: true, title: '', content: createElement("div", null), footer: `
+                <button
+                    type="button"
+                    class="btn btn-sm btn-link btn-third"
+                    data-action="delete"
+                    data-dismiss="modal"
+                >
+                    ${I18N.labels.delete}
+                </button>
+                <button
+                    type="button"
+                    class="btn btn-sm btn-secondary"
+                    data-dismiss="modal"
+                >
+                    ${I18N.labels.cancel}
+                </button>
+                <button
+                    type="button"
+                    class="btn btn-sm btn-primary"
+                    data-action="save"
+                    data-dismiss="modal"
+                >
+                    ${I18N.labels.save}
+                </button>
+            ` }));
         this._modal.on('dismiss', (modal, event) => {
             // On saving changes
             if (event.target.dataset.action === 'save') {
-                const inputs = modal.el.querySelectorAll('input');
-                inputs.forEach((el) => {
+                const formElements = modal.el.querySelector('form')
+                    .elements;
+                Array.from(formElements).forEach((el) => {
                     const value = el.value;
                     const field = el.name;
                     this._feature.set(field, value, /*isSilent = */ true);
@@ -1448,45 +1472,55 @@ class EditFieldsModal extends Observable {
     }
     show(feature) {
         this._feature = feature;
-        const title = `${I18N.labels.editElement} ${feature.getId()} `;
-        const properties = feature.getProperties();
+        const modalTitle = `${I18N.labels.editElement} ${feature.getId()} `;
+        const featProperties = feature.getProperties();
         const layerName = feature.get('_layerName_');
         // Data schema from the geoserver
         const layer = getStoredLayer(layerName);
         const dataSchema = layer.getDescribeFeatureType()._parsed.properties;
-        let content = '<form autocomplete="false">';
-        Object.keys(properties).forEach((key) => {
+        this._modal._html.body.innerHTML = '';
+        this._modal._html.body.append(createElement("form", { autocomplete: "false" }, Object.keys(featProperties).flatMap((key) => {
             // If the feature field exists in the geoserver and is not added by openlayers
             const field = dataSchema.find((data) => data.name === key);
-            if (field) {
-                const typeXsd = field.type;
-                let type;
-                switch (typeXsd) {
-                    case 'xsd:string':
-                        type = 'text';
-                        break;
-                    case 'xsd:number':
-                    case 'xsd:int':
-                        type = 'number';
-                        break;
-                    case 'xsd:date-time':
-                        type = 'datetime';
-                        break;
-                    default:
-                        type = 'text';
+            if (!field)
+                return [];
+            const typeXsd = field.type;
+            const value = featProperties[key];
+            let type;
+            switch (typeXsd) {
+                case 'xsd:double':
+                case 'xsd:number':
+                case 'xsd:int':
+                    type = 'number';
+                    break;
+                case 'xsd:date':
+                    type = 'date';
+                    break;
+                case 'xsd:date-time':
+                    type = 'datetime';
+                    break;
+                case 'xsd:string':
+                default:
+                    type = 'text';
+            }
+            let input = (createElement("input", { placeholder: "NULL", className: "ol-wfst--input-field-input", type: type, name: key, value: value || null }));
+            if (layer.beforeShowFieldsModal) {
+                const hookInput = layer.beforeShowFieldsModal(field, value, input);
+                if (!hookInput) {
+                    return [];
+                }
+                if (typeof hookInput === 'string') {
+                    input = new DOMParser().parseFromString(hookInput, 'text/html').body.childNodes[0];
                 }
-                if (type) {
-                    content += `
-                <div class="ol-wfst--input-field-container">
-                    <label class="ol-wfst--input-field-label" for="${key}">${key}</label>
-                    <input placeholder="NULL" class="ol-wfst--input-field-input" type="${type}" name="${key}" value="${properties[key] || ''}">
-                </div>`;
+                else {
+                    input = hookInput;
                 }
             }
-        });
-        content += '</form>';
-        this._modal._html.body.innerHTML = content;
-        this._modal._html.header.innerHTML = title;
+            return (createElement("div", { className: "ol-wfst--input-field-container" },
+                createElement("label", { className: "ol-wfst--input-field-label", htmlFor: key }, key),
+                input));
+        })));
+        this._modal._html.header.innerHTML = modalTitle;
         this._modal.show();
     }
 }
@@ -1831,9 +1865,12 @@ class Geoserver extends BaseObject {
                         throw new Error(`${I18N.errors.layerNotFound}: "${layerName}"`);
                     }
                     const describeFeatureType = geoLayer.getDescribeFeatureType()._parsed;
+                    const layerNameClean = layerName.split(':').length > 1
+                        ? layerName.split(':').pop()
+                        : layerName;
                     const options = {
                         featureNS: describeFeatureType.namespace,
-                        featureType: layerName,
+                        featureType: layerNameClean,
                         srsName: srs,
                         featurePrefix: null,
                         nativeElements: null,
@@ -1861,7 +1898,7 @@ class Geoserver extends BaseObject {
                     if (transactionType === TransactionType.Insert) {
                         payload = payload.replace(/<(\/?)\bgeometry\b>/g, `<$1${geomField}>`);
                     }
-                    else {
+                    else if (transactionType === TransactionType.Update) {
                         payload = payload.replace(/<Name>geometry<\/Name>/g, `<Name>${geomField}</Name>`);
                     }
                     // This has to be te same used before
@@ -2078,7 +2115,7 @@ class EditOverlay extends Overlay {
 
 const controlElement = document.createElement('div');
 /**
- * Tiny WFST-T client to insert (drawing/uploading), modify and delete
+ * Tiny WFS-T client to insert (drawing/uploading), modify and delete
  * features on GeoServers using OpenLayers. Layers with these types
  * of geometries are supported: "GeometryCollection" (in this case, you can
  * choose the geometry type of each element to draw), "Point", "MultiPoint",
@@ -2113,7 +2150,7 @@ class Wfst extends Control {
         this._controlWidgetToolsDiv = controlElement;
         this._controlWidgetToolsDiv.className = 'ol-wfst--tools-control';
         this._uploads = new Uploads(this._options);
-        this._editFields = new EditFieldsModal(this._options.modal);
+        this._editFields = new EditFieldsModal(this._options);
     }
     /**
      * Get all the layers in the ol-wfst instance
@@ -2220,7 +2257,7 @@ class Wfst extends Control {
             this._collectionModify.remove(feature);
         });
         // @ts-expect-error
-        this._editFields.dispose('delete', ({ feature }) => {
+        this._editFields.on('delete', ({ feature }) => {
             this._deleteFeature(feature, true);
         });
         this._addMapEvents();
@@ -2468,6 +2505,12 @@ class Wfst extends Control {
                 this.activateDrawMode(getActiveLayerToInsertEls());
             }
         });
+        // @ts-expect-error
+        this._layersControl.on('changeLayer', () => {
+            if (getMode() === Modes.Draw) {
+                this.activateDrawMode(getActiveLayerToInsertEls());
+            }
+        });
         const controlEl = this._layersControl.render();
         this._selectDraw = controlEl.querySelector('.wfst--tools-control--select-draw');
         this._controlWidgetToolsDiv.append(controlEl);