BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 941c1182 by Filipa Lacerda Committed by Phil Hughes
Options

Fix Pikaday

parent ed194a6d
Showing with 115 additions and 50 deletions
app/assets/javascripts/boards/components/board_sidebar.js
......@@ -9,6 +9,7 @@ import Flash from '../../flash';
import eventHub from '../../sidebar/event_hub';
import AssigneeTitle from '../../sidebar/components/assignees/assignee_title';
import Assignees from '../../sidebar/components/assignees/assignees';
import DueDateSelectors from '../../due_date_select';
import './sidebar/remove_issue';
const Store = gl.issueBoards.BoardsStore;
......@@ -113,7 +114,7 @@ gl.issueBoards.BoardSidebar = Vue.extend({
mounted () {
new IssuableContext(this.currentUser);
new MilestoneSelect();
new gl.DueDateSelectors();
new DueDateSelectors();
new LabelsSelect();
new Sidebar();
gl.Subscription.bindAll('.subscription');
......
app/assets/javascripts/dispatcher.js
......@@ -86,6 +86,7 @@ import ShortcutsIssuable from './shortcuts_issuable';
import U2FAuthenticate from './u2f/authenticate';
import Members from './members';
import memberExpirationDate from './member_expiration_date';
import DueDateSelectors from './due_date_select';
(function() {
var Dispatcher;
......@@ -232,7 +233,7 @@ import memberExpirationDate from './member_expiration_date';
case 'groups:milestones:edit':
case 'groups:milestones:update':
new ZenMode();
new gl.DueDateSelectors();
new DueDateSelectors();
new GLForm($('.milestone-form'), true);
break;
case 'projects:compare:show':
......@@ -532,7 +533,7 @@ import memberExpirationDate from './member_expiration_date';
break;
case 'profiles:personal_access_tokens:index':
case 'admin:impersonation_tokens:index':
new gl.DueDateSelectors();
new DueDateSelectors();
break;
case 'projects:clusters:show':
import(/* webpackChunkName: "clusters" */ './clusters')
......
app/assets/javascripts/due_date_select.js
/* eslint-disable wrap-iife, func-names, space-before-function-paren, comma-dangle, prefer-template, consistent-return, class-methods-use-this, arrow-body-style, no-unused-vars, no-underscore-dangle, no-new, max-len, no-sequences, no-unused-expressions, no-param-reassign */
/* global dateFormat */
import Pikaday from 'pikaday';
import DateFix from './lib/utils/datefix';
import { parsePikadayDate, pikadayToString } from './lib/utils/datefix';
class DueDateSelect {
constructor({ $dropdown, $loading } = {}) {
......@@ -17,8 +16,8 @@ class DueDateSelect {
this.$value = $block.find('.value');
this.$valueContent = $block.find('.value-content');
this.$sidebarValue = $('.js-due-date-sidebar-value', $block);
this.fieldName = $dropdown.data('field-name'),
this.abilityName = $dropdown.data('ability-name'),
this.fieldName = $dropdown.data('field-name');
this.abilityName = $dropdown.data('ability-name');
this.issueUpdateURL = $dropdown.data('issue-update');
this.rawSelectedDate = null;
......@@ -39,20 +38,20 @@ class DueDateSelect {
hidden: () => {
this.$selectbox.hide();
this.$value.css('display', '');
}
},
});
}
initDatePicker() {
const $dueDateInput = $(`input[name='${this.fieldName}']`);
const dateFix = DateFix.dashedFix($dueDateInput.val());
const calendar = new Pikaday({
field: $dueDateInput.get(0),
theme: 'gitlab-theme',
format: 'yyyy-mm-dd',
parse: dateString => parsePikadayDate(dateString),
toString: date => pikadayToString(date),
onSelect: (dateText) => {
const formattedDate = dateFormat(new Date(dateText), 'yyyy-mm-dd');
$dueDateInput.val(formattedDate);
$dueDateInput.val(calendar.toString(dateText));
if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
gl.issueBoards.BoardsStore.detail.issue.dueDate = $dueDateInput.val();
......@@ -60,10 +59,10 @@ class DueDateSelect {
} else {
this.saveDueDate(true);
}
}
},
});
calendar.setDate(dateFix);
calendar.setDate(parsePikadayDate($dueDateInput.val()));
this.$datePicker.append(calendar.el);
this.$datePicker.data('pikaday', calendar);
}
......@@ -79,8 +78,8 @@ class DueDateSelect {
gl.issueBoards.BoardsStore.detail.issue.dueDate = '';
this.updateIssueBoardIssue();
} else {
$("input[name='" + this.fieldName + "']").val('');
return this.saveDueDate(false);
$(`input[name='${this.fieldName}']`).val('');
this.saveDueDate(false);
}
});
}
......@@ -111,7 +110,7 @@ class DueDateSelect {
this.datePayload = datePayload;
}
updateIssueBoardIssue () {
updateIssueBoardIssue() {
this.$loading.fadeIn();
this.$dropdown.trigger('loading.gl.dropdown');
this.$selectbox.hide();
......@@ -149,8 +148,8 @@ class DueDateSelect {
return selectedDateValue.length ?
$('.js-remove-due-date-holder').removeClass('hidden') :
$('.js-remove-due-date-holder').addClass('hidden');
}
}).done((data) => {
},
}).done(() => {
if (isDropdown) {
this.$dropdown.trigger('loaded.gl.dropdown');
this.$dropdown.dropdown('toggle');
......@@ -160,27 +159,28 @@ class DueDateSelect {
}
}
class DueDateSelectors {
export default class DueDateSelectors {
constructor() {
this.initMilestoneDatePicker();
this.initIssuableSelect();
}
// eslint-disable-next-line class-methods-use-this
initMilestoneDatePicker() {
$('.datepicker').each(function() {
$('.datepicker').each(function initPikadayMilestone() {
const $datePicker = $(this);
const dateFix = DateFix.dashedFix($datePicker.val());
const calendar = new Pikaday({
field: $datePicker.get(0),
theme: 'gitlab-theme animate-picker',
format: 'yyyy-mm-dd',
container: $datePicker.parent().get(0),
parse: dateString => parsePikadayDate(dateString),
toString: date => pikadayToString(date),
onSelect(dateText) {
$datePicker.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
}
$datePicker.val(calendar.toString(dateText));
},
});
calendar.setDate(dateFix);
calendar.setDate(parsePikadayDate($datePicker.val()));
$datePicker.data('pikaday', calendar);
});
......@@ -191,19 +191,17 @@ class DueDateSelectors {
calendar.setDate(null);
});
}
// eslint-disable-next-line class-methods-use-this
initIssuableSelect() {
const $loading = $('.js-issuable-update .due_date').find('.block-loading').hide();
$('.js-due-date-select').each((i, dropdown) => {
const $dropdown = $(dropdown);
// eslint-disable-next-line no-new
new DueDateSelect({
$dropdown,
$loading
$loading,
});
});
}
}
window.gl = window.gl || {};
window.gl.DueDateSelectors = DueDateSelectors;
app/assets/javascripts/init_issuable_sidebar.js
......@@ -4,6 +4,8 @@
/* global IssuableContext */
/* global Sidebar */
import DueDateSelectors from './due_date_select';
export default () => {
const sidebarOptions = JSON.parse(document.querySelector('.js-sidebar-options').innerHTML);
......@@ -13,6 +15,6 @@ export default () => {
new LabelsSelect();
new IssuableContext(sidebarOptions.currentUser);
gl.Subscription.bindAll('.subscription');
new gl.DueDateSelectors();
new DueDateSelectors();
window.sidebar = new Sidebar();
};
app/assets/javascripts/issuable_form.js
/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-use-before-define, no-useless-escape, no-new, quotes, object-shorthand, no-unused-vars, comma-dangle, no-alert, consistent-return, no-else-return, prefer-template, one-var, one-var-declaration-per-line, curly, max-len */
/* global GitLab */
/* global Autosave */
/* global dateFormat */
import Pikaday from 'pikaday';
import UsersSelect from './users_select';
import GfmAutoComplete from './gfm_auto_complete';
import ZenMode from './zen_mode';
import { parsePikadayDate, pikadayToString } from './lib/utils/datefix';
(function() {
this.IssuableForm = (function() {
......@@ -38,11 +38,13 @@ import ZenMode from './zen_mode';
theme: 'gitlab-theme animate-picker',
format: 'yyyy-mm-dd',
container: $issuableDueDate.parent().get(0),
parse: dateString => parsePikadayDate(dateString),
toString: date => pikadayToString(date),
onSelect: function(dateText) {
$issuableDueDate.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
$issuableDueDate.val(calendar.toString(dateText));
}
});
calendar.setDate(new Date($issuableDueDate.val()));
calendar.setDate(parsePikadayDate($issuableDueDate.val()));
}
}
......
app/assets/javascripts/lib/utils/datefix.js
const DateFix = {
dashedFix(val) {
const [y, m, d] = val.split('-');
return new Date(y, m - 1, d);
},
export const pad = (val, len = 2) => (`0${val}`).slice(-len);
/**
* Formats dates in Pickaday
* @param {String} dateString Date in yyyy-mm-dd format
* @return {Date} UTC format
*/
export const parsePikadayDate = (dateString) => {
const parts = dateString.split('-');
const year = parseInt(parts[0], 10);
const month = parseInt(parts[1] - 1, 10);
const day = parseInt(parts[2], 10);
return new Date(year, month, day);
};
export default DateFix;
/**
* Used `onSelect` method in pickaday
* @param {Date} date UTC format
* @return {String} Date formated in yyyy-mm-dd
*/
export const pikadayToString = (date) => {
const day = pad(date.getDate());
const month = pad(date.getMonth() + 1);
const year = date.getFullYear();
return `${year}-${month}-${day}`;
};
app/assets/javascripts/main.js
......@@ -51,8 +51,6 @@ import './confirm_danger_modal';
import './copy_as_gfm';
import './copy_to_clipboard';
import './diff';
import './dropzone_input';
import './due_date_select';
import './files_comment_button';
import Flash, { removeFlashClickListener } from './flash';
import './gl_dropdown';
......
app/assets/javascripts/member_expiration_date.js
/* global dateFormat */
import Pikaday from 'pikaday';
import { parsePikadayDate, pikadayToString } from './lib/utils/datefix';
// Add datepickers to all `js-access-expiration-date` elements. If those elements are
// children of an element with the `clearable-input` class, and have a sibling
......@@ -22,8 +21,10 @@ export default function memberExpirationDate(selector = '.js-access-expiration-d
format: 'yyyy-mm-dd',
minDate: new Date(),
container: $input.parent().get(0),
parse: dateString => parsePikadayDate(dateString),
toString: date => pikadayToString(date),
onSelect(dateText) {
$input.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
$input.val(calendar.toString(dateText));
$input.trigger('change');
......@@ -31,7 +32,7 @@ export default function memberExpirationDate(selector = '.js-access-expiration-d
},
});
calendar.setDate(new Date($input.val()));
calendar.setDate(parsePikadayDate($input.val()));
$input.data('pikaday', calendar);
});
......
changelogs/unreleased/38986-due-date.yml 0 → 100644
---
title: Fix timezone bug in Pikaday and upgrade Pikaday version
merge_request:
author:
type: fixed
config/dependency_decisions.yml
......@@ -464,3 +464,10 @@
:why: Our own library - https://gitlab.com/gitlab-org/gitlab-svgs
:versions: []
:when: 2017-09-19 14:36:32.795496000 Z
- - :license
- pikaday
- MIT
- :who:
:why:
:versions: []
:when: 2017-10-17 17:46:12.367554000 Z
package.json
......@@ -46,7 +46,7 @@
"monaco-editor": "0.10.0",
"mousetrap": "^1.4.6",
"name-all-modules-plugin": "^1.0.1",
"pikaday": "^1.5.1",
"pikaday": "^1.6.1",
"prismjs": "^1.6.0",
"raphael": "^2.2.7",
"raven-js": "^3.14.0",
......
spec/javascripts/lib/utils/datefix_spec.js 0 → 100644
import { pad, parsePikadayDate, pikadayToString } from '~/lib/utils/datefix';
describe('datefix', () => {
describe('pad', () => {
it('should add a 0 when length is smaller than 2', () => {
expect(pad(2)).toEqual('02');
});
it('should not add a zero when lenght matches the default', () => {
expect(pad(12)).toEqual('12');
});
it('should add a 0 when lenght is smaller than the provided', () => {
expect(pad(12, 3)).toEqual('012');
});
});
describe('parsePikadayDate', () => {
it('should return a UTC date', () => {
expect(parsePikadayDate('2020-01-29')).toEqual(new Date('2020-01-29'));
});
});
describe('pikadayToString', () => {
it('should format a UTC date into yyyy-mm-dd format', () => {
expect(pikadayToString(new Date('2020-01-29'))).toEqual('2020-01-29');
});
});
});
yarn.lock
......@@ -4677,9 +4677,9 @@ pify@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
pikaday@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/pikaday/-/pikaday-1.5.1.tgz#0a48549bc1a14ea1d08c44074d761bc2f2bfcfd3"
pikaday@^1.6.1:
version "1.6.1"
resolved "https://registry.yarnpkg.com/pikaday/-/pikaday-1.6.1.tgz#b91bcb9b8539cedd8d6d08e4e7465e12095671b0"
optionalDependencies:
moment "2.x"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment