Implement due dates for cards

appinfo/database.xml

@@ -130,15 +130,13 @@
                 <name>last_modified</name>
                 <type>integer</type>
                 <default></default>
-                <length>8</length>
                 <notnull>false</notnull>
                 <unsigned>true</unsigned>
             </field>
             <field>
                 <name>created_at</name>
                 <type>integer</type>
                 <default></default>
-                <length>8</length>
                 <notnull>false</notnull>
                 <unsigned>true</unsigned>
             </field>
@@ -159,6 +157,11 @@
                 <type>boolean</type>
                 <default>false</default>
             </field>
+            <field>
+                <name>duedate</name>
+                <type>timestamp</type>
+                <default>0</default>
+            </field>
             <index>
                 <name>deck_cards_stack_id_index</name>
                 <field>

appinfo/info.xml

@@ -16,7 +16,7 @@
 💥 This is still alpha software: it may not be stable enough for production!
 
 </description>
-    <version>0.1.4.2</version>
+    <version>0.1.4.3-1</version>
     <licence>agpl</licence>
     <author>Julius Härtl</author>
     <namespace>Deck</namespace>

css/style.css

@@ -458,14 +458,50 @@ button.button-inline:hover {
 	min-height: initial;
 }
 
+.card-controls .icon-filetype-text {
+	margin-right: 10px;
+}
+
 .due {
-	background-color: #eee;
-	color: #aaa;
-	padding: 1px 3px;
-	border-radius: 4px;
-	margin-right: 2px;
+	border-radius: 3px;
+	margin: -4px 4px -4px -4px;
+	padding: 0px 4px;
+	font-size: 90%;
+	opacity: .7;
+	display: flex;
+	align-items: center;
+}
+.due .icon {
+	background-size: contain;
+	float:left;
+	opacity: 0.7;
+	width: 16px;
+	height: 16px;
+}
+.overdue {
+	background-color: #e12419;
+	color: #fff;
+}
+.due.now {
+	background-color: #fbd850;
+}
+.due.next {
+	background-color: #fbf790;
 }
 
+.due .badge-icon {
+	background-image: url(../../../core/img/places/calendar-dark.svg);
+	margin-right: 3px;
+}
+.overdue .badge-icon {
+	background-image: url(../img/calendar-white.svg);
+}
+.now .badge-icon {
+	background-image: url(../../../core/img/places/calendar-dark.svg);
+}
+.next .badge-icon {
+	background-image: url(../../../core/img/places/calendar-dark.svg);
+}
 /**
  * Card view right sidebar
  */
@@ -503,9 +539,9 @@ button.button-inline:hover {
 	margin-bottom: 10px;
 }
 
-#card-dates span {
+#card-meta .duedate {
+	display: flex;
 }
-
 #card-description {
 	height: 100%;
 	display: flex;

js/bower.json

@@ -14,7 +14,8 @@
     "angular-ui-select": "~0.19.6",
     "angular-markdown-it": "~0.6.1",
     "angular-ui-router": "~1.0.0",
-    "markdown-it-link-target": "~1.0.1"
+    "markdown-it-link-target": "~1.0.1",
+    "jquery-timepicker": "883bb2cd94"
   },
   "license": "AGPL-3.0",
   "private": true,

js/controller/CardController.js

@@ -1,5 +1,3 @@
-
-
 /*
  * @copyright Copyright (c) 2016 Julius Härtl <jus@bitgrid.net>
  *
@@ -22,66 +20,101 @@
  *  
  */
 
+/* global app */
+/* global moment */
+
 app.controller('CardController', function ($scope, $rootScope, $routeParams, $location, $stateParams, BoardService, CardService, StackService, StatusService) {
-    $scope.sidebar = $rootScope.sidebar;
-    $scope.status = {};
+	$scope.sidebar = $rootScope.sidebar;
+	$scope.status = {};
+
+	$scope.cardservice = CardService;
+	$scope.cardId = $stateParams.cardId;
+
+	$scope.statusservice = StatusService.getInstance();
+	$scope.boardservice = BoardService;
 
-    $scope.cardservice = CardService;
-    $scope.cardId = $stateParams.cardId;
+	$scope.statusservice.retainWaiting();
 
-    $scope.statusservice = StatusService.getInstance();
-    $scope.boardservice = BoardService;
+	CardService.fetchOne($scope.cardId).then(function (data) {
+		$scope.statusservice.releaseWaiting();
+		$scope.archived = CardService.getCurrent().archived;
+	}, function (error) {
+	});
 
-    $scope.statusservice.retainWaiting();
+	$scope.cardRenameShow = function () {
+		if ($scope.archived || !BoardService.canEdit())
+			return false;
+		else {
+			$scope.status.cardRename = true;
+		}
+	};
+	$scope.cardEditDescriptionShow = function ($event) {
+		if (BoardService.isArchived() || CardService.getCurrent().archived) {
+			return false;
+		}
+		var node = $event.target.nodeName;
+		if ($scope.card.archived || !$scope.boardservice.canEdit()) {
+			console.log(node);
+		} else {
+			console.log("edit");
+			$scope.status.cardEditDescription = true;
+		}
+		console.log($scope.status.canEditDescription);
+	};
+	// handle rename to update information on the board as well
+	$scope.cardRename = function (card) {
+		CardService.rename(card).then(function (data) {
+			StackService.updateCard(card);
+			$scope.status.renameCard = false;
+		});
+	};
+	$scope.cardUpdate = function (card) {
+		CardService.update(CardService.getCurrent()).then(function (data) {
+			$scope.status.cardEditDescription = false;
+			$('#card-description').find('.save-indicator').fadeIn(500).fadeOut(1000);
+		});
+	};
 
-    CardService.fetchOne($scope.cardId).then(function(data) {
-        $scope.statusservice.releaseWaiting();
-        $scope.archived = CardService.getCurrent().archived;
-    }, function(error) {
-    });
+	$scope.labelAssign = function (element, model) {
+		CardService.assignLabel($scope.cardId, element.id);
+		var card = CardService.getCurrent();
+		StackService.updateCard(card);
+	};
 
-    $scope.cardRenameShow = function() {
-        if($scope.archived || !BoardService.canEdit())
-            return false;
-        else {
-            $scope.status.cardRename=true;
-        }
-    };
-    $scope.cardEditDescriptionShow = function($event) {
-        if(BoardService.isArchived() || CardService.getCurrent().archived) {
-            return false;
-        }
-        var node = $event.target.nodeName;
-        if($scope.card.archived || !$scope.boardservice.canEdit()) {
-            console.log(node);
-        } else {
-            console.log("edit");
-            $scope.status.cardEditDescription=true;
-        }
-        console.log($scope.status.canEditDescription);
-    };
-    // handle rename to update information on the board as well
-    $scope.cardRename = function(card) {
-        CardService.rename(card).then(function(data) {
-            StackService.updateCard(card);
-            $scope.status.renameCard = false;
-        });
-    };
-    $scope.cardUpdate = function(card) {
-        CardService.update(CardService.getCurrent()).then(function(data) {
-            $scope.status.cardEditDescription = false;
-            $('#card-description').find('.save-indicator').fadeIn(500).fadeOut(1000);
-        });
-    };
+	$scope.labelRemove = function (element, model) {
+		CardService.removeLabel($scope.cardId, element.id)
+	};
 
-    $scope.labelAssign = function(element, model) {
-        CardService.assignLabel($scope.cardId, element.id);
-        var card = CardService.getCurrent();
-        StackService.updateCard(card);
-    };
-
-    $scope.labelRemove = function(element, model) {
-        CardService.removeLabel($scope.cardId, element.id)
-    }
+	$scope.setDuedate = function (duedate) {
+		var element = CardService.getCurrent();
+		var newDate = moment(element.duedate);
+		if(!newDate.isValid()) {
+			newDate = moment();
+		}
+		newDate.date(duedate.date());
+		newDate.month(duedate.month());
+		newDate.year(duedate.year());
+		element.duedate = newDate.format('YYYY-MM-DD HH:mm:ss');
+		CardService.update(element);
+		StackService.updateCard(element);
+	};
+	$scope.setDuedateTime = function (time) {
+		var element = CardService.getCurrent();
+		var newDate = moment(element.duedate);
+		if(!newDate.isValid()) {
+			newDate = moment();
+		}
+		newDate.hour(time.hour());
+		newDate.minute(time.minute());
+		element.duedate = newDate.format('YYYY-MM-DD HH:mm:ss');
+		CardService.update(element);
+		StackService.updateCard(element);
+	};
 
+	$scope.resetDuedate = function () {
+		var element = CardService.getCurrent();
+		element.duedate = null;
+		CardService.update(element);
+		StackService.updateCard(element);
+	};
 });

js/directive/datepicker.js

@@ -0,0 +1,53 @@
+/*
+ * @copyright Copyright (c) 2017 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as
+ *  published by the Free Software Foundation, either version 3 of the
+ *  License, or (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+/* global app */
+/* gloabl t */
+/* global moment */
+
+app.directive('datepicker', function () {
+	'use strict';
+	return {
+		link: function (scope, elm, attr) {
+			return elm.datepicker({
+				dateFormat: 'yy-mm-dd',
+				onSelect: function(date, inst) {
+					scope.setDuedate(moment(date));
+					scope.$apply();
+				},
+				beforeShow: function(input, inst) {
+					var dp, marginLeft;
+					dp = $(inst).datepicker('widget');
+					marginLeft = -Math.abs($(input).outerWidth() - dp.outerWidth()) / 2 + 'px';
+					dp.css({
+						'margin-left': marginLeft
+					});
+					$('div.ui-datepicker:before').css({
+						'left': 100 + 'px'
+					});
+					return $('.hasDatepicker').datepicker();
+				},
+				minDate: null
+			});
+		}
+	};
+});

js/directive/timepicker.js

@@ -0,0 +1,45 @@
+/*
+ * @copyright Copyright (c) 2017 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as
+ *  published by the Free Software Foundation, either version 3 of the
+ *  License, or (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+/* global app */
+/* global t */
+/* global moment */
+
+app.directive('timepicker', function() {
+	'use strict';
+	return {
+		restrict: 'A',
+		link: function(scope, elm, attr) {
+			return elm.timepicker({
+				onSelect: function(date, inst) {
+					scope.setDuedateTime(moment('2000-01-01 ' + date));
+					scope.$apply();
+				},
+				myPosition: 'center top',
+				atPosition: 'center bottom',
+				hourText: t('deck', 'Hours'),
+				minuteText: t('deck', 'Minutes'),
+				showPeriodLabels: false
+			});
+		}
+	};
+});