Layout Editor: Sharing is broken

ui/src/editor-core/widget.js

@@ -667,6 +667,12 @@ Widget.prototype.saveElements = function(
     forceRequest = false,
   } = {},
 ) {
+  // If widget isn't editable, throw an error
+  if (this.isEditable === false) {
+    toastr.error(errorMessagesTrans.canvasWidgetNotShared);
+    return;
+  }
+
   const self = this;
   const app = this.editorObject;
   const widgetId = this.widgetId;

ui/src/layout-editor/main.js

@@ -1144,6 +1144,11 @@ lD.undoLastAction = function() {
  * Delete selected object
  */
 lD.deleteSelectedObject = function() {
+  // Prevent delete if it doesn't have permissions
+  if (lD.selectedObject.isDeletable === false) {
+    return;
+  }
+
   // For now, we always delete the region
   if (lD.selectedObject.type === 'region') {
     lD.deleteObject(
@@ -2918,6 +2923,18 @@ lD.openContextMenu = function(obj, position = {x: 0, y: 0}) {
     layoutObject.type === 'element-group'
   );
 
+  // If target is a frame, send single widget info
+  const singleWidget = (
+    layoutObject.type === 'region' &&
+    layoutObject.subType === 'frame'
+  ) ? Object.values(layoutObject.widgets)[0] : {};
+
+  // If target is group or element group, send parent widget
+  const elementWidget = (
+    layoutObject.type === 'element' ||
+    layoutObject.type === 'element-group'
+  ) ? lD.getObjectByTypeAndId('widget', objAuxId, 'canvas') : {};
+
   // Create menu and append to the designer div
   // ( using the object extended with translations )
   lD.editorContainer.append(
@@ -2927,6 +2944,12 @@ lD.openContextMenu = function(obj, position = {x: 0, y: 0}) {
       canHaveNewConfig: canHaveNewConfig,
       canChangeLayer: canChangeLayer,
       canUngroup: canUngroup,
+      widget: singleWidget,
+      isElementBased: (
+        layoutObject.type === 'element' ||
+        layoutObject.type === 'element-group'
+      ),
+      elementWidget: elementWidget,
     })),
   );
 
@@ -3301,9 +3324,37 @@ lD.openContextMenu = function(obj, position = {x: 0, y: 0}) {
         });
       });
     } else {
-      layoutObject.editPropertyForm(
-        target.data('property'), target.data('propertyType'),
-      );
+      const property = target.data('property');
+      const propertyType = target.data('propertyType');
+
+      // If we're editing permissions and it's a frame
+      // edit the widget's permissions instead
+      if (
+        property === 'PermissionsWidget' &&
+        layoutObject.type === 'region' &&
+        layoutObject.subType === 'frame'
+      ) {
+        // Call edit for widget instead
+        const regionWidget = Object.values(layoutObject.widgets)[0];
+        regionWidget.editPropertyForm('Permissions');
+      } else if (
+        property === 'PermissionsCanvasWidget' &&
+        (
+          layoutObject.type === 'element' ||
+          layoutObject.type === 'element-group'
+        )
+      ) {
+        // Call edit for canvas widget instead
+        const canvasWidget =
+          lD.getObjectByTypeAndId('widget', objAuxId, 'canvas');
+        canvasWidget.editPropertyForm('Permissions');
+      } else {
+        // Call normal edit form
+        layoutObject.editPropertyForm(
+          property,
+          propertyType,
+        );
+      }
     }
 
     // Remove context menu

ui/src/layout-editor/region.js

@@ -33,6 +33,7 @@ const Region = function(id, data, {backgroundColor = '#aaa'} = {}) {
   this.isDeletable = data.isDeletable;
   this.isPermissionsModifiable = data.isPermissionsModifiable;
   this.isPlaylist = data.type === 'playlist';
+  this.isFrame = data.type === 'frame';
   this.isFrameOrZone = (
     data.type === 'frame' ||
     data.type === 'zone'

ui/src/layout-editor/viewer.js

@@ -824,7 +824,8 @@ Viewer.prototype.handleInteractions = function() {
           clicks = 0;
 
           if (
-            $(e.target).data('subType') === 'playlist'
+            $(e.target).data('subType') === 'playlist' &&
+            $(e.target).hasClass('editable')
           ) {
             // Edit region if it's a playlist
             playlistEditorBtnClick($(e.target).attr('id'));
@@ -1166,8 +1167,11 @@ Viewer.prototype.renderRegion = function(
     // Append layout html to the container div
     $container.html(html);
 
-    // If it's playlist add some playlist controls
-    if (isPlaylist) {
+    // If it's (an editable) playlist, add some playlist controls
+    if (
+      isPlaylist &&
+      region.isEditable
+    ) {
       region.playlistCountOfWidgets = res.extra && res.extra.countOfWidgets ?
         res.extra.countOfWidgets : 1;
 
@@ -2799,7 +2803,8 @@ Viewer.prototype.updateMoveable = function(
     (
       $selectedElement &&
       $.contains(document, $selectedElement[0]) &&
-      !$selectedElement.hasClass('drawerWidget')
+      !$selectedElement.hasClass('drawerWidget') &&
+      $selectedElement.hasClass('editable')
     )
   ) {
     if ($selectedElement.hasClass('designer-element-group')) {

ui/src/style/layout-editor.scss

@@ -736,11 +736,8 @@ body.editor-opened {
         color: $xibo-color-primary-l5;
         padding: 30px;
         background-color: $xibo-color-semantic-error;
-
-        &.invalid-region-message {
-            margin: 16px;
-            border-radius: 3px;
-        }
+        border-radius: 4px;
+        margin: 16px 16px 0 0;
     }
 
     .loading-container {
@@ -1489,7 +1486,6 @@ body.editor-opened {
 
 /* Locked mode */
 #layout-editor #lockedOverlay {
-    z-index: 1;
     display: block;
     position: absolute;
 }

ui/src/templates/context-menu.hbs

@@ -67,10 +67,30 @@
                 </div>
             {{/if}}
 
-            {{#if isPermissionsModifiable}}
-                <div class="context-menu-btn permissionsBtn" data-title="{{trans.editPermissions}}" data-property="Permissions" data-toggle="tooltip" data-container=".context-menu" data-placement="bottom">
-                    <i class="tool-icon-permissions"></i><span>{{trans.editPermissions}}</span>
-                </div>
+            {{#if isFrame}}
+                {{#if widget.isPermissionsModifiable}}
+                    <div class="context-menu-btn permissionsBtn" data-title="{{trans.editPermissions}}" data-property="PermissionsWidget" data-toggle="tooltip" data-container=".context-menu" data-placement="bottom">
+                        <i class="tool-icon-permissions"></i><span>{{trans.editPermissions}}</span>
+                    </div>
+                {{/if}}
+
+                {{#if isPermissionsModifiable}}
+                    <div class="context-menu-btn permissionsBtn" data-title="{{trans.editRegionPermissions}}" data-property="Permissions" data-toggle="tooltip" data-container=".context-menu" data-placement="bottom">
+                        <i class="tool-icon-permissions"></i><span>{{trans.editRegionPermissions}}</span>
+                    </div>
+                {{/if}}
+            {{else if isElementBased}}
+                {{#if elementWidget.isPermissionsModifiable}}
+                    <div class="context-menu-btn permissionsBtn" data-title="{{trans.editPermissions}}" data-property="PermissionsCanvasWidget" data-toggle="tooltip" data-container=".context-menu" data-placement="bottom">
+                        <i class="tool-icon-permissions"></i><span>{{trans.editPermissions}}</span>
+                    </div>
+                {{/if}}
+            {{else}}
+                {{#if isPermissionsModifiable}}
+                    <div class="context-menu-btn permissionsBtn" data-title="{{trans.editPermissions}}" data-property="Permissions" data-toggle="tooltip" data-container=".context-menu" data-placement="bottom">
+                        <i class="tool-icon-permissions"></i><span>{{trans.editPermissions}}</span>
+                    </div>
+                {{/if}}
             {{/if}}
 
             {{#if canBeCopied}}

ui/src/templates/viewer-element-group.hbs

@@ -1,4 +1,4 @@
-<div id="{{element.groupId}}" class="designer-element-group editable viewer-object-select"
+<div id="{{element.groupId}}" class="designer-element-group {{#if element.isEditable}}editable{{/if}} viewer-object-select"
     data-type="element-group"
     data-region-id="{{element.regionId}}"
     data-widget-id="{{element.widgetId}}"

ui/src/templates/viewer-element.hbs

@@ -1,5 +1,5 @@
 <div id="{{element.elementId}}" 
-    class="designer-element viewer-object-select {{#if element.selected}}selected{{/if}} deletable"
+    class="designer-element viewer-object-select {{#if element.selected}}selected{{/if}} {{#if element.isEditable}}editable{{/if}} {{#if element.isDeletable}}deletable{{/if}} "
     data-type="element"
     data-element-type="{{#if element.elementType}}{{element.elementType}}{{else}}global{{/if}}"
     data-sub-type="{{element.id}}"

views/common.twig

@@ -457,6 +457,7 @@
                 editTransIn: "{{ "Edit Transition In"|trans }}",
                 editTransOut: "{{ "Edit Transition Out" |trans }}",
                 editPermissions: "{{ "Edit Sharing" |trans }}",
+                editRegionPermissions: "{{ "Edit Region Sharing" |trans }}",
                 editPlaylist: "{{ "Edit Playlist" |trans }}",
                 options: "{% trans "Options" %}",
                 moveLeft: "{{ "Move one step left" |trans }}",
@@ -511,6 +512,7 @@
                     bottomRight: "{{ "Bottom/Right" |trans }}",
                 },
                 somethingWentWrong: "{{ "Something went wrong!"|trans }}",
+                somethingWentWrongEditPermissions: "{{ "Selected item is not shared with you with edit permission!"|trans }}",
                 actions: {
                     noActionsToShow: "{{ "No actions to show"|trans }}",
                     otherActions: "{{ "Other Actions" |trans }}",
@@ -837,6 +839,7 @@
                 unknown: "{{ "Unknown Error"|trans }}",
                 invalidRegion: "{{ "Region is invalid: Please delete it to validate the Layout!"|trans }}",
                 failedToImportMedia: "{{ "Failed to import media!"|trans }}",
+                canvasWidgetNotShared: "{{ "This Canvas is not shared with you with edit permission!"|trans }}",
             };
 
             var widgetStatusTrans = {

views/user-form-permissions.twig

@@ -36,7 +36,9 @@
     {% elseif (object.type == "playlist") or (object.type == "subplaylist") %}
         {% set objectName = "Playlist"|trans %}
     {% elseif object.type == "frame" %}
-        {% set objectName = "Widget"|trans %}
+        {% set objectName = "Region"|trans %}
+    {% elseif object.type == "global" %}
+        {% set objectName = "Canvas"|trans %}
     {% else %}
         {% set objectName = entity|trans %}
     {% endif %}
@@ -55,7 +57,6 @@
     <div class="permissions-form" id="permissionsForm">
         <div class="row">
             <div class="col-md-12">
-            <p>{{object.type}}</p>
                 <div class="XiboGrid permissionsGrid" id="{{ randomId }}"
                      data-url="{{ url_for("user.permissions", {entity: entity, id: objectId}) }}"
                      data-permissions="{{ permissions|json_encode }}">