1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
import { makeObservable, action, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Docs } from '../../documents/Documents';
import { DocumentType } from '../../documents/DocumentTypes';
import { FieldView } from './FieldView';
import { DateField } from '../../../fields/DateField';
import { Doc, FieldType } from '../../../fields/Doc';
interface TaskManagerProps {
Document: Doc;
}
@observer
export class TaskManagerTask extends React.Component<TaskManagerProps> {
public static LayoutString(fieldStr: string) {
return FieldView.LayoutString(TaskManagerTask, fieldStr);
}
@action
updateText = (e: React.ChangeEvent<HTMLInputElement>) => {
this.props.Document.text = e.target.value;
};
@action
updateAllDay = (e: React.ChangeEvent<HTMLInputElement>) => {
this.props.Document.allDay = e.target.checked;
};
@action
updateStart = (e: React.ChangeEvent<HTMLInputElement>) => {
this.props.Document.startTime = new DateField(new Date(e.target.value));
};
@action
updateEnd = (e: React.ChangeEvent<HTMLInputElement>) => {
this.props.Document.endTime = new DateField(new Date(e.target.value));
};
render() {
const doc = this.props.Document;
const taskDesc = typeof doc.text === 'string' ? doc.text : '';
const allDay = !!doc.allDay;
const startTime = doc.startTime instanceof DateField ? doc.startTime.date.toISOString().slice(0, 16) : '';
const endTime = doc.endTime instanceof DateField ? doc.endTime.date.toISOString().slice(0, 16) : '';
return (
<div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
<input
type="text"
placeholder="What’s your task?"
value={taskDesc}
onChange={this.updateText}
/>
<label>
<input type="checkbox" checked={allDay} onChange={this.updateAllDay} />
All day
</label>
{!allDay && (
<div style={{ display: 'flex', gap: 8 }}>
<label>
Start:
<input type="datetime-local" value={startTime} onChange={this.updateStart} />
</label>
<label>
End:
<input type="datetime-local" value={endTime} onChange={this.updateEnd} />
</label>
</div>
)}
</div>
);
}
}
Docs.Prototypes.TemplateMap.set(DocumentType.TASK, {
layout: { view: TaskManagerTask, dataField: 'text' },
options: {
acl: '',
_height: 35,
_xMargin: 10,
_yMargin: 10,
_layout_autoHeight: true,
_layout_nativeDimEditable: true,
_layout_reflowVertical: true,
_layout_reflowHorizontal: true,
defaultDoubleClick: 'ignore',
systemIcon: 'BsCheckSquare', // or whatever icon you like
},
});
|
