Calendar - open add into a dialog widget

api/js/jsapi/egw_utils.js

@@ -150,6 +150,10 @@ egw.extend('utils', egw.MODULE_GLOBAL, function()
 	var utils = {
 
 		ajaxUrl: function(_menuaction) {
+			if(_menuaction.indexOf('menuaction=') >= 0)
+			{
+				return _menuaction;
+			}
 			return this.webserverUrl + '/json.php?menuaction=' + _menuaction;
 		},
 

calendar/inc/class.calendar_hooks.inc.php

@@ -44,8 +44,7 @@ class calendar_hooks
 				'ajax'=>'true'
 			),
 			'add'        => array(
-				'menuaction' => 'calendar.calendar_uiforms.edit',
+				'menuaction' => 'calendar.calendar_uiforms.ajax_add',
-				'template' => 'calendar.add'
 			),
 			'add_app'    => 'link_app',
 			'add_id'     => 'link_id',

calendar/inc/class.calendar_uiforms.inc.php

@@ -33,6 +33,7 @@ class calendar_uiforms extends calendar_ui
 {
 	var $public_functions = array(
 		'freetimesearch'  => True,
+		'ajax_add' => true,
 		'edit' => true,
 		'process_edit' => true,
 		'export' => true,
@@ -90,6 +91,10 @@ class calendar_uiforms extends calendar_ui
 			}
 		}
 
+		if($_GET['title'])
+		{
+			$title = $_GET['title'];
+		}
 		if (isset($_GET['owner']))
 		{
 			$owner = $_GET['owner'];
@@ -1450,6 +1455,18 @@ class calendar_uiforms extends calendar_ui
 		return strnatcasecmp($this->get_title($uid1), $this->get_title($uid2));
 	}
 
+	public function ajax_add($event=null)
+	{
+		// This tells etemplate to send as JSON response, not full
+		// This avoids errors from trying to send header again
+		if(Api\Json\Request::isJSONRequest())
+		{
+			$GLOBALS['egw']->framework->response = Api\Json\Response::get();
+		}
+
+		$this->edit();
+	}
+
 	/**
 	 * Edit a calendar event
 	 *

calendar/js/app.js

@@ -216,6 +216,7 @@ app.classes.calendar = (function(){ "use strict"; return AppJS.extend(
 				break;
 
 			case 'calendar.add':
+				// Fall through to get all the edit stuff too
 			case 'calendar.edit':
 				if (typeof content.data['conflicts'] == 'undefined')
 				{
@@ -1624,6 +1625,131 @@ app.classes.calendar = (function(){ "use strict"; return AppJS.extend(
 		_action.data.url = backup_url;	// restore url
 	},
 
+	/**
+	 * Open a smaller dialog/popup to add a new entry
+	 *
+	 * This is opened inside a dialog widget, not a popup.  This causes issues
+	 * with the submission, handling of the response, and cleanup.
+	 *
+	 * @param {Object} options Array of values for new
+	 * @param {et2_calendar_event} event Placeholder showing where new event goed
+	 */
+	add: function(options, event)
+	{
+		if(this.egw.preference('new_event_dialog', 'calendar') === 'edit')
+		{
+			// Set this to open the add template in a popup
+			//options.template = 'calendar.add';
+			return this.egw.open(null, 'calendar', 'add', options, '_blank', 'calendar');
+		}
+
+		// Open dialog to use as target
+		var add_dialog = et2_dialog.show_dialog(null, '', ' ', null, [], et2_dialog.PLAIN_MESSAGE, this.egw);
+
+
+		// Call the server, get it into the dialog
+		options = jQuery.extend({template: 'calendar.add'}, this.egw.link_get_registry('calendar','add'), options);
+		this.egw.json(
+			this.egw.link('/json.php', options),
+			//menuaction + options.join('&'),
+			[options],
+			function(data) {
+				if(data.type) return false;
+				var content = {
+					html: data[0],
+					js: ''
+				};
+
+				egw_seperateJavaScript(content);
+
+				// Check for right template in the response
+				if(content.html.indexOf('calendar-add') <= 0) return false;
+
+				// Insert the content
+				jQuery(add_dialog.div).append(content.html);
+
+				// Run the javascript code
+				jQuery(add_dialog.div).append(content.js);
+
+				// Re-position after load
+				jQuery('form', add_dialog.div).one('load', function() {
+					// Hide close button
+					jQuery(".ui-dialog-titlebar-close", add_dialog.div.parent()).hide();
+
+					// Position by event
+					add_dialog.div.dialog('widget').position({
+						my: 'center top', at: event ? 'bottom' : 'center', of: event ? event.node : window,
+						collision: 'flipfit'
+					});
+				});
+			}
+		).sendRequest();
+
+		add_dialog.div.dialog({
+		  close: function( ev, ui ) {
+			  // Wait a bit to make sure etemplate button finishes processing, or it will error
+			  window.setTimeout(function() {
+				var template = etemplate2.getById('calendar-add');
+				if(template)
+				{
+					template.clear();
+				}
+				this.dialog.destroy();
+				if(this.event)
+				{
+					this.event.destroy();
+				}
+			  }.bind({dialog: add_dialog, event: event}), 100);
+		  }
+		});
+	},
+
+	/**
+	 * Callback for save button in add dialog
+	 *
+	 * @param {Event} event
+	 * @param {et2_button} widget
+	 * @returns {Boolean}
+	 */
+	add_dialog_save: function(event, widget)
+	{
+		// Close the dialog
+		jQuery(widget.getInstanceManager().DOMContainer.parentNode).dialog('close');
+
+		// Mess with opener so update opener in response works
+		window.opener = window;
+		window.setTimeout(function() {window.opener = null;},1000);
+
+		// Proceed with submit
+		return true;
+	},
+
+
+	/**
+	 * Callback for edit button in add dialog
+	 *
+	 * @param {Event} event
+	 * @param {et2_button} widget
+	 * @returns {Boolean}
+	 */
+	add_dialog_edit: function(event, widget)
+	{
+		var title=widget.getRoot().getWidgetById('title');
+		if(title && !title.get_value())
+		{
+			title.set_value(title.egw().lang('Event'));
+		}
+
+		// Open regular edit
+		egw.open(null,'calendar','edit',widget.getInstanceManager().getValues(widget.getRoot()));
+
+		// Close the dialog
+		jQuery(widget.getInstanceManager().DOMContainer.parentNode).dialog('close');
+
+		// Do not submit this etemplate
+		return false;
+	},
+
 	/**
 	 * Open calendar entry, taking into accout the calendar integration of other apps
 	 *
@@ -3609,6 +3735,7 @@ app.classes.calendar = (function(){ "use strict"; return AppJS.extend(
 
 		// Avoid home portlets using our templates, and get them right
 		if(_et2.uniqueId.indexOf('portlet') === 0) return;
+		if(_et2.uniqueId === 'calendar-add') return;
 
 		// Flag to make sure we don't hide non-view templates
 		var view_et2 = false;

calendar/js/et2_widget_daycol.js

@@ -1088,7 +1088,7 @@ var et2_calendar_daycol = (function(){ "use strict"; return et2_valueWidget.exte
 					minute: _ev.target.dataset.minute || 0,
 					owner: this.options.owner
 				};
-				this.egw().open(null, 'calendar', 'add', options, '_blank');
+				app.calendar.add(options);
 				return false;
 			}
 			// Header, all day non-blocking
@@ -1104,7 +1104,7 @@ var et2_calendar_daycol = (function(){ "use strict"; return et2_valueWidget.exte
 					non_blocking: true,
 					owner: this.options.owner
 				}
-				this.egw().open(null, 'calendar', 'add', options, '_blank');
+				app.calendar.add(options);
 				return false;
 			}
 		}

calendar/js/et2_widget_planner.js

@@ -2160,11 +2160,11 @@ var et2_calendar_planner = (function(){ "use strict"; return et2_calendar_view.e
 				}
 				var row = jQuery(_ev.target).closest('.calendar_plannerRowWidget');
 				var data = row.length ? row[0].dataset : {};
-				this.egw().open(null, 'calendar', 'add', jQuery.extend({
+				app.calendar.add(jQuery.extend({
 					start: date.toJSON(),
 					hour: date.getUTCHours(),
 					minute: date.getUTCMinutes()
-				},data) , '_blank');
+				},data));
 				return false;
 			}
 			return result;
@@ -2187,11 +2187,11 @@ var et2_calendar_planner = (function(){ "use strict"; return et2_calendar_view.e
 		{
 			// Default handler to open a new event at the selected time
 			// TODO: Determine date / time more accurately from position
-			this.egw().open(null, 'calendar', 'add', {
+			app.calendar.add({
 				date: _ev.target.dataset.date || this.options.start_date.toJSON(),
 				hour: _ev.target.dataset.hour || this.options.day_start,
 				minute: _ev.target.dataset.minute || 0
-			} , '_blank');
+			});
 			return false;
 		}
 	},

calendar/js/et2_widget_timegrid.js

@@ -1374,7 +1374,7 @@ var et2_calendar_timegrid = (function(){ "use strict"; return et2_calendar_view.
 						params[app_registry.add_app].push( links[n].app);
 						params[app_registry.add_id].push( links[n].id);
 					}
-					egw.open('','calendar','add',params);
+					app.calendar.add(params);
 				}
 
 			},true);
@@ -1882,7 +1882,7 @@ var et2_calendar_timegrid = (function(){ "use strict"; return et2_calendar_view.
 				minute: target.dataset.minute || 0,
 				owner: this.options.owner
 			};
-			this.egw().open(null, 'calendar', 'add', options, '_blank');
+			app.calendar.add(options);
 			return false;
 		}
 	},

calendar/js/et2_widget_view.js

@@ -558,7 +558,7 @@ var et2_calendar_view = (function(){ "use strict"; return et2_valueWidget.extend
 			{
 				if(!options[key]) delete options[key];
 			}
-			this.egw().open(null, 'calendar', 'add', options, '_blank');
+			app.calendar.add(options, this.drag_create.event);
 
 			// Wait a bit, having these stops the click
 			window.setTimeout(jQuery.proxy(function() {
@@ -567,10 +567,6 @@ var et2_calendar_view = (function(){ "use strict"; return et2_valueWidget.extend
 				this.drag_create.parent = null;
 				if(this.drag_create.event)
 				{
-					if(this.drag_create.event.destroy)
-					{
-						this.drag_create.event.destroy();
-					}
 					this.drag_create.event = null;
 				}
 			},this),100);

calendar/templates/default/add.xet

@@ -14,7 +14,7 @@
 			<rows>
 				<row class="dialogHeader" height="28">
 					<appicon/>
-					<textbox id="title" size="75" maxlength="255" tabindex="1" class="et2_fullWidth" span="4" blur="Title"/>
+					<textbox id="title" size="75" maxlength="255" tabindex="1" class="et2_fullWidth" span="4" blur="Title" needed="true"/>
 				</row>
 				<row class="dialogHeader2" height="28">
 					<description for="start" value="Start" width="88"/>
@@ -28,9 +28,9 @@
 			</rows>
 		</grid>
 		<hbox class="dialogFooterToolbar">
-			<button statustext="saves the changes made" label="Save" id="button[save]" image="save" background_image="1" />
+			<button statustext="saves the changes made" label="Save" id="button[save]" image="save" background_image="1" onclick="return app.calendar.add_dialog_save(ev, widget); "/>
-			<button statustext="Full edit dialog" label="Edit" id="button[edit]" image="edit" background_image="1"/>
+			<button statustext="Full edit dialog" label="Edit" id="button[edit]" image="edit" background_image="1" onclick="return app.calendar.add_dialog_edit(ev, widget);"/>
-			<button statustext="Close the window" label="Cancel" id="button[cancel]" onclick="window.close();" image="cancel" background_image="1"/>
+			<button statustext="Close the window" label="Cancel" id="button[cancel]" onclick="jQuery(widget.getInstanceManager().DOMContainer.parentNode).dialog('close');" image="cancel" background_image="1"/>
 			<checkbox label="Always use full edit dialog" id="new_event_dialog" statustext="Always use the full edit dialog, not this little dialog" onchange="egw.set_preference('calendar',widget.id,widget.get_value() ? 'edit' : 'add');"/>
 		</hbox>
 	</template>