tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Ivan - Add Checkbox group component [skip ci]

This commit is contained in:
ivan 2016-12-09 17:51:30 -03:00
parent 8a5474ffc4
commit 77f8976896
8 changed files with 128 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app-components/people-list.js
View File

@ -64,7 +64,7 @@ class PeopleList extends React.Component {
renderAnimatedItem(style, index) {
return (
<div style={{transform: 'translateX('+style.offset+'px)', opacity: style.alpha}}>
<div style={{transform: 'translateX('+style.offset+'px)', opacity: style.alpha}} key={index}>
{this.renderItem(index + this.props.pageSize * (this.props.page - 1))}
</div>
);

21
client/src/app/admin/panel/staff/add-staff-modal.js
View File

@ -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 (
<div>
<div className="add-staff-modal">
<Header title={i18n('ADD_STAFF')} description={i18n('ADD_STAFF_DESCRIPTION')} />
<Form onSubmit={this.onSubmit.bind(this)}>
<FormField name="name" label={i18n('NAME')} fieldProps={{size: 'large'}} validation="NAME" required />
<FormField name="email" label={i18n('EMAIL')} fieldProps={{size: 'large'}} validation="EMAIL" required />
<FormField name="password" label={i18n('PASSWORD')} fieldProps={{size: 'large'}} validation="PASSWORD" required />
<FormField name="level" label={i18n('LEVEL')} field="select" fieldProps={{
items: [{content: 'Level 1 - Easy'}, {content: 'Level 2 - Medium'}, {content: 'Level 3 - Hard'}],
size: 'medium'
}} />
<FormField name="password" label={i18n('PASSWORD')} fieldProps={{size: 'large', password: true}} validation="PASSWORD" required />
<div className="add-staff-modal__level-selector">
<FormField name="level" label={i18n('LEVEL')} field="select" fieldProps={{
items: [{content: i18n('LEVEL_1')}, {content: i18n('LEVEL_2')}, {content: i18n('LEVEL_3')}],
size: 'large'
}} />
</div>
<FormField name="departments" field="checkbox-group" label={i18n('Departments')} fieldProps={{items: this.getDepartments()}} />
<SubmitButton type="secondary" size="small">
{i18n('SAVE')}
</SubmitButton>
@ -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;

6
client/src/app/admin/panel/staff/add-staff-modal.scss
View File

@ -0,0 +1,6 @@
.add-staff-modal {
&__level-selector {
text-align: center;
}
}

57
client/src/core-components/checkbox-group.js Normal file
View File

@ -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 (
<ul className="checkbox-group">
{this.props.items.map(this.renderItem.bind(this))}
</ul>
);
}
renderItem(label, index) {
const checked = (_.includes(this.getValue(), index));
return (
<li className="checkbox-group__item" key={index}>
<Checkbox label={label} checked={checked} onChange={this.onCheckboxChange.bind(this, index)} wrapInLabel/>
</li>
);
}
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;

28
client/src/core-components/checkbox.js
View File

@ -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 (
<span className={this.getClass()}>
<Wrapper className={this.getClass()}>
<span {...this.getIconProps()}>
{getIcon((this.getValue()) ? 'check-square' : 'square', 'lg') }
</span>
<input {...this.getProps()}/>
{(this.props.label) ? this.renderLabel() : null}
</Wrapper>
);
}
renderLabel() {
return (
<span className="checkbox__label">
{this.props.label}
</span>
);
}

13
client/src/core-components/drop-down.scss
View File

@ -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;
}
}
}

18
client/src/core-components/form-field.js
View File

@ -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 = [
<span className="form-field__label" key="label">{this.props.label}</span>,
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;

4
client/src/data/languages/en.js
View File

@ -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.',