124 lines
3.2 KiB
JavaScript
124 lines
3.2 KiB
JavaScript
import { useEffect, useRef, useState } from 'react';
|
|
import {
|
|
Field,
|
|
Text,
|
|
TextArea,
|
|
Select,
|
|
Slider,
|
|
DatePicker,
|
|
} from '@svar-ui/react-core';
|
|
import { useWritableProp } from '@svar-ui/lib-react';
|
|
import './Form.css';
|
|
|
|
export default function Form(props) {
|
|
const [task, setTask] = useWritableProp(props.task);
|
|
const { taskTypes, onAction } = props;
|
|
|
|
const nodeRef = useRef(null);
|
|
const [left, setLeft] = useState();
|
|
const [top, setTop] = useState();
|
|
|
|
useEffect(() => {
|
|
if (nodeRef.current) {
|
|
setLeft((window.innerWidth - nodeRef.current.offsetWidth) / 2);
|
|
setTop((window.innerHeight - nodeRef.current.offsetHeight) / 2);
|
|
}
|
|
}, []);
|
|
|
|
function deleteTask() {
|
|
onAction && onAction({ action: 'delete-task', data: { id: task.id } });
|
|
onAction && onAction({ action: 'close-form' });
|
|
}
|
|
|
|
function onClose() {
|
|
onAction && onAction({ action: 'close-form' });
|
|
}
|
|
|
|
function handleChange({ value }, key) {
|
|
let t = task;
|
|
if (key === 'type' && value === 'milestone') {
|
|
delete t.end;
|
|
t.duration = 0;
|
|
} else if (t.start > t.end) {
|
|
t.start = t.end;
|
|
t.duration = 1;
|
|
t.end = 0;
|
|
}
|
|
t = {
|
|
...t,
|
|
[key]: value,
|
|
};
|
|
setTask(t);
|
|
onAction &&
|
|
onAction({
|
|
action: 'update-task',
|
|
data: { id: t.id, task: t },
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className="wx-QkE5vh0y backdrop">
|
|
<div className="wx-QkE5vh0y modal" style={{ left, top }} ref={nodeRef}>
|
|
<div className="wx-QkE5vh0y header">
|
|
<h3 className="wx-QkE5vh0y title">Edit task</h3>
|
|
<i className="wx-QkE5vh0y close wxi-close" onClick={onClose}></i>
|
|
</div>
|
|
<div className="wx-QkE5vh0y body">
|
|
<Field label="Name">
|
|
<Text
|
|
focus={true}
|
|
value={task.text}
|
|
onChange={(ev) => handleChange(ev, 'text')}
|
|
/>
|
|
</Field>
|
|
|
|
<Field label="Description">
|
|
<TextArea
|
|
value={task.details}
|
|
onChange={(ev) => handleChange(ev, 'details')}
|
|
/>
|
|
</Field>
|
|
|
|
{taskTypes.length > 1 ? (
|
|
<Field label="Type">
|
|
<Select
|
|
value={task.type}
|
|
options={taskTypes}
|
|
onChange={(ev) => handleChange(ev, 'type')}
|
|
/>
|
|
</Field>
|
|
) : null}
|
|
|
|
<Field label="Start date">
|
|
<DatePicker
|
|
value={task.start}
|
|
onChange={(ev) => handleChange(ev, 'start')}
|
|
/>
|
|
</Field>
|
|
|
|
{task.type !== 'milestone' ? (
|
|
<>
|
|
<Field label="End date">
|
|
<DatePicker
|
|
value={task.end}
|
|
onChange={(ev) => handleChange(ev, 'end')}
|
|
/>
|
|
</Field>
|
|
<Field label={`Progress: ${task.progress}%`}>
|
|
<Slider
|
|
value={task.progress}
|
|
onChange={(ev) => handleChange(ev, 'progress')}
|
|
/>
|
|
</Field>
|
|
</>
|
|
) : null}
|
|
|
|
<button className="wx-QkE5vh0y button danger" onClick={deleteTask}>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|