From 011f53ad0828c0979d15e232abf501180c741288 Mon Sep 17 00:00:00 2001 From: floatinghotpot Date: Mon, 7 Dec 2015 11:15:57 +0800 Subject: add: invite user via email, invited user can accept or decline, allow member to quit --- client/components/boards/boardsList.jade | 25 +++++-- client/components/boards/boardsList.js | 18 +++++ client/components/boards/boardsList.styl | 9 ++- client/components/sidebar/sidebar.jade | 51 ++++++++++----- client/components/sidebar/sidebar.js | 109 ++++++++++++++++++++++++++----- client/components/users/userAvatar.js | 5 +- client/components/users/userAvatar.styl | 4 ++ 7 files changed, 179 insertions(+), 42 deletions(-) (limited to 'client') diff --git a/client/components/boards/boardsList.jade b/client/components/boards/boardsList.jade index 11333eee..464f9b97 100644 --- a/client/components/boards/boardsList.jade +++ b/client/components/boards/boardsList.jade @@ -3,11 +3,22 @@ template(name="boardList") ul.board-list.clearfix each boards li(class="{{#if isStarred}}starred{{/if}}" class=colorClass) - a.js-open-board(href="{{pathFor 'board' id=_id slug=slug}}") - span.details - span.board-list-item-name= title - i.fa.js-star-board( - class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}" - title="{{_ 'star-board-title'}}") + if isInvited + .board-list-item + span.details + span.board-list-item-name= title + i.fa.js-star-board( + class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}" + title="{{_ 'star-board-title'}}") + p.board-list-item-desc {{_ 'just-invited'}} + button.js-accept-invite.primary {{_ 'accept'}} + button.js-decline-invite {{_ 'decline'}} + else + a.js-open-board.board-list-item(href="{{pathFor 'board' id=_id slug=slug}}") + span.details + span.board-list-item-name= title + i.fa.js-star-board( + class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}" + title="{{_ 'star-board-title'}}") li.js-add-board - a.label {{_ 'add-board'}} + a.board-list-item.label {{_ 'add-board'}} diff --git a/client/components/boards/boardsList.js b/client/components/boards/boardsList.js index 1a2d3c9a..131adf9d 100644 --- a/client/components/boards/boardsList.js +++ b/client/components/boards/boardsList.js @@ -17,6 +17,11 @@ BlazeComponent.extendComponent({ return user && user.hasStarred(this.currentData()._id); }, + isInvited() { + const user = Meteor.user(); + return user && user.isInvitedTo(this.currentData()._id); + }, + events() { return [{ 'click .js-add-board': Popup.open('createBoard'), @@ -25,6 +30,19 @@ BlazeComponent.extendComponent({ Meteor.user().toggleBoardStar(boardId); evt.preventDefault(); }, + 'click .js-accept-invite'() { + const boardId = this.currentData()._id; + Meteor.user().removeInvite(boardId); + }, + 'click .js-decline-invite'() { + const boardId = this.currentData()._id; + Meteor.call('quitBoard', boardId, (err, ret) => { + if (!err && ret) { + Meteor.user().removeInvite(boardId); + FlowRouter.go('home'); + } + }); + }, }]; }, }).register('boardList'); diff --git a/client/components/boards/boardsList.styl b/client/components/boards/boardsList.styl index 9978fab8..e24940a0 100644 --- a/client/components/boards/boardsList.styl +++ b/client/components/boards/boardsList.styl @@ -14,7 +14,7 @@ $spaceBetweenTiles = 16px .fa-star-o opacity: 1 - a + .board-list-item background-color: #999 color: #f6f6f6 height: 90px @@ -40,6 +40,13 @@ $spaceBetweenTiles = 16px font-weight: 400 line-height: 22px + .board-list-item-desc + color: rgba(255, 255, 255, .5) + display: block + font-size: 10px + font-weight: 400 + line-height: 18px + .js-add-board text-align:center diff --git a/client/components/sidebar/sidebar.jade b/client/components/sidebar/sidebar.jade index f98ea4ee..3a5c7fdb 100644 --- a/client/components/sidebar/sidebar.jade +++ b/client/components/sidebar/sidebar.jade @@ -33,6 +33,13 @@ template(name="membersWidget") a.member.add-member.js-manage-board-members i.fa.fa-plus .clearfix + if isInvited + hr + p + i.fa.fa-exclamation-circle + | {{_ 'just-invited'}} + button.js-member-invite-accept.primary {{_ 'accept'}} + button.js-member-invite-decline {{_ 'decline'}} template(name="labelsWidget") .board-widget.board-widget-labels @@ -56,6 +63,10 @@ template(name="memberPopup") h3 .js-profile= user.profile.fullname p.quiet @#{user.username} + if isInvited + p + i.fa.fa-exclamation-circle + | {{_ 'not-accepted-yet'}} ul.pop-over-list li @@ -68,9 +79,7 @@ template(name="memberPopup") span.quiet (#{memberType}) li if $eq currentUser._id userId - //- - XXX Not implemented! - // a.js-leave-member {{_ 'leave-board'}} + a.js-leave-member {{_ 'leave-board'}} else a.js-remove-member {{_ 'remove-from-board'}} @@ -83,23 +92,29 @@ template(name="addMemberPopup") .js-search-member +esInput(index="users") - ul.pop-over-list - +esEach(index="users") - li.item.js-member-item(class="{{#if isBoardMember}}disabled{{/if}}") - a.name.js-select-member(title="{{profile.name}} ({{username}})") - +userAvatar(userId=_id esSearch=true) - span.full-name - = profile.fullname - | ({{username}}) - if isBoardMember - .quiet ({{_ 'joined'}}) + if loading.get + +spinner + else if error.get + .warning {{_ error.get}} + else + ul.pop-over-list + +esEach(index="users") + li.item.js-member-item(class="{{#if isBoardMember}}disabled{{/if}}") + a.name.js-select-member(title="{{profile.name}} ({{username}})") + +userAvatar(userId=_id esSearch=true) + span.full-name + = profile.fullname + | ({{username}}) + if isBoardMember + .quiet ({{_ 'joined'}}) - +ifEsIsSearching(index='users') - +spinner + +ifEsIsSearching(index='users') + +spinner - +ifEsHasNoResults(index="users") - .manage-member-section - p.quiet {{_ 'no-results'}} + +ifEsHasNoResults(index="users") + .manage-member-section + p.quiet {{_ 'no-results'}} + button.js-email-invite.primary.full {{_ 'email-invite'}} template(name="changePermissionsPopup") ul.pop-over-list diff --git a/client/components/sidebar/sidebar.js b/client/components/sidebar/sidebar.js index ef071fe0..5b58dbd9 100644 --- a/client/components/sidebar/sidebar.js +++ b/client/components/sidebar/sidebar.js @@ -117,6 +117,9 @@ Template.memberPopup.helpers({ const type = Users.findOne(this.userId).isBoardAdmin() ? 'admin' : 'normal'; return TAPi18n.__(type).toLowerCase(); }, + isInvited() { + return Users.findOne(this.userId).isInvitedTo(Session.get('currentBoard')); + }, }); Template.memberPopup.events({ @@ -132,8 +135,13 @@ Template.memberPopup.events({ Popup.close(); }), 'click .js-leave-member'() { - // XXX Not implemented - Popup.close(); + const currentBoard = Boards.findOne(Session.get('currentBoard')); + Meteor.call('quitBoard', currentBoard, (err, ret) => { + if (!ret && ret) { + Popup.close(); + FlowRouter.go('home'); + } + }); }, }); @@ -146,9 +154,29 @@ Template.removeMemberPopup.helpers({ }, }); +Template.membersWidget.helpers({ + isInvited() { + const user = Meteor.user(); + return user && user.isInvitedTo(Session.get('currentBoard')); + }, +}); + Template.membersWidget.events({ 'click .js-member': Popup.open('member'), 'click .js-manage-board-members': Popup.open('addMember'), + 'click .js-member-invite-accept'() { + const boardId = Session.get('currentBoard'); + Meteor.user().removeInvite(boardId); + }, + 'click .js-member-invite-decline'() { + const boardId = Session.get('currentBoard'); + Meteor.call('quitBoard', boardId, (err, ret) => { + if (!err && ret) { + Meteor.user().removeInvite(boardId); + FlowRouter.go('home'); + } + }); + }, }); Template.labelsWidget.events({ @@ -194,25 +222,76 @@ function draggableMembersLabelsWidgets() { Template.membersWidget.onRendered(draggableMembersLabelsWidgets); Template.labelsWidget.onRendered(draggableMembersLabelsWidgets); -Template.addMemberPopup.helpers({ +BlazeComponent.extendComponent({ + template() { + return 'addMemberPopup'; + }, + + onCreated() { + this.error = new ReactiveVar(''); + this.loading = new ReactiveVar(false); + }, + + onRendered() { + this.find('.js-search-member input').focus(); + this.setLoading(false); + }, + isBoardMember() { - const user = Users.findOne(this._id); + const userId = this.currentData()._id; + const user = Users.findOne(userId); return user && user.isBoardMember(); }, -}); -Template.addMemberPopup.events({ - 'click .js-select-member'() { - const userId = this._id; - const currentBoard = Boards.findOne(Session.get('currentBoard')); - currentBoard.addMember(userId); - Popup.close(); + isValidEmail(email) { + return SimpleSchema.RegEx.Email.test(email); }, -}); -Template.addMemberPopup.onRendered(function() { - this.find('.js-search-member input').focus(); -}); + setError(error) { + this.error.set(error); + }, + + setLoading(w) { + this.loading.set(w); + }, + + isLoading() { + return this.loading.get(); + }, + + inviteUser(idNameEmail) { + const boardId = Session.get('currentBoard'); + this.setLoading(true); + const self = this; + Meteor.call('inviteUserToBoard', idNameEmail, boardId, (err, ret) => { + self.setLoading(false); + if (err) self.setError(err.error); + else if (ret.email) self.setError('email-sent'); + else Popup.close(); + }); + }, + + events() { + return [{ + 'keyup input'() { + this.setError(''); + }, + 'click .js-select-member'() { + const userId = this.currentData()._id; + const currentBoard = Boards.findOne(Session.get('currentBoard')); + if (currentBoard.memberIndex(userId)<0) { + this.inviteUser(userId); + } + }, + 'click .js-email-invite'() { + const idNameEmail = $('.js-search-member input').val(); + if (idNameEmail.indexOf('@')<0 || this.isValidEmail(idNameEmail)) { + this.inviteUser(idNameEmail); + } else this.setError('email-invalid'); + }, + }]; + }, +}).register('addMemberPopup'); Template.changePermissionsPopup.events({ 'click .js-set-admin, click .js-set-normal'(event) { diff --git a/client/components/users/userAvatar.js b/client/components/users/userAvatar.js index 1f1da251..1e531882 100644 --- a/client/components/users/userAvatar.js +++ b/client/components/users/userAvatar.js @@ -22,8 +22,11 @@ Template.userAvatar.helpers({ }, presenceStatusClassName() { + const user = Users.findOne(this.userId); const userPresence = presences.findOne({ userId: this.userId }); - if (!userPresence) + if (user && user.isInvitedTo(Session.get('currentBoard'))) + return 'pending'; + else if (!userPresence) return 'disconnected'; else if (Session.equals('currentBoard', userPresence.state.currentBoardId)) return 'active'; diff --git a/client/components/users/userAvatar.styl b/client/components/users/userAvatar.styl index 83257792..b962b01c 100644 --- a/client/components/users/userAvatar.styl +++ b/client/components/users/userAvatar.styl @@ -56,6 +56,10 @@ avatar-radius = 50% background: #bdbdbd border-color: #ededed + &.pending + background: #e44242 + border-color: #f1dada + .edit-avatar position: absolute top: 0 -- cgit v1.2.3-1-g7c22 From 21fa6fdc327757c29364a0e59fa37d8b279411df Mon Sep 17 00:00:00 2001 From: floatinghotpot Date: Mon, 7 Dec 2015 11:22:30 +0800 Subject: add: optional board description --- client/components/boards/boardHeader.jade | 3 +++ client/components/boards/boardHeader.js | 2 ++ client/components/boards/boardsList.jade | 1 + 3 files changed, 6 insertions(+) (limited to 'client') diff --git a/client/components/boards/boardHeader.jade b/client/components/boards/boardHeader.jade index cb86e9bb..a0160382 100644 --- a/client/components/boards/boardHeader.jade +++ b/client/components/boards/boardHeader.jade @@ -117,6 +117,9 @@ template(name="boardChangeTitlePopup") label | {{_ 'title'}} input.js-board-name(type="text" value=title autofocus) + label + | {{_ 'description'}} + textarea.js-board-desc= description input.primary.wide(type="submit" value="{{_ 'rename'}}") template(name="archiveBoardPopup") diff --git a/client/components/boards/boardHeader.js b/client/components/boards/boardHeader.js index 92d5f6d4..3dc6d754 100644 --- a/client/components/boards/boardHeader.js +++ b/client/components/boards/boardHeader.js @@ -18,8 +18,10 @@ Template.boardMenuPopup.events({ Template.boardChangeTitlePopup.events({ submit(evt, tpl) { const newTitle = tpl.$('.js-board-name').val().trim(); + const newDesc = tpl.$('.js-board-desc').val().trim(); if (newTitle) { this.rename(newTitle); + this.setDesciption(newDesc); Popup.close(); } evt.preventDefault(); diff --git a/client/components/boards/boardsList.jade b/client/components/boards/boardsList.jade index 464f9b97..7099cdc9 100644 --- a/client/components/boards/boardsList.jade +++ b/client/components/boards/boardsList.jade @@ -20,5 +20,6 @@ template(name="boardList") i.fa.js-star-board( class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}" title="{{_ 'star-board-title'}}") + p.board-list-item-desc= description li.js-add-board a.board-list-item.label {{_ 'add-board'}} -- cgit v1.2.3-1-g7c22