Ext.namespace('Zarafa.mail.dialogs'); /** * @class Zarafa.mail.dialogs.MailFlagsPanel * @extends Ext.Panel * @xtype zarafa.mailflagspanel * * Panel for users to set the flag on a given {@link Zarafa.mail.MailRecord record} */ Zarafa.mail.dialogs.MailFlagsPanel = Ext.extend(Ext.Panel, { /** * @cfg {Boolean} disableFlagColor if true then flag color combo will be disabled, * it is used by new mail dialog. */ disableFlagColor : false, /** * @cfg {Boolean} disableCompleted if true then completed checkbox will be disabled, * it is used by new mail dialog. */ disableCompleted : false, /** * @constructor * @param config Configuration structure */ constructor : function(config) { config = config || {}; config.plugins = Ext.value(config.plugins, []); config.plugins.push('zarafa.recordcomponentupdaterplugin'); if(!Ext.isBoolean(config.disableFlagColor)) { config.disableFlagColor = this.disableFlagColor; } if(!Ext.isBoolean(config.disableCompleted)) { config.disableCompleted = this.disableCompleted; } config = Ext.applyIf(config, { // Override from Ext.Component xtype: 'zarafa.mailflagspanel', layout: 'form', border: false, items: [ this.createFlagColorPanel(config.disableFlagColor), this.createFlagExpirationPanel(), this.createFlagCompletePanel(config.disableCompleted) ] }); Zarafa.mail.dialogs.MailFlagsPanel.superclass.constructor.call(this, config); }, /** * Create a {@link Ext.Panel panel} which contains * the {@link Ext.form.ComboBox combobox} where the * user can select the desired color for the flag. * @param {Boolean} disabled flag to render flag color combo disabled. * @return {Object} The configuration object for the panel * @private */ createFlagColorPanel : function(disabled) { var colorStore = { xtype: 'jsonstore', fields: ['name', /*'iconCls', 'flagStatus',*/ 'flagColor'], data : [].concat(Zarafa.mail.data.MailFlags.state[1], Zarafa.mail.data.MailFlags.colors) }; return { xtype: 'combo', ref: 'flagColorCombo', fieldLabel : _('Color of Flag'), anchor : '100%', store: colorStore, mode: 'local', triggerAction: 'all', displayField: 'name', valueField: 'flagColor', lazyInit: false, forceSelection: true, editable: false, disabled : disabled, listeners :{ 'select' : this.onColorSelect, scope : this } }; }, /** * Create a {@link Ext.Panel panel} which contains * the {@link Ext.form.DateField datefield} and { * {@link Ext.form.TimeField timefield} where the * user can set the expiry date for the flag. * @return {Object} The configuration object for the panel * @private */ createFlagExpirationPanel : function() { return { xtype: 'zarafa.datetimefield', anchor : '100%', ref: 'datetimeField', fieldLabel : _('End date'), listeners :{ 'change' : this.onDateChange, scope : this } }; }, /** * Create a {@link Ext.Panel panel} which contains * the {@link Ext.form.CheckBox checkbox} where the * user can complete the flag. * @param {Boolean} disabled flag to render flag color combo disabled. * @return {Object} The configuration object for the panel * @private */ createFlagCompletePanel : function(disabled) { return { xtype: 'checkbox', ref: 'completeCheckbox', fieldLabel: _('Complete'), handler : this.onToggleComplete, scope : this, disabled : disabled }; }, /** * Update the {@link Zarafa.mail.dialogs.MailFlagsPanel panel} with * the given {@link Zarafa.core.data.IPMRecord record}. * * @param {Zarafa.core.data.IPMRecord} record The record to update the panel with * @param {Boolean} contentReset force the component to perform a full update of the data. */ update : function(record, contentReset) { this.record = record; // FIXME: WHat if the record is undefined, shouldn't we clear all fields? if (this.record) { var completed = (this.record.get('flag_status') == Zarafa.core.mapi.FlagStatus.completed); // Select the correct flag icon in the combobox var flagIcon = this.record.get('flag_icon'); if (Ext.isEmpty(flagIcon)) { flagIcon = Zarafa.core.mapi.FlagIcon.clear; } this.flagColorCombo.setValue(flagIcon); // The time property which must be used, depends if the // flag has been completed or not. var timeProp = 'flag_due_by'; if (completed) { timeProp = 'flag_complete_time'; } // If no timestamp was provided, use the timestamp of now. var time = this.record.get(timeProp); if (!Ext.isDate(time)) { time = new Date(); } // Set the timestamp according // to the requested formatting used in the UI component. this.datetimeField.setValue(time); // Check the checkbox if the flag is completed. this.completeCheckbox.setValue(completed); } }, /** * Update the {@link Zarafa.core.data.IPMRecord IPMRecord} with the data from the {@link Ext.Panel Panel}. * @param {Zarafa.core.data.IPMRecord} record The record which has to be updated */ updateRecord : function(record) { var flagIcon = this.flagColorCombo.getValue(); var completed = this.completeCheckbox.getValue(); record.beginEdit(); // Set the icon record.set('flag_icon', flagIcon); var time = this.datetimeField.getValue(); if (completed) { record.set('flag_complete_time', time); } else { record.set('flag_due_by', time); } // Update the flag status depending on the selected color, // but also the completion checkbox. if (completed){ record.set('flag_status', Zarafa.core.mapi.FlagStatus.completed); } else if (flagIcon == Zarafa.core.mapi.FlagIcon.clear) { record.set('flag_status', Zarafa.core.mapi.FlagStatus.cleared); } else { record.set('flag_status', Zarafa.core.mapi.FlagStatus.flagged); } record.endEdit(); }, /** * Event handler which is triggered when enddate fields * has been changed by the user. It will validate the new value, * and if correct, will apply it to the {@link Zarafa.core.data.IPMRecord record}. * @param {Ext.form.Field} field The {@link Ext.form.Field field} which was changed. * @param {Mixed} newValue The new value * @param {Mixed} oldValue The old value * @private */ onDateChange : function(field, newValue, oldValue) { var completed = this.completeCheckbox.getValue(); if (completed) { this.record.set('flag_complete_time', newValue); } else { this.record.set('flag_due_by', newValue); } }, /** * Event handler which is triggered when flag color fields * has been changed by the user. It will validate the new value, * and if correct, will apply it to the {@link Zarafa.core.data.IPMRecord record}. * @param {Ext.form.Field} field The {@link Ext.form.Field field} which was changed. * @param {Ext.data.Record} record The data record returned from the underlying store * @param {Number} index The index of the selected item in the dropdown list * @private */ onColorSelect : function(field, record, number) { var flagIcon = this.flagColorCombo.getValue(); this.record.set('flag_icon', flagIcon); if(flagIcon == Zarafa.core.mapi.FlagIcon.clear) { this.record.set('flag_status', Zarafa.core.mapi.FlagStatus.cleared); } else { this.record.set('flag_status', Zarafa.core.mapi.FlagStatus.flagged); } }, /** * Event handler which is triggered when complete fields * has been changed by the user. It will validate the new value, * and if correct, will apply it to the {@link Zarafa.core.data.IPMRecord record}. * @param {Ext.form.Field} field The {@link Ext.form.Field field} which was changed. * @param {Mixed} newValue The new value * @param {Mixed} oldValue The old value * @private */ onToggleComplete : function(checkbox, checked) { var time = this.datetimeField.getValue(); var flagIcon = this.flagColorCombo.getValue(); this.flagColorCombo.setDisabled(checked); if (checked){ this.record.set('flag_status', Zarafa.core.mapi.FlagStatus.completed); this.record.set('flag_complete_time', time); this.record.set('flag_due_by', null); this.record.set('flag_icon', undefined); } else if (flagIcon == Zarafa.core.mapi.FlagIcon.clear) { this.record.set('flag_status', Zarafa.core.mapi.FlagStatus.cleared); this.record.set('flag_due_by', time); this.record.set('flag_complete_time', null); this.record.set('flag_icon', undefined); } else { this.record.set('flag_status', Zarafa.core.mapi.FlagStatus.flagged); this.record.set('flag_due_by', time); this.record.set('flag_complete_time', null); } } }); Ext.reg('zarafa.mailflagspanel', Zarafa.mail.dialogs.MailFlagsPanel);