Merge pull request '[PDF forms] Select recipient for created forms' (#819) from fix/current-role into hotfix/v9.2.0

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

@@ -101,7 +101,7 @@ define([
             }
 
             if (this.disabled)
-                this.setDisabled(this.disabled);
+                this.setDisabled(!(this.disabled=false));
 
             if (this.options.scaling !== false && this.iconCls) {
                 this.$label.attr('ratio', 'ratio');
@@ -118,12 +118,11 @@ define([
         },
 
         setDisabled: function(disabled) {
-            if (!this.rendered)
+            if (this.rendered) {
-                return;
+                disabled = (disabled===true);
-
+                if (disabled !== this.disabled) {
-            disabled = (disabled===true);
+                    this.$label.toggleClass('disabled', disabled);
-            if (disabled !== this.disabled) {
+                }
-                this.$label.toggleClass('disabled', disabled);
             }
 
             this.disabled = disabled;

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

@@ -132,7 +132,8 @@ define([
                     'forms:submit': this.onSubmitClick,
                     'forms:save': this.onSaveFormClick,
                     'forms:manager': this.onManagerClick,
-                    'forms:gopage': this.onGotoPage
+                    'forms:gopage': this.onGotoPage,
+                    'forms:currentrole': this.onCurrentRole
                 },
                 'Toolbar': {
                     'tab:active': this.onActiveTab,
@@ -140,6 +141,9 @@ define([
                     'view:compact'  : function (toolbar, state) {
                         state && me.onTabCollapse();
                     },
+                },
+                'FormSettings': {
+                    'forms:currentrole': this.onCurrentRoleChanged
                 }
             });
             this.appConfig.isRestrictedEdit && this.api && this.api.asc_registerCallback('asc_onDocumentModifiedChanged', _.bind(this.onDocumentModifiedChanged, this));
@@ -590,6 +594,12 @@ define([
                         // me.showHelpTip('submit');
                     // }
                 }
+                if (me.view && me.view.cmbRoles && me.view.cmbRoles.cmpEl) {
+                    let width = Math.max(me.view.lblRoles.$label.width(), 130);
+                    me.view.cmbRoles.setWidth(width);
+                    me.view.cmbRoles.cmpEl.find('.form-control').css('width', width + 'px');
+                    me.view.cmbRoles.cmpEl.find('.dropdown-menu').css('min-width', width + 'px');
+                }
                 me.onRefreshRolesList();
                 me.onChangeProtectDocument();
             });
@@ -659,7 +669,10 @@ define([
                 oform && (roles = oform.asc_getAllRoles());
             }
             this._state.lastRoleInList = (roles && roles.length>0) ? roles[roles.length-1].asc_getSettings().asc_getName() : undefined;
-            this.view && this.view.fillRolesMenu(roles, this._state.lastViewRole);
+            if (this.view) {
+                this.view.fillRolesMenu(roles, this._state.lastViewRole);
+                this.view.fillFillForCombo(roles, this._state.lastRoleInList);
+            }
         },
 
         onManagerClick: function() {
@@ -790,6 +803,40 @@ define([
             }
         },
 
+        onCurrentRole: function (combo, record) {
+            if (!this.api) return;
+            if (record.value === 0) {
+                combo.setValue(Common.Utils.InternalSettings.get('de-last-form-role') || this._state.lastRoleInList);
+
+                const formManager = this.api.asc_GetOForm();
+
+                new DE.Views.RoleEditDlg({
+                    oformManager: formManager,
+                    colors: [],
+                    isEdit: false,
+                    handler: function (result, settings) {
+                        if (result === 'ok' && settings) {
+                            const role = new AscCommon.CRoleSettings();
+                            role.asc_putName(settings.name);
+                            role.asc_putColor(settings.color);
+                            this.oformManager.asc_addRole(role);
+                            Common.Utils.InternalSettings.set('de-last-form-role', settings.name);
+                            combo.setValue(Common.Utils.InternalSettings.get('de-last-form-role'));
+                        }
+                    }
+                }).on('close', () => {
+                    this.fireEvent('editcomplete', this);
+                }).show();
+            } else {
+                Common.Utils.InternalSettings.set('de-last-form-role', record.value)
+                this.fireEvent('editcomplete', this);
+            }
+        },
+
+        onCurrentRoleChanged: function() {
+            this.view && this.view.cmbRoles && this.view.cmbRoles.setValue(Common.Utils.InternalSettings.get('de-last-form-role'));
+        },
+
         onRequestRoles: function(tab) {
             if (this._isDocReady)
                 this.requestStartFilling();

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

@@ -112,7 +112,7 @@ define([
             this.DefValueDropDown = el.find('#form-combo-def-value').closest('tr');
             this.TagSettings = el.find('#form-txt-tag').closest('tr');
 
-            !Common.UI.FeaturesManager.isFeatureEnabled('roles', true) && el.find('#form-combo-roles').closest('tr').hide();
+            !Common.UI.FeaturesManager.isFeatureEnabled('roles', true) && el.find('#form-combo-roles').closest('tr').hide().next('tr').hide();
         },
 
         createDelayedElements: function() {
@@ -656,7 +656,7 @@ define([
 
             var template = [
                 '<div class="input-group combobox input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
-                    '<div class="form-control" style="display: flex; align-items: center; line-height: 14px; cursor: pointer; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;<%= style %>"></div>',
+                    '<div class="form-control" style="display: flex; align-items: center; line-height: 14px; cursor: pointer; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>"></div>',
                     '<div style="display: table-cell;"></div>',
                     '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>',
                     '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">'].concat(itemsTemplate).concat([
@@ -668,7 +668,7 @@ define([
                 el: $markup.findById('#form-combo-roles'),
                 cls: 'menu-roles',
                 menuCls: 'menu-absolute',
-                menuStyle: 'min-width: 194px; max-height: 190px;max-width: 400px;',
+                menuStyle: 'min-width: 194px; max-height: 205px;max-width: 400px;',
                 menuAlignEl: $(this.el).parent(),
                 restoreMenuHeightAndTop: 85,
                 style: 'width: ' + $markup.width() + 'px;',
@@ -2015,6 +2015,7 @@ define([
                                 props.put_FormPr(formPr);
                                 me.api.asc_SetContentControlProperties(props, me.internalId);
                                 Common.Utils.InternalSettings.set('de-last-form-role', settings.name);
+                                me.fireEvent('forms:currentrole');
                             }
                         }
                     }).on('close', () => {
@@ -2026,6 +2027,7 @@ define([
                     this.api.asc_SetContentControlProperties(props, this.internalId);
                     Common.Utils.InternalSettings.set('de-last-form-role', record.value)
                     this.fireEvent('editcomplete', this);
+                    this.fireEvent('forms:currentrole');
                 }
             }
         },

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

@@ -82,6 +82,14 @@ define([
                 '<span class="btn-slot text x-huge" id="slot-btn-form-complex"></span>' +
             '</div>' +
             '<div class="separator long forms-buttons" style="display: none;"></div>' +
+            '<div class="group forms-buttons small" style="display: none;">' +
+                '<div class="elset" style="text-align: center;">' +
+                    '<span class="btn-slot text font-size-normal" id="slot-lbl-fill-for" style="text-align: center;margin-top: 4px;"></span>' +
+                '</div>' +
+                '<div class="elset" style="display: flex;">' +
+                    '<span id="form-combo-roles-current" style="flex-grow: 1;"></span>' +
+                '</div>' +
+            '</div>' +
             '<div class="group forms-buttons" style="display: none;">' +
                 '<span class="btn-slot text x-huge" id="slot-btn-manager"></span>' +
             '</div>' +
@@ -216,6 +224,9 @@ define([
             this.btnManager && this.btnManager.on('click', function (b, e) {
                 me.fireEvent('forms:manager');
             });
+            this.cmbRoles && this.cmbRoles.on('selected', function(combo, record) {
+                me.fireEvent('forms:currentrole', [combo, record]);
+            });
             this.btnClear && this.btnClear.on('click', function (b, e) {
                 me.fireEvent('forms:clear');
             });
@@ -558,6 +569,67 @@ define([
                     //     dataHintDirection: 'left',
                     //     dataHintOffset: 'small'
                     // });
+
+                    var itemsTemplate =
+                        [
+                            '<% _.each(items, function(item) { %>',
+                            '<li id="<%= item.id %>" data-value="<%= Common.Utils.String.htmlEncode(item.value) %>"<% if (item.value === 0) { %> class="border-top"<% } %>>',
+                                '<% if (item.value === 0) { %>',
+                                '<a tabindex="-1" type="menuitem" style="display: block; padding: ' + (Common.UI.isRTL() ? '5px 24px 5px 20px' : '5px 20px 5px 24px') + ';">',
+                                    '<span class="menu-item-icon menu__icon btn-zoomup"></span>',
+                                    '<%= Common.Utils.String.htmlEncode(item.displayValue) %>',
+                                '</a>',
+                                '<% } else { %>',
+                                '<a tabindex="-1" type="menuitem" style="padding-' + (Common.UI.isRTL() ? 'right' : 'left') + ': 10px;">',
+                                    '<span class="color" style="background: <%= item.color %>;"></span>',
+                                    '<div style="overflow: hidden; text-overflow: ellipsis;"><%= Common.Utils.String.htmlEncode(item.displayValue) %></div>',
+                                '</a>',
+                                '<% } %>',
+                            '</li>',
+                            '<% }); %>'
+                        ];
+
+                    var template = [
+                        '<div class="input-group combobox input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
+                            '<div class="form-control" style="display: flex; align-items: center; line-height: 14px; cursor: pointer; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>"></div>',
+                            '<div style="display: table-cell;"></div>',
+                            '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>',
+                            '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">'].concat(itemsTemplate).concat([
+                            '</ul>',
+                        '</div>'
+                    ]);
+
+                    this.cmbRoles = new Common.UI.ComboBoxCustom({
+                        cls: 'menu-roles',
+                        menuCls: 'menu-absolute',
+                        menuStyle: 'min-width: 130px; max-height: 205px;max-width: 400px;',
+                        // menuAlignEl: $(this.el).parent(),
+                        restoreMenuHeightAndTop: 85,
+                        style: 'width: 130px;',
+                        lock: [ _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockForms, _set.docLockComments, _set.viewMode],
+                        editable: false,
+                        template    : _.template(template.join('')),
+                        itemsTemplate: _.template(itemsTemplate.join('')),
+                        data: [],
+                        dataHint: '1',
+                        dataHintDirection: 'bottom',
+                        dataHintOffset: 'small',
+                        updateFormControl: function(record) {
+                            var formcontrol = $(this.el).find('.form-control');
+                            if (record) {
+                                formcontrol[0].innerHTML =
+                                    `<span class="color" style="background: ${record.get('color')};"></span><div style="overflow: hidden; text-overflow: ellipsis;">${Common.Utils.String.htmlEncode(record.get('displayValue'))}</div>`;
+                            } else
+                                formcontrol[0].innerHTML = '';
+                        }
+                    });
+                    this.paragraphControls.push(this.cmbRoles);
+
+                    this.lblRoles = new Common.UI.Label({
+                        caption: this.textFillFor,
+                        lock: [ _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart, _set.docLockView, _set.docLockForms, _set.docLockComments, _set.viewMode]
+                    });
+                    this.paragraphControls.push(this.lblRoles);
                 }
 
                 this.btnClear = new Common.UI.Button({
@@ -758,9 +830,14 @@ define([
                     this.btnCreditCard.render($host.find('#slot-btn-form-credit'));
                     this.btnDateTime.render($host.find('#slot-btn-form-datetime'));
                     this.btnSubmit && this.btnSubmit.render($host.find('#slot-btn-form-submit'));
+                    this.lblRoles.render($host.find('#slot-lbl-fill-for'));
+                    this.cmbRoles.render($host.find('#form-combo-roles-current'));
 
                     $host.find('.forms-buttons').show();
-                    !Common.UI.FeaturesManager.isFeatureEnabled('roles', true) && this.btnManager.cmpEl.parents('.group').hide().prev('.separator').hide();
+                    if (!Common.UI.FeaturesManager.isFeatureEnabled('roles', true)) {
+                        this.btnManager.cmpEl.parents('.group').hide();
+                        this.cmbRoles.cmpEl.parents('.group').hide().prev('.separator').hide();
+                    }
                 }
                 this.btnClear.render($host.find('#slot-btn-form-clear'));
                 this.btnPrevForm.render($host.find('#slot-btn-form-prev'));
@@ -814,6 +891,31 @@ define([
                 Common.Utils.lockControls(Common.enumLock.formsNoRoles, !len,{array: [this.btnViewFormRoles]});
             },
 
+            fillFillForCombo: function(roles, lastRoleInList) {
+                if (!this.cmbRoles) return;
+                
+                var lastrole = this.cmbRoles.getSelectedRecord();
+                lastrole = lastrole ? lastrole.value : '';
+
+                var arr = [];
+                var me = this;
+                roles && roles.forEach(function(item) {
+                    var role = item.asc_getSettings(),
+                        color = role.asc_getColor();
+                    arr.push({
+                        displayValue: role.asc_getName() || me.textAnyone,
+                        value: role.asc_getName(),
+                        color: color ? '#' + Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()) : 'transparent'
+                    });
+                });
+
+                arr.push({ displayValue: this.textAddRole, value: 0 });
+
+                this.cmbRoles.setData(arr);
+                var rec = this.cmbRoles.store.findWhere({ value: lastrole });
+                this.cmbRoles.setValue(rec ? lastrole : lastRoleInList);
+            },
+
             show: function () {
                 Common.UI.BaseView.prototype.show.call(this);
                 this.fireEvent('show', this);
@@ -919,7 +1021,9 @@ define([
             tipPrevPage: 'Go to the previous page',
             tipNextPage: 'Go to the next page',
             capBtnSignature: 'Signature Field',
-            tipSignField: 'Insert signature field'
+            tipSignField: 'Insert signature field',
+            textFillFor: 'Insert fields for',
+            textAddRole: 'Add recipient'
         }
     }()), DE.Views.FormsTab || {}));
 });

apps/documenteditor/main/locale/en.json

@@ -2930,6 +2930,8 @@
   "DE.Views.FormsTab.txtInlineText": "Inline",
   "DE.Views.FormsTab.txtSignedForm": "This document has been signed and cannot be edited.",
   "DE.Views.FormsTab.txtUntitled": "Untitled",
+  "DE.Views.FormsTab.textFillFor": "Insert fields for",
+  "DE.Views.FormsTab.textAddRole": "Add recipient",
   "DE.Views.HeaderFooterSettings.textBottomCenter": "Bottom center",
   "DE.Views.HeaderFooterSettings.textBottomLeft": "Bottom left",
   "DE.Views.HeaderFooterSettings.textBottomPage": "Bottom of page",