added task nodes styling, completion, and removal of start/end times upon all-day click

1 files changed, 117 insertions, 66 deletions

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, {