boardHeader.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479
  1. import { TAPi18n } from '/imports/i18n';
  2. /*
  3. const DOWNCLS = 'fa-sort-down';
  4. const UPCLS = 'fa-sort-up';
  5. */
  6. const sortCardsBy = new ReactiveVar('');
  7. Template.boardMenuPopup.events({
  8. 'click .js-rename-board': Popup.open('boardChangeTitle'),
  9. 'click .js-custom-fields'() {
  10. Sidebar.setView('customFields');
  11. Popup.back();
  12. },
  13. 'click .js-open-archives'() {
  14. Sidebar.setView('archives');
  15. Popup.back();
  16. },
  17. 'click .js-change-board-color': Popup.open('boardChangeColor'),
  18. 'click .js-change-language': Popup.open('changeLanguage'),
  19. 'click .js-archive-board ': Popup.afterConfirm('archiveBoard', function() {
  20. const currentBoard = Utils.getCurrentBoard();
  21. currentBoard.archive();
  22. // XXX We should have some kind of notification on top of the page to
  23. // confirm that the board was successfully archived.
  24. FlowRouter.go('home');
  25. }),
  26. 'click .js-delete-board': Popup.afterConfirm('deleteBoard', function() {
  27. const currentBoard = Utils.getCurrentBoard();
  28. Popup.back();
  29. Boards.remove(currentBoard._id);
  30. FlowRouter.go('home');
  31. }),
  32. 'click .js-outgoing-webhooks': Popup.open('outgoingWebhooks'),
  33. 'click .js-import-board': Popup.open('chooseBoardSource'),
  34. 'click .js-subtask-settings': Popup.open('boardSubtaskSettings'),
  35. 'click .js-card-settings': Popup.open('boardCardSettings'),
  36. 'click .js-minicard-settings': Popup.open('boardMinicardSettings'),
  37. });
  38. Template.boardChangeTitlePopup.events({
  39. submit(event, templateInstance) {
  40. const newTitle = templateInstance
  41. .$('.js-board-name')
  42. .val()
  43. .trim();
  44. const newDesc = templateInstance
  45. .$('.js-board-desc')
  46. .val()
  47. .trim();
  48. if (newTitle) {
  49. this.rename(newTitle);
  50. this.setDescription(newDesc);
  51. Popup.back();
  52. }
  53. event.preventDefault();
  54. },
  55. });
  56. BlazeComponent.extendComponent({
  57. watchLevel() {
  58. const currentBoard = Utils.getCurrentBoard();
  59. return currentBoard && currentBoard.getWatchLevel(Meteor.userId());
  60. },
  61. isStarred() {
  62. const boardId = Session.get('currentBoard');
  63. const user = Meteor.user();
  64. return user && user.hasStarred(boardId);
  65. },
  66. // Only show the star counter if the number of star is greater than 2
  67. showStarCounter() {
  68. const currentBoard = Utils.getCurrentBoard();
  69. return currentBoard && currentBoard.stars >= 2;
  70. },
  71. /*
  72. showSort() {
  73. return Meteor.user().hasSortBy();
  74. },
  75. directionClass() {
  76. return this.currentDirection() === -1 ? DOWNCLS : UPCLS;
  77. },
  78. changeDirection() {
  79. const direction = 0 - this.currentDirection() === -1 ? '-' : '';
  80. Meteor.call('setListSortBy', direction + this.currentListSortBy());
  81. },
  82. currentDirection() {
  83. return Meteor.user().getListSortByDirection();
  84. },
  85. currentListSortBy() {
  86. return Meteor.user().getListSortBy();
  87. },
  88. listSortShortDesc() {
  89. return `list-label-short-${this.currentListSortBy()}`;
  90. },
  91. */
  92. events() {
  93. return [
  94. {
  95. 'click .js-edit-board-title': Popup.open('boardChangeTitle'),
  96. 'click .js-star-board'() {
  97. Meteor.user().toggleBoardStar(Session.get('currentBoard'));
  98. },
  99. 'click .js-open-board-menu': Popup.open('boardMenu'),
  100. 'click .js-change-visibility': Popup.open('boardChangeVisibility'),
  101. 'click .js-watch-board': Popup.open('boardChangeWatch'),
  102. 'click .js-open-archived-board'() {
  103. Modal.open('archivedBoards');
  104. },
  105. 'click .js-toggle-board-view': Popup.open('boardChangeView'),
  106. 'click .js-toggle-sidebar'() {
  107. Sidebar.toggle();
  108. },
  109. 'click .js-open-filter-view'() {
  110. Sidebar.setView('filter');
  111. },
  112. 'click .js-sort-cards': Popup.open('cardsSort'),
  113. /*
  114. 'click .js-open-sort-view'(evt) {
  115. const target = evt.target;
  116. if (target.tagName === 'I') {
  117. // click on the text, popup choices
  118. this.changeDirection();
  119. } else {
  120. // change the sort order
  121. Popup.open('listsort')(evt);
  122. }
  123. },
  124. */
  125. 'click .js-filter-reset'(event) {
  126. event.stopPropagation();
  127. Sidebar.setView();
  128. Filter.reset();
  129. },
  130. 'click .js-sort-reset'() {
  131. Session.set('sortBy', '');
  132. },
  133. 'click .js-open-search-view'() {
  134. Sidebar.setView('search');
  135. },
  136. 'click .js-multiselection-activate'() {
  137. const currentCard = Utils.getCurrentCardId();
  138. MultiSelection.activate();
  139. if (currentCard) {
  140. MultiSelection.add(currentCard);
  141. }
  142. },
  143. 'click .js-multiselection-reset'(event) {
  144. event.stopPropagation();
  145. MultiSelection.disable();
  146. },
  147. 'click .js-log-in'() {
  148. FlowRouter.go('atSignIn');
  149. },
  150. },
  151. ];
  152. },
  153. }).register('boardHeaderBar');
  154. Template.boardHeaderBar.helpers({
  155. boardView() {
  156. return Utils.boardView();
  157. },
  158. isSortActive() {
  159. return Session.get('sortBy') ? true : false;
  160. },
  161. });
  162. Template.boardChangeViewPopup.events({
  163. 'click .js-open-lists-view'() {
  164. Utils.setBoardView('board-view-lists');
  165. Popup.back();
  166. },
  167. 'click .js-open-swimlanes-view'() {
  168. Utils.setBoardView('board-view-swimlanes');
  169. Popup.back();
  170. },
  171. 'click .js-open-cal-view'() {
  172. Utils.setBoardView('board-view-cal');
  173. Popup.back();
  174. },
  175. });
  176. const CreateBoard = BlazeComponent.extendComponent({
  177. template() {
  178. return 'createBoard';
  179. },
  180. onCreated() {
  181. this.visibilityMenuIsOpen = new ReactiveVar(false);
  182. this.visibility = new ReactiveVar('private');
  183. this.boardId = new ReactiveVar('');
  184. Meteor.subscribe('tableVisibilityModeSettings');
  185. },
  186. notAllowPrivateVisibilityOnly(){
  187. return !TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly').booleanValue;
  188. },
  189. visibilityCheck() {
  190. return this.currentData() === this.visibility.get();
  191. },
  192. setVisibility(visibility) {
  193. this.visibility.set(visibility);
  194. this.visibilityMenuIsOpen.set(false);
  195. },
  196. toggleVisibilityMenu() {
  197. this.visibilityMenuIsOpen.set(!this.visibilityMenuIsOpen.get());
  198. },
  199. toggleAddTemplateContainer() {
  200. $('#add-template-container').toggleClass('is-checked');
  201. },
  202. onSubmit(event) {
  203. event.preventDefault();
  204. const title = this.find('.js-new-board-title').value;
  205. const addTemplateContainer = $('#add-template-container.is-checked').length > 0;
  206. if (addTemplateContainer) {
  207. //const templateContainerId = Meteor.call('setCreateTemplateContainer');
  208. //Utils.goBoardId(templateContainerId);
  209. //alert('niinku template ' + Meteor.call('setCreateTemplateContainer'));
  210. this.boardId.set(
  211. Boards.insert({
  212. // title: TAPi18n.__('templates'),
  213. title: title,
  214. permission: 'private',
  215. type: 'template-container',
  216. }),
  217. );
  218. // Insert the card templates swimlane
  219. Swimlanes.insert({
  220. // title: TAPi18n.__('card-templates-swimlane'),
  221. title: 'Card Templates',
  222. boardId: this.boardId.get(),
  223. sort: 1,
  224. type: 'template-container',
  225. }),
  226. // Insert the list templates swimlane
  227. Swimlanes.insert(
  228. {
  229. // title: TAPi18n.__('list-templates-swimlane'),
  230. title: 'List Templates',
  231. boardId: this.boardId.get(),
  232. sort: 2,
  233. type: 'template-container',
  234. },
  235. );
  236. // Insert the board templates swimlane
  237. Swimlanes.insert(
  238. {
  239. //title: TAPi18n.__('board-templates-swimlane'),
  240. title: 'Board Templates',
  241. boardId: this.boardId.get(),
  242. sort: 3,
  243. type: 'template-container',
  244. },
  245. );
  246. Utils.goBoardId(this.boardId.get());
  247. } else {
  248. const visibility = this.visibility.get();
  249. this.boardId.set(
  250. Boards.insert({
  251. title,
  252. permission: visibility,
  253. }),
  254. );
  255. Swimlanes.insert({
  256. title: 'Default',
  257. boardId: this.boardId.get(),
  258. });
  259. Utils.goBoardId(this.boardId.get());
  260. }
  261. },
  262. events() {
  263. return [
  264. {
  265. 'click .js-select-visibility'() {
  266. this.setVisibility(this.currentData());
  267. },
  268. 'click .js-change-visibility': this.toggleVisibilityMenu,
  269. 'click .js-import': Popup.open('boardImportBoard'),
  270. submit: this.onSubmit,
  271. 'click .js-import-board': Popup.open('chooseBoardSource'),
  272. 'click .js-board-template': Popup.open('searchElement'),
  273. 'click .js-toggle-add-template-container': this.toggleAddTemplateContainer,
  274. },
  275. ];
  276. },
  277. }).register('createBoardPopup');
  278. (class HeaderBarCreateBoard extends CreateBoard {
  279. onSubmit(event) {
  280. super.onSubmit(event);
  281. // Immediately star boards crated with the headerbar popup.
  282. Meteor.user().toggleBoardStar(this.boardId.get());
  283. }
  284. }.register('headerBarCreateBoardPopup'));
  285. BlazeComponent.extendComponent({
  286. notAllowPrivateVisibilityOnly(){
  287. return !TableVisibilityModeSettings.findOne('tableVisibilityMode-allowPrivateOnly').booleanValue;
  288. },
  289. visibilityCheck() {
  290. const currentBoard = Utils.getCurrentBoard();
  291. return this.currentData() === currentBoard.permission;
  292. },
  293. selectBoardVisibility() {
  294. const currentBoard = Utils.getCurrentBoard();
  295. const visibility = this.currentData();
  296. currentBoard.setVisibility(visibility);
  297. Popup.back();
  298. },
  299. events() {
  300. return [
  301. {
  302. 'click .js-select-visibility': this.selectBoardVisibility,
  303. },
  304. ];
  305. },
  306. }).register('boardChangeVisibilityPopup');
  307. BlazeComponent.extendComponent({
  308. watchLevel() {
  309. const currentBoard = Utils.getCurrentBoard();
  310. return currentBoard.getWatchLevel(Meteor.userId());
  311. },
  312. watchCheck() {
  313. return this.currentData() === this.watchLevel();
  314. },
  315. events() {
  316. return [
  317. {
  318. 'click .js-select-watch'() {
  319. const level = this.currentData();
  320. Meteor.call(
  321. 'watch',
  322. 'board',
  323. Session.get('currentBoard'),
  324. level,
  325. (err, ret) => {
  326. if (!err && ret) Popup.back();
  327. },
  328. );
  329. },
  330. },
  331. ];
  332. },
  333. }).register('boardChangeWatchPopup');
  334. /*
  335. BlazeComponent.extendComponent({
  336. onCreated() {
  337. //this.sortBy = new ReactiveVar();
  338. ////this.sortDirection = new ReactiveVar();
  339. //this.setSortBy();
  340. this.downClass = DOWNCLS;
  341. this.upClass = UPCLS;
  342. },
  343. allowedSortValues() {
  344. const types = [];
  345. const pushed = {};
  346. Meteor.user()
  347. .getListSortTypes()
  348. .forEach(type => {
  349. const key = type.replace(/^-/, '');
  350. if (pushed[key] === undefined) {
  351. types.push({
  352. name: key,
  353. label: `list-label-${key}`,
  354. shortLabel: `list-label-short-${key}`,
  355. });
  356. pushed[key] = 1;
  357. }
  358. });
  359. return types;
  360. },
  361. Direction() {
  362. return Meteor.user().getListSortByDirection() === -1
  363. ? this.downClass
  364. : this.upClass;
  365. },
  366. sortby() {
  367. return Meteor.user().getListSortBy();
  368. },
  369. setSortBy(type = null) {
  370. const user = Meteor.user();
  371. if (type === null) {
  372. type = user._getListSortBy();
  373. } else {
  374. let value = '';
  375. if (type.map) {
  376. // is an array
  377. value = (type[1] === -1 ? '-' : '') + type[0];
  378. }
  379. Meteor.call('setListSortBy', value);
  380. }
  381. //this.sortBy.set(type[0]);
  382. //this.sortDirection.set(type[1]);
  383. },
  384. events() {
  385. return [
  386. {
  387. 'click .js-sort-by'(evt) {
  388. evt.preventDefault();
  389. const target = evt.target;
  390. const sortby = target.getAttribute('name');
  391. const down = !!target.querySelector(`.${this.upClass}`);
  392. const direction = down ? -1 : 1;
  393. this.setSortBy([sortby, direction]);
  394. if (Utils.isMiniScreen) {
  395. Popup.back();
  396. }
  397. },
  398. },
  399. ];
  400. },
  401. }).register('listsortPopup');
  402. */
  403. BlazeComponent.extendComponent({
  404. events() {
  405. return [
  406. {
  407. 'click .js-sort-due'() {
  408. const sortBy = {
  409. dueAt: 1,
  410. };
  411. Session.set('sortBy', sortBy);
  412. sortCardsBy.set(TAPi18n.__('due-date'));
  413. Popup.back();
  414. },
  415. 'click .js-sort-title'() {
  416. const sortBy = {
  417. title: 1,
  418. };
  419. Session.set('sortBy', sortBy);
  420. sortCardsBy.set(TAPi18n.__('title'));
  421. Popup.back();
  422. },
  423. 'click .js-sort-created-asc'() {
  424. const sortBy = {
  425. createdAt: 1,
  426. };
  427. Session.set('sortBy', sortBy);
  428. sortCardsBy.set(TAPi18n.__('date-created-newest-first'));
  429. Popup.back();
  430. },
  431. 'click .js-sort-created-desc'() {
  432. const sortBy = {
  433. createdAt: -1,
  434. };
  435. Session.set('sortBy', sortBy);
  436. sortCardsBy.set(TAPi18n.__('date-created-oldest-first'));
  437. Popup.back();
  438. },
  439. },
  440. ];
  441. },
  442. }).register('cardsSortPopup');