From 3dc70b3ea4d49bccb10d4f2b3e317c794da91e37 Mon Sep 17 00:00:00 2001 From: Xavier Priour Date: Fri, 13 Nov 2015 12:35:41 +0100 Subject: Import members: UI flow ok --- .meteor/release | 2 +- .meteor/versions | 65 +++++----- client/components/import/import.jade | 45 ++++++- client/components/import/import.js | 212 ++++++++++++++++++++++++++------- client/components/import/import.styl | 13 ++ client/components/sidebar/sidebar.jade | 2 +- i18n/en.i18n.json | 1 + models/users.js | 4 +- 8 files changed, 257 insertions(+), 87 deletions(-) create mode 100644 client/components/import/import.styl diff --git a/.meteor/release b/.meteor/release index 5684262a..1090f581 100644 --- a/.meteor/release +++ b/.meteor/release @@ -1 +1 @@ -METEOR@1.2.0.2 +METEOR@1.2.2-cdn-url diff --git a/.meteor/versions b/.meteor/versions index 840f09f9..44942295 100644 --- a/.meteor/versions +++ b/.meteor/versions @@ -1,19 +1,19 @@ -3stack:presence@1.0.3 -accounts-base@1.2.1 -accounts-password@1.1.3 +3stack:presence@1.0.4 +accounts-base@1.2.2 +accounts-password@1.1.4 aldeed:collection2@2.5.0 aldeed:simple-schema@1.3.3 alethes:pages@1.8.4 arillo:flow-router-helpers@0.4.5 audit-argument-checks@1.0.4 -autoupdate@1.2.3 +autoupdate@1.2.4 babel-compiler@5.8.24_1 babel-runtime@0.1.4 base64@1.0.4 binary-heap@1.0.4 blaze@2.1.3 blaze-tools@1.0.4 -boilerplate-generator@1.0.4 +boilerplate-generator@1.0.5-cdn-url caching-compiler@1.0.0 caching-html-compiler@1.0.2 callback-hook@1.0.4 @@ -34,22 +34,22 @@ cfs:storage-adapter@0.2.3 cfs:tempstore@0.1.5 cfs:upload-http@0.0.20 cfs:worker@0.1.4 -check@1.0.6 -coffeescript@1.0.10 -cosmos:browserify@0.5.1 -dburles:collection-helpers@1.0.3 +check@1.1.0 +coffeescript@1.0.11 +cosmos:browserify@0.8.3 +dburles:collection-helpers@1.0.4 ddp@1.2.2 ddp-client@1.2.1 -ddp-common@1.2.1 +ddp-common@1.2.2 ddp-rate-limiter@1.0.0 -ddp-server@1.2.1 +ddp-server@1.2.2 deps@1.0.9 diff-sequence@1.0.1 -ecmascript@0.1.5 -ecmascript-collections@0.1.6 +ecmascript@0.1.6 +ecmascript-runtime@0.2.6 ejson@1.0.7 -email@1.0.7 -es5-shim@4.1.13 +email@1.0.8 +es5-shim@4.1.14 fastclick@1.0.7 fortawesome:fontawesome@4.4.0 geojson-utils@1.0.4 @@ -58,20 +58,19 @@ html-tools@1.0.5 htmljs@1.0.5 http@1.1.1 id-map@1.0.4 -idmontie:migrations@1.0.0 +idmontie:migrations@1.0.1 jquery@1.11.4 -jsx@0.1.6 kadira:blaze-layout@2.2.0 -kadira:dochead@1.1.0 -kadira:flow-router@2.7.0 -kenton:accounts-sandstorm@0.1.6 +kadira:dochead@1.3.2 +kadira:flow-router@2.9.0 +kenton:accounts-sandstorm@0.1.8 launch-screen@1.0.4 livedata@1.0.15 localstorage@1.0.5 logging@1.0.8 matb33:collection-hooks@0.8.1 matteodem:easy-search@1.6.4 -meteor@1.1.9 +meteor@1.1.10 meteor-base@1.0.1 meteor-platform@1.2.3 meteorhacks:aggregate@1.3.0 @@ -82,14 +81,14 @@ meteorspark:util@0.2.0 minifiers@1.1.7 minimongo@1.0.10 mobile-status-bar@1.0.6 -mongo@1.1.2 +mongo@1.1.3 mongo-id@1.0.1 mongo-livedata@1.0.9 mousetrap:mousetrap@1.4.6_1 mquandalle:autofocus@1.0.0 mquandalle:collection-mutations@0.1.0 -mquandalle:jade@0.4.4 -mquandalle:jade-compiler@0.4.4 +mquandalle:jade@0.4.5 +mquandalle:jade-compiler@0.4.5 mquandalle:jquery-textcomplete@0.8.0_1 mquandalle:jquery-ui-drag-drop-sort@0.1.0 mquandalle:moment@1.0.0 @@ -102,17 +101,17 @@ observe-sequence@1.0.7 ongoworks:speakingurl@1.1.0 ordered-dict@1.0.4 peerlibrary:assert@0.2.5 -peerlibrary:base-component@0.13.0 -peerlibrary:blaze-components@0.14.0 -peerlibrary:computed-field@0.3.0 +peerlibrary:base-component@0.14.0 +peerlibrary:blaze-components@0.15.1 +peerlibrary:computed-field@0.3.1 peerlibrary:reactive-field@0.1.0 perak:markdown@1.0.5 -promise@0.5.0 +promise@0.5.1 raix:eventemitter@0.1.3 raix:handlebar-helpers@0.2.5 -random@1.0.4 +random@1.0.5 rate-limit@1.0.0 -reactive-dict@1.1.2 +reactive-dict@1.1.3 reactive-var@1.0.6 reload@1.1.4 retry@1.0.4 @@ -126,10 +125,10 @@ softwarerero:accounts-t9n@1.1.4 spacebars@1.0.7 spacebars-compiler@1.0.7 srp@1.0.4 -standard-minifiers@1.0.1 +standard-minifiers@1.0.2 tap:i18n@1.7.0 templates:tabs@2.2.0 -templating@1.1.4 +templating@1.1.5 templating-tools@1.0.0 tracker@1.0.9 ui@1.0.8 @@ -139,6 +138,6 @@ useraccounts:core@1.12.4 useraccounts:flow-routing@1.12.4 useraccounts:unstyled@1.12.4 verron:autosize@3.0.8 -webapp@1.2.2 +webapp@1.2.4-cdn-url webapp-hashing@1.0.5 zimme:active-route@2.3.2 diff --git a/client/components/import/import.jade b/client/components/import/import.jade index 799834fa..07e1116b 100644 --- a/client/components/import/import.jade +++ b/client/components/import/import.jade @@ -7,9 +7,42 @@ template(name="importPopup") input.primary.wide(type="submit" value="{{_ 'import'}}") template(name="mapMembersPopup") - p {{_ 'import-members-map'}} - ul - each members - li.item {{ fullName }} > world - form - input.primary.wide(type="submit" value="{{_ 'import'}}") + .map-members + p {{_ 'import-members-map'}} + .mapping-list + each members + .mapping + a.source + div.full-name + = fullName + div.username + | ({{username}}) + .wekan + if wekan + +userAvatar(userId=wekan._id) + else + a.member.add-member.js-add-members + i.fa.fa-plus + form + input.primary.wide(type="submit" value="{{_ 'import'}}") + + template(name="addMemberPopup") + +template(name="mapMembersAddPopup") + .select-member + p Hello world + .js-map-member + +esInput(index="users") + ul.pop-over-list + +esEach(index="users") + li.item.js-member-item + a.name.js-select-member(title="{{profile.name}} ({{username}})" data-id="{{_id}}") + +userAvatar(userId=_id esSearch=true) + span.full-name + = profile.name + | ({{username}}) + +ifEsIsSearching(index='users') + +spinner + +ifEsHasNoResults(index="users") + .manage-member-section + p.quiet {{_ 'no-results'}} diff --git a/client/components/import/import.js b/client/components/import/import.js index f46f15bc..3682afdb 100644 --- a/client/components/import/import.js +++ b/client/components/import/import.js @@ -11,60 +11,76 @@ const ImportPopup = BlazeComponent.extendComponent({ return 'importPopup'; }, - events() { - return [{ - submit(evt) { - evt.preventDefault(); - const dataJson = $(evt.currentTarget).find('.js-import-json').val(); - let dataObject; - try { - dataObject = JSON.parse(dataJson); - this.setError(''); - } catch (e) { - this.setError('error-json-malformed'); - return; + onCreated() { + this.error = new ReactiveVar(''); + this.dataToImport = ''; + }, + + onFinish() { + Popup.close(); + }, + + onSubmit(evt){ + evt.preventDefault(); + const dataJson = $(evt.currentTarget).find('.js-import-json').val(); + let dataObject; + try { + dataObject = JSON.parse(dataJson); + this.setError(''); + } catch (e) { + this.setError('error-json-malformed'); + return; + } + // if there are members listed in the import, we need to map them + if(dataObject.members.length > 0) { + // we will work on the list itself (an ordered array of POJO) + // when a mapping is done, we add a 'wekan' field to the POJO representing the imported member + const membersToMap = dataObject.members; + // todo save initial import object - to save later, on mapping submission + // this.data().toImport = dataObject; + + // auto-map based on username + const wekanMembers = Users; + membersToMap.forEach((importedMember) => { + const wekanUser = Users.findOne({username: importedMember.username}) + if(wekanUser) { + importedMember.wekan = wekanUser; } - if(dataObject.members.length > 0) { - this.data().toImport = dataObject; - members.forEach( - // todo if there is a Wekan user with same name, add it as a field 'wekanUser' - ); - this.data().members = dataObject.members; - // we bind to preserve data context - Popup.open('mapMembers').bind(this)(evt); - } else { - Meteor.call(this.getMethodName(), dataObject, this.getAdditionalData(), - (error, response) => { - if (error) { - this.setError(error.error); - } else { - Filter.addException(response); - this.onFinish(response); - } - } - ); + }); + // store members data and mapping in Session + // (we go deep and 2-way, so storing in data context is not a viable option) + Session.set('import.membersToMap', membersToMap); + Popup.open('mapMembers')(evt); + } else { + Meteor.call(this.getMethodName(), dataObject, this.getAdditionalData(), + (error, response) => { + if (error) { + this.setError(error.error); + } else { + // ensure will display what we just imported + Filter.addException(response); + this.onFinish(response); + } } - }, - }]; + ); + } }, - onCreated() { - this.error = new ReactiveVar(''); - this.dataToImport = ''; + events() { + return [{ + submit: this.onSubmit, + }]; }, setError(error) { this.error.set(error); }, - onFinish() { - Popup.close(); - }, }); ImportPopup.extendComponent({ getAdditionalData() { - const listId = this.data()._id; + const listId = this.currentData()._id; const selector = `#js-list-${this.currentData()._id} .js-minicard:first`; const firstCardDom = $(selector).get(0); const sortIndex = Utils.calculateIndex(null, firstCardDom).base; @@ -100,13 +116,119 @@ ImportPopup.extendComponent({ }, }).register('boardImportBoardPopup'); -BlazeComponent.extendComponent({ +const ImportMapMembers = BlazeComponent.extendComponent({ + members() { + return Session.get('import.membersToMap'); + }, + _refreshMembers(listOfMembers) { + Session.set('import.membersToMap', listOfMembers); + }, + /** + * Will look into the list of members to import for the specified memberId, + * then set its property to the supplied value. + * If unset is true, it will remove the property from the rest of the list as well. + * + * use: + * - memberId = null to use selected member + * - value = null to unset a property + * - unset = true to ensure property is only set on 1 member at a time + */ + _setPropertyForMember(property, value, memberId, unset = false) { + const listOfMembers = this.members(); + let finder = null; + if(memberId) { + finder = (member) => member.id === memberId; + } else { + finder = (member) => member.selected; + } + listOfMembers.forEach((member) => { + if(finder(member)) { + if(value !== null) { + member[property] = true; + } else { + delete member[property]; + } + if(!unset) { + // we shortcut if we don't care about unsetting the others + return false; + } + } else { + if(unset) { + delete member[property]; + } + } + return true; + }); + // Session.get gives us a copy, we have to set it back so it sticks + this._refreshMembers(listOfMembers); + }, + setSelectedMember(memberId) { + return this._setPropertyForMember('selected', true, memberId, true); + }, + /** + * returns the member with specified id, + * or the selected member if memberId is not specified + */ + getMember(memberId = null) { + const allMembers = Session.get('import.membersToMap'); + let finder = null; + if(memberId) { + finder = (user) => user.id === memberId; + } else { + finder = (user) => user.selected; + } + return allMembers.find(finder); + }, + mapSelectedMember(wekan) { + return this._setPropertyForMember('wekan', wekan, null); + }, + unmapMember(memberId){ + return this._setPropertyForMember('wekan', null, memberId); + }, +}); + +ImportMapMembers.extendComponent({ + onSelectMember(evt) { + const memberToMap = this.currentData(); + this.setSelectedMember(memberToMap.id); + console.log(`selected member#${memberToMap.id}`); + Popup.open('mapMembersAdd')(evt); + }, + onRemove(evt){ + const userId = this.currentData()._id; + console.log(`confirm and then call unmapMember ${userId}`); + }, + onSubmit(evt) { + console.log("Mapping:"); + console.log(this.members()); + }, events() { return [{ - 'submit': (evt) => { - evt.preventDefault(); - console.log(this.data()); - }, + 'submit': this.onSubmit, + 'click .js-add-members': this.onSelectMember, + 'click .js-member': this.onRemove, }]; }, }).register('mapMembersPopup'); + +ImportMapMembers.extendComponent({ + //template() { + // return "mapMembersAddPopup"; + //}, + onSelectUser(){ + const wekanUser = this.currentData(); + console.log(`clicked on ${wekanUser._id}`); + console.log(wekanUser); + //this.mapSelectedMember(this.currentData()); + }, + events() { + return [{ + //'click .js-select-member': this.onSelectUser(), + }]; + }, + onRendered() { + console.log('rendered'); + // todo XXX why do I not focus?? + $('.js-map-member input').focus(); + }, +}).register('mapMembersAddPopup'); diff --git a/client/components/import/import.styl b/client/components/import/import.styl new file mode 100644 index 00000000..4934cbcc --- /dev/null +++ b/client/components/import/import.styl @@ -0,0 +1,13 @@ +.map-members + .mapping + margin-bottom: 10px + margin-top: 10px + border-bottom: solid + .source + display: inline-block + width: 80% + .wekan + display: inline-block + width: 35px + .member + float: none diff --git a/client/components/sidebar/sidebar.jade b/client/components/sidebar/sidebar.jade index 91047056..f98ea4ee 100644 --- a/client/components/sidebar/sidebar.jade +++ b/client/components/sidebar/sidebar.jade @@ -89,7 +89,7 @@ template(name="addMemberPopup") a.name.js-select-member(title="{{profile.name}} ({{username}})") +userAvatar(userId=_id esSearch=true) span.full-name - = profile.name + = profile.fullname | ({{username}}) if isBoardMember .quiet ({{_ 'joined'}}) diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index eab6ab5a..14cd9f24 100644 --- a/i18n/en.i18n.json +++ b/i18n/en.i18n.json @@ -166,6 +166,7 @@ "log-out": "Log Out", "loginPopup-title": "Log In", "mapMembersPopup-title": "Map members", + "mapMembersAddPopup-title": "Select Wekan member", "memberMenuPopup-title": "Member Settings", "members": "Members", "menu": "Menu", diff --git a/models/users.js b/models/users.js index b35104ec..60cab56d 100644 --- a/models/users.js +++ b/models/users.js @@ -2,12 +2,14 @@ Users = Meteor.users; // Search a user in the complete server database by its name or username. This // is used for instance to add a new user to a board. -const searchInFields = ['username', 'profile.name']; +const searchInFields = ['username', 'profile.fullname']; Users.initEasySearch(searchInFields, { use: 'mongo-db', returnFields: [...searchInFields, 'profile.avatarUrl'], }); + + Users.helpers({ boards() { return Boards.find({ userId: this._id }); -- cgit v1.2.3-1-g7c22