import React from 'react';
import Box from './Box';
import uuid from 'uuid/v4';
import {
SortableContainer,
SortableElement,
arrayMove,
} from 'react-sortable-hoc';
import DragHandle from './DragHandle';
import { FieldArray, Formik, Form as FormikForm, Field } from 'formik';
import PropTypes from 'proptypes';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
import {
filter, find, flatten, identity, map, prop, propEq, reject, uniq, update
} from 'rambda';
import { insert, remove } from 'ramda';
import theme from '../theme';
const nextWorkerName = (rows) =>
`${rows.length + 1}. pracovník`;
class Form extends React.PureComponent {
state = {
allJobs: [],
rows: [
// {
// id: uuid(),
// name: 'pracovnik 1',
// jobs: [
// { id: uuid(), name: 'frontend', t: '', d: '', w: '', anc: [] },
// { id: uuid(), name: 'backend', t: '', d: '', w: '', anc: [] }
// ]
// },
// {
// id: uuid(),
// name: 'pracovnik 2',
// jobs: [
// { id: uuid(), name: 'frontend', t: '', d: '', w: '', anc: [] },
// { id: uuid(), name: 'backend', t: '', d: '', w: '', anc: [] }
// ]
// }
],
preempt: false,
flowShop: '0'
};
onSubmit = (values) => {
if (!values || !values.rows.length) return;
const { onSubmit } = this.props;
onSubmit(values);
};
addWorker = (setFieldValue, rows, allJobs) => {
const jobs = [{
id: uuid(), name: allJobs[0], t: '', d: '', w: '', anc: []
}];
const updatedRows = [...rows, { id: uuid(), name: nextWorkerName(rows), jobs } ];
setFieldValue('rows', updatedRows);
};
addTemplateWorker = (setFieldValue, allJobs) => (e) => {
if (e.keyCode !== undefined && e.keyCode !== 13) return;
e.preventDefault();
const val = this.new.value.replace(/:/g, '');
const updatedJobs = [...allJobs, val ];
setFieldValue('allJobs', updatedJobs);
this.new.value = null;
};
render() {
return (
<Formik initialValues={this.state} onSubmit={this.onSubmit} render={({ setFieldValue, values: { rows, allJobs, flowShop } }) => (
<FormikForm>
<h1>1/3 Vytvorenie úloh</h1>
<Box flexWrap="wrap" flexDirection="row">
{allJobs.map((_, key) => (
<Box key={key} width={300} flexDirection="row" marginBottom={10}>
<Box as={Field} name={`allJobs.${key}`} flex={1} marginRight={5} onChange={({ target: { value } }) => setFieldValue(`allJobs.${key}`, value)} />
<Box cursor="pointer" onClick={() => setFieldValue(`allJobs`, remove(key, 1, allJobs))} color="red" marginRight={20}>✕</Box>
</Box>
))}
</Box>
<Box width={300} flexDirection="row" marginBottom={10}>
<Box as="input" placeholder="Nová úloha" onKeyDown={this.addTemplateWorker(setFieldValue, allJobs)} nativeRef={c => this.new = c} marginRight={5} flex={1} />
<Box cursor="pointer" onClick={this.addTemplateWorker(setFieldValue, allJobs)} color="green" fontSize="1rem">+</Box>
</Box>
{allJobs.length ? (
<div>
<h1>2/3 Konfigurácia projektu</h1>
{rows.length ?
<Box flexDirection="row" marginBottom={10}>
<Box flexBasis="20%" flexShrink={0}><strong>Pracovníci</strong></Box>
<Box flexBasis="63%" flexShrink={0}><strong>Priradené úlohy</strong></Box>
</Box> : null
}
<FieldArray name="rows" render={arrayHelpers => (
<React.Fragment>
{rows.map((row, i) => <Row key={i} {...row} arrayHelpers={arrayHelpers}
prefix={`rows.${i}`} index={i}/>)}
</React.Fragment>
)}/>
<Box flexDirection="row" marginBottom={10}>
<Box
flexShrink={0}
onClick={() => this.addWorker(setFieldValue, rows, allJobs)}
{...theme.buttons.primary}
>
+ Nový pracovník
</Box>
</Box>
{rows.length ?
<div>
<Box flexDirection="row" justifyContent="center" marginBottom={10}>
<Box as="label" justifyContent="center" flexDirection="row" marginRight={5}>
<Field type="radio" name="flowShop" value="1" checked={flowShop == '1'} disabled={rows.length === 1} />
<Box as="em" color="gray" textAlign="center" fontSize="0.9em">
Flow shop
</Box>
</Box>
<Box as="label" justifyContent="center" flexDirection="row">
<Field type="radio" name="flowShop" value="0" checked={flowShop == '0'} disabled={rows.length === 1} />
<Box as="em" color="gray" textAlign="center" fontSize="0.9em">
Pracovníci zvládnu každú úlohu
</Box>
</Box>
</Box>
<Box as="label" justifyContent="center" flexDirection="row">
<Field type="checkbox" name="preempt" disabled={flowShop == '1' || rows.length === 1}/>
<Box as="em" color="gray" textAlign="center" fontSize="0.9em">
Úlohy pracovníkov možno prerušiť
</Box>
</Box>
<Box as="button" margin="auto" marginTop={10} width="20rem" alignItems="center"
padding={5} {...theme.buttons.primary} backgroundColor="#C89C93" fontSize="1rem">
Vytvoriť rozvrh
</Box>
</div>
: null}
</div>
) : null}
</FormikForm>
)}>
</Formik>
)
}
}
const SortableJob = SortableElement(
class extends React.PureComponent {
static contextTypes = {
formik: PropTypes.object
};
handleSelectChange = (type, selectedPairs) => {
const { prefix } = this.props;
const { formik: { setFieldValue } } = this.context;
const selected = map(prop('value'), selectedPairs);
setFieldValue(`${prefix}.${type}`, selected);
};
deleteJob = () => {
const { rowIndex, myIndex } = this.props;
const { formik: { setFieldValue, values: { rows } } } = this.context;
const jobs = filter(identity, update(myIndex, null, rows[rowIndex].jobs));
if (jobs.length) {
setFieldValue(`rows.${rowIndex}.jobs`, jobs);
} else {
const updatedRows = filter(identity, update(rowIndex, null, rows));
setFieldValue(`rows`, updatedRows);
}
};
render() {
const { prefix, job, existingJobs: _existingJobs } = this.props;
const { formik: { values: { rows, allJobs, flowShop } } } = this.context;
const existingJobs = map(
value => {
const [idRow, idJob] = value.split(':');
const row = find(propEq('id', idRow), rows);
const jobName = find(propEq('id', idJob), row.jobs).name;
return ({ value, label: `${row.name} – ${jobName}` });
},
reject(
value => {
const [, idJob] = value.split(':');
return idJob === job.id;
},
_existingJobs
)
);
return (
<Box
flexDirection="row"
marginBottom={10}
paddingBottom={10}
className="sortable-inactive"
>
{flowShop == '1' ?
<Box marginRight={10} fontSize="1.5rem" width={20}>
<DragHandle/>
</Box>
: null}
<Box flex={1} padding={1}>
<Box width={200} marginBottom={10} flexDirection="row">
<Field component="select" name={`${prefix}.name`}>
{allJobs.map((job, key) => (
<option value={job} key={key}>{job}</option>
))}
</Field>
<Box cursor="pointer" onClick={this.deleteJob} marginLeft={5} color="red">✕</Box>
</Box>
<Box flexDirection="row" justifyContent="space-between" marginBottom={10}>
<Box flexBasis="30%">
<label>
Trvanie: <br />
<Field type="number" min={0} step={1} name={`${prefix}.t`} style={{ width: '100%' }} required />
</label>
</Box>
<Box flexBasis="30%">
<label>
Deadline: <br />
<Field type="number" min={0} step={1} name={`${prefix}.d`} style={{ width: '100%' }} disabled={rows.length > 1} />
</label>
</Box>
<Box flexBasis="30%">
<label>
Váha: (1-10) <br />
<Field type="number" min={1} max={10} step={1} name={`${prefix}.w`} style={{ width: '100%' }} />
</label>
</Box>
</Box>
<Box>
{/*<Box as="label" flexDirection="row" marginBottom={5}>*/}
{/*<Field type="radio" name={`${prefix}.succOrAnc`} value={0} checked={job.succOrAnc == '0'} disabled={rows[rowIndex].linkedTo}/> Bez nadväznosti*/}
{/*</Box>*/}
<Box marginBottom={5}>
<Box as="label" flexDirection="row">
Predchodcovia
</Box>
<Box flex={1} marginTop={5}>
<Select
multi
onChange={e => this.handleSelectChange('anc', e)}
options={existingJobs}
removeSelected
value={job.anc}
/>
</Box>
</Box>
</Box>
</Box>
</Box>
);
}
});
const SortableList = SortableContainer(({ jobs, existingJobs, prefix, rowIndex, draggingIndex }) => (
<div>
{jobs.map((job, i) => (
<SortableJob
key={job.id}
index={i}
myIndex={i}
rowIndex={rowIndex}
job={job}
prefix={`${prefix}.${i}`}
existingJobs={existingJobs}
isDragging={draggingIndex === i}
/>
))}
</div>
));
class Row extends React.PureComponent {
static contextTypes = {
formik: PropTypes.object
};
state = {
draggingIndex: -1
};
onSortStart = ({ index }) => {
this.setState({ draggingIndex: index });
};
onSortEnd = ({ oldIndex, newIndex }) => {
const { prefix, index } = this.props;
const { formik: { setFieldValue, values: { rows }} } = this.context;
const updatedJobs = arrayMove(rows[index].jobs, oldIndex, newIndex);
setFieldValue(`${prefix}.jobs`, updatedJobs);
this.setState({ draggingIndex: -1 });
};
findExistingJobs = () => {
const { formik: { values: { rows } } } = this.context;
const existingJobs = uniq(
flatten(
map(({ id: idRow, jobs }) =>
map(({ id: idJob }) => `${idRow}:${idJob}`, jobs),
rows)
)
);
return existingJobs;
};
addJob = () => {
const { index } = this.props;
const { formik: { setFieldValue, values: { rows, allJobs } } } = this.context;
const newJob = {
id: uuid(), name: allJobs[0], t: '', d: '', w: '', anc: []
};
const jobs = [...rows[index].jobs, newJob];
setFieldValue(`rows.${index}.jobs`, jobs);
};
deleteRow = () => {
const { index } = this.props;
const { formik: { setFieldValue, values: { rows } } } = this.context;
let newRows = remove(index, 1, rows);
setFieldValue('rows', newRows);
};
duplicate = () => {
const { index, name, preempt, jobs } = this.props;
const { formik: { setFieldValue, values: { rows } } } = this.context;
const jobsCopy = map(job => ({ ...job }), jobs);
const newRow = { id: uuid(), name: `${name} – kópia`, preempt, jobs: jobsCopy };
const updatedRows = insert(index + 1, newRow, rows);
setFieldValue('rows', updatedRows);
};
render() {
const { index, prefix, name, jobs } = this.props;
const { draggingIndex } = this.state;
const existingJobs = this.findExistingJobs();
return (
<Box flexDirection="row" marginBottom={30} padding={10} className="row">
<Box flexBasis="20%" flexShrink={0} paddingRight={10} flexDirection="row">
<strong>{name}</strong>
<Box cursor="pointer" onClick={this.deleteRow} color="red" marginLeft={5}>✕</Box>
</Box>
<Box flexBasis="63%" flexShrink={0}>
<FieldArray render={() => (
<SortableList
helperClass="sorting"
onSortStart={this.onSortStart}
onSortEnd={this.onSortEnd}
jobs={jobs}
useDragHandle={true}
existingJobs={existingJobs}
prefix={`${prefix}.jobs`}
rowIndex={index}
draggingIndex={draggingIndex}
/>
)} />
<Box onClick={this.addJob} {...theme.buttons.secondary} alignSelf="flex-start">
+ Nová úloha
</Box>
</Box>
<Box alignItems="center" flex={1}>
<Box
onClick={this.duplicate}
{...theme.buttons.tertiary}
flexDirection="row"
alignItems="center"
flexWrap="wrap"
justifyContent="center"
paddingVertical={1}
>
<span style={{ fontSize: '1.8em', paddingRight: '0.2em' }}>⩇</span> Duplikovať
</Box>
</Box>
</Box>
)
}
}
export default Form;