diff options
Diffstat (limited to 'src/client/views')
| -rw-r--r-- | src/client/views/nodes/TaskManagerTask.scss | 72 | ||||
| -rw-r--r-- | src/client/views/nodes/TaskManagerTask.tsx | 183 |
2 files changed, 189 insertions, 66 deletions
diff --git a/src/client/views/nodes/TaskManagerTask.scss b/src/client/views/nodes/TaskManagerTask.scss new file mode 100644 index 000000000..0fcc2f955 --- /dev/null +++ b/src/client/views/nodes/TaskManagerTask.scss @@ -0,0 +1,72 @@ +.task-manager-container { + display: flex; + flex-direction: column; + padding: 8px; + gap: 10px; + width: 100%; + height: 100%; + box-sizing: border-box; +} + +.task-manager-title { + width: 100%; + font-size: 1.25rem; + font-weight: 600; + padding: 6px 10px; + border: 1px solid #ccc; + border-radius: 6px; + box-sizing: border-box; +} + +.task-manager-description { + width: 100%; + font-size: 1rem; + padding: 8px 10px; + border: 1px solid #ccc; + border-radius: 6px; + min-height: 40px; + box-sizing: border-box; + vertical-align: top; + text-align: start; + resize: none; + line-height: 1.4; + resize: none; + flex-grow: 1 +} + +.task-manager-checkboxes { + display: flex; + align-items: center; + gap: 16px; +} + +.task-manager-allday, .task-manager-complete { + display: flex; + align-items: center; + gap: 6px; + font-size: 0.95rem; +} + +.task-manager-times { + display: flex; + flex-direction: column; + gap: 6px; + width: 100%; +} + +.task-manager-times label { + display: flex; + flex-direction: column; + font-size: 0.9rem; + font-weight: 500; + gap: 4px; +} + +input[type="datetime-local"] { + width: 100%; + font-size: 0.9rem; + padding: 6px 8px; + border: 1px solid #ccc; + border-radius: 6px; + box-sizing: border-box; +} diff --git a/src/client/views/nodes/TaskManagerTask.tsx b/src/client/views/nodes/TaskManagerTask.tsx index 29acba75e..1a9205ada 100644 --- a/src/client/views/nodes/TaskManagerTask.tsx +++ b/src/client/views/nodes/TaskManagerTask.tsx @@ -1,82 +1,133 @@ -import { makeObservable, action, observable } from 'mobx'; +import { action, observable, makeObservable } 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'; +import { Doc } from '../../../fields/Doc'; + +import './TaskManagerTask.scss'; interface TaskManagerProps { Document: Doc; } - + @observer export class TaskManagerTask extends React.Component<TaskManagerProps> { -public static LayoutString(fieldStr: string) { - return FieldView.LayoutString(TaskManagerTask, fieldStr); -} + 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> - ); -} + @action + updateText = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { + this.props.Document.text = e.target.value; + }; + + @action + updateTitle = (e: React.ChangeEvent<HTMLInputElement>) => { + this.props.Document.title = e.target.value; + }; + + @action + updateAllDay = (e: React.ChangeEvent<HTMLInputElement>) => { + this.props.Document.allDay = e.target.checked; + + if (e.target.checked) { + delete this.props.Document.startTime; + delete this.props.Document.endTime; + } + }; + + @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)); + }; + + @observable + completed = false; + + @action + toggleComplete = (e: React.ChangeEvent<HTMLInputElement>) => { + this.completed = e.target.checked; + }; + + constructor(props: TaskManagerProps) { + super(props); + makeObservable(this); + } + + render() { + const doc = this.props.Document; + + const taskDesc = typeof doc.text === 'string' ? doc.text : ''; + const taskTitle = typeof doc.title === 'string' ? doc.title : ''; + 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 className="task-manager-container"> + <input + className="task-manager-title" + type="text" + placeholder="Task Title" + value={taskTitle} + onChange={this.updateTitle} + disabled={this.completed} + style={{opacity: this.completed ? 0.7 : 1,}} + /> + + <textarea + className="task-manager-description" + placeholder="What’s your task?" + value={taskDesc} + onChange={this.updateText} + disabled={this.completed} + style={{opacity: this.completed ? 0.7 : 1,}} + /> + + <div className="task-manager-checkboxes"> + + <label className="task-manager-allday" style={{opacity: this.completed ? 0.7 : 1,}}> + <input + type="checkbox" + checked={allDay} + onChange={this.updateAllDay} + disabled={this.completed} + /> + All day + </label> + + <label className="task-manager-complete"> + <input type="checkbox" checked={this.completed} onChange={this.toggleComplete} /> + Complete + </label> + + </div> + + <div + className="task-manager-times" + style={{ visibility: allDay ? 'hidden' : 'visible', opacity: this.completed ? 0.7 : 1}} + > + <label> + Start: + <input type="datetime-local" value={startTime} onChange={this.updateStart} disabled={this.completed}/> + </label> + <label> + End: + <input type="datetime-local" value={endTime} onChange={this.updateEnd} disabled={this.completed} /> + </label> + </div> + </div> + ); + } } Docs.Prototypes.TemplateMap.set(DocumentType.TASK, { |