diff options
| -rw-r--r-- | src/client/util/CalendarManager.tsx | 63 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionCalendarView.tsx | 101 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSubView.tsx | 2 |
3 files changed, 73 insertions, 93 deletions
diff --git a/src/client/util/CalendarManager.tsx b/src/client/util/CalendarManager.tsx index c3e54ebd3..6ef2d3429 100644 --- a/src/client/util/CalendarManager.tsx +++ b/src/client/util/CalendarManager.tsx @@ -34,8 +34,8 @@ interface CalendarSelectOptions { } const formatCalendarDateToString = (calendarDate: any) => { - console.log("Formatting the following date: ", calendarDate); - const date = new Date(calendarDate.year, calendarDate.month-1, calendarDate.day) + 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'); @@ -118,21 +118,23 @@ 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 handleCalendarTitleChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => { - console.log("Existing calendars: ", this.existingCalendars); + 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 = () => { @@ -144,7 +146,7 @@ export class CalendarManager extends ObservableReactComponent<{}> { let calendar: Doc; if (this.creationType === 'new-calendar') { if (!this.existingCalendars.find(doc => StrCast(doc.title) === this.calendarName)) { - console.log('creating...') + console.log('creating...'); calendar = Docs.Create.CalendarDocument( { title: this.calendarName, @@ -152,7 +154,7 @@ export class CalendarManager extends ObservableReactComponent<{}> { }, [] ); - console.log('successful calendar creation') + console.log('successful calendar creation'); } else { this.errorMessage = 'Calendar with this name already exists'; return; @@ -170,17 +172,17 @@ export class CalendarManager extends ObservableReactComponent<{}> { const startDateStr = formatCalendarDateToString(this.selectedDateRange.start); const endDateStr = formatCalendarDateToString(this.selectedDateRange.end); - console.log("start date: ", startDateStr); - console.log("end date: ", endDateStr) + console.log('start date: ', startDateStr); + console.log('end date: ', endDateStr); const subDocEmbedding = Doc.MakeEmbedding(targetDoc); // embedding - console.log("subdoc embedding", subDocEmbedding); + console.log('subdoc embedding', subDocEmbedding); 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 - console.log("my calendars: ", Doc.MyCalendars); + console.log('my calendars: ', Doc.MyCalendars); if (this.creationType === 'new-calendar') { Doc.AddDocToList(Doc.MyCalendars, 'data', calendar); // add to new calendar to dashboard calendars } @@ -228,7 +230,7 @@ export class CalendarManager extends ObservableReactComponent<{}> { @action setSelectedDateRange = (range: any) => { - console.log("Range: ", range); + console.log('Range: ', range); this.selectedDateRange = range; }; @@ -241,7 +243,7 @@ export class CalendarManager extends ObservableReactComponent<{}> { startDate = this.selectedDateRange.start; endDate = this.selectedDateRange.end; console.log(startDate); - console.log(endDate) + console.log(endDate); } catch (e: any) { console.log(e); return false; // disabled @@ -280,8 +282,8 @@ export class CalendarManager extends ObservableReactComponent<{}> { <TextField fullWidth onChange={this.handleCalendarTitleChange} - label='Calendar name' - placeholder='Enter a name...' + label="Calendar name" + placeholder="Enter a name..." variant="filled" style={{ backgroundColor: 'white', @@ -320,12 +322,12 @@ export class CalendarManager extends ObservableReactComponent<{}> { }}></Select> )} </div> - <div className='description-container'> + <div className="description-container"> <TextField fullWidth multiline - label='Calendar description' - placeholder='Enter a description (optional)...' + label="Calendar description" + placeholder="Enter a description (optional)..." onChange={this.handleCalendarDescriptionChange} variant="filled" style={{ @@ -338,23 +340,14 @@ export class CalendarManager extends ObservableReactComponent<{}> { <div className="date-range-picker-container"> <div>Select a date range: </div> <Provider theme={defaultTheme}> - <DateRangePicker - aria-label='Select a date range' - value={this.selectedDateRange} - onChange={v => this.setSelectedDateRange(v)}/> + <DateRangePicker aria-label="Select a date range" value={this.selectedDateRange} onChange={v => this.setSelectedDateRange(v)} /> </Provider> </div> - {this.createButtonActive && - <div className='create-button-container'> - <Button - onClick={() => this.addToCalendar()} - text="Add to Calendar" - iconPlacement="right" - icon={<FontAwesomeIcon icon={faPlus as IconLookup} />} /> + {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> ); } @@ -362,4 +355,4 @@ export class CalendarManager extends ObservableReactComponent<{}> { render() { 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 +} diff --git a/src/client/views/collections/CollectionCalendarView.tsx b/src/client/views/collections/CollectionCalendarView.tsx index f28154486..ad880b815 100644 --- a/src/client/views/collections/CollectionCalendarView.tsx +++ b/src/client/views/collections/CollectionCalendarView.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { CollectionSubView } from "./CollectionSubView"; +import { CollectionSubView } from './CollectionSubView'; import { observer } from 'mobx-react'; import { computed, makeObservable, observable } from 'mobx'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; @@ -15,43 +15,36 @@ import { StyleProp } from '../StyleProvider'; import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocumentView'; @observer -export class CollectionCalendarView extends CollectionSubView(){ - - constructor(props: any){ +export class CollectionCalendarView extends CollectionSubView() { + constructor(props: any) { super(props); makeObservable(this); } - componentDidMount(): void { - - } + componentDidMount(): void {} - componentWillUnmount(): void { - - } + componentWillUnmount(): void {} - @computed get allCalendars(){ + @computed get allCalendars() { return this.childDocs; // returns a list of docs (i.e. calendars) } - removeCalendar = () => { - - } + removeCalendar = () => {}; addCalendar = (doc: Doc | Doc[], annotationKey?: string | undefined): boolean => { - // bring up calendar modal with option to create a calendar + // bring up calendar modal with option to create a calendar return true; - } + }; _stackRef = React.createRef<CollectionStackingView>(); panelHeight = () => { return 0; // TODO: change - } + }; panelWidth = () => { return 0; // TODO: change - } + }; // most recent calendar should come first sortByMostRecentDate = (calendarA: Doc, calendarB: Doc) => { @@ -60,12 +53,13 @@ export class CollectionCalendarView extends CollectionSubView(){ const [aFromDate, aToDate] = dateRangeStrToDates(aDateRangeStr); const [bFromDate, bToDate] = dateRangeStrToDates(bDateRangeStr); - - if (aFromDate > bFromDate) { + + if (aFromDate > bFromDate) { return -1; // a comes first } else if (aFromDate < bFromDate) { return 1; // b comes first - } else { // start dates are the same + } else { + // start dates are the same if (aToDate > bToDate) { return -1; // a comes first } else if (aToDate < bToDate) { @@ -74,11 +68,7 @@ export class CollectionCalendarView extends CollectionSubView(){ return 0; // same start and end dates } } - - - } - - + }; screenToLocalTransform = () => this._props @@ -90,38 +80,35 @@ export class CollectionCalendarView extends CollectionSubView(){ return this._props.fieldKey + '_calendars'; } - render(){ + render() { return ( <div> - <CollectionStackingView - {...this._props} - setContentView={emptyFunction} - NativeWidth={} - NativeHeight={} - ref={this._stackRef} - PanelHeight={this.panelHeight} - PanelWidth={this.panelWidth} - // childFilters={this.childFilters} DO I NEED THIS? - sortFunc={this.sortByMostRecentDate} - setHeight={this.setHeightCallback} - isAnnotationOverlay={false} - // select={emptyFunction} What does this mean? - NativeDimScaling={returnOne} - isAnyChildContentActive={returnTrue} // ?? - // childDocumentsActive={} - // whenChildContentsActiveChanged={} - childHideDecorationTitle={false} - removeDocument={this.removeDocument} // will calendar automatically be removed from myCalendars - moveDocument={this.moveDocument} - addDocument={this.addCalendar} - ScreenToLocalTransform={this.screenToLocalTransform} - renderDepth={this._props.renderDepth + 1} - type_collection={CollectionViewType.Stacking} - fieldKey={this.calendarsKey} - pointerEvents={returnAll} - /> + <CollectionStackingView + {...this._props} + setContentView={emptyFunction} + ref={this._stackRef} + PanelHeight={this.panelHeight} + PanelWidth={this.panelWidth} + // childFilters={this.childFilters} DO I NEED THIS? + sortFunc={this.sortByMostRecentDate} + setHeight={undefined} + isAnnotationOverlay={false} + // select={emptyFunction} What does this mean? + NativeDimScaling={returnOne} + isAnyChildContentActive={returnTrue} // ?? + // childDocumentsActive={} + // whenChildContentsActiveChanged={} + childHideDecorationTitle={false} + removeDocument={this.removeDocument} // will calendar automatically be removed from myCalendars + moveDocument={this.moveDocument} + addDocument={this.addCalendar} + ScreenToLocalTransform={this.screenToLocalTransform} + renderDepth={this._props.renderDepth + 1} + type_collection={CollectionViewType.Stacking} + fieldKey={this.calendarsKey} + pointerEvents={returnAll} + /> </div> - - ) + ); } -}
\ No newline at end of file +} diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 0131af6f2..b56973dc6 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -212,7 +212,7 @@ export function CollectionSubView<X>(moreProps?: X) { addDocument = (doc: Doc | Doc[], annotationKey?: string) => this._props.addDocument?.(doc, annotationKey) || false; removeDocument = (doc: Doc | Doc[], annotationKey?: string) => this._props.removeDocument?.(doc, annotationKey) || false; - moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[], annotationKey?: string) => boolean, annotationKey?: string) => this._props.moveDocument?.(doc, targetCollection, addDocument); + moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[], annotationKey?: string) => boolean, annotationKey?: string) => this._props.moveDocument?.(doc, targetCollection, addDocument) || false; protected onInternalDrop(e: Event, de: DragManager.DropEvent): boolean { const docDragData = de.complete.docDragData; |