Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react';
- import PropTypes from 'prop-types';
- import { connect } from 'react-redux';
- import uuidV4 from 'uuid/v4';
- import { InputGroup } from '../../../../../components';
- import ConditionGroup from './ConditionGroup';
- import Accordion from '../../../../Accordion';
- import { defaultCondition, actionSelectOptionsIds, rowFieldNames } from '../../../constants';
- import { selectTabBlockConfig } from '../../../actions';
- import './style/style.css';
- import OtherPeriods from './timeConditionOtherPeriods';
- /**
- * This function represents the Configuration Tab of the API.
- *
- * @param {Object} props - Object with props of the component.
- * @param {Object} props.translations - The translations.
- *
- * @returns {Object} Returns the JSX.
- */
- class ConditionSet extends React.Component {
- constructor(props) {
- super(props);
- this.bind();
- this.rowUuidTest = '';
- this.rowRules = {
- condition: row => this.props.plugin.startValidation(this.rowFieldNames.condition, row.uuid).setValue(row.condition).isRequired(true).end(),
- };
- this.rowFieldNames = {
- label: rowFieldNames.LABEL,
- condition: rowFieldNames.CONDITION,
- action: rowFieldNames.ACTION,
- varOps: rowFieldNames.VAROPS,
- playSsml: rowFieldNames.TTS,
- continue: rowFieldNames.CONTINUE,
- ddiOrExtension: rowFieldNames.DDI_OR_EXTENSION,
- queueId: rowFieldNames.QUEUE_ID,
- alternateAction: rowFieldNames.ALTERNATE_ACTION,
- };
- this.props.plugin.registerOnSubmitAction((end) => {
- this.props.plugin.values.forEach((row) => {
- if (!row.label) {
- this.handleDeleteConditon(row);
- }
- row.condition.forEach((condition) => {
- const error = (row.label && this.rowRules.condition(condition)) || {};
- const existsError = !!Object.keys(error.result || {}).filter(elem => error.result[elem] === false).length;
- if (existsError) {
- this.expandAccordion && this.expandAccordion(row.uuid);
- this.props.selectTabBlockConfig(this.props.flowUuid, 'CONDITIONS');
- }
- });
- });
- end();
- });
- }
- componentDidMount() {
- const newConditionSet = this.props.blockConfigs[this.props.flowUuid]
- && this.props.blockConfigs[this.props.flowUuid].tab
- && this.props.blockConfigs[this.props.flowUuid].tab.originOfTheClick === 'CLICK_ADD_CONDITIONSET_BLOCK';
- if (newConditionSet) {
- !this.didMoutActions && this.handleAddNewCondition();
- this.didMoutActions = this.props.plugin.didMoutActions(this.handleAddNewCondition);
- }
- }
- /**
- * This function runs a given rule on the rowRules object.
- *
- * @param {string} column - The column to run rule for.
- * @param {Object} row - The row ro run the rule
- */
- runRowRules(column, row) {
- this.rowRules[column] && this.rowRules[column](row);
- }
- /**
- * This function adds one new temporal rule to the condition row.
- *
- * @param {string} parentRowUuid - The condition row uuid.
- * @param {Object} row - The new row.
- */
- handleOnAddTemporalCondition(parentRowUuid, row) {
- this.props.plugin.addRow(row, {
- parentRowKey: this.rowFieldNames.condition,
- parentRowUuid,
- });
- }
- /**
- * This function edits one temporal rule on one condition row on the condition column
- *
- * @param {string} parentRowUuid - The condition row uuid.
- * @param {any} value - The value to be updated.
- * @param {string} temporalConditionUuid - The uuid of the value to be updated
- */
- handleOnEditTemporalCondition(parentRowUuid, value, temporalConditionUuid) {
- this.props.plugin.editRow(temporalConditionUuid, this.rowFieldNames.condition, value, {
- parentRowKey: this.rowFieldNames.condition,
- parentRowUuid,
- });
- const newRow = { uuid: temporalConditionUuid, [this.rowFieldNames.condition]: value };
- this.runRowRules(this.rowFieldNames.condition, newRow);
- }
- /**
- * This funtion deletes one temporal rule from one given condition row.
- *
- * @param {string} parentRowUuid - The condition row uuid.
- * @param {string} temporalConditionUuid - The uuid of the temporal conditon to be deleted
- */
- handleOnDeleteTemporalCondition(parentRowUuid, temporalConditionUuid) {
- this.props.plugin.deleteRow(temporalConditionUuid, {
- parentRowKey: this.rowFieldNames.condition,
- parentRowUuid,
- });
- }
- /**
- * Handles the add of one new condition row.
- */
- handleAddNewCondition() {
- const uuid = uuidV4();
- this.rowUuidTest = uuid;
- this.props.plugin.values.forEach((elem) => {
- if (!elem.label) {
- this.props.plugin.deleteRow(elem.uuid);
- }
- });
- this.props.plugin.addRow({
- uuid,
- label: '',
- condition: [{
- uuid: uuidV4(),
- condition: defaultCondition.message,
- }],
- action: '',
- varOps: '',
- playSsml: '',
- continue: false,
- }).then(() => {
- this.empty = uuid;
- this.expandAccordion(uuid);
- this.scrollIntoView(uuid);
- this.props.plugin.values.forEach((row) => {
- if (row.uuid === uuid) {
- return;
- }
- this.collapseAccordion(row.uuid);
- });
- });
- }
- /**
- * Handle the change on one conditon set item.
- *
- * @param {string} column - The column key.
- * @param {any} value - The value of the condition to edit.
- * @param {Object} row - The coplete row where the conditon is.
- */
- handleEditCondition(column, value, row) {
- if (this.rowUuidTest === row.uuid) {
- this.rowUuidTest = '';
- }
- const newRow = { ...row, [column]: value };
- this.runRowRules(column, newRow);
- this.props.plugin.editRow(row.uuid, column, value);
- }
- /**
- * Handle the full condition delete.
- *
- * @param {Object} condition - The condition to be deleted.
- * @param {Object} condition.uuid - The condition uuid to be deleted
- */
- handleDeleteConditon(condition) {
- this.props.plugin.deleteRow(condition.uuid);
- }
- /**
- * This function is used to handle the value change in the action select.
- *
- * @param {string} uuid - String with the row uuid.
- * @param {string} value - String with the selected value.
- */
- handleActionSelectOnChange(uuid, value) {
- this.props.plugin.editRow(uuid, this.rowFieldNames.action, value);
- }
- /**
- * This function is used to get the action select options with the respective ids and
- * translated name.
- *
- * @returns {Object} - Object with the select options.
- */
- getSelectActionObject() {
- const actionSelectOptions = Object.values(actionSelectOptionsIds);
- return actionSelectOptions.map(option => ({
- id: option,
- name: this.props.translations[option],
- }));
- }
- /**
- * Builds the accordeons dataset based on the plugin
- * data.
- *
- * @param {Object} datasource - The plugin datasource.
- */
- accordeons(datasource) {
- const others = {
- uuid: 'otherPeriods',
- label: this.props.translations.groupTitles.label,
- content: <OtherPeriods
- title={this.props.translations.groupTitles.label}
- placeholder={this.props.translations.groupTitles.otherPeriods}
- />,
- number: null,
- };
- return [others, ...datasource].map(row => ({
- uuid: row.uuid,
- top: row.label,
- number: row.number,
- content: row.content || (
- <ConditionGroup
- fieldNames={this.rowFieldNames}
- handleChange={this.handleEditCondition}
- validateStates={this.props.plugin.validationStates}
- values={row}
- titles={this.props.translations.groupTitles}
- placeholders={this.props.translations.placeholders}
- isTimeConditionSet={this.props.isTimeConditionSet}
- // eslint-disable-next-line react/jsx-no-bind
- onAddTemporalCondition={this.handleOnAddTemporalCondition.bind(this, row.uuid)}
- // eslint-disable-next-line react/jsx-no-bind
- onEditTemporalCondition={this.handleOnEditTemporalCondition.bind(this, row.uuid)}
- // eslint-disable-next-line react/jsx-no-bind
- onDeleteTemporalCondition={this.handleOnDeleteTemporalCondition.bind(this, row.uuid)}
- // eslint-disable-next-line react/jsx-no-bind
- onActionSelectChange={this.handleActionSelectOnChange.bind(this, row.uuid)}
- actionSelectOptions={this.getSelectActionObject()}
- />
- ),
- }));
- }
- /**
- * Handle the onDrop the condition.
- *
- * @param {Object} fromRow - Object with row to move.
- * @param {Object} toRow - Object with destination of the row.
- */
- handleOnDrop(fromRow, toRow) {
- this.props.plugin.moveRow(fromRow.uuid, toRow.uuid);
- }
- /**
- * Binds all the methods with this context.
- */
- bind() {
- this.accordeons = this.accordeons.bind(this);
- this.handleAddNewCondition = this.handleAddNewCondition.bind(this);
- this.handleEditCondition = this.handleEditCondition.bind(this);
- this.handleDeleteConditon = this.handleDeleteConditon.bind(this);
- this.handleOnAddTemporalCondition = this.handleOnAddTemporalCondition.bind(this);
- this.handleOnEditTemporalCondition = this.handleOnEditTemporalCondition.bind(this);
- this.handleOnDeleteTemporalCondition = this.handleOnDeleteTemporalCondition.bind(this);
- this.handleOnDrop = this.handleOnDrop.bind(this);
- }
- render() {
- return (
- <InputGroup
- title={this.props.translations.title}
- className="gof-blockCardForm-textTitles"
- >
- <Accordion
- id="conditionset_accordion"
- data={this.accordeons(this.props.plugin.values)}
- onDelete={this.handleDeleteConditon}
- onClickAdd={this.handleAddNewCondition}
- onDrop={this.handleOnDrop}
- interface={(int) => {
- this.expandAccordion = int.expand;
- this.collapseAccordion = int.collapse;
- this.scrollIntoView = int.scrollIntoView;
- }}
- />
- </InputGroup>
- );
- }
- }
- ConditionSet.propTypes = {
- plugin: PropTypes.object.isRequired,
- translations: PropTypes.object.isRequired,
- isTimeConditionSet: PropTypes.bool,
- };
- ConditionSet.defaultProps = {
- isTimeConditionSet: false,
- };
- const mapStateToProps = state => ({
- blockConfigs: state.flowConstructorPage.blockConfig,
- });
- const mapDispatchToProps = dispatch => ({
- selectTabBlockConfig: (flowUuid, tabId) => dispatch(selectTabBlockConfig(flowUuid, tabId)),
- });
- export default connect(mapStateToProps, mapDispatchToProps)(ConditionSet);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement