2018-05-09 12:01:36 +05:30
|
|
|
import $ from 'jquery';
|
2017-09-10 17:25:29 +05:30
|
|
|
import Pikaday from 'pikaday';
|
2018-11-08 19:23:39 +05:30
|
|
|
import dateFormat from 'dateformat';
|
2018-10-15 14:42:47 +05:30
|
|
|
import { __ } from '~/locale';
|
2018-03-17 18:26:18 +05:30
|
|
|
import axios from './lib/utils/axios_utils';
|
2018-12-13 13:39:08 +05:30
|
|
|
import { timeFor, parsePikadayDate, pikadayToString } from './lib/utils/datetime_utility';
|
|
|
|
import boardsStore from './boards/stores/boards_store';
|
2017-08-17 22:00:37 +05:30
|
|
|
|
|
|
|
class DueDateSelect {
|
|
|
|
constructor({ $dropdown, $loading } = {}) {
|
|
|
|
const $dropdownParent = $dropdown.closest('.dropdown');
|
|
|
|
const $block = $dropdown.closest('.block');
|
|
|
|
this.$loading = $loading;
|
|
|
|
this.$dropdown = $dropdown;
|
|
|
|
this.$dropdownParent = $dropdownParent;
|
|
|
|
this.$datePicker = $dropdownParent.find('.js-due-date-calendar');
|
|
|
|
this.$block = $block;
|
2018-10-15 14:42:47 +05:30
|
|
|
this.$sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon');
|
2017-08-17 22:00:37 +05:30
|
|
|
this.$selectbox = $dropdown.closest('.selectbox');
|
|
|
|
this.$value = $block.find('.value');
|
|
|
|
this.$valueContent = $block.find('.value-content');
|
|
|
|
this.$sidebarValue = $('.js-due-date-sidebar-value', $block);
|
2018-03-27 19:54:05 +05:30
|
|
|
this.fieldName = $dropdown.data('fieldName');
|
|
|
|
this.abilityName = $dropdown.data('abilityName');
|
|
|
|
this.issueUpdateURL = $dropdown.data('issueUpdate');
|
2017-08-17 22:00:37 +05:30
|
|
|
|
|
|
|
this.rawSelectedDate = null;
|
|
|
|
this.displayedDate = null;
|
|
|
|
this.datePayload = null;
|
|
|
|
|
|
|
|
this.initGlDropdown();
|
|
|
|
this.initRemoveDueDate();
|
|
|
|
this.initDatePicker();
|
|
|
|
}
|
|
|
|
|
|
|
|
initGlDropdown() {
|
|
|
|
this.$dropdown.glDropdown({
|
|
|
|
opened: () => {
|
|
|
|
const calendar = this.$datePicker.data('pikaday');
|
|
|
|
calendar.show();
|
|
|
|
},
|
|
|
|
hidden: () => {
|
|
|
|
this.$selectbox.hide();
|
|
|
|
this.$value.css('display', '');
|
2018-03-17 18:26:18 +05:30
|
|
|
},
|
2017-08-17 22:00:37 +05:30
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
initDatePicker() {
|
|
|
|
const $dueDateInput = $(`input[name='${this.fieldName}']`);
|
|
|
|
const calendar = new Pikaday({
|
|
|
|
field: $dueDateInput.get(0),
|
|
|
|
theme: 'gitlab-theme',
|
|
|
|
format: 'yyyy-mm-dd',
|
2018-03-17 18:26:18 +05:30
|
|
|
parse: dateString => parsePikadayDate(dateString),
|
|
|
|
toString: date => pikadayToString(date),
|
2018-11-08 19:23:39 +05:30
|
|
|
onSelect: dateText => {
|
2018-03-17 18:26:18 +05:30
|
|
|
$dueDateInput.val(calendar.toString(dateText));
|
2017-08-17 22:00:37 +05:30
|
|
|
|
|
|
|
if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
|
2018-12-13 13:39:08 +05:30
|
|
|
boardsStore.detail.issue.dueDate = $dueDateInput.val();
|
2017-08-17 22:00:37 +05:30
|
|
|
this.updateIssueBoardIssue();
|
|
|
|
} else {
|
|
|
|
this.saveDueDate(true);
|
|
|
|
}
|
2018-03-17 18:26:18 +05:30
|
|
|
},
|
2019-03-02 22:35:43 +05:30
|
|
|
firstDay: gon.first_day_of_week,
|
2017-08-17 22:00:37 +05:30
|
|
|
});
|
|
|
|
|
2018-03-17 18:26:18 +05:30
|
|
|
calendar.setDate(parsePikadayDate($dueDateInput.val()));
|
2017-08-17 22:00:37 +05:30
|
|
|
this.$datePicker.append(calendar.el);
|
|
|
|
this.$datePicker.data('pikaday', calendar);
|
|
|
|
}
|
|
|
|
|
|
|
|
initRemoveDueDate() {
|
2018-11-08 19:23:39 +05:30
|
|
|
this.$block.on('click', '.js-remove-due-date', e => {
|
2017-08-17 22:00:37 +05:30
|
|
|
const calendar = this.$datePicker.data('pikaday');
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
calendar.setDate(null);
|
|
|
|
|
|
|
|
if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
|
2018-12-13 13:39:08 +05:30
|
|
|
boardsStore.detail.issue.dueDate = '';
|
2017-08-17 22:00:37 +05:30
|
|
|
this.updateIssueBoardIssue();
|
|
|
|
} else {
|
2018-03-17 18:26:18 +05:30
|
|
|
$(`input[name='${this.fieldName}']`).val('');
|
|
|
|
this.saveDueDate(false);
|
2017-08-17 22:00:37 +05:30
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
saveDueDate(isDropdown) {
|
|
|
|
this.parseSelectedDate();
|
|
|
|
this.prepSelectedDate();
|
|
|
|
this.submitSelectedDate(isDropdown);
|
|
|
|
}
|
|
|
|
|
|
|
|
parseSelectedDate() {
|
|
|
|
this.rawSelectedDate = $(`input[name='${this.fieldName}']`).val();
|
|
|
|
|
|
|
|
if (this.rawSelectedDate.length) {
|
|
|
|
// Construct Date object manually to avoid buggy dateString support within Date constructor
|
|
|
|
const dateArray = this.rawSelectedDate.split('-').map(v => parseInt(v, 10));
|
|
|
|
const dateObj = new Date(dateArray[0], dateArray[1] - 1, dateArray[2]);
|
|
|
|
this.displayedDate = dateFormat(dateObj, 'mmm d, yyyy');
|
|
|
|
} else {
|
2019-07-31 22:56:46 +05:30
|
|
|
this.displayedDate = __('None');
|
2017-08-17 22:00:37 +05:30
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
prepSelectedDate() {
|
|
|
|
const datePayload = {};
|
|
|
|
datePayload[this.abilityName] = {};
|
|
|
|
datePayload[this.abilityName].due_date = this.rawSelectedDate;
|
|
|
|
this.datePayload = datePayload;
|
|
|
|
}
|
|
|
|
|
2018-03-17 18:26:18 +05:30
|
|
|
updateIssueBoardIssue() {
|
2017-08-17 22:00:37 +05:30
|
|
|
this.$loading.fadeIn();
|
|
|
|
this.$dropdown.trigger('loading.gl.dropdown');
|
|
|
|
this.$selectbox.hide();
|
|
|
|
this.$value.css('display', '');
|
|
|
|
const fadeOutLoader = () => {
|
|
|
|
this.$loading.fadeOut();
|
|
|
|
};
|
|
|
|
|
2018-12-13 13:39:08 +05:30
|
|
|
boardsStore.detail.issue
|
2018-11-08 19:23:39 +05:30
|
|
|
.update(this.$dropdown.attr('data-issue-update'))
|
2017-08-17 22:00:37 +05:30
|
|
|
.then(fadeOutLoader)
|
|
|
|
.catch(fadeOutLoader);
|
|
|
|
}
|
|
|
|
|
|
|
|
submitSelectedDate(isDropdown) {
|
2018-03-17 18:26:18 +05:30
|
|
|
const selectedDateValue = this.datePayload[this.abilityName].due_date;
|
2019-07-31 22:56:46 +05:30
|
|
|
const hasDueDate = this.displayedDate !== __('None');
|
2018-10-15 14:42:47 +05:30
|
|
|
const displayedDateStyle = hasDueDate ? 'bold' : 'no-value';
|
2017-08-17 22:00:37 +05:30
|
|
|
|
2018-03-17 18:26:18 +05:30
|
|
|
this.$loading.removeClass('hidden').fadeIn();
|
2017-08-17 22:00:37 +05:30
|
|
|
|
2018-03-17 18:26:18 +05:30
|
|
|
if (isDropdown) {
|
|
|
|
this.$dropdown.trigger('loading.gl.dropdown');
|
|
|
|
this.$selectbox.hide();
|
|
|
|
}
|
2017-08-17 22:00:37 +05:30
|
|
|
|
2018-03-17 18:26:18 +05:30
|
|
|
this.$value.css('display', '');
|
|
|
|
this.$valueContent.html(`<span class='${displayedDateStyle}'>${this.displayedDate}</span>`);
|
|
|
|
this.$sidebarValue.html(this.displayedDate);
|
2017-08-17 22:00:37 +05:30
|
|
|
|
2018-03-17 18:26:18 +05:30
|
|
|
$('.js-remove-due-date-holder').toggleClass('hidden', selectedDateValue.length);
|
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
return axios.put(this.issueUpdateURL, this.datePayload).then(() => {
|
|
|
|
const tooltipText = hasDueDate
|
|
|
|
? `${__('Due date')}<br />${selectedDateValue} (${timeFor(selectedDateValue)})`
|
|
|
|
: __('Due date');
|
|
|
|
if (isDropdown) {
|
|
|
|
this.$dropdown.trigger('loaded.gl.dropdown');
|
|
|
|
this.$dropdown.dropdown('toggle');
|
|
|
|
}
|
|
|
|
this.$sidebarCollapsedValue.attr('data-original-title', tooltipText);
|
2018-10-15 14:42:47 +05:30
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
return this.$loading.fadeOut();
|
|
|
|
});
|
2017-08-17 22:00:37 +05:30
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-03-17 18:26:18 +05:30
|
|
|
export default class DueDateSelectors {
|
2017-08-17 22:00:37 +05:30
|
|
|
constructor() {
|
|
|
|
this.initMilestoneDatePicker();
|
|
|
|
this.initIssuableSelect();
|
|
|
|
}
|
2018-03-17 18:26:18 +05:30
|
|
|
// eslint-disable-next-line class-methods-use-this
|
2017-08-17 22:00:37 +05:30
|
|
|
initMilestoneDatePicker() {
|
2018-03-17 18:26:18 +05:30
|
|
|
$('.datepicker').each(function initPikadayMilestone() {
|
2017-08-17 22:00:37 +05:30
|
|
|
const $datePicker = $(this);
|
2018-11-18 11:00:15 +05:30
|
|
|
const datePickerVal = $datePicker.val();
|
|
|
|
|
2017-08-17 22:00:37 +05:30
|
|
|
const calendar = new Pikaday({
|
|
|
|
field: $datePicker.get(0),
|
|
|
|
theme: 'gitlab-theme animate-picker',
|
|
|
|
format: 'yyyy-mm-dd',
|
|
|
|
container: $datePicker.parent().get(0),
|
2018-03-17 18:26:18 +05:30
|
|
|
parse: dateString => parsePikadayDate(dateString),
|
|
|
|
toString: date => pikadayToString(date),
|
2017-08-17 22:00:37 +05:30
|
|
|
onSelect(dateText) {
|
2018-03-17 18:26:18 +05:30
|
|
|
$datePicker.val(calendar.toString(dateText));
|
|
|
|
},
|
2019-03-02 22:35:43 +05:30
|
|
|
firstDay: gon.first_day_of_week,
|
2017-08-17 22:00:37 +05:30
|
|
|
});
|
2017-09-10 17:25:29 +05:30
|
|
|
|
2018-11-18 11:00:15 +05:30
|
|
|
calendar.setDate(parsePikadayDate(datePickerVal));
|
2017-08-17 22:00:37 +05:30
|
|
|
|
|
|
|
$datePicker.data('pikaday', calendar);
|
|
|
|
});
|
|
|
|
|
2018-11-08 19:23:39 +05:30
|
|
|
$('.js-clear-due-date,.js-clear-start-date').on('click', e => {
|
2017-08-17 22:00:37 +05:30
|
|
|
e.preventDefault();
|
2018-11-08 19:23:39 +05:30
|
|
|
const calendar = $(e.target)
|
|
|
|
.siblings('.datepicker')
|
|
|
|
.data('pikaday');
|
2017-08-17 22:00:37 +05:30
|
|
|
calendar.setDate(null);
|
|
|
|
});
|
|
|
|
}
|
2018-03-17 18:26:18 +05:30
|
|
|
// eslint-disable-next-line class-methods-use-this
|
2017-08-17 22:00:37 +05:30
|
|
|
initIssuableSelect() {
|
2018-11-08 19:23:39 +05:30
|
|
|
const $loading = $('.js-issuable-update .due_date')
|
|
|
|
.find('.block-loading')
|
|
|
|
.hide();
|
2017-08-17 22:00:37 +05:30
|
|
|
|
|
|
|
$('.js-due-date-select').each((i, dropdown) => {
|
|
|
|
const $dropdown = $(dropdown);
|
2018-03-17 18:26:18 +05:30
|
|
|
// eslint-disable-next-line no-new
|
2017-08-17 22:00:37 +05:30
|
|
|
new DueDateSelect({
|
|
|
|
$dropdown,
|
2018-03-17 18:26:18 +05:30
|
|
|
$loading,
|
2017-08-17 22:00:37 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|