Source: CategorySelector.es.js

  1. /**
  2.  * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
  3.  *
  4.  * This library is free software; you can redistribute it and/or modify it under
  5.  * the terms of the GNU Lesser General Public License as published by the Free
  6.  * Software Foundation; either version 2.1 of the License, or (at your option)
  7.  * any later version.
  8.  *
  9.  * This library is distributed in the hope that it will be useful, but WITHOUT
  10.  * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
  11.  * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
  12.  * details.
  13.  */
  15. import Component from 'metal-component';
  16. import Soy from 'metal-soy';
  17. import {Config} from 'metal-state';
  19. import templates from './CategorySelector.soy';
  21. /**
  22.  * CategorySelector is a temporary Component wrapping the existing
  23.  * AUI module liferay-commerce-frontend-asset-categories-selector
  24.  */
  25. class CategorySelector extends Component {
  27. 	/**
  28. 	 * Updates the calculated rule fields for `queryValues` and `categoryIdsTitles`
  29. 	 * every time a new category entry is added or removed to the selection
  30. 	 * @protected
  31. 	 */
  33. 	onEntriesChanged_() {
  34. 		this.rule.categoryIdsTitles = this.categoriesSelector_.entries.values.map(
  35. 			(element) => element.value
  36. 		);
  37. 		this.rule.queryValues = this.categoriesSelector_.entries.keys.join(',');
  38. 	}
  40. 	/**
  41. 	 * @inheritDoc
  42. 	 */
  44. 	rendered() {
  45. 		AUI().use('liferay-commerce-frontend-asset-categories-selector', () => {
  46. 			const config = {
  47. 				categoryIds: this.rule.queryValues || '',
  48. 				categoryTitles: this.rule.categoryIdsTitles || [],
  49. 				contentBox: this.element,
  50. 				eventName: this.eventName,
  51. 				groupIds: this.groupIds,
  52. 				hiddenInput: `#${this.refs.hiddenInput.getAttribute('id')}`,
  53. 				portletURL: this.categorySelectorURL,
  54. 				vocabularyIds: this.vocabularyIds,
  55. 			};
  57. 			this.categoriesSelector_ = new Liferay.AssetTaglibCategoriesSelector(
  58. 				config
  59. 			);
  61. 			const entries = this.categoriesSelector_.entries;
  63. 			entries.after('add', this.onEntriesChanged_, this);
  64. 			entries.after('remove', this.onEntriesChanged_, this);
  66. 			this.categoriesSelector_.render();
  67. 			this.element.parentNode.removeAttribute('tabindex');
  68. 		});
  69. 	}
  70. }
  72. CategorySelector.STATE = {
  74. 	/**
  75. 	 * Portlet ID used for selecting categories.
  76. 	 * For this component it's required because is the only way
  77. 	 * to select categories.
  78. 	 */
  80. 	categorySelectorURL: Config.string().value(''),
  82. 	/**
  83. 	 * Name of the event that will be dispatched when the
  84. 	 * category selector dialog is closed
  85. 	 */
  87. 	eventName: Config.string().value(''),
  89. 	/**
  90. 	 * Array of group ids (sites) where categories will be searched.
  91. 	 * It defaults to an empty array, which is the current site.
  92. 	 */
  94. 	groupIds: Config.string().value(''),
  96. 	/**
  97. 	 * Id of the hidden input used to pass the selected categories
  98. 	 */
  100. 	hiddenInput: Config.string().value(''),
  102. 	/**
  103. 	 * Number used for avoiding conflicts between different
  104. 	 * instances of the component/portlet.
  105. 	 */
  107. 	index: Config.number().value(0),
  109. 	/**
  110. 	 * String used for avoiding conflicts between different
  111. 	 * instances of the component/portlet.
  112. 	 */
  114. 	namespace: Config.string().value(''),
  116. 	/**
  117. 	 * Existing information of the form.
  118. 	 * @prop {string[]} queryValues Categories that are already selected.
  119. 	 *  This property is updated as the user selects new categories.
  120. 	 * @prop {string[]} categoryIdsTitles Titles of the categories that are
  121. 	 * 	already selected. It is kept in sync with `queryValues`
  122. 	 */
  124. 	rule: Config.object().value({}),
  126. 	/**
  127. 	 * Ids of the vocabularies parents of the selected categories.
  128. 	 * Vocabularies are super groups which group a set of categories.
  129. 	 */
  131. 	vocabularyIds: Config.string().value(''),
  132. };
  134. Soy.register(CategorySelector, templates);
  136. export {CategorySelector};
  137. export default CategorySelector;