boardHeader.js 12 KB

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