feat: add a back button in rules form (#2673)

To go back in rules list.

fix #2631


![image](https://github.com/user-attachments/assets/d0ad67fe-90c1-45c5-8bca-5ac30ef8366a)

umap/static/umap/js/modules/rules.js

@@ -136,7 +136,21 @@ class Rule {
           .map((str) => `${value}${str || ''}`)
       }
     })
-    this._umap.editPanel.open({ content: container, highlight: 'settings' })
+    const backButton = Utils.loadTemplate(`
+      <button class="flat" type="button" data-ref="add">
+        <i class="icon icon-16 icon-back" title="${translate('Back to list')}"></i>
+      </button>`)
+    backButton.addEventListener('click', () =>
+      this._umap.edit().then(() => {
+        this._umap.editPanel.container.querySelector('details#rules').open = true
+      })
+    )
+
+    this._umap.editPanel.open({
+      content: container,
+      highlight: 'settings',
+      actions: [backButton],
+    })
   }
 
   renderToolbox(ul) {
@@ -194,6 +208,7 @@ export default class Rules {
   }
 
   onReorder(src, dst, initialIndex, finalIndex) {
+    const oldRules = Utils.CopyJSON(this._umap.properties.rules || {})
     const moved = this.rules.find((rule) => stamp(rule) === +src.dataset.id)
     const reference = this.rules.find((rule) => stamp(rule) === +dst.dataset.id)
     const movedIdx = this.rules.indexOf(moved)
@@ -209,14 +224,17 @@ export default class Rules {
     this.rules.splice(newIdx, 0, moved)
     this._umap.render(['rules'])
     this.commit()
+    this._umap.sync.update('properties.rules', this._umap.properties.rules, oldRules)
   }
 
   edit(container) {
     const template = `
-      <details>
+      <details id="rules">
         <summary>${translate('Conditional style rules')}</summary>
-        <fieldset><ul data-ref=ul></ul></fieldset>
+        <fieldset>
-        <button class="umap-add" type="button" data-ref=add>${translate('Add rule')}</button>
+          <ul data-ref=ul></ul>
+          <button class="umap-add" type="button" data-ref=add>${translate('Add rule')}</button>
+        </fieldset>
       </details>
     `
     const [body, { ul, add }] = Utils.loadTemplateWithRefs(template)

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

@@ -1181,7 +1181,7 @@ export default class Umap {
     }
     this._advancedActions(container)
 
-    this.editPanel.open({
+    return this.editPanel.open({
       content: container,
       className: 'dark',
       highlight: 'settings',