From ade3c02122d262c72bd7c4fd1cbcab8e136184ba Mon Sep 17 00:00:00 2001 From: Pouyan Savoli Date: Fri, 25 Aug 2017 02:59:20 +0200 Subject: Create custom fields creation UI added to Board Menu, Model in progress --- client/components/sidebar/sidebarCustomFields.js | 55 ++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 client/components/sidebar/sidebarCustomFields.js (limited to 'client/components/sidebar/sidebarCustomFields.js') diff --git a/client/components/sidebar/sidebarCustomFields.js b/client/components/sidebar/sidebarCustomFields.js new file mode 100644 index 00000000..da03f484 --- /dev/null +++ b/client/components/sidebar/sidebarCustomFields.js @@ -0,0 +1,55 @@ +BlazeComponent.extendComponent({ + + customFields() { + return CustomFields.find({ + boardId: Session.get('currentBoard'), + }); + }, + + events() { + return [{ + 'click .js-open-create-custom-field': Popup.open('createCustomField'), + 'click .js-edit-custom-field'() { + // todo + }, + 'click .js-delete-custom-field': Popup.afterConfirm('customFieldDelete', function() { + const customFieldId = this._id; + CustomFields.remove(customFieldId); + Popup.close(); + }), + }]; + }, + +}).register('customFieldsSidebar'); + +Template.createCustomFieldPopup.helpers({ + +}); + +Template.createCustomFieldPopup.events({ + 'click .js-field-show-on-card'(event) { + let $target = $(event.target); + if(!$target.hasClass('js-field-show-on-card')){ + $target = $target.parent(); + } + $target.find('.materialCheckBox').toggleClass('is-checked'); + $target.toggleClass('is-checked'); + }, + 'submit'(evt, tpl) { + evt.preventDefault(); + + const name = tpl.find('.js-field-name').value.trim(); + const type = tpl.find('.js-field-type').value.trim(); + const showOnCard = tpl.find('.js-field-show-on-card.is-checked') != null; + //console.log("Create",name,type,showOnCard); + + CustomFields.insert({ + boardId: Session.get('currentBoard'), + name: name, + type: type, + showOnCard: showOnCard + }); + + Popup.back(); + }, +}); \ No newline at end of file -- cgit v1.2.3-1-g7c22 From afd87e3caa1fedbe8fe5dbaefa485fee1ed85c71 Mon Sep 17 00:00:00 2001 From: Pouyan Savoli Date: Sun, 27 Aug 2017 22:31:24 +0200 Subject: many custom fields model and UI enhancements --- client/components/sidebar/sidebarCustomFields.js | 36 ++++++++++++++++-------- 1 file changed, 25 insertions(+), 11 deletions(-) (limited to 'client/components/sidebar/sidebarCustomFields.js') diff --git a/client/components/sidebar/sidebarCustomFields.js b/client/components/sidebar/sidebarCustomFields.js index da03f484..6ddd466e 100644 --- a/client/components/sidebar/sidebarCustomFields.js +++ b/client/components/sidebar/sidebarCustomFields.js @@ -9,21 +9,22 @@ BlazeComponent.extendComponent({ events() { return [{ 'click .js-open-create-custom-field': Popup.open('createCustomField'), - 'click .js-edit-custom-field'() { - // todo - }, - 'click .js-delete-custom-field': Popup.afterConfirm('customFieldDelete', function() { - const customFieldId = this._id; - CustomFields.remove(customFieldId); - Popup.close(); - }), + 'click .js-edit-custom-field': Popup.open('editCustomField'), }]; }, }).register('customFieldsSidebar'); Template.createCustomFieldPopup.helpers({ - + types() { + var currentType = this.type; + return ['text', 'number', 'checkbox', 'date', 'dropdown']. + map(type => {return { + type: type, + name: TAPi18n.__('custom-field-' + type), + selected: type == currentType, + }}); + }, }); Template.createCustomFieldPopup.events({ @@ -41,7 +42,7 @@ Template.createCustomFieldPopup.events({ const name = tpl.find('.js-field-name').value.trim(); const type = tpl.find('.js-field-type').value.trim(); const showOnCard = tpl.find('.js-field-show-on-card.is-checked') != null; - //console.log("Create",name,type,showOnCard); + //console.log('Create',name,type,showOnCard); CustomFields.insert({ boardId: Session.get('currentBoard'), @@ -52,4 +53,17 @@ Template.createCustomFieldPopup.events({ Popup.back(); }, -}); \ No newline at end of file + 'click .js-delete-custom-field': Popup.afterConfirm('deleteCustomField', function() { + const customFieldId = this._id; + CustomFields.remove(customFieldId); + Popup.close(); + }), +}); + +/*Template.deleteCustomFieldPopup.events({ + 'submit'(evt) { + const customFieldId = this._id; + CustomFields.remove(customFieldId); + Popup.close(); + } +});*/ \ No newline at end of file -- cgit v1.2.3-1-g7c22 From 3753337d60e17e5e72ec071aa4a1b28e36297d15 Mon Sep 17 00:00:00 2001 From: Pouyan Savoli Date: Mon, 18 Sep 2017 00:46:17 +0200 Subject: dropdown items --- client/components/sidebar/sidebarCustomFields.js | 129 +++++++++++++++++------ 1 file changed, 95 insertions(+), 34 deletions(-) (limited to 'client/components/sidebar/sidebarCustomFields.js') diff --git a/client/components/sidebar/sidebarCustomFields.js b/client/components/sidebar/sidebarCustomFields.js index 6ddd466e..139b8a42 100644 --- a/client/components/sidebar/sidebarCustomFields.js +++ b/client/components/sidebar/sidebarCustomFields.js @@ -15,50 +15,111 @@ BlazeComponent.extendComponent({ }).register('customFieldsSidebar'); -Template.createCustomFieldPopup.helpers({ +const CreateCustomFieldPopup = BlazeComponent.extendComponent({ + + _types: ['text', 'number', 'checkbox', 'date', 'dropdown'], + + onCreated() { + this.type = new ReactiveVar((this.data().type) ? this.data().type : this._types[0]); + this.dropdownItems = new ReactiveVar((this.data().settings && this.data().settings.dropdownItems) ? this.data().settings.dropdownItems : []); + }, + types() { - var currentType = this.type; - return ['text', 'number', 'checkbox', 'date', 'dropdown']. - map(type => {return { - type: type, - name: TAPi18n.__('custom-field-' + type), - selected: type == currentType, - }}); + const currentType = this.data().type; + return this._types. + map(type => {return { + value: type, + name: TAPi18n.__('custom-field-' + type), + selected: type == currentType, + }}); + }, + + isTypeNotSelected(type) { + return this.type.get() !== type; + }, + + getDropdownItems() { + var items = this.dropdownItems.get(); + Array.from(this.findAll('.js-field-settings-dropdown input')).forEach((el, index) => { + //console.log('each item!', index, el.value); + if (!items[index]) items[index] = { + _id: Random.id(6), + }; + items[index].name = el.value.trim(); + }); + return items; }, -}); -Template.createCustomFieldPopup.events({ - 'click .js-field-show-on-card'(event) { - let $target = $(event.target); - if(!$target.hasClass('js-field-show-on-card')){ - $target = $target.parent(); + getSettings() { + let settings = {}; + switch (this.type.get()) { + case 'dropdown': + let dropdownItems = this.getDropdownItems().filter(item => !!item.name.trim()); + settings.dropdownItems = dropdownItems; + break; } - $target.find('.materialCheckBox').toggleClass('is-checked'); - $target.toggleClass('is-checked'); + return settings; }, - 'submit'(evt, tpl) { - evt.preventDefault(); - const name = tpl.find('.js-field-name').value.trim(); - const type = tpl.find('.js-field-type').value.trim(); - const showOnCard = tpl.find('.js-field-show-on-card.is-checked') != null; - //console.log('Create',name,type,showOnCard); + events() { + return [{ + 'change .js-field-type'(evt) { + const value = evt.target.value; + this.type.set(value); + }, + 'keydown .js-dropdown-item.last'(evt) { + if (evt.target.value.trim() && evt.keyCode === 13) { + let items = this.getDropdownItems(); + this.dropdownItems.set(items); + evt.target.value = ''; + } + }, + 'click .js-field-show-on-card'(evt) { + let $target = $(evt.target); + if(!$target.hasClass('js-field-show-on-card')){ + $target = $target.parent(); + } + $target.find('.materialCheckBox').toggleClass('is-checked'); + $target.toggleClass('is-checked'); + }, + 'click .primary'(evt) { + evt.preventDefault(); + + const data = { + boardId: Session.get('currentBoard'), + name: this.find('.js-field-name').value.trim(), + type: this.type.get(), + settings: this.getSettings(), + showOnCard: this.find('.js-field-show-on-card.is-checked') != null + } - CustomFields.insert({ - boardId: Session.get('currentBoard'), - name: name, - type: type, - showOnCard: showOnCard - }); + // insert or update + if (!this.data()._id) { + CustomFields.insert(data); + } else { + CustomFields.update(this.data()._id, {$set: data}); + } - Popup.back(); + Popup.back(); + }, + 'click .js-delete-custom-field': Popup.afterConfirm('deleteCustomField', function() { + const customFieldId = this._id; + CustomFields.remove(customFieldId); + Popup.close(); + }), + }]; }, - 'click .js-delete-custom-field': Popup.afterConfirm('deleteCustomField', function() { - const customFieldId = this._id; - CustomFields.remove(customFieldId); - Popup.close(); - }), + }); +CreateCustomFieldPopup.register('createCustomFieldPopup'); + +(class extends CreateCustomFieldPopup { + + template() { + return 'createCustomFieldPopup'; + } + +}).register('editCustomFieldPopup'); /*Template.deleteCustomFieldPopup.events({ 'submit'(evt) { -- cgit v1.2.3-1-g7c22 From 98df01060d237b648878a1a869fff2f7ab24775f Mon Sep 17 00:00:00 2001 From: IgnatzHome Date: Thu, 17 May 2018 21:17:40 +0200 Subject: removing checkbox types part 2 --- client/components/sidebar/sidebarCustomFields.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'client/components/sidebar/sidebarCustomFields.js') diff --git a/client/components/sidebar/sidebarCustomFields.js b/client/components/sidebar/sidebarCustomFields.js index 139b8a42..cfa21beb 100644 --- a/client/components/sidebar/sidebarCustomFields.js +++ b/client/components/sidebar/sidebarCustomFields.js @@ -17,7 +17,7 @@ BlazeComponent.extendComponent({ const CreateCustomFieldPopup = BlazeComponent.extendComponent({ - _types: ['text', 'number', 'checkbox', 'date', 'dropdown'], + _types: ['text', 'number', 'date', 'dropdown'], onCreated() { this.type = new ReactiveVar((this.data().type) ? this.data().type : this._types[0]); @@ -127,4 +127,4 @@ CreateCustomFieldPopup.register('createCustomFieldPopup'); CustomFields.remove(customFieldId); Popup.close(); } -});*/ \ No newline at end of file +});*/ -- cgit v1.2.3-1-g7c22 From d6cfac0122dc5e6819c82f73c728488e0600cb70 Mon Sep 17 00:00:00 2001 From: Ignatz Date: Fri, 18 May 2018 10:24:51 +0200 Subject: linter corrections --- client/components/sidebar/sidebarCustomFields.js | 27 ++++++++++++------------ 1 file changed, 14 insertions(+), 13 deletions(-) (limited to 'client/components/sidebar/sidebarCustomFields.js') diff --git a/client/components/sidebar/sidebarCustomFields.js b/client/components/sidebar/sidebarCustomFields.js index cfa21beb..9fed163c 100644 --- a/client/components/sidebar/sidebarCustomFields.js +++ b/client/components/sidebar/sidebarCustomFields.js @@ -27,11 +27,11 @@ const CreateCustomFieldPopup = BlazeComponent.extendComponent({ types() { const currentType = this.data().type; return this._types. - map(type => {return { + map((type) => {return { value: type, - name: TAPi18n.__('custom-field-' + type), - selected: type == currentType, - }}); + name: TAPi18n.__('custom-field-${type}'), + selected: type === currentType, + };}); }, isTypeNotSelected(type) { @@ -39,7 +39,7 @@ const CreateCustomFieldPopup = BlazeComponent.extendComponent({ }, getDropdownItems() { - var items = this.dropdownItems.get(); + const items = this.dropdownItems.get(); Array.from(this.findAll('.js-field-settings-dropdown input')).forEach((el, index) => { //console.log('each item!', index, el.value); if (!items[index]) items[index] = { @@ -51,12 +51,13 @@ const CreateCustomFieldPopup = BlazeComponent.extendComponent({ }, getSettings() { - let settings = {}; + const settings = {}; switch (this.type.get()) { - case 'dropdown': - let dropdownItems = this.getDropdownItems().filter(item => !!item.name.trim()); - settings.dropdownItems = dropdownItems; - break; + case 'dropdown': { + const dropdownItems = this.getDropdownItems().filter((item) => !!item.name.trim()); + settings.dropdownItems = dropdownItems; + break; + } } return settings; }, @@ -69,7 +70,7 @@ const CreateCustomFieldPopup = BlazeComponent.extendComponent({ }, 'keydown .js-dropdown-item.last'(evt) { if (evt.target.value.trim() && evt.keyCode === 13) { - let items = this.getDropdownItems(); + const items = this.getDropdownItems(); this.dropdownItems.set(items); evt.target.value = ''; } @@ -90,8 +91,8 @@ const CreateCustomFieldPopup = BlazeComponent.extendComponent({ name: this.find('.js-field-name').value.trim(), type: this.type.get(), settings: this.getSettings(), - showOnCard: this.find('.js-field-show-on-card.is-checked') != null - } + showOnCard: this.find('.js-field-show-on-card.is-checked') !== null, + }; // insert or update if (!this.data()._id) { -- cgit v1.2.3-1-g7c22 From 838578657da4ed46be0e32091120c7554b07c102 Mon Sep 17 00:00:00 2001 From: Ignatz Date: Fri, 18 May 2018 10:43:43 +0200 Subject: template literals correction --- client/components/sidebar/sidebarCustomFields.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client/components/sidebar/sidebarCustomFields.js') diff --git a/client/components/sidebar/sidebarCustomFields.js b/client/components/sidebar/sidebarCustomFields.js index 9fed163c..d74a5919 100644 --- a/client/components/sidebar/sidebarCustomFields.js +++ b/client/components/sidebar/sidebarCustomFields.js @@ -29,7 +29,7 @@ const CreateCustomFieldPopup = BlazeComponent.extendComponent({ return this._types. map((type) => {return { value: type, - name: TAPi18n.__('custom-field-${type}'), + name: TAPi18n.__(`custom-field-${type}`), selected: type === currentType, };}); }, -- cgit v1.2.3-1-g7c22 From ef99e6a6b1cd8d55fdab9ff94e7bfc3d5c538b8f Mon Sep 17 00:00:00 2001 From: Ignatz Date: Fri, 18 May 2018 11:13:01 +0200 Subject: indend corrections --- client/components/sidebar/sidebarCustomFields.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'client/components/sidebar/sidebarCustomFields.js') diff --git a/client/components/sidebar/sidebarCustomFields.js b/client/components/sidebar/sidebarCustomFields.js index d74a5919..e56d744e 100644 --- a/client/components/sidebar/sidebarCustomFields.js +++ b/client/components/sidebar/sidebarCustomFields.js @@ -27,11 +27,11 @@ const CreateCustomFieldPopup = BlazeComponent.extendComponent({ types() { const currentType = this.data().type; return this._types. - map((type) => {return { - value: type, - name: TAPi18n.__(`custom-field-${type}`), - selected: type === currentType, - };}); + map((type) => {return { + value: type, + name: TAPi18n.__(`custom-field-${type}`), + selected: type === currentType, + };}); }, isTypeNotSelected(type) { -- cgit v1.2.3-1-g7c22