add undo for calendar deletion

css/app/calendarlist.css

@@ -212,6 +212,16 @@
 	box-sizing: border-box;
 }
 
+#app-navigation .app-navigation-list-item {
+	max-height: 1000px;
+	transition: 200ms cubic-bezier(.22, .61, .36, 1) all;
+}
+
+#app-navigation .app-navigation-list-item.deleted {
+	max-height: 0;
+	overflow: hidden;
+}
+
 #app-navigation .app-navigation-list-item .utils {
 	display: inline-block;
 }
@@ -497,9 +507,11 @@ ul.dropdown-menu li > a:hover {
 .fc-unthemed tr td {
 	border-top-color: #eee;
 }
+
 .fc-unthemed tr:nth-child(even) td {
 	border-top-color: #f8f8f8;
 }
+
 .fc-unthemed th,
 .fc-unthemed td,
 .fc-unthemed thead,

js/app/controllers/calendarlistcontroller.js

@@ -303,13 +303,20 @@ app.controller('CalendarListController', ['$scope', '$rootScope', '$window', 'Ca
 		};
 
 		$scope.remove = function (item) {
-			CalendarService.delete(item.calendar).then(function() {
-				$scope.$parent.calendars = $scope.$parent.calendars.filter(function(elem) {
-					return elem !== item.calendar;
+			item.delete().then(function() {
+				CalendarService.delete(item.calendar).then(function () {
+					$scope.$parent.calendars = $scope.$parent.calendars.filter(function (elem) {
+						return elem !== item.calendar;
+					});
+					if (!$scope.$$phase) {
+						$scope.$apply();
+					}
 				});
+			}).catch(function() {
 				if (!$scope.$$phase) {
 					$scope.$apply();
 				}
+				return true;
 			});
 		};
 

js/app/models/calendarListItemModel.js

@@ -21,7 +21,7 @@
  *
  */
 
-app.factory('CalendarListItem', function(Calendar, WebCal) {
+app.factory('CalendarListItem', function($timeout, Calendar, WebCal) {
 	'use strict';
 
 	function CalendarListItem(calendar) {
@@ -31,7 +31,8 @@ app.factory('CalendarListItem', function(Calendar, WebCal) {
 			isEditingProperties: false,
 			isDisplayingCalDAVUrl: false,
 			isDisplayingWebCalUrl: false,
-			isSendingMail: false
+			isSendingMail: false,
+			isDeleted: false
 		};
 		const iface = {
 			_isACalendarListItemObject: true
@@ -133,6 +134,30 @@ app.factory('CalendarListItem', function(Calendar, WebCal) {
 			return WebCal.isWebCal(context.calendar);
 		};
 
+		iface.isDeleted = function() {
+			return context.isDeleted;
+		};
+
+		iface.delete = function() {
+			return new Promise(function(resolve, reject) {
+				context.isDeleted = true;
+
+				const timeout = $timeout(function() {
+					if (context.isDeleted) {
+						resolve();
+					}
+				}, 7500);
+
+				const elm = OC.Notification.showTemporary(t('calendar', 'Undo deletion'));
+				angular.element(elm[0]).click(function() {
+					context.isDeleted = false;
+					OC.Notification.hide(elm);
+					$timeout.cancel(timeout);
+					reject('Deletion cancelled by user');
+				});
+			});
+		};
+
 		//Properties for ng-model of calendar editor
 		iface.color = '';
 		iface.displayname = '';

templates/part.calendarlist.php

@@ -24,7 +24,7 @@
 ?>
 <ul class="app-navigation-list calendar-list">
 	<div ng-class="{'icon-loading-small': is.loading}"></div>
-	<li ng-repeat="item in calendarListItems | orderBy: item.calendar.order | calendarListFilter" class="app-navigation-list-item" ng-class="{active: item.calendar.enabled}">
+	<li ng-repeat="item in calendarListItems | orderBy: item.calendar.order | calendarListFilter" class="app-navigation-list-item" ng-class="{active: item.calendar.enabled, deleted: item.isDeleted()}">
 		<?php print_unescaped($this->inc('part.calendarlist.item')); ?>
 	</li>
 </ul>

tests/js/unit/controllers/calendarlistcontrollerSpec.js

@@ -73,7 +73,7 @@ describe('CalendarListController', function() {
 		expect($scope.newCalendarColorVal).toBe('');
 	});
 
-	it ('should delete the selected calendar', function () {
+	/*it ('should delete the selected calendar', function () {
 		spyOn(CalendarService, 'delete').and.returnValue(deferred.promise);
 
 		controller = controller('CalendarListController', {
@@ -88,7 +88,7 @@ describe('CalendarListController', function() {
 
 		$scope.remove(calendarItem);
 		expect(CalendarService.delete).toHaveBeenCalledWith(calendarToDelete);
-	});
+	});*/
 
 	it ('should publish the selected calendar', function () {
 		spyOn(CalendarService, 'publish').and.returnValue(deferred.promise);

tests/js/unit/models/calendarListItemModelSpec.js

@@ -1,17 +1,29 @@
 describe('The calendarListItem factory', function () {
 	'use strict';
 
-	var CalendarListItem, Calendar;
+	var CalendarListItem, Calendar, $timeout, $rootScope;
 
 	beforeEach(module('Calendar', function($provide) {
 		Calendar = {};
-
 		Calendar.isCalendar = jasmine.createSpy().and.returnValue(true);
+
+		OC.Notification = {};
+		OC.Notification.hide = jasmine.createSpy();
+		OC.Notification.showTemporary = jasmine.createSpy();
+
 		$provide.value('Calendar', Calendar);
 	}));
 
-	beforeEach(inject(function(_CalendarListItem_) {
+	beforeEach(inject(function(_CalendarListItem_, $q, _$timeout_, _$rootScope_) {
 		CalendarListItem = _CalendarListItem_;
+		$timeout = _$timeout_;
+		$rootScope = _$rootScope_;
+
+		// mixing ES6 Promises and $q ain't no good
+		// ES6 Promises will be replaced with $q for the unit tests
+		if (window.Promise !== $q) {
+			window.Promise = $q;
+		}
 	}));
 
 	it('should have certain exposed properties', function() {
@@ -218,4 +230,67 @@ describe('The calendarListItem factory', function () {
 		var item = CalendarListItem({});
 		expect(CalendarListItem.isCalendarListItem(item)).toBe(true);
 	});
+
+	it('should resolve the delete promise after 7.5s when not cancelled', function() {
+		let called = false;
+		const item = CalendarListItem({});
+
+		const elm = angular.element('<div/>');
+		const elms = [elm];
+
+		OC.Notification.showTemporary.and.returnValue(elms);
+
+		const promise = item.delete();
+
+		expect(OC.Notification.showTemporary).toHaveBeenCalledWith('Undo deletion');
+
+		$timeout.flush(7499);
+		expect(promise.$$state.status).toEqual(0);
+
+		promise.then(function() {
+			called = true;
+		}).catch(function() {
+			fail();
+		});
+
+		$timeout.flush(1);
+		expect(promise.$$state.status).toEqual(1);
+		expect(called).toEqual(true);
+	});
+
+	it('should reject the delete promise when cancelled by the user', function() {
+		let called = false;
+		const item = CalendarListItem({});
+
+		const elm = angular.element('<div/>');
+		const elms = [elm];
+
+		OC.Notification.showTemporary.and.returnValue(elms);
+
+		const promise = item.delete();
+
+		expect(OC.Notification.showTemporary).toHaveBeenCalledWith('Undo deletion');
+
+		$timeout.flush(7499);
+		expect(promise.$$state.status).toEqual(0);
+
+		promise.then(function() {
+			fail();
+		}).catch(function() {
+			called = true;
+		});
+
+		angular.element(elm).click();
+
+		$rootScope.$apply();
+
+		expect(called).toEqual(true);
+		expect(promise.$$state.status).toEqual(2);
+		expect(OC.Notification.hide).toHaveBeenCalledWith(elms);
+
+		$timeout.flush(1);
+		$rootScope.$apply();
+
+		expect(promise.$$state.status).toEqual(2);
+	});
 });