Add indicator for tasks

Signed-off-by: Julius Härtl <jus@bitgrid.net>

css/style.scss

@@ -457,6 +457,20 @@ input.input-inline {
 			}
 		}
 
+		.card-tasks {
+			border-radius: 3px;
+			margin: 4px 4px 4px 0px;
+			padding: 0 2px;
+			font-size: 90%;
+			opacity: 0.5;
+			display: flex;
+			align-items: center;
+
+			.icon {
+				background-size: contain;
+			}
+		}
+
 		button {
 			padding: 22px;
 			margin: 0;

js/controller/BoardController.js

@@ -49,6 +49,22 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
 	}, true);
 	$scope.params = $state;
 
+	/**
+	 * Check for markdown checkboxes in description to render the counter
+	 *
+	 * This should probably be moved to the backend at some point
+	 *
+	 * @param text
+	 * @returns array of [finished, total] checkboxes
+	 */
+	$scope.getCheckboxes = function(text) {
+		const regTotal = /\[(X|\s|\_|\-)\]\s(.*)/ig;
+		const regFinished = /\[(X|\_|\-)\]\s(.*)/ig;
+		return [
+			((text || '').match(regFinished) || []).length,
+			((text || '').match(regTotal) || []).length
+		];
+	};
 
 	$scope.search = function (searchText) {
 		$scope.searchText = searchText;

templates/part.board.mainView.php

@@ -80,6 +80,10 @@
 								<i class="icon icon-badge"></i>
 								<span data-timestamp="{{ c.duedate | dateToTimestamp }}" class="live-relative-timestamp">{{ c.duedate | relativeDateFilterString }}</span>
 							</span>
+							<div class="card-tasks" ng-if="getCheckboxes(c.description)[1] > 0">
+								<i class="icon icon-checkmark"></i>
+								<span>{{ getCheckboxes(c.description)[0] }}/{{ getCheckboxes(c.description)[1] }}</span>
+							</div>
 							<div class="card-assigned-users">
 								<div class="assigned-user" ng-repeat="user in c.assignedUsers | limitTo: 3">
 									<avatar data-user="{{ user.participant.uid }}" data-displayname="{{ user.participant.displayname }}" data-tooltip></avatar>