From 77f8976896dcdbaadaba3be2d71516ce4056a9c7 Mon Sep 17 00:00:00 2001 From: ivan Date: Fri, 9 Dec 2016 17:51:30 -0300 Subject: [PATCH] Ivan - Add Checkbox group component [skip ci] --- client/src/app-components/people-list.js | 2 +- .../app/admin/panel/staff/add-staff-modal.js | 21 ++++--- .../admin/panel/staff/add-staff-modal.scss | 6 ++ client/src/core-components/checkbox-group.js | 57 +++++++++++++++++++ client/src/core-components/checkbox.js | 28 ++++++--- client/src/core-components/drop-down.scss | 13 +++++ client/src/core-components/form-field.js | 18 +++++- client/src/data/languages/en.js | 4 +- 8 files changed, 128 insertions(+), 21 deletions(-) create mode 100644 client/src/core-components/checkbox-group.js diff --git a/client/src/app-components/people-list.js b/client/src/app-components/people-list.js index 1fd18346..604d8967 100644 --- a/client/src/app-components/people-list.js +++ b/client/src/app-components/people-list.js @@ -64,7 +64,7 @@ class PeopleList extends React.Component { renderAnimatedItem(style, index) { return ( -
+
{this.renderItem(index + this.props.pageSize * (this.props.page - 1))}
); diff --git a/client/src/app/admin/panel/staff/add-staff-modal.js b/client/src/app/admin/panel/staff/add-staff-modal.js index 01ba0268..52c2ed63 100644 --- a/client/src/app/admin/panel/staff/add-staff-modal.js +++ b/client/src/app/admin/panel/staff/add-staff-modal.js @@ -1,6 +1,7 @@ import React from 'react'; import i18n from 'lib-app/i18n'; +import SessionStore from 'lib-app/session-store'; import Header from 'core-components/header' import Form from 'core-components/form'; @@ -11,16 +12,19 @@ class AddStaffModal extends React.Component { render() { return ( -
+
- - + +
+ +
+ {i18n('SAVE')} @@ -29,10 +33,13 @@ class AddStaffModal extends React.Component { ); } + getDepartments() { + return SessionStore.getDepartments().map((department) => department.name); + } + onSubmit(form) { console.log(form); } - } export default AddStaffModal; \ No newline at end of file diff --git a/client/src/app/admin/panel/staff/add-staff-modal.scss b/client/src/app/admin/panel/staff/add-staff-modal.scss index e69de29b..e2456788 100644 --- a/client/src/app/admin/panel/staff/add-staff-modal.scss +++ b/client/src/app/admin/panel/staff/add-staff-modal.scss @@ -0,0 +1,6 @@ +.add-staff-modal { + + &__level-selector { + text-align: center; + } +} \ No newline at end of file diff --git a/client/src/core-components/checkbox-group.js b/client/src/core-components/checkbox-group.js new file mode 100644 index 00000000..a5e97e76 --- /dev/null +++ b/client/src/core-components/checkbox-group.js @@ -0,0 +1,57 @@ +import React from 'react'; +import _ from 'lodash'; + +import Checkbox from 'core-components/checkbox'; + +class CheckboxGroup extends React.Component { + static propTypes = { + items: React.PropTypes.array.isRequired, + value: React.PropTypes.arrayOf(React.PropTypes.number), + onChange: React.PropTypes.func + }; + + state = { + value: [] + }; + + render() { + return ( +
    + {this.props.items.map(this.renderItem.bind(this))} +
+ ); + } + + renderItem(label, index) { + const checked = (_.includes(this.getValue(), index)); + + return ( +
  • + +
    • + ); + } + + onCheckboxChange(index) { + let value = _.clone(this.getValue()); + + if(_.includes(value, index)) { + _.pull(value, index); + } else { + value.push(index); + value.sort(); + } + + this.setState({value}); + + if(this.props.onChange) { + this.props.onChange({target: {value}}); + } + } + + getValue() { + return (this.props.value !== undefined) ? this.props.value : this.state.value; + } +} + +export default CheckboxGroup; \ No newline at end of file diff --git a/client/src/core-components/checkbox.js b/client/src/core-components/checkbox.js index c148783a..d269efee 100644 --- a/client/src/core-components/checkbox.js +++ b/client/src/core-components/checkbox.js @@ -11,28 +11,38 @@ class CheckBox extends React.Component { static propTypes = { alignment: React.PropTypes.string, label: React.PropTypes.string, - value: React.PropTypes.bool + value: React.PropTypes.bool, + wrapInLabel: React.PropTypes.bool, + onChange: React.PropTypes.func }; static defaultProps = { + wrapInLabel: false, alignment: 'right' }; - constructor(props) { - super(props); - - this.state = { - checked: false - }; - } + state = { + checked: false + }; render() { + let Wrapper = (this.props.wrapInLabel) ? 'label' : 'span'; + return ( - + {getIcon((this.getValue()) ? 'check-square' : 'square', 'lg') } + {(this.props.label) ? this.renderLabel() : null} + + ); + } + + renderLabel() { + return ( + + {this.props.label} ); } diff --git a/client/src/core-components/drop-down.scss b/client/src/core-components/drop-down.scss index facd5c53..7082e708 100644 --- a/client/src/core-components/drop-down.scss +++ b/client/src/core-components/drop-down.scss @@ -49,4 +49,17 @@ border: 1px solid $light-grey; } } + + &_large { + width: 300px; + + .drop-down__current-item { + border-radius: 4px; + } + + .drop-down__list-container { + width: 300px; + border: 1px solid $light-grey; + } + } } \ No newline at end of file diff --git a/client/src/core-components/form-field.js b/client/src/core-components/form-field.js index ad93729a..78cb9dad 100644 --- a/client/src/core-components/form-field.js +++ b/client/src/core-components/form-field.js @@ -6,6 +6,7 @@ import _ from 'lodash'; import Input from 'core-components/input'; import DropDown from 'core-components/drop-down'; import Checkbox from 'core-components/checkbox'; +import CheckboxGroup from 'core-components/checkbox-group'; import TextEditor from 'core-components/text-editor'; class FormField extends React.Component { @@ -21,7 +22,7 @@ class FormField extends React.Component { required: React.PropTypes.bool, error: React.PropTypes.string, value: React.PropTypes.any, - field: React.PropTypes.oneOf(['input', 'textarea', 'select', 'checkbox']), + field: React.PropTypes.oneOf(['input', 'textarea', 'select', 'checkbox', 'checkbox-group']), fieldProps: React.PropTypes.object }; @@ -36,6 +37,9 @@ class FormField extends React.Component { else if (field === 'checkbox') { return false; } + else if (field === 'checkbox-group') { + return []; + } else if (field === 'textarea') { return RichTextEditor.createEmptyValue(); } @@ -45,7 +49,7 @@ class FormField extends React.Component { } render() { - const Wrapper = (this.props.field === 'textarea') ? 'div' : 'label'; + const Wrapper = (_.includes(this.getDivTypes(), this.props.field)) ? 'div' : 'label'; const fieldContent = [ {this.props.label}, this.renderField(), @@ -67,7 +71,8 @@ class FormField extends React.Component { 'input': Input, 'textarea': TextEditor, 'select': DropDown, - 'checkbox': Checkbox + 'checkbox': Checkbox, + 'checkbox-group': CheckboxGroup }[this.props.field]; if(this.props.decorator) { @@ -122,6 +127,13 @@ class FormField extends React.Component { return props; } + getDivTypes() { + return [ + 'textarea', + 'checkbox-group' + ]; + } + onChange(nativeEvent) { let event = nativeEvent; diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index cdd04281..dc9d268f 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -97,10 +97,12 @@ export default { 'ASSIGNED_TICKETS': '{tickets} assigned tickets', 'CLOSED_TICKETS': '{tickets} closed tickets', 'LAST_LOGIN': 'Last login', - 'STAFF_MEMBERS': 'Staff members', 'ADD_NEW_STAFF': 'Add new staff', 'ADD_STAFF': 'Add staff', 'LEVEL': 'Level', + 'LEVEL_1': 'Level 1 (Tickets)', + 'LEVEL_2': 'Level 2 (Tickets + Articles)', + 'LEVEL_3': 'Level 2 (Tickets + Articles + Staff)', //VIEW DESCRIPTIONS 'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.',