51 lines
1.9 KiB
JavaScript
51 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import {Modal, Form, Input, Segment, Grid, Button, Header, List} from 'semantic-ui-react';
|
|
import SelectedItem from './SelectedItem';
|
|
import DeviceSelect from '../../Common/DeviceSelect';
|
|
|
|
const GroupModal = ({i18n, open, type, data, devs, permissions, onClose, onSubmit, selected, removeSelect, addSelect, querySelectList}) => {
|
|
|
|
return (
|
|
<Modal open={open}>
|
|
<Modal.Header content={i18n&&i18n.t ? (type == 1 ? i18n.t('page.iogroup.form.title.edit') : i18n.t('page.iogroup.form.title.add')) : ''} />
|
|
<Modal.Content>
|
|
<Form onSubmit={(e,d) => {
|
|
e.preventDefault();
|
|
onSubmit(type, d.formData);
|
|
}} serializer={e => {
|
|
let json = {
|
|
name: '',
|
|
id: data.iogroupuid || 0
|
|
};
|
|
let n = e.querySelector('input[name="name"]');
|
|
if(n && 'value' in n) json.name = n.value;
|
|
|
|
return json;
|
|
}}>
|
|
<Form.Field>
|
|
<Input label={i18n&&i18n.t?i18n.t('page.iogroup.form.label.name') : ''} name="name" defaultValue={data.iogroupname || ''} />
|
|
</Form.Field>
|
|
<DeviceSelect i18n={i18n} devs={devs} page="iogroup" showGroup={false} permissions={permissions} addSelect={addSelect} querySelectList={querySelectList} />
|
|
<Segment>
|
|
<Header as="h4" content={i18n&&i18n.t ? i18n.t('page.iogroup.form.label.selected_device') : ''} />
|
|
<List divided verticalAlign="middle">
|
|
{
|
|
selected.map((t, idx) => <SelectedItem i18n={i18n} key={idx} data={t} idx={idx} removeSelect={removeSelect}/>)
|
|
}
|
|
</List>
|
|
</Segment>
|
|
<Grid columns={2}>
|
|
<Grid.Column>
|
|
<Button fluid type="submit" content={i18n&&i18n.t?i18n.t('page.leone.form.button.submit'):''}/>
|
|
</Grid.Column>
|
|
<Grid.Column>
|
|
<Button fluid type="button" content={i18n&&i18n.t?i18n.t('page.leone.form.button.cancel'):''} onClick={() => {onClose()}}/>
|
|
</Grid.Column>
|
|
</Grid>
|
|
</Form>
|
|
</Modal.Content>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default GroupModal; |