From 54b8c7e9ec258fd43ec523aaf3d967a646022cee Mon Sep 17 00:00:00 2001
From: aaravkumar <aarav.kumar1510@gmail.com>
Date: Wed, 30 Apr 2025 22:54:16 -0400
Subject: made document options as data doc options ($), and fixed namign
 conventions

---
 src/client/views/nodes/TaskBox.tsx | 298 +++++++++++++++++++++++++++++++++++++
 1 file changed, 298 insertions(+)
 create mode 100644 src/client/views/nodes/TaskBox.tsx

(limited to 'src/client/views/nodes/TaskBox.tsx')

diff --git a/src/client/views/nodes/TaskBox.tsx b/src/client/views/nodes/TaskBox.tsx
new file mode 100644
index 000000000..dca01817f
--- /dev/null
+++ b/src/client/views/nodes/TaskBox.tsx
@@ -0,0 +1,298 @@
+import { action, observable, makeObservable, IReactionDisposer, reaction } 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 } from '../../../fields/Doc';
+
+import './TaskBox.scss';
+
+interface TaskBoxProps {
+    Document: Doc;
+}
+
+@observer
+export class TaskBox extends React.Component<TaskBoxProps> {
+    public static LayoutString(fieldStr: string) {
+        return FieldView.LayoutString(TaskBox, fieldStr);
+    }
+
+    @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;
+        }
+
+        this.setTaskDateRange();
+    };
+
+    @action
+    updateStart = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newStart = new Date(e.target.value);
+
+        this.props.Document.$startTime = new DateField(newStart);
+
+        const endDate = this.props.Document.$endTime instanceof DateField ? this.props.Document.$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.setTaskDateRange();
+    };
+
+
+
+    @action
+    updateEnd = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newEnd = new Date(e.target.value);
+
+        this.props.Document.$endTime = new DateField(newEnd);
+
+        const startDate = this.props.Document.$startTime instanceof DateField ? this.props.Document.$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.setTaskDateRange();
+    };
+
+
+
+
+    @action
+    setTaskDateRange() {
+        const doc = this.props.Document;
+
+        if (doc.$allDay) {
+            const range = typeof doc.date_range === 'string' ? doc.date_range.split('|') : [];
+            const dateStr = range[0] ?? new Date().toISOString().split('T')[0]; // default to today
+
+            doc.date_range = `${dateStr}|${dateStr}`;
+            doc.$allDay = true;
+        } else {
+            const startField = doc.$startTime;
+            const endField = doc.$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;
+            }
+        }
+    }
+
+    @action
+    toggleComplete = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.props.Document.$completed = e.target.checked;
+    };
+
+    constructor(props: TaskBoxProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    _heightDisposer?: IReactionDisposer;
+    _widthDisposer?: IReactionDisposer;
+
+    componentDidMount() {
+        this.setTaskDateRange();
+
+        const doc = this.props.Document;
+        this._heightDisposer = reaction(
+            () => Number(doc._height),
+            height => {
+                const minHeight = Number(doc.height_min ?? 0);
+                if (!isNaN(height) && height < minHeight) {
+                    doc._height = minHeight;
+                }
+            }
+        );
+
+        this._widthDisposer = reaction(
+            () => Number(doc._width),
+            width => {
+                const minWidth = Number(doc.width_min ?? 0);
+                if (!isNaN(width) && width < minWidth) {
+                    doc._width = minWidth;
+                }
+            }
+        );
+    }
+
+    componentWillUnmount() {
+        this._heightDisposer?.();
+        this._widthDisposer?.();
+    }
+
+    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())
+            );
+        }
+        
+        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)
+            : '';
+
+
+
+        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,}}
+                />
+
+                <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`;
+                                    }
+                                }
+                            }}
+                            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>
+        );
+    }
+}
+
+Docs.Prototypes.TemplateMap.set(DocumentType.TASK, {
+    layout: { view: TaskBox, 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',
+        height_min: 300,
+        width_min: 300
+    },
+});
-- 
cgit v1.2.3-70-g09d2


From 0dc1d055d1b278cf174dd40591a343b0e478db44 Mon Sep 17 00:00:00 2001
From: aaravkumar <aarav.kumar1510@gmail.com>
Date: Sun, 11 May 2025 14:00:41 -0400
Subject: cleaned up code, commented out console logs, added documentation, and
 added menu for pormpt generation

---
 src/client/views/nodes/TaskBox.tsx                 |  57 ++++++-
 .../views/nodes/formattedText/DailyJournal.tsx     | 181 ++++++++++++++++++---
 2 files changed, 213 insertions(+), 25 deletions(-)

(limited to 'src/client/views/nodes/TaskBox.tsx')

diff --git a/src/client/views/nodes/TaskBox.tsx b/src/client/views/nodes/TaskBox.tsx
index dca01817f..ff1c70b90 100644
--- a/src/client/views/nodes/TaskBox.tsx
+++ b/src/client/views/nodes/TaskBox.tsx
@@ -9,26 +9,52 @@ import { Doc } from '../../../fields/Doc';
 
 import './TaskBox.scss';
 
+/**
+ * Props (reference to document) for Task Box
+ */
+
 interface TaskBoxProps {
     Document: Doc;
 }
 
+/**
+ * TaskBox class for adding task information + completing tasks
+ */
 @observer
 export class TaskBox extends React.Component<TaskBoxProps> {
+
+    /**
+     * Method to reuturn the 
+     * @param fieldStr 
+     * @returns 
+     */
     public static LayoutString(fieldStr: string) {
         return FieldView.LayoutString(TaskBox, fieldStr);
     }
 
+    /**
+     * Method to update the task description
+     * @param e - event of changing the description box input
+     */
+
     @action
     updateText = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         this.props.Document.text = e.target.value;
     };
 
+    /**
+     * Method to update the task title
+     * @param e - event of changing the title box input
+     */
     @action
     updateTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.props.Document.title = e.target.value;
     };
 
+    /**
+     * Method to update the all day status
+     * @param e - event of changing the all day checkbox
+     */
     @action
     updateAllDay = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.props.Document.$allDay = e.target.checked;
@@ -41,6 +67,10 @@ export class TaskBox extends React.Component<TaskBoxProps> {
         this.setTaskDateRange();
     };
 
+    /**
+     * Method to update the task start time
+     * @param e - event of changing the start time input
+     */
     @action
     updateStart = (e: React.ChangeEvent<HTMLInputElement>) => {
         const newStart = new Date(e.target.value);
@@ -60,8 +90,10 @@ export class TaskBox extends React.Component<TaskBoxProps> {
         this.setTaskDateRange();
     };
 
-
-
+    /**
+     * Method to update the task end time
+     * @param e - event of changing the end time input
+     */
     @action
     updateEnd = (e: React.ChangeEvent<HTMLInputElement>) => {
         const newEnd = new Date(e.target.value);
@@ -81,9 +113,9 @@ export class TaskBox extends React.Component<TaskBoxProps> {
         this.setTaskDateRange();
     };
 
-
-
-
+    /**
+     * Method to update the task date range
+     */
     @action
     setTaskDateRange() {
         const doc = this.props.Document;
@@ -107,11 +139,21 @@ export class TaskBox extends React.Component<TaskBoxProps> {
         }
     }
 
+    /**
+     * Method to set task's completion status
+     * @param e - event of changing the "completed" input checkbox
+     */
+
     @action
     toggleComplete = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.props.Document.$completed = e.target.checked;
     };
 
+    /**
+     * Constructor for the task box
+     * @param props - props containing the document reference 
+     */
+
     constructor(props: TaskBoxProps) {
         super(props);
         makeObservable(this);
@@ -150,6 +192,11 @@ export class TaskBox extends React.Component<TaskBoxProps> {
         this._widthDisposer?.();
     }
 
+    /**
+     * Method to render the task box 
+     * @returns - HTML with taskbox components
+     */
+
     render() {
 
         function toLocalDateTimeString(date: Date): string {
diff --git a/src/client/views/nodes/formattedText/DailyJournal.tsx b/src/client/views/nodes/formattedText/DailyJournal.tsx
index d6d30dc13..269a609ef 100644
--- a/src/client/views/nodes/formattedText/DailyJournal.tsx
+++ b/src/client/views/nodes/formattedText/DailyJournal.tsx
@@ -10,11 +10,18 @@ import { RichTextField } from '../../../../fields/RichTextField';
 import { Plugin } from 'prosemirror-state';
 import { RTFCast } from '../../../../fields/Types';
 import { Mark } from 'prosemirror-model';
+import { observer } from 'mobx-react';
+
 
 export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @observable journalDate: string;
-    @observable typingTimeout: NodeJS.Timeout | null = null; // Track typing delay
-    @observable lastUserText: string = ''; // Store last user-entered text
+    @observable typingTimeout: NodeJS.Timeout | null = null; // track typing delay
+    @observable lastUserText: string = ''; // store last user-entered text
+    @observable isLoadingPrompts: boolean = false; // track if prompts are loading
+    @observable showPromptMenu = false;
+    @observable inlinePromptsEnabled = true;
+
+
     _ref = React.createRef<FormattedTextBox>(); // reference to the formatted textbox
     predictiveTextRange: { from: number; to: number } | null = null; // where predictive text starts and ends
     private predictiveText: string | null = ' ... why?';
@@ -42,7 +49,7 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
             month: 'long',
             day: 'numeric',
         });
-        console.log('getFormattedDate():', date);
+        // console.log('getFormattedDate():', date);
         return date;
     }
 
@@ -51,15 +58,15 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
      */
     @action
     setDailyTitle() {
-        console.log('setDailyTitle() called...');
-        console.log('Current title before update:', this.dataDoc.title);
+        // console.log('setDailyTitle() called...');
+        // console.log('Current title before update:', this.dataDoc.title);
 
         if (!this.dataDoc.title || this.dataDoc.title !== this.journalDate) {
-            console.log('Updating title to:', this.journalDate);
+            // console.log('Updating title to:', this.journalDate);
             this.dataDoc.title = this.journalDate;
         }
 
-        console.log('New title after update:', this.dataDoc.title);
+        // console.log('New title after update:', this.dataDoc.title);
     }
 
     /**
@@ -70,7 +77,7 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
         const placeholderText = 'Start writing here...';
         const dateText = `${this.journalDate}\n`;
 
-        console.log('Checking if dataDoc has text field...');
+        // console.log('Checking if dataDoc has text field...');
 
         this.dataDoc[this.fieldKey] = RichTextField.textToRtfFormat(
             [
@@ -82,9 +89,43 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
             placeholderText.length
         );
 
-        console.log('Current text field:', this.dataDoc[this.fieldKey]);
+        // console.log('Current text field:', this.dataDoc[this.fieldKey]);
+    }
+
+    /**
+     * Method to show/hide the prompts menu
+     */
+    @action.bound togglePromptMenu() {
+        this.showPromptMenu = !this.showPromptMenu;
+    }
+
+    /**
+     * Method to toggle on/off inline predictive prompts
+     */
+    @action.bound toggleInlinePrompts() {
+        this.inlinePromptsEnabled = !this.inlinePromptsEnabled;
+    }
+    
+    /**
+     * Method to handle click on document (to close prompt menu)
+     * @param e - a click on the document
+     */
+    @action.bound
+    handleDocumentClick(e: MouseEvent) {
+        const menu = document.getElementById('prompts-menu');
+        const button = document.getElementById('prompts-button');
+        if (
+            this.showPromptMenu &&
+            menu &&
+            !menu.contains(e.target as Node) &&
+            button &&
+            !button.contains(e.target as Node)
+        ) {
+            this.showPromptMenu = false;
+        }
     }
 
+
     /**
      * Method to set initial date of document in the calendar view
      */
@@ -99,9 +140,9 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 this.dataDoc.date_range = `${localStart.toISOString()}|${localEnd.toISOString()}`;
                 this.dataDoc.allDay = true;
 
-                console.log('Set date_range and allDay on journal (from local date):', this.dataDoc.date_range);
+                // console.log('Set date_range and allDay on journal (from local date):', this.dataDoc.date_range);
             } else {
-                console.log('Could not parse journalDate:', this.journalDate);
+                // console.log('Could not parse journalDate:', this.journalDate);
             }
         }
     }
@@ -143,6 +184,8 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
      */
 
     @action insertPredictiveQuestion = async () => {
+        if (!this.inlinePromptsEnabled) return;
+
         const editorView = this._ref.current?.EditorView;
         if (!editorView) return;
 
@@ -196,6 +239,10 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
         this.predictiveText = text;
     };
 
+    /**
+     * Method to remove the predictive question upon type/click
+     * @returns - once predictive text is found, or all text has been checked
+     */
     createPredictiveCleanupPlugin = () => {
         return new Plugin({
             view: () => {
@@ -213,7 +260,7 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
                                 if (node.isText && node.text === textToRemove) {
                                     const tr = state.tr.delete(pos, pos + node.nodeSize);
 
-                                    // Set the desired default marks for future input
+                                    // default marks for input
                                     const fontSizeMark = state.schema.marks.pFontSize.create({ fontSize: '14px' });
                                     const fontColorMark = state.schema.marks.pFontColor.create({ fontColor: 'gray' });
                                     tr.setStoredMarks([]);
@@ -244,8 +291,9 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
     };
 
     componentDidMount(): void {
-        console.log('componentDidMount() triggered...');
-        console.log('Text: ' + RTFCast(this.Document.text)?.Text);
+        // console.log('componentDidMount() triggered...');
+        document.addEventListener('mousedown', this.handleDocumentClick);
+        // console.log('Text: ' + RTFCast(this.Document.text)?.Text);
 
         const editorView = this._ref.current?.EditorView;
         if (editorView) {
@@ -264,16 +312,17 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
         const isDefaultTitle = isTitleString && currentTitle.includes('Untitled DailyJournal');
 
         if (isTextEmpty && isDefaultTitle) {
-            console.log('Journal title and text are default. Initializing...');
+            // console.log('Journal title and text are default. Initializing...');
             this.setDailyTitle();
             this.setDailyText();
             this.setInitialDateRange();
         } else {
-            console.log('Journal already has content. Skipping initialization.');
+            // console.log('Journal already has content. Skipping initialization.');
         }
     }
 
     componentWillUnmount(): void {
+        document.removeEventListener('mousedown', this.handleDocumentClick);
         const editorView = this._ref.current?.EditorView;
         if (editorView) {
             editorView.dom.removeEventListener('input', this.onTextInput);
@@ -281,10 +330,20 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
         if (this.typingTimeout) clearTimeout(this.typingTimeout);
     }
 
+    /**
+     * Method to generate pormpts via GPT
+     * @returns - if failed
+     */
     @action handleGeneratePrompts = async () => {
+        if (this.isLoadingPrompts) {
+            return
+        }
+
+        this.isLoadingPrompts = true;
+
         const rawText = RTFCast(this.Document.text)?.Text ?? '';
-        console.log('Extracted Journal Text:', rawText);
-        console.log('Before Update:', this.Document.text, 'Type:', typeof this.Document.text);
+        // console.log('Extracted Journal Text:', rawText);
+        // console.log('Before Update:', this.Document.text, 'Type:', typeof this.Document.text);
 
         if (!rawText.trim()) {
             alert('Journal is empty! Write something first.');
@@ -321,12 +380,20 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 // Insert formatted text
                 const transaction = state.tr.insert(state.selection.from, headerText).insert(state.selection.from + headerText.nodeSize, responseText);
                 dispatch(transaction);
+                (this._props as any)?.updateLayout?.();
+
             }
         } catch (err) {
             console.error('Error calling GPT:', err);
+        } finally {
+            this.isLoadingPrompts = false;
         }
     };
 
+    /**
+     * Method to render the styled DailyJournal 
+     * @returns - the HTML component for the journal
+     */
     render() {
         return (
             <div
@@ -347,6 +414,7 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 }}>
                 {/* GPT Button */}
                 <button
+                    id="prompts-button"
                     style={{
                         position: 'absolute',
                         bottom: '5px',
@@ -359,9 +427,80 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
                         cursor: 'pointer',
                         zIndex: 10,
                     }}
-                    onClick={this.handleGeneratePrompts}>
+                    onClick={this.togglePromptMenu}
+                >
                     Prompts
                 </button>
+                {this.showPromptMenu && (
+                    <div
+                        id="prompts-menu"
+                        style={{
+                            position: 'absolute',
+                            bottom: '45px',
+                            right: '5px',
+                            backgroundColor: 'white',
+                            border: '1px solid #ccc',
+                            borderRadius: '4px',
+                            padding: '10px',
+                            boxShadow: '0 2px 6px rgba(0,0,0,0.2)',
+                            zIndex: 20,
+                            minWidth: '170px',
+                            maxWidth: 'fit-content',
+                            overflow: 'auto',
+                        }}
+                    >
+                        <div
+                            style={{
+                                display: 'flex',
+                                justifyContent: 'flex-end',
+                                alignItems: 'center',
+                                marginBottom: '10px',
+                            }}
+                        >
+                            <label
+                                style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '6px',
+                                    fontSize: '14px',
+                                    justifyContent: 'flex-end',
+                                    width: '100%',
+                                }}
+                            >
+                                Inline Prompting
+                                <input
+                                    type="checkbox"
+                                    checked={this.inlinePromptsEnabled}
+                                    onChange={this.toggleInlinePrompts}
+                                    style={{ margin: 0 }}
+                                />
+                            </label>
+
+                        </div>
+
+                        <button
+                            onClick={() => {
+                                this.showPromptMenu = false;
+                                this.handleGeneratePrompts();
+                            }}
+                            disabled={this.isLoadingPrompts}
+                            style={{
+                                backgroundColor: '#9EAD7C',
+                                color: 'white',
+                                border: 'none',
+                                borderRadius: '4px',
+                                cursor: this.isLoadingPrompts ? 'not-allowed' : 'pointer',
+                                opacity: this.isLoadingPrompts ? 0.6 : 1,
+                                padding: '5px 10px',
+                                float: 'right',
+                            }}
+                        >
+                            Generate Prompts
+                        </button>
+                    </div>
+                )}
+
+
 
                 <FormattedTextBox ref={this._ref} {...this._props} fieldKey={'text'} Document={this.Document} TemplateDataDocument={undefined} />
             </div>
@@ -369,8 +508,10 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
     }
 }
 
+const ObservedDailyJournal = observer(DailyJournal);
+
 Docs.Prototypes.TemplateMap.set(DocumentType.JOURNAL, {
-    layout: { view: DailyJournal, dataField: 'text' },
+    layout: { view: ObservedDailyJournal, dataField: 'text' },
     options: {
         acl: '',
         _height: 35,
-- 
cgit v1.2.3-70-g09d2


From 57e1862e58e89a505547d817123c04079854814f Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 2 Jun 2025 18:58:18 -0400
Subject: changed field names for tasks to start with task_.  changed calendar
 date and range to start with _calendar

---
 src/client/documents/Documents.ts                  |  18 +-
 src/client/util/CalendarManager.tsx                |   2 +-
 src/client/views/nodes/TaskBox.tsx                 | 197 ++++++++-------------
 src/client/views/nodes/calendarBox/CalendarBox.tsx |  41 ++---
 .../views/nodes/formattedText/DailyJournal.tsx     |  70 ++------
 5 files changed, 124 insertions(+), 204 deletions(-)

(limited to 'src/client/views/nodes/TaskBox.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 0b6385466..4ad9c9bd8 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -11,7 +11,7 @@ import { List } from '../../fields/List';
 import { RichTextField } from '../../fields/RichTextField';
 import { SchemaHeaderField } from '../../fields/SchemaHeaderField';
 import { ComputedField, ScriptField } from '../../fields/ScriptField';
-import { DocCast, ScriptCast, StrCast } from '../../fields/Types';
+import { ScriptCast, StrCast } from '../../fields/Types';
 import { AudioField, CsvField, ImageField, PdfField, VideoField, WebField } from '../../fields/URLField';
 import { SharingPermissions } from '../../fields/util';
 import { PointData } from '../../pen-gestures/GestureTypes';
@@ -182,8 +182,6 @@ export class DocumentOptions {
     identifier?: STRt = new StrInfo('documentIcon displayed for each doc as "d[x]"', false);
     _rotation?: NUMt = new NumInfo('Amount of rotation on a document in degrees', false);
 
-    date_range?: STRt = new StrInfo('date range for calendar', false);
-
     chat?: STRt = new StrInfo('fields related to chatBox', false);
     chat_history?: STRt = new StrInfo('chat history for chatbox', false);
     chat_thread_id?: STRt = new StrInfo('thread id for chatbox', false);
@@ -525,10 +523,14 @@ export class DocumentOptions {
     ai_generatedDocs?: List<Doc>; // list of documents generated by GAI engine
 
     // TASK MANAGER
-    $startTime?: DateInfo | DateField = new DateInfo('start date and time', /*filterable*/ false);
-    $endTime?: DateInfo | DateField = new DateInfo('end date and time', /*filterable*/ false);
-    $allDay?: BoolInfo | boolean = new BoolInfo('whether task is all-day or not', /*filterable*/ false);
-    $completed?: BoolInfo | boolean = new BoolInfo('whether the task is completed', /*filterable*/ false);
+    $task_dateRange?: STRt = new StrInfo('date range for calendar', false);
+    $task_startTime?: DateInfo | DateField = new DateInfo('start date and time', /*filterable*/ false);
+    $task_endTime?: DateInfo | DateField = new DateInfo('end date and time', /*filterable*/ false);
+    $task_allDay?: BoolInfo | boolean = new BoolInfo('whether task is all-day or not', /*filterable*/ false);
+    $task_completed?: BoolInfo | boolean = new BoolInfo('whether the task is completed', /*filterable*/ false);
+
+    _calendar_date?: DateInfo | DateField = new DateInfo('current selected date of a calendar', /*filterable*/ false);
+    _calendar_dateRange?: STRt = new StrInfo('date range shown on a calendar', false);
 
     /**
      * JSON‐stringified slot configuration for ScrapbookBox
@@ -978,6 +980,7 @@ export namespace Docs {
             );
         }
 
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         export function TaskDocument(text = '', options: DocumentOptions = {}, fieldKey = 'text') {
             return InstanceFromProto(
                 Prototypes.get(DocumentType.TASK),
@@ -1070,6 +1073,7 @@ export namespace Docs {
                 _layout_nativeDimEditable: true,
                 _layout_reflowHorizontal: true,
                 _layout_reflowVertical: true,
+                calendar: '',
                 ...options,
                 _type_collection: CollectionViewType.Calendar,
             });
diff --git a/src/client/util/CalendarManager.tsx b/src/client/util/CalendarManager.tsx
index b50e39c02..a8460ed4b 100644
--- a/src/client/util/CalendarManager.tsx
+++ b/src/client/util/CalendarManager.tsx
@@ -156,7 +156,7 @@ export class CalendarManager extends ObservableReactComponent<object> {
             const subDocEmbedding = Doc.MakeEmbedding(targetDoc); // embedding
             console.log('subdoc embedding', subDocEmbedding);
             subDocEmbedding.embedContainer = calendar; // set embed container
-            subDocEmbedding.date_range = `${startDateStr}|${endDateStr}`; // set subDoc date range
+            subDocEmbedding.task_dateRange = `${startDateStr}|${endDateStr}`; // set subDoc date range
 
             Doc.AddDocToList(calendar, 'data', subDocEmbedding); // add embedded subDoc to calendar
 
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,
     },
 });
diff --git a/src/client/views/nodes/calendarBox/CalendarBox.tsx b/src/client/views/nodes/calendarBox/CalendarBox.tsx
index f21eec604..835d58337 100644
--- a/src/client/views/nodes/calendarBox/CalendarBox.tsx
+++ b/src/client/views/nodes/calendarBox/CalendarBox.tsx
@@ -46,6 +46,7 @@ export class CalendarBox extends CollectionSubView() {
     }
 
     componentDidMount(): void {
+        this.Document.$calendar = ''; // needed only to make the keyvalue view look nice.
         this._props.setContentViewBox?.(this);
         this._eventsDisposer = reaction(
             () => ({ events: this.calendarEvents }),
@@ -73,8 +74,8 @@ export class CalendarBox extends CollectionSubView() {
 
     @computed get calendarEvents(): EventSourceInput | undefined {
         return this.childDocs.map(doc => {
-            const { start, end } = dateRangeStrToDates(StrCast(doc.date_range));
-            const isCompleted = BoolCast(doc.$completed); // AARAV ADD
+            const { start, end } = dateRangeStrToDates(StrCast(doc.$task_dateRange));
+            const isCompleted = BoolCast(doc.$task_completed); // AARAV ADD
             return {
                 title: StrCast(doc.title),
                 start,
@@ -82,7 +83,7 @@ export class CalendarBox extends CollectionSubView() {
                 groupId: doc[Id],
                 startEditable: true,
                 endEditable: true,
-                allDay: BoolCast(doc.$allDay),
+                allDay: BoolCast(doc.$task_allDay),
                 classNames: ['mother', isCompleted ? 'completed-task' : ''], // will determine the style
                 editable: true, // subject to change in the future
                 backgroundColor: this.eventToColor(doc),
@@ -96,10 +97,10 @@ export class CalendarBox extends CollectionSubView() {
     }
 
     @computed get dateRangeStrDates() {
-        return dateRangeStrToDates(StrCast(this.Document.date_range));
+        return dateRangeStrToDates(StrCast(this.Document._calendar_dateRange));
     }
     get dateSelect() {
-        return dateRangeStrToDates(StrCast(this.Document.date));
+        return dateRangeStrToDates(StrCast(this.Document._calendar_date));
     }
 
     // Choose a calendar view based on the date range
@@ -124,7 +125,7 @@ export class CalendarBox extends CollectionSubView() {
         if (!super.onInternalDrop(e, de)) return false;
         de.complete.docDragData?.droppedDocuments.forEach(doc => {
             const today = new Date().toISOString();
-            if (!doc.date_range) doc.$date_range = `${today}|${today}`;
+            if (!doc.$task_dateRange) doc.$task_dateRange = `${today}|${today}`;
         });
         return true;
     };
@@ -136,7 +137,7 @@ export class CalendarBox extends CollectionSubView() {
 
     handleEventDrop = undoable((arg: EventDropArg | EventResizeDoneArg) => {
         const doc = DocServer.GetCachedRefField(arg.event._def.groupId ?? '');
-        // doc && arg.event.start && (doc.date_range = arg.event.start?.toString() + '|' + (arg.event.end ?? arg.event.start).toString());
+        // doc && arg.event.start && (doc.$task_dateRange = arg.event.start?.toString() + '|' + (arg.event.end ?? arg.event.start).toString());
         if (!doc || !arg.event.start) return;
 
         // get the new start and end dates
@@ -144,19 +145,19 @@ export class CalendarBox extends CollectionSubView() {
         const endDate = new Date(arg.event.end ?? arg.event.start);
 
         // update date range, time range, and all day status
-        doc.date_range = `${startDate.toISOString()}|${endDate.toISOString()}`;
+        doc.$task_dateRange = `${startDate.toISOString()}|${endDate.toISOString()}`;
 
         const allDayStatus = arg.event.allDay ?? false;
-        if (doc.$allDay !== allDayStatus) {
-            doc.$allDay = allDayStatus;
+        if (doc.$task_allDay !== allDayStatus) {
+            doc.$task_allDay = allDayStatus;
         }
 
-        if (doc.$allDay) {
-            delete doc.$startTime;
-            delete doc.$endTime;
+        if (doc.$task_allDay) {
+            delete doc.$task_startTime;
+            delete doc.$task_endTime;
         } else {
-            doc.$startTime = new DateField(startDate);
-            doc.$endTime = new DateField(endDate);
+            doc.$task_startTime = new DateField(startDate);
+            doc.task_endTime = new DateField(endDate);
         }
     }, 'change event date');
 
@@ -220,7 +221,7 @@ export class CalendarBox extends CollectionSubView() {
                 displayEventEnd={false}
                 plugins={[multiMonthPlugin, dayGridPlugin, timeGrid, interactionPlugin]}
                 aspectRatio={this._props.PanelWidth() / this._props.PanelHeight()}
-                weekends={false}
+                weekends={true}
                 events={this.calendarEvents}
                 eventClick={this.handleEventClick}
                 eventDrop={this.handleEventDrop}
@@ -229,7 +230,7 @@ export class CalendarBox extends CollectionSubView() {
                 select={(info: DateSelectArg) => {
                     const start = dateRangeStrToDates(info.startStr).start.toISOString();
                     const end = info.allDay ? start : dateRangeStrToDates(info.endStr).start.toISOString();
-                    this.dataDoc.date = start + '|' + end;
+                    this.Document._calendar_date = start + '|' + end;
                 }}
                 // eventContent={() => {
                 //     return null;
@@ -238,9 +239,9 @@ export class CalendarBox extends CollectionSubView() {
                     const doc = DocServer.GetCachedRefField(arg.event._def.groupId ?? '');
                     if (!doc) return;
 
-                    if (doc.type === 'task') {
+                    if (doc.type === DocumentType.TASK) {
                         const checkButton = document.createElement('button');
-                        checkButton.innerText = doc.$completed ? '✅' : '⬜';
+                        checkButton.innerText = doc.$task_completed ? '✅' : '⬜';
                         checkButton.style.position = 'absolute';
                         checkButton.style.right = '5px';
                         checkButton.style.top = '50%';
@@ -255,7 +256,7 @@ export class CalendarBox extends CollectionSubView() {
 
                         checkButton.onclick = ev => {
                             ev.stopPropagation();
-                            doc.$completed = !doc.$completed;
+                            doc.$task_completed = !doc.$task_completed;
                             this._calendar?.refetchEvents();
                         };
 
diff --git a/src/client/views/nodes/formattedText/DailyJournal.tsx b/src/client/views/nodes/formattedText/DailyJournal.tsx
index ae5582ef7..564609494 100644
--- a/src/client/views/nodes/formattedText/DailyJournal.tsx
+++ b/src/client/views/nodes/formattedText/DailyJournal.tsx
@@ -12,7 +12,6 @@ import { RTFCast } from '../../../../fields/Types';
 import { Mark } from 'prosemirror-model';
 import { observer } from 'mobx-react';
 
-
 export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @observable journalDate: string;
     @observable typingTimeout: NodeJS.Timeout | null = null; // track typing delay
@@ -22,8 +21,6 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
     @observable inlinePromptsEnabled = true;
     @observable askPromptsEnabled = true;
 
-
-
     _ref = React.createRef<FormattedTextBox>(); // reference to the formatted textbox
     predictiveTextRange: { from: number; to: number } | null = null; // where predictive text starts and ends
     private predictiveText: string | null = ' ... why?';
@@ -114,7 +111,7 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
     @action.bound toggleAskPrompts() {
         this.askPromptsEnabled = !this.askPromptsEnabled;
     }
-    
+
     /**
      * Method to handle click on document (to close prompt menu)
      * @param e - a click on the document
@@ -123,33 +120,27 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
     handleDocumentClick(e: MouseEvent) {
         const menu = document.getElementById('prompts-menu');
         const button = document.getElementById('prompts-button');
-        if (
-            this.showPromptMenu &&
-            menu &&
-            !menu.contains(e.target as Node) &&
-            button &&
-            !button.contains(e.target as Node)
-        ) {
+        if (this.showPromptMenu && menu && !menu.contains(e.target as Node) && button && !button.contains(e.target as Node)) {
             this.showPromptMenu = false;
         }
     }
 
-
     /**
      * Method to set initial date of document in the calendar view
      */
 
     @action setInitialDateRange() {
-        if (!this.dataDoc.date_range && this.journalDate) {
+        if (!this.dataDoc.$task_dateRange && this.journalDate) {
             const parsedDate = new Date(this.journalDate);
             if (!isNaN(parsedDate.getTime())) {
                 const localStart = new Date(parsedDate.getFullYear(), parsedDate.getMonth(), parsedDate.getDate());
                 const localEnd = new Date(localStart); // same day
 
-                this.dataDoc.date_range = `${localStart.toISOString()}|${localEnd.toISOString()}`;
-                this.dataDoc.allDay = true;
+                this.dataDoc.$task_dateRange = `${localStart.toISOString()}|${localEnd.toISOString()}`;
+                this.dataDoc.$task_allDay = true;
+                this.dataDoc.$task = ''; // needed only to make the keyvalue view look good.
 
-                // console.log('Set date_range and allDay on journal (from local date):', this.dataDoc.date_range);
+                // console.log('Set task_dateRange and task_allDay on journal (from local date):', this.dataDoc.$task_dateRange);
             } else {
                 // console.log('Could not parse journalDate:', this.journalDate);
             }
@@ -187,7 +178,6 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
             if (this.inlinePromptsEnabled) {
                 this.insertPredictiveQuestion();
             }
-
         }, 3500);
     };
 
@@ -196,7 +186,6 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
      */
 
     @action insertPredictiveQuestion = async () => {
-
         const editorView = this._ref.current?.EditorView;
         if (!editorView) return;
 
@@ -347,7 +336,7 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
      */
     @action handleGeneratePrompts = async () => {
         if (this.isLoadingPrompts) {
-            return
+            return;
         }
 
         this.isLoadingPrompts = true;
@@ -391,8 +380,6 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 // Insert formatted text
                 const transaction = state.tr.insert(state.selection.from, headerText).insert(state.selection.from + headerText.nodeSize, responseText);
                 dispatch(transaction);
-                (this._props as any)?.updateLayout?.();
-
             }
         } catch (err) {
             console.error('Error calling GPT:', err);
@@ -402,7 +389,7 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
     };
 
     /**
-     * Method to render the styled DailyJournal 
+     * Method to render the styled DailyJournal
      * @returns - the HTML component for the journal
      */
     render() {
@@ -438,8 +425,7 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
                         cursor: 'pointer',
                         zIndex: 10,
                     }}
-                    onClick={this.togglePromptMenu}
-                >
+                    onClick={this.togglePromptMenu}>
                     Prompts
                 </button>
                 {this.showPromptMenu && (
@@ -458,16 +444,14 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
                             minWidth: '170px',
                             maxWidth: 'fit-content',
                             overflow: 'auto',
-                        }}
-                    >
+                        }}>
                         <div
                             style={{
                                 display: 'flex',
                                 justifyContent: 'flex-end',
                                 alignItems: 'center',
                                 marginBottom: '10px',
-                            }}
-                        >
+                            }}>
                             <label
                                 style={{
                                     display: 'flex',
@@ -476,26 +460,19 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
                                     fontSize: '14px',
                                     justifyContent: 'flex-end',
                                     width: '100%',
-                                }}
-                            >
+                                }}>
                                 /ask
-                                <input
-                                    type="checkbox"
-                                    checked={this.askPromptsEnabled}
-                                    onChange={this.toggleAskPrompts}
-                                    style={{ margin: 0 }}
-                                />
+                                <input type="checkbox" checked={this.askPromptsEnabled} onChange={this.toggleAskPrompts} style={{ margin: 0 }} />
                             </label>
                         </div>
-                        
+
                         <div
                             style={{
                                 display: 'flex',
                                 justifyContent: 'flex-end',
                                 alignItems: 'center',
                                 marginBottom: '10px',
-                            }}
-                        >
+                            }}>
                             <label
                                 style={{
                                     display: 'flex',
@@ -504,15 +481,9 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
                                     fontSize: '14px',
                                     justifyContent: 'flex-end',
                                     width: '100%',
-                                }}
-                            >
+                                }}>
                                 Inline Prompting
-                                <input
-                                    type="checkbox"
-                                    checked={this.inlinePromptsEnabled}
-                                    onChange={this.toggleInlinePrompts}
-                                    style={{ margin: 0 }}
-                                />
+                                <input type="checkbox" checked={this.inlinePromptsEnabled} onChange={this.toggleInlinePrompts} style={{ margin: 0 }} />
                             </label>
                         </div>
 
@@ -531,15 +502,12 @@ export class DailyJournal extends ViewBoxAnnotatableComponent<FieldViewProps>()
                                 opacity: this.isLoadingPrompts ? 0.6 : 1,
                                 padding: '5px 10px',
                                 float: 'right',
-                            }}
-                        >
+                            }}>
                             Generate Prompts
                         </button>
                     </div>
                 )}
 
-
-
                 <FormattedTextBox ref={this._ref} {...this._props} fieldKey={'text'} Document={this.Document} TemplateDataDocument={undefined} />
             </div>
         );
-- 
cgit v1.2.3-70-g09d2