Editor: Clear layout button (#2793)

relates to xibosignageltd/xibo-private#866
xibosignage · Nov 6, 2024 · 1c19d67 · 1c19d67
1 parent d9226db
commit 1c19d67
Show file tree

Hide file tree

Showing 10 changed files with 203 additions and 10 deletions.
diff --git a/lib/Controller/Layout.php b/lib/Controller/Layout.php
@@ -969,6 +969,34 @@ function deleteForm(Request $request, Response $response, $id)
         return $this->render($request, $response);
     }
 
+    /**
+     * Clear Layout Form
+     * @param Request $request
+     * @param Response $response
+     * @param $id
+     * @return \Psr\Http\Message\ResponseInterface|Response
+     * @throws AccessDeniedException
+     * @throws GeneralException
+     * @throws NotFoundException
+     * @throws \Xibo\Support\Exception\ControllerNotImplemented
+     */
+    function clearForm(Request $request, Response $response, $id)
+    {
+        $layout = $this->layoutFactory->getById($id);
+
+        if (!$this->getUser()->checkDeleteable($layout))
+            throw new AccessDeniedException(__('You do not have permissions to clear this layout'));
+
+        $data = [
+            'layout' => $layout,
+        ];
+
+        $this->getState()->template = 'layout-form-clear';
+        $this->getState()->setData($data);
+
+        return $this->render($request, $response);
+    }
+
     /**
      * Retire Layout Form
      * @param Request $request
@@ -1053,6 +1081,54 @@ function delete(Request $request, Response $response, $id)
         return $this->render($request, $response);
     }
 
+    /**
+     * Clears a layout
+     * @param Request $request
+     * @param Response $response
+     * @param $id
+     * @return \Psr\Http\Message\ResponseInterface|Response
+     * @throws AccessDeniedException
+     * @throws GeneralException
+     * @throws InvalidArgumentException
+     * @throws NotFoundException
+     * @throws \Xibo\Support\Exception\ControllerNotImplemented
+     * @SWG\Clear(
+     *  path="/layout/{layoutId}",
+     *  operationId="layoutClear",
+     *  tags={"layout"},
+     *  summary="Clear Layout",
+     *  description="Clears a Layout",
+     *  @SWG\Parameter(
+     *      name="layoutId",
+     *      in="path",
+     *      description="The Layout ID to Clear",
+     *      type="integer",
+     *      required=true
+     *   ),
+     *  @SWG\Response(
+     *      response=204,
+     *      description="successful operation"
+     *  )
+     * )
+     */
+    function clear(Request $request, Response $response, $id)
+    {
+        $layout = $this->layoutFactory->loadById($id);
+
+        if (!$this->getUser()->checkEditable($layout)) {
+            throw new AccessDeniedException(__('You do not have permissions to clear this layout'));
+        }
+
+        $layout->clear();
+
+        // Return
+        $this->getState()->hydrate([
+            'httpStatus' => 204,
+            'message' => sprintf(__('Cleared %s'), $layout->layout)
+        ]);
+
+        return $this->render($request, $response);
+    }
     /**
      * Retires a layout
      * @param Request $request

diff --git a/lib/Entity/Layout.php b/lib/Entity/Layout.php
@@ -1071,6 +1071,17 @@ public function delete($options = [])
         $this->audit($this->layoutId, 'Deleted' . (($this->parentId !== null) ? ' draft for ' . $this->parentId : ''));
     }
 
+    /**
+     * Clear Layout
+     * @param array $options
+     * @throws GeneralException
+     */
+    public function clear($options = [])
+    {
+        // TODO: Clear layout here
+        $this->getLog()->debug('WIP: Clear Layout');
+    }
+
     /**
      * Validate this layout
      * @throws GeneralException

diff --git a/lib/routes-web.php b/lib/routes-web.php
@@ -156,6 +156,7 @@
     $group->get('/layout/form/background/{id}', ['\Xibo\Controller\Layout', 'editBackgroundForm'])->setName('layout.background.form');
     $group->get('/layout/form/copy/{id}', ['\Xibo\Controller\Layout', 'copyForm'])->setName('layout.copy.form');
     $group->get('/layout/form/delete/{id}', ['\Xibo\Controller\Layout', 'deleteForm'])->setName('layout.delete.form');
+    $group->get('/layout/form/clear/{id}', ['\Xibo\Controller\Layout', 'clearForm'])->setName('layout.clear.form');
     $group->get('/layout/form/checkout/{id}', ['\Xibo\Controller\Layout', 'checkoutForm'])->setName('layout.checkout.form');
     $group->get('/layout/form/publish/{id}', ['\Xibo\Controller\Layout', 'publishForm'])->setName('layout.publish.form');
     $group->get('/layout/form/discard/{id}', ['\Xibo\Controller\Layout', 'discardForm'])->setName('layout.discard.form');

diff --git a/lib/routes.php b/lib/routes.php
@@ -165,6 +165,7 @@
     $group->put('/layout/background/{id}', ['\Xibo\Controller\Layout','editBackground'])->setName('layout.edit.background');
     $group->put('/layout/publish/{id}', ['\Xibo\Controller\Layout','publish'])->setName('layout.publish');
     $group->put('/layout/discard/{id}', ['\Xibo\Controller\Layout','discard'])->setName('layout.discard');
+    $group->put('/layout/clear/{id}', ['\Xibo\Controller\Layout','clear'])->setName('layout.clear');
     $group->put('/layout/retire/{id}', ['\Xibo\Controller\Layout','retire'])->setName('layout.retire');
     $group->put('/layout/unretire/{id}', ['\Xibo\Controller\Layout','unretire'])->setName('layout.unretire');
     $group->post('/layout/thumbnail/{id}', ['\Xibo\Controller\Layout','addThumbnail'])->setName('layout.thumbnail.add');

diff --git a/ui/src/layout-editor/layout.js b/ui/src/layout-editor/layout.js
@@ -592,6 +592,55 @@ Layout.prototype.delete = function() {
   });
 };
 
+/**
+ * Clear layout
+ */
+Layout.prototype.clear = function() {
+  const linkToAPI = urlsForApi.layout.clear;
+  let requestPath = linkToAPI.url;
+
+  lD.common.showLoadingScreen();
+
+  // Deselect previous selected object
+  lD.selectObject();
+
+  // replace id if necessary/exists
+  requestPath = requestPath.replace(':id', this.layoutId);
+
+  $.ajax({
+    url: requestPath,
+    type: linkToAPI.type,
+  }).done(function(res) {
+    if (res.success) {
+      bootbox.hideAll();
+
+      toastr.success(res.message);
+
+      lD.reloadData(lD.layout);
+    } else {
+      // Login Form needed?
+      if (res.login) {
+        window.location.reload();
+      } else {
+        toastr.error(res.message);
+
+        // Remove loading icon from publish dialog
+        $(
+          '[data-test="clearFormLayoutForm"] ' +
+          '.btn-bb-Yes i.fa-cog',
+        ).remove();
+      }
+    }
+
+    lD.common.hideLoadingScreen();
+  }).fail(function(jqXHR, textStatus, errorThrown) {
+    lD.common.hideLoadingScreen();
+
+    // Output error to console
+    console.error(jqXHR, textStatus, errorThrown);
+  });
+};
+
 /**
  * Add a new empty object to the layout
  * @param {string} objectType - object type (widget, region, ...)

diff --git a/ui/src/layout-editor/main.js b/ui/src/layout-editor/main.js
@@ -218,7 +218,7 @@ $(() => {
           {
             id: 'publishLayout',
             title: layoutEditorTrans.publishTitle,
-            logo: 'fa-check-square-o',
+            logo: 'fa fa-check-square-o',
             class: 'btn-success',
             action: lD.showPublishScreen,
             inactiveCheck: function() {
@@ -229,7 +229,7 @@ $(() => {
           {
             id: 'checkoutLayout',
             title: layoutEditorTrans.checkoutTitle,
-            logo: 'fa-edit',
+            logo: 'fa fa-edit',
             action: lD.layout.checkout,
             inactiveCheck: function() {
               return (lD.layout.editable == true);
@@ -239,7 +239,7 @@ $(() => {
           {
             id: 'discardLayout',
             title: layoutEditorTrans.discardTitle,
-            logo: 'fa-times-circle-o',
+            logo: 'fa fa-times-circle-o',
             action: lD.showDiscardScreen,
             inactiveCheck: function() {
               return (lD.layout.editable == false);
@@ -252,7 +252,7 @@ $(() => {
           {
             id: 'newLayout',
             title: layoutEditorTrans.newTitle,
-            logo: 'fa-file',
+            logo: 'fa fa-file',
             action: lD.addLayout,
             inactiveCheck: function() {
               return lD.templateEditMode;
@@ -262,7 +262,7 @@ $(() => {
           {
             id: 'deleteLayout',
             title: layoutEditorTrans.deleteTitle,
-            logo: 'fa-times-circle-o',
+            logo: 'fa fa-times-circle-o',
             action: lD.showDeleteScreen,
             inactiveCheck: function() {
               return (
@@ -275,7 +275,7 @@ $(() => {
           {
             id: 'saveTemplate',
             title: layoutEditorTrans.saveTemplateTitle,
-            logo: 'fa-floppy-o',
+            logo: 'fa fa-floppy-o',
             action: lD.showSaveTemplateScreen,
             inactiveCheck: function() {
               return lD.templateEditMode ||
@@ -286,14 +286,14 @@ $(() => {
           {
             id: 'unlockLayout',
             title: layoutEditorTrans.unlockTitle,
-            logo: 'fa-unlock',
-            class: 'btn-info show-on-lock',
+            logo: 'fa fa-unlock',
+            class: 'show-on-lock',
             action: lD.showUnlockScreen,
           },
           {
             id: 'scheduleLayout',
             title: layoutEditorTrans.scheduleTitle,
-            logo: 'fa-clock-o',
+            logo: 'fa fa-clock-o',
             action: lD.showScheduleScreen,
             inactiveCheck: function() {
               return lD.templateEditMode ||
@@ -302,6 +302,16 @@ $(() => {
             },
             inactiveCheckClass: 'd-none',
           },
+          {
+            id: 'clearLayout',
+            title: layoutEditorTrans.clearLayout,
+            logo: 'fas fa-broom',
+            action: lD.showClearScreen,
+            inactiveCheck: function() {
+              return !lD.layout.editable;
+            },
+            inactiveCheckClass: 'd-none',
+          },
         ],
         // Custom actions
         {},
@@ -1012,6 +1022,18 @@ lD.showScheduleScreen = function() {
   lD.loadFormFromAPI('schedule', lD.layout.campaignId);
 };
 
+/**
+ * Layout clear screen
+ */
+lD.showClearScreen = function() {
+  lD.loadFormFromAPI(
+    'clearForm',
+    lD.layout.layoutId,
+    '',
+    'lD.layout.clear();',
+  );
+};
+
 /**
  * Layout delete screen
  */

diff --git a/ui/src/templates/topbar.hbs b/ui/src/templates/topbar.hbs
@@ -75,7 +75,7 @@
                                 <a class="dropdown-item">
                                     <div id="{{id}}" class="navbar-submenu-item {{class}}" href="#">
                                         {{#if logo}}
-                                            <i class="fa {{logo}}"></i>
+                                            <i class="{{logo}}"></i>
                                         {{/if}}
                                         <span>{{title}}</span>
                                     </div>

diff --git a/views/editorVars.twig b/views/editorVars.twig
@@ -78,6 +78,10 @@
                     url: "{{ url_for("layout.discard", {id: ':id'}) }}",
                     type: 'PUT'
                 },
+                clear: {
+                    url: "{{ url_for("layout.clear", {id: ':id'}) }}",
+                    type: 'PUT'
+                },
                 delete: {
                     url: "{{ url_for("layout.delete", {id: ':id'}) }}",
                     type: 'DELETE'
@@ -115,6 +119,10 @@
                     url: "{{ url_for("layout.discard.form", {id: ':id'}) }}",
                     type: 'GET'
                 },
+                clearForm: {
+                    url: "{{ url_for("layout.clear.form", {id: ':id'}) }}",
+                    type: 'GET'
+                },
                 deleteForm: {
                     url: "{{ url_for("layout.delete.form", {id: ':id'}) }}",
                     type: 'GET'

diff --git a/views/layout-designer-page.twig b/views/layout-designer-page.twig
@@ -58,6 +58,7 @@
                 var layoutEditorTrans = {
                     back: "{% trans "Back" %}",
                     exit: "{% trans "Exit" %}",
+                    cancel: "{% trans "Cancel" %}",
                     toggleFullscreen: "{% trans "Toggle Fullscreen Mode" %}",
                     layerManager: "{% trans "Layer Manager" %}",
                     snapToGrid: "{% trans "Snap to Grid" %}",
@@ -70,6 +71,7 @@
                     publishMessage: "{% trans "Are you sure you want to publish this Layout? If it is already in use the update will automatically get pushed." %}",
                     checkoutTitle: "{% trans "Checkout" %}",
                     scheduleTitle: "{% trans "Schedule" %}",
+                    clearLayout: "{% trans "Clear Canvas" %}",
                     unlockTitle: "{% trans "Unlock" %}",
                     saveTemplateTitle: "{% trans "Save Template" %}",
                     readOnlyModeTitle: "{% trans "Read Only" %}",

diff --git a/views/layout-form-clear.twig b/views/layout-form-clear.twig
@@ -0,0 +1,23 @@
+
+{% extends "form-base.twig" %}
+{% import "forms.twig" as forms %}
+
+{% block formTitle %}
+    {% trans %}Clear Canvas{% endtrans %}
+{% endblock %}
+
+{% block formButtons %}
+    {% trans "No" %}, XiboDialogClose()
+    {% trans "Yes" %}, $("#layoutClearForm").submit()
+{% endblock %}
+
+{% block formHtml %}
+    <div class="row">
+        <div class="col-md-12">
+            <form id="layoutClearForm" class="XiboForm form-horizontal" method="clear" action="{{ url_for("layout.clear", {id: layout.layoutId}) }}">
+                {% set message %}{% trans "Are you sure you want to start again with a blank canvas? All elements and widgets will be removed from your draft layout." %}{% endset %}
+                {{ forms.message(message) }}
+            </form>
+        </div>
+    </div>
+{% endblock %}