diff options
Diffstat (limited to 'src/client/views/nodes/TaskBox.tsx')
| -rw-r--r-- | src/client/views/nodes/TaskBox.tsx | 197 |
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, }, }); |