From 8d39fd9ad16ea4ebd95a3bbcf1417323dadcbe4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 9 Oct 2017 13:40:35 +0200
Subject: [PATCH] Card: Auto save while typing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 css/style.scss                  | 15 +++++++++++----
 js/controller/CardController.js | 31 ++++++++++++++++++++++++++++---
 templates/part.card.php         |  5 ++++-
 3 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/css/style.scss b/css/style.scss
index cfb871d04..772c20e34 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -613,14 +613,21 @@ input.input-inline {
 	}
 
 	.save-indicator {
-		background-color: $color-success;
-		color: $color-primary-text;
 		border-radius: 3px;
 		float: right;
-		padding: 0px 10px;
-		font-size: 8pt !important;
+		padding: 0 10px;
+		font-size: 8pt;
 		display: none;
 		align-self: flex-end;
+		text-align: center;
+		&.saved {
+			background-color: $color-success;
+			color: $color-primary-text;
+		}
+		&.unsaved {
+			background-color: $color-lightgrey;
+			color: $color-darkgrey;
+		}
 	}
 
 	.icon-help {
diff --git a/js/controller/CardController.js b/js/controller/CardController.js
index 71e5c2e8b..46dcf4e07 100644
--- a/js/controller/CardController.js
+++ b/js/controller/CardController.js
@@ -23,9 +23,12 @@
 /* global app */
 /* global moment */
 
-app.controller('CardController', function ($scope, $rootScope, $routeParams, $location, $stateParams, BoardService, CardService, StackService, StatusService) {
+app.controller('CardController', function ($scope, $rootScope, $routeParams, $location, $stateParams, $interval, BoardService, CardService, StackService, StatusService) {
 	$scope.sidebar = $rootScope.sidebar;
-	$scope.status = {};
+	$scope.status = {
+		lastEdit: 0,
+		lastSave: Date.now()
+	};
 
 	$scope.cardservice = CardService;
 	$scope.cardId = $stateParams.cardId;
@@ -58,6 +61,27 @@ app.controller('CardController', function ($scope, $rootScope, $routeParams, $lo
 		$scope.status.cardEditDescription = true;
 		return true;
 	};
+	$scope.cardEditDescriptionChanged = function ($event) {
+		$scope.status.lastEdit = Date.now();
+		$('#card-description').find('.save-indicator.unsaved').show();
+		$('#card-description').find('.save-indicator.saved').hide();
+	};
+
+	$scope.cardEditDescriptionAutosave = function() {
+		var currentTime = Date.now();
+		var timeSinceEdit = currentTime-$scope.status.lastEdit;
+		if (timeSinceEdit > 1000 && $scope.status.lastEdit > $scope.status.lastSave) {
+			$scope.status.lastSave = currentTime;
+			$('#card-description').find('.save-indicator.unsaved').fadeIn(500);
+			CardService.update(CardService.getCurrent()).then(function (data) {
+				$('#card-description').find('.save-indicator.unsaved').hide();
+				$('#card-description').find('.save-indicator.saved').fadeIn(250).fadeOut(1000);
+			});
+		}
+	};
+
+	$interval( function(){ $scope.cardEditDescriptionAutosave(); }, 500);
+
 	// handle rename to update information on the board as well
 	$scope.cardRename = function (card) {
 		CardService.rename(card).then(function (data) {
@@ -68,7 +92,8 @@ app.controller('CardController', function ($scope, $rootScope, $routeParams, $lo
 	$scope.cardUpdate = function (card) {
 		CardService.update(CardService.getCurrent()).then(function (data) {
 			$scope.status.cardEditDescription = false;
-			$('#card-description').find('.save-indicator').fadeIn(500).fadeOut(1000);
+			$('#card-description').find('.save-indicator.unsaved').hide();
+			$('#card-description').find('.save-indicator.saved').fadeIn(500).fadeOut(1000);
 		});
 	};
 
diff --git a/templates/part.card.php b/templates/part.card.php
index b9f1ee09d..9e6d60e49 100644
--- a/templates/part.card.php
+++ b/templates/part.card.php
@@ -63,12 +63,15 @@
 				<?php p($l->t('Description')); ?>
 				<a href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon icon-help" title="<?php p($l->t('Formatting help')); ?>"></a>
 			</div>
-			<span class="save-indicator"><?php p($l->t('Saved')); ?></span>
+			<span class="save-indicator saved"><?php p($l->t('Saved')); ?></span>
+			<span class="save-indicator unsaved"><?php p($l->t('Unsaved changes')); ?></span>
+
 		</h4>
 		<textarea elastic ng-if="status.cardEditDescription"
 				  placeholder="<?php p($l->t('Add a card description…')); ?>"
 				  ng-blur="cardUpdate(cardservice.getCurrent())"
 				  ng-model="cardservice.getCurrent().description"
+				  ng-change="cardEditDescriptionChanged()"
 				  autofocus-on-insert> </textarea>
 		<div class="container" ng-click="cardEditDescriptionShow($event)"
 			 ng-if="!status.cardEditDescription" ng-animate>