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

3 files changed, 207 insertions, 66 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 1b0c422da..9b1f64a36 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -969,6 +969,24 @@ export namespace Docs {
             );
         }
 
+        export function LinkDocument(source: Doc, target: Doc, options: DocumentOptions = {}, id?: string) {
+            const linkDoc = InstanceFromProto(
+                Prototypes.get(DocumentType.LINK),
+                undefined,
+                {
+                    link_anchor_1: source,
+                    link_anchor_2: target,
+                    ...options,
+                },
+                id,
+                'link'
+            );
+
+            Doc.AddLink(linkDoc);
+
+            return linkDoc;
+        }
+
         export function InkDocument(points: PointData[], options: DocumentOptions = {}, strokeWidth: number, color: string, strokeBezier: string, fillColor: string, arrowStart: string, arrowEnd: string, dash: string, isInkMask: boolean) {
             const ink = InstanceFromProto(Prototypes.get(DocumentType.INK), '', { title: 'ink', ...options });
             ink.$color = color;
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, {