layout manager confirm leave out

client/src/views/admin/layouts/base.js

@@ -78,6 +78,20 @@ define('views/admin/layouts/base', 'view', function (Dep) {
             this.$el.find('.button-container button').removeAttr('disabled');
         },
 
+        setConfirmLeaveOut: function (value) {
+            this.getRouter().confirmLeaveOut = value;
+        },
+
+        setIsChanged: function () {
+            this.isChanged = true;
+            this.setConfirmLeaveOut(true);
+        },
+
+        setIsNotChanged: function () {
+            this.isChanged = false;
+            this.setConfirmLeaveOut(false);
+        },
+
         save: function (callback) {
             var layout = this.fetch();
 
@@ -89,6 +103,8 @@ define('views/admin/layouts/base', 'view', function (Dep) {
             this.getHelper().layoutManager.set(this.scope, this.type, layout, function () {
                 this.notify('Saved', 'success', 2000);
 
+                this.setIsNotChanged();
+
                 if (typeof callback == 'function') {
                     callback();
                 }
@@ -120,6 +136,10 @@ define('views/admin/layouts/base', 'view', function (Dep) {
                 this.dataAttributeList;
 
             this.dataAttributeList = Espo.Utils.clone(this.dataAttributeList);
+
+            this.once('remove', function () {
+                this.setIsNotChanged();
+            }, this);
         },
 
         unescape: function (string) {
@@ -161,12 +181,15 @@ define('views/admin/layouts/base', 'view', function (Dep) {
                         $li.find('.' + key + '-value').text(attributes[key]);
                     }
                     view.close();
+
+                    this.setIsChanged();
                 }, this);
             }.bind(this));
         },
 
         cancel: function () {
             this.loadLayout(function () {
+                this.setIsNotChanged();
                 this.reRender();
             }.bind(this));
         },
@@ -176,4 +199,3 @@ define('views/admin/layouts/base', 'view', function (Dep) {
         },
     });
 });
-

client/src/views/admin/layouts/grid.js

@@ -64,6 +64,7 @@ define('views/admin/layouts/grid', ['views/admin/layouts/base', 'res!client/css/
         events: _.extend({
             'click #layout a[data-action="addPanel"]': function () {
                 this.addPanel();
+                this.setIsChanged();
                 this.makeDraggable();
             },
             'click #layout a[data-action="removePanel"]': function (e) {
@@ -89,11 +90,15 @@ define('views/admin/layouts/grid', ['views/admin/layouts/base', 'res!client/css/
                 }
 
                 this.normilizeDisabledItemList();
+
+                this.setIsChanged();
             },
             'click #layout a[data-action="addRow"]': function (e) {
                 var tpl = this.unescape($("#layout-row-tpl").html());
                 var html = _.template(tpl);
                 $(e.target).closest('ul.panels > li').find('ul.rows').append(html);
+
+                this.setIsChanged();
                 this.makeDraggable();
             },
             'click #layout a[data-action="removeRow"]': function (e) {
@@ -104,6 +109,8 @@ define('views/admin/layouts/grid', ['views/admin/layouts/base', 'res!client/css/
                 });
                 $(e.target).closest('ul.rows > li').remove();
                 this.normilizeDisabledItemList();
+
+                this.setIsChanged();
             },
             'click #layout a[data-action="removeField"]': function (e) {
                 var $li = $(e.target).closest('li');
@@ -130,6 +137,8 @@ define('views/admin/layouts/grid', ['views/admin/layouts/base', 'res!client/css/
                 $ul.attr('data-cell-count', cellCount.toString());
                 $ul.closest('li').attr('data-cell-count', cellCount.toString());
 
+                this.setIsChanged();
+
                 this.makeDraggable();
             },
             'click #layout a[data-action="minusCell"]': function (e) {
@@ -142,6 +151,8 @@ define('views/admin/layouts/grid', ['views/admin/layouts/base', 'res!client/css/
 
                 var cellCount = parseInt($ul.children().length || 2);
 
+                this.setIsChanged();
+
                 this.makeDraggable();
 
                 $ul.attr('data-cell-count', cellCount.toString());
@@ -158,6 +169,8 @@ define('views/admin/layouts/grid', ['views/admin/layouts/base', 'res!client/css/
                 $ul.attr('data-cell-count', cellCount.toString());
                 $ul.closest('li').attr('data-cell-count', cellCount.toString());
 
+                this.setIsChanged();
+
                 this.makeDraggable();
             },
             'click #layout a[data-action="edit-panel-label"]': function (e) {
@@ -194,8 +207,10 @@ define('views/admin/layouts/grid', ['views/admin/layouts/base', 'res!client/css/
                             this.panelsData[id][item] = attributes[item];
                         }, this);
                         view.close();
+
+                        this.setIsChanged();
                     }, this);
-                }, this);
+                });
             }
         }, Dep.prototype.events),
 
@@ -325,12 +340,23 @@ define('views/admin/layouts/grid', ['views/admin/layouts/base', 'res!client/css/
         },
 
         makeDraggable: function () {
-            $('#layout ul.panels').sortable({distance: 4});
+            var self = this;
+
+            $('#layout ul.panels').sortable({
+                distance: 4,
+                update: function () {
+                    self.setIsChanged();
+                },
+            });
+
             $('#layout ul.panels').disableSelection();
 
             $('#layout ul.rows').sortable({
                 distance: 4,
                 connectWith: '.rows',
+                update: function () {
+                    self.setIsChanged();
+                },
             });
             $('#layout ul.rows').disableSelection();
 
@@ -338,7 +364,6 @@ define('views/admin/layouts/grid', ['views/admin/layouts/base', 'res!client/css/
 
             $('#layout ul.cells > li').droppable().droppable('destroy');
 
-            var self = this;
             $('#layout ul.cells:not(.disabled) > li').droppable({
                 accept: '.cell',
                 zIndex: 10,
@@ -366,7 +391,6 @@ define('views/admin/layouts/grid', ['views/admin/layouts/base', 'res!client/css/
                     var $target = $(this);
                     var $draggable = $(ui.draggable);
 
-
                     ui.draggable.css({
                         top: 0,
                         left: 0,
@@ -377,6 +401,8 @@ define('views/admin/layouts/grid', ['views/admin/layouts/base', 'res!client/css/
                     }
 
                     self.makeDraggable();
+
+                    self.setIsChanged();
                 }
             });
         },
@@ -462,5 +488,3 @@ define('views/admin/layouts/grid', ['views/admin/layouts/base', 'res!client/css/
         },
     });
 });
-
-

client/src/views/admin/layouts/index.js

@@ -76,9 +76,13 @@ define('views/admin/layouts/index', 'view', function (Dep) {
                         return;
                     }
                 }
-                $("#layouts-menu a.layout-link").removeClass('disabled');
-                $(e.target).addClass('disabled');
-                this.openLayout(scope, type);
+
+                this.getRouter().checkConfirmLeaveOut(function () {
+                    $("#layouts-menu a.layout-link").removeClass('disabled');
+                    $(e.target).addClass('disabled');
+
+                    this.openLayout(scope, type);
+                }.bind(this));
             },
             'click a.accordion-toggle': function (e) {
                 e.preventDefault();

client/src/views/admin/layouts/rows.js

@@ -80,8 +80,15 @@ define('views/admin/layouts/rows', ['views/admin/layouts/base', 'res!client/css/
         },
 
         afterRender: function () {
+            var self = this;
             $('#layout ul.enabled, #layout ul.disabled').sortable({
-                connectWith: '#layout ul.connected'
+                connectWith: '#layout ul.connected',
+                update: function (e) {
+
+                    if (!$(e.target).hasClass('disabled')) {
+                        self.setIsChanged();
+                    }
+                },
             });
         },