Changing data slot shouldn't reload element data (#2222)

relates to xibosignage/xibo#3233
xibosignage · Nov 13, 2023 · 0b149a4 · 0b149a4
1 parent 93875e6
commit 0b149a4
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 17 deletions.
diff --git a/ui/src/editor-core/properties-panel.js b/ui/src/editor-core/properties-panel.js
@@ -647,6 +647,7 @@ PropertiesPanel.prototype.render = function(
               id: 'pinSlot',
               title: propertiesPanelTrans.pinSlot,
               helpText: propertiesPanelTrans.pinSlotHelpText,
+              customClass: 'element-slot-input',
               value: targetAux.pinSlot,
               type: 'checkbox',
               visibility: [],
@@ -657,6 +658,7 @@ PropertiesPanel.prototype.render = function(
             id: 'slot',
             title: propertiesPanelTrans.dataSlot,
             helpText: propertiesPanelTrans.dataSlotHelpText,
+            customClass: 'element-slot-input',
             value: Number(targetAux.slot) + 1,
             min: minSlotValue,
             type: 'number',
@@ -691,23 +693,23 @@ PropertiesPanel.prototype.render = function(
         // handle when changed
         if (targetAux.slot !== undefined) {
           self.DOMObject.find('[name="slot"]').on('change', function(ev) {
-            let slotValue = $(ev.currentTarget).val();
+            let slotValue = Number($(ev.currentTarget).val());
 
             // If value is lower than minSlotValue
             // set it to minSlotValue
-            if (Number(slotValue) < minSlotValue) {
+            if (slotValue < minSlotValue) {
               slotValue = minSlotValue;
               $(ev.currentTarget).val(minSlotValue);
             }
 
             // update slot for the group
-            targetAux.updateSlot(Number(slotValue) - 1, true);
+            targetAux.updateSlot(slotValue - 1, true);
 
-            // save elements
-            target.saveElements();
-
-            // Render canvas again
-            app.viewer.renderCanvas(app.layout.canvas);
+            // Save elements
+            target.saveElements().then((_res) => {
+              // Update group
+              app.viewer.updateElementGroup(app.selectedObject);
+            });
           });
 
           // Handle pin slot property
@@ -852,6 +854,7 @@ PropertiesPanel.prototype.render = function(
                 id: 'pinSlot',
                 title: propertiesPanelTrans.pinSlot,
                 helpText: propertiesPanelTrans.pinSlotHelpText,
+                customClass: 'element-slot-input',
                 value: targetAux.pinSlot,
                 type: 'checkbox',
                 visibility: [],
@@ -863,6 +866,7 @@ PropertiesPanel.prototype.render = function(
                 id: 'slot',
                 title: propertiesPanelTrans.dataSlot,
                 helpText: propertiesPanelTrans.dataSlotHelpText,
+                customClass: 'element-slot-input',
                 value: Number(targetAux.slot) + 1,
                 min: minSlotValue,
                 type: 'number',
@@ -989,7 +993,15 @@ PropertiesPanel.prototype.render = function(
               }
             },
             focus: function(_ev) {
-              self.toSave = true;
+              // Skip slot inputs
+              // those are saved with elements
+              if (
+                $(_ev.currentTarget)
+                  .parents('.xibo-form-input.element-slot-input')
+                  .length === 0
+              ) {
+                self.toSave = true;
+              }
             },
           });
         });
@@ -1516,16 +1528,34 @@ PropertiesPanel.prototype.initFields = function(
       (getMemoizedFunc, obj) => getMemoizedFunc(obj)(obj),
     );
 
+    const skipSave = function(target) {
+      // If field is code input
+      // only save when the event is a change/onfocus
+      if (
+        $(target).hasClass('code-input') &&
+        _ev.type === 'inputChange'
+      ) {
+        return true;
+      }
+
+      // Skip slot inputs
+      // those are saved with elements
+      if (
+        $(target).parents('.xibo-form-input.element-slot-input')
+          .length > 0
+      ) {
+        return true;
+      }
+
+      return false;
+    };
+
     // Auto save when changing inputs
     $(self.DOMObject).find('form').off()
       .on({
         'change inputChange xiboInputChange': function(_ev, options) {
-          // If field is code input
-          // only save when the event is a change/onfocus
-          if (
-            $(_ev.currentTarget).hasClass('code-input') &&
-            _ev.type === 'inputChange'
-          ) {
+          // Check if we skip this field
+          if (skipSave(_ev.currentTarget)) {
             return;
           }
 
@@ -1536,8 +1566,9 @@ PropertiesPanel.prototype.initFields = function(
             );
           }
         },
-        'focus editorFocus': function() {
-          self.toSave = true;
+        'focus editorFocus': function(_ev, options) {
+          // Check if we dont skip this field
+          self.toSave = !skipSave(_ev.currentTarget);
         },
       },
       '.xibo-form-input:not(.position-input)' +

diff --git a/ui/src/layout-editor/viewer.js b/ui/src/layout-editor/viewer.js
@@ -1268,6 +1268,11 @@ Viewer.prototype.updateElement = _.throttle(function(
 Viewer.prototype.updateElementGroup = _.throttle(function(
   elementGroup,
 ) {
+  // Update slot
+  const $groupContainer = lD.viewer.DOMObject.find(`#${elementGroup.id}`);
+  $groupContainer.find('.slot span').html((Number(elementGroup.slot) + 1));
+
+  // Update all elements
   Object.values(elementGroup.elements).forEach((element) => {
     const $container = lD.viewer.DOMObject.find(`#${element.elementId}`);