components/GroupTableItem/GroupTableItem.jsx

/**
 * Модуль таблицы конкретной группы на странице учителя
 * @module GroupTableItem
 * @author Ihor Bielchenko
 * @requires react
 * @requires react#Component
 * @requires redux#bindActionCreators
 * @requires react-redux#connect
 * @requires actions/StateConfigAction.js
 * @requires actions/StateUserAction.js
 * @requires components/Common/Link.jsx
 * @requires components/GroupTableItem/RemoveGroup/RemoveGroup.jsx
 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Link from '../Common/Link.jsx';
import RemoveGroup from './RemoveGroup/RemoveGroup.jsx';
import * as StateConfigAction from '../../actions/StateConfigAction.js';
import * as StateUserAction from '../../actions/StateUserAction.js';

/**
 * Компонент таблицы конкретной группы на странице учителя
 * @extends Component
 */
class GroupTableItem extends Component {

	/**
	 * Invoked immediately after a component is mounted
	 * @fires componentDidMount
	 */
	componentDidMount() {
		this.countWidth();
	}

	/**
	 * Расчитать ширину таблицы
	 * @fires componentDidMount
	 */
	countWidth() {
		let el = document.getElementsByClassName('visible-block');
		if(el.length > 1) {
			let inner = el[0].children[0];
			let topLine = inner.children[0];

			var i, 
				width = 0;

			for(i = 0; i < topLine.children.length; i++) {
				width += topLine.children[i].clientWidth;
			}

			if(width < 1110) {
				width = '100%';
			}

			else width += 'px';

			inner.style.width = width;
		}
	}

	/**
	 * Скрол таблицы
	 * @fires input
	 * @param {Object} e
	 */
	scroll(e) {
		let el = document.getElementsByClassName('visible-block');
		let inner = el[0].children[0];
		let innerWidth = inner.clientWidth - 1110;
		let marginLeft = innerWidth / 100 * Number(e.target.value);

		inner.style.left = -marginLeft +'px';
	}

	/**
	 * Удалить текщую группу
	 * @fires click
	 * @param {Object} e
	 */
	removeGroup(e) {
		this.props.config.remove_group = 1;
		this.props.StateConfigAction.update(this.props.config);
	}

	/**
	 * Открыть окно редактирования группы
	 * @fires change
	 * @param {Object} e
	 */
	editGroup(e) {
		this.props.config.edit_group = 1;
		this.props.StateConfigAction.update(this.props.config);
	}

	/**
	 * Render component
	 * @return {Object} jsx object
	 */
	render() {
		let lang = this.props.lang;

		var lines = [],
			group,
			data, i, o, k;

		for(i = 0; i < this.props.user.groups.length; i++) {
			if(this.props.user.groups[i].id === this.props.user.current_group) {
				group = this.props.user.groups[i];
			}
		}

		k = 0;
		for(i = 0; i < group.students.length; i++) {
			o = '';
			data = [];

			for(o in group.students[i]) {
				if(o !== 'remove') {
					data.push(<div key={k}
						className="div">{group.students[i][o]}</div>);
					k++;
				}
			}

			lines.push(<div key={i}
				className="line">{data}</div>);
		}

		if(this.props.config.remove_group === 1) {
			return <RemoveGroup id={this.props.user.current_group} />
		}

		return <div className="panel2">
					<div className="wrap">
						<div className="content">
							<label>
								<input className="redak" 
									type="checkbox"
									onChange={this.editGroup.bind(this)} /> {lang.edit_group_title}
							</label>

							<div className="visible-block">
								<div className="inner-block">
									<div className="top-line line">
										<div className="div">{lang.table_column_number_title}</div>
										<div className="div">{lang.table_column_student_title}</div>
										<div className="div">{lang.table_column_result_title}</div>
										<div className="div">{lang.table_column_tasks_title}</div>
										<div className="div">{lang.table_column_days_title}</div>
									</div>
									
									{lines}
								</div>
							</div>

							<input defaultValue="0" 
									max="100"
									type="range"
									className="rangeP"
									onInput={this.scroll.bind(this)} />

							<Link className="delete-group"
								onClick={this.removeGroup.bind(this)}>{lang.remove_group_title}</Link>
							<div className="clr"></div>
						</div>
					</div>
				</div>
	}
}

/**
 * Init redux states
 *
 * @param {Object} state
 * @return {Object}
 */
function mapStateToProps(state) {
	return {
		user: state.user,
		lang: state.lang,
		config: state.config,
	}
}

/**
 * Init redux actions
 * @param {Function} dispatch
 * @return {Object}
 */
function mapDispatchToProps(dispatch) {
	return {
		StateConfigAction: bindActionCreators(StateConfigAction, dispatch),
		StateUserAction: bindActionCreators(StateUserAction, dispatch),
	}
}

export default connect(mapStateToProps, mapDispatchToProps)(GroupTableItem);