diff --git a/core/src/main/java/com/exadel/aem/toolkit/api/annotations/assets/dependson/DependsOnActions.java b/core/src/main/java/com/exadel/aem/toolkit/api/annotations/assets/dependson/DependsOnActions.java index e2872262d..e323fed2e 100644 --- a/core/src/main/java/com/exadel/aem/toolkit/api/annotations/assets/dependson/DependsOnActions.java +++ b/core/src/main/java/com/exadel/aem/toolkit/api/annotations/assets/dependson/DependsOnActions.java @@ -70,5 +70,10 @@ public class DependsOnActions { */ public static final String UPDATE_OPTIONS = "update-options"; + /** + * Refreshes the options set of a Coral3 Select widget with provided values + */ + public static final String FILL_SELECT = "fill-select"; + private DependsOnActions() {} } diff --git a/docs/md/depends-on.md b/docs/md/depends-on.md index aba996f10..962cf9980 100644 --- a/docs/md/depends-on.md +++ b/docs/md/depends-on.md @@ -63,6 +63,9 @@ Built-in plug-in actions are: * `required` - set the required marker of the field from the Query result. * `validate` - set the validation state of the field from the Query result. * `disabled` - set the field's disabled state from the Query result. +* `fill-select` - fill select options with values from the Query result. The result object must contain *value* and *text* fields + _Additional parameters:_ + * `selected` (optional) - a dependsOn query, whose evaluation result should be a value or an array of selected values ##### Async actions diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js.txt b/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js.txt index d317e1eef..2d34521fb 100644 --- a/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js.txt +++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js.txt @@ -1,6 +1,7 @@ # Core Handlers js/dependsOnUtils.js js/utils/dependsOnRequestCache.js +js/utils/dependsOnSelectUtils.js js/dependsOnElementAccessors.js js/references/dependsOnObservedReference.js @@ -28,6 +29,7 @@ js/accessors/dependsOnCoralNumberInputAccessor.js # Actions js/actions/dependsOnCoralBasicActions.js +js/actions/dependsOnCoralSelectAction.js js/actions/dependsOnCoralValidateAction.js js/actions/dependsOnFetchAction.js js/actions/dependsOnCoralTabAction.js diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/actions/dependsOnCoralSelectAction.js b/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/actions/dependsOnCoralSelectAction.js new file mode 100644 index 000000000..b5499597c --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/actions/dependsOnCoralSelectAction.js @@ -0,0 +1,42 @@ +/* + * Licensed under the Apache License, Version 2.0 (the "License"). + * You may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * @author Natasha Gorshunova + * + * DependsOn Coral 3 Select Action. + * + * A simple action to fill select with options with provided values + * + * Action callback params: + * {Array<{value:string, text:string}>} options + * {string} config.selected - a dependsOn query, whose evaluation result should be a value or an array of selected values + */ +(function (Granite, $, DependsOn) { + 'use strict'; + + const ACTION_NAME = 'fill-select'; + + DependsOn.ActionRegistry.register(ACTION_NAME, function (options, { selected }) { + if (!options || !options.length) { + return; + } + + const $select = this.$el; + const selectedValue = selected ? DependsOn.QueryProcessor.calculateQuery(selected, $select) : ''; + + DependsOn.SelectUtils.setOptions($select, options, selectedValue); + setTimeout(() => $select.trigger('change.dependsOn')); + }); +})(Granite, Granite.$, Granite.DependsOnPlugin); diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/actions/dependsOnUpdateOptionsAction.js b/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/actions/dependsOnUpdateOptionsAction.js index 157d3ad97..0f1e716a6 100644 --- a/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/actions/dependsOnUpdateOptionsAction.js +++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/actions/dependsOnUpdateOptionsAction.js @@ -94,25 +94,12 @@ // resource (so that a new option can be assigned the "selected" state if its value matches), // and then replace the option set in DOM if ($select.attr(STORED_VALUE_ATTRIBUTE)) { - setOptions($select, options, $select.attr(STORED_VALUE_ATTRIBUTE)); + DependsOn.SelectUtils.setOptions($select, options, $select.attr(STORED_VALUE_ATTRIBUTE)); } else { setOptionsAndRestoreSelected($select, options, resourceAddr, valueMember); } } - /** - * Set a new option set to the Granite Select component - * - * @param $select - Select widget to set options for - * @param options - new option set, represented by "raw" (non-Granite) entities - * @param selectedValue - the value to mark as selected in the option set - */ - function setOptions($select, options, selectedValue) { - const itemCollection = $select.get(0).items; - itemCollection.clear(); - options.map(src => createOption(src, selectedValue)).forEach(option => itemCollection.add(option)); - } - /** * Query for a stored JCR resource to find the currently selected value and assign to the Select widget if found * @@ -126,29 +113,13 @@ .then(resource => { const storedValue = resource[valueMember]; $select.attr(STORED_VALUE_ATTRIBUTE, storedValue); - setOptions($select, options, storedValue); + DependsOn.SelectUtils.setOptions($select, options, storedValue); }) .fail(() => { - setOptions($select, options); + DependsOn.SelectUtils.setOptions($select, options); }); } - /** - * Create a new Granite option - * - * @param src - an object having a {@code text} and a {@code value} attribute - * @param selectedValue - the match value to trigger 'selected' state of the option - */ - function createOption(src, selectedValue) { - return { - value: src.value, - content: { - textContent: src.text - }, - selected: (!selectedValue && !src.value) || selectedValue === src.value || (Array.isArray(selectedValue) && selectedValue.includes(src.value)) - }; - } - /** * Register {@code update-options} action in DependsOn registry. * This action performs updating of the option set of the current Select widget @@ -183,7 +154,7 @@ processNewOptions($select, newOptions, resourceAddress, valueMember); }) .fail(() => { - setOptions($select, []); + DependsOn.SelectUtils.setOptions($select, []); }); }); })(Granite, Granite.$, Granite.DependsOnPlugin); diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/dependsOnQueryProcessor.js b/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/dependsOnQueryProcessor.js index 4d2ad8db5..a9099897f 100644 --- a/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/dependsOnQueryProcessor.js +++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/dependsOnQueryProcessor.js @@ -30,6 +30,16 @@ * */ static get REFERENCE_REGEXP() { return REFERENCE_REGEXP; } + /** + * + * @param {string} query + * @param {JQuery} $el + * @returns current result of the query + */ + static calculateQuery(query, $el) { + return QueryProcessor.evaluateQuery(QueryProcessor.parseQuery(query, $el), $el); + } + /** * Evaluate the parsed query * @param {string} query - parsed query @@ -66,7 +76,7 @@ ns.GroupReferenceRegistry.register(name, $context) : ns.ElementReferenceRegistry.register(name, $context); - reference.subscribe(changeHandlerCB); + reference.subscribe(changeHandlerCB); // ignores undefined handler return `${reference.id}.value`; }); } diff --git a/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/utils/dependsOnSelectUtils.js b/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/utils/dependsOnSelectUtils.js new file mode 100644 index 000000000..6129097fb --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/etoolbox-authoring-kit/depends-on/js/utils/dependsOnSelectUtils.js @@ -0,0 +1,55 @@ +/* + * Licensed under the Apache License, Version 2.0 (the "License"). + * You may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/*** + * Coral 3 Select Utils + * */ +(function (Granite, $, DependsOn) { + 'use strict'; + + class SelectUtils { + /** + * Creates a new Granite option + * + * @param option - an option object + * @param {string} option.text - text to display + * @param {string} option.value - actual value of an option + * @param selectedValue - value or array of values to trigger 'selected' state of the option + */ + static createOption(option, selectedValue) { + return { + value: option.value, + content: { + textContent: option.text + }, + selected: (!selectedValue && !option.value) || selectedValue === option.value || (Array.isArray(selectedValue) && selectedValue.includes(option.value)) + }; + } + + /** + * Sets a new option set to the Granite Select component + * + * @param {JQuery} $select - Select widget to set options for + * @param {Array} options - new option set, represented by "raw" (non-Granite) entities + * @param selectedValue - the value to mark as selected in the option set + */ + static setOptions($select, options, selectedValue) { + const itemCollection = $select.get(0).items; + itemCollection.clear(); + options.map(option => SelectUtils.createOption(option, selectedValue)).forEach(option => itemCollection.add(option)); + } + } + + DependsOn.SelectUtils = SelectUtils; +})(Granite, Granite.$, Granite.DependsOnPlugin);