Merge pull request #611 from nextcloud/bug/589/empty-titles

Don't allow empty card titles

js/controller/BoardController.js

@@ -42,6 +42,38 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
 	$scope.board = BoardService.getCurrent();
 	$scope.uploader = FileService.uploader;
 
+	$scope.startTitleEdit = function(card) {
+		card.renameTitle = card.title;
+		card.status = card.status || {};
+		card.status.editCard = true;
+	};
+
+	$scope.finishTitleEdit = function(card) {
+		var newTitle;
+		if (!card.renameTitle || !card.renameTitle.trim()) {
+			newTitle = '';
+		} else {
+			newTitle = card.renameTitle.trim();
+		}
+
+		if (newTitle === card.title) {
+			// title unchanged
+			card.status.editCard = false;
+			delete card.renameTitle;
+		} else if (newTitle !== '') {
+			// title changed
+			card.title = newTitle;
+			CardService.update(card).then(function (data) {
+				card.status.editCard = false;
+				delete card.renameTitle;
+			});
+		} else {
+			// empty title
+			card.status.editCard = false;
+			delete card.renameTitle;
+		}
+	};
+
 	$scope.$watch(function() {
 		return $state.current;
 	}, function(currentState) {
@@ -189,6 +221,7 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
 	};
 
 	$scope.createCard = function (stack, title) {
+		if (this['addCardForm' + stack].$valid) {
 			var newCard = {
 				'title': title,
 				'stackId': stack,
@@ -198,6 +231,7 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
 				$scope.stackservice.addCard(data);
 				$scope.newCard.title = '';
 			});
+		}
 	};
 
 	$scope.stackDelete = function (stack) {

js/controller/CardController.js

@@ -26,6 +26,7 @@ import app from '../app/App.js';
 app.controller('CardController', function ($scope, $rootScope, $sce, $location, $stateParams, $state, $interval, $timeout, $filter, BoardService, CardService, StackService, StatusService, markdownItConverter, FileService) {
 	$scope.sidebar = $rootScope.sidebar;
 	$scope.status = {
+		renameTitle: '',
 		lastEdit: 0,
 		lastSave: Date.now()
 	};
@@ -89,9 +90,10 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 	});
 
 	$scope.cardRenameShow = function () {
-		if ($scope.archived || !BoardService.canEdit())
-		{return false;}
-		else {
+		if ($scope.archived || !BoardService.canEdit()) {
+			return false;
+		} else {
+			$scope.status.renameTitle = CardService.getCurrent().title;
 			$scope.status.cardRename = true;
 		}
 	};
@@ -167,9 +169,27 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 
 	// handle rename to update information on the board as well
 	$scope.cardRename = function (card) {
+		var newTitle;
+		if (!$scope.status.renameTitle || !$scope.status.renameTitle.trim()) {
+			newTitle = '';
+		} else {
+			newTitle = $scope.status.renameTitle.trim();
+		}
+
+		if (newTitle === card.title) {
+			// title unchanged
+			$scope.status.renameCard = false;
+		} else if (newTitle !== '') {
+			// title changed
+			card.title = newTitle;
 			CardService.rename(card).then(function (data) {
 				$scope.status.renameCard = false;
 			});
+		} else {
+			// empty title
+			$scope.status.renameTitle = card.title;
+			$scope.status.renameCard = false;
+		}
 	};
 	$scope.cardUpdate = function (card) {
 		CardService.update(card).then(function (data) {

templates/part.board.mainView.php

@@ -73,12 +73,16 @@
 							<h4>
 								<span class="editable-inline"
 									ng-show="!c.status.editCard"
-									ng-click="c.status.editCard=true">{{cardservice.get(c.id).title}}</span>
-
-								<form ng-if="c.status.editCard" ng-submit="cardservice.update(c); c.status.editCard=false">
-									<input class="input-inline" type="text" placeholder="<?php p($l->t('Add a new card')); ?>"
-										ng-blur="cardservice.update(c); c.status.editCard=false" ng-model="c.title"
-										autofocus-on-insert required maxlength="100" />
+									ng-click="startTitleEdit(c)">{{cardservice.get(c.id).title}}</span>
+								<form ng-if="c.status.editCard" ng-submit="finishTitleEdit(c)">
+									<input
+											class="input-inline"
+											type="text"
+											ng-blur="finishTitleEdit(c)"
+											ng-model="c.renameTitle"
+											autofocus-on-insert
+											required
+											maxlength="100">
 								</form>
 							</h4>
 							<ul class="labels compact-item" ng-if="!compactMode">
@@ -152,9 +156,12 @@
 			</ul>
 
 			<!-- CREATE CARD //-->
-			<div class="card create" ng-class="{emptyStack: !s.cards.length}"
-				 ng-style="{'border-color':'#{{ boardservice.getCurrent().color }}'}" ng-if="boardservice.canEdit() && checkCanEdit() && params.filter!=='archive'">
-				<form ng-submit="createCard(s.id, newCard.title)">
+			<div
+					class="card create"
+					ng-class="{emptyStack: !s.cards.length}"
+				 	ng-style="{'border-color':'#{{ boardservice.getCurrent().color }}'}"
+					ng-if="boardservice.canEdit() && checkCanEdit() && params.filter !== 'archive'">
+				<form name="addCardForm{{ s.id }}" ng-submit="createCard(s.id, newCard.title)">
 					<h4 ng-if="status.addCard[s.id]">
 						<input type="text" autofocus-on-insert
 							   ng-model="newCard.title"

templates/part.card.php

@@ -15,7 +15,7 @@
 		<!-- TODO: change to textarea elastic //-->
 		<form ng-submit="cardRename(cardservice.getCurrent())">
 			<input class="input-inline" type="text" ng-if="status.cardRename"
-				   ng-model="cardservice.getCurrent().title"
+				   ng-model="status.renameTitle"
 				   ng-blur="cardRename(cardservice.getCurrent())"
 				   autofocus-on-insert required maxlength="100">
 		</form>