Merge pull request #1434 from dangarbar/tg-3069/due-date-component

Tg 3069/due date component

app/coffee/modules/common/confirm.coffee

@@ -86,8 +86,10 @@ class ConfirmService extends taiga.Service
 
         return defered.promise
 
-    askOnDelete: (title, message) ->
+    askOnDelete: (title, message, subtitle) ->
-        return @.ask(title, @translate.instant("NOTIFICATION.ASK_DELETE"), message)
+        if not subtitle?
+            subtitle = @translate.instant("NOTIFICATION.ASK_DELETE")
+        return @.ask(title, subtitle, message)
 
     askChoice: (title, subtitle, choices, replacement, warning, lightboxSelector=".lightbox-ask-choice") ->
         defered = @q.defer()

app/coffee/modules/common/lightboxes.coffee

@@ -54,10 +54,10 @@ class LightboxService extends taiga.Service
         @animationFrame.add ->
             $el.addClass("open")
             $el.one "transitionend", =>
-                firstField = $el.find('input,textarea').first()
+                firstField = $el.find('input:not(.no-focus),textarea:not(.no-focus)').first()
 
                 if firstField.length
-                    $el.find('input,textarea').first().focus()
+                    firstField.focus()
                 else if document.activeElement
                     $(document.activeElement).blur()
 
@@ -802,3 +802,73 @@ LightboxLeaveProjectWarningDirective = (lightboxService, $template, $compile) ->
     }
 
 module.directive("tgLightboxLeaveProjectWarning", ["lightboxService", LightboxLeaveProjectWarningDirective])
+
+
+#############################################################################
+## Set Due Date Lightbox Directive
+#############################################################################
+
+SetDueDateDirective = (lightboxService, $loading, $translate, $confirm, $modelTransform) ->
+    link = ($scope, $el, attrs) ->
+        prettyDate = $translate.instant("COMMON.PICKERDATE.FORMAT")
+        lightboxService.open($el)
+
+        if ($scope.object.due_date)
+            $scope.new_due_date = moment($scope.object.due_date).format(prettyDate)
+
+        $el.on "click", ".suggestion", (event) ->
+            target = angular.element(event.currentTarget)
+            quantity = target.data('quantity')
+            unit = target.data('unit')
+            value = moment().add(quantity, unit).format(prettyDate)
+            $el.find(".due-date").val(value)
+
+        save = ->
+            currentLoading = $loading()
+                .target($el.find(".submit-button"))
+                .start()
+
+            transform = $modelTransform.save (object) ->
+                new_due_date = $('.due-date').val()
+                object.due_date = if (new_due_date) \
+                    then moment(new_due_date, prettyDate).format("YYYY-MM-DD") \
+                    else null
+                return object
+
+            transform.then ->
+                $confirm.notify("success")
+
+            transform.then null, ->
+                $confirm.notify("error")
+
+            transform.finally ->
+                currentLoading.finish()
+                lightboxService.close($el)
+
+        $el.on "click", ".submit-button", (event) ->
+            event.preventDefault()
+            save()
+
+        remove = ->
+            title = $translate.instant("LIGHTBOX.DELETE_DUE_DATE.TITLE")
+            subtitle = $translate.instant("LIGHTBOX.DELETE_DUE_DATE.SUBTITLE")
+            message = moment($scope.object.due_date).format(prettyDate)
+
+            $confirm.askOnDelete(title, message, subtitle).then (askResponse) ->
+                askResponse.finish()
+                $('.due-date').val(null)
+                $scope.object.due_date_reason = null
+                save()
+
+        $el.on "click", ".delete-due-date", (event) ->
+            event.preventDefault()
+            remove()
+
+    return {
+        templateUrl: 'common/lightbox/lightbox-due-date.html',
+        link: link,
+        scope: true
+    }
+
+module.directive("tgLbSetDueDate", ["lightboxService", "$tgLoading", "$translate", "$tgConfirm"
+                                    "$tgQueueModelTransformation", SetDueDateDirective])

app/locales/taiga/locale-en.json

@@ -147,7 +147,9 @@
             "IS_BLOCKED": "is blocked",
             "REF": "Ref",
             "VOTES": "Votes",
-            "SPRINT": "Sprint"
+            "SPRINT": "Sprint",
+            "DUE_DATE": "Due date",
+            "DUE_DATE_REASON": "Due date reason"
         },
         "ROLES": {
             "ALL": "All"
@@ -162,6 +164,12 @@
             "TITLE_ACTION_EDIT_ASSIGNMENT": "Edit assignment",
             "SELF": "Assign to me"
         },
+        "DUE_DATE": {
+            "TITLE_ACTION_SET_DUE_DATE": "Set due date",
+            "DUE_SOON": "due soon",
+            "PAST_DUE": "past due",
+            "NO_LONGER_APPLICABLE": "no longer applicable"
+        },
         "STATUS": {
             "CLOSED": "Closed",
             "OPEN": "Open"
@@ -1076,6 +1084,10 @@
             "EDIT_US": "Edit user story",
             "CONFIRM_CLOSE": "You have not saved changes.\nAre you sure you want to close the form?"
         },
+        "DELETE_DUE_DATE": {
+            "TITLE": "Delete due date",
+            "SUBTITLE": "Are you sure you want to delete this due date?"
+        },
         "DELETE_SPRINT": {
             "TITLE": "Delete sprint"
         },
@@ -1106,6 +1118,19 @@
             "WARNING": "The email will be received by the project admins",
             "PLACEHOLDER": "Write your message",
             "SEND": "Send"
+        },
+        "SET_DUE_DATE": {
+            "TITLE": "Set due date",
+            "PLACEHOLDER_DUE_DATE": "Select date",
+            "REASON_FOR_DUE_DATE": "Reason for the due date",
+            "PLACEHOLDER_REASON_FOR_DUE_DATE": "Is this due date due to something?",
+            "SUGGESTIONS": {
+                "IN_ONE_WEEK": "In one week",
+                "IN_TWO_WEEKS": "In two weeks",
+                "IN_ONE_MONTH": "In one month",
+                "IN_THREE_MONTHS": "In three months"
+            },
+            "TITLE_ACTION_DELETE_DUE_DATE": "Delete due date"
         }
     },
     "EPIC": {

app/modules/components/card/card-templates/card-data.jade

@@ -10,6 +10,11 @@
         ng-if="vm.item.getIn(['model', 'total_points'])"
     ) {{"COMMON.FIELDS.POINTS" | translate}} {{vm.item.getIn(['model', 'total_points'])}}
     .card-statistics
+        tg-due-date.statistic.card-due-date(
+            due-date="vm.item.getIn(['model', 'due_date'])"
+            due-date-status="vm.item.getIn(['model', 'due_date_status'])"
+            is-closed="vm.item.getIn(['model', 'is_closed'])"
+        )
         .statistic.card-iocaine(
             ng-if="vm.item.getIn(['model', 'is_iocaine'])"
             title="{{'COMMON.IOCAINE_TEXT' | translate}}"

app/modules/components/due-date/due-date-button.jade

@@ -0,0 +1,9 @@
+a.due-date-button.button-gray.is-editable(
+    href=""
+    ng-if="vm.visible()"
+    ng-disabled="vm.disabled()"
+    ng-class="vm.color()"
+    ng-attr-title="{{ vm.title() }}"
+    ng-click="vm.setDueDate()"
+)
+    tg-svg(svg-icon="icon-clock")

app/modules/components/due-date/due-date-controller.coffee

@@ -0,0 +1,72 @@
+###
+# Copyright (C) 2014-2018 Taiga Agile LLC <taiga@taiga.io>
+#
+# 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/>.
+#
+# File: due-date-controller.coffee
+###
+
+class DueDateController
+    @.$inject = [
+        "$translate"
+        "tgLightboxFactory"
+    ]
+
+    constructor: (@translate, @tgLightboxFactory) ->
+
+    visible: () ->
+        return @.format == 'button' or @.dueDate?
+
+    disabled: () ->
+        return @.isClosed
+
+    color: () ->
+        colors = {
+            'no_longer_applicable': 'closed',
+            'due_soon': 'due-soon',
+            'past_due': 'past-due',
+            'set': 'due-set',
+        }
+        return colors[@.dueDateStatus] or ''
+
+    title: () ->
+        if @.format == 'button'
+            return if @.dueDate then @._formatTitle() else 'EDIT DUE DATE'
+
+        return @._formatTitle()
+
+    _formatTitle: () ->
+        dueDateStatus = 'closed'
+        titles = {
+            'no_longer_applicable': 'COMMON.DUE_DATE.NO_LONGER_APPLICABLE',
+            'due_soon': 'COMMON.DUE_DATE.DUE_SOON',
+            'past_due': 'COMMON.DUE_DATE.PAST_DUE',
+        }
+        prettyDate = @translate.instant("COMMON.PICKERDATE.FORMAT")
+        formatedDate = moment(@.dueDate).format(prettyDate)
+
+        if not titles[@.dueDateStatus]
+            return formatedDate
+        return "#{formatedDate} (#{@translate.instant(titles[@.dueDateStatus])})"
+
+    setDueDate: () ->
+        event.preventDefault()
+        return if @.disabled()
+        @tgLightboxFactory.create(
+            "tg-lb-set-due-date",
+            {"class": "lightbox lightbox-set-due-date"},
+            {"object": @.item}
+        )
+
+angular.module('taigaComponents').controller('DueDate', DueDateController)

app/modules/components/due-date/due-date-icon.jade

@@ -0,0 +1,7 @@
+span.due-date-icon
+    tg-svg(
+        ng-if="vm.visible()"
+        svg-icon="icon-clock"
+        ng-class="vm.color()"
+        ng-attr-title="{{ vm.title() }}"
+    )

app/modules/components/due-date/due-date.directive.coffee

@@ -0,0 +1,43 @@
+###
+# Copyright (C) 2014-2018 Taiga Agile LLC <taiga@taiga.io>
+#
+# 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/>.
+#
+# File: due-date.directive.coffee
+###
+
+module = angular.module("taigaComponents")
+
+dueDateDirective = () ->
+    templateUrl = (el, attrs) ->
+        if attrs.format
+            return "components/due-date/due-date-" + attrs.format + ".html"
+        return "components/due-date/due-date-icon.html"
+
+    return {
+        link: (scope) ->
+        controller: "DueDate",
+        controllerAs: "vm",
+        bindToController: true,
+        templateUrl: templateUrl,
+        scope: {
+            dueDate: '=',
+            dueDateStatus: '=',
+            isClosed: '=',
+            item: '=',
+            format: '@'
+        }
+    }
+
+module.directive('tgDueDate', dueDateDirective)

app/modules/components/due-date/due-date.scss

@@ -0,0 +1,65 @@
+tg-due-date .due-date-button {
+    background: $gray-light;
+    display: inline-block;
+    margin-right: .5rem;
+    padding: 1rem;
+    transition: background .2s linear;
+    transition-delay: .1s;
+    &.closed,
+    &.closed[disabled] {
+        background: $gray-lighter;
+    }
+    &.due-set {
+        background: $yellow-green;
+    }
+    &.due-soon {
+        background: $my-sin;
+    }
+    &.past-due {
+        background: $red-light;
+    }
+    &:hover {
+        background: $gray;
+    }
+    &.editable {
+        cursor: pointer;
+    }
+}
+
+tg-due-date .due-date-icon {
+    display: inline-block;
+    line-height: .1rem;
+    margin: 0 .25rem;
+    position: relative;
+    top: .1rem;
+    svg {
+        fill: $gray-light;
+        height: 1.1rem;
+        transition: fill .2s ease-in;
+        width: 1.1rem;
+    }
+    .closed svg {
+        fill: $gray-lighter;
+    }
+    .due-set svg {
+        fill: $yellow-green;
+    }
+    .due-soon svg {
+        fill: $my-sin;
+    }
+    .past-due svg {
+        fill: $red-light;
+    }
+}
+
+.backlog-table-body .user-story-name .due-date-icon {
+    top: .25rem;
+}
+
+.card-statistics .due-date-icon {
+    margin: 0;
+    svg {
+        height: 1rem;
+        width: 1rem;
+    }
+}

app/modules/user-timeline/user-timeline-item/user-timeline-item-title.service.coffee

@@ -36,7 +36,9 @@ class UserTimelineItemTitle
         'type': 'ISSUES.FIELDS.TYPE',
         'is_iocaine': 'TASK.FIELDS.IS_IOCAINE',
         'is_blocked': 'COMMON.FIELDS.IS_BLOCKED',
-        'color': 'COMMON.FIELDS.COLOR'
+        'color': 'COMMON.FIELDS.COLOR',
+        'due_date': 'COMMON.FIELDS.DUE_DATE',
+        'due_date_reason': 'COMMON.FIELDS.DUE_DATE_REASON',
     }
 
     _params: {

app/modules/user-timeline/user-timeline/user-timeline.service.coffee

@@ -48,7 +48,9 @@ class UserTimelineService extends taiga.Service
         'blocked',
         'moveInBacklog',
         'milestone',
-        'color'
+        'color',
+        'due_date',
+        'due_date_reason'
     ]
 
     _invalid: [

app/partials/common/lightbox/lightbox-due-date.jade

@@ -0,0 +1,44 @@
+tg-lightbox-close
+
+form
+    h2.title(translate="LIGHTBOX.SET_DUE_DATE.TITLE")
+
+    fieldset.date
+        input.due-date.no-focus(
+            type="text"
+            name="due_date"
+            picker-value="{{ new_due_date }}"
+            data-required="true"
+            tg-date-selector
+            placeholder="{{'LIGHTBOX.SET_DUE_DATE.PLACEHOLDER_DUE_DATE' | translate}}"
+        )
+
+        ul.due-date-suggestions
+            li.suggestion.clickable(data-quantity=1, data-unit="weeks")
+                span {{ 'LIGHTBOX.SET_DUE_DATE.SUGGESTIONS.IN_ONE_WEEK' | translate }}
+            li.suggestion.clickable(data-quantity=2, data-unit="weeks")
+                span {{ 'LIGHTBOX.SET_DUE_DATE.SUGGESTIONS.IN_TWO_WEEKS' | translate }}
+            li.suggestion.clickable(data-quantity=1, data-unit="months")
+                span {{ 'LIGHTBOX.SET_DUE_DATE.SUGGESTIONS.IN_ONE_MONTH' | translate }}
+            li.suggestion.clickable(data-quantity=3, data-unit="months")
+                span {{ 'LIGHTBOX.SET_DUE_DATE.SUGGESTIONS.IN_THREE_MONTHS' | translate }}
+
+    fieldset.reason
+        span {{ 'LIGHTBOX.SET_DUE_DATE.REASON_FOR_DUE_DATE' | translate }}
+        textarea.due-date-reason.no-focus(
+            name="due_date_reason"
+            ng-attr-placeholder="{{'LIGHTBOX.SET_DUE_DATE.PLACEHOLDER_REASON_FOR_DUE_DATE' | translate}}"
+            ng-model="object.due_date_reason"
+        )
+
+    button.button-green.submit-button(
+        type="submit"
+        title="{{'COMMON.SAVE' | translate}}"
+        translate="COMMON.SAVE"
+    )
+
+    a.delete-due-date(
+        href=""
+        title="{{'LIGHTBOX.SET_DUE_DATE.TITLE_ACTION_DELETE_DUE_DATE' | translate}}"
+    )
+        tg-svg(svg-icon="icon-trash")

app/partials/includes/components/backlog-row.jade

@@ -27,6 +27,11 @@
             )
                 span(tg-bo-ref="us.ref")
                 span(ng-bind-html="us.subject | emojify")
+                tg-due-date(
+                    due-date="us.due_date"
+                    due-date-status="us.due_date_status"
+                    ng-if="us.due_date"
+                )
                 tg-belong-to-epics(
                     format="pill"
                     ng-if="us.epics"

app/partials/issue/issues-detail.jade

@@ -113,6 +113,14 @@ div.wrapper(
             )
 
         section.ticket-detail-settings
+            tg-due-date(
+                tg-check-permission="modify_issue"
+                due-date="issue.due_date"
+                due-date-status="issue.due_date_status"
+                is-closed="issue.is_closed"
+                item="issue"
+                format="button"
+            )
             tg-promote-issue-to-us-button(
                 tg-check-permission="add_us",
                 ng-model="issue"

app/partials/task/related-task-row.jade

@@ -3,7 +3,11 @@
         tg-nav="project-tasks-detail:project=project.slug,ref=task.ref")
         span #<%- task.ref %>
         span(ng-non-bindable) <%= emojify(task.subject) %>
-
+    tg-due-date(
+        due-date="task.due_date"
+        due-date-status="task.due_date_status"
+        ng-if="task.due_date"
+    )
 .task-settings
     <% if(perms.modify_task) { %>
     a.edit-task(

app/partials/task/task-detail.jade

@@ -102,6 +102,14 @@ div.wrapper(
             )
 
         section.ticket-detail-settings
+            tg-due-date(
+                tg-check-permission="modify_task"
+                due-date="task.due_date"
+                due-date-status="task.due_date_status"
+                is-closed="task.is_closed"
+                item="task"
+                format="button"
+            )
             tg-task-is-iocaine-button(ng-model="task")
             tg-block-button(tg-check-permission="modify_task", ng-model="task")
             tg-delete-button(

app/partials/us/us-detail.jade

@@ -127,6 +127,14 @@ div.wrapper(
             ) {{'US.TRIBE.PUBLISH_INFO' | translate}}
 
         section.ticket-detail-settings
+            tg-due-date(
+                tg-check-permission="modify_us"
+                due-date="us.due_date"
+                due-date-status="us.due_date_status"
+                is-closed="us.is_closed"
+                item="us"
+                format="button"
+            )
             tg-us-team-requirement-button(ng-model="us")
             tg-us-client-requirement-button(ng-model="us")
             tg-block-button(

app/styles/modules/common/lightbox.scss

@@ -540,3 +540,63 @@
         width: 500px;
     }
 }
+
+.lightbox-set-due-date {
+    z-index: 9999;
+    form {
+        flex-basis: 600px;
+        flex-flow: 0;
+        max-width: 600px;
+    }
+    .date {
+        margin: 2rem 0 1rem;
+    }
+    .reason textarea {
+        margin-top: .5rem;
+    }
+    .due-date-suggestions {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        margin: 1rem 0 .5rem;
+    }
+    .suggestion {
+        background: rgba($gray-lighter, .2);
+        color: $gray-lighter;
+        justify-content: flex-start;
+        margin: 0 .5rem .5rem;
+        min-height: 2rem;
+        padding: .5rem .75rem;
+        position: relative;
+        &:first-child {
+            margin-left: 0;
+        }
+        &:nth-child(4n + 4) {
+            margin-right: 0;
+        }
+        &.clickable {
+            &:hover,
+            &.active {
+                background: rgba($primary-light, .9);
+                color: $white;
+            }
+        }
+    }
+    .delete-due-date {
+        @include font-size(small);
+        color: $gray;
+        float: right;
+        margin: 1rem .25rem 0 0;
+        transition: color .3s linear;
+        .icon {
+            fill: currentColor;
+        }
+        &:hover {
+            color: $red;
+            transition: color .3s linear;
+            .icon {
+                fill: currentColor;
+            }
+        }
+    }
+}

app/svg/sprite.svg

@@ -244,6 +244,10 @@
                 class="path1"
                 d="M202.24-0.179v129.093l-202.24-0.11v895.375h729.6v-234.419h-64v170.419h-601.6v-644.385h601.6v287.086h64v-474.076h-64v0.11h-138.24v-129.093h-325.12zM266.24 63.821h197.12v96.44h0.32v32.653h201.92v58.88h-601.6v-58.88h202.24v-129.093zM129.165 393.242v64h468.838v-64h-468.836zM522.76 515.302l-181.020 181.018 181.020 181.020 45.256-45.253-103.759-103.767h559.744v-64h-559.749l103.764-103.764-45.253-45.256zM129.165 541.722v64h228.086v-64h-228.083zM129.165 690.202v64h150.246v-64h-150.246zM129.165 833.562v64h258.854v-64h-258.854z"></path>
         </symbol>
+        <symbol id="icon-clock" viewBox="0 0 400 400.00001">
+            <title>clock</title>
+            <path d="M200 0a200 200 0 1 0 0 400 200 200 0 0 0 0-400zm0 25a175 175 0 1 1 0 350 175 175 0 0 1 0-350zm13 53h-25v113l-87 1v25l112-1z"></path>
+        </symbol>
         <symbol id="icon-document" viewBox="0 0 1024 1024">
             <title>document</title>
             <path

app/themes/high-contrast/variables.scss

@@ -8,6 +8,7 @@ $blackish: #212121;
 $grayer: #212121;
 $gray: #757575;
 $gray-light: #757575;
+$gray-lighter: #B8B8B8;
 $whitish: #c1c1c1;
 $white: #fff;
 
@@ -19,9 +20,11 @@ $primary-dark: #000;
 // Mass white
 $mass-white: #f5f5f5;
 
-//Warning colors
+//Status colors
 $red-light: #ff0062;
 $red: #ff2400;
+$my-sin: #fcaf3e;
+$yellow-green: #9dce0a;
 
 //Card color
 $card: #F0EFD1;

app/themes/material-design/variables.scss

@@ -8,6 +8,7 @@ $blackish: #212121;
 $grayer: #424242;
 $gray: #757575;
 $gray-light: #BDBDBD;
+$gray-lighter: #B8B8B8;
 $whitish: #EEEEEE;
 $white: #fff;
 
@@ -19,9 +20,11 @@ $primary-light: #8c9eff;
 $primary: #3f51b5;
 $primary-dark: #1a237e;
 
-//Warning colors
+// Status colors
 $red-light: #ff5252;
 $red: #f44336;
+$my-sin: #fcaf3e;
+$yellow-green: #9dce0a;
 
 //Card color
 $card: #fff8e4;

app/themes/taiga/variables.scss

@@ -8,6 +8,7 @@ $blackish: #050505;
 $grayer: #444;
 $gray: #555;
 $gray-light: #767676;
+$gray-lighter: #B8B8B8;
 $whitish: #e4e3e3;
 $white: #fff;
 
@@ -19,9 +20,11 @@ $primary-light: #9dce0a;
 $primary: #5b8200;
 $primary-dark: #879b89;
 
-//Warning colors
+//Status colors
 $red-light: #ff8282;
 $red: #f00;
+$my-sin: #fcaf3e;
+$yellow-green: #9dce0a;
 
 //Card color
 $card: #fff8e4;