Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FIO-7225: Fixed issues with complex values for Radio component #5936

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

FIO-7225: Fixed issues with complex values for Radio component #5936

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8d4afd3
FIO-7225: added mapping to complex data types
roma-formio Oct 7, 2024
3b8e472
FIO-7225: fixed listData in metadata, added test cases
roma-formio Dec 5, 2024
9208d86
Merge branch 'master' into FIO-7225-fix-value-property-values-for-rad…
roma-formio Dec 5, 2024
905c79f
FIO-7225: added component type check
roma-formio Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 77 additions & 25 deletions src/components/radio/Radio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import _ from 'lodash';
import ListComponent from '../_classes/list/ListComponent';
import { Formio } from '../../Formio';
import { boolValue, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
import { v4 as uuidv4 } from 'uuid';

export default class RadioComponent extends ListComponent {
static schema(...extend) {
Expand Down Expand Up @@ -164,6 +165,7 @@ export default class RadioComponent extends ListComponent {
});
this.optionsLoaded = !this.component.dataSrc || this.component.dataSrc === 'values';
this.loadedOptions = [];
this.valuesMap = new Map();

if (!this.visible) {
this.itemsLoadedResolve();
Expand Down Expand Up @@ -211,9 +213,12 @@ export default class RadioComponent extends ListComponent {
dataValue = _.toString(this.dataValue);
}

if (this.isSelectURL && _.isObject(this.loadedOptions[index].value)) {
const optionValue = this.component.dataType === 'string' ? JSON.stringify(this.loadedOptions[index].value) : this.loadedOptions[index].value;
input.checked = _.isEqual(optionValue, this.dataValue);
if (this.isSelectURL) {
const valueKey = this.loadedOptions[index].value;
const optionValue = this.valuesMap.has(valueKey)
? this.valuesMap.get(valueKey)
: valueKey;
input.checked = _.isEqual(this.normalizeValue(optionValue), this.dataValue);
}
else {
input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));
Expand Down Expand Up @@ -253,9 +258,15 @@ export default class RadioComponent extends ListComponent {
let value = this.component.inputType === 'checkbox' ? '' : this.dataValue;
this.refs.input.forEach((input, index) => {
if (input.checked) {
value = (this.isSelectURL && _.isObject(this.loadedOptions[index].value)) ?
this.loadedOptions[index].value :
input.value;
if (!this.isSelectURL) {
value = input.value;
return;
}

const optionValue = this.loadedOptions[index].value;
value = this.valuesMap.has(optionValue)
? this.valuesMap.get(optionValue)
: optionValue;
}
});
return value;
Expand Down Expand Up @@ -310,8 +321,8 @@ export default class RadioComponent extends ListComponent {

setValueAt(index, value) {
if (this.refs.input && this.refs.input[index] && value !== null && value !== undefined) {
const inputValue = this.refs.input[index].value;
this.refs.input[index].checked = (inputValue === value.toString());
const inputValue = this.getValueByInput(this.refs.input[index]);
this.refs.input[index].checked = _.isEqual(inputValue, value);
}
}

Expand All @@ -324,6 +335,27 @@ export default class RadioComponent extends ListComponent {
return super.shouldLoad;
}

prepareValue(item, options = {}) {
const value = this.component.valueProperty && !options.skipValueProperty
? _.get(item, this.component.valueProperty)
: item;

if (this.component.type === 'radio' && typeof value !== 'string') {
const uuid = uuidv4();
this.valuesMap.set(uuid, value);
return uuid;
}

return value;
}

getValueByInput(input) {
const inputValue = input.value;
return this.valuesMap.has(inputValue)
? this.valuesMap.get(inputValue)
: inputValue;
}

loadItems(url, search, headers, options, method, body) {
if (this.optionsLoaded) {
this.itemsLoadedResolve();
Expand Down Expand Up @@ -381,7 +413,7 @@ export default class RadioComponent extends ListComponent {
label: this.itemTemplate(item)
};
if (_.isEqual(item, this.selectData || _.pick(this.dataValue, _.keys(item)))) {
this.loadedOptions[i].value = this.dataValue;
this.loadedOptions[i].value = this.prepareValue(this.dataValue, { skipValueProperty: true });
}
});
this.optionsLoaded = true;
Expand All @@ -392,13 +424,16 @@ export default class RadioComponent extends ListComponent {
const listData = [];
items?.forEach((item, i) => {
const valueAtProperty = _.get(item, this.component.valueProperty);
this.loadedOptions[i] = {
value: this.component.valueProperty ? valueAtProperty : item,
label: this.component.valueProperty ? this.itemTemplate(item, valueAtProperty) : this.itemTemplate(item, item, i)
};
listData.push(this.templateData[this.component.valueProperty ? valueAtProperty : i]);
const value = this.prepareValue(item);
const label = this.component.valueProperty
? this.itemTemplate(item, valueAtProperty, i)
: this.itemTemplate(item, item, i);
this.loadedOptions[i] = { label, value };
listData.push(this.templateData[i]);
if (this.valuesMap.has(value)) {
this.templateData[value] = this.templateData[i];
}

const value = this.loadedOptions[i].value;
if (!this.isRadio && (
_.isObject(value) || _.isBoolean(value) || _.isUndefined(value)
)) {
Expand Down Expand Up @@ -426,7 +461,9 @@ export default class RadioComponent extends ListComponent {
const value = this.dataValue;
this.refs.wrapper.forEach((wrapper, index) => {
const input = this.refs.input[index];
const checked = (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());
const checked = (input.type === 'checkbox')
? value[input.value] || input.checked
: _.isEqual(this.normalizeValue(this.getValueByInput(input)), value);
if (checked) {
//add class to container when selected
this.addClass(wrapper, this.optionSelectedClass);
Expand All @@ -441,10 +478,30 @@ export default class RadioComponent extends ListComponent {
}
}

setMetadata(value) {
let key = value;
if (typeof value !== 'string') {
const checkedInput = Array.prototype.find.call(
this.refs.input,
(input => input.type === 'radio' && input.getAttribute('checked'))
);
key = checkedInput?.value || key;
}
if (this.isSelectURL && this.templateData && this.templateData[key]) {
const submission = this.root.submission;
if (!submission.metadata.selectData) {
submission.metadata.selectData = {};
}

_.set(submission.metadata.selectData, this.path, this.templateData[key]);
}
}

updateValue(value, flags) {
const changed = super.updateValue(value, flags);
if (changed) {
this.setSelectedClasses();
this.setMetadata(this.dataValue);
}

if (!flags || !flags.modified || !this.isRadio) {
Expand Down Expand Up @@ -507,15 +564,10 @@ export default class RadioComponent extends ListComponent {
break;
}

if (this.isSelectURL && this.templateData && this.templateData[value]) {
const submission = this.root.submission;
if (!submission.metadata.selectData) {
submission.metadata.selectData = {};
}

_.set(submission.metadata.selectData, this.path, this.templateData[value]);
}

return super.normalizeValue(value);
}

isSingleInputValue() {
return true;
}
}
Loading
Loading