sidebarCustomFields.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. BlazeComponent.extendComponent({
  2. customFields() {
  3. return CustomFields.find({
  4. boardIds: { $in: [Session.get('currentBoard')] },
  5. });
  6. },
  7. events() {
  8. return [
  9. {
  10. 'click .js-open-create-custom-field': Popup.open('createCustomField'),
  11. 'click .js-edit-custom-field': Popup.open('editCustomField'),
  12. },
  13. ];
  14. },
  15. }).register('customFieldsSidebar');
  16. const CreateCustomFieldPopup = BlazeComponent.extendComponent({
  17. _types: [
  18. 'text',
  19. 'number',
  20. 'date',
  21. 'dropdown',
  22. 'currency',
  23. 'checkbox',
  24. 'stringtemplate',
  25. ],
  26. _currencyList: [
  27. {
  28. name: 'US Dollar',
  29. code: 'USD',
  30. },
  31. {
  32. name: 'Euro',
  33. code: 'EUR',
  34. },
  35. {
  36. name: 'Yen',
  37. code: 'JPY',
  38. },
  39. {
  40. name: 'Pound Sterling',
  41. code: 'GBP',
  42. },
  43. {
  44. name: 'Australian Dollar',
  45. code: 'AUD',
  46. },
  47. {
  48. name: 'Canadian Dollar',
  49. code: 'CAD',
  50. },
  51. {
  52. name: 'Swiss Franc',
  53. code: 'CHF',
  54. },
  55. {
  56. name: 'Yuan Renminbi',
  57. code: 'CNY',
  58. },
  59. {
  60. name: 'Hong Kong Dollar',
  61. code: 'HKD',
  62. },
  63. {
  64. name: 'New Zealand Dollar',
  65. code: 'NZD',
  66. },
  67. ],
  68. onCreated() {
  69. this.type = new ReactiveVar(
  70. this.data().type ? this.data().type : this._types[0],
  71. );
  72. this.currencyCode = new ReactiveVar(
  73. this.data().settings && this.data().settings.currencyCode
  74. ? this.data().settings.currencyCode
  75. : this._currencyList[0].code,
  76. );
  77. this.dropdownItems = new ReactiveVar(
  78. this.data().settings && this.data().settings.dropdownItems
  79. ? this.data().settings.dropdownItems
  80. : [],
  81. );
  82. this.stringtemplateFormat = new ReactiveVar(
  83. this.data().settings && this.data().settings.stringtemplateFormat
  84. ? this.data().settings.stringtemplateFormat
  85. : '',
  86. );
  87. this.stringtemplateSeparator = new ReactiveVar(
  88. this.data().settings && this.data().settings.stringtemplateSeparator
  89. ? this.data().settings.stringtemplateSeparator
  90. : '',
  91. );
  92. },
  93. types() {
  94. const currentType = this.data().type;
  95. return this._types.map(type => {
  96. return {
  97. value: type,
  98. name: TAPi18n.__(`custom-field-${type}`),
  99. selected: type === currentType,
  100. };
  101. });
  102. },
  103. isTypeNotSelected(type) {
  104. return this.type.get() !== type;
  105. },
  106. getCurrencyCodes() {
  107. const currentCode = this.currencyCode.get();
  108. return this._currencyList.map(({ name, code }) => {
  109. return {
  110. name: `${code} - ${name}`,
  111. value: code,
  112. selected: code === currentCode,
  113. };
  114. });
  115. },
  116. getDropdownItems() {
  117. const items = this.dropdownItems.get();
  118. Array.from(this.findAll('.js-field-settings-dropdown input')).forEach(
  119. (el, index) => {
  120. //console.log('each item!', index, el.value);
  121. if (!items[index])
  122. items[index] = {
  123. _id: Random.id(6),
  124. };
  125. items[index].name = el.value.trim();
  126. },
  127. );
  128. return items;
  129. },
  130. getStringtemplateFormat() {
  131. return this.stringtemplateFormat.get();
  132. },
  133. getStringtemplateSeparator() {
  134. return this.stringtemplateSeparator.get();
  135. },
  136. getSettings() {
  137. const settings = {};
  138. switch (this.type.get()) {
  139. case 'currency': {
  140. const currencyCode = this.currencyCode.get();
  141. settings.currencyCode = currencyCode;
  142. break;
  143. }
  144. case 'dropdown': {
  145. const dropdownItems = this.getDropdownItems().filter(
  146. item => !!item.name.trim(),
  147. );
  148. settings.dropdownItems = dropdownItems;
  149. break;
  150. }
  151. case 'stringtemplate': {
  152. const stringtemplateFormat = this.stringtemplateFormat.get();
  153. settings.stringtemplateFormat = stringtemplateFormat;
  154. const stringtemplateSeparator = this.stringtemplateSeparator.get();
  155. settings.stringtemplateSeparator = stringtemplateSeparator;
  156. break;
  157. }
  158. }
  159. return settings;
  160. },
  161. events() {
  162. return [
  163. {
  164. 'change .js-field-type'(evt) {
  165. const value = evt.target.value;
  166. this.type.set(value);
  167. },
  168. 'change .js-field-currency'(evt) {
  169. const value = evt.target.value;
  170. this.currencyCode.set(value);
  171. },
  172. 'keydown .js-dropdown-item.last'(evt) {
  173. if (evt.target.value.trim() && evt.keyCode === 13) {
  174. const items = this.getDropdownItems();
  175. this.dropdownItems.set(items);
  176. evt.target.value = '';
  177. }
  178. },
  179. 'input .js-field-stringtemplate-format'(evt) {
  180. const value = evt.target.value;
  181. this.stringtemplateFormat.set(value);
  182. },
  183. 'input .js-field-stringtemplate-separator'(evt) {
  184. const value = evt.target.value;
  185. this.stringtemplateSeparator.set(value);
  186. },
  187. 'click .js-field-show-on-card'(evt) {
  188. let $target = $(evt.target);
  189. if (!$target.hasClass('js-field-show-on-card')) {
  190. $target = $target.parent();
  191. }
  192. $target.find('.materialCheckBox').toggleClass('is-checked');
  193. $target.toggleClass('is-checked');
  194. },
  195. 'click .js-field-automatically-on-card'(evt) {
  196. let $target = $(evt.target);
  197. if (!$target.hasClass('js-field-automatically-on-card')) {
  198. $target = $target.parent();
  199. }
  200. $target.find('.materialCheckBox').toggleClass('is-checked');
  201. $target.toggleClass('is-checked');
  202. },
  203. 'click .js-field-always-on-card'(evt) {
  204. let $target = $(evt.target);
  205. if (!$target.hasClass('js-field-always-on-card')) {
  206. $target = $target.parent();
  207. }
  208. $target.find('.materialCheckBox').toggleClass('is-checked');
  209. $target.toggleClass('is-checked');
  210. },
  211. 'click .js-field-showLabel-on-card'(evt) {
  212. let $target = $(evt.target);
  213. if (!$target.hasClass('js-field-showLabel-on-card')) {
  214. $target = $target.parent();
  215. }
  216. $target.find('.materialCheckBox').toggleClass('is-checked');
  217. $target.toggleClass('is-checked');
  218. },
  219. 'click .primary'(evt) {
  220. evt.preventDefault();
  221. const data = {
  222. name: this.find('.js-field-name').value.trim(),
  223. type: this.type.get(),
  224. settings: this.getSettings(),
  225. showOnCard: this.find('.js-field-show-on-card.is-checked') !== null,
  226. showLabelOnMiniCard:
  227. this.find('.js-field-showLabel-on-card.is-checked') !== null,
  228. automaticallyOnCard:
  229. this.find('.js-field-automatically-on-card.is-checked') !== null,
  230. alwaysOnCard:
  231. this.find('.js-field-always-on-card.is-checked') !== null,
  232. };
  233. // insert or update
  234. if (!this.data()._id) {
  235. data.boardIds = [Session.get('currentBoard')];
  236. CustomFields.insert(data);
  237. } else {
  238. CustomFields.update(this.data()._id, { $set: data });
  239. }
  240. Popup.back();
  241. },
  242. 'click .js-delete-custom-field': Popup.afterConfirm(
  243. 'deleteCustomField',
  244. function() {
  245. const customField = CustomFields.findOne(this._id);
  246. if (customField.boardIds.length > 1) {
  247. CustomFields.update(customField._id, {
  248. $pull: {
  249. boardIds: Session.get('currentBoard'),
  250. },
  251. });
  252. } else {
  253. CustomFields.remove(customField._id);
  254. }
  255. Popup.close();
  256. },
  257. ),
  258. },
  259. ];
  260. },
  261. });
  262. CreateCustomFieldPopup.register('createCustomFieldPopup');
  263. (class extends CreateCustomFieldPopup {
  264. template() {
  265. return 'createCustomFieldPopup';
  266. }
  267. }.register('editCustomFieldPopup'));
  268. /*Template.deleteCustomFieldPopup.events({
  269. 'submit'(evt) {
  270. const customFieldId = this._id;
  271. CustomFields.remove(customFieldId);
  272. Popup.close();
  273. }
  274. });*/