[DE] Update roles list in preview mode button

apps/common/main/lib/component/Menu.js

@@ -713,6 +713,14 @@ define([
                 }
             },
 
+            getChecked: function() {
+                for (var i=0; i<this.items.length; i++) {
+                    var item = this.items[i];
+                    if (item.isChecked && item.isChecked())
+                        return item;
+                }
+            },
+
             clearAll: function() {
                 _.each(this.items, function(item){
                     if (item.setChecked)

apps/documenteditor/main/app/controller/FormsTab.js

@@ -59,6 +59,7 @@ define([
         },
         onLaunch: function () {
             this._state = {};
+            this.roles = [];
         },
 
         setApi: function (api) {
@@ -73,6 +74,7 @@ define([
                 this.api.asc_registerCallback('asc_onEndAction', _.bind(this.onLongActionEnd, this));
                 this.api.asc_registerCallback('asc_onError', _.bind(this.onError, this));
                 this.api.asc_registerCallback('asc_onDownloadUrl', _.bind(this.onDownloadUrl, this));
+                this.api.asc_registerCallback('asc_onRefreshRolesList', _.bind(this.onRefreshRolesList, this));
 
                 // this.api.asc_registerCallback('asc_onShowContentControlsActions',_.bind(this.onShowContentControlsActions, this));
                 // this.api.asc_registerCallback('asc_onHideContentControlsActions',_.bind(this.onHideContentControlsActions, this));
@@ -194,13 +196,14 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
         },
 
-        onModeClick: function(state) {
+        onModeClick: function(state, lastRole) {
             if (this.api) {
                 this.disableEditing(state);
-                this.view && this.view.setPreviewMode(state);
+                this.view && this.view.setPreviewMode(state); // sent role name - lastRole
                 this.api.asc_setRestriction(state ? Asc.c_oAscRestrictionType.OnlyForms : Asc.c_oAscRestrictionType.None);
                 this.api.asc_SetPerformContentControlActionByClick(state);
                 this.api.asc_SetHighlightRequiredFields(state);
+                state && (this._state.lastRole = lastRole);
             }
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
         },
@@ -366,6 +369,13 @@ define([
                     me.view.btnHighlight.currentColor = clr;
                 }
                 config.isEdit && config.canFeatureContentControl && config.isFormCreator && me.showCreateFormTip(); // show tip only when create form in docxf
+
+                // change to event asc_onRefreshRolesList
+                me.onRefreshRolesList([
+                    {name: 'employee 1', color: Common.Utils.ThemeColor.getRgbColor('ff0000'), fields: 5},
+                    {name: 'employee 2', color: Common.Utils.ThemeColor.getRgbColor('00ff00'), fields: 1},
+                    {name: 'manager', color: null, fields: 10}
+                ]);
             });
         },
 
@@ -415,19 +425,22 @@ define([
             }
         },
 
+        onRefreshRolesList: function(roles) {
+            this.roles = roles;
+            this.view && this.view.fillRolesMenu(roles, this._state.lastRole);
+        },
+
         onManagerClick: function() {
             var me = this;
             (new DE.Views.RolesManagerDlg({
                 api: me.api,
-                handler: function(result) {
+                handler: function(result, settings) {
+                    me.roles = settings;
+                    me.onRefreshRolesList(me.roles);
                     Common.component.Analytics.trackEvent('ToolBar', 'Roles Manager');
                     Common.NotificationCenter.trigger('edit:complete', me.toolbar);
                 },
-                roles: [
+                roles: me.roles,
-                    {name: 'employee 1', color: Common.Utils.ThemeColor.getRgbColor('ff0000'), fields: 5},
-                    {name: 'employee 2', color: Common.Utils.ThemeColor.getRgbColor('00ff00'), fields: 1},
-                    {name: 'manager', color: null, fields: 10}
-                ],
                 props : undefined
             })).on('close', function(win){
             }).show();

apps/documenteditor/main/app/view/FormsTab.js

@@ -64,6 +64,7 @@ define([
             '<div class="separator long forms" style="display: none;"></div>' +
             '<div class="group no-group-mask" style="">' +
                 '<span class="btn-slot text x-huge" id="slot-btn-form-view"></span>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-view-roles"></span>' +
                 '<span class="btn-slot text x-huge" id="slot-btn-form-prev"></span>' +
                 '<span class="btn-slot text x-huge" id="slot-btn-form-next"></span>' +
                 '<span class="btn-slot text x-huge" id="slot-btn-form-clear"></span>' +
@@ -95,6 +96,16 @@ define([
             this.btnViewForm && this.btnViewForm.on('click', function (b, e) {
                 me.fireEvent('forms:mode', [b.pressed]);
             });
+            this.btnViewFormRoles && this.btnViewFormRoles.on('click', function (b, e) {
+                var item = b.menu.getChecked();
+                me.fireEvent('forms:mode', [b.pressed, item ? item.caption : undefined]);
+            });
+            this.btnViewFormRoles.menu.on('item:toggle', _.bind(function (menu, item, state) {
+                if (!!state) {
+                    me.btnViewFormRoles.toggle(true, true);
+                    me.fireEvent('forms:mode', [true, item.caption]);
+                }
+            }, me));
             this.btnManager && this.btnManager.on('click', function (b, e) {
                 me.fireEvent('forms:manager');
             });
@@ -229,6 +240,25 @@ define([
                     });
                     this.paragraphControls.push(this.btnViewForm);
 
+                    this.btnViewFormRoles = new Common.UI.Button({
+                        cls: 'btn-toolbar x-huge icon-top',
+                        iconCls: 'toolbar__icon btn-sheet-view',
+                        lock: [ _set.previewReviewMode, _set.lostConnect, _set.disableOnStart],
+                        caption: this.capBtnView,
+                        split: true,
+                        menu: new Common.UI.Menu({
+                            cls: 'menu-roles',
+                            maxHeight: 270,
+                            items: []
+                        }),
+                        enableToggle: true,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom',
+                        dataHintOffset: 'small',
+                        visible: false
+                    });
+                    this.paragraphControls.push(this.btnViewFormRoles);
+
                     // this.btnHighlight = new Common.UI.ButtonColored({
                     //     cls         : 'btn-toolbar',
                     //     iconCls     : 'toolbar__icon btn-highlight',
@@ -351,6 +381,7 @@ define([
                         me.btnRadioBox.updateHint(me.tipRadioBox);
                         me.btnImageField.updateHint(me.tipImageField);
                         me.btnViewForm.updateHint(me.tipViewForm);
+                        me.btnViewFormRoles.updateHint(me.tipViewForm);
                         me.btnManager.updateHint(me.tipManager);
                     }
                     me.btnClear.updateHint(me.textClearFields);
@@ -379,6 +410,7 @@ define([
                     this.btnRadioBox.render($host.find('#slot-btn-form-radiobox'));
                     this.btnImageField.render($host.find('#slot-btn-form-image'));
                     this.btnViewForm.render($host.find('#slot-btn-form-view'));
+                    this.btnViewFormRoles.render($host.find('#slot-btn-form-view-roles'));
                     this.btnManager.render($host.find('#slot-btn-manager'));
                     // this.btnHighlight.render($host.find('#slot-form-highlight'));
 
@@ -391,6 +423,35 @@ define([
                 return this.$el;
             },
 
+            fillRolesMenu: function(roles, lastRole) {
+                var checkedIndex = 0,
+                    me = this;
+
+                this.btnViewFormRoles.menu.removeAll();
+
+                roles && roles.forEach(function(item, index) {
+                    if (item.name===lastRole)
+                        checkedIndex = index;
+                    me.btnViewFormRoles.menu.addItem(new Common.UI.MenuItem({
+                        caption: item.name,
+                        color: item.color ? '#' + Common.Utils.ThemeColor.getHexColor(item.color.get_r(), item.color.get_g(), item.color.get_b()) : 'transparent',
+                        checkable: true,
+                        toggleGroup: 'formtab-view-role',
+                        template: _.template([
+                            '<a id="<%= id %>"  tabindex="-1" type="menuitem" class="<%= options.cls %>">',
+                            '<span class="color" style="background: <%= options.color %>;"></span>',
+                            '<%= caption %>',
+                            '</a>'
+                        ].join(''))
+                    }));
+                });
+
+                var len = this.btnViewFormRoles.menu.items.length>0;
+                len && this.btnViewFormRoles.menu.items[checkedIndex].setChecked(true, true);
+                this.btnViewFormRoles.setVisible(len);
+                this.btnViewForm.setVisible(!len);
+            },
+
             show: function () {
                 Common.UI.BaseView.prototype.show.call(this);
                 this.fireEvent('show', this);

apps/documenteditor/main/app/view/RolesManagerDlg.js

@@ -232,9 +232,12 @@ define([  'text!documenteditor/main/app/template/RolesManagerDlg.template',
                             });
                             if (rec) {
                                 me.rolesList.selectRecord(rec);
-                                me.rolesList.scrollToRecord(rec);
+                                setTimeout(function() {
+                                    me.rolesList.scrollToRecord(rec);
+                                }, 50);
                             }
                         }
+                        me.updateButtons();
                     }
                 }
             }).on('close', function() {
@@ -244,7 +247,6 @@ define([  'text!documenteditor/main/app/template/RolesManagerDlg.template',
 
             me.hide();
             win.show(xy.left + 65, xy.top + 77);
-            this.updateButtons();
         },
 
         onDeleteRole: function () {
@@ -310,7 +312,15 @@ define([  'text!documenteditor/main/app/template/RolesManagerDlg.template',
         },
 
         getSettings: function() {
-            return this.sort;
+            var arr = [];
+            this.rolesList.store.each(function(item, index) {
+                arr.push({
+                    name: item.get('name'),
+                    color: item.get('color'),
+                    fields: item.get('fields')
+                });
+            });
+            return arr;
         },
 
         onPrimary: function() {
@@ -318,7 +328,7 @@ define([  'text!documenteditor/main/app/template/RolesManagerDlg.template',
         },
 
         onDlgBtnClick: function(event) {
-            this.handler && this.handler.call(this, event.currentTarget.attributes['result'].value);
+            this.handler && this.handler.call(this, event.currentTarget.attributes['result'].value, this.getSettings());
             this.close();
         },
 

apps/documenteditor/main/resources/less/toolbar.less

@@ -193,3 +193,15 @@
         }
     }
 }
+
+.dropdown-menu.menu-roles {
+    li span.color {
+        display: inline-block;
+        vertical-align: text-top;
+        width: 12px;
+        height: 12px;
+        margin: 0 8px 0 2px;
+        border: @scaled-one-px-value-ie solid @border-color-shading-ie;
+        border: @scaled-one-px-value solid @border-color-shading;
+    }
+}