listBody.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. BlazeComponent.extendComponent({
  2. mixins() {
  3. return [Mixins.PerfectScrollbar];
  4. },
  5. openForm(options) {
  6. options = options || {};
  7. options.position = options.position || 'top';
  8. const forms = this.childComponents('inlinedForm');
  9. let form = forms.find((component) => {
  10. return component.data().position === options.position;
  11. });
  12. if (!form && forms.length > 0) {
  13. form = forms[0];
  14. }
  15. form.open();
  16. },
  17. addCard(evt) {
  18. evt.preventDefault();
  19. const firstCardDom = this.find('.js-minicard:first');
  20. const lastCardDom = this.find('.js-minicard:last');
  21. const textarea = $(evt.currentTarget).find('textarea');
  22. const position = this.currentData().position;
  23. const title = textarea.val().trim();
  24. const formComponent = this.childComponents('addCardForm')[0];
  25. let sortIndex;
  26. if (position === 'top') {
  27. sortIndex = Utils.calculateIndex(null, firstCardDom).base;
  28. } else if (position === 'bottom') {
  29. sortIndex = Utils.calculateIndex(lastCardDom, null).base;
  30. }
  31. const members = formComponent.members.get();
  32. const labelIds = formComponent.labels.get();
  33. const boardId = this.data().board()._id;
  34. const board = Boards.findOne(boardId);
  35. let swimlaneId = '';
  36. if (board.view === 'board-view-swimlanes')
  37. swimlaneId = this.parentComponent().parentComponent().data()._id;
  38. else
  39. swimlaneId = Swimlanes.findOne({boardId})._id;
  40. if (title) {
  41. const _id = Cards.insert({
  42. title,
  43. members,
  44. labelIds,
  45. listId: this.data()._id,
  46. boardId: this.data().board()._id,
  47. sort: sortIndex,
  48. swimlaneId,
  49. });
  50. // In case the filter is active we need to add the newly inserted card in
  51. // the list of exceptions -- cards that are not filtered. Otherwise the
  52. // card will disappear instantly.
  53. // See https://github.com/wekan/wekan/issues/80
  54. Filter.addException(_id);
  55. // We keep the form opened, empty it, and scroll to it.
  56. textarea.val('').focus();
  57. autosize.update(textarea);
  58. if (position === 'bottom') {
  59. this.scrollToBottom();
  60. }
  61. formComponent.reset();
  62. }
  63. },
  64. scrollToBottom() {
  65. const container = this.firstNode();
  66. $(container).animate({
  67. scrollTop: container.scrollHeight,
  68. });
  69. },
  70. clickOnMiniCard(evt) {
  71. if (MultiSelection.isActive() || evt.shiftKey) {
  72. evt.stopImmediatePropagation();
  73. evt.preventDefault();
  74. const methodName = evt.shiftKey ? 'toggleRange' : 'toggle';
  75. MultiSelection[methodName](this.currentData()._id);
  76. // If the card is already selected, we want to de-select it.
  77. // XXX We should probably modify the minicard href attribute instead of
  78. // overwriting the event in case the card is already selected.
  79. } else if (Session.equals('currentCard', this.currentData()._id)) {
  80. evt.stopImmediatePropagation();
  81. evt.preventDefault();
  82. Utils.goBoardId(Session.get('currentBoard'));
  83. }
  84. },
  85. cardIsSelected() {
  86. return Session.equals('currentCard', this.currentData()._id);
  87. },
  88. toggleMultiSelection(evt) {
  89. evt.stopPropagation();
  90. evt.preventDefault();
  91. MultiSelection.toggle(this.currentData()._id);
  92. },
  93. idOrNull(swimlaneId) {
  94. const board = Boards.findOne(Session.get('currentBoard'));
  95. if (board.view === 'board-view-swimlanes')
  96. return swimlaneId;
  97. return undefined;
  98. },
  99. canSeeAddCard() {
  100. return !this.reachedWipLimit() && Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
  101. },
  102. reachedWipLimit() {
  103. const list = Template.currentData();
  104. return !list.getWipLimit('soft') && list.getWipLimit('enabled') && list.getWipLimit('value') <= list.cards().count();
  105. },
  106. events() {
  107. return [{
  108. 'click .js-minicard': this.clickOnMiniCard,
  109. 'click .js-toggle-multi-selection': this.toggleMultiSelection,
  110. 'click .open-minicard-composer': this.scrollToBottom,
  111. submit: this.addCard,
  112. }];
  113. },
  114. }).register('listBody');
  115. function toggleValueInReactiveArray(reactiveValue, value) {
  116. const array = reactiveValue.get();
  117. const valueIndex = array.indexOf(value);
  118. if (valueIndex === -1) {
  119. array.push(value);
  120. } else {
  121. array.splice(valueIndex, 1);
  122. }
  123. reactiveValue.set(array);
  124. }
  125. BlazeComponent.extendComponent({
  126. onCreated() {
  127. this.labels = new ReactiveVar([]);
  128. this.members = new ReactiveVar([]);
  129. },
  130. reset() {
  131. this.labels.set([]);
  132. this.members.set([]);
  133. },
  134. getLabels() {
  135. const currentBoardId = Session.get('currentBoard');
  136. return Boards.findOne(currentBoardId).labels.filter((label) => {
  137. return this.labels.get().indexOf(label._id) > -1;
  138. });
  139. },
  140. pressKey(evt) {
  141. // Pressing Enter should submit the card
  142. if (evt.keyCode === 13) {
  143. evt.preventDefault();
  144. const $form = $(evt.currentTarget).closest('form');
  145. // XXX For some reason $form.submit() does not work (it's probably a bug
  146. // of blaze-component related to the fact that the submit event is non-
  147. // bubbling). This is why we click on the submit button instead -- which
  148. // work.
  149. $form.find('button[type=submit]').click();
  150. // Pressing Tab should open the form of the next column, and Maj+Tab go
  151. // in the reverse order
  152. } else if (evt.keyCode === 9) {
  153. evt.preventDefault();
  154. const isReverse = evt.shiftKey;
  155. const list = $(`#js-list-${this.data().listId}`);
  156. const listSelector = '.js-list:not(.js-list-composer)';
  157. let nextList = list[isReverse ? 'prev' : 'next'](listSelector).get(0);
  158. // If there is no next list, loop back to the beginning.
  159. if (!nextList) {
  160. nextList = $(listSelector + (isReverse ? ':last' : ':first')).get(0);
  161. }
  162. BlazeComponent.getComponentForElement(nextList).openForm({
  163. position:this.data().position,
  164. });
  165. }
  166. },
  167. events() {
  168. return [{
  169. keydown: this.pressKey,
  170. }];
  171. },
  172. onRendered() {
  173. const editor = this;
  174. const $textarea = this.$('textarea');
  175. autosize($textarea);
  176. $textarea.escapeableTextComplete([
  177. // User mentions
  178. {
  179. match: /\B@([\w.]*)$/,
  180. search(term, callback) {
  181. const currentBoard = Boards.findOne(Session.get('currentBoard'));
  182. callback($.map(currentBoard.activeMembers(), (member) => {
  183. const user = Users.findOne(member.userId);
  184. return user.username.indexOf(term) === 0 ? user : null;
  185. }));
  186. },
  187. template(user) {
  188. return user.username;
  189. },
  190. replace(user) {
  191. toggleValueInReactiveArray(editor.members, user._id);
  192. return '';
  193. },
  194. index: 1,
  195. },
  196. // Labels
  197. {
  198. match: /\B#(\w*)$/,
  199. search(term, callback) {
  200. const currentBoard = Boards.findOne(Session.get('currentBoard'));
  201. callback($.map(currentBoard.labels, (label) => {
  202. if (label.name.indexOf(term) > -1 ||
  203. label.color.indexOf(term) > -1) {
  204. return label;
  205. }
  206. return null;
  207. }));
  208. },
  209. template(label) {
  210. return Blaze.toHTMLWithData(Template.autocompleteLabelLine, {
  211. hasNoName: !label.name,
  212. colorName: label.color,
  213. labelName: label.name || label.color,
  214. });
  215. },
  216. replace(label) {
  217. toggleValueInReactiveArray(editor.labels, label._id);
  218. return '';
  219. },
  220. index: 1,
  221. },
  222. ], {
  223. // When the autocomplete menu is shown we want both a press of both `Tab`
  224. // or `Enter` to validation the auto-completion. We also need to stop the
  225. // event propagation to prevent the card from submitting (on `Enter`) or
  226. // going on the next column (on `Tab`).
  227. onKeydown(evt, commands) {
  228. if (evt.keyCode === 9 || evt.keyCode === 13) {
  229. evt.stopPropagation();
  230. return commands.KEY_ENTER;
  231. }
  232. return null;
  233. },
  234. });
  235. },
  236. }).register('addCardForm');