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,
};
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 (
(
1/3 Vytvorenie pracovníkov
{allJobs.map((_, key) => (
setFieldValue(`allJobs.${key}`, value)} />
setFieldValue(`allJobs`, remove(key, 1, allJobs))} color="red" marginRight={20}>✕
))}
this.new = c} marginRight={5} flex={1} />
+
{allJobs.length ? (
2/3 Konfigurácia projektu
{rows.length ?
Pracovníci
Úlohy
: null
}
(
{rows.map((row, i) => )}
)}/>
this.addWorker(setFieldValue, rows, allJobs)}
{...theme.buttons.primary}
>
+ Nový pracovník
{rows.length ?
Úlohy pracovníkov možno prerušiť
Vytvoriť rozvrh
: null}
) : null}
)}>
)
}
}
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 } } } = 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 (
{allJobs.map((job, key) => (
))}
✕
{/**/}
{/* Bez nadväznosti*/}
{/**/}
Predchodcovia
);
}
});
const SortableList = SortableContainer(({ jobs, existingJobs, prefix, rowIndex, draggingIndex }) => (
{jobs.map((job, i) => (
))}
));
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 (
{name}
✕
(
)} />
+ Nová úloha
⩇ Duplikovať
)
}
}
export default Form;