Skip to content

Commit

Permalink
FIO-8091: added selectData calculation for url/resource select compon…
Browse files Browse the repository at this point in the history
…ents
Roman committed Apr 12, 2024
1 parent b58c530 commit fdef3ff
Showing 3 changed files with 187 additions and 1 deletion.
4 changes: 4 additions & 0 deletions src/components/select/Select.js
Original file line number Diff line number Diff line change
@@ -254,6 +254,10 @@ export default class SelectComponent extends ListComponent {
return super.shouldLoad;
}

get selectData() {
return this.component.selectData || super.selectData;
}

isEntireObjectDisplay() {
return this.component.dataSrc === 'resource' && this.valueProperty === 'data';
}
122 changes: 122 additions & 0 deletions src/components/select/Select.unit.js
Original file line number Diff line number Diff line change
@@ -8,6 +8,9 @@ import { expect } from 'chai';
import { Formio } from './../../Formio';
import _ from 'lodash';

global.requestAnimationFrame = (cb) => cb();
global.cancelAnimationFrame = () => { };

import {
comp1,
comp2,
@@ -1212,3 +1215,122 @@ describe('Select Component with Entire Object Value Property', () => {
});
});
});

describe('Select Component selectData property', () => {
const originalMakeRequest = Formio.makeRequest;

before((done) => {
Formio.makeRequest = (formio, type, url) => {

Check warning on line 1223 in src/components/select/Select.unit.js

GitHub Actions / setup

'formio' is defined but never used

Check warning on line 1223 in src/components/select/Select.unit.js

GitHub Actions / setup

'type' is defined but never used

Check warning on line 1223 in src/components/select/Select.unit.js

GitHub Actions / setup

'url' is defined but never used
return new Promise(resolve => {
const values = [{
label: 'Label 1',
value: 'value1',
}, {
label: 'Label 2',
value: 'value2',
}];

resolve(values);
});
};
Harness.builderBefore(done);
});
afterEach(() => Harness.getBuilder().setForm({ display: 'form', components: [] }));

it('Should calculate selectData property for url dataSource', (done) => {
const builder = Harness.getBuilder();
builder.setForm({}).then(() => {
Harness.buildComponent('select');

setTimeout(() => {
const dataSrc = builder.editForm.getComponent('dataSrc');
dataSrc.setValue('url');
const url = builder.editForm.getComponent(['data.url']);
const valueProperty = builder.editForm.getComponent('valueProperty');
url.setValue('htts//fakeurl.com');
valueProperty.setValue('value');

setTimeout(() => {
const defaultValue = builder.editForm.getComponent('defaultValue');
defaultValue.setValue('value1');
defaultValue.updateItems(null, true);

setTimeout(() => {
assert.deepEqual(builder.editForm.data.selectData, {
label: 'Label 1',
});
Harness.saveComponent();
setTimeout(() => {
done();
}, 150);
}, 250);
}, 250);
}, 150);
}).catch(done);
});

it('Should calculate selectData property for resource dataSource', (done) => {
const builder = Harness.getBuilder();
builder.setForm({}).then(() => {
Harness.buildComponent('select');

setTimeout(() => {
const dataSrc = builder.editForm.getComponent('dataSrc');
dataSrc.setValue('resource');
const resource = builder.editForm.getComponent(['data.resource']);
const valueProperty = builder.editForm.getComponent('valueProperty');
resource.setValue('12345678');
valueProperty.setValue('value');

setTimeout(() => {
const defaultValue = builder.editForm.getComponent('defaultValue');
defaultValue.setValue('value1');
defaultValue.updateItems(null, true);

setTimeout(() => {
assert.deepEqual(builder.editForm.data.selectData, {
label: 'Label 1',
});
Harness.saveComponent();
setTimeout(() => {
done();
}, 150);
}, 250);
}, 250);
}, 150);
}).catch(done);
});

it('Should not calculate selectData property without valueProperty', (done) => {
const builder = Harness.getBuilder();
builder.setForm({}).then(() => {
Harness.buildComponent('select');

setTimeout(() => {
const dataSrc = builder.editForm.getComponent('dataSrc');
dataSrc.setValue('url');
const url = builder.editForm.getComponent(['data.url']);
url.setValue('https://fakeurl.com');

setTimeout(() => {
const defaultValue = builder.editForm.getComponent('defaultValue');
defaultValue.setValue('value1');
defaultValue.updateItems(null, true);

setTimeout(() => {
assert.equal(builder.editForm.data.selectData, undefined);
Harness.saveComponent();
setTimeout(() => {
done();
}, 150);
}, 250);
}, 250);
}, 150);
}).catch(done);
});

after((done) => {
Formio.makeRequest = originalMakeRequest;
Harness.builderAfter(done);
});
});
62 changes: 61 additions & 1 deletion src/components/select/editForm/Select.edit.data.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,33 @@
import _ from 'lodash';
import { eachComponent } from '../../../utils/utils';

const calculateSelectData = (context) => {
const { instance, data } = context;
const rawDefaultValue = instance.downloadedResources.find(resource => _.get(resource, data.valueProperty) === instance.getValue());
const options = { data: {}, noeval: true };
instance.interpolate(data.template, {
item: rawDefaultValue,
}, options);
return options.data.item;
};

const setSelectData = (context) => {
// Wait before downloadedResources will be set
setTimeout(() => {
const { instance, data } = context;
const selectDataComponent = instance?.root.getComponent('selectData');
// nothing can set if don't have downloaded resources
if (!selectDataComponent || !instance.getValue() || !instance.downloadedResources?.length) {
return;
}
// if valueProperty is not provided, we have entire object
const shouldCalculateUrlData = data.dataSrc === 'url' && data.data.url && data.valueProperty;
const shouldCalculateResourceData = data.dataSrc === 'resource' && data.data.resource && data.valueProperty;
const newValue = shouldCalculateUrlData || shouldCalculateResourceData ? calculateSelectData(context) : undefined;
selectDataComponent.setValue(newValue);
}, 0);
};

export default [
{
key: 'dataSrc',
@@ -625,5 +653,37 @@ export default [
key: 'useExactSearch',
label: 'Use exact search',
tooltip: 'Disables search algorithm threshold.',
}
},
{
key: 'defaultValue',
onSetItems(component) {
setSelectData(component.evalContext());
},
onChange(context) {
if (context && context.flags && context.flags.modified) {
setSelectData(context);
}
},
},
{
key: 'selectData',
conditional: {
json: { 'and': [
{ '!==': [{ var: 'data.valueProperty' }, null] },
{ '!==': [{ var: 'data.valueProperty' }, ''] },
] },
},
},
{
key: 'template',
onChange(context) {
if (context && context.flags && context.flags.modified) {
const defaultValueComponent = context.instance.root.getComponent('defaultValue');
if (!defaultValueComponent) {
return;
}
setSelectData(defaultValueComponent.evalContext());
}
},
},
];

0 comments on commit fdef3ff

Please sign in to comment.