[SSE] Add sheet view manager
This commit is contained in:
Julia Radzhabova
parent
e0dc3ed7a3
commit
829b4ecd6b
|
|
@ -41,7 +41,8 @@
|
|||
|
||||
define([
|
||||
'core',
|
||||
'spreadsheeteditor/main/app/view/ViewTab'
|
||||
'spreadsheeteditor/main/app/view/ViewTab',
|
||||
'spreadsheeteditor/main/app/view/ViewManagerDlg'
|
||||
], function () {
|
||||
'use strict';
|
||||
|
||||
|
|
@ -87,8 +88,8 @@ define([
|
|||
'viewtab:zoom': this.onZoom,
|
||||
'viewtab:showview': this.onShowView,
|
||||
'viewtab:openview': this.onOpenView,
|
||||
'viewtab:createview': this.onCreateView
|
||||
// 'viewtab:manager': this.onOpenManager
|
||||
'viewtab:createview': this.onCreateView,
|
||||
'viewtab:manager': this.onOpenManager
|
||||
},
|
||||
'Statusbar': {
|
||||
'sheet:changed': this.onApiSheetChanged.bind(this)
|
||||
|
|
@ -166,6 +167,18 @@ define([
|
|||
this.api && this.api.asc_addNamedSheetView(null, true);
|
||||
},
|
||||
|
||||
onOpenManager: function(item) {
|
||||
var me = this;
|
||||
(new SSE.Views.ViewManagerDlg({
|
||||
api: this.api,
|
||||
handler: function(result) {
|
||||
Common.NotificationCenter.trigger('edit:complete', me.view);
|
||||
},
|
||||
views: this.api.asc_getNamedSheetViews()
|
||||
})).on('close', function(win){
|
||||
}).show();
|
||||
},
|
||||
|
||||
// onWorksheetLocked: function(index,locked) {
|
||||
// if (index == this.api.asc_getActiveWorksheetIndex()) {
|
||||
// Common.Utils.lockControls(SSE.enumLock.sheetLock, locked, {array: this.view.btnsSortDown.concat(this.view.btnsSortUp, this.view.btnCustomSort, this.view.btnGroup, this.view.btnUngroup)});
|
||||
|
|
|
|||
315
apps/spreadsheeteditor/main/app/view/ViewManagerDlg.js
Normal file
315
apps/spreadsheeteditor/main/app/view/ViewManagerDlg.js
Normal file
|
|
@ -0,0 +1,315 @@
|
|||
/*
|
||||
*
|
||||
* (c) Copyright Ascensio System SIA 2010-2020
|
||||
*
|
||||
* This program is a free software product. You can redistribute it and/or
|
||||
* modify it under the terms of the GNU Affero General Public License (AGPL)
|
||||
* version 3 as published by the Free Software Foundation. In accordance with
|
||||
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
|
||||
* that Ascensio System SIA expressly excludes the warranty of non-infringement
|
||||
* of any third-party rights.
|
||||
*
|
||||
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
|
||||
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
|
||||
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
||||
*
|
||||
* You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
|
||||
* street, Riga, Latvia, EU, LV-1050.
|
||||
*
|
||||
* The interactive user interfaces in modified source and object code versions
|
||||
* of the Program must display Appropriate Legal Notices, as required under
|
||||
* Section 5 of the GNU AGPL version 3.
|
||||
*
|
||||
* Pursuant to Section 7(b) of the License you must retain the original Product
|
||||
* logo when distributing the program. Pursuant to Section 7(e) we decline to
|
||||
* grant you any rights under trademark law for use of our trademarks.
|
||||
*
|
||||
* All the Product's GUI elements, including illustrations and icon sets, as
|
||||
* well as technical writing content are licensed under the terms of the
|
||||
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
|
||||
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
*
|
||||
*/
|
||||
/**
|
||||
*
|
||||
* ViewManagerDlg.js
|
||||
*
|
||||
* Created by Julia.Radzhabova on 09.07.2020
|
||||
* Copyright (c) 2020 Ascensio System SIA. All rights reserved.
|
||||
*
|
||||
*/
|
||||
|
||||
define([ 'common/main/lib/view/AdvancedSettingsWindow',
|
||||
'common/main/lib/component/ComboBox',
|
||||
'common/main/lib/component/ListView',
|
||||
'common/main/lib/component/InputField'
|
||||
], function () {
|
||||
'use strict';
|
||||
|
||||
SSE.Views = SSE.Views || {};
|
||||
|
||||
SSE.Views.ViewManagerDlg = Common.Views.AdvancedSettingsWindow.extend(_.extend({
|
||||
options: {
|
||||
alias: 'ViewManagerDlg',
|
||||
contentWidth: 460,
|
||||
height: 330,
|
||||
buttons: null
|
||||
},
|
||||
|
||||
initialize: function (options) {
|
||||
var me = this;
|
||||
_.extend(this.options, {
|
||||
title: this.txtTitle,
|
||||
template: [
|
||||
'<div class="box" style="height:' + (this.options.height-85) + 'px;">',
|
||||
'<div class="content-panel" style="padding: 0;">',
|
||||
'<div class="settings-panel active">',
|
||||
'<div class="inner-content">',
|
||||
'<table cols="1" style="width: 100%;">',
|
||||
'<tr>',
|
||||
'<td class="padding-small">',
|
||||
'<label class="header">' + this.textViews + '</label>',
|
||||
'<div id="view-manager-list" class="range-tableview" style="width:100%; height: 166px;"></div>',
|
||||
'</td>',
|
||||
'</tr>',
|
||||
'<tr>',
|
||||
'<td class="padding-large">',
|
||||
'<button type="button" class="btn btn-text-default auto" id="view-manager-btn-new" style="min-width: 80px;margin-right:5px;">' + this.textNew + '</button>',
|
||||
'<button type="button" class="btn btn-text-default auto" id="view-manager-btn-rename" style="min-width: 80px;margin-right:5px;">' + this.textRename + '</button>',
|
||||
'<button type="button" class="btn btn-text-default auto" id="view-manager-btn-duplicate" style="min-width: 80px;">' + this.textDuplicate + '</button>',
|
||||
'<button type="button" class="btn btn-text-default auto" id="view-manager-btn-delete" style="min-width: 80px;float: right;">' + this.textDelete + '</button>',
|
||||
'</td>',
|
||||
'</tr>',
|
||||
'</table>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<div class="separator horizontal"></div>',
|
||||
'<div class="footer center">',
|
||||
'<button class="btn normal dlg-btn" result="apply" style="width: 86px;">' + this.textGoTo + '</button>',
|
||||
'<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + this.closeButtonText + '</button>',
|
||||
'</div>'
|
||||
].join('')
|
||||
}, options);
|
||||
|
||||
this.api = options.api;
|
||||
this.handler = options.handler;
|
||||
this.views = options.views || [];
|
||||
this.userTooltip = true;
|
||||
this.currentView = undefined;
|
||||
|
||||
this.wrapEvents = {
|
||||
onRefreshNamedSheetViewList: _.bind(this.onRefreshNamedSheetViewList, this)
|
||||
};
|
||||
|
||||
Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
|
||||
},
|
||||
render: function () {
|
||||
Common.Views.AdvancedSettingsWindow.prototype.render.call(this);
|
||||
var me = this;
|
||||
|
||||
this.viewList = new Common.UI.ListView({
|
||||
el: $('#view-manager-list', this.$window),
|
||||
store: new Common.UI.DataViewStore(),
|
||||
simpleAddMode: true,
|
||||
emptyText: this.textEmpty,
|
||||
template: _.template(['<div class="listview inner" style=""></div>'].join('')),
|
||||
itemTemplate: _.template([
|
||||
'<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;<% if (!lock) { %>pointer-events:none;<% } %>">',
|
||||
'<div style="width:100%;"><%= name %></div>',
|
||||
'<% if (lock) { %>',
|
||||
'<div class="lock-user"><%=lockuser%></div>',
|
||||
'<% } %>',
|
||||
'</div>'
|
||||
].join(''))
|
||||
});
|
||||
this.viewList.on('item:select', _.bind(this.onSelectItem, this))
|
||||
.on('item:keydown', _.bind(this.onKeyDown, this))
|
||||
.on('item:dblclick', _.bind(this.onDblClickItem, this))
|
||||
.on('entervalue', _.bind(this.onDblClickItem, this));
|
||||
|
||||
this.btnNew = new Common.UI.Button({
|
||||
el: $('#view-manager-btn-new')
|
||||
});
|
||||
// this.btnNew.on('click', _.bind(this.onNew, this));
|
||||
|
||||
this.btnRename = new Common.UI.Button({
|
||||
el: $('#view-manager-btn-rename')
|
||||
});
|
||||
// this.btnRename.on('click', _.bind(this.onRename, this));
|
||||
|
||||
this.btnDuplicate = new Common.UI.Button({
|
||||
el: $('#view-manager-btn-duplicate')
|
||||
});
|
||||
// this.btnDuplicate.on('click', _.bind(this.onDuplicate, this));
|
||||
|
||||
this.btnDelete = new Common.UI.Button({
|
||||
el: $('#view-manager-btn-delete')
|
||||
});
|
||||
this.btnDelete.on('click', _.bind(this.onDelete, this));
|
||||
|
||||
this.afterRender();
|
||||
},
|
||||
|
||||
afterRender: function() {
|
||||
this._setDefaults();
|
||||
},
|
||||
|
||||
_setDefaults: function (props) {
|
||||
this.refreshList(this.views, 0);
|
||||
// this.api.asc_registerCallback('asc_onRefreshNamedSheetViewList', this.wrapEvents.onRefreshNamedSheetViewList);
|
||||
},
|
||||
|
||||
onRefreshNamedSheetViewList: function() {
|
||||
this.refreshList(this.api.asc_getNamedSheetViews(), this.currentView);
|
||||
},
|
||||
|
||||
refreshList: function(views, selectedItem) {
|
||||
if (views) {
|
||||
this.views = views;
|
||||
var arr = [];
|
||||
for (var i=0; i<this.views.length; i++) {
|
||||
var view = this.views[i];
|
||||
arr.push({
|
||||
name: view.asc_getName(true),
|
||||
view: view,
|
||||
lock: false
|
||||
// lock: (id!==null && id!==undefined),
|
||||
// lockuser: (id) ? this.getUserName(id) : this.guestText,
|
||||
});
|
||||
}
|
||||
this.viewList.store.reset(arr);
|
||||
}
|
||||
|
||||
var val = this.viewList.store.length;
|
||||
this.btnRename.setDisabled(!val);
|
||||
this.btnDuplicate.setDisabled(!val);
|
||||
this.btnDelete.setDisabled(!val);
|
||||
if (val>0) {
|
||||
if (selectedItem===undefined || selectedItem===null) selectedItem = 0;
|
||||
if (_.isNumber(selectedItem)) {
|
||||
if (selectedItem>val-1) selectedItem = val-1;
|
||||
this.viewList.selectByIndex(selectedItem);
|
||||
setTimeout(function() {
|
||||
me.viewList.scrollToRecord(me.viewList.store.at(selectedItem));
|
||||
}, 50);
|
||||
|
||||
}
|
||||
// if (this.userTooltip===true && this.viewList.cmpEl.find('.lock-user').length>0)
|
||||
// this.viewList.cmpEl.on('mouseover', _.bind(me.onMouseOverLock, me)).on('mouseout', _.bind(me.onMouseOutLock, me));
|
||||
}
|
||||
|
||||
var me = this;
|
||||
_.delay(function () {
|
||||
me.viewList.cmpEl.find('.listview').focus();
|
||||
me.viewList.scroller.update({alwaysVisibleY: true});
|
||||
}, 100, this);
|
||||
},
|
||||
|
||||
onMouseOverLock: function (evt, el, opt) {
|
||||
if (this.userTooltip===true && $(evt.target).hasClass('lock-user')) {
|
||||
var me = this,
|
||||
tipdata = $(evt.target).tooltip({title: this.tipIsLocked,trigger:'manual'}).data('bs.tooltip');
|
||||
|
||||
this.userTooltip = tipdata.tip();
|
||||
this.userTooltip.css('z-index', parseInt(this.$window.css('z-index')) + 10);
|
||||
tipdata.show();
|
||||
|
||||
setTimeout(function() { me.userTipHide(); }, 5000);
|
||||
}
|
||||
},
|
||||
|
||||
userTipHide: function () {
|
||||
if (typeof this.userTooltip == 'object') {
|
||||
this.userTooltip.remove();
|
||||
this.userTooltip = undefined;
|
||||
this.viewList.cmpEl.off('mouseover').off('mouseout');
|
||||
}
|
||||
},
|
||||
|
||||
onMouseOutLock: function (evt, el, opt) {
|
||||
if (typeof this.userTooltip == 'object') this.userTipHide();
|
||||
},
|
||||
|
||||
onDelete: function () {
|
||||
var rec = this.viewList.getSelectedRec();
|
||||
if (rec) {
|
||||
this.api.asc_deleteNamedSheetViews([rec.get('view')]);
|
||||
}
|
||||
},
|
||||
|
||||
getSettings: function() {
|
||||
return this.sort;
|
||||
},
|
||||
|
||||
onPrimary: function() {
|
||||
return true;
|
||||
},
|
||||
|
||||
onDlgBtnClick: function(event) {
|
||||
this.handler && this.handler.call(this, event.currentTarget.attributes['result'].value);
|
||||
this.close();
|
||||
},
|
||||
|
||||
getUserName: function(id){
|
||||
var usersStore = SSE.getCollection('Common.Collections.Users');
|
||||
if (usersStore){
|
||||
var rec = usersStore.findUser(id);
|
||||
if (rec)
|
||||
return rec.get('username');
|
||||
}
|
||||
return this.guestText;
|
||||
},
|
||||
|
||||
onSelectItem: function(lisvView, itemView, record) {
|
||||
this.userTipHide();
|
||||
var rawData = {},
|
||||
isViewSelect = _.isFunction(record.toJSON);
|
||||
|
||||
if (isViewSelect){
|
||||
if (record.get('selected')) {
|
||||
rawData = record.toJSON();
|
||||
} else {// record deselected
|
||||
return;
|
||||
}
|
||||
this.currentView = _.indexOf(this.viewList.store.models, record);
|
||||
// this.btnRename.setDisabled(rawData.lock);
|
||||
// this.btnDelete.setDisabled(rawData.lock);
|
||||
}
|
||||
},
|
||||
|
||||
hide: function () {
|
||||
this.userTipHide();
|
||||
Common.UI.Window.prototype.hide.call(this);
|
||||
},
|
||||
|
||||
close: function () {
|
||||
this.userTipHide();
|
||||
this.api.asc_unregisterCallback('asc_onRefreshNamedSheetViewList', this.wrapEvents.onRefreshNamedSheetViewList);
|
||||
|
||||
Common.UI.Window.prototype.close.call(this);
|
||||
},
|
||||
|
||||
onKeyDown: function (lisvView, record, e) {
|
||||
if (e.keyCode==Common.UI.Keys.DELETE && !this.btnDelete.isDisabled())
|
||||
this.onDelete();
|
||||
},
|
||||
|
||||
onDblClickItem: function (lisvView, record, e) {
|
||||
},
|
||||
|
||||
txtTitle: 'Sheet View Manager',
|
||||
textViews: 'Sheet views',
|
||||
closeButtonText : 'Close',
|
||||
textNew: 'New',
|
||||
textRename: 'Rename',
|
||||
textDuplicate: 'Duplicate',
|
||||
textDelete: 'Delete',
|
||||
textGoTo: 'Go to view...',
|
||||
textEmpty: 'No views have been created yet.',
|
||||
guestText: 'Guest',
|
||||
tipIsLocked: 'This element is being edited by another user.'
|
||||
|
||||
}, SSE.Views.ViewManagerDlg || {}));
|
||||
});
|
||||
Loading…
Reference in a new issue