sidebar.js 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366
  1. Sidebar = null;
  2. const defaultView = 'home';
  3. const viewTitles = {
  4. filter: 'filter-cards',
  5. search: 'search-cards',
  6. multiselection: 'multi-selection',
  7. customFields: 'custom-fields',
  8. archives: 'archives',
  9. };
  10. BlazeComponent.extendComponent({
  11. mixins() {
  12. return [Mixins.InfiniteScrolling, Mixins.PerfectScrollbar];
  13. },
  14. onCreated() {
  15. const initOpen = Utils.isMiniScreen() ? false : (!Session.get('currentCard'));
  16. this._isOpen = new ReactiveVar(initOpen);
  17. this._view = new ReactiveVar(defaultView);
  18. Sidebar = this;
  19. },
  20. onDestroyed() {
  21. Sidebar = null;
  22. },
  23. isOpen() {
  24. return this._isOpen.get();
  25. },
  26. open() {
  27. if (!this._isOpen.get()) {
  28. this._isOpen.set(true);
  29. EscapeActions.executeUpTo('detailsPane');
  30. }
  31. },
  32. hide() {
  33. if (this._isOpen.get()) {
  34. this._isOpen.set(false);
  35. }
  36. },
  37. toggle() {
  38. this._isOpen.set(!this._isOpen.get());
  39. },
  40. calculateNextPeak() {
  41. const altitude = this.find('.js-board-sidebar-content').scrollHeight;
  42. this.callFirstWith(this, 'setNextPeak', altitude);
  43. },
  44. reachNextPeak() {
  45. const activitiesComponent = this.childComponents('activities')[0];
  46. activitiesComponent.loadNextPage();
  47. },
  48. isTongueHidden() {
  49. return this.isOpen() && this.getView() !== defaultView;
  50. },
  51. scrollTop() {
  52. this.$('.js-board-sidebar-content').scrollTop(0);
  53. },
  54. getView() {
  55. return this._view.get();
  56. },
  57. setView(view) {
  58. view = _.isString(view) ? view : defaultView;
  59. if (this._view.get() !== view) {
  60. this._view.set(view);
  61. this.scrollTop();
  62. EscapeActions.executeUpTo('detailsPane');
  63. }
  64. this.open();
  65. },
  66. isDefaultView() {
  67. return this.getView() === defaultView;
  68. },
  69. getViewTemplate() {
  70. return `${this.getView()}Sidebar`;
  71. },
  72. getViewTitle() {
  73. return TAPi18n.__(viewTitles[this.getView()]);
  74. },
  75. showTongueTitle() {
  76. if (this.isOpen())
  77. return `${TAPi18n.__('sidebar-close')}`;
  78. else
  79. return `${TAPi18n.__('sidebar-open')}`;
  80. },
  81. events() {
  82. return [{
  83. 'click .js-hide-sidebar': this.hide,
  84. 'click .js-toggle-sidebar': this.toggle,
  85. 'click .js-back-home': this.setView,
  86. 'click .js-shortcuts'() {
  87. FlowRouter.go('shortcuts');
  88. },
  89. }];
  90. },
  91. }).register('sidebar');
  92. Blaze.registerHelper('Sidebar', () => Sidebar);
  93. EscapeActions.register('sidebarView',
  94. () => { Sidebar.setView(defaultView); },
  95. () => { return Sidebar && Sidebar.getView() !== defaultView; }
  96. );
  97. Template.memberPopup.helpers({
  98. user() {
  99. return Users.findOne(this.userId);
  100. },
  101. memberType() {
  102. const type = Users.findOne(this.userId).isBoardAdmin() ? 'admin' : 'normal';
  103. if(type === 'normal'){
  104. const currentBoard = Boards.findOne(Session.get('currentBoard'));
  105. const commentOnly = currentBoard.hasCommentOnly(this.userId);
  106. const noComments = currentBoard.hasNoComments(this.userId);
  107. if(commentOnly){
  108. return TAPi18n.__('comment-only').toLowerCase();
  109. } else if(noComments) {
  110. return TAPi18n.__('no-comments').toLowerCase();
  111. } else {
  112. return TAPi18n.__(type).toLowerCase();
  113. }
  114. } else {
  115. return TAPi18n.__(type).toLowerCase();
  116. }
  117. },
  118. isInvited() {
  119. return Users.findOne(this.userId).isInvitedTo(Session.get('currentBoard'));
  120. },
  121. });
  122. Template.memberPopup.events({
  123. 'click .js-filter-member'() {
  124. Filter.members.toggle(this.userId);
  125. Popup.close();
  126. },
  127. 'click .js-change-role': Popup.open('changePermissions'),
  128. 'click .js-remove-member': Popup.afterConfirm('removeMember', function() {
  129. const boardId = Session.get('currentBoard');
  130. const memberId = this.userId;
  131. Cards.find({ boardId, members: memberId }).forEach((card) => {
  132. card.unassignMember(memberId);
  133. });
  134. Boards.findOne(boardId).removeMember(memberId);
  135. Popup.close();
  136. }),
  137. 'click .js-leave-member': Popup.afterConfirm('leaveBoard', () => {
  138. const boardId = Session.get('currentBoard');
  139. Meteor.call('quitBoard', boardId, () => {
  140. Popup.close();
  141. FlowRouter.go('home');
  142. });
  143. }),
  144. });
  145. Template.removeMemberPopup.helpers({
  146. user() {
  147. return Users.findOne(this.userId);
  148. },
  149. board() {
  150. return Boards.findOne(Session.get('currentBoard'));
  151. },
  152. });
  153. Template.leaveBoardPopup.helpers({
  154. board() {
  155. return Boards.findOne(Session.get('currentBoard'));
  156. },
  157. });
  158. Template.membersWidget.helpers({
  159. isInvited() {
  160. const user = Meteor.user();
  161. return user && user.isInvitedTo(Session.get('currentBoard'));
  162. },
  163. });
  164. Template.membersWidget.events({
  165. 'click .js-member': Popup.open('member'),
  166. 'click .js-manage-board-members': Popup.open('addMember'),
  167. 'click .sandstorm-powerbox-request-identity'() {
  168. window.sandstormRequestIdentity();
  169. },
  170. 'click .js-member-invite-accept'() {
  171. const boardId = Session.get('currentBoard');
  172. Meteor.user().removeInvite(boardId);
  173. },
  174. 'click .js-member-invite-decline'() {
  175. const boardId = Session.get('currentBoard');
  176. Meteor.call('quitBoard', boardId, (err, ret) => {
  177. if (!err && ret) {
  178. Meteor.user().removeInvite(boardId);
  179. FlowRouter.go('home');
  180. }
  181. });
  182. },
  183. });
  184. Template.labelsWidget.events({
  185. 'click .js-label': Popup.open('editLabel'),
  186. 'click .js-add-label': Popup.open('createLabel'),
  187. });
  188. // Board members can assign people or labels by drag-dropping elements from the
  189. // sidebar to the cards on the board. In order to re-initialize the jquery-ui
  190. // plugin any time a draggable member or label is modified or removed we use a
  191. // autorun function and register a dependency on the both members and labels
  192. // fields of the current board document.
  193. function draggableMembersLabelsWidgets() {
  194. this.autorun(() => {
  195. const currentBoardId = Tracker.nonreactive(() => {
  196. return Session.get('currentBoard');
  197. });
  198. Boards.findOne(currentBoardId, {
  199. fields: {
  200. members: 1,
  201. labels: 1,
  202. },
  203. });
  204. Tracker.afterFlush(() => {
  205. const $draggables = this.$('.js-member,.js-label');
  206. $draggables.draggable({
  207. appendTo: 'body',
  208. helper: 'clone',
  209. revert: 'invalid',
  210. revertDuration: 150,
  211. snap: false,
  212. snapMode: 'both',
  213. start() {
  214. EscapeActions.executeUpTo('popup-back');
  215. },
  216. });
  217. function userIsMember() {
  218. return Meteor.user() && Meteor.user().isBoardMember();
  219. }
  220. this.autorun(() => {
  221. $draggables.draggable('option', 'disabled', !userIsMember());
  222. });
  223. });
  224. });
  225. }
  226. Template.membersWidget.onRendered(draggableMembersLabelsWidgets);
  227. Template.labelsWidget.onRendered(draggableMembersLabelsWidgets);
  228. BlazeComponent.extendComponent({
  229. onCreated() {
  230. this.error = new ReactiveVar('');
  231. this.loading = new ReactiveVar(false);
  232. },
  233. onRendered() {
  234. this.find('.js-search-member input').focus();
  235. this.setLoading(false);
  236. },
  237. isBoardMember() {
  238. const userId = this.currentData()._id;
  239. const user = Users.findOne(userId);
  240. return user && user.isBoardMember();
  241. },
  242. isValidEmail(email) {
  243. return SimpleSchema.RegEx.Email.test(email);
  244. },
  245. setError(error) {
  246. this.error.set(error);
  247. },
  248. setLoading(w) {
  249. this.loading.set(w);
  250. },
  251. isLoading() {
  252. return this.loading.get();
  253. },
  254. inviteUser(idNameEmail) {
  255. const boardId = Session.get('currentBoard');
  256. this.setLoading(true);
  257. const self = this;
  258. Meteor.call('inviteUserToBoard', idNameEmail, boardId, (err, ret) => {
  259. self.setLoading(false);
  260. if (err) self.setError(err.error);
  261. else if (ret.email) self.setError('email-sent');
  262. else Popup.close();
  263. });
  264. },
  265. events() {
  266. return [{
  267. 'keyup input'() {
  268. this.setError('');
  269. },
  270. 'click .js-select-member'() {
  271. const userId = this.currentData()._id;
  272. const currentBoard = Boards.findOne(Session.get('currentBoard'));
  273. if (!currentBoard.hasMember(userId)) {
  274. this.inviteUser(userId);
  275. }
  276. },
  277. 'click .js-email-invite'() {
  278. const idNameEmail = $('.js-search-member input').val();
  279. if (idNameEmail.indexOf('@')<0 || this.isValidEmail(idNameEmail)) {
  280. this.inviteUser(idNameEmail);
  281. } else this.setError('email-invalid');
  282. },
  283. }];
  284. },
  285. }).register('addMemberPopup');
  286. Template.changePermissionsPopup.events({
  287. 'click .js-set-admin, click .js-set-normal, click .js-set-no-comments, click .js-set-comment-only'(event) {
  288. const currentBoard = Boards.findOne(Session.get('currentBoard'));
  289. const memberId = this.userId;
  290. const isAdmin = $(event.currentTarget).hasClass('js-set-admin');
  291. const isCommentOnly = $(event.currentTarget).hasClass('js-set-comment-only');
  292. const isNoComments = $(event.currentTarget).hasClass('js-set-no-comments');
  293. currentBoard.setMemberPermission(memberId, isAdmin, isNoComments, isCommentOnly);
  294. Popup.back(1);
  295. },
  296. });
  297. Template.changePermissionsPopup.helpers({
  298. isAdmin() {
  299. const currentBoard = Boards.findOne(Session.get('currentBoard'));
  300. return currentBoard.hasAdmin(this.userId);
  301. },
  302. isNormal() {
  303. const currentBoard = Boards.findOne(Session.get('currentBoard'));
  304. return !currentBoard.hasAdmin(this.userId) && !currentBoard.hasNoComments(this.userId) && !currentBoard.hasCommentOnly(this.userId);
  305. },
  306. isNoComments() {
  307. const currentBoard = Boards.findOne(Session.get('currentBoard'));
  308. return !currentBoard.hasAdmin(this.userId) && currentBoard.hasNoComments(this.userId);
  309. },
  310. isCommentOnly() {
  311. const currentBoard = Boards.findOne(Session.get('currentBoard'));
  312. return !currentBoard.hasAdmin(this.userId) && currentBoard.hasCommentOnly(this.userId);
  313. },
  314. isLastAdmin() {
  315. const currentBoard = Boards.findOne(Session.get('currentBoard'));
  316. return currentBoard.hasAdmin(this.userId) && (currentBoard.activeAdmins() === 1);
  317. },
  318. });