diff options
Diffstat (limited to 'src/client/util/CalendarManager.tsx')
| -rw-r--r-- | src/client/util/CalendarManager.tsx | 82 |
1 files changed, 62 insertions, 20 deletions
diff --git a/src/client/util/CalendarManager.tsx b/src/client/util/CalendarManager.tsx index 3872294db..6ef2d3429 100644 --- a/src/client/util/CalendarManager.tsx +++ b/src/client/util/CalendarManager.tsx @@ -10,16 +10,16 @@ import { MainViewModal } from '../views/MainViewModal'; import { TextField } from '@mui/material'; import Select from 'react-select'; import { SettingsManager } from './SettingsManager'; -import { DocCast, StrCast } from '../../fields/Types'; +import { DateCast, DocCast, StrCast } from '../../fields/Types'; import { SelectionManager } from './SelectionManager'; import { DocumentManager } from './DocumentManager'; import { DocData } from '../../fields/DocSymbols'; // import { DateRange, Range, RangeKeyDict } from 'react-date-range'; import { Button } from 'browndash-components'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Provider, useProvider, defaultTheme } from '@adobe/react-spectrum'; - -import { DateRangePicker } from '@adobe/react-spectrum'; +import { Provider, defaultTheme } from '@adobe/react-spectrum'; +import { DateValue } from '@internationalized/date'; +import { DateRangePicker, SpectrumDateRangePickerProps } from '@adobe/react-spectrum'; import { IconLookup, faPlus } from '@fortawesome/free-solid-svg-icons'; import { Docs } from '../documents/Documents'; import { ObservableReactComponent } from '../views/ObservableReactComponent'; @@ -33,7 +33,10 @@ interface CalendarSelectOptions { value: string; } -const formatDateToString = (date: Date) => { +const formatCalendarDateToString = (calendarDate: any) => { + console.log('Formatting the following date: ', calendarDate); + const date = new Date(calendarDate.year, calendarDate.month - 1, calendarDate.day); + console.log(typeof date); const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); @@ -115,25 +118,35 @@ export class CalendarManager extends ObservableReactComponent<{}> { @action handleSelectChange = (option: any) => { - let selectOpt = option as CalendarSelectOptions; - this.selectedExistingCalendarOption = selectOpt; - this.calendarName = selectOpt.value; // or label + if (option) { + let selectOpt = option as CalendarSelectOptions; + this.selectedExistingCalendarOption = selectOpt; + this.calendarName = selectOpt.value; // or label + } }; @action - handleTextFieldChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => { + handleCalendarTitleChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => { + console.log('Existing calendars: ', this.existingCalendars); this.calendarName = event.target.value; }; + @action + handleCalendarDescriptionChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => { + this.calendarDescription = event.target.value; + }; + // TODO: Make undoable private addToCalendar = () => { let docs = SelectionManager.Views.length < 2 ? [this.targetDoc] : SelectionManager.Views.map(docView => docView.Document); const targetDoc = this.layoutDocAcls ? docs[0] : docs[0]?.[DocData]; // doc to add to calendar + console.log(targetDoc); if (targetDoc) { let calendar: Doc; if (this.creationType === 'new-calendar') { if (!this.existingCalendars.find(doc => StrCast(doc.title) === this.calendarName)) { + console.log('creating...'); calendar = Docs.Create.CalendarDocument( { title: this.calendarName, @@ -141,6 +154,7 @@ export class CalendarManager extends ObservableReactComponent<{}> { }, [] ); + console.log('successful calendar creation'); } else { this.errorMessage = 'Calendar with this name already exists'; return; @@ -155,15 +169,20 @@ export class CalendarManager extends ObservableReactComponent<{}> { } } // Get start and end date strings - const startDateStr = formatDateToString(this.selectedDateRange.start); - const endDateStr = formatDateToString(this.selectedDateRange.end); + const startDateStr = formatCalendarDateToString(this.selectedDateRange.start); + const endDateStr = formatCalendarDateToString(this.selectedDateRange.end); + + console.log('start date: ', startDateStr); + console.log('end date: ', endDateStr); 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.date_range = `${startDateStr}|${endDateStr}`; // set subDoc date range Doc.AddDocToList(calendar, 'data', subDocEmbedding); // add embedded subDoc to calendar + console.log('my calendars: ', Doc.MyCalendars); if (this.creationType === 'new-calendar') { Doc.AddDocToList(Doc.MyCalendars, 'data', calendar); // add to new calendar to dashboard calendars } @@ -211,6 +230,7 @@ export class CalendarManager extends ObservableReactComponent<{}> { @action setSelectedDateRange = (range: any) => { + console.log('Range: ', range); this.selectedDateRange = range; }; @@ -220,9 +240,12 @@ export class CalendarManager extends ObservableReactComponent<{}> { let startDate: Date | undefined; let endDate: Date | undefined; try { - startDate = this.selectedDateRange[0].startDate; - endDate = this.selectedDateRange[0].endDate; + startDate = this.selectedDateRange.start; + endDate = this.selectedDateRange.end; + console.log(startDate); + console.log(endDate); } catch (e: any) { + console.log(e); return false; // disabled } if (!startDate || !endDate) return false; // disabled if any is undefined @@ -258,8 +281,9 @@ export class CalendarManager extends ObservableReactComponent<{}> { {this.creationType === 'new-calendar' ? ( <TextField fullWidth - onChange={this.handleTextFieldChange} - placeholder="Enter calendar name..." + onChange={this.handleCalendarTitleChange} + label="Calendar name" + placeholder="Enter a name..." variant="filled" style={{ backgroundColor: 'white', @@ -298,14 +322,32 @@ export class CalendarManager extends ObservableReactComponent<{}> { }}></Select> )} </div> + <div className="description-container"> + <TextField + fullWidth + multiline + label="Calendar description" + placeholder="Enter a description (optional)..." + onChange={this.handleCalendarDescriptionChange} + variant="filled" + style={{ + backgroundColor: 'white', + color: 'black', + borderRadius: '5px', + }} + /> + </div> <div className="date-range-picker-container"> + <div>Select a date range: </div> <Provider theme={defaultTheme}> - <DateRangePicker value={this.selectedDateRange} onChange={v => this.setSelectedDateRange(v)} label="Date range" /> + <DateRangePicker aria-label="Select a date range" value={this.selectedDateRange} onChange={v => this.setSelectedDateRange(v)} /> </Provider> </div> - <div className="create-button-container"> - <Button active={this.createButtonActive} onClick={() => {}} text="Add to Calendar" iconPlacement="right" icon={<FontAwesomeIcon icon={faPlus as IconLookup} />} /> - </div> + {this.createButtonActive && ( + <div className="create-button-container"> + <Button onClick={() => this.addToCalendar()} text="Add to Calendar" iconPlacement="right" icon={<FontAwesomeIcon icon={faPlus as IconLookup} />} /> + </div> + )} </div> ); } |