Lightbox for due date editing
Daniel García
parent
ebcfc7643f
commit
9e561d9b00
|
|
@ -86,8 +86,10 @@ class ConfirmService extends taiga.Service
|
|||
|
||||
return defered.promise
|
||||
|
||||
askOnDelete: (title, message) ->
|
||||
return @.ask(title, @translate.instant("NOTIFICATION.ASK_DELETE"), message)
|
||||
askOnDelete: (title, message, subtitle) ->
|
||||
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()
|
||||
|
|
|
|||
|
|
@ -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])
|
||||
|
|
|
|||
|
|
@ -1076,6 +1076,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 +1110,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": {
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue