BRCD-1682: move plays selection and custom fields filteration to separate component (4fb64d6d) · Commits · sdoc / billrun-frontend

public/js/common/Util.js

+7 −0

Original line number	Diff line number	Diff line
		@@ -539,3 +539,10 @@ export const sortFieldOption = (optionsA, optionB) => {
		export const onlyLineForeignFields = lineField => lineField.has('foreign');

		export const foreignFieldWithoutDates = foreignField => foreignField.getIn(['foreign', 'translate', 'type'], '') !== 'unixTimeToString';

		export const shouldUsePlays = availablePlays => (availablePlays.size > 1);

		export const getPlayOptions = availablePlays => availablePlays.map(play => ({
		value: play.get('name', ''),
		label: play.get('label', play.get('name', '')),
		})).toArray();

public/js/components/CustomerSetup/Subscription.js

+7 −50

Original line number	Diff line number	Diff line
		@@ -11,7 +11,7 @@ import Actions from '../Elements/Actions';
		import Field from '../Field';
		import { EntityRevisionDetails } from '../Entity';
		import EntityFields from '../Entity/EntityFields';
		import { getSettings } from '../../actions/settingsActions';
		import PlaysSelector from '../Plays/PlaysSelector';
		import {
		getConfig,
		getItemId,
		@@ -20,10 +20,6 @@ import {
		buildPageTitle,
		toImmutableList,
		} from '../../common/Util';
		import {
		availablePlaysSettingsSelector,
		} from '../../selectors/settingsSelector';


		class Subscription extends Component {

		@@ -34,7 +30,6 @@ class Subscription extends Component {
		settings: PropTypes.instanceOf(Immutable.List), // Subscriptions Fields
		allPlans: PropTypes.instanceOf(Immutable.List),
		allServices: PropTypes.instanceOf(Immutable.List),
		availablePlays: PropTypes.instanceOf(Immutable.List),
		mode: PropTypes.string,
		onSave: PropTypes.func.isRequired,
		onCancel: PropTypes.func.isRequired,
		@@ -50,7 +45,6 @@ class Subscription extends Component {
		settings: Immutable.List(),
		allPlans: Immutable.List(),
		allServices: Immutable.List(),
		availablePlays: Immutable.List(),
		}

		constructor(props) {
		@@ -61,10 +55,6 @@ class Subscription extends Component {
		};
		}

		componentWillMount() {
		this.props.dispatch(getSettings(['plays']));
		}

		componentWillReceiveProps(nextProps) {
		if (!Immutable.is(this.props.subscription, nextProps.subscription)) {
		this.setState({ subscription: nextProps.subscription });
		@@ -251,20 +241,15 @@ class Subscription extends Component {
		getAvailableServices = () => this.formatSelectOptions(this.props.allServices);

		filterCustomFields = (field) => {
		const { subscription } = this.state;
		const hiddenFields = ['plan', 'services', 'play'];
		const isCustomField = !hiddenFields.includes(field.get('field_name'));
		const isEditable = field.get('editable', false);
		const isMandatory = field.get('mandatory', false);
		const shouldDisplayed = field.get('display', true);
		const play = subscription.get('play', '');
		const fieldPlays = field.get('plays', 'all');
		const isFieldOfPlay = fieldPlays === 'all' \|\| fieldPlays.contains(play);

		return isCustomField &&
		(isEditable \|\| isMandatory) &&
		shouldDisplayed &&
		(!this.shouldUsePlays() \|\| isFieldOfPlay);
		shouldDisplayed;
		// PHP .../application/views/internalpaypage/index.phtml condition
		// if ((empty($c['display']) && empty($c['mandatory']))
		// \|\| $c['field_name'] === 'plan'
		@@ -272,36 +257,6 @@ class Subscription extends Component {
		// ) continue;
		}

		shouldUsePlays = () => (this.props.availablePlays.size > 1);

		getPlayOptions = () => (this.props.availablePlays.map(play => ({
		value: play.get('name', ''),
		label: play.get('label', play.get('name', '')),
		})).toArray());

		renderPlays = (editable) => {
		if (!this.shouldUsePlays()) {
		return null;
		}
		const { subscription } = this.state;
		const play = subscription.get('play', '');
		return (
		<FormGroup key="play">
		<Col componentClass={ControlLabel}sm={3} lg={2}>Play <span className="danger-red"> *</span></Col>
		<Col sm={8} lg={9}>
		{ editable
		? <Select
		options={this.getPlayOptions()}
		value={play}
		onChange={this.onChangePlay}
		/>
		: <Field value={play} editable={false} />
		}
		</Col>
		</FormGroup>
		);
		}

		renderSystemFields = (editable) => {
		const { subscription } = this.state;
		const plansOptions = this.getAvailablePlans().toJS();
		@@ -309,9 +264,12 @@ class Subscription extends Component {
		const services = subscription.get('services', Immutable.List()) \|\| Immutable.List();
		const servicesList = Immutable.Set(services.map(service => service.get('name', ''))).join(',');
		const plan = subscription.get('plan', '');
		const plays = this.renderPlays(editable);
		return ([
		plays,
		(<PlaysSelector
		entity={subscription}
		editble={editable}
		onChange={this.onChangePlay}
		/>),
		(<FormGroup key="plan">
		<Col componentClass={ControlLabel}sm={3} lg={2}>Plan <span className="danger-red"> *</span></Col>
		<Col sm={8} lg={9}>
		@@ -459,7 +417,6 @@ const mapStateToProps = (state, props) => {
		return ({
		revisions,
		mode,
		availablePlays: availablePlaysSettingsSelector(state, props),
		});
		};
		export default connect(mapStateToProps)(Subscription);

public/js/components/Entity/EntityFields.js

+22 −1

Original line number	Diff line number	Diff line
		@@ -6,7 +6,13 @@ import classNames from 'classnames';
		import { titleCase } from 'change-case';
		import EntityField from './EntityField';
		import { getSettings } from '../../actions/settingsActions';
		import { entityFieldSelector } from '../../selectors/settingsSelector';
		import {
		entityFieldSelector,
		availablePlaysSettingsSelector,
		} from '../../selectors/settingsSelector';
		import {
		shouldUsePlays,
		} from '../../common/Util';


		class EntityFields extends Component {
		@@ -23,6 +29,7 @@ class EntityFields extends Component {
		editable: PropTypes.bool,
		onChangeField: PropTypes.func,
		dispatch: PropTypes.func.isRequired,
		availablePlays: PropTypes.instanceOf(Immutable.List),
		};

		static defaultProps = {
		@@ -32,6 +39,7 @@ class EntityFields extends Component {
		fieldsFilter: null,
		editable: true,
		onChangeField: () => {},
		availablePlays: Immutable.List(),
		}

		componentDidMount() {
		@@ -74,6 +82,17 @@ class EntityFields extends Component {
		return !(fieldPath[0] === 'params' && !entity.hasIn(fieldPath));
		}

		filterPlayFields = (field) => {
		const { availablePlays, entity } = this.props;
		if (!shouldUsePlays(availablePlays)) {
		return false;
		}
		const play = entity.get('play', '');
		const fieldPlays = field.get('plays', 'all');
		const isFieldOfPlay = fieldPlays === 'all' \|\| fieldPlays.contains(play);
		return isFieldOfPlay;
		}

		renderField = (field, key) => {
		const { entity, editable, onChangeField } = this.props;
		return (
		@@ -91,6 +110,7 @@ class EntityFields extends Component {
		const { fields, fieldsFilter } = this.props;
		const fieldFilterFunction = fieldsFilter !== null ? fieldsFilter : this.filterPrintableFields;
		return fields
		.filter(this.filterPlayFields)
		.filter(fieldFilterFunction)
		.filter(this.filterParamsFields)
		.map(this.renderField);
		@@ -135,6 +155,7 @@ class EntityFields extends Component {

		const mapStateToProps = (state, props) => ({
		fields: entityFieldSelector(state, props),
		availablePlays: availablePlaysSettingsSelector(state, props),
		});

		export default connect(mapStateToProps)(EntityFields);

public/js/components/Plays/PlaysSelector.js

0 → 100644

+67 −0

Original line number	Diff line number	Diff line
		import React, { Component, PropTypes } from 'react';
		import { connect } from 'react-redux';
		import Immutable from 'immutable';
		import { FormGroup, ControlLabel, Col } from 'react-bootstrap';
		import Select from 'react-select';
		import Field from '../Field';
		import { getSettings } from '../../actions/settingsActions';
		import {
		availablePlaysSettingsSelector,
		} from '../../selectors/settingsSelector';
		import {
		shouldUsePlays,
		getPlayOptions,
		} from '../../common/Util';


		class PlaysSelector extends Component {

		static propTypes = {
		dispatch: PropTypes.func.isRequired,
		availablePlays: PropTypes.instanceOf(Immutable.List),
		entity: PropTypes.instanceOf(Immutable.Map).isRequired,
		editable: PropTypes.bool,
		multi: PropTypes.bool,
		onChange: PropTypes.func,
		}

		static defaultProps = {
		availablePlays: Immutable.List(),
		editable: true,
		multi: false,
		onChange: () => {},
		}

		componentWillMount() {
		this.props.dispatch(getSettings(['plays']));
		}

		render() {
		const { availablePlays, entity, editable, multi, onChange } = this.props;
		if (!shouldUsePlays(availablePlays)) {
		return null;
		}
		const play = entity.get('play', '');
		return (
		<FormGroup key="play">
		<Col componentClass={ControlLabel}sm={3} lg={2}>Play <span className="danger-red"> *</span></Col>
		<Col sm={8} lg={9}>
		{ editable
		? <Select
		options={getPlayOptions(availablePlays)}
		value={play}
		onChange={onChange}
		multi={multi}
		/>
		: <Field value={play} editable={false} />
		}
		</Col>
		</FormGroup>
		);
		}
		}

		const mapStateToProps = (state, props) => ({
		availablePlays: availablePlaysSettingsSelector(state, props),
		});
		export default connect(mapStateToProps)(PlaysSelector);