sipwise
/
ngcp-csc
mirror of https://github.com/sipwise/ngcp-csc.git
1
0
Fork 0
Code Issues Releases Wiki Activity
ngcp-csc/classic/src/view/main/MainController.js

398 lines
16 KiB
Raw Blame History

Ext.define('NgcpCsc.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
listen: {
controller: {
'#': {
unmatchedroute: 'onRouteChange'
},
'*': {
showmessage: 'showMessage',
showconfirmbox: 'showConfirmBox',
updateconversationtitle: 'setSectionTitle',
setCentralContentHeight: 'setCentralContentHeight'
}
},
component: {
'*': {
cardContainerResized: 'cardContainerResized'
}
}
},
routes: {
':node': 'onRouteChange'
},
lastView: null,
setCurrentView: function(hashTag) {
hashTag = (hashTag || '').toLowerCase();
var me = this,
refs = me.getReferences(),
mainCard = refs.mainCardPanel,
mainLayout = mainCard.getLayout(),
navigationList = refs.navigationTreeList,
store = navigationList.getStore(),
node = store.findNode('routeId', hashTag) ||
store.findNode('viewType', hashTag) || 'inbox',
view = (node && node.get('viewType')),
lastView = me.lastView,
existingItem = mainCard.child('component[routeId=' + hashTag + ']'),
newView;
if (!view) {
return;
}
// Kill any previously routed window
if (lastView && lastView.isWindow) {
lastView.destroy();
}
lastView = mainLayout.getActiveItem();
if (!existingItem) {
newView = Ext.create({
xtype: view,
cls: 'section-container',
routeId: hashTag, // for existingItem search later
hideMode: 'offsets'
});
}
if (!newView || !newView.isWindow) {
// !newView means we have an existing view, but if the newView isWindow
// we don't add it to the card layout.
if (existingItem) {
// We don't have a newView, so activate the existing view.
if (existingItem !== lastView) {
mainLayout.setActiveItem(existingItem);
}
newView = existingItem;
} else {
// newView is set (did not exist already), so add it and make it the
// activeItem.
Ext.suspendLayouts();
mainLayout.setActiveItem(mainCard.add(newView));
Ext.resumeLayouts(true);
}
}
navigationList.setSelection(node);
if (newView.isFocusable(true)) {
newView.focus();
}
me.toggleFilter();
me.fireEvent('resetFilters');
me.lastView = newView;
},
onNavigationTreeSelectionChange: function(tree, node) {
var to = node && (node.get('routeId') || node.get('viewType'));
if (to) {
if (node.parentNode) {
node.parentNode.expand();
}
this.redirectTo(to);
this.mainContainerResized();
}
},
onToggleNavigationSize: function() {
var me = this,
refs = me.getReferences(),
navigationList = refs.navigationTreeList,
wrapContainer = refs.mainContainerWrap,
collapsing = !navigationList.getMicro(),
new_width = collapsing ? 64 : 250;
if (Ext.isIE9m || !Ext.os.is.Desktop) {
Ext.suspendLayouts();
refs.logo.setWidth(new_width);
navigationList.setWidth(new_width);
navigationList.setMicro(collapsing);
Ext.resumeLayouts(); // do not flush the layout here...
// No animation for IE9 or lower...
wrapContainer.layout.animatePolicy = wrapContainer.layout.animate = null;
wrapContainer.updateLayout(); // ... since this will flush them
} else {
if (!collapsing) {
// If we are leaving micro mode (expanding), we do that first so that the
// text of the items in the navlist will be revealed by the animation.
navigationList.setMicro(false);
}
// Start this layout first since it does not require a layout
refs.logo.animate({
dynamic: true,
to: {
width: new_width
}
});
// Directly adjust the width config and then run the main wrap container layout
// as the root layout (it and its chidren). This will cause the adjusted size to
// be flushed to the element and animate to that new size.
navigationList.width = new_width;
wrapContainer.updateLayout({
isRoot: true
});
navigationList.el.addCls('nav-tree-animating');
// We need to switch to micro mode on the navlist *after* the animation (this
// allows the "sweep" to leave the item text in place until it is no longer
// visible.
if (collapsing) {
navigationList.on({
afterlayoutanimation: function() {
navigationList.setMicro(true);
navigationList.el.removeCls('nav-tree-animating');
},
single: true
});
}
}
},
onMainViewRender: function() {
if (!window.location.hash) {
this.redirectTo("inbox");
}
},
mainContainerResized: function(cmp) {
var cmp = cmp || this.lookupReference('mainCardPanel');
var navTree = this.lookupReference('navigationTreeList');
var filterTxtSearch = this.lookupReference('filterTxtSearch');
var filterTxtSearchWidth = (filterTxtSearch.getWidth() > 0) ? filterTxtSearch.getWidth() : 730;
var offset = 95;
var leftMargin = (cmp.getWidth() / 2) - (filterTxtSearchWidth / 2) - offset;
if (leftMargin > 0 && Ext.os.is.Desktop) {
filterTxtSearch.setMargin('0 0 0 ' + leftMargin);
}
},
onRouteChange: function(id) {
var vm = this.getViewModel();
var toggleButton = this.lookupReference('headerToggleButton');
this.setCurrentView(id);
this.fireEvent('routeChange');
this.setSectionTitle(id);
if (id == 'inbox' || id == 'conversation-with' || id == 'pbxconfig/seats' || id == 'pbxconfig/groups' || id == 'pbxconfig/devices') {
vm.set('headerBarFieldHideState', false);
} else {
vm.set('headerBarFieldHideState', true);
};
if (id == 'pbxconfig/seats' || id == 'pbxconfig/groups' || id == 'pbxconfig/devices') {
this.toggleFree('pressed');
toggleButton.setPressed(true);
};
},
setSectionTitle: function(id, record) {
var vm = this.getViewModel();
var title;
switch (id) {
case 'inbox':
title = Ngcp.csc.locales.conversations.title[localStorage.getItem('languageSelected')];
break;
case 'conversation-with':
if (!record) {
return;
};
title = Ngcp.csc.locales.conversationwith.title[localStorage.getItem('languageSelected')] + ' ' + record.get('name');
break;
case 'callforward/always':
title = Ngcp.csc.locales.callforward.title[localStorage.getItem('languageSelected')] + Ngcp.csc.locales.callforward.always_title[localStorage.getItem('languageSelected')];
break;
case 'callforward/afterhours':
title = Ngcp.csc.locales.callforward.title[localStorage.getItem('languageSelected')] + Ngcp.csc.locales.callforward.afterhours_title[localStorage.getItem('languageSelected')];
break;
case 'callforward/companyhours':
title = Ngcp.csc.locales.callforward.title[localStorage.getItem('languageSelected')] + Ngcp.csc.locales.callforward.companyhours_title[localStorage.getItem('languageSelected')];
break;
case 'callblock':
title = Ngcp.csc.locales.callforward.title[localStorage.getItem('languageSelected')];
break;
case 'reminder':
title = Ngcp.csc.locales.reminder.title[localStorage.getItem('languageSelected')];
break;
case 'password':
title = Ngcp.csc.locales.password.title[localStorage.getItem('languageSelected')];
break;
case 'themeroller':
title = Ngcp.csc.locales.themeroller.title[localStorage.getItem('languageSelected')];
break;
case 'pbxconfig/seats':
title = Ngcp.csc.locales.pbxconfig.title[localStorage.getItem('languageSelected')] + Ngcp.csc.locales.pbxconfig.seat_title[localStorage.getItem('languageSelected')];
break;
case 'pbxconfig/groups':
title = Ngcp.csc.locales.pbxconfig.title[localStorage.getItem('languageSelected')] + Ngcp.csc.locales.pbxconfig.group_title[localStorage.getItem('languageSelected')];
break;
case 'pbxconfig/devices':
title = Ngcp.csc.locales.pbxconfig.title[localStorage.getItem('languageSelected')] + Ngcp.csc.locales.pbxconfig.device_title[localStorage.getItem('languageSelected')];
break;
case 'pbxconfig/autoattendant':
title = Ngcp.csc.locales.pbxconfig.title[localStorage.getItem('languageSelected')] + Ngcp.csc.locales.pbxconfig.autoattendant_title[localStorage.getItem('languageSelected')];
break;
case 'account':
title = Ngcp.csc.locales.account.title[localStorage.getItem('languageSelected')];
break;
case 'callblocking/incoming':
title = Ngcp.csc.locales.callblocking.title[localStorage.getItem('languageSelected')] + Ngcp.csc.locales.callblocking.incoming_title[localStorage.getItem('languageSelected')];
break;
case 'callblocking/outgoing':
title = Ngcp.csc.locales.callblocking.title[localStorage.getItem('languageSelected')] + Ngcp.csc.locales.callblocking.outgoing_title[localStorage.getItem('languageSelected')];
break;
case 'callblocking/privacy':
title = Ngcp.csc.locales.callblocking.title[localStorage.getItem('languageSelected')] + Ngcp.csc.locales.callblocking.privacy_title[localStorage.getItem('languageSelected')];
break;
default:
title = vm.get('sectionTitle');
}
vm.set('sectionTitle', title);
},
logout: function() {
localStorage.removeItem('remember_me');
location.reload();
},
showMessage: function(success, msg) {
if (success) {
Ext.toast({
html: '<i class="' + Ngcp.csc.icons.check + '" aria-hidden="true"></i> ' + msg,
align: 'tr',
ui: 'toast-green',
minWidth: 365,
maxWidth: 365,
autoCloseDelay: 5000
});
} else {
Ext.toast({
html: '<i class="' + Ngcp.csc.icons.exclamation + '" aria-hidden="true"></i> ' + msg,
align: 'tr',
ui: 'toast-red',
minWidth: 365,
maxWidth: 365,
autoCloseDelay: 5000
});
};
},
showConfirmBox: function(title, question, msg, callbackEvent, callbackParams) {
var me = this;
Ext.Msg.show({
title: title,
message: question,
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
fn: function(btn) {
if (btn === 'yes') {
me.fireEvent(callbackEvent, callbackParams);
me.fireEvent('showmessage', true, msg);
}
}
});
},
setItemsSize: function(view) {
var defaultHeight = view.down('#headerBar').getHeight();
var currentMainViewHeight = view.getHeight() - defaultHeight; // tbar height
var navItemsCount = this.getNavTreeNodesCount();
var navTree = this.lookupReference('navigationTreeList');
var currentItemsHeight = Math.floor(currentMainViewHeight / navItemsCount);
var nodes;
if (currentItemsHeight > 42) { // == $panel-navigation-item-line-height in all.scss
nodes = Ext.Array.merge(
navTree.getEl().query('.x-treelist-row'),
navTree.getEl().query('.x-treelist-item-tool'),
navTree.getEl().query('.x-treelist-item-text'),
navTree.getEl().query('.x-treelist-item-icon'),
navTree.getEl().query('.x-treelist-item-expander'));
Ext.each(nodes, function(node) {
node.style.setProperty('height', currentItemsHeight + 'px', 'important');
node.style.setProperty('line-height', currentItemsHeight + 'px', 'important');
});
// override pseudo element (can also be done using http://docs.sencha.com/extjs/6.2.0/classic/Ext.util.CSS.html#method-createStyleSheet)
document.styleSheets[0].addRule('.x-treelist-item-icon::before', 'line-height:' + currentItemsHeight + 'px !important');
document.styleSheets[0].addRule('.x-treelist-item-tool:after', 'height:' + currentItemsHeight + 'px !important');
document.styleSheets[0].addRule('.x-treelist-item-tool::before', 'line-height:' + currentItemsHeight + 'px !important');
}
this.setCentralContentHeight();
},
getNavTreeNodesCount: function(parentNode, scope) {
var me = scope || this;
var navTree = this.lookupReference('navigationTreeList');
var navTreeStore = navTree.getStore();
var count = 0;
Ext.each(parentNode ? parentNode.get('children') : navTreeStore.getRange(), function(node) {
if (!(node.leaf || node.get('leaf'))) {
count += me.getNavTreeNodesCount(node, me);
}
count++;
});
return count;
},
setCentralContentHeight: function() {
var docBody = document.body,
docElement = document.documentElement,
height;
if (typeof document.height !== 'undefined') {
height = document.height // For webkit browsers
} else {
height = Math.max(docBody.scrollHeight, docBody.offsetHeight, docElement.clientHeight, docElement.scrollHeight, docElement.offsetHeight);
}
var mainToolbarHeight = this.lookupReference('mainToolbar').getHeight();
var titleHeight = this.lookupReference('sectionTitle').getHeight();
var activeTab = this.lookupReference('mainCardPanel').getLayout().getActiveItem();
var gridFiltersHeight = this.lookupReference('gridFilters').getHeight();
var newHeight = height - mainToolbarHeight - titleHeight - gridFiltersHeight;
if (activeTab) {
activeTab.setHeight(newHeight);
this.fireEvent('focusLastMsg');
this.fireEvent('resizeContactPanel', height - mainToolbarHeight);
}
},
cardContainerResized: function(cmp) {
var cmpEl = cmp.getEl();
var contEl = this.lookupReference('mainCardPanel');
var tbarEl = cmpEl.down('.x-toolbar');
var gridEl = cmpEl.down('.card-grid');
var contHeight = contEl.getHeight() - tbarEl.getHeight();
var gridHeight = gridEl.getHeight();
(gridHeight > contHeight) ? gridEl.addCls('extra-left') : gridEl.removeCls('extra-left');
},
newSearch: function(el) {
this.fireEvent('newSearchFieldInput', el);
},
toggleFilter: function() {
this.fireEvent('toggleFilterForm');
},
toggleFree: function(pressed) {
this.fireEvent('toggleFreeSearch', pressed);
}
});
Reference in new issue View Git Blame Copy Permalink