summaryrefslogtreecommitdiffstats
path: root/client/components/cards
diff options
context:
space:
mode:
Diffstat (limited to 'client/components/cards')
-rw-r--r--client/components/cards/cardCustomFields.jade76
-rw-r--r--client/components/cards/cardCustomFields.js179
-rw-r--r--client/components/cards/cardDate.jade16
-rw-r--r--client/components/cards/cardDate.js4
-rw-r--r--client/components/cards/cardDate.styl19
-rw-r--r--client/components/cards/cardDetails.jade17
-rw-r--r--client/components/cards/cardDetails.js1
-rw-r--r--client/components/cards/cardDetails.styl8
8 files changed, 281 insertions, 39 deletions
diff --git a/client/components/cards/cardCustomFields.jade b/client/components/cards/cardCustomFields.jade
new file mode 100644
index 00000000..65081e3b
--- /dev/null
+++ b/client/components/cards/cardCustomFields.jade
@@ -0,0 +1,76 @@
+template(name="cardCustomFieldsPopup")
+ ul.pop-over-list
+ each board.customFields
+ li.item(class="")
+ a.name.js-select-field(href="#")
+ span.full-name
+ = name
+ if hasCustomField
+ i.fa.fa-check
+ hr
+ a.quiet-button.full.js-settings
+ i.fa.fa-cog
+ span {{_ 'settings'}}
+
+template(name="cardCustomField")
+ +Template.dynamic(template=getTemplate)
+
+template(name="cardCustomField-text")
+ if canModifyCard
+ +inlinedForm(classNames="js-card-customfield-text")
+ +editor(autofocus=true)
+ = 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
+ +viewer
+ = value
+ 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")
+ select.inline
+ each items
+ if($eq data.value this._id)
+ option(value=_id selected="selected") {{name}}
+ else
+ option(value=_id) {{name}}
+ .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
+ +viewer
+ = selectedItem
+ else
+ | {{_ 'edit'}} \ No newline at end of file
diff --git a/client/components/cards/cardCustomFields.js b/client/components/cards/cardCustomFields.js
new file mode 100644
index 00000000..e014de4a
--- /dev/null
+++ b/client/components/cards/cardCustomFields.js
@@ -0,0 +1,179 @@
+Template.cardCustomFieldsPopup.helpers({
+ hasCustomField() {
+ const card = Cards.findOne(Session.get('currentCard'));
+ const customFieldId = this._id;
+ return card.customFieldIndex(customFieldId) > -1;
+ },
+});
+
+Template.cardCustomFieldsPopup.events({
+ 'click .js-select-field'(evt) {
+ const card = Cards.findOne(Session.get('currentCard'));
+ const customFieldId = this._id;
+ card.toggleCustomField(customFieldId);
+ evt.preventDefault();
+ },
+ 'click .js-settings'(evt) {
+ EscapeActions.executeUpTo('detailsPane');
+ Sidebar.setView('customFields');
+ evt.preventDefault();
+ }
+});
+
+// cardCustomField
+const CardCustomField = BlazeComponent.extendComponent({
+
+ getTemplate() {
+ return 'cardCustomField-' + this.data().definition.type;
+ },
+
+ onCreated() {
+ const self = this;
+ self.card = Cards.findOne(Session.get('currentCard'));
+ self.customFieldId = this.data()._id;
+ },
+
+ canModifyCard() {
+ return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+ },
+});
+CardCustomField.register('cardCustomField');
+
+// cardCustomField-text
+(class extends CardCustomField {
+
+ onCreated() {
+ super.onCreated();
+ }
+
+ events() {
+ return [{
+ 'submit .js-card-customfield-text'(evt) {
+ evt.preventDefault();
+ const value = this.currentComponent().getValue();
+ 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({
+ _id: "",
+ name: TAPi18n.__('custom-field-dropdown-none')
+ });
+ }
+
+ selectedItem() {
+ const selected = this._items.find((item) => {
+ return item._id == this.data().value;
+ });
+ return (selected) ? selected.name : TAPi18n.__('custom-field-dropdown-unknown');
+ }
+
+ events() {
+ return [{
+ 'submit .js-card-customfield-dropdown'(evt) {
+ evt.preventDefault();
+ const value = this.find('select').value;
+ this.card.setCustomField(this.customFieldId, value);
+ },
+ }];
+ }
+
+}).register('cardCustomField-dropdown'); \ No newline at end of file
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 7c0ad6ab..f33e8c19 100644
--- a/client/components/cards/cardDate.js
+++ b/client/components/cards/cardDate.js
@@ -110,7 +110,7 @@ Template.dateBadge.helpers({
// editCardStartDatePopup
-(class extends EditCardDate {
+(class extends DatePicker {
onCreated() {
super.onCreated();
this.data().startAt && this.date.set(moment(this.data().startAt));
@@ -133,7 +133,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 1ad3adb3..9775e82b 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
diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade
index 047d7518..b888210b 100644
--- a/client/components/cards/cardDetails.jade
+++ b/client/components/cards/cardDetails.jade
@@ -65,6 +65,22 @@ template(name="cardDetails")
a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}")
i.fa.fa-plus
+ if startAt
+ .card-details-item.card-details-item-start
+ h3.card-details-item-title {{_ 'card-start'}}
+ +cardStartDate
+
+ if dueAt
+ .card-details-item.card-details-item-due
+ h3.card-details-item-title {{_ 'card-due'}}
+ +cardDueDate
+
+ each customFieldsWD
+ .card-details-item.card-details-item-customfield
+ h3.card-details-item-title
+ = definition.name
+ +cardCustomField
+
.card-details-items
if spentTime
.card-details-item.card-details-item-spent
@@ -144,6 +160,7 @@ template(name="cardDetailsActionsPopup")
li: a.js-labels {{_ 'card-edit-labels'}}
li: a.js-attachments {{_ 'card-edit-attachments'}}
li: a.js-received-date {{_ 'editCardReceivedDatePopup-title'}}
+ li: a.js-custom-fields {{_ 'card-edit-custom-fields'}}
li: a.js-start-date {{_ 'editCardStartDatePopup-title'}}
li: a.js-due-date {{_ 'editCardDueDatePopup-title'}}
li: a.js-end-date {{_ 'editCardEndDatePopup-title'}}
diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js
index cdd027e6..26549fda 100644
--- a/client/components/cards/cardDetails.js
+++ b/client/components/cards/cardDetails.js
@@ -216,6 +216,7 @@ Template.cardDetailsActionsPopup.events({
'click .js-labels': Popup.open('cardLabels'),
'click .js-attachments': Popup.open('cardAttachments'),
'click .js-received-date': Popup.open('editCardReceivedDate'),
+ 'click .js-custom-fields': Popup.open('cardCustomFields'),
'click .js-start-date': Popup.open('editCardStartDate'),
'click .js-due-date': Popup.open('editCardDueDate'),
'click .js-end-date': Popup.open('editCardEndDate'),
diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl
index e5739a93..e18c07a1 100644
--- a/client/components/cards/cardDetails.styl
+++ b/client/components/cards/cardDetails.styl
@@ -69,10 +69,11 @@
.card-details-items
display: flex
- margin: 15px 0
+ flex-wrap: wrap
+ margin: 0 0 15px
.card-details-item
- margin-right: 0.5em
+ margin: 15px 0.5em 0 0
&:last-child
margin-right: 0
&.card-details-item-labels,
@@ -83,6 +84,9 @@
&.card-details-item-end
width: 50%
flex-shrink: 1
+ &.card-details-item-customfield
+ max-width: 50%
+ flex-grow: 1
.card-details-item-title
font-size: 16px
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-28 23:34:58 +0000