From 8b16955cc27b29ae507be084adccc4fad61b05ef Mon Sep 17 00:00:00 2001 From: Pouyan Savoli Date: Sat, 14 Oct 2017 01:38:25 +0200 Subject: number + date fields --- client/components/cards/cardCustomFields.jade | 24 ++++++ client/components/cards/cardCustomFields.js | 103 ++++++++++++++++++++++++-- client/components/cards/cardDate.jade | 16 ---- client/components/cards/cardDate.js | 91 +---------------------- client/components/cards/cardDate.styl | 19 ----- 5 files changed, 123 insertions(+), 130 deletions(-) (limited to 'client/components/cards') diff --git a/client/components/cards/cardCustomFields.jade b/client/components/cards/cardCustomFields.jade index 9e9f7d84..65081e3b 100644 --- a/client/components/cards/cardCustomFields.jade +++ b/client/components/cards/cardCustomFields.jade @@ -31,6 +31,30 @@ template(name="cardCustomField-text") else | {{_ 'edit'}} +template(name="cardCustomField-number") + if canModifyCard + +inlinedForm(classNames="js-card-customfield-number") + input(type="number" value=data.value) + .edit-controls.clearfix + button.primary(type="submit") {{_ 'save'}} + a.fa.fa-times-thin.js-close-inlined-form + else + a.js-open-inlined-form + if value + = value + else + | {{_ 'edit'}} + +template(name="cardCustomField-date") + if canModifyCard + a.js-edit-date(title="{{showTitle}}" class="{{classes}}") + if value + div.card-date + time(datetime="{{showISODate}}") + | {{showDate}} + else + | {{_ 'edit'}} + template(name="cardCustomField-dropdown") if canModifyCard +inlinedForm(classNames="js-card-customfield-dropdown") diff --git a/client/components/cards/cardCustomFields.js b/client/components/cards/cardCustomFields.js index f9fa760c..e014de4a 100644 --- a/client/components/cards/cardCustomFields.js +++ b/client/components/cards/cardCustomFields.js @@ -20,6 +20,7 @@ Template.cardCustomFieldsPopup.events({ } }); +// cardCustomField const CardCustomField = BlazeComponent.extendComponent({ getTemplate() { @@ -28,6 +29,8 @@ const CardCustomField = BlazeComponent.extendComponent({ onCreated() { const self = this; + self.card = Cards.findOne(Session.get('currentCard')); + self.customFieldId = this.data()._id; }, canModifyCard() { @@ -36,28 +39,118 @@ const CardCustomField = BlazeComponent.extendComponent({ }); CardCustomField.register('cardCustomField'); +// cardCustomField-text (class extends CardCustomField { onCreated() { + super.onCreated(); } events() { return [{ 'submit .js-card-customfield-text'(evt) { evt.preventDefault(); - const card = Cards.findOne(Session.get('currentCard')); - const customFieldId = this.data()._id; const value = this.currentComponent().getValue(); - card.setCustomField(customFieldId,value); + this.card.setCustomField(this.customFieldId, value); }, }]; } }).register('cardCustomField-text'); +// cardCustomField-number (class extends CardCustomField { onCreated() { + super.onCreated(); + } + + events() { + return [{ + 'submit .js-card-customfield-number'(evt) { + evt.preventDefault(); + const value = parseInt(this.find('input').value); + this.card.setCustomField(this.customFieldId, value); + }, + }]; + } + +}).register('cardCustomField-number'); + +// cardCustomField-date +(class extends CardCustomField { + + onCreated() { + super.onCreated(); + const self = this; + self.date = ReactiveVar(); + self.now = ReactiveVar(moment()); + window.setInterval(() => { + self.now.set(moment()); + }, 60000); + + self.autorun(() => { + self.date.set(moment(self.data().value)); + }); + } + + showDate() { + // this will start working once mquandalle:moment + // is updated to at least moment.js 2.10.5 + // until then, the date is displayed in the "L" format + return this.date.get().calendar(null, { + sameElse: 'llll', + }); + } + + showISODate() { + return this.date.get().toISOString(); + } + + classes() { + if (this.date.get().isBefore(this.now.get(), 'minute') && + this.now.get().isBefore(this.data().value)) { + return 'current'; + } + return ''; + } + + showTitle() { + return `${TAPi18n.__('card-start-on')} ${this.date.get().format('LLLL')}`; + } + + events() { + return [{ + 'click .js-edit-date': Popup.open('cardCustomField-date'), + }]; + } + +}).register('cardCustomField-date'); + +// cardCustomField-datePopup +(class extends DatePicker { + onCreated() { + super.onCreated(); + const self = this; + self.card = Cards.findOne(Session.get('currentCard')); + self.customFieldId = this.data()._id; + this.data().value && this.date.set(moment(this.data().value)); + } + + _storeDate(date) { + this.card.setCustomField(this.customFieldId, date); + } + + _deleteDate() { + this.card.setCustomField(this.customFieldId, ''); + } +}).register('cardCustomField-datePopup'); + +// cardCustomField-dropdown +(class extends CardCustomField { + + onCreated() { + super.onCreated(); this._items = this.data().definition.settings.dropdownItems; this.items = this._items.slice(0); this.items.unshift({ @@ -77,10 +170,8 @@ CardCustomField.register('cardCustomField'); return [{ 'submit .js-card-customfield-dropdown'(evt) { evt.preventDefault(); - const card = Cards.findOne(Session.get('currentCard')); - const customFieldId = this.data()._id; const value = this.find('select').value; - card.setCustomField(customFieldId,value); + this.card.setCustomField(this.customFieldId, value); }, }]; } diff --git a/client/components/cards/cardDate.jade b/client/components/cards/cardDate.jade index 525f27ed..2e447506 100644 --- a/client/components/cards/cardDate.jade +++ b/client/components/cards/cardDate.jade @@ -1,19 +1,3 @@ -template(name="editCardDate") - .edit-card-date - form.edit-date - .fields - .left - label(for="date") {{_ 'date'}} - input.js-date-field#date(type="text" name="date" value=showDate placeholder=dateFormat autofocus) - .right - label(for="time") {{_ 'time'}} - input.js-time-field#time(type="text" name="time" value=showTime placeholder=timeFormat) - .js-datepicker - if error.get - .warning {{_ error.get}} - button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}} - button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}} - template(name="dateBadge") if canModifyCard a.js-edit-date.card-date(title="{{showTitle}}" class="{{classes}}") diff --git a/client/components/cards/cardDate.js b/client/components/cards/cardDate.js index 3f69f384..09a6761b 100644 --- a/client/components/cards/cardDate.js +++ b/client/components/cards/cardDate.js @@ -1,91 +1,4 @@ // Edit start & due dates -const EditCardDate = BlazeComponent.extendComponent({ - template() { - return 'editCardDate'; - }, - - onCreated() { - this.error = new ReactiveVar(''); - this.card = this.data(); - this.date = new ReactiveVar(moment.invalid()); - }, - - onRendered() { - const $picker = this.$('.js-datepicker').datepicker({ - todayHighlight: true, - todayBtn: 'linked', - language: TAPi18n.getLanguage(), - }).on('changeDate', function(evt) { - this.find('#date').value = moment(evt.date).format('L'); - this.error.set(''); - this.find('#time').focus(); - }.bind(this)); - - if (this.date.get().isValid()) { - $picker.datepicker('update', this.date.get().toDate()); - } - }, - - showDate() { - if (this.date.get().isValid()) - return this.date.get().format('L'); - return ''; - }, - showTime() { - if (this.date.get().isValid()) - return this.date.get().format('LT'); - return ''; - }, - dateFormat() { - return moment.localeData().longDateFormat('L'); - }, - timeFormat() { - return moment.localeData().longDateFormat('LT'); - }, - - events() { - return [{ - 'keyup .js-date-field'() { - // parse for localized date format in strict mode - const dateMoment = moment(this.find('#date').value, 'L', true); - if (dateMoment.isValid()) { - this.error.set(''); - this.$('.js-datepicker').datepicker('update', dateMoment.toDate()); - } - }, - 'keyup .js-time-field'() { - // parse for localized time format in strict mode - const dateMoment = moment(this.find('#time').value, 'LT', true); - if (dateMoment.isValid()) { - this.error.set(''); - } - }, - 'submit .edit-date'(evt) { - evt.preventDefault(); - - // if no time was given, init with 12:00 - const time = evt.target.time.value || moment(new Date().setHours(12, 0, 0)).format('LT'); - - const dateString = `${evt.target.date.value} ${time}`; - const newDate = moment(dateString, 'L LT', true); - if (newDate.isValid()) { - this._storeDate(newDate.toDate()); - Popup.close(); - } - else { - this.error.set('invalid-date'); - evt.target.date.focus(); - } - }, - 'click .js-delete-date'(evt) { - evt.preventDefault(); - this._deleteDate(); - Popup.close(); - }, - }]; - }, -}); - Template.dateBadge.helpers({ canModifyCard() { return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); @@ -93,7 +6,7 @@ Template.dateBadge.helpers({ }); // editCardStartDatePopup -(class extends EditCardDate { +(class extends DatePicker { onCreated() { super.onCreated(); this.data().startAt && this.date.set(moment(this.data().startAt)); @@ -109,7 +22,7 @@ Template.dateBadge.helpers({ }).register('editCardStartDatePopup'); // editCardDueDatePopup -(class extends EditCardDate { +(class extends DatePicker { onCreated() { super.onCreated(); this.data().dueAt && this.date.set(moment(this.data().dueAt)); diff --git a/client/components/cards/cardDate.styl b/client/components/cards/cardDate.styl index 1631baa5..87a3ed25 100644 --- a/client/components/cards/cardDate.styl +++ b/client/components/cards/cardDate.styl @@ -1,22 +1,3 @@ -.edit-card-date - .fields - .left - width: 56% - .right - width: 38% - .datepicker - width: 100% - table - width: 100% - border: none - border-spacing: 0 - border-collapse: collapse - thead - background: none - td, th - box-sizing: border-box - - .card-date display: block border-radius: 4px -- cgit v1.2.3-1-g7c22