Skip to content

Commit

Permalink
[EAK-521] Ability to pass a path to set/set-if-blank actions to…
Browse files Browse the repository at this point in the history
… access nested fields
  • Loading branch information
ala-n committed Aug 15, 2024
1 parent bc18e28 commit 17f26e6
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 24 deletions.
13 changes: 11 additions & 2 deletions docs/content/dev-tools/depends-on/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,21 @@ order: 3

Built-in plug-in actions are:
* `visibility` - hide the element if the Query result is 'falsy'. <u>This is the default action that is applied when no action is specified.</u>

* `tab-visibility` - hide the tab or the element's parent tab if the Query result is 'falsy'
* `set` - set the Query result as the field's value (undefined Query result skipped)
* `set-if-blank` - set the Query result as the field's value only if the current value is blank (undefined Query result skipped)

* `set` - set the Query result as the field's value (`undefined` Query result skipped).
Supports optional `path` parameter to set the value to the nested property of the field.

* `set-if-blank` - set the Query result as the field's value only if the current value is blank (`undefined` Query result skipped).
Supports optional `path` parameter to set the value to the nested property of the field.

* `readonly` - set the readonly marker of the field from the Query result.

* `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. Supports multiple actions effect for the same field.

### Async actions
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ js/accessors/dependsOnCoralFieldsetAccessor.js

# Actions
js/actions/dependsOnCoralBasicActions.js
js/actions/dependsOnCoralSetActions.js
js/actions/dependsOnCoralValidateAction.js
js/actions/dependsOnFetchAction.js
js/actions/dependsOnCoralTabAction.js
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -61,26 +61,4 @@
ns.ActionRegistry.register('disabled', function setDisabled(state) {
ns.ElementAccessors.requestDisable(this.$el, state, this);
});

/**
* Set the field value from the query result, skip undefined query results
* query type: string
* */
ns.ActionRegistry.register('set', function setValue(value) {
if (value !== undefined) {
ns.ElementAccessors.setValue(this.$el, value);
}
});

/**
* Set the field value from the query result only if the field value is blank,
* skip undefined query results
* query type: string
* */
ns.ActionRegistry.register('set-if-blank', function setValueIfBlank(value) {
const current = ns.ElementAccessors.getValue(this.$el);
if ((current === '' || current === null || current === undefined) && value !== undefined) {
ns.ElementAccessors.setValue(this.$el, value);
}
});
})(Granite.$, Granite.DependsOnPlugin = (Granite.DependsOnPlugin || {}));
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
/*
* 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 Alexey Stsefanovich (ala'n), Yana Bernatskaya (YanaBr)
*
* DependsOn Coral 3 Basic Actions.
*
* Defined actions:
* - visibility - set the field visibility (and also hide the form field wrapper);
* - required - set the required state of the field;
* - readonly - set the readonly state of the field;
* - disabled - set the disabled state of the field;
* - set - set the field value from the query result;
* - set-if-blank - set the field value from the query result only if the field value is blank
* */
(function ($, ns) {
'use strict';

const FORM_FIELDS_SELECTOR = 'input, textarea, select';
const CORAL_FIELD_SELECTOR = '.coral-Form-field';

/**
* Creates CSS selector to find by name with support of simple wildcards
* @param path
*/
function createSearchQuery(path) {
if (path.endsWith('*')) return `[name^="${path.slice(0, -1)}"]`;
if (path.startsWith('*')) return `[name$="${path.slice(1)}"]`;
return `[name="${path}"]`;
}

/**
* Find form field by a path. If the path is not provided, returns $root.
* Supports simple wildcard syntax to find fields by name start / end:
* - *name - find fields with name ending with 'name'
* - name* - find fields with name starting with 'name'
* - name - find fields with name 'name'
*
* @param {jQuery} $root - root element to search in
* @param {string} [path] - path to the target field
* */
function resolveTarget($root, path) {
if (!path) return $root;
const $fields = $root.find(FORM_FIELDS_SELECTOR).filter(createSearchQuery(path));
// Resolves input field to coral form field
return $fields.closest(CORAL_FIELD_SELECTOR);
}

/**
* Set the field value from the query result, skip undefined query results
* query type: string
* optional parameters:
* - path: string - path to the target field (supports wildcards)
* */
ns.ActionRegistry.register('set', function setValue(value, { path }) {
if (value === undefined) return;
const $target = resolveTarget(this.$el, path);
ns.ElementAccessors.setValue($target, value);
});

/**
* Set the field value from the query result only if the field value is blank,
* skip undefined query results
* query type: string
* optional parameters:
* - path: string - path to the target field (supports wildcards)
* */
ns.ActionRegistry.register('set-if-blank', function setValueIfBlank(value, { path }) {
if (value === undefined) return;
const $target = resolveTarget(this.$el, path);
const current = ns.ElementAccessors.getValue($target);
if (current === '' || current === null || current === undefined) {
ns.ElementAccessors.setValue($target, value);
}
});
})(Granite.$, Granite.DependsOnPlugin = (Granite.DependsOnPlugin || {}));

0 comments on commit 17f26e6

Please sign in to comment.