Layout Playlist: Convert to global refactor (#2638)

relates to xibosignage/xibo#3452

ui/src/editor-core/properties-panel.js

@@ -97,6 +97,10 @@ PropertiesPanel.prototype.save = function(
     target = app.selectedObject;
   }
 
+  // Check if target is playlist
+  const isPlaylist =
+    (target.type === 'region' && target.subType === 'playlist');
+
   // Save original target
   const originalTarget = target;
 
@@ -163,7 +167,7 @@ PropertiesPanel.prototype.save = function(
     form.find('[name]');
 
   // Filter out position related fields
-  formFieldsToSave =
+  formFieldsToSave = (isPlaylist) ? formFieldsToSave :
     formFieldsToSave.filter('.tab-pane:not(#positionTab) [name]');
 
   // Get form old data
@@ -1377,7 +1381,9 @@ PropertiesPanel.prototype.render = function(
 
           if (targetAux == undefined) {
             // Widget
-            const regionId = target.parent.id;
+            const regionId = (target.type === 'region') ?
+              target.id :
+              target.parent.id;
             const positions = {
               width: form.find('[name="width"]').val(),
               height: form.find('[name="height"]').val(),
@@ -1800,6 +1806,8 @@ PropertiesPanel.prototype.initFields = function(
   const self = this;
   const app = this.parent;
   const targetIsElement = (target.type === 'element');
+  const targetIsPlaylist =
+    (target.type === 'region' && target.subType === 'playlist');
   const readOnlyModeOn =
     (typeof(lD) != 'undefined' && lD?.readOnlyMode === true) ||
     (app?.readOnlyMode === true);
@@ -1862,10 +1870,11 @@ PropertiesPanel.prototype.initFields = function(
     };
 
     // Save for this type
-    self.formSerializedLoadData[target.type] =
-      self.DOMObject.find('form [name]:not(.element-property)')
-        .filter('.tab-pane:not(#positionTab) [name]')
-        .serialize();
+    let $fields = self.DOMObject.find('form [name]:not(.element-property)');
+    // Filter position tab if needed
+    $fields = (targetIsPlaylist) ?
+      $fields : $fields.filter('.tab-pane:not(#positionTab) [name]');
+    self.formSerializedLoadData[target.type] = $fields.serialize();
 
     // If widget, also save position form
     if (target.type === 'widget') {

ui/src/layout-editor/main.js

@@ -3600,6 +3600,15 @@ lD.openContextMenu = function(obj, position = {x: 0, y: 0}) {
     layoutObject.template.templateId === 'text'
   );
 
+  // If it's a playlist, check if it's a layout playlist only
+  // and has at least one widget
+  layoutObject.playlistCanBeConverted = (
+    layoutObject.isPlaylist &&
+    !$(obj).find('.playlist-edit-btn')
+      .hasClass('subplaylist-inline-edit-btn') &&
+    layoutObject.playlists.widgets.length > 0
+  );
+
   // Create menu and append to the designer div
   // ( using the object extended with translations )
   lD.editorContainer.append(
@@ -3932,6 +3941,11 @@ lD.openContextMenu = function(obj, position = {x: 0, y: 0}) {
       });
     } else if (target.data('action') == 'editText') {
       lD.viewer.editText(layoutObject);
+    } else if (target.data('action') == 'convertPlaylist') {
+      lD.convertPlaylist(
+        layoutObject.playlists.playlistId,
+        layoutObject.playlists.name,
+      );
     } else {
       const property = target.data('property');
       const propertyType = target.data('propertyType');
@@ -5667,8 +5681,16 @@ lD.addElementsToWidget = function(
 /**
  * Convert playlist into global
  * @param {string} playlistId
+ * @param {string} playlistName
  */
-lD.convertPlaylist = function(playlistId) {
+lD.convertPlaylist = function(playlistId, playlistName) {
+  if (playlistName === undefined || playlistName === '') {
+    toastr.error(
+      errorMessagesTrans.convertPlaylistFailed +
+      ' ' + errorMessagesTrans.convertPlaylistNoName);
+    return;
+  }
+
   // Load form the API
   const linkToAPI = urlsForApi.playlist.convert;
 
@@ -5701,13 +5723,15 @@ lD.convertPlaylist = function(playlistId) {
         window.location.href = window.location.href;
         location.reload();
       } else {
-        toastr.error(errorMessagesTrans.convertPlaylistFailed);
-
         // Just an error we dont know about
         if (res.message == undefined) {
           console.error(res);
+          toastr.error(errorMessagesTrans.convertPlaylistFailed);
         } else {
           console.error(res.message);
+          toastr.error(
+            errorMessagesTrans.convertPlaylistFailed + ' ' + res.message,
+          );
         }
       }
     }

ui/src/templates/context-menu.hbs

@@ -65,6 +65,12 @@
                 <div class="context-menu-btn editPlaylistBtn" data-title="{{trans.editPlaylist}}" data-action="editPlaylist" data-toggle="tooltip" data-container=".context-menu" data-placement="bottom">
                     <i class="fa fa-edit"></i><span>{{trans.editPlaylist}}</span>
                 </div>
+
+                {{#if playlistCanBeConverted}}
+                    <div class="context-menu-btn convertPlaylistButton" data-title="{{trans.convertPlaylistHelpText}}" data-action="convertPlaylist" data-toggle="tooltip" data-container=".context-menu" data-placement="bottom">
+                        <i class="fa fa-refresh"></i><span>{{trans.convertPlaylist}}</span>
+                    </div>
+                {{/if}}
             {{/if}}
 
             {{#if isFrameOrZone}}

ui/src/templates/forms/region.hbs

@@ -23,10 +23,6 @@
                         {{> inputs/message messageType="info" title=trans.region.loopMessage2}}
                         {{> inputs/message messageType="info" title=trans.region.loopMessage3}}
                     {{/eq}}
-
-                    {{#eq region.type 'playlist' }}
-                        {{> button id="convertPlaylistButton" type="btn-block btn-outline-primary inline-btn" name=trans.region.convertPlaylist }}
-                    {{/eq}}
                 </div>
 
                 {{#if showExitTransition}}

views/common.twig

@@ -497,6 +497,8 @@
                 editRegionPermissions: "{{ "Edit Region Sharing" |trans }}",
                 editWidgetPermissions: "{{ "Edit Widget Sharing" |trans }}",
                 editPlaylist: "{{ "Edit Playlist" |trans }}",
+                convertPlaylist: "{{ "Convert Playlist" |trans }}",
+                convertPlaylistHelpText: "{{ "Convert Layout playlist into a Global playlist." |trans }}",
                 options: "{% trans "Options" %}",
                 moveLeft: "{{ "Move one step left" |trans }}",
                 moveRight: "{{ "Move one step right" |trans }}",
@@ -651,8 +653,7 @@
                     height: "{{ "Height" |trans }}",
                     heightHelpText: "{{ "The height of the %regionType%" |trans }}",
                     makeRegionFullScreen: "{{ "Make this %regionType% full screen, dimensions will be set to %layout.width% by %layout.height%." |trans }}",
-                    bringRegionToView: "{{ "Bring selected %regionType% back to the Layout view." |trans }}",
-                    convertPlaylist: "{{ "Convert Layout playlist into a Global playlist." |trans }}",
+                    bringRegionToView: "{{ "Bring selected %regionType% back to the Layout view." |trans }}"
                 },
                 widget: {
                     name: "{{ "Configuration Name" |trans }}",
@@ -924,6 +925,7 @@
                 libraryLoadFailed: "{{ "Library load failed!" |trans }}",
                 formLoadFailed: "{{ "Form load failed!" |trans }}",
                 convertPlaylistFailed: "{{ "Convert playlist failed!" |trans }}",
+                convertPlaylistNoName: "{{ "Playlist needs a name to be converted!" |trans }}",
                 revertFailed: "{{ "Revert failed: %error%" |trans }}",
                 saveOrderFailed: "{{ "Save order failed: %error%" |trans }}",
                 deleteFailed: "{{ "Delete failed: %error%" |trans }}",

views/region-designer-javascript.twig

@@ -102,9 +102,6 @@
 
             formChangesRegion();
         });
-
-        // Handle convert playlist
-        form.find('#convertPlaylistButton').click(convertPlaylist);
         
         form.find('[name="top"], [name="left"], [name="width"], [name="height"], [name="zIndex"]').on('change', _.debounce(function(){
             formChangesRegion();
@@ -164,10 +161,4 @@
         form.find('[name="width"]').val(parseInt(regionDimensions.width));
         form.find('[name="height"]').val(parseInt(regionDimensions.height));
     }
-
-    function convertPlaylist() {
-        var app = lD;
-        var playlistId = app.selectedObject.playlists.playlistId;
-        app.convertPlaylist(playlistId);
-    }
 </script>