MDL-71779 core_courseformat: reactive add and delete sections

lib/amd/src/local/reactive/basecomponent.js

@@ -438,32 +438,52 @@ export default class {
      * @param {boolean} locked the new locked value
      */
     set locked(locked) {
-        this.element.dataset.locked = locked ?? false;
+        this.setElementLocked(this.element, locked);
+    }
+
+    /**
+     * Get the current locked value from the element.
+     *
+     * @return {boolean}
+     */
+    get locked() {
+        return this.getElementLocked(this.element);
+    }
+
+    /**
+     * Lock/unlock an element.
+     *
+     * @param {Element} target the event target
+     * @param {boolean} locked the new locked value
+     */
+    setElementLocked(target, locked) {
+        target.dataset.locked = locked ?? false;
         if (locked) {
             // Disable interactions.
-            this.element.style.pointerEvents = 'none';
-            this.element.style.userSelect = 'none';
+            target.style.pointerEvents = 'none';
+            target.style.userSelect = 'none';
             // Check if it is draggable.
-            if (this.element.hasAttribute('draggable')) {
-                this.element.setAttribute('draggable', false);
+            if (target.hasAttribute('draggable')) {
+                target.setAttribute('draggable', false);
             }
         } else {
-            // Reanable interactions.
-            this.element.style.pointerEvents = null;
-            this.element.style.userSelect = null;
+            // Enable interactions.
+            target.style.pointerEvents = null;
+            target.style.userSelect = null;
             // Check if it was draggable.
-            if (this.element.hasAttribute('draggable')) {
-                this.element.setAttribute('draggable', true);
+            if (target.hasAttribute('draggable')) {
+                target.setAttribute('draggable', true);
             }
         }
     }
 
     /**
-     * Get the current locket value from the element.
+     * Get the current locked value from the element.
      *
+     * @param {Element} target the event target
      * @return {boolean}
      */
-    get locked() {
-        return this.element.dataset.locked ?? false;
+    getElementLocked(target) {
+        return target.dataset.locked ?? false;
     }
 }

lib/amd/src/local/reactive/statemanager.js

@@ -107,6 +107,7 @@ export default class StateManager {
             "delete": this.defaultDelete.bind(this),
             "put": this.defaultPut.bind(this),
             "override": this.defaultOverride.bind(this),
+            "remove": this.defaultRemove.bind(this),
             "prepareFields": this.defaultPrepareFields.bind(this),
         };
 
@@ -336,6 +337,31 @@ export default class StateManager {
         delete state[updateName];
     }
 
+    /**
+     * Process a remove state message.
+     *
+     * @param {Object} stateManager the state manager
+     * @param {String} updateName the state element to update
+     * @param {Object} fields the new data
+     */
+    defaultRemove(stateManager, updateName, fields) {
+
+        // Get the current value.
+        let current = stateManager.get(updateName, fields.id);
+        if (!current) {
+            return;
+        }
+
+        // Process deletion.
+        let state = stateManager.state;
+
+        if (state[updateName] instanceof StateMap) {
+            state[updateName].delete(fields.id);
+            return;
+        }
+        delete state[updateName];
+    }
+
     /**
      * Process a update state message.
      *