Taskboard.js 41 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123
  1. (function (global, factory) {
  2. if (typeof define === "function" && define.amd) {
  3. define("/App/Taskboard", ["exports", "Site"], factory);
  4. } else if (typeof exports !== "undefined") {
  5. factory(exports, require("Site"));
  6. } else {
  7. var mod = {
  8. exports: {}
  9. };
  10. factory(mod.exports, global.Site);
  11. global.AppTaskboard = mod.exports;
  12. }
  13. })(this, function (_exports, _Site2) {
  14. "use strict";
  15. Object.defineProperty(_exports, "__esModule", {
  16. value: true
  17. });
  18. _exports.run = run;
  19. _exports.getInstance = getInstance;
  20. _exports.default = _exports.AppTaskboard = void 0;
  21. _Site2 = babelHelpers.interopRequireDefault(_Site2);
  22. var dataTpl = function dataTpl() {
  23. var data = {
  24. status: false,
  25. title: '',
  26. description: '',
  27. priority: 'normal',
  28. duedate: '',
  29. members: [],
  30. subtasks: [],
  31. attachments: [],
  32. comments: []
  33. };
  34. return data;
  35. };
  36. var StageList =
  37. /*#__PURE__*/
  38. function () {
  39. function StageList($el, data) {
  40. babelHelpers.classCallCheck(this, StageList);
  41. this.$el = $el;
  42. this.data = data;
  43. this.render();
  44. this.$el.sortable({
  45. handle: '.taskboard-stage-header'
  46. });
  47. }
  48. babelHelpers.createClass(StageList, [{
  49. key: "add",
  50. value: function add() {
  51. var stage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  52. if (stage instanceof Stage) {
  53. this.$el.append(stage.$el);
  54. } else {
  55. this.add(this.createStage(stage));
  56. }
  57. }
  58. }, {
  59. key: "createStage",
  60. value: function createStage(data) {
  61. return new Stage(data);
  62. }
  63. }, {
  64. key: "render",
  65. value: function render() {
  66. var length = this.data.length;
  67. for (var i = 0; i < length; i++) {
  68. var stage = this.createStage(this.data[i]);
  69. this.add(stage);
  70. }
  71. }
  72. }]);
  73. return StageList;
  74. }();
  75. var Stage =
  76. /*#__PURE__*/
  77. function () {
  78. function Stage(data) {
  79. babelHelpers.classCallCheck(this, Stage);
  80. this.data = data;
  81. this.$el = null;
  82. this.$taskList = null;
  83. this.taskList = null;
  84. this.render();
  85. this.$stageDropdownArrow = $('.taskboard-stage-actions a[data-toggle="dropdown"]', this.$el);
  86. this.bindStageDropdownArrow();
  87. this.$renameBtn = $('.taskboard-stage-rename', this.$el);
  88. this.bindRenameBtn();
  89. this.$renameSaveBtn = $('.taskboard-stage-rename-save', this.$el);
  90. this.bindRenameSaveBtn();
  91. this.$deleteBtn = $('.taskboard-stage-delete', this.$el);
  92. this.bindDeleteBtn();
  93. }
  94. babelHelpers.createClass(Stage, [{
  95. key: "render",
  96. value: function render() {
  97. this.$el = $(this.getTpl(this.data.title));
  98. this.$taskList = this.$el.find('.taskboard-list');
  99. var tasksData = this.data.tasks;
  100. this.taskList = new TaskList(this.$taskList, tasksData);
  101. }
  102. }, {
  103. key: "getTpl",
  104. value: function getTpl(title) {
  105. return "\n <li class=\"taskboard-stage\">\n <header class=\"taskboard-stage-header\">\n <div class=\"taskboard-stage-actions float-right\">\n <div class=\"dropdown\">\n <a data-toggle=\"dropdown\" href=\"#\" aria-expanded=\"false\"><i class=\"icon wb-chevron-down\" aria-hidden=\"true\"></i></a>\n <div class=\"dropdown-menu bullet\" role=\"menu\">\n <a class=\"taskboard-stage-rename dropdown-item\" href=\"javascript:void(0)\" role=\"menuitem\"><i class=\"icon wb-pencil\" aria-hidden=\"true\"></i>Rename</a>\n <a class=\"taskboard-stage-delete dropdown-item\" href=\"javascript:void(0)\" role=\"menuitem\"><i class=\"icon wb-trash\" aria-hidden=\"true\"></i>Delete</a>\n <div class=\"taskboard-stage-rename-wrap\">\n <div class=\"form-group\">\n <input class=\"form-control taskboard-stage-rename-input\" type=\"text\" value=\"".concat(title, "\" name=\"name\">\n </div>\n <button class=\"btn btn-primary btn-block taskboard-stage-rename-save\" type=\"button\">Save</button>\n </div>\n </div>\n </div>\n </div>\n <h5 class=\"taskboard-stage-title\">").concat(title, "</h5>\n </header>\n <div class=\"taskboard-stage-content\">\n <ul class=\"list-group taskboard-list\"></ul>\n <div class=\"action-wrap\">\n <a class=\"add-item-toggle\" href=\"#\"><i class=\"icon wb-plus\" aria-hidden=\"true\"></i>Add Task</a>\n <div class=\"add-item-wrap\">\n <form class=\"add-item\" role=\"form\" method=\"post\" action=\"#\">\n <div class=\"form-group\">\n <label class=\"form-control-label mb-15\" for=\"name\">Task name:</label>\n <input class=\"form-control\" type=\"text\" placeholder=\"Task name\" name=\"name\">\n </div>\n <div class=\"form-group text-right\">\n <a class=\"btn btn-sm btn-white add-item-cancel\">Cancel</a>\n <button type=\"button\" class=\"btn btn-primary add-item-add\">Add</button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </li>\n ");
  106. }
  107. }, {
  108. key: "bindStageDropdownArrow",
  109. value: function bindStageDropdownArrow() {
  110. this.$stageDropdownArrow.on('click', function () {
  111. $(this).next('.dropdown-menu').removeClass('is-edit');
  112. });
  113. }
  114. }, {
  115. key: "bindRenameBtn",
  116. value: function bindRenameBtn() {
  117. this.$renameBtn.on('click', function (e) {
  118. var $header = $(this).closest('.taskboard-stage-header');
  119. var $menu = $(this).closest('.dropdown-menu');
  120. var $input = $('.taskboard-stage-rename-input', $menu);
  121. var $title = $('.taskboard-stage-title', $header);
  122. $menu.toggleClass('is-edit');
  123. $input.val('').focus().val($title.html());
  124. e.stopPropagation();
  125. });
  126. }
  127. }, {
  128. key: "bindRenameSaveBtn",
  129. value: function bindRenameSaveBtn() {
  130. this.$renameSaveBtn.on('click', function () {
  131. var $header = $(this).closest('.taskboard-stage-header');
  132. var $input = $('.taskboard-stage-rename-input', $header);
  133. var $title = $('.taskboard-stage-title', $header);
  134. var value = $input.val();
  135. if (value.length === 0) {
  136. return;
  137. }
  138. $title.html(value);
  139. });
  140. }
  141. }, {
  142. key: "bindDeleteBtn",
  143. value: function bindDeleteBtn() {
  144. this.$deleteBtn.on('click', function () {
  145. var $this = $(this);
  146. bootbox.dialog({
  147. message: 'Do you want to delete the stage?',
  148. buttons: {
  149. success: {
  150. label: 'Delete',
  151. className: 'btn-danger',
  152. callback: function callback() {
  153. $this.closest('.taskboard-stage').remove();
  154. }
  155. }
  156. }
  157. });
  158. });
  159. }
  160. }]);
  161. return Stage;
  162. }();
  163. var TaskList =
  164. /*#__PURE__*/
  165. function () {
  166. function TaskList($el, data) {
  167. babelHelpers.classCallCheck(this, TaskList);
  168. this.$el = $el;
  169. this.data = data;
  170. this.render();
  171. this.$el.sortable({
  172. connectWith: '.taskboard-stage .list-group'
  173. });
  174. this.$wrap = this.$el.parent().find('.action-wrap');
  175. this.$addItemToggle = this.$wrap.find('.add-item-toggle');
  176. this.bindAddItemToggle();
  177. this.$addItemBtn = this.$wrap.find('.add-item-add');
  178. this.bindAddItemBtn();
  179. this.$cancelBtn = this.$wrap.find('.add-item-cancel');
  180. this.bindCancelBtn();
  181. this.bindTaskInput();
  182. this.handleOpenSlidePanel();
  183. }
  184. babelHelpers.createClass(TaskList, [{
  185. key: "add",
  186. value: function add() {
  187. var task = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  188. if (task instanceof Task) {
  189. this.$el.append(task.$el);
  190. } else {
  191. var taskObj = this.createTask(task);
  192. taskObj.$el.data('taskInfo', task);
  193. this.add(taskObj);
  194. }
  195. }
  196. }, {
  197. key: "createTask",
  198. value: function createTask(data) {
  199. return new Task(data);
  200. }
  201. }, {
  202. key: "render",
  203. value: function render() {
  204. var length = this.data.length;
  205. if (length === 0) {
  206. return;
  207. }
  208. for (var i = 0; i < length; i++) {
  209. var task = this.createTask(this.data[i]);
  210. task.$el.data('taskInfo', this.data[i]);
  211. this.add(task);
  212. }
  213. }
  214. }, {
  215. key: "bindAddItemToggle",
  216. value: function bindAddItemToggle() {
  217. var _this2 = this;
  218. this.$addItemToggle.on('click', function () {
  219. var $input = $('[name="name"]', _this2.$wrap);
  220. _this2.$wrap.toggleClass('action-open');
  221. $input.val('');
  222. });
  223. this.$wrap.on('click.add-item', '.form-control-label', function (e) {
  224. _this2.$wrap.removeClass('action-open');
  225. _this2.$el.off('click.add-item');
  226. });
  227. }
  228. }, {
  229. key: "bindAddItemBtn",
  230. value: function bindAddItemBtn() {
  231. var _this3 = this;
  232. this.$addItemBtn.on('click', function () {
  233. var $input = $('[name="name"]', _this3.$wrap);
  234. var taskData = dataTpl();
  235. if ($input.val().length !== 0) {
  236. taskData.title = $input.val();
  237. _this3.add(taskData);
  238. }
  239. _this3.$wrap.toggleClass('action-open');
  240. });
  241. }
  242. }, {
  243. key: "bindCancelBtn",
  244. value: function bindCancelBtn() {
  245. var self = this;
  246. this.$cancelBtn.on('click', function () {
  247. self.$wrap.toggleClass('action-open');
  248. });
  249. }
  250. }, {
  251. key: "bindTaskInput",
  252. value: function bindTaskInput() {
  253. this.$el.on('click', '.checkbox-custom input', function (e) {
  254. var $this = $(this);
  255. var $target = $this.closest('.list-group-item');
  256. var taskData = $target.data('taskInfo');
  257. taskData.complete = $this.prop('checked');
  258. $target.data('taskInfo', taskData);
  259. e.stopPropagation();
  260. });
  261. }
  262. }, {
  263. key: "openSlidePanel",
  264. value: function openSlidePanel(jsonObj, showOptions) {
  265. if (typeof $.slidePanel === 'undefined') {
  266. return;
  267. }
  268. slidePanel.show(jsonObj, showOptions);
  269. }
  270. }, {
  271. key: "handleOpenSlidePanel",
  272. value: function handleOpenSlidePanel() {
  273. var self = this;
  274. var options = $.extend({}, slidePanel.defaults, slidePanel.defaultsOptions);
  275. this.$el.on('click', '[data-taskboard="slidePanel"]', function (e) {
  276. var $target = $(e.target).closest('.list-group-item');
  277. var jsonData = {
  278. url: $(this).data('url'),
  279. target: $target
  280. };
  281. self.openSlidePanel(jsonData, options);
  282. e.stopPropagation();
  283. });
  284. }
  285. }]);
  286. return TaskList;
  287. }();
  288. var sildePaneldefaults = Plugin.getDefaults('slidePanel');
  289. var sildePaneldefaultsOptions = {
  290. template: function template(options) {
  291. return "\n <div class=\"".concat(options.classes.base, " ").concat(options.classes.base, "-").concat(options.direction, "\">\n <div class=\"").concat(options.classes.base, "-scrollable\"><div>\n <div class=\"").concat(options.classes.content, "\"></div>\n </div></div>\n <div class=\"").concat(options.classes.base, "-handler\"></div>\n </div>\n ");
  292. },
  293. afterLoad: function afterLoad(object) {
  294. var _this = this;
  295. var $target = $(object.target);
  296. var info = $target.data('taskInfo');
  297. this.$panel.find(".".concat(this.options.classes.base, "-scrollable")).asScrollable({
  298. namespace: 'scrollable',
  299. contentSelector: '>',
  300. containerSelector: '>'
  301. });
  302. this.$panel.find('#task-description').markdown();
  303. if (typeof info !== 'undefined' && info.duedate.length > 0) {
  304. this.$panel.find('#taskDatepicker').data('date', info.duedate);
  305. }
  306. this.$panel.find('#taskDatepicker').datepicker({
  307. autoclose: false,
  308. todayHighlight: true
  309. }).on('changeDate', function () {
  310. $('#taskDatepickerInput').val(_this.$panel.find('#taskDatepicker').datepicker('getFormattedDate'));
  311. });
  312. this.$panel.data('slidePanel', object);
  313. $(document).off('click.slidePanelDatepicker');
  314. $(document).on('click.slidePanelDatepicker', 'span, td, th', function (e) {
  315. e.stopPropagation();
  316. });
  317. },
  318. afterShow: function afterShow() {
  319. var self = this;
  320. $(document).on('click.slidePanelShow', function (e) {
  321. if ($(e.target).closest('.slidePanel').length === 0 && $(e.target).closest('body').length === 1) {
  322. self.hide();
  323. }
  324. });
  325. },
  326. afterHide: function afterHide() {
  327. $(document).off('click.slidePanelShow');
  328. $(document).off('click.slidePanelDatepicker');
  329. },
  330. contentFilter: function contentFilter(data, object) {
  331. var $checked;
  332. var $panel = $(data);
  333. var $target = $(object.target);
  334. var info = $target.data('taskInfo');
  335. var $stage = $target.closest('.taskboard-stage');
  336. $('.stage-name', $panel).html($('.taskboard-stage-title', $stage.html()));
  337. $('.task-title', $panel).html(info.title);
  338. switch (info.priority) {
  339. case 'high':
  340. $checked = $('#priorityHigh', $panel);
  341. break;
  342. case 'urgent':
  343. $checked = $('#priorityUrgent', $panel);
  344. break;
  345. default:
  346. $checked = $('#priorityNormal', $panel);
  347. break;
  348. // no default
  349. }
  350. $checked.prop('checked', true);
  351. slidePanel.handleSelective($('[data-plugin="jquery-selective"]', $panel), info.members);
  352. if (info.description.length === 0) {
  353. $('.description', $panel).addClass('is-empty');
  354. } else {
  355. $('.description-content', $panel).html(info.description);
  356. }
  357. if (info.subtasks.length !== 0) {
  358. var length = info.subtasks.length;
  359. for (var i = 0; i < length; i++) {
  360. var $subtask = $(slidePanel.subtaskTpl(info.subtasks[i]));
  361. $('.subtasks-list', $panel).append($subtask);
  362. }
  363. $('.subtasks', $panel).toggleClass('is-show');
  364. }
  365. if (info.attachments.length !== 0) {
  366. var _length = info.attachments.length;
  367. for (var _i = 0; _i < _length; _i++) {
  368. var $attachment = $(slidePanel.attachmentTpl(info.attachments[_i]));
  369. $('.attachments-list', $panel).append($attachment);
  370. }
  371. $('.attachments', $panel).toggleClass('is-show');
  372. }
  373. if (info.comments.length !== 0) {
  374. var _length2 = info.comments.length;
  375. for (var _i2 = 0; _i2 < _length2; _i2++) {
  376. var $comment = $(slidePanel.commentTpl(info.comments[_i2].src, info.comments[_i2].user, info.comments[_i2].time, info.comments[_i2].content));
  377. $('.comments-history', $panel).append($comment);
  378. }
  379. }
  380. return $panel;
  381. }
  382. };
  383. var slidePanel = {
  384. defaults: sildePaneldefaults,
  385. defaultsOptions: sildePaneldefaultsOptions,
  386. handleSelective: function handleSelective($target, selected) {
  387. var getSelected = function getSelected() {
  388. var _this = this;
  389. var arr = [];
  390. $.each(this._options.getOptions(this), function (n, option) {
  391. $.each(_this.options.local, function (i, user) {
  392. if (user.id === $(option).val()) {
  393. arr.push(user);
  394. }
  395. });
  396. });
  397. return arr;
  398. };
  399. var members = [{
  400. id: 'uid_1',
  401. name: 'Herman Beck',
  402. img: '../../../../global/portraits/1.jpg'
  403. }, {
  404. id: 'uid_2',
  405. name: 'Mary Adams',
  406. img: '../../../../global/portraits/2.jpg'
  407. }, {
  408. id: 'uid_3',
  409. name: 'Caleb Richards',
  410. img: '../../../../global/portraits/3.jpg'
  411. }, {
  412. id: 'uid_4',
  413. name: 'June Lane',
  414. img: '../../../../global/portraits/4.jpg'
  415. }, {
  416. id: 'uid_5',
  417. name: 'Edward Fletcher',
  418. img: '../../../../global/portraits/5.jpg'
  419. }, {
  420. id: 'uid_6',
  421. name: 'Crystal Bates',
  422. img: '../../../../global/portraits/6.jpg'
  423. }];
  424. $target.selective({
  425. namespace: 'addMember',
  426. local: members,
  427. selected: selected,
  428. buildFromHtml: false,
  429. tpl: {
  430. optionValue: function optionValue(data) {
  431. return data.id;
  432. },
  433. frame: function frame() {
  434. return "<div class=\"".concat(this.namespace, "\">\n ").concat(this.options.tpl.items.call(this), "\n <div class=\"").concat(this.namespace, "-trigger\">\n ").concat(this.options.tpl.triggerButton.call(this), "\n <div class=\"").concat(this.namespace, "-trigger-dropdown\">\n ").concat(this.options.tpl.list.call(this), "\n </div>\n </div>\n </div>");
  435. },
  436. triggerButton: function triggerButton() {
  437. return "<div class=\"".concat(this.namespace, "-trigger-button\"><i class=\"wb-plus\"></i></div>");
  438. },
  439. listItem: function listItem(data) {
  440. return "<li class=\"".concat(this.namespace, "-list-item\"><img class=\"avatar\" src=\"").concat(data.img, "\">").concat(data.name, "</li>");
  441. },
  442. item: function item(data) {
  443. return "<li class=\"".concat(this.namespace, "-item\"><img class=\"avatar\" src=\"").concat(data.img, "\">\n ").concat(this.options.tpl.itemRemove.call(this), "\n </li>");
  444. },
  445. itemRemove: function itemRemove() {
  446. return "<span class=\"".concat(this.namespace, "-remove\"><i class=\"wb-minus-circle\"></i></span>");
  447. },
  448. option: function option(data) {
  449. return "<option value=\"".concat(this.options.tpl.optionValue.call(this, data), "\">").concat(data.name, "</option>");
  450. }
  451. },
  452. onAfterItemAdd: function onAfterItemAdd() {
  453. var $target = this.$element.closest('.slidePanel').data('slidePanel').target;
  454. var arr = getSelected.call(this);
  455. var taskData = $target.data('taskInfo');
  456. taskData.members = arr;
  457. $target.data('taskInfo', taskData);
  458. var $memberList = $target.find('.task-members');
  459. var memberList = new MemberList($memberList, arr);
  460. },
  461. onAfterItemRemove: function onAfterItemRemove() {
  462. var $target = this.$element.closest('.slidePanel').data('slidePanel').target;
  463. var arr = getSelected.call(this);
  464. var taskData = $target.data('taskInfo');
  465. taskData.members = arr;
  466. $target.data('taskInfo', taskData);
  467. var $memberList = $target.find('.task-members');
  468. var memberList = new MemberList($memberList, arr);
  469. }
  470. });
  471. },
  472. subtaskTpl: function subtaskTpl(data) {
  473. var checkedString = data.complete ? 'checked="checked"' : '';
  474. return "\n <li class=\"list-group-item subtask\">\n <div class=\"checkbox-custom checkbox-primary\">\n <input type=\"checkbox\" ".concat(checkedString, " name=\"checkbox\">\n <label class=\"title\">").concat(data.title, "</label>\n </div>\n <div class=\"subtask-editor\">\n <form>\n <div class=\"form-group\">\n <input class=\"form-control subtask-title\" type=\"text\" name=\"title\">\n </div>\n <div class=\"form-group\">\n <button class=\"btn btn-primary subtask-editor-save\" type=\"button\">Save</button>\n <a class=\"btn btn-sm btn-white subtask-editor-delete\" href=\"javascript:void(0)\">Delete</a>\n </div>\n </form>\n </div>\n </li>\n ");
  475. },
  476. attachmentTpl: function attachmentTpl(data) {
  477. return "\n <li class=\"list-group-item\">\n <div class=\"meida\">\n <div class=\"pr-20\">\n <div class=\"attachments-image\">\n <img src=\"".concat(data.src, "\">\n </div>\n </div>\n <div class=\"media-body\">\n <p><span class=\"name\">").concat(data.title, "</span><span</p>\n <p>\n <span class=\"size\">").concat(data.size, "</span>\n <span class=\"attachments-actions\">\n <button class=\"btn btn-icon btn-pure\" type=\"button\">\n <i class=\"icon wb-download\" aria-hidden=\"true\"></i>\n </button>\n <button class=\"btn btn-icon btn-pure\" type=\"button\">\n <i class=\"icon wb-trash\" aria-hidden=\"true\"></i>\n </button>\n </span>\n </p>\n </div>\n </div>\n </li>\n ");
  478. },
  479. commentTpl: function commentTpl(src, user, time, content) {
  480. return "\n <div class=\"comment media\">\n <div class=\"pr-20\">\n <a class=\"avatar avatar-lg\" href=\"javascript:void(0)\">\n <img src=\"".concat(src, "\" alt=\"...\">\n </a>\n </div>\n <div class=\"media-body\">\n <div class=\"comment-body\">\n <a class=\"comment-author\" href=\"javascript:void(0)\">").concat(user, "</a>\n <div class=\"comment-meta\">\n <span class=\"date\">").concat(time, "</span>\n </div>\n <div class=\"comment-content\"><p>").concat(content, "</p></div>\n </div>\n </div>\n ");
  481. },
  482. handlePriority: function handlePriority() {
  483. $(document).on('click', '[name="priorities"]', function () {
  484. var $this = $(this);
  485. var $target = $this.closest('.slidePanel').data('slidePanel').target;
  486. var taskData = $target.data('taskInfo');
  487. taskData.priority = $this.data('priority');
  488. $target.data('taskInfo', taskData);
  489. $target.removeClass('priority-normal priority-high priority-urgent').addClass("priority-".concat($target.data('taskInfo').priority));
  490. });
  491. },
  492. handleDeleteTask: function handleDeleteTask() {
  493. $(document).on('click', '.taskboard-task-delete', function () {
  494. var $this = $(this);
  495. bootbox.dialog({
  496. message: 'Do you want to delete the task?',
  497. buttons: {
  498. success: {
  499. label: 'Delete',
  500. className: 'btn-danger',
  501. callback: function callback() {
  502. $this.closest('.slidePanel').data('slidePanel').target.remove();
  503. $('.slidePanel-close').trigger('click');
  504. }
  505. }
  506. }
  507. });
  508. });
  509. },
  510. handleEditor: function handleEditor() {
  511. $(document).on('click', '.slidePanel .task-title, .taskboard-task-edit, .description-toggle', function () {
  512. var $this = $(this);
  513. var $target = $this.closest('.slidePanel').data('slidePanel').target;
  514. var data = $target.data('taskInfo');
  515. $('#task-title').val(data.title);
  516. $('#task-description').val(data.description);
  517. $this.closest('.slidePanel').find('.task-main').addClass('is-edit');
  518. });
  519. $(document).on('click', '.task-main-editor-save', function () {
  520. var $this = $(this);
  521. var $target = $this.closest('.slidePanel').data('slidePanel').target;
  522. var taskData = $target.data('taskInfo');
  523. taskData.title = $('#task-title').val();
  524. taskData.description = $('#task-description').val();
  525. $target.data('taskInfo', taskData);
  526. $('.task-title', $target).html($target.data('taskInfo').title);
  527. $('.slidePanel .task-title').html($target.data('taskInfo').title);
  528. $('.slidePanel .description-content').html($target.data('taskInfo').description);
  529. $this.closest('.slidePanel').find('.task-main').removeClass('is-edit');
  530. if ($('#task-description').val().length === 0) {
  531. $('.description').addClass('is-empty');
  532. } else {
  533. $('.description').removeClass('is-empty');
  534. }
  535. });
  536. $(document).on('click', '.task-main-editor-cancel', function () {
  537. $(this).closest('.slidePanel').find('.task-main').removeClass('is-edit');
  538. });
  539. },
  540. handleSubtasks: function handleSubtasks() {
  541. var self = this;
  542. $(document).on('click', '.subtask-toggle', function () {
  543. var length = $('.subtask').length;
  544. var $input = $('.subtasks-add .subtask-title');
  545. var $subtasks = $('.subtasks');
  546. $input.val('');
  547. if (length === 0) {
  548. $subtasks.addClass('is-show');
  549. }
  550. $subtasks.addClass('is-edit');
  551. $input.focus();
  552. $(document).on('click.subtask-add', function (e) {
  553. var $target = $(e.target);
  554. if ($target.closest($('.subtasks-add')).length === 0) {
  555. $subtasks.removeClass('is-edit');
  556. $(document).off('click.subtask-add');
  557. }
  558. });
  559. });
  560. $(document).on('click', '.subtask-add-save', function () {
  561. var $input = $('.subtasks-add .subtask-title');
  562. var $subtasks = $('.subtasks');
  563. var $target = $(this).closest('.slidePanel').data('slidePanel').target;
  564. var length = $('.subtask').length;
  565. var taskData = $target.data('taskInfo');
  566. var value = $input.val();
  567. if (value.length === 0) {
  568. if (length === 0) {
  569. $subtasks.removeClass('is-show');
  570. }
  571. } else {
  572. var data = {
  573. title: value,
  574. complete: false
  575. };
  576. var $subtask = $(self.subtaskTpl(data));
  577. $('.subtasks-list').append($subtask);
  578. taskData.subtasks[length] = data;
  579. $target.data('taskInfo', taskData);
  580. var $badgeList = $target.find('.task-badges');
  581. var badgeList = new BadgeList($badgeList, $target.data('taskInfo'));
  582. }
  583. $input.val('').focus();
  584. });
  585. $(document).on('click', '.subtask-add-cancel', function () {
  586. $('.subtasks').removeClass('is-edit');
  587. $(document).off('click.subtask-add');
  588. });
  589. $(document).on('click', '.subtask input', function () {
  590. var $this = $(this);
  591. var $subtask = $this.closest('.subtask');
  592. var $target = $this.closest('.slidePanel').data('slidePanel').target;
  593. var index = $subtask.index();
  594. var taskData = $target.data('taskInfo');
  595. taskData.subtasks[index].complete = $this.prop('checked');
  596. $target.data('taskInfo', taskData);
  597. var $badgeList = $target.find('.task-badges');
  598. var badgeList = new BadgeList($badgeList, $target.data('taskInfo'));
  599. });
  600. $(document).on('click', '.subtask .title', function () {
  601. var $this = $(this);
  602. var $subtask = $this.closest('.subtask');
  603. var $target = $this.closest('.slidePanel').data('slidePanel').target;
  604. var data = $target.data('taskInfo');
  605. var index = $subtask.index();
  606. var $input = $('.subtask-title', $subtask);
  607. $subtask.addClass('is-edit');
  608. $input.val('').focus().val(data.subtasks[index].title);
  609. $(document).on('click.subtask', function (e) {
  610. var $target = $(e.target);
  611. if ($target.closest($subtask).length === 0) {
  612. $subtask.removeClass('is-edit');
  613. $(document).off('click.subtask');
  614. }
  615. });
  616. });
  617. $(document).on('click', '.subtask-editor-save', function () {
  618. var $this = $(this);
  619. var $subtask = $this.closest('.subtask');
  620. var $target = $this.closest('.slidePanel').data('slidePanel').target;
  621. var data = $target.data('taskInfo');
  622. var index = $subtask.index();
  623. var taskData = $target.data('taskInfo');
  624. taskData.subtasks[index].title = $('.subtask-title', $subtask).val();
  625. $target.data('taskInfo', taskData);
  626. $('.title', $('.subtasks-list .subtask')[index]).html($('.subtask-title', $subtask).val());
  627. $subtask.removeClass('is-edit');
  628. $(document).off('click.subtask');
  629. });
  630. $(document).on('click', '.subtask-editor-delete', function (e) {
  631. var $this = $(this);
  632. bootbox.dialog({
  633. message: 'Do you want to delete the subtask?',
  634. buttons: {
  635. success: {
  636. label: 'Delete',
  637. className: 'btn-danger',
  638. callback: function callback() {
  639. var $subtask = $this.closest('.subtask');
  640. var $target = $this.closest('.slidePanel').data('slidePanel').target;
  641. var data = $target.data('taskInfo');
  642. var index = $subtask.index();
  643. var taskData = $target.data('taskInfo');
  644. taskData.subtasks.splice(index, 1);
  645. $target.data('taskInfo', taskData);
  646. var $badgeList = $target.find('.task-badges');
  647. var badgeList = new BadgeList($badgeList, $target.data('taskInfo'));
  648. $subtask.remove();
  649. $(document).off('click.subtask');
  650. if ($('.subtask').length === 0) {
  651. $('.subtasks').removeClass('is-show');
  652. }
  653. }
  654. }
  655. }
  656. });
  657. });
  658. },
  659. handleDatepicker: function handleDatepicker() {
  660. $(document).on('click', '.due-date-save', function () {
  661. var $this = $(this);
  662. var $target = $this.closest('.slidePanel').data('slidePanel').target;
  663. var taskData = $target.data('taskInfo');
  664. var value = $('#taskDatepickerInput').val();
  665. if (value.length > 0) {
  666. taskData.duedate = value;
  667. $target.data('taskInfo', taskData);
  668. var $badgeList = $target.find('.task-badges');
  669. var badgeList = new BadgeList($badgeList, $target.data('taskInfo'));
  670. }
  671. });
  672. $(document).on('click', '.due-date-delete', function () {
  673. var $this = $(this);
  674. var $target = $this.closest('.slidePanel').data('slidePanel').target;
  675. var taskData = $target.data('taskInfo');
  676. if (taskData.duedate.length === 0) {
  677. return;
  678. }
  679. taskData.duedate = '';
  680. $target.data('taskInfo', taskData);
  681. var $badgeList = $target.find('.task-badges');
  682. var badgeList = new BadgeList($badgeList, $target.data('taskInfo'));
  683. $('#taskDatepicker').datepicker('clearDates');
  684. });
  685. },
  686. handleAttachment: function handleAttachment() {
  687. $(document).on('click', '#fileuploadToggle', function () {
  688. $('#fileupload').trigger('click');
  689. });
  690. },
  691. show: function show(jsonObj, showOptions) {
  692. $.slidePanel.show(jsonObj, showOptions);
  693. }
  694. };
  695. var Task =
  696. /*#__PURE__*/
  697. function () {
  698. function Task(data) {
  699. babelHelpers.classCallCheck(this, Task);
  700. this.$el = null;
  701. this.data = data;
  702. this.$taskBages = null;
  703. this.$taskMembers = null;
  704. this.badgeList = null;
  705. this.memberList = null;
  706. this.render(this.once);
  707. }
  708. babelHelpers.createClass(Task, [{
  709. key: "render",
  710. value: function render() {
  711. this.$el = $(this.getTpl(this.data));
  712. this.$taskBages = this.$el.find('.task-badges');
  713. this.badgeList = new BadgeList(this.$taskBages, this.data);
  714. if (this.data.members.length > 0) {
  715. this.$taskMembers = this.$el.find('.task-members');
  716. this.memberList = new MemberList(this.$taskMembers, this.data.members);
  717. }
  718. }
  719. }, {
  720. key: "getTpl",
  721. value: function getTpl(data) {
  722. var checkedString = data.complete ? 'checked="checked"' : '';
  723. return "\n <li class=\"list-group-item priority-".concat(data.priority, "\" data-taskboard=\"slidePanel\" data-url=\"panel.tpl\">\n <div class=\"checkbox-custom checkbox-primary\">\n <input type=\"checkbox\" ").concat(checkedString, " name=\"checkbox\">\n <label class=\"task-title\">").concat(data.title, "</label>\n </div>\n <div class=\"w-full\">\n <div class=\"task-badges\"></div>\n <ul class=\"task-members\">\n <li><img class=\"avatar avatar-sm\" src=\"../../../../global/portraits/5.jpg\"></li>\n </ul>\n </div>\n </li>\n ");
  724. }
  725. }]);
  726. return Task;
  727. }();
  728. var BadgeList =
  729. /*#__PURE__*/
  730. function () {
  731. function BadgeList($el, data) {
  732. babelHelpers.classCallCheck(this, BadgeList);
  733. this.$el = $el;
  734. this.data = data;
  735. this.render();
  736. }
  737. babelHelpers.createClass(BadgeList, [{
  738. key: "add",
  739. value: function add(badge) {
  740. this.$el.append(badge.$el);
  741. }
  742. }, {
  743. key: "render",
  744. value: function render() {
  745. var _duedateData$subtasks = {
  746. duedateData: this.data.duedate,
  747. subtasksData: this.data.subtasks,
  748. attachmentsData: this.data.attachments,
  749. commentsData: this.data.comments
  750. },
  751. duedateData = _duedateData$subtasks.duedateData,
  752. subtasksData = _duedateData$subtasks.subtasksData,
  753. attachmentsData = _duedateData$subtasks.attachmentsData,
  754. commentsData = _duedateData$subtasks.commentsData;
  755. this.$el.children().remove();
  756. if (duedateData.length > 0) {
  757. var duedate = new Duedate(duedateData);
  758. this.add(duedate);
  759. }
  760. if (subtasksData.length > 0) {
  761. var subtasks = new Subtask(subtasksData);
  762. this.add(subtasks);
  763. }
  764. if (attachmentsData.length > 0) {
  765. var attachments = new Attachment(attachmentsData);
  766. this.add(attachments);
  767. }
  768. if (commentsData.length > 0) {
  769. var comments = new Comment(commentsData);
  770. this.add(comments);
  771. }
  772. }
  773. }]);
  774. return BadgeList;
  775. }();
  776. var Duedate =
  777. /*#__PURE__*/
  778. function () {
  779. function Duedate(data) {
  780. babelHelpers.classCallCheck(this, Duedate);
  781. this.data = data;
  782. this.$el = null;
  783. this.render();
  784. }
  785. babelHelpers.createClass(Duedate, [{
  786. key: "render",
  787. value: function render() {
  788. this.$el = $(this.getTpl(this.data.split(/\//, 2).join('/')));
  789. }
  790. }, {
  791. key: "getTpl",
  792. value: function getTpl(content) {
  793. return "<span class=\"task-badge task-badge-subtask icon wb-calendar\">".concat(content, "</span>");
  794. }
  795. }]);
  796. return Duedate;
  797. }();
  798. var Subtask =
  799. /*#__PURE__*/
  800. function () {
  801. function Subtask(data) {
  802. babelHelpers.classCallCheck(this, Subtask);
  803. this.data = data;
  804. this.$el = null;
  805. this.render();
  806. }
  807. babelHelpers.createClass(Subtask, [{
  808. key: "render",
  809. value: function render() {
  810. var length = this.data.length;
  811. if (length > 0) {
  812. var num = 0;
  813. for (var i = 0; i < length; i++) {
  814. if (this.data[i].complete) {
  815. num++;
  816. }
  817. }
  818. this.$el = $(this.getTpl("".concat(num, "/").concat(length)));
  819. }
  820. }
  821. }, {
  822. key: "getTpl",
  823. value: function getTpl(content) {
  824. return "<span class=\"task-badge task-badge-subtask icon wb-list-bulleted\">".concat(content, "</span>");
  825. }
  826. }]);
  827. return Subtask;
  828. }();
  829. var Attachment =
  830. /*#__PURE__*/
  831. function () {
  832. function Attachment(data) {
  833. babelHelpers.classCallCheck(this, Attachment);
  834. this.data = data;
  835. this.$el = null;
  836. this.render();
  837. }
  838. babelHelpers.createClass(Attachment, [{
  839. key: "render",
  840. value: function render() {
  841. var length = this.data.length;
  842. if (length > 0) {
  843. this.$el = $(this.getTpl(this.data.length));
  844. }
  845. }
  846. }, {
  847. key: "getTpl",
  848. value: function getTpl(content) {
  849. return "<span class=\"task-badge task-badge-attachments icon wb-paperclip\">".concat(content, "</span>");
  850. }
  851. }]);
  852. return Attachment;
  853. }();
  854. var Comment =
  855. /*#__PURE__*/
  856. function () {
  857. function Comment(data) {
  858. babelHelpers.classCallCheck(this, Comment);
  859. this.data = data;
  860. this.$el = null;
  861. this.render();
  862. }
  863. babelHelpers.createClass(Comment, [{
  864. key: "render",
  865. value: function render() {
  866. var length = this.data.length;
  867. if (length > 0) {
  868. this.$el = $(this.getTpl(this.data.length));
  869. }
  870. }
  871. }, {
  872. key: "getTpl",
  873. value: function getTpl(content) {
  874. return "<span class=\"task-badge task-badge-comments icon wb-chat\">".concat(content, "</span>");
  875. }
  876. }]);
  877. return Comment;
  878. }();
  879. var MemberList =
  880. /*#__PURE__*/
  881. function () {
  882. function MemberList($el, data) {
  883. babelHelpers.classCallCheck(this, MemberList);
  884. this.$el = $el;
  885. this.data = data;
  886. this.render();
  887. }
  888. babelHelpers.createClass(MemberList, [{
  889. key: "createMember",
  890. value: function createMember(data) {
  891. return new Member(data);
  892. }
  893. }, {
  894. key: "add",
  895. value: function add() {
  896. var member = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  897. if (member instanceof Member) {
  898. this.$el.append(member.$el);
  899. } else {
  900. var memberObj = this.createMember(member);
  901. this.add(memberObj);
  902. }
  903. }
  904. }, {
  905. key: "render",
  906. value: function render() {
  907. this.$el.children().remove();
  908. if (this.data.length === 0) {
  909. return;
  910. }
  911. var length = this.data.length;
  912. for (var i = 0; i < length; i++) {
  913. this.add(this.data[i]);
  914. }
  915. }
  916. }]);
  917. return MemberList;
  918. }();
  919. var Member =
  920. /*#__PURE__*/
  921. function () {
  922. function Member(data) {
  923. babelHelpers.classCallCheck(this, Member);
  924. this.data = data;
  925. this.$el = null;
  926. this.render();
  927. }
  928. babelHelpers.createClass(Member, [{
  929. key: "render",
  930. value: function render() {
  931. this.$el = $(this.getTpl(this.data.img));
  932. }
  933. }, {
  934. key: "getTpl",
  935. value: function getTpl(src) {
  936. return "<li><img class=\"avatar avatar-sm\" src=\"".concat(src, "\"></li>");
  937. }
  938. }]);
  939. return Member;
  940. }();
  941. var AppTaskboard =
  942. /*#__PURE__*/
  943. function (_Site) {
  944. babelHelpers.inherits(AppTaskboard, _Site);
  945. function AppTaskboard() {
  946. babelHelpers.classCallCheck(this, AppTaskboard);
  947. return babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(AppTaskboard).apply(this, arguments));
  948. }
  949. babelHelpers.createClass(AppTaskboard, [{
  950. key: "initialize",
  951. value: function initialize() {
  952. babelHelpers.get(babelHelpers.getPrototypeOf(AppTaskboard.prototype), "initialize", this).call(this);
  953. this.$taskboard = $('#taskboardStages');
  954. this.stageList = null;
  955. this.createStageList();
  956. this.$floatBtn = $('.site-floataction');
  957. this.$model = $('#addStageFrom');
  958. this.$stageCreateBtn = this.$model.find('#taskboardStageCreat');
  959. }
  960. }, {
  961. key: "process",
  962. value: function process() {
  963. babelHelpers.get(babelHelpers.getPrototypeOf(AppTaskboard.prototype), "process", this).call(this);
  964. this.bindFloatBtn();
  965. this.bindStageCreateBtn();
  966. this.handleSlidePandelAction();
  967. }
  968. }, {
  969. key: "createStageList",
  970. value: function createStageList() {
  971. var _this4 = this;
  972. var assets = Config.get('assets');
  973. $.getJSON("".concat(assets, "/data/taskboard.json"), function (data) {
  974. _this4.stageList = new StageList(_this4.$taskboard, data);
  975. });
  976. }
  977. }, {
  978. key: "bindFloatBtn",
  979. value: function bindFloatBtn() {
  980. var _this5 = this;
  981. this.$floatBtn.on('click', function () {
  982. $('input', _this5.$model).val('');
  983. $('option:first', $('select', _this5.$model)).prop('selected', 'selected');
  984. });
  985. }
  986. }, {
  987. key: "bindStageCreateBtn",
  988. value: function bindStageCreateBtn() {
  989. var _this6 = this;
  990. this.$stageCreateBtn.on('click', function () {
  991. var $name = $('[name="name"]', _this6.$model);
  992. var stageData = {
  993. title: $name.val(),
  994. tasks: []
  995. };
  996. _this6.stageList.add(stageData);
  997. });
  998. }
  999. }, {
  1000. key: "handleSlidePandelAction",
  1001. value: function handleSlidePandelAction() {
  1002. slidePanel.handlePriority();
  1003. slidePanel.handleSubtasks();
  1004. slidePanel.handleDatepicker();
  1005. slidePanel.handleEditor();
  1006. slidePanel.handleDeleteTask();
  1007. slidePanel.handleAttachment();
  1008. }
  1009. }]);
  1010. return AppTaskboard;
  1011. }(_Site2.default);
  1012. _exports.AppTaskboard = AppTaskboard;
  1013. var instance = null;
  1014. function getInstance() {
  1015. if (!instance) {
  1016. instance = new AppTaskboard();
  1017. }
  1018. return instance;
  1019. }
  1020. function run() {
  1021. var app = getInstance();
  1022. app.run();
  1023. }
  1024. var _default = AppTaskboard;
  1025. _exports.default = _default;
  1026. });