@@ -5,27 +5,27 @@ import { normalizeData } from './ganttUtils';

 const algoData = [

   [

-    { startTime: 1, endTime: 3, processor: 1 },

-    { startTime: 4, endTime: 6, processor: 1 },

-    { startTime: 6, endTime: 10, processor: 1 },

+    { startTime: 1, endTime: 3, processor: 1, name: 'UI dizajnér' },

+    { startTime: 4, endTime: 6, processor: 1, name: 'UX dizajnér' },

+    { startTime: 6, endTime: 10, processor: 1, name: 'UI dizajnér' },

   ],

   [

-    { startTime: 6, endTime: 10, processor: 2 },

-    { startTime: 22, endTime: 23, processor: 2 },

-    { startTime: 23, endTime: 24, processor: 2 },

-    { startTime: 24, endTime: 25, processor: 2 },

+    { startTime: 6, endTime: 10, processor: 2, name: 'UI dizajnér' },

+    { startTime: 22, endTime: 23, processor: 2, name: 'UI dizajnér' },

+    { startTime: 23, endTime: 24, processor: 2, name: 'UI dizajnér' },

+    { startTime: 24, endTime: 25, processor: 2, name: 'UI dizajnér' },

   ],

   [

-    { startTime: 10, endTime: 16, processor: 3 },

+    { startTime: 10, endTime: 16, processor: 3, name: 'UI dizajnér' },

   ],

   [

-    { startTime: 10, endTime: 16, processor: 4 },

+    { startTime: 10, endTime: 16, processor: 4, name: 'UI dizajnér' },

   ],

   [

-    { startTime: 10, endTime: 16, processor: 5 },

+    { startTime: 10, endTime: 16, processor: 5, name: 'UI dizajnér' },

   ],

   [

-    { startTime: 10, endTime: 16, processor: 6 },

+    { startTime: 10, endTime: 16, processor: 6, name: 'UI dizajnér' },

   ]

 ];

@@ -31,9 +31,13 @@ const computeBoxStyle = (

     flex,

     backgroundColor,

+    color,

+    cursor,

+    textAlign,

+    fontSize,

     // Border props.

-    borderColor = 'gray',

+    borderColor,

     // We can't use borderColor as default because some component in React Native,

     // for example Image, doesn't support that.

     borderBottomColor,

@@ -45,7 +49,7 @@ const computeBoxStyle = (

     borderBottomRightRadius = borderRadius,

     borderTopLeftRadius = borderRadius,

     borderTopRightRadius = borderRadius,

-    borderWidth = 0, // Enfore React Native behaviour. It also makes more sense.

+    borderWidth,

     borderBottomWidth = borderWidth,

     borderLeftWidth = borderWidth,

     borderRightWidth = borderWidth,

@@ -116,6 +120,10 @@ const computeBoxStyle = (

     flex,

     backgroundColor,

+    color,

+    cursor,

+    textAlign,

+    fontSize,

     // Border props.

     borderColor,

@@ -12,13 +12,34 @@ 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

+  filter, find, findIndex, flatten, forEach, identity, map, prop, propEq, reject, uniq, update

 } from 'rambda';

-import { insert } from 'ramda';

+import { insert, remove } from 'ramda';

+import theme from '../theme';

 const allJobs = {

-  frontend: 'Frontend',

-  backend: 'Backend',

+  whatever: 'Vševediaci',

+

+  marketResearch: 'Prieskum trhu',

+

+  designUi: 'Dizajnér – UI',

+  designUx: 'Dizajnér – UX',

+

+  architect: 'Softwarový architekt',

+

+  devFrontend: 'Developer – frontend',

+  devBackend: 'Developer – backend',

+  devDb: 'Developer – databázy',

+

+  admin: 'Serverový administrátor',

+

+  tester: 'Tester',

+

+  analyst: 'Analytik',

+

+  qa: 'Quality assurance',

+

+  deployManager: 'Deploy'

 };

 const nextWorkerName = (rows) =>

@@ -27,58 +48,81 @@ const nextWorkerName = (rows) =>

 class Form extends React.PureComponent {

   state = {

     rows: [

-      {

-        id: uuid(),

-        name: 'pracovnik 1',

-        preempt: false,

-        linkedTo: null,

-        jobs: [

-          { id: uuid(), name: 'frontend', t: '', d: '', w: '', succ: [], anc: [], succOrAnc: 0 },

-          { id: uuid(), name: 'backend', t: '', d: '', w: '', succ: [], anc: [], succOrAnc: 0 }

-        ]

-      },

-      {

-        id: uuid(),

-        name: 'pracovnik 2',

-        preempt: false,

-        linkedTo: null,

-        jobs: [

-          { id: uuid(), name: 'frontend', t: '', d: '', w: '', succ: [], anc: [], succOrAnc: 0 },

-          { id: uuid(), name: 'backend', t: '', d: '', w: '', succ: [], anc: [], succOrAnc: 0 }

-        ]

-      }

+      // {

+      //   id: uuid(),

+      //   name: 'pracovnik 1',

+      //   preempt: false,

+      //   linkedTo: null,

+      //   jobs: [

+      //     { id: uuid(), name: 'frontend', t: '', d: '', w: '', succ: [], anc: [], succOrAnc: 0 },

+      //     { id: uuid(), name: 'backend', t: '', d: '', w: '', succ: [], anc: [], succOrAnc: 0 }

+      //   ]

+      // },

+      // {

+      //   id: uuid(),

+      //   name: 'pracovnik 2',

+      //   preempt: false,

+      //   linkedTo: null,

+      //   jobs: [

+      //     { id: uuid(), name: 'frontend', t: '', d: '', w: '', succ: [], anc: [], succOrAnc: 0 },

+      //     { id: uuid(), name: 'backend', t: '', d: '', w: '', succ: [], anc: [], succOrAnc: 0 }

+      //   ]

+      // }

     ]

   };

+  onSubmit = (values) => {

+    console.log(values);

+  };

+

   addWorker = (setFieldValue, rows) => {

-    const updatedRows = [...rows, { id: uuid(), name: nextWorkerName(rows), jobs: [] } ];

+    const jobs = [{

+      id: uuid(), name: 'whatever', t: '', d: '', w: '', succ: [], anc: [], succOrAnc: 0

+    }];

+

+    const updatedRows = [...rows, { id: uuid(), name: nextWorkerName(rows), jobs } ];

     setFieldValue('rows', updatedRows);

   };

   render() {

     return (

-      <Formik initialValues={this.state} render={({ setFieldValue, values: { rows } }) => (

-        <React.Fragment>

+      <Formik initialValues={this.state} onSubmit={this.onSubmit} render={({ setFieldValue, values: { rows } }) => (

+        <FormikForm>

           <h1>Konfigurácia projektu</h1>

+          {rows.length ?

           <Box flexDirection="row" marginBottom={10}>

-            <Box flexBasis="20%" flexShrink={0}><strong>Pracovník</strong></Box>

-            <Box flexBasis="60%" flexShrink={0}><strong>Úlohy</strong></Box>

-            <Box flexBasis="10%" flexShrink={0} align="center"><strong>Prerušenie</strong></Box>

-          </Box>

+            <Box flexBasis="15%" flexShrink={0}><strong>Pracovník</strong></Box>

+            <Box flexBasis="63%" flexShrink={0}><strong>Úlohy</strong></Box>

+            <Box flexBasis="12%" flexShrink={0} align="center"><strong>Prerušenie</strong></Box>

+          </Box> : null

+          }

           <FieldArray name="rows" render={arrayHelpers => (

-            <FormikForm>

+            <React.Fragment>

               {rows.map((row, i) => <Row key={i} {...row} arrayHelpers={arrayHelpers} prefix={`rows.${i}`} index={i} />)}

-            </FormikForm>

+            </React.Fragment>

           )} />

           <Box flexDirection="row" marginBottom={10}>

-            <Box flexBasis="20%" flexShrink={0} onClick={() => this.addWorker(setFieldValue, rows)} style={{ cursor: 'pointer' }}>

+            <Box

+              flexShrink={0}

+              onClick={() => this.addWorker(setFieldValue, rows)}

+              {...theme.buttons.primary}

+            >

               + Nový pracovník

             </Box>

           </Box>

-        </React.Fragment>

+

+          <Box as="button" margin="auto" width="20rem" alignItems="center" padding={5}

+               {...theme.buttons.primary} backgroundColor="#C89C93">

+            <Box fontSize="1rem">Cieľ:</Box>

+            <Box as="select" marginTop={5}>

+              <option>Minimalizovať počet oneskorených úloh</option>

+              <option>2...</option>

+            </Box>

+          </Box>

+        </FormikForm>

       )}>

       </Formik>

     )

@@ -124,7 +168,7 @@ const SortableJob = SortableElement(

           const row = find(propEq('id', idRow), rows);

           const jobName = find(propEq('id', idJob), row.jobs).name;

-          return ({ value, label: `${row.name} – ${jobName}` });

+          return ({ value, label: `${row.name} – ${allJobs[jobName]}` });

         },

         reject(

           value => {

@@ -136,19 +180,28 @@ const SortableJob = SortableElement(

       );

       return (

-        <Box flexDirection="row" marginBottom={10} paddingBottom={10} backgroundColor="white" borderBottomColor="#1B1B3A" borderBottomWidth={1} borderStyle="solid">

-          <Box marginRight={10} style={{ fontSize: '1.5rem' }}>

-            <DragHandle />

+        <Box

+          flexDirection="row"

+          marginBottom={10}

+          paddingBottom={10}

+          className="sortable-inactive"

+        >

+          <Box marginRight={10} fontSize="1.5rem" width={20}>

+            {!rows[rowIndex].linkedTo &&

+            <DragHandle/>

+            }

           </Box>

-          <Box flex={1}>

+          <Box flex={1} padding={1}>

             <Box width={200} marginBottom={10} flexDirection="row">

-              <Field component="select" name={`${prefix}.name`}>

+              <Field component="select" name={`${prefix}.name`} disabled={rows[rowIndex].linkedTo}>

                {Object.keys(allJobs).map(key => (

                   <option value={key} key={key}>{allJobs[key]}</option>

                 ))}

               </Field>

-              <Box style={{ cursor: 'pointer' }} onClick={this.deleteJob} marginLeft={5}>✕</Box>

+              {!rows[rowIndex].linkedTo &&

+              <Box cursor="pointer" onClick={this.deleteJob} marginLeft={5} color="red">✕</Box>

+              }

             </Box>

             <Box flexDirection="row" justifyContent="space-between" marginBottom={10}>

@@ -174,15 +227,15 @@ const SortableJob = SortableElement(

             <Box>

               <Box as="label" flexDirection="row" marginBottom={5}>

-                <Field type="radio" name={`${prefix}.succOrAnc`} value={0} /> Bez nadväznosti

+                <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">

-                  <Field type="radio" name={`${prefix}.succOrAnc`} value={1}/> Predchodcovia

+                  <Field type="radio" name={`${prefix}.succOrAnc`} value={1} checked={job.succOrAnc == '1'} disabled={rows[rowIndex].linkedTo} /> Predchodcovia

                 </Box>

                 <Box flex={1} marginLeft={10} marginTop={5}>

                   <Select

-                    disabled={false}

+                    disabled={job.succOrAnc != '1' || rows[rowIndex].linkedTo}

                     multi

                     onChange={e => this.handleSelectChange('anc', e)}

                     options={existingJobs}

@@ -193,11 +246,11 @@ const SortableJob = SortableElement(

               </Box>

               <Box>

                 <Box as="label" flexDirection="row">

-                  <Field type="radio" name={`${prefix}.succOrAnc`} value={2} /> Nasledovníci

+                  <Field type="radio" name={`${prefix}.succOrAnc`} value={2} checked={job.succOrAnc == '2'} disabled={rows[rowIndex].linkedTo} /> Nasledovníci

                 </Box>

                 <Box flex={1} marginLeft={10} marginTop={5}>

                   <Select

-                    disabled={false}

+                    disabled={job.succOrAnc != '2' || rows[rowIndex].linkedTo}

                     multi

                     onChange={e => this.handleSelectChange('succ', e)}

                     options={existingJobs}

@@ -213,7 +266,7 @@ const SortableJob = SortableElement(

     }

   });

-const SortableList = SortableContainer(({ jobs, existingJobs, prefix, rowIndex }) => (

+const SortableList = SortableContainer(({ jobs, existingJobs, prefix, rowIndex, draggingIndex }) => (

   <div>

     {jobs.map((job, i) => (

       <SortableJob

@@ -224,6 +277,7 @@ const SortableList = SortableContainer(({ jobs, existingJobs, prefix, rowIndex }

         job={job}

         prefix={`${prefix}.${i}`}

         existingJobs={existingJobs}

+        isDragging={draggingIndex === i}

       />

     ))}

   </div>

@@ -234,6 +288,14 @@ class Row extends React.PureComponent {

     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;

@@ -241,6 +303,7 @@ class Row extends React.PureComponent {

     const updatedJobs = arrayMove(rows[index].jobs, oldIndex, newIndex);

     setFieldValue(`${prefix}.jobs`, updatedJobs);

+    this.setState({ draggingIndex: -1 });

   };

   findExistingJobs = () => {

@@ -261,7 +324,7 @@ class Row extends React.PureComponent {

     const { index } = this.props;

     const { formik: { setFieldValue, values: { rows } } } = this.context;

     const newJob = {

-      id: uuid(), name: 'frontend', t: '', d: '', w: '', succ: [], anc: [], succOrAnc: 0

+      id: uuid(), name: 'whatever', t: '', d: '', w: '', succ: [], anc: [], succOrAnc: 0

     };

     const jobs = [...rows[index].jobs, newJob];

@@ -269,12 +332,28 @@ class Row extends React.PureComponent {

     setFieldValue(`rows.${index}.jobs`, jobs);

   };

+  deleteRow = () => {

+    const { index, id } = this.props;

+    const { formik: { setFieldValue, values: { rows } } } = this.context;

+

+    let newRows = remove(index, 1, rows);

+

+    const alsoDelete = filter(propEq('linkedTo', id), rows);

+

+    forEach(row => {

+      const index = findIndex(propEq('id', row.id), newRows);

+      newRows = remove(index, 1, newRows);

+    }, alsoDelete);

+

+    setFieldValue('rows', newRows);

+  };

+

   duplicate = () => {

     const { id, 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, linkedTo: id, jobs: jobsCopy };

+    const newRow = { id: uuid(), name: `${name} – kópia`, preempt, linkedTo: id, jobs: jobsCopy };

     const updatedRows = insert(index + 1, newRow, rows);

@@ -283,21 +362,59 @@ class Row extends React.PureComponent {

   render() {

     const { index, prefix, name, preempt, linkedTo, jobs } = this.props;

+    const { draggingIndex } = this.state;

+

     const existingJobs = this.findExistingJobs();

     return (

-      <Box flexDirection="row" marginBottom={30}>

-        <Box flexBasis="20%" flexShrink={0}>{name}</Box>

-        <Box flexBasis="60%" flexShrink={0}>

+      <Box flexDirection="row" marginBottom={30} padding={10} className="row">

+        <Box flexBasis="15%" flexShrink={0} paddingRight={10}>

+          <strong>{name}</strong>

+          <Box cursor="pointer" onClick={this.deleteRow} color="red">✕</Box>

+        </Box>

+        <Box flexBasis="63%" flexShrink={0}>

           <FieldArray render={() => (

-            <SortableList jobs={jobs} onSortStart={this.onSortStart} onSortEnd={this.onSortEnd} useDragHandle={true} existingJobs={existingJobs} prefix={`${prefix}.jobs`} rowIndex={index} />

+            <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} style={{ cursor: 'pointer' }}>+ Nová úloha</Box>

+          {!linkedTo &&

+          <Box onClick={this.addJob} {...theme.buttons.secondary} alignSelf="flex-start">

+            + Nová úloha

+          </Box>

+          }

         </Box>

-        <Box flexBasis="10%" flexShrink={0} alignItems="center">

-          <Field type="checkbox" name={`${prefix}.preempt`} />

+        <Box flexBasis="12%" flexShrink={0}>

+          <Box as="label" alignItems="center" paddingTop={10}>

+            <Field type="checkbox" name={`${prefix}.preempt`} disabled={linkedTo} />

+            <Box as="em" color="gray" textAlign="center" padding={10} fontSize="0.9em">

+              Úlohy pracovníka možno prerušiť

+            </Box>

+          </Box>

+        </Box>

+        <Box alignItems="flex-end">

+          {!linkedTo &&

+          <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 alignItems="flex-end"><button type="button" onClick={this.duplicate}>Duplikovať a spojiť pracovníka</button></Box>

       </Box>

     )

   }

@@ -61,6 +61,8 @@ class Gannt extends React.PureComponent {

     return (

       <div ref={measureRef}>

+        <h1>Ganttov diagram</h1>

+

         <ScatterChart width={width} height={height} data={data[0]} margin={theme.gantt.margin}>

           <CartesianGrid

             stroke={theme.gantt.grid.stroke}

@@ -75,7 +77,7 @@ class Gannt extends React.PureComponent {

             tickCount={ticksCountX}

             allowDecimals={false}

           >

-            <Label offset={-30} position="insideBottom">Time</Label>

+            <Label offset={-30} position="insideBottom">Čas</Label>

           </XAxis>

           <YAxis

             type="number"

@@ -86,7 +88,7 @@ class Gannt extends React.PureComponent {

             domain={[0.5, processors.length + 0.5]}

             ticks={processors}

           >

-            <Label position="insideLeft" angle={-90}>Workers</Label>

+            <Label position="insideLeft" angle={-90}>Pracovníci</Label>

           </YAxis>

           <Brush

             dataKey="startTime"

@@ -8,6 +8,7 @@ export default class Job extends React.PureComponent {

       x,

       y,

       payload: {

+        name,

         formerStartTime,

         formerEndTime,

         startTime,

@@ -33,19 +34,31 @@ export default class Job extends React.PureComponent {

     const width = (axisWidth / (niceTicks.length - 1)) * duration;

     const height = theme.gantt.job.height;

-    return <Box x={x + 5} y={y + 5} width={width} height={height} text={formerDuration} />

+    return (

+      <JobBox

+        x={x + 5}

+        y={y + 5}

+        width={width}

+        height={height}

+        duration={formerDuration}

+        name={name}

+      />

+    );

   }

 }

-class Box extends React.PureComponent {

+class JobBox extends React.PureComponent {

   render() {

-    const { x, y, width, height, text } = this.props;

+    const { x, y, width, height } = this.props;

+    let { duration, name } = this.props;

+

     const { fill, stroke, textColor } = theme.gantt.job;

     return (

       <React.Fragment>

         <Rectangle x={x} y={y - (height / 2)} width={width} height={height} fill={fill} stroke={stroke} />

-        <text x={x + (width / 2)} y={y} textAnchor="middle" alignmentBaseline="central" fill={textColor}>{text}</text>

+        <text x={x + 10} y={y - 9} alignmentBaseline="central" fill={textColor}>{duration}</text>

+        <text x={x + 10} y={y + 9} alignmentBaseline="central" fill={textColor}>{name}</text>

       </React.Fragment>

     );

   }

@@ -1,3 +1,7 @@

+* {

+  box-sizing: border-box;

+}

+

 body {

   margin: 0;

   padding: 0;

@@ -37,3 +41,22 @@ svg * {

 .color5 {

   color: #F1D8CB;

 }

+

+.row:hover,

+.sortable-inactive:hover {

+  background-color: #f8f9ff;

+}

+

+.sortable-inactive {

+  border-bottom: 1px solid #3A4168;

+}

+

+.sortable-inactive:last-child {

+  border-bottom: none;

+}

+

+.sorting {

+  background-color: white;

+  border-bottom-color: white !important;

+  box-shadow: 0 0 10px rgba(0,0,0,0.2)

+}

\ No newline at end of file

@@ -19,5 +19,24 @@ export default {

       color: '#3A4168'

     }

   },

-

+  buttons: {

+    primary: {

+      backgroundColor: '#1B1B3A',

+      color: 'white',

+      cursor: 'pointer',

+      padding: '10px'

+    },

+    secondary: {

+      backgroundColor: '#3A4168',

+      color: 'white',

+      cursor: 'pointer',

+      padding: '8px 10px'

+    },

+    tertiary: {

+      backgroundColor: '#98798F',

+      color: 'white',

+      cursor: 'pointer',

+      padding: '8px 10px'

+    }

+  }

 }

\ No newline at end of file