diff options
Diffstat (limited to 'src/client/util/CalendarManager.tsx')
| -rw-r--r-- | src/client/util/CalendarManager.tsx | 195 |
1 files changed, 84 insertions, 111 deletions
diff --git a/src/client/util/CalendarManager.tsx b/src/client/util/CalendarManager.tsx index 15c811e91..50a5437a0 100644 --- a/src/client/util/CalendarManager.tsx +++ b/src/client/util/CalendarManager.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; import './CalendarManager.scss'; -import { observer } from "mobx-react"; -import { action, computed, observable, runInAction } from 'mobx'; +import { observer } from 'mobx-react'; +import { action, computed, observable, runInAction, makeObservable } from 'mobx'; import { Doc, DocListCast } from '../../fields/Doc'; import { DocumentView } from '../views/nodes/DocumentView'; import { DictationOverlay } from '../views/DictationOverlay'; import { TaskCompletionBox } from '../views/nodes/TaskCompletedBox'; import { MainViewModal } from '../views/MainViewModal'; -import { TextField } from '@material-ui/core'; +import { TextField } from '@mui/material'; import Select from 'react-select'; import { SettingsManager } from './SettingsManager'; import { DocCast, StrCast } from '../../fields/Types'; @@ -17,78 +17,77 @@ 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 {DateRangePicker} from '@adobe/react-spectrum'; +import { DateRangePicker } from '@adobe/react-spectrum'; import { IconLookup, faPlus } from '@fortawesome/free-solid-svg-icons'; import { Docs } from '../documents/Documents'; +import { ObservableReactComponent } from '../views/ObservableReactComponent'; // import 'react-date-range/dist/styles.css'; // import 'react-date-range/dist/theme/default.css'; type CreationType = 'new-calendar' | 'existing-calendar' | 'manage-calendars'; interface CalendarSelectOptions { - label: string, - value: string + label: string; + value: string; } const formatDateToString = (date: Date) => { const year = date.getFullYear(); - const month = String(date.getMonth() + 1).padStart(2, '0'); + const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); return `${year}-${month}-${day}`; -} +}; // TODO: If doc is already part of a calendar, display that // TODO: For a doc already in a calendar: give option to edit date range, delete from calendar - @observer -export class CalendarManager extends React.Component<{}> { +export class CalendarManager extends ObservableReactComponent<{}> { public static Instance: CalendarManager; - @observable private isOpen = false; + @observable private isOpen = false; @observable private targetDoc: Doc | undefined; // the target document @observable private targetDocView: DocumentView | undefined; // the DocumentView of the target doc @observable private dialogueBoxOpacity = 1; // for the modal @observable private overlayOpacity = 0.4; // for the modal - + @observable private layoutDocAcls: boolean = false; // whether the layout doc or data doc's acls are to be used @observable private creationType: CreationType = 'new-calendar'; - @observable private existingCalendars: Doc[] = DocListCast(Doc.MyCalendars.data); + @observable private existingCalendars: Doc[] = DocListCast(Doc.MyCalendars?.data); @computed get selectOptions() { return this.existingCalendars.map(calendar => ({ label: StrCast(calendar.title), value: StrCast(calendar.title) })); } - @observable + @observable selectedExistingCalendarOption: CalendarSelectOptions | null = null; - @observable - calendarName: string = ""; + @observable + calendarName: string = ''; - @observable - calendarDescription: string = ""; + @observable + calendarDescription: string = ''; @observable - errorMessage: string = ""; + errorMessage: string = ''; @action setInterationType = (type: CreationType) => { - this.errorMessage = ""; - this.calendarName = ""; + this.errorMessage = ''; + this.calendarName = ''; this.creationType = type; - } - + }; public open = (target?: DocumentView, target_doc?: Doc) => { console.log('hi'); runInAction(() => { - this.targetDoc = target_doc || target?.props.Document; + this.targetDoc = target_doc || target?.Document; this.targetDocView = target; DictationOverlay.Instance.hasActiveModal = true; this.isOpen = this.targetDoc !== undefined; - }) + }); }; public close = action(() => { @@ -98,7 +97,8 @@ export class CalendarManager extends React.Component<{}> { action(() => { DictationOverlay.Instance.hasActiveModal = false; this.targetDoc = undefined; - }), 500 + }), + 500 ); this.layoutDocAcls = false; }); @@ -106,39 +106,41 @@ export class CalendarManager extends React.Component<{}> { constructor(props: {}) { super(props); CalendarManager.Instance = this; + makeObservable(this); } - componentDidMount(): void { - - } + componentDidMount(): void {} @action handleSelectChange = (option: any) => { let selectOpt = option as CalendarSelectOptions; this.selectedExistingCalendarOption = selectOpt; this.calendarName = selectOpt.value; // or label - } + }; @action handleTextFieldChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => { this.calendarName = event.target.value; - } + }; // TODO: Make undoable private addToCalendar = () => { - let docs = SelectionManager.Views().length < 2 ? [this.targetDoc] : SelectionManager.Views().map(docView => docView.rootDoc); + 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 if (targetDoc) { let calendar: Doc; - if (this.creationType === 'new-calendar'){ - if (!this.existingCalendars.find(doc => StrCast(doc.title) === this.calendarName)){ - calendar = Docs.Create.CalendarDocument({ - title: this.calendarName, - description: this.calendarDescription - }, []); + if (this.creationType === 'new-calendar') { + if (!this.existingCalendars.find(doc => StrCast(doc.title) === this.calendarName)) { + calendar = Docs.Create.CalendarDocument( + { + title: this.calendarName, + description: this.calendarDescription, + }, + [] + ); } else { - this.errorMessage = "Calendar with this name already exists" + this.errorMessage = 'Calendar with this name already exists'; return; } } else { @@ -146,7 +148,7 @@ export class CalendarManager extends React.Component<{}> { const existingCalendar = this.existingCalendars.find(calendar => StrCast(calendar.title) === this.calendarName); if (existingCalendar) calendar = existingCalendar; else { - this.errorMessage = "Must select an existing calendar"; + this.errorMessage = 'Must select an existing calendar'; return; } } @@ -154,24 +156,21 @@ export class CalendarManager extends React.Component<{}> { const startDateStr = formatDateToString(this.selectedDateRange.start); const endDateStr = formatDateToString(this.selectedDateRange.end); - const subDocEmbedding = Doc.MakeEmbedding(targetDoc); // embedding + const subDocEmbedding = Doc.MakeEmbedding(targetDoc); // embedding subDocEmbedding.embedContainer = calendar; // set embed container subDocEmbedding.date_range = `${startDateStr}-${endDateStr}`; // set subDoc date range Doc.AddDocToList(calendar, 'data', subDocEmbedding); // add embedded subDoc to calendar - - if (this.creationType === 'new-calendar'){ + + if (this.creationType === 'new-calendar') { Doc.AddDocToList(Doc.MyCalendars, 'data', calendar); // add to new calendar to dashboard calendars } - - } - - } + }; private focusOn = (contents: string) => { const title = this.targetDoc ? StrCast(this.targetDoc.title) : ''; - const docs = SelectionManager.Views().length > 1 ? SelectionManager.Views().map(docView => docView.props.Document) : [this.targetDoc]; + const docs = SelectionManager.Views.length > 1 ? SelectionManager.Views.map(docView => docView.Document) : [this.targetDoc]; return ( <span className="focus-span" @@ -201,81 +200,75 @@ export class CalendarManager extends React.Component<{}> { }; @observable - selectedDateRange: any = [{ - start: new Date(), - end: new Date(), - }] + selectedDateRange: any = [ + { + start: new Date(), + end: new Date(), + }, + ]; @action setSelectedDateRange = (range: any) => { this.selectedDateRange = range; - } + }; @computed get createButtonActive() { - if (this.calendarName.length === 0 || this.errorMessage.length > 0) return false // disabled if no calendar name + if (this.calendarName.length === 0 || this.errorMessage.length > 0) return false; // disabled if no calendar name let startDate: Date | undefined; let endDate: Date | undefined; try { startDate = this.selectedDateRange[0].startDate; endDate = this.selectedDateRange[0].endDate; - } catch (e: any){ - return false; // disabled + } catch (e: any) { + return false; // disabled } if (!startDate || !endDate) return false; // disabled if any is undefined return true; } @computed - get calendarInterface(){ - let docs = SelectionManager.Views().length < 2 ? [this.targetDoc] : SelectionManager.Views().map(docView => docView.rootDoc); + get calendarInterface() { + let docs = SelectionManager.Views.length < 2 ? [this.targetDoc] : SelectionManager.Views.map(docView => docView.Document); const targetDoc = this.layoutDocAcls ? docs[0] : docs[0]?.[DocData]; const currentDate = new Date(); return ( - <div - className='calendar-interface' - style= {{ + <div + className="calendar-interface" + style={{ background: SettingsManager.userBackgroundColor, - color: StrCast(Doc.UserDoc().userColor) - }} - > + color: StrCast(Doc.UserDoc().userColor), + }}> <p className="selected-doc-title" style={{ color: SettingsManager.userColor }}> <b>{this.focusOn(docs.length < 2 ? StrCast(targetDoc?.title, 'this document') : '-multiple-')}</b> </p> - <div className='creation-type-container'> - <div - className={`calendar-creation ${this.creationType === 'new-calendar' ? 'calendar-creation-selected' : ''}`} - onClick={(e) => this.setInterationType('new-calendar')} - > + <div className="creation-type-container"> + <div className={`calendar-creation ${this.creationType === 'new-calendar' ? 'calendar-creation-selected' : ''}`} onClick={e => this.setInterationType('new-calendar')}> Add to New Calendar </div> - <div - className={`calendar-creation ${this.creationType === 'existing-calendar' ? 'calendar-creation-selected' : ''}`} - onClick={(e) => this.setInterationType('existing-calendar')} - > + <div className={`calendar-creation ${this.creationType === 'existing-calendar' ? 'calendar-creation-selected' : ''}`} onClick={e => this.setInterationType('existing-calendar')}> Add to Existing calendar </div> </div> - <div className='choose-calendar-container'> - {this.creationType === 'new-calendar' ? + <div className="choose-calendar-container"> + {this.creationType === 'new-calendar' ? ( <TextField fullWidth onChange={this.handleTextFieldChange} - placeholder='Enter calendar name...' - variant='filled' + placeholder="Enter calendar name..." + variant="filled" style={{ backgroundColor: 'white', color: 'black', - borderRadius: '5px' - + borderRadius: '5px', }} /> - : + ) : ( <Select - className='existing-calendar-search' - placeholder='Search for existing calendar...' + className="existing-calendar-search" + placeholder="Search for existing calendar..." isClearable isSearchable options={this.selectOptions} @@ -300,40 +293,20 @@ export class CalendarManager extends React.Component<{}> { color: StrCast(Doc.UserDoc().userColor), width: '100%', }), - }} - > - </Select> - } + }}></Select> + )} </div> - <div className='date-range-picker-container'> - <DateRangePicker - value={this.selectedDateRange} - onChange={(v => this.setSelectedDateRange(v))} - label="Date range" /> + <div className="date-range-picker-container"> + <DateRangePicker value={this.selectedDateRange} onChange={v => this.setSelectedDateRange(v)} label="Date range" /> </div> - <div className='create-button-container'> - <Button - active={this.createButtonActive} - onClick={() => {}} - text="Add to Calendar" - iconPlacement='right' - icon={<FontAwesomeIcon icon={faPlus as IconLookup}/>} - /> + <div className="create-button-container"> + <Button active={this.createButtonActive} onClick={() => {}} text="Add to Calendar" iconPlacement="right" icon={<FontAwesomeIcon icon={faPlus as IconLookup} />} /> </div> </div> - ) + ); } render() { - return ( - <MainViewModal - contents={this.calendarInterface} - isDisplayed={this.isOpen} - interactive={true} - dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} - overlayDisplayedOpacity={this.overlayOpacity} - closeOnExternalClick={this.close} - /> - ) + return <MainViewModal contents={this.calendarInterface} isDisplayed={this.isOpen} interactive={true} dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} overlayDisplayedOpacity={this.overlayOpacity} closeOnExternalClick={this.close} />; } -}
\ No newline at end of file +} |