Posts the due date through AJAX
This commit is contained in:
parent
05523b5bd1
commit
aa22106b30
|
@ -0,0 +1,48 @@
|
|||
class @DueDateSelect
|
||||
constructor: ->
|
||||
$('.js-due-date-select').each (i, dropdown) ->
|
||||
$dropdown = $(dropdown)
|
||||
$dropdownParent = $dropdown.closest('.dropdown')
|
||||
$addBtn = $('.js-due-date-add', $dropdownParent)
|
||||
$datePicker = $dropdownParent.find('.js-due-date-calendar')
|
||||
$block = $dropdown.closest('.block')
|
||||
$loading = $block.find('.block-loading').hide()
|
||||
$selectbox = $dropdown.closest('.selectbox')
|
||||
$value = $block.find('.value')
|
||||
|
||||
fieldName = $dropdown.data('field-name')
|
||||
abilityName = $dropdown.data('ability-name')
|
||||
issueUpdateURL = $dropdown.data('issue-update')
|
||||
|
||||
$addBtn.on 'click', (e) ->
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
|
||||
# Create the post date
|
||||
value = $("input[name='#{fieldName}']").val()
|
||||
mediumDate = $.datepicker.formatDate("M d, yy", new Date(value))
|
||||
|
||||
data = {}
|
||||
data[abilityName] = {}
|
||||
data[abilityName].due_date = value
|
||||
|
||||
$.ajax(
|
||||
type: 'PUT'
|
||||
url: issueUpdateURL
|
||||
data: data
|
||||
beforeSend: ->
|
||||
$loading.fadeIn()
|
||||
$dropdown.trigger('loading.gl.dropdown')
|
||||
$selectbox.hide()
|
||||
$value.removeAttr('style')
|
||||
|
||||
$value.html(mediumDate)
|
||||
).done (data) ->
|
||||
$dropdown.trigger('loaded.gl.dropdown')
|
||||
$loading.fadeOut()
|
||||
|
||||
$datePicker.datepicker(
|
||||
dateFormat: "yy-mm-dd",
|
||||
defaultDate: $("input[name='#{fieldName}']").val()
|
||||
altField: "input[name='#{fieldName}']"
|
||||
)
|
|
@ -358,6 +358,13 @@
|
|||
border-top: 1px solid $dropdown-divider-color;
|
||||
}
|
||||
|
||||
.dropdown-due-date-footer {
|
||||
padding-top: 0;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.dropdown-footer-list {
|
||||
font-size: 14px;
|
||||
|
||||
|
@ -395,3 +402,83 @@
|
|||
height: 15px;
|
||||
border-radius: $border-radius-base;
|
||||
}
|
||||
|
||||
.dropdown-menu-due-date {
|
||||
.ui-widget {
|
||||
table {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.ui-datepicker-inline {
|
||||
padding: 0 10px;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui-datepicker-header {
|
||||
padding: 8px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.ui-state-active,
|
||||
.ui-state-hover {
|
||||
color: $md-link-color;
|
||||
background-color: #ecf3fe;
|
||||
}
|
||||
|
||||
.ui-datepicker-prev,
|
||||
.ui-datepicker-next {
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-datepicker-prev {
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.ui-datepicker-next {
|
||||
right: 1px;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
|
||||
&:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
line-height: 17px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-datepicker-title {
|
||||
color: #555;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 5px 0;
|
||||
color: #b8b8b8;
|
||||
font-weight: normal;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.ui-datepicker-unselectable {
|
||||
background-color: #faf9f9;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -242,7 +242,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
.issuable-pager {
|
||||
background: $gray-normal;
|
||||
border: 1px solid $border-gray-normal;
|
||||
&:hover {
|
||||
|
@ -251,7 +251,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
a:not(.btn) {
|
||||
a:not(.issuable-pager) {
|
||||
&:hover {
|
||||
color: $md-link-color;
|
||||
text-decoration: none;
|
||||
|
|
|
@ -10,14 +10,14 @@
|
|||
= sidebar_gutter_toggle_icon
|
||||
.issuable-nav.hide-collapsed.pull-right.btn-group{role: 'group', "aria-label" => '...'}
|
||||
- if prev_issuable = prev_issuable_for(issuable)
|
||||
= link_to 'Prev', [@project.namespace.becomes(Namespace), @project, prev_issuable], class: 'btn btn-default prev-btn'
|
||||
= link_to 'Prev', [@project.namespace.becomes(Namespace), @project, prev_issuable], class: 'btn btn-default prev-btn issuable-pager'
|
||||
- else
|
||||
%a.btn.btn-default.disabled{href: '#'}
|
||||
%a.btn.btn-default.issuable-pager.disabled{href: '#'}
|
||||
Prev
|
||||
- if next_issuable = next_issuable_for(issuable)
|
||||
= link_to 'Next', [@project.namespace.becomes(Namespace), @project, next_issuable], class: 'btn btn-default next-btn'
|
||||
= link_to 'Next', [@project.namespace.becomes(Namespace), @project, next_issuable], class: 'btn btn-default next-btn issuable-pager'
|
||||
- else
|
||||
%a.btn.btn-default.disabled{href: '#'}
|
||||
%a.btn.btn-default.issuable-pager.disabled{href: '#'}
|
||||
Next
|
||||
|
||||
= form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f|
|
||||
|
@ -84,20 +84,32 @@
|
|||
- else
|
||||
.light None
|
||||
.title.hide-collapsed
|
||||
%label
|
||||
Due Date
|
||||
Due Date
|
||||
= icon('spinner spin', class: 'block-loading')
|
||||
- if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
|
||||
.pull-right
|
||||
= link_to 'Edit', '#', class: 'edit-link'
|
||||
.value.hide-collapsed
|
||||
= link_to 'Edit', '#', class: 'edit-link pull-right'
|
||||
.value.bold.hide-collapsed
|
||||
- if issuable.due_date
|
||||
= icon('calendar')
|
||||
= issuable.due_date.to_s(:medium)
|
||||
- else
|
||||
.light None
|
||||
.selectbox.hide-collapsed
|
||||
= f.text_field :due_date
|
||||
= hidden_field_tag :issuable_context
|
||||
- if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
|
||||
.selectbox.hide-collapsed
|
||||
= hidden_field_tag "#{issuable.to_ability_name}[due_date]", issuable.due_date
|
||||
.dropdown
|
||||
%button.dropdown-menu-toggle.js-due-date-select{ type: "button", data: { toggle: "dropdown", field_name: "#{issuable.to_ability_name}[due_date]", ability_name: issuable.to_ability_name, issue_update: issuable_json_path(issuable) } }
|
||||
%span.dropdown-toggle-text
|
||||
Due date
|
||||
= icon('chevron-down')
|
||||
.dropdown-menu.dropdown-menu-due-date
|
||||
= dropdown_title("Due date")
|
||||
= dropdown_content do
|
||||
.js-due-date-calendar
|
||||
.dropdown-footer.dropdown-due-date-footer.clearfix
|
||||
%button.btn.btn-primary.pull-left.js-due-date-add{ type: "button" }
|
||||
Add
|
||||
%button.btn.btn-default.pull-right{ type: "button" }
|
||||
Cancel
|
||||
|
||||
- if issuable.project.labels.any?
|
||||
.block.labels
|
||||
|
@ -178,3 +190,4 @@
|
|||
new IssuableContext('#{escape_javascript(current_user.to_json(only: [:username, :id, :name]))}');
|
||||
new Subscription('.subscription')
|
||||
new Sidebar();
|
||||
new DueDateSelect();
|
||||
|
|
Loading…
Reference in New Issue