Introducing Due Date for Tasks

Thanks to Dr. Sybren and Francesco for support!

src/styles/main.sass

@@ -6,3 +6,4 @@
 @import _shots
 @import _dashboard
 @import _errors
+@import plugins/pikaday

src/styles/plugins/pikaday.sass

@@ -0,0 +1,183 @@
+@import ../_config
+@charset "UTF-8"
+
+/* Pikaday */
+/* Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com */
+
+.pika-single
+	z-index: 9999
+	display: block
+	position: relative
+	color: $color-text-dark-primary
+	background: white
+	border: thin solid $color-background-dark
+	border-radius: 3px
+
+	&:before
+		content: " "
+		display: table
+	&:after
+		content: " "
+		display: table
+		clear: both
+	*zoom: 1
+	&.is-hidden
+		// display: none
+	&.is-bound
+		position: absolute
+		box-shadow: 0 2px 5px rgba(black, .1), 0 5px 15px rgba(black, .2)
+
+/* clear child float (pika-lendar), using the famous micro clearfix hack */
+/* http://nicolasgallagher.com/micro-clearfix-hack/ */
+
+.pika-lendar
+	float: left
+	width: 240px
+	margin: 8px
+
+.pika-title
+	position: relative
+	text-align: center
+
+.pika-label
+	display: inline-block
+	*display: inline
+	position: relative
+	z-index: 9999
+	overflow: hidden
+	margin: 0
+	padding: 5px 3px
+
+	&:hover
+		color: $color-primary
+		option
+			color: $color-text-dark
+
+.pika-title select
+	cursor: pointer
+	position: absolute
+	z-index: 9998
+	margin: 0
+	left: 0
+	top: 5px
+	filter: alpha(opacity = 0)
+	opacity: 0
+
+.pika-prev, .pika-next
+	display: block
+	cursor: pointer
+	position: relative
+	outline: none
+	border: 0
+	padding: 0
+	width: 20px
+	height: 30px
+	/* hide text using text-indent trick, using width value (it's enough) */
+	text-indent: 20px
+	white-space: nowrap
+	overflow: hidden
+	background-color: transparent
+	background-position: center center
+	background-repeat: no-repeat
+	background-size: 75% 75%
+	opacity: .5
+	*position: absolute
+	*top: 0
+
+.pika-prev:hover, .pika-next:hover
+	opacity: 1
+
+.pika-prev, .is-rtl .pika-next
+	float: left
+	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==')
+	*left: 0
+
+.pika-next, .is-rtl .pika-prev
+	float: right
+	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=')
+	*right: 0
+
+.pika-prev.is-disabled, .pika-next.is-disabled
+	cursor: default
+	opacity: .2
+
+.pika-select
+	display: inline-block
+	*display: inline
+
+.pika-table
+	width: 100%
+	border-collapse: collapse
+	border-spacing: 0
+	border: 0
+	th, td
+		width: 14.285714285714286%
+		padding: 0
+	th
+		color: $color-text-dark-primary
+		font-size: 12px
+		line-height: 25px
+		font-weight: normal
+		text-align: center
+
+.pika-button
+	cursor: pointer
+	display: block
+	box-sizing: border-box
+	-moz-box-sizing: border-box
+	outline: none
+	border: 2px solid transparent
+	width: 100%
+	padding: 5px 8px
+	color: $color-text-dark-primary
+	font-size: .9em
+	text-align: right
+	background: $color-background-light
+
+.pika-week
+	font-size: 11px
+	color: $color-text-dark-hint
+
+.is-today .pika-button
+	color: $color-secondary
+	font-weight: bold
+
+.is-selected .pika-button
+	color: white
+	font-weight: bold
+	background: $color-primary
+	border-radius: 3px
+
+.is-inrange .pika-button
+	background: rgba($color-primary, .5)
+
+.is-startrange .pika-button
+	color: white
+	background: $color-secondary
+	box-shadow: none
+	border-radius: 3px
+
+.is-endrange .pika-button
+	color: white
+	background: $color-primary
+	box-shadow: none
+	border-radius: 3px
+
+.is-disabled .pika-button, .is-outside-current-month .pika-button
+	pointer-events: none
+	cursor: default
+	color: $color-text-dark-secondary
+	opacity: .3
+
+.pika-button:hover
+	color: $color-text-dark
+	background: white
+	box-shadow: none
+	border-radius: 3px
+	border-color: $color-primary
+
+/* styling for abbr */
+
+.pika-table abbr
+	border-bottom: none
+	cursor: help

src/templates/attract/layout.jade

@@ -190,6 +190,9 @@ html(lang="en")
 					.modal-body
 
 		script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.select2.min.js') }}", async=true)
+		script(src="{{ url_for('static_attract', filename='assets/js/vendor/moment-2.15.2.min.js') }}", async=true)
+		script(src="{{ url_for('static_attract', filename='assets/js/vendor/pikaday.js') }}", async=true)
+
 		script.
 			{% if project %}
 			$('.js-help').openModalUrl('Help', "{{ url_for('attract.help', project_url=project.url) }}");

src/templates/attract/tasks/view_task_embed.jade

@@ -80,12 +80,20 @@
 			select#assignees(
 			name="users",
 			multiple,
-			placeholder="Assigned to"
+			placeholder="Assigned Users",
 			aria-describedby="task-addon-users")
 				| {% for u in project.users %}
 				| <option value="{{ u._id }}" {% if task.properties.assigned_to.users and u._id in task.properties.assigned_to.users %}selected{% endif %}>{{ u.full_name }}</option>
 				| {% endfor %}
 
+		.input-group
+			label Due Date:
+			input#item-due_date(
+				type="text",
+				name="due_date",
+				placeholder="Deadline for Task",
+				value="{{ task.properties.due_date | hide_none }}")
+
 		.input-group-separator
 
 		.input-group
@@ -144,6 +152,17 @@
 		| {% endif %}
 
 script.
+
+	var picker = new Pikaday(
+		{
+				field: document.getElementById('item-due_date'),
+				firstDay: 1,
+				minDate: new Date(),
+				maxDate: new Date(2020, 12, 31),
+				format: 'Do MMMM YYYY',
+				yearRange: [new Date().getFullYear(),new Date().getFullYear() + 5]
+		});
+
 	$("#assignees").select2();
 
 	if (ProjectUtils.context() == 'shot'){