Skip to content

fix: resolve whack-a-mole behavior of time/date pickers & add validations to date-time #3383

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Aug 16, 2019
Merged

fix: resolve whack-a-mole behavior of time/date pickers & add validations to date-time #3383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3cdd9ce
fix: resolve whack-a-mole behavior of time/date pickers
abhinavk96 Aug 12, 2019
7058c82
feat: add validations to discount code
abhinavk96 Aug 16, 2019
4f2a5c5
feat: add onChange missing handler & id to date-time pickers
abhinavk96 Aug 16, 2019
d4b7c1c
feat: fix date-time bugs in discount form:
abhinavk96 Aug 16, 2019
39cb5b4
feat: fix date-time bugs in wizard step 1:
abhinavk96 Aug 16, 2019
221b995
feat: fix date-time bugs in wizard step 2:
abhinavk96 Aug 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 50 additions & 1 deletion app/components/forms/events/view/create-discount-code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { computed } from '@ember/object';
import FormMixin from 'open-event-frontend/mixins/form';
import { later } from '@ember/runloop';
import { currencySymbol } from 'open-event-frontend/helpers/currency-symbol';

import moment from 'moment';
export default Component.extend(FormMixin, {
getValidationRules() {
window.$.fn.form.settings.rules.checkMaxMin = () => {
Expand All @@ -21,6 +21,12 @@ export default Component.extend(FormMixin, {
}
return false;
};

window.$.fn.form.settings.rules.checkDates = () => {
let startDatetime = moment(this.get('data.validFrom'));
let endDatetime = moment(this.get('data.validTill'));
return (endDatetime.diff(startDatetime, 'minutes') > 0);
};
return {
inline : true,
delay : false,
Expand Down Expand Up @@ -107,6 +113,46 @@ export default Component.extend(FormMixin, {
prompt : this.l10n.t('Please select atleast 1 ticket.')
}
]
},
startDate: {
optional : true,
identifier : 'start_date',
rules : [
{
type : 'checkDates',
prompt : this.l10n.t('Valid Till date & time should be after valid from date and time')
}
]
},
startTime: {
optional : true,
identifier : 'start_time',
rules : [
{
type : 'checkDates',
prompt : '.'
}
]
},
endDate: {
optional : true,
identifier : 'end_date',
rules : [
{
type : 'checkDates',
prompt : this.l10n.t('Valid Till date & time should be after valid from date and time')
}
]
},
endTime: {
optional : true,
identifier : 'end_time',
rules : [
{
type : 'checkDates',
prompt : '.'
}
]
}
}
};
Expand Down Expand Up @@ -170,6 +216,9 @@ export default Component.extend(FormMixin, {
later(this, () => {
this.set('isLinkSuccess', false);
}, 5000);
},
onChange() {
this.onValid(() => {});
}
}
});
24 changes: 24 additions & 0 deletions app/components/forms/wizard/basic-details-step.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,11 @@ export default Component.extend(FormMixin, EventWizardMixin, {
},

getValidationRules() {
window.$.fn.form.settings.rules.checkDates = () => {
let startDatetime = moment(this.get('data.event.startsAt'));
let endDatetime = moment(this.get('data.event.endsAt'));
return (endDatetime.diff(startDatetime, 'minutes') > 0);
};
let validationRules = {
inline : true,
delay : false,
Expand Down Expand Up @@ -154,6 +159,10 @@ export default Component.extend(FormMixin, EventWizardMixin, {
{
type : 'date',
prompt : this.l10n.t('Please give a valid start date')
},
{
type : 'checkDates',
prompt : this.l10n.t('Start date & time should be after End date and time')
}
]
},
Expand All @@ -167,6 +176,10 @@ export default Component.extend(FormMixin, EventWizardMixin, {
{
type : 'date',
prompt : this.l10n.t('Please give a valid end date')
},
{
type : 'checkDates',
prompt : this.l10n.t('Start date & time should be after End date and time')
}
]
},
Expand All @@ -177,6 +190,10 @@ export default Component.extend(FormMixin, EventWizardMixin, {
{
type : 'empty',
prompt : this.l10n.t('Please give a start time')
},
{
type : 'checkDates',
prompt : '..'
}
]
},
Expand All @@ -187,6 +204,10 @@ export default Component.extend(FormMixin, EventWizardMixin, {
{
type : 'empty',
prompt : this.l10n.t('Please give an end time')
},
{
type : 'checkDates',
prompt : '..'
}
]
},
Expand Down Expand Up @@ -469,6 +490,9 @@ export default Component.extend(FormMixin, EventWizardMixin, {
logoUrl : license.logoUrl,
licenceUrl : license.link
});
},
onChange() {
this.onValid(() => {});
}
}
});
63 changes: 63 additions & 0 deletions app/components/forms/wizard/sessions-speakers-step.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,16 @@ import { computed } from '@ember/object';
import FormMixin from 'open-event-frontend/mixins/form';
import EventWizardMixin from 'open-event-frontend/mixins/event-wizard';
import { groupBy } from 'lodash-es';
import moment from 'moment';

export default Component.extend(EventWizardMixin, FormMixin, {

getValidationRules() {
window.$.fn.form.settings.rules.checkDates = () => {
let startDatetime = moment(this.get('data.speakersCall.startsAt'));
let endDatetime = moment(this.get('data.speakersCall.endsAt'));
return (endDatetime.diff(startDatetime, 'minutes') > 0);
};
return {
inline : true,
delay : false,
Expand Down Expand Up @@ -47,6 +53,60 @@ export default Component.extend(EventWizardMixin, FormMixin, {
prompt : this.l10n.t('Please select the Privacy')
}
]
},
startDate: {
identifier : 'start_date',
rules : [
{
type : 'empty',
prompt : this.l10n.t('Please tell us when your event starts')
},
{
type : 'checkDates',
prompt : this.l10n.t('Start date & time ')
}
]
},
endDate: {
identifier : 'end_date',
rules : [
{
type : 'empty',
prompt : this.l10n.t('Please tell us when your event ends')
},
{
type : 'checkDates',
prompt : this.l10n.t('Start date & time should be after End date and time')
}
]
},
startTime: {
identifier : 'start_time',
depends : 'start_date',
rules : [
{
type : 'empty',
prompt : this.l10n.t('Please give a start time')
},
{
type : 'checkDates',
prompt : '.'
}
]
},
endTime: {
identifier : 'end_time',
depends : 'end_date',
rules : [
{
type : 'empty',
prompt : this.l10n.t('Please give an end time')
},
{
type : 'checkDates',
prompt : '.'
}
]
}
}
};
Expand Down Expand Up @@ -113,6 +173,9 @@ export default Component.extend(EventWizardMixin, FormMixin, {
this.get('data.microlocations').addObject(this.store.createRecord('microlocation'));
break;
}
},
onChange() {
this.onValid(() => {});
}
}
});
5 changes: 3 additions & 2 deletions app/components/widgets/forms/date-picker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import Component from '@ember/component';
import { merge } from 'lodash-es';
import moment from 'moment';
import { FORM_DATE_FORMAT } from 'open-event-frontend/utils/dictionary/date-time';
import FormMixin from 'open-event-frontend/mixins/form';

export default Component.extend({
export default Component.extend(FormMixin, {

classNames : ['ui', 'calendar', 'date', 'picker', 'input', 'fluid'],
classNameBindings : ['icon:left', 'icon'],
Expand Down Expand Up @@ -43,7 +44,7 @@ export default Component.extend({
actions: {
onChange() {
if (this.onChange) {
this.sendAction('onChange', this.value);
this.sendAction('onChange');
}
}
}
Expand Down
25 changes: 16 additions & 9 deletions app/components/widgets/forms/time-picker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { FORM_TIME_FORMAT } from 'open-event-frontend/utils/dictionary/date-time

export default Component.extend({

classNames : ['ui', 'calendar', 'time', 'picker', 'input', 'fluid'],
classNames : ['ui', 'calendar', 'time', 'picker', 'input', 'fluid', 'field'],
classNameBindings : ['icon:left', 'icon'],

icon: true,
Expand All @@ -28,16 +28,23 @@ export default Component.extend({
}
};

switch (this.rangePosition) {
case 'start':
defaultOptions.endCalendar = this.$().closest('.fields').find('.ui.calendar.time.picker');
break;
case 'end':
defaultOptions.startCalendar = this.$().closest('.fields').find('.ui.calendar.time.picker');
break;
}
// switch (this.rangePosition) {
// case 'start':
// defaultOptions.endCalendar = this.$().closest('.fields').find('.ui.calendar.time.picker');
// break;
// case 'end':
// defaultOptions.startCalendar = this.$().closest('.fields').find('.ui.calendar.time.picker');
// break;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@CosmicCoder96 Remove the comments, Else tested every widget works well 🎉

Copy link
Contributor Author

@abhinavk96 abhinavk96 Aug 16, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

leaving these comments.. because someday we might want the time validation to change it's values according to its start counterpart, removed it for now because jquery ui calendar does not compare date while matching time fields, which sort of broke the UI.

// }

this.$().calendar(merge(defaultOptions, this.options));
},
actions: {
onChange() {
if (this.onChange) {
this.sendAction('onChange', this.value);
}
}
}

});
4 changes: 2 additions & 2 deletions app/models/access-code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ export default ModelBase.extend({
* Computed properties
*/

validFromDate : computedDateTimeSplit.bind(this)('validFrom', 'date'),
validFromTime : computedDateTimeSplit.bind(this)('validFrom', 'time'),
validFromDate : computedDateTimeSplit.bind(this)('validFrom', 'date', 'validTill'),
validFromTime : computedDateTimeSplit.bind(this)('validFrom', 'time', 'validTill'),
validTillDate : computedDateTimeSplit.bind(this)('validTill', 'date'),
validTillTime : computedDateTimeSplit.bind(this)('validTill', 'time')
});
9 changes: 4 additions & 5 deletions app/models/discount-code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import moment from 'moment';
import { hasMany, belongsTo } from 'ember-data/relationships';
import { computedDateTimeSplit } from 'open-event-frontend/utils/computed-helpers';

const detectedTimezone = moment.tz.guess();

/**
* Two different forms of discount code can exist. (Both use the same model)
Expand All @@ -22,9 +21,9 @@ export default ModelBase.extend({
ticketsNumber : attr('number'), // For form (1) this holds the max. times this can be used for events
minQuantity : attr('number', { defaultValue: 0 }), // Not of any significance for form (1)
maxQuantity : attr('number'), // For form (1) this holds the number of months this code is valid for events
validFrom : attr('moment'),
validFrom : attr('moment', { defaultValue: () => moment().startOf('day') }),
discountUrl : attr('string'),
validTill : attr('moment', { defaultValue: () => moment.tz(detectedTimezone).add(1, 'months').startOf('day') }),
validTill : attr('moment', { defaultValue: () => moment().add(1, 'months').startOf('day') }),
usedFor : attr('string'),
isActive : attr('boolean', { defaultValue: true }),
createdAt : attr('moment'),
Expand All @@ -42,8 +41,8 @@ export default ModelBase.extend({
}), // The events that this discount code has been applied to [Form (1)]
marketer: belongsTo('user'),

validFromDate : computedDateTimeSplit.bind(this)('validFrom', 'date'),
validFromTime : computedDateTimeSplit.bind(this)('validFrom', 'time'),
validFromDate : computedDateTimeSplit.bind(this)('validFrom', 'date', 'validTill'),
validFromTime : computedDateTimeSplit.bind(this)('validFrom', 'time', 'validTill'),
validTillDate : computedDateTimeSplit.bind(this)('validTill', 'date'),
validTillTime : computedDateTimeSplit.bind(this)('validTill', 'time')
});
4 changes: 2 additions & 2 deletions app/models/event.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,8 +147,8 @@ export default ModelBase.extend(CustomPrimaryKeyMixin, {
* Computed properties
*/

startsAtDate : computedDateTimeSplit.bind(this)('startsAt', 'date'),
startsAtTime : computedDateTimeSplit.bind(this)('startsAt', 'time'),
startsAtDate : computedDateTimeSplit.bind(this)('startsAt', 'date', 'endsAt'),
startsAtTime : computedDateTimeSplit.bind(this)('startsAt', 'time', 'endsAt'),
endsAtDate : computedDateTimeSplit.bind(this)('endsAt', 'date'),
endsAtTime : computedDateTimeSplit.bind(this)('endsAt', 'time'),

Expand Down
4 changes: 2 additions & 2 deletions app/models/session.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@ export default ModelBase.extend({
}
}),

startAtDate : computedDateTimeSplit.bind(this)('startsAt', 'date'),
startAtTime : computedDateTimeSplit.bind(this)('startsAt', 'time'),
startAtDate : computedDateTimeSplit.bind(this)('startsAt', 'date', 'endsAt'),
startAtTime : computedDateTimeSplit.bind(this)('startsAt', 'time', 'endsAt'),
endsAtDate : computedDateTimeSplit.bind(this)('endsAt', 'date'),
endsAtTime : computedDateTimeSplit.bind(this)('endsAt', 'time'),

Expand Down
4 changes: 2 additions & 2 deletions app/models/speakers-call.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ export default ModelBase.extend({

event: belongsTo('event'),

startsAtDate : computedDateTimeSplit.bind(this)('startsAt', 'date'),
startsAtTime : computedDateTimeSplit.bind(this)('startsAt', 'time'),
startsAtDate : computedDateTimeSplit.bind(this)('startsAt', 'date', 'endsAt'),
startsAtTime : computedDateTimeSplit.bind(this)('startsAt', 'time', 'endsAt'),
endsAtDate : computedDateTimeSplit.bind(this)('endsAt', 'date'),
endsAtTime : computedDateTimeSplit.bind(this)('endsAt', 'time'),

Expand Down
4 changes: 2 additions & 2 deletions app/models/ticket.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ export default ModelBase.extend({
/**
* Computed properties
*/
salesStartAtDate : computedDateTimeSplit.bind(this)('salesStartsAt', 'date'),
salesStartAtTime : computedDateTimeSplit.bind(this)('salesStartsAt', 'time'),
salesStartAtDate : computedDateTimeSplit.bind(this)('salesStartsAt', 'date', 'salesEndsAt'),
salesStartAtTime : computedDateTimeSplit.bind(this)('salesStartsAt', 'time', 'salesEndsAt'),
salesEndsAtDate : computedDateTimeSplit.bind(this)('salesEndsAt', 'date'),
salesEndsAtTime : computedDateTimeSplit.bind(this)('salesEndsAt', 'time'),

Expand Down
2 changes: 0 additions & 2 deletions app/routes/events/view/tickets/discount-codes/create.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Route from '@ember/routing/route';
import moment from 'moment';

export default Route.extend({
titleToken() {
Expand Down Expand Up @@ -33,7 +32,6 @@ export default Route.extend({
});
let currentDiscountCode = model.discountCode;
let event = this.modelFor('events.view');
currentDiscountCode.set('validFrom', moment().toISOString());
Copy link
Contributor Author

@abhinavk96 abhinavk96 Aug 16, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this was the problem 😈 converting it to string made it invalid to moment js computations.
@shreyanshdwivedi @kushthedude

currentDiscountCode.set('validTill', event.endsAt);
currentDiscountCode.set('minQuantity', 1);
currentDiscountCode.set('maxQuantity', 1);
Expand Down
Loading