changed field names for tasks to start with task_. changed calendar date and range to start with _calendar

1 files changed, 72 insertions, 125 deletions

diff --git a/src/client/views/nodes/TaskBox.tsx b/src/client/views/nodes/TaskBox.tsx
index ff1c70b90..9d59746f8 100644
--- a/src/client/views/nodes/TaskBox.tsx
+++ b/src/client/views/nodes/TaskBox.tsx
@@ -1,4 +1,4 @@
-import { action, observable, makeObservable, IReactionDisposer, reaction } from 'mobx';
+import { action, makeObservable, IReactionDisposer, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Docs } from '../../documents/Documents';
@@ -22,11 +22,10 @@ interface TaskBoxProps {
  */
 @observer
 export class TaskBox extends React.Component<TaskBoxProps> {
-
     /**
-     * Method to reuturn the 
-     * @param fieldStr 
-     * @returns 
+     * Method to reuturn the
+     * @param fieldStr
+     * @returns
      */
     public static LayoutString(fieldStr: string) {
         return FieldView.LayoutString(TaskBox, fieldStr);
@@ -57,11 +56,11 @@ export class TaskBox extends React.Component<TaskBoxProps> {
      */
     @action
     updateAllDay = (e: React.ChangeEvent<HTMLInputElement>) => {
-        this.props.Document.$allDay = e.target.checked;
+        this.props.Document.$task_allDay = e.target.checked;
 
         if (e.target.checked) {
-            delete this.props.Document.$startTime;
-            delete this.props.Document.$endTime;
+            delete this.props.Document.$task_startTime;
+            delete this.props.Document.$task_endTime;
         }
 
         this.setTaskDateRange();
@@ -75,16 +74,16 @@ export class TaskBox extends React.Component<TaskBoxProps> {
     updateStart = (e: React.ChangeEvent<HTMLInputElement>) => {
         const newStart = new Date(e.target.value);
 
-        this.props.Document.$startTime = new DateField(newStart);
+        this.props.Document.$task_startTime = new DateField(newStart);
 
-        const endDate = this.props.Document.$endTime instanceof DateField ? this.props.Document.$endTime.date : undefined;
+        const endDate = this.props.Document.$task_endTime instanceof DateField ? this.props.Document.$task_endTime.date : undefined;
         if (endDate && newStart > endDate) {
             // Alert user
             alert('Start time cannot be after end time. End time has been adjusted.');
-            
+
             // Fix end time
             const adjustedEnd = new Date(newStart.getTime() + 60 * 60 * 1000);
-            this.props.Document.$endTime = new DateField(adjustedEnd);
+            this.props.Document.$task_endTime = new DateField(adjustedEnd);
         }
 
         this.setTaskDateRange();
@@ -98,16 +97,16 @@ export class TaskBox extends React.Component<TaskBoxProps> {
     updateEnd = (e: React.ChangeEvent<HTMLInputElement>) => {
         const newEnd = new Date(e.target.value);
 
-        this.props.Document.$endTime = new DateField(newEnd);
+        this.props.Document.$task_endTime = new DateField(newEnd);
 
-        const startDate = this.props.Document.$startTime instanceof DateField ? this.props.Document.$startTime.date : undefined;
+        const startDate = this.props.Document.$task_startTime instanceof DateField ? this.props.Document.$task_startTime.date : undefined;
         if (startDate && newEnd < startDate) {
             // Alert user
             alert('End time cannot be before start time. Start time has been adjusted.');
-            
+
             // Fix start time
             const adjustedStart = new Date(newEnd.getTime() - 60 * 60 * 1000);
-            this.props.Document.$startTime = new DateField(adjustedStart);
+            this.props.Document.$task_startTime = new DateField(adjustedStart);
         }
 
         this.setTaskDateRange();
@@ -120,21 +119,21 @@ export class TaskBox extends React.Component<TaskBoxProps> {
     setTaskDateRange() {
         const doc = this.props.Document;
 
-        if (doc.$allDay) {
-            const range = typeof doc.date_range === 'string' ? doc.date_range.split('|') : [];
+        if (doc.$task_allDay) {
+            const range = typeof doc.$task_dateRange === 'string' ? doc.$task_dateRange.split('|') : [];
             const dateStr = range[0] ?? new Date().toISOString().split('T')[0]; // default to today
 
-            doc.date_range = `${dateStr}|${dateStr}`;
-            doc.$allDay = true;
+            doc.$task_dateRange = `${dateStr}|${dateStr}`;
+            doc.$task_allDay = true;
         } else {
-            const startField = doc.$startTime;
-            const endField = doc.$endTime;
+            const startField = doc.$task_startTime;
+            const endField = doc.$task_endTime;
             const startDate = startField instanceof DateField ? startField.date : null;
             const endDate = endField instanceof DateField ? endField.date : null;
 
             if (startDate && endDate && !isNaN(startDate.getTime()) && !isNaN(endDate.getTime())) {
-                doc.date_range = `${startDate.toISOString()}|${endDate.toISOString()}`;
-                doc.$allDay = false;
+                doc.$task_dateRange = `${startDate.toISOString()}|${endDate.toISOString()}`;
+                doc.$task_allDay = false;
             }
         }
     }
@@ -146,12 +145,12 @@ export class TaskBox extends React.Component<TaskBoxProps> {
 
     @action
     toggleComplete = (e: React.ChangeEvent<HTMLInputElement>) => {
-        this.props.Document.$completed = e.target.checked;
+        this.props.Document.$task_completed = e.target.checked;
     };
 
     /**
      * Constructor for the task box
-     * @param props - props containing the document reference 
+     * @param props - props containing the document reference
      */
 
     constructor(props: TaskBoxProps) {
@@ -193,134 +192,81 @@ export class TaskBox extends React.Component<TaskBoxProps> {
     }
 
     /**
-     * Method to render the task box 
+     * Method to render the task box
      * @returns - HTML with taskbox components
      */
 
     render() {
-
         function toLocalDateTimeString(date: Date): string {
             const pad = (n: number) => n.toString().padStart(2, '0');
-            return (
-                date.getFullYear() +
-                '-' +
-                pad(date.getMonth() + 1) +
-                '-' +
-                pad(date.getDate()) +
-                'T' +
-                pad(date.getHours()) +
-                ':' +
-                pad(date.getMinutes())
-            );
+            return date.getFullYear() + '-' + pad(date.getMonth() + 1) + '-' + pad(date.getDate()) + 'T' + pad(date.getHours()) + ':' + pad(date.getMinutes());
         }
-        
+
         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 isCompleted = !!this.props.Document.$completed;
-
-        const startTime = doc.$startTime instanceof DateField && doc.$startTime.date instanceof Date
-            ? toLocalDateTimeString(doc.$startTime.date)
-            : '';
-
-        const endTime = doc.$endTime instanceof DateField && doc.$endTime.date instanceof Date
-            ? toLocalDateTimeString(doc.$endTime.date)
-            : '';
+        const allDay = !!doc.$task_allDay;
+        const isCompleted = !!this.props.Document.$task_completed;
 
+        const startTime = doc.$task_startTime instanceof DateField && doc.$task_startTime.date instanceof Date ? toLocalDateTimeString(doc.$task_startTime.date) : '';
 
+        const endTime = doc.$task_endTime instanceof DateField && doc.$task_endTime.date instanceof Date ? toLocalDateTimeString(doc.$task_endTime.date) : '';
 
         return (
             <div className="task-manager-container">
-                <input
-                    className="task-manager-title"
-                    type="text"
-                    placeholder="Task Title"
-                    value={taskTitle}
-                    onChange={this.updateTitle}
-                    disabled={isCompleted}
-                    style={{opacity: isCompleted ? 0.7 : 1,}}
-                />
-
-                <textarea
-                className="task-manager-description"
-                placeholder="What’s your task?"
-                value={taskDesc}
-                onChange={this.updateText}
-                disabled={isCompleted}
-                style={{opacity: isCompleted ? 0.7 : 1,}}
-                />
+                <input className="task-manager-title" type="text" placeholder="Task Title" value={taskTitle} onChange={this.updateTitle} disabled={isCompleted} style={{ opacity: isCompleted ? 0.7 : 1 }} />
 
-                <div className="task-manager-checkboxes">
+                <textarea className="task-manager-description" placeholder="What’s your task?" value={taskDesc} onChange={this.updateText} disabled={isCompleted} style={{ opacity: isCompleted ? 0.7 : 1 }} />
 
-                    <label className="task-manager-allday" style={{opacity: isCompleted ? 0.7 : 1,}}>
-                        <input 
-                            type="checkbox" 
-                            checked={allDay} 
-                            onChange={this.updateAllDay} 
-                            disabled={isCompleted}
-                        />
+                <div className="task-manager-checkboxes">
+                    <label className="task-manager-allday" style={{ opacity: isCompleted ? 0.7 : 1 }}>
+                        <input type="checkbox" checked={allDay} onChange={this.updateAllDay} disabled={isCompleted} />
                         All day
-                        
                         {allDay && (
-                        <input
-                            type="date"
-                            value={(() => {
-                                const rawRange = doc.date_range;
-                                if (typeof rawRange !== 'string') return '';
-                                const datePart = rawRange.split('|')[0];
-                                if (!datePart) return '';
-                                const d = new Date(datePart);
-                                return !isNaN(d.getTime()) ? d.toISOString().split('T')[0] : '';
-                            })()}
-                            onChange={e => {
-                                const newDate = new Date(e.target.value);
-                                if (!isNaN(newDate.getTime())) {
-                                    const dateStr = e.target.value;
-                                    if (dateStr) {
-                                        doc.date_range = `${dateStr}T00:00:00|${dateStr}T00:00:00`;
+                            <input
+                                type="date"
+                                value={(() => {
+                                    const rawRange = doc.$task_dateRange;
+                                    if (typeof rawRange !== 'string') return '';
+                                    const datePart = rawRange.split('|')[0];
+                                    if (!datePart) return '';
+                                    const d = new Date(datePart);
+                                    return !isNaN(d.getTime()) ? d.toISOString().split('T')[0] : '';
+                                })()}
+                                onChange={e => {
+                                    const newDate = new Date(e.target.value);
+                                    if (!isNaN(newDate.getTime())) {
+                                        const dateStr = e.target.value;
+                                        if (dateStr) {
+                                            doc.$task_dateRange = `${dateStr}T00:00:00|${dateStr}T00:00:00`;
+                                        }
                                     }
-                                }
-                            }}
-                            disabled={isCompleted}
-                            style={{ marginLeft: '8px' }}
-                        />
-                    )}
+                                }}
+                                disabled={isCompleted}
+                                style={{ marginLeft: '8px' }}
+                            />
+                        )}
                     </label>
 
                     <label className="task-manager-complete">
                         <input type="checkbox" checked={isCompleted} onChange={this.toggleComplete} />
                         Complete
                     </label>
-
                 </div>
 
                 {!allDay && (
-                <div
-                    className="task-manager-times"
-                    style={{ opacity: isCompleted ? 0.7 : 1 }}
-                >
-                    <label>
-                        Start:
-                        <input
-                            type="datetime-local"
-                            value={startTime}
-                            onChange={this.updateStart}
-                            disabled={isCompleted}
-                        />
-                    </label>
-                    <label>
-                        End:
-                        <input
-                            type="datetime-local"
-                            value={endTime}
-                            onChange={this.updateEnd}
-                            disabled={isCompleted}
-                        />
-                    </label>
-                </div>
-            )}
+                    <div className="task-manager-times" style={{ opacity: isCompleted ? 0.7 : 1 }}>
+                        <label>
+                            Start:
+                            <input type="datetime-local" value={startTime} onChange={this.updateStart} disabled={isCompleted} />
+                        </label>
+                        <label>
+                            End:
+                            <input type="datetime-local" value={endTime} onChange={this.updateEnd} disabled={isCompleted} />
+                        </label>
+                    </div>
+                )}
             </div>
         );
     }
@@ -337,9 +283,10 @@ Docs.Prototypes.TemplateMap.set(DocumentType.TASK, {
         _layout_nativeDimEditable: true,
         _layout_reflowVertical: true,
         _layout_reflowHorizontal: true,
+        task: '',
         defaultDoubleClick: 'ignore',
         systemIcon: 'BsCheckSquare',
         height_min: 300,
-        width_min: 300
+        width_min: 300,
     },
 });