Import members: UI flow ok

This commit is contained in:
Xavier Priour 2015-11-13 12:35:41 +01:00
parent 658ef5ebe1
commit 3dc70b3ea4
8 changed files with 258 additions and 88 deletions

View file

@ -1 +1 @@
METEOR@1.2.0.2 METEOR@1.2.2-cdn-url

View file

@ -1,19 +1,19 @@
3stack:presence@1.0.3 3stack:presence@1.0.4
accounts-base@1.2.1 accounts-base@1.2.2
accounts-password@1.1.3 accounts-password@1.1.4
aldeed:collection2@2.5.0 aldeed:collection2@2.5.0
aldeed:simple-schema@1.3.3 aldeed:simple-schema@1.3.3
alethes:pages@1.8.4 alethes:pages@1.8.4
arillo:flow-router-helpers@0.4.5 arillo:flow-router-helpers@0.4.5
audit-argument-checks@1.0.4 audit-argument-checks@1.0.4
autoupdate@1.2.3 autoupdate@1.2.4
babel-compiler@5.8.24_1 babel-compiler@5.8.24_1
babel-runtime@0.1.4 babel-runtime@0.1.4
base64@1.0.4 base64@1.0.4
binary-heap@1.0.4 binary-heap@1.0.4
blaze@2.1.3 blaze@2.1.3
blaze-tools@1.0.4 blaze-tools@1.0.4
boilerplate-generator@1.0.4 boilerplate-generator@1.0.5-cdn-url
caching-compiler@1.0.0 caching-compiler@1.0.0
caching-html-compiler@1.0.2 caching-html-compiler@1.0.2
callback-hook@1.0.4 callback-hook@1.0.4
@ -34,22 +34,22 @@ cfs:storage-adapter@0.2.3
cfs:tempstore@0.1.5 cfs:tempstore@0.1.5
cfs:upload-http@0.0.20 cfs:upload-http@0.0.20
cfs:worker@0.1.4 cfs:worker@0.1.4
check@1.0.6 check@1.1.0
coffeescript@1.0.10 coffeescript@1.0.11
cosmos:browserify@0.5.1 cosmos:browserify@0.8.3
dburles:collection-helpers@1.0.3 dburles:collection-helpers@1.0.4
ddp@1.2.2 ddp@1.2.2
ddp-client@1.2.1 ddp-client@1.2.1
ddp-common@1.2.1 ddp-common@1.2.2
ddp-rate-limiter@1.0.0 ddp-rate-limiter@1.0.0
ddp-server@1.2.1 ddp-server@1.2.2
deps@1.0.9 deps@1.0.9
diff-sequence@1.0.1 diff-sequence@1.0.1
ecmascript@0.1.5 ecmascript@0.1.6
ecmascript-collections@0.1.6 ecmascript-runtime@0.2.6
ejson@1.0.7 ejson@1.0.7
email@1.0.7 email@1.0.8
es5-shim@4.1.13 es5-shim@4.1.14
fastclick@1.0.7 fastclick@1.0.7
fortawesome:fontawesome@4.4.0 fortawesome:fontawesome@4.4.0
geojson-utils@1.0.4 geojson-utils@1.0.4
@ -58,20 +58,19 @@ html-tools@1.0.5
htmljs@1.0.5 htmljs@1.0.5
http@1.1.1 http@1.1.1
id-map@1.0.4 id-map@1.0.4
idmontie:migrations@1.0.0 idmontie:migrations@1.0.1
jquery@1.11.4 jquery@1.11.4
jsx@0.1.6
kadira:blaze-layout@2.2.0 kadira:blaze-layout@2.2.0
kadira:dochead@1.1.0 kadira:dochead@1.3.2
kadira:flow-router@2.7.0 kadira:flow-router@2.9.0
kenton:accounts-sandstorm@0.1.6 kenton:accounts-sandstorm@0.1.8
launch-screen@1.0.4 launch-screen@1.0.4
livedata@1.0.15 livedata@1.0.15
localstorage@1.0.5 localstorage@1.0.5
logging@1.0.8 logging@1.0.8
matb33:collection-hooks@0.8.1 matb33:collection-hooks@0.8.1
matteodem:easy-search@1.6.4 matteodem:easy-search@1.6.4
meteor@1.1.9 meteor@1.1.10
meteor-base@1.0.1 meteor-base@1.0.1
meteor-platform@1.2.3 meteor-platform@1.2.3
meteorhacks:aggregate@1.3.0 meteorhacks:aggregate@1.3.0
@ -82,14 +81,14 @@ meteorspark:util@0.2.0
minifiers@1.1.7 minifiers@1.1.7
minimongo@1.0.10 minimongo@1.0.10
mobile-status-bar@1.0.6 mobile-status-bar@1.0.6
mongo@1.1.2 mongo@1.1.3
mongo-id@1.0.1 mongo-id@1.0.1
mongo-livedata@1.0.9 mongo-livedata@1.0.9
mousetrap:mousetrap@1.4.6_1 mousetrap:mousetrap@1.4.6_1
mquandalle:autofocus@1.0.0 mquandalle:autofocus@1.0.0
mquandalle:collection-mutations@0.1.0 mquandalle:collection-mutations@0.1.0
mquandalle:jade@0.4.4 mquandalle:jade@0.4.5
mquandalle:jade-compiler@0.4.4 mquandalle:jade-compiler@0.4.5
mquandalle:jquery-textcomplete@0.8.0_1 mquandalle:jquery-textcomplete@0.8.0_1
mquandalle:jquery-ui-drag-drop-sort@0.1.0 mquandalle:jquery-ui-drag-drop-sort@0.1.0
mquandalle:moment@1.0.0 mquandalle:moment@1.0.0
@ -102,17 +101,17 @@ observe-sequence@1.0.7
ongoworks:speakingurl@1.1.0 ongoworks:speakingurl@1.1.0
ordered-dict@1.0.4 ordered-dict@1.0.4
peerlibrary:assert@0.2.5 peerlibrary:assert@0.2.5
peerlibrary:base-component@0.13.0 peerlibrary:base-component@0.14.0
peerlibrary:blaze-components@0.14.0 peerlibrary:blaze-components@0.15.1
peerlibrary:computed-field@0.3.0 peerlibrary:computed-field@0.3.1
peerlibrary:reactive-field@0.1.0 peerlibrary:reactive-field@0.1.0
perak:markdown@1.0.5 perak:markdown@1.0.5
promise@0.5.0 promise@0.5.1
raix:eventemitter@0.1.3 raix:eventemitter@0.1.3
raix:handlebar-helpers@0.2.5 raix:handlebar-helpers@0.2.5
random@1.0.4 random@1.0.5
rate-limit@1.0.0 rate-limit@1.0.0
reactive-dict@1.1.2 reactive-dict@1.1.3
reactive-var@1.0.6 reactive-var@1.0.6
reload@1.1.4 reload@1.1.4
retry@1.0.4 retry@1.0.4
@ -126,10 +125,10 @@ softwarerero:accounts-t9n@1.1.4
spacebars@1.0.7 spacebars@1.0.7
spacebars-compiler@1.0.7 spacebars-compiler@1.0.7
srp@1.0.4 srp@1.0.4
standard-minifiers@1.0.1 standard-minifiers@1.0.2
tap:i18n@1.7.0 tap:i18n@1.7.0
templates:tabs@2.2.0 templates:tabs@2.2.0
templating@1.1.4 templating@1.1.5
templating-tools@1.0.0 templating-tools@1.0.0
tracker@1.0.9 tracker@1.0.9
ui@1.0.8 ui@1.0.8
@ -139,6 +138,6 @@ useraccounts:core@1.12.4
useraccounts:flow-routing@1.12.4 useraccounts:flow-routing@1.12.4
useraccounts:unstyled@1.12.4 useraccounts:unstyled@1.12.4
verron:autosize@3.0.8 verron:autosize@3.0.8
webapp@1.2.2 webapp@1.2.4-cdn-url
webapp-hashing@1.0.5 webapp-hashing@1.0.5
zimme:active-route@2.3.2 zimme:active-route@2.3.2

View file

@ -7,9 +7,42 @@ template(name="importPopup")
input.primary.wide(type="submit" value="{{_ 'import'}}") input.primary.wide(type="submit" value="{{_ 'import'}}")
template(name="mapMembersPopup") template(name="mapMembersPopup")
p {{_ 'import-members-map'}} .map-members
ul p {{_ 'import-members-map'}}
each members .mapping-list
li.item {{ fullName }} > world each members
form .mapping
input.primary.wide(type="submit" value="{{_ 'import'}}") 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
| (<span class="username">{{username}}</span>)
+ifEsIsSearching(index='users')
+spinner
+ifEsHasNoResults(index="users")
.manage-member-section
p.quiet {{_ 'no-results'}}

View file

@ -11,60 +11,76 @@ const ImportPopup = BlazeComponent.extendComponent({
return 'importPopup'; 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;
}
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);
}
}
);
}
},
}];
},
onCreated() { onCreated() {
this.error = new ReactiveVar(''); this.error = new ReactiveVar('');
this.dataToImport = ''; 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;
}
});
// 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);
}
}
);
}
},
events() {
return [{
submit: this.onSubmit,
}];
},
setError(error) { setError(error) {
this.error.set(error); this.error.set(error);
}, },
onFinish() {
Popup.close();
},
}); });
ImportPopup.extendComponent({ ImportPopup.extendComponent({
getAdditionalData() { getAdditionalData() {
const listId = this.data()._id; const listId = this.currentData()._id;
const selector = `#js-list-${this.currentData()._id} .js-minicard:first`; const selector = `#js-list-${this.currentData()._id} .js-minicard:first`;
const firstCardDom = $(selector).get(0); const firstCardDom = $(selector).get(0);
const sortIndex = Utils.calculateIndex(null, firstCardDom).base; const sortIndex = Utils.calculateIndex(null, firstCardDom).base;
@ -100,13 +116,119 @@ ImportPopup.extendComponent({
}, },
}).register('boardImportBoardPopup'); }).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() { events() {
return [{ return [{
'submit': (evt) => { 'submit': this.onSubmit,
evt.preventDefault(); 'click .js-add-members': this.onSelectMember,
console.log(this.data()); 'click .js-member': this.onRemove,
},
}]; }];
}, },
}).register('mapMembersPopup'); }).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');

13
client/components/import/import.styl vendored Normal file
View file

@ -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

View file

@ -89,7 +89,7 @@ template(name="addMemberPopup")
a.name.js-select-member(title="{{profile.name}} ({{username}})") a.name.js-select-member(title="{{profile.name}} ({{username}})")
+userAvatar(userId=_id esSearch=true) +userAvatar(userId=_id esSearch=true)
span.full-name span.full-name
= profile.name = profile.fullname
| (<span class="username">{{username}}</span>) | (<span class="username">{{username}}</span>)
if isBoardMember if isBoardMember
.quiet ({{_ 'joined'}}) .quiet ({{_ 'joined'}})

View file

@ -166,6 +166,7 @@
"log-out": "Log Out", "log-out": "Log Out",
"loginPopup-title": "Log In", "loginPopup-title": "Log In",
"mapMembersPopup-title": "Map members", "mapMembersPopup-title": "Map members",
"mapMembersAddPopup-title": "Select Wekan member",
"memberMenuPopup-title": "Member Settings", "memberMenuPopup-title": "Member Settings",
"members": "Members", "members": "Members",
"menu": "Menu", "menu": "Menu",

View file

@ -2,12 +2,14 @@ Users = Meteor.users;
// Search a user in the complete server database by its name or username. This // 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. // 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, { Users.initEasySearch(searchInFields, {
use: 'mongo-db', use: 'mongo-db',
returnFields: [...searchInFields, 'profile.avatarUrl'], returnFields: [...searchInFields, 'profile.avatarUrl'],
}); });
Users.helpers({ Users.helpers({
boards() { boards() {
return Boards.find({ userId: this._id }); return Boards.find({ userId: this._id });