Ext.namespace('Zarafa.contact.ui');
/**
* @class Zarafa.contact.ui.ContactCardView
* @extends Zarafa.common.ui.DraggableDataView
* @xtype zarafa.contactcardview
*
* this class creates layout of the cards view
* dataview doesn't automatically manage the scrollbars itself
* so we are adding a div as a container for card layout and giving it scrollbars manually
*/
Zarafa.contact.ui.ContactCardView = Ext.extend(Zarafa.common.ui.DraggableDataView, {
/**
* @cfg {Zarafa.contact.ContactContext} context The context to which this view belongs
*/
context : undefined,
/**
* The {@link Zarafa.contact.ContactContextModel} which is obtained from the {@link #context}.
* @property
* @type Zarafa.contact.ContactContextModel
*/
model : undefined,
/**
* The {@link Zarafa.contact.ContactStore} which is obtained from the {@link #model}.
* @property
* @type Zarafa.contact.ContactStore
*/
store : undefined,
/**
* @constructor
* @param {Object} config Configuration object
*/
constructor : function(config)
{
config = config || {};
if (!Ext.isDefined(config.model) && Ext.isDefined(config.context)) {
config.model = config.context.getModel();
}
if (!Ext.isDefined(config.store) && Ext.isDefined(config.model)) {
config.store = config.model.getStore();
}
config.store = Ext.StoreMgr.lookup(config.store);
config.plugins = Ext.value(config.plugins, []);
config.plugins.push('zarafa.icondragselectorplugin');
Ext.apply(this, config, {
xtype : 'zarafa.contactcardview',
border : false,
loadingText : _('Loading contacts') + '...',
deferEmptyText: false,
emptyText: '<div class="emptytext">'+_('There are no items to show in this list')+'</div>',
tpl : this.initTemplate(),
/*
* this is a required property
* itemSelector is used as an element selector query and it guides dataview to start re-rendering
* all elements that are child of this element, so without this property dataview will not know
* from which element it has to re-render elements so it will give error on refresh or store update
*/
itemSelector : 'div.zarafa-contact-cardview-card',
multiSelect : true,
selectedClass:'zarafa-contact-cardview-selected',
enableDrag : true,
ddGroup : 'dd.mapiitem'
});
Zarafa.contact.ui.ContactCardView.superclass.constructor.call(this, config);
this.initEvents();
},
/**
* initialize events for the card view
* @private
*/
initEvents : function()
{
this.on({
'dblclick': this.onNodeDblClick,
'contextmenu': this.onNodeContextMenu,
'selectionchange': this.onSelectionChange,
scope : this
});
},
* Event handler which is triggered when user opens context menu
* @param {Zarafa.contact.ContactCardView} dataView data view object
* @param {Number} index index of node
* @param {HTMLElement} node node object
* @param {Ext.EventObject} event event object
* @private
*/
onNodeContextMenu : function(dataView, index, node, event)
{
// check row is already selected or not, if its not selected then select it first
if (!dataView.isSelected(node)) {
dataView.select(node);
}
Zarafa.core.data.UIFactory.openDefaultContextMenu(dataView.getSelectedRecords(), { position : event.getXY() });
},
/**
* Event handler function will be called when any node is double clicked.
* @param {Zarafa.contact.ContactCardView} dataView data view object
* @param {Number} index index of node
* @param {HTMLElement} node node object
* @param {Ext.EventObject} event event object
* @private
*/
onNodeDblClick : function(dataView, index, node, event)
{
Zarafa.contact.Actions.openDialog(dataView.getSelectedRecords());
},
/**
* Event handler which is triggered when the {@link Zarafa.contact.ui.ContactCardView ContactCardView}
* {@link Zarafa.core.data.IPMRecord record} selection is changed. This will inform
* the {@link Zarafa.contact.ContactContextModel contextmodel} about the change.
*
* @param {Zarafa.contact.ui.ContactCardView} dataView The view object.
* @param {HTMLElement[]} selection Array of selected nodes.
* @private
*/
onSelectionChange : function(dataView, selections)
{
this.model.setSelectedRecords(dataView.getSelectedRecords());
},
/**
* Function will initialize {@link Ext.XTemplate XTemplate} and create layout for data view
* @return {Ext.XTemplate} xtemplate for layout
* @private
*/
initTemplate : function()
{
var templateStrArr = [
'<div class="zarafa-contact-cardview">',
'<tpl for=".">',
'<div class="zarafa-contact-cardview-card">',
'<div id="{entryid}" class="x-panel">',
'<div class="x-panel-tl">',
'<div class="x-panel-tr">',
'<div class="x-panel-tc">',
'<div class="x-panel-header">',
'<span class="x-panel-header-text">',
'{fileas:htmlEncodeUndef}',
'</span>',
'</div>',
'</div>',
'</div>',
'</div>',
'<div class="x-panel-bwrap">',
'<div class="x-panel-body zarafa-card-body">',
// Photo or Icon
'<p><tpl>{message_class:this.getIcon}</tpl></p>',
'<div>',
// content
'<p class="zarafa-contact-cardview-card-title">{display_name:htmlEncode}</p>',
'<p><tpl if="values.message_class==\'IPM.DistList\'">' + _('Group') + '</tpl></p>',
'<p>{company_name:htmlEncodeUndef}</p>',
'<p>{title:htmlEncodeUndef}</p>',
'<p>{department_name:htmlEncodeUndef}</p>',
'<table>',
'<tpl if="!Ext.isEmpty(values.business_telephone_number)"><tr><td class="contact-card-label">' + _('Work') + ':</td><td>{business_telephone_number:htmlEncode}</td></tr></tpl>',
'<tpl if="!Ext.isEmpty(values.business2_telephone_number)"><tr><td class="contact-card-label">' + _('Work') + ':</td><td>{business2_telephone_number:htmlEncode}</td></tr></tpl>',
'<tpl if="!Ext.isEmpty(values.primary_telephone_number)"><tr><td class="contact-card-label">' + _('Primary') + ':</td><td>{primary_telephone_number:htmlEncode}</td></tr></tpl>',
'<tpl if="!Ext.isEmpty(values.cellular_telephone_number)"><tr><td class="contact-card-label">' + _('Mobile') + ':</td><td>{cellular_telephone_number:htmlEncode}</td></tr></tpl>',
'<tpl if="!Ext.isEmpty(values.home_telephone_number)"><tr><td class="contact-card-label">' + _('Home') + ':</td><td>{home_telephone_number:htmlEncode}</td></tr></tpl>',
'</table>',
'</div>',
'</div>',
'</div>',
'</div>',
'</div>',
'</tpl>',
'</div>'
];
return new Ext.XTemplate(templateStrArr.join(''), {
compiled : true, // compile immediately
// Returns contact/distlist icon to show it in cardview.
getIcon : function(message_class)
{
// TODO: Create new Icons for Distlist and contacts for cardview.
if(message_class == "IPM.DistList") {
return '<div class="zarafa-contact-cardview-distlist-card"></div>';
} else {
return '<div class="zarafa-contact-cardview-contact-card"></div>';
}
}
});
}
});
Ext.reg('zarafa.contactcardview', Zarafa.contact.ui.ContactCardView);