From 63c5625b34d42f33270067c27047d597fd9b46ce Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 17 Dec 2023 21:47:22 -0500 Subject: tweaked some things with CalendarView --- src/client/util/CalendarManager.tsx | 63 ++++++------- .../views/collections/CollectionCalendarView.tsx | 101 +++++++++------------ src/client/views/collections/CollectionSubView.tsx | 2 +- 3 files changed, 73 insertions(+), 93 deletions(-) (limited to 'src') 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) => { - console.log("Existing calendars: ", this.existingCalendars); + console.log('Existing calendars: ', this.existingCalendars); this.calendarName = event.target.value; }; @action handleCalendarDescriptionChange = (event: React.ChangeEvent) => { 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<{}> { { }}> )} -
+
{
Select a date range:
- this.setSelectedDateRange(v)}/> + this.setSelectedDateRange(v)} />
- {this.createButtonActive && -
-
- - } - + )}
); } @@ -362,4 +355,4 @@ export class CalendarManager extends ObservableReactComponent<{}> { render() { return ; } -} \ 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(); 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 (
- +
- - ) + ); } -} \ 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(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; -- cgit v1.2.3-70-g09d2