Commit b5f298a9 authored by Roman's avatar Roman

BRCD-1676 refactor(SettingsPlay) - change screen to work with popup and not...

BRCD-1676 refactor(SettingsPlay) - change screen to work with popup and not use main settings save button
parent 295c18f4
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Immutable from 'immutable';
import { Form, Button, Table } from 'react-bootstrap';
import Field from '../Field';
import { Actions, ConfirmModal } from '../Elements';
import { saveSettings } from '../../actions/settingsActions';
class Plays extends Component {
static propTypes = {
dispatch: React.PropTypes.func.isRequired,
data: React.PropTypes.instanceOf(Immutable.List),
onChange: React.PropTypes.func.isRequired,
};
static defaultProps = {
data: Immutable.List(),
};
state = {
indexToRemove: null,
indexToDisable: null,
}
onChangePlayName = index => (e) => {
const { value } = e.target;
this.props.onChange('plays', [index, 'name'], value.toUpperCase().replace(globalSetting.keyUppercaseCleanRegex, ''));
}
onChangePlayLabel = index => (e) => {
const { value } = e.target;
this.props.onChange('plays', [index, 'label'], value);
}
onChangePlayDefault = index => () => {
const { data } = this.props;
data.forEach((play, i) => {
if (play.get('default', true)) {
this.props.onChange('plays', [i, 'default'], false);
}
});
this.props.onChange('plays', [index, 'default'], true);
}
onAddPlay = () => {
const { data } = this.props;
const newPlay = Immutable.Map({
name: '',
label: '',
enabled: true,
default: false,
can_edit_name: true,
});
this.props.onChange('plays', data.size, newPlay);
}
onClickEnable = index => () => {
this.props.onChange('plays', [index, 'enabled'], true);
this.props.dispatch(saveSettings(['plays']));
}
onClickDisable = index => () => {
this.setState({ indexToDisable: index });
}
onClickRemove = index => () => {
this.setState({ indexToRemove: index });
}
onClickRemoveOk = () => {
const { data } = this.props;
const { indexToRemove } = this.state;
this.setState({ indexToRemove: null });
this.props.onChange('plays', [], data.delete(indexToRemove));
this.props.dispatch(saveSettings(['plays']))
.then((response) => {
if (!response || !response.status) {
this.props.onChange('plays', [], data);
}
});
}
onClickRemoveCancel = () => {
this.setState({ indexToRemove: null });
}
onClickDisableOk = () => {
const { indexToDisable } = this.state;
this.setState({ indexToDisable: null });
this.props.onChange('plays', [indexToDisable, 'enabled'], false);
this.props.dispatch(saveSettings(['plays']))
.then((response) => {
if (!response || !response.status) {
this.props.onChange('plays', [indexToDisable, 'enabled'], true);
}
});
}
onClickDisableCancel = () => {
this.setState({ indexToDisable: null });
}
parseShowEnable = play => !play.get('enabled', true);
parseShowDisable = play => !this.parseShowEnable(play);
getListEnabledActions = index => [
{ type: 'enable', showIcon: true, helpText: 'Enable', onClick: this.onClickEnable(index), show: this.parseShowEnable },
{ type: 'disable', showIcon: true, helpText: 'Disable', onClick: this.onClickDisable(index), show: this.parseShowDisable },
];
getListRemoveActions = index => [
{ type: 'remove', showIcon: true, helpText: 'Remove', onClick: this.onClickRemove(index) },
];
getDefaultIndex = () => {
const { data } = this.props;
let ret = 0;
data.forEach((play, i) => {
if (play.get('default', true)) {
ret = i;
}
});
return ret;
}
renderPlay = (play, index) => (<tr key={index}>
<td>
{ play.get('can_edit_name', false)
? (<Field
onChange={this.onChangePlayName(index)}
value={play.get('name', '')}
/>)
: play.get('name', '')
}
</td>
<td>
<Field
onChange={this.onChangePlayLabel(index)}
value={play.get('label', '')}
/>
</td>
<td>
<Actions
actions={this.getListEnabledActions(index)}
data={play}
/>
</td>
<td>
<Field
fieldType="radio"
name="default-play"
onChange={this.onChangePlayDefault(index)}
checked={this.getDefaultIndex() === index}
/>
</td>
<td>
<Actions
actions={this.getListRemoveActions(index)}
data={play}
/>
</td>
</tr>);
render() {
const { data } = this.props;
const { indexToRemove, indexToDisable } = this.state;
const removeConfirmMessage = `Are you sure you want to remove Play "${data.getIn([indexToRemove, 'name'], '')}"?`;
const disableConfirmMessage = `Are you sure you want to disable Play "${data.getIn([indexToDisable, 'name'], '')}"?`;
return (
<div className="Plays">
<Form horizontal>
<Table className="table table-hover table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Label</th>
<th>Enabled</th>
<th>Default</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
{ data.map(this.renderPlay) }
</tbody>
</Table>
<ConfirmModal onOk={this.onClickRemoveOk} onCancel={this.onClickRemoveCancel} show={indexToRemove !== null} message={removeConfirmMessage} labelOk="Yes" />
<ConfirmModal onOk={this.onClickDisableOk} onCancel={this.onClickDisableCancel} show={indexToDisable !== null} message={disableConfirmMessage} labelOk="Yes" />
<Button bsSize="xsmall" className="btn-primary" onClick={this.onAddPlay}>
<i className="fa fa-plus" />&nbsp;Add New Play
</Button>
</Form>
</div>
);
}
}
export default connect()(Plays);
import React, { PropTypes } from 'react';
import Immutable from 'immutable';
import Field from '../../Field';
import { Actions, StateIcon } from '../../Elements';
const Play = ({
play,
index,
isDefaultDisabled,
showEnableAction,
onChangeDefault,
onEdit,
onDisable,
onEnable,
onRemove,
}) => {
const getListActions = [
{ type: 'edit', helpText: 'Edit', onClick: onEdit },
{ type: 'enable', helpText: 'Enable', onClick: onEnable, show: showEnableAction },
{ type: 'disable', helpText: 'Disable', onClick: onDisable, show: !showEnableAction },
{ type: 'remove', helpText: 'Remove', onClick: onRemove },
];
return (
<tr key={index}>
<td>
<StateIcon status={play.get('enabled', true) ? 'active' : 'expired'} />
</td>
<td>{play.get('name', '')}</td>
<td>{play.get('label', '')}</td>
<td className="text-center">
<Field
fieldType="radio"
name="default-play"
onChange={onChangeDefault}
checked={play.get('default', false)}
disabled={isDefaultDisabled}
/>
</td>
<td className="td-actions">
<Actions actions={getListActions} data={play} />
</td>
</tr>
);
};
Play.propTypes = {
play: PropTypes.instanceOf(Immutable.Map),
index: PropTypes.number.isRequired,
isDefaultDisabled: PropTypes.bool,
showEnableAction: PropTypes.bool,
onChangeDefault: PropTypes.func.isRequired,
onEdit: PropTypes.func.isRequired,
onDisable: PropTypes.func.isRequired,
onEnable: PropTypes.func.isRequired,
onRemove: PropTypes.func.isRequired,
};
Play.defaultProps = {
play: Immutable.Map(),
isNameEditable: false,
isDefaultDisabled: false,
showEnableAction: true,
};
export default Play;
import { connect } from 'react-redux';
import Play from './Play';
import PlayForm from './PlayFormContainer';
import {
showConfirmModal,
showFormModal,
} from '../../../actions/guiStateActions/pageActions';
import { saveSettings, getSettings } from '../../../actions/settingsActions';
import { showWarning } from '../../../actions/alertsActions';
const mapStateToProps = (state, props) => ({
isDefaultDisabled: !props.play.get('enabled', true),
isDisableAllowd: !props.play.get('default', false),
showEnableAction: !props.play.get('enabled', true),
});
const mapDispatchToProps = (dispatch, { index, play, plays, onChange, ...otherProps }) => ({ // eslint-disable-line no-unused-vars
onChangeDefault: () => {
if (play.get('enabled', true)) {
plays.forEach((p, i) => {
onChange('plays', [i, 'default'], false);
});
onChange('plays', [index, 'default'], true);
return dispatch(saveSettings(['plays']))
.then(success => (success.status ? true : Promise.reject()))
.then(() => dispatch(getSettings('plays')))
.catch(() => {
dispatch(getSettings('plays'));
return Promise.reject();
});
}
return dispatch(showWarning('Disabled play can not be default'));
},
onEdit: (item) => {
const onOk = (editedItem) => {
onChange('plays', [index], editedItem);
return dispatch(saveSettings(['plays']))
.then(success => (success.status ? true : Promise.reject()))
.then(() => dispatch(getSettings('plays')))
.catch(() => {
dispatch(getSettings('plays'));
return Promise.reject();
});
};
const config = {
title: `Edit Paly ${item.get('name', '')}`,
onOk,
mode: 'edit',
};
return dispatch(showFormModal(item, PlayForm, config));
},
onRemove: (item) => {
if (item.get('default', false)) {
return dispatch(showWarning('Default play can not be removed'));
}
const onOk = () => {
onChange('plays', [], plays.delete(index));
return dispatch(saveSettings(['plays']))
.then(() => dispatch(getSettings('plays')));
};
const confirm = {
message: `Are you sure you want to remove Play "${item.get('name', '')}"?`,
onOk,
labelOk: 'Delete',
type: 'delete',
};
return dispatch(showConfirmModal(confirm));
},
onEnable: () => {
onChange('plays', [index, 'enabled'], true);
return dispatch(saveSettings('plays'))
.then(() => dispatch(getSettings('plays')));
},
onDisable: (item) => {
if (item.get('default', false)) {
return dispatch(showWarning('Default play can not be disabled'));
}
const onOk = () => {
onChange('plays', [index, 'enabled'], false);
return dispatch(saveSettings(['plays']))
.then(() => dispatch(getSettings('plays')));
};
const confirm = {
message: `Are you sure you want to disable Play "${item.get('name', '')}"?`,
onOk,
type: 'delete',
labelOk: 'Disable',
};
return dispatch(showConfirmModal(confirm));
},
});
export default connect(mapStateToProps, mapDispatchToProps)(Play);
import React, { PropTypes } from 'react';
import { Form, FormGroup, Col, ControlLabel } from 'react-bootstrap';
import Immutable from 'immutable';
import Field from '../../Field';
const PlayForm = ({
item,
isAllowedDisableAction,
isAllowedEditName,
isAllowedEditDefault,
onChangeName,
onChangeLabel,
onChangeDefault,
onChangeEnabled,
}) => (
<Form horizontal>
{isAllowedEditName && (
<FormGroup>
<Col componentClass={ControlLabel} sm={3}>
Name
</Col>
<Col sm={7}>
<Field
onChange={onChangeName}
value={item.get('name', '')}
/>
</Col>
</FormGroup>
)}
<FormGroup>
<Col componentClass={ControlLabel} sm={3}>
Description
</Col>
<Col sm={7}>
<Field
onChange={onChangeLabel}
value={item.get('label', '')}
/>
</Col>
</FormGroup>
{isAllowedEditDefault && (
<FormGroup>
<Col sm={7} smOffset={3}>
<Field
fieldType="checkbox"
label="Default"
value={item.get('default', false)}
onChange={onChangeDefault}
/>
</Col>
</FormGroup>
)}
<FormGroup>
<Col sm={7} smOffset={3}>
<Field
fieldType="checkbox"
label="Enabled"
value={item.get('enabled', false)}
onChange={onChangeEnabled}
disabled={!isAllowedDisableAction}
/>
</Col>
</FormGroup>
</Form>
);
PlayForm.propTypes = {
item: PropTypes.instanceOf(Immutable.Map),
isAllowedDisableAction: PropTypes.bool,
isAllowedEditName: PropTypes.bool,
isAllowedEditDefault: PropTypes.bool,
onChangeName: PropTypes.func.isRequired,
onChangeLabel: PropTypes.func.isRequired,
onChangeDefault: PropTypes.func.isRequired,
onChangeEnabled: PropTypes.func.isRequired,
};
PlayForm.defaultProps = {
item: Immutable.Map(),
isAllowedDisableAction: true,
isAllowedEditName: true,
isAllowedEditDefault: true,
};
export default PlayForm;
import { connect } from 'react-redux';
import PlayForm from './PlayForm';
const mapStateToProps = (state, props) => ({
isAllowedDisableAction: !props.item.get('default', false),
isAllowedEditName: props.mode === 'create',
isAllowedEditDefault: props.mode === 'create',
});
const mapDispatchToProps = (dispatch, { item, mode, updateField, ...otherProps }) => ({ // eslint-disable-line no-unused-vars
onChangeName: (e) => {
const { value } = e.target;
const cleanValue = value.toUpperCase().replace(globalSetting.keyUppercaseCleanRegex, '');
updateField(['name'], cleanValue);
},
onChangeLabel: (e) => {
const { value } = e.target;
updateField('label', value);
},
onChangeDefault: (e) => {
const { value } = e.target;
updateField('default', value);
if (value) {
updateField('enabled', true);
}
},
onChangeEnabled: (e) => {
const { value } = e.target;
updateField('enabled', value);
},
});
export default connect(mapStateToProps, mapDispatchToProps)(PlayForm);
import React, { PropTypes } from 'react';
import Immutable from 'immutable';
import { Table } from 'react-bootstrap';
import Play from './PlayContainer';
import { CreateButton } from '../../Elements';
const Plays = ({ data, onChange, onAddPlay }) => (
<div className="Plays List row panel-body">
<Table className="table table-hover table-striped table-bordered">
<thead>
<tr>
<th className="state">Status</th>
<th>Name</th>
<th>Label</th>
<th className="text-center list-status-col">Default</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
{ data.map((play, index) => (
<Play
key={`play_${index}`}
index={index}
play={play}
onChange={onChange}
plays={data}
/>
)) }
</tbody>
</Table>
<CreateButton onClick={onAddPlay} type="Play" action="Add" />
</div>
);
Plays.propTypes = {
data: PropTypes.instanceOf(Immutable.List),
onChange: PropTypes.func.isRequired,
onAddPlay: PropTypes.func.isRequired,
};
Plays.defaultProps = {
data: Immutable.List(),
};
export default Plays;
import { connect } from 'react-redux';
import Immutable from 'immutable';
import Plays from './Plays';
import PlayForm from './PlayFormContainer';
import { showFormModal } from '../../../actions/guiStateActions/pageActions';
import { saveSettings, getSettings } from '../../../actions/settingsActions';
const mapStateToProps = null; // eslint-disable-line no-unused-vars
const mapDispatchToProps = (dispatch, props) => ({
onAddPlay: () => {
const { data } = props;
const newPlay = Immutable.Map({
name: '',
label: '',
enabled: true,
default: data.isEmpty(),
});
const onOk = (newItem) => {
if (newItem.get('default', false)) {
data.forEach((p, index) => {
props.onChange('plays', [index, 'default'], false);
});
}
props.onChange('plays', data.size, newItem);
return dispatch(saveSettings(['plays']))
.then(success => (success.status ? true : Promise.reject()))
.then(() => dispatch(getSettings('plays')))
.catch(() => {
dispatch(getSettings('plays'));
return Promise.reject();
});
};
const config = {
title: 'Create New Paly',
onOk,
mode: 'create',
};
return dispatch(showFormModal(newPlay, PlayForm, config));
},
});
export default connect(mapStateToProps, mapDispatchToProps)(Plays);
......@@ -6,7 +6,7 @@ import { Tabs, Tab, Panel } from 'react-bootstrap';
import DateTime from './DateTime';
import Currency from './Currency';
import Invoicing from './Invoicing';
import Plays from './Plays';
import Plays from './Plays/PlaysContainer';
import Tax from './Tax';
import Tenant from './Tenant';
import Security from './Security';
......@@ -53,7 +53,7 @@ class Settings extends Component {
state = {
currencyOptions: [],
playsBeforeSave: Immutable.List(),
// playsBeforeSave: Immutable.List(),
};
componentWillMount() {
......@@ -123,12 +123,6 @@ class Settings extends Component {
if (settings.has('system')) {
categoryToSave.push('system');
}
if (settings.has('plays')) {
this.setState({ playsBeforeSave: settings.get('plays') });
const playsToSave = settings.get('plays').map(play => play.remove('can_edit_name'));
this.props.dispatch(updateSetting('plays', [], playsToSave));
categoryToSave.push('plays');
}
if (categoryToSave.length) {
this.props.dispatch(saveSettings(categoryToSave))
.then((response) => {
......@@ -148,10 +142,6 @@ class Settings extends Component {
localStorage.removeItem('logo');
this.props.dispatch(fetchFile({ filename: settings.getIn(['tenant', 'logo'], '') }, 'logo'));
}
} else {
// reloads Plays in case error occured and Plays were not saved
const { playsBeforeSave } = this.state;
this.props.dispatch(updateSetting('plays', [], playsBeforeSave));
}
};
......@@ -244,7 +234,11 @@ class Settings extends Component {
</Tabs>
<ActionButtons onClickSave={this.onSave} hideCancel={true} hideSave={activeTab === 5} />
<ActionButtons
onClickSave={this.onSave}
hideCancel={true}
hideSave={[5, 7].includes(activeTab)}
/>
</div>
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment