123 lines
3.6 KiB
JavaScript
123 lines
3.6 KiB
JavaScript
import React from 'react';
|
|
import {Modal, Grid, Label, Button, Table, Checkbox} from 'semantic-ui-react';
|
|
import ScanItem from './SelectScanItem';
|
|
|
|
class SelectScan extends React.Component {
|
|
|
|
state = {
|
|
list: [],
|
|
page: 1,
|
|
per: 10,
|
|
totalpage: 1
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
if(this.state.list.length !== nextProps.list) {
|
|
let totalpage = Math.ceil( nextProps.list.length / this.state.per ) || 1;
|
|
this.setState({
|
|
list: nextProps.list,
|
|
totalpage
|
|
});
|
|
}
|
|
}
|
|
|
|
onItemSelect = (idx, checked) => {
|
|
let list = [...this.state.list];
|
|
if(list[idx]){
|
|
list[idx].checked = checked;
|
|
this.setState({
|
|
list
|
|
});
|
|
}
|
|
}
|
|
|
|
changePage = (p = 1) => {
|
|
p = p < 1 ? 1 : p;
|
|
p = p > this.state.totalpage ? this.state.totalpage : p;
|
|
this.setState({
|
|
page: p
|
|
});
|
|
}
|
|
|
|
calSelect = () => {
|
|
let a = this.state.list.filter(t => t.checked);
|
|
return a.length;
|
|
}
|
|
|
|
checkAllSelect = (s, e) => {
|
|
let arr = this.state.list.slice(s,e);
|
|
let tmp = arr.filter(t => !t.checked);
|
|
if(tmp.length > 0) return false;
|
|
return true;
|
|
}
|
|
|
|
changeAllCheck = (s, e, chk) => {
|
|
let arr = [...this.state.list];
|
|
for(let i=s; i<e; i++){
|
|
arr[i].checked = chk;
|
|
}
|
|
this.setState({
|
|
list: arr
|
|
});
|
|
}
|
|
|
|
submitData = () => {
|
|
let json = {
|
|
id: []
|
|
};
|
|
for(let i in this.state.list) {
|
|
if(this.state.list[i].leonelistuid) json.id.push(this.state.list[i].leonelistuid)
|
|
}
|
|
|
|
this.props.onSubmit(json);
|
|
}
|
|
|
|
render () {
|
|
let {i18n, onClose} = this.props;
|
|
|
|
let sIdx = this.state.per * (this.state.page - 1);
|
|
let eIdx = sIdx + this.state.per;
|
|
eIdx = eIdx > this.state.list.length ? this.state.list.length : eIdx;
|
|
let arr = this.state.list.slice(sIdx, eIdx);
|
|
|
|
return (
|
|
<Modal open={this.state.list.length > 0 ? true : false} closeOnDimmerClick={false} >
|
|
<Modal.Header content={i18n&&i18n.t ? i18n.t('page.leone.form.title.select-dev') : ''} />
|
|
<Modal.Content>
|
|
<div className="clearfix">
|
|
<Label content={`${i18n&&i18n.t?i18n.t('page.leone.form.label.select_num') : ''} ${this.calSelect()}`} basic color="blue"/>
|
|
<div style={{float: 'right'}}>
|
|
<Button type="button" content={i18n&&i18n.t?i18n.t('page.leone.form.button.prevpage') : ''} onClick={() => {this.changePage(this.state.page - 1)}} size="tiny" basic color="blue"/>
|
|
<Label basic content={`${this.state.page} / ${this.state.totalpage}`}/>
|
|
<Button type="button" content={i18n&&i18n.t?i18n.t('page.leone.form.button.nextpage') : ''} onClick={() => {this.changePage(this.state.page + 1)}} size="tiny" basic color="blue"/>
|
|
</div>
|
|
</div>
|
|
<Table>
|
|
<Table.Header>
|
|
<Table.Row>
|
|
<Table.HeaderCell><Checkbox checked={this.checkAllSelect(sIdx, eIdx)} onChange={(e,d)=>{ this.changeAllCheck(sIdx, eIdx, d.checked) }} /></Table.HeaderCell>
|
|
<Table.HeaderCell>{i18n&&i18n.t ? i18n.t('page.leone.form.label.name') : ''}</Table.HeaderCell>
|
|
<Table.HeaderCell>{i18n&&i18n.t ? i18n.t('page.leone.form.label.name') : ''}</Table.HeaderCell>
|
|
</Table.Row>
|
|
</Table.Header>
|
|
<Table.Body>
|
|
{
|
|
arr.map((t, idx) => <ScanItem key={idx} i18n={i18n} data={t} idx={idx} onChange={this.onItemSelect}/>)
|
|
}
|
|
</Table.Body>
|
|
</Table>
|
|
<Grid columns={2}>
|
|
<Grid.Column>
|
|
<Button content={i18n&&i18n.t ? i18n.t('page.leone.form.button.submit') : ''} fluid onClick={() => {this.submitData()}}/>
|
|
</Grid.Column>
|
|
<Grid.Column>
|
|
<Button content={i18n&&i18n.t ? i18n.t('page.leone.form.button.cancel') : ''} fluid onClick={() => {onClose()}} />
|
|
</Grid.Column>
|
|
</Grid>
|
|
</Modal.Content>
|
|
</Modal>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default SelectScan; |