From e39665be22ecee11b093db07ebe72896a6d43a8c Mon Sep 17 00:00:00 2001 From: zaultavangar Date: Sun, 17 Dec 2023 15:59:39 -0500 Subject: starting calendar collection view --- .../views/collections/CollectionCalendarView.tsx | 32 ++++++++++++++++++++++ src/client/views/collections/CollectionView.tsx | 3 ++ 2 files changed, 35 insertions(+) create mode 100644 src/client/views/collections/CollectionCalendarView.tsx (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionCalendarView.tsx b/src/client/views/collections/CollectionCalendarView.tsx new file mode 100644 index 000000000..99dc09732 --- /dev/null +++ b/src/client/views/collections/CollectionCalendarView.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import { CollectionSubView } from "./CollectionSubView"; +import { observer } from 'mobx-react'; +import { makeObservable, observable } from 'mobx'; +import { Doc, DocListCast } from '../../../fields/Doc'; + +@observer +export class CollectionCalendarView extends CollectionSubView(){ + + constructor(props: any){ + super(props); + makeObservable(this); + } + + componentDidMount(): void { + + } + + componentWillUnmount(): void { + + } + + @observable private existingCalendars: Doc[] = DocListCast(Doc.MyCalendars?.data); + + render(){ + return ( +
+ Hello +
+ ) + } +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 0673b264b..0237ec95e 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -28,6 +28,7 @@ import { CollectionTreeView } from './CollectionTreeView'; import './CollectionView.scss'; import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; import { CollectionGridView } from './collectionGrid/CollectionGridView'; +import { CollectionCalendarView} from './CollectionCalendarView'; import { CollectionLinearView } from './collectionLinear'; import { CollectionMulticolumnView } from './collectionMulticolumn/CollectionMulticolumnView'; import { CollectionMultirowView } from './collectionMulticolumn/CollectionMultirowView'; @@ -122,6 +123,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent; case CollectionViewType.Schema: return ; + case CollectionViewType.Calendar: return ; case CollectionViewType.Docking: return ; case CollectionViewType.Tree: return ; case CollectionViewType.Multicolumn: return ; @@ -146,6 +148,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent func(CollectionViewType.Schema), icon: 'th-list' }, { description: 'Tree', event: () => func(CollectionViewType.Tree), icon: 'tree' }, { description: 'Stacking', event: () => (func(CollectionViewType.Stacking)._layout_autoHeight = true), icon: 'ellipsis-v' }, + { description: 'Calendar', event: () => func(CollectionViewType.Calendar), icon: 'columns'}, { description: 'Notetaking', event: () => (func(CollectionViewType.NoteTaking)._layout_autoHeight = true), icon: 'ellipsis-v' }, { description: 'Multicolumn', event: () => func(CollectionViewType.Multicolumn), icon: 'columns' }, { description: 'Multirow', event: () => func(CollectionViewType.Multirow), icon: 'columns' }, -- cgit v1.2.3-70-g09d2 From 6e78d5d0bf88d25db48a82e498fe0193dc9baedf Mon Sep 17 00:00:00 2001 From: zaultavangar Date: Sun, 17 Dec 2023 20:13:21 -0500 Subject: developing CalendarBox and CollectionCalendarView --- package-lock.json | 39 ++++++++ package.json | 3 + src/Utils.ts | 21 ++++ src/client/util/CalendarManager.tsx | 3 +- .../views/collections/CollectionCalendarView.tsx | 103 ++++++++++++++++++- src/client/views/nodes/calendarBox/CalendarBox.tsx | 110 ++++++++++++++++++++- 6 files changed, 273 insertions(+), 6 deletions(-) (limited to 'src/client/views/collections') diff --git a/package-lock.json b/package-lock.json index 2d2740381..ed66d83a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,9 @@ "@fortawesome/free-regular-svg-icons": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", + "@fullcalendar/core": "^6.1.10", + "@fullcalendar/daygrid": "^6.1.10", + "@fullcalendar/multimonth": "^6.1.10", "@internationalized/date": "^3.5.0", "@mapbox/mapbox-gl-geocoder": "^5.0.2", "@mui/icons-material": "^5.14.19", @@ -2653,6 +2656,33 @@ "react": ">=16.3" } }, + "node_modules/@fullcalendar/core": { + "version": "6.1.10", + "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.10.tgz", + "integrity": "sha512-oTXGJSAGpCf1oY+CKp5qYjMHkJCPBkJ3SHitl63n8Q6xKeiwQ4EF6Au451euUovREwJpLmD1AyZrCnWmtB9AVg==", + "dependencies": { + "preact": "~10.12.1" + } + }, + "node_modules/@fullcalendar/daygrid": { + "version": "6.1.10", + "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.10.tgz", + "integrity": "sha512-Z4GRm1IyHKgxXFTWGcEI0nTsvYOIkpE0aMt3/o3ER2SZkF+hfwcDFhtj0c9+WhMjXFIWYeoTnA9rUOY7Zl/nxA==", + "peerDependencies": { + "@fullcalendar/core": "~6.1.10" + } + }, + "node_modules/@fullcalendar/multimonth": { + "version": "6.1.10", + "resolved": "https://registry.npmjs.org/@fullcalendar/multimonth/-/multimonth-6.1.10.tgz", + "integrity": "sha512-mLGEgD+sv8rNfKphyOCWRQapX7/nAvHgQmDTjuy4STlhHsddCYVmFlsSgF373ph1tXh41wAJUVdNO/pDmCvUfA==", + "dependencies": { + "@fullcalendar/daygrid": "~6.1.10" + }, + "peerDependencies": { + "@fullcalendar/core": "~6.1.10" + } + }, "node_modules/@googlemaps/js-api-loader": { "version": "1.16.2", "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.2.tgz", @@ -29048,6 +29078,15 @@ "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz", "integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw==" }, + "node_modules/preact": { + "version": "10.12.1", + "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz", + "integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", diff --git a/package.json b/package.json index 098e30ffb..6f0911a2d 100644 --- a/package.json +++ b/package.json @@ -106,6 +106,9 @@ "@fortawesome/free-regular-svg-icons": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", + "@fullcalendar/core": "^6.1.10", + "@fullcalendar/daygrid": "^6.1.10", + "@fullcalendar/multimonth": "^6.1.10", "@internationalized/date": "^3.5.0", "@mapbox/mapbox-gl-geocoder": "^5.0.2", "@mui/icons-material": "^5.14.19", diff --git a/src/Utils.ts b/src/Utils.ts index 5f9475f23..a060e4a2c 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -895,3 +895,24 @@ export function setupMoveUpEvents( document.addEventListener('pointerup', _upEvent, true); document.addEventListener('click', _clickEvent, true); } + +export function dateRangeStrToDates (dateStr: string) { + // dateStr in yyyy-mm-dd format + const dateRangeParts = dateStr.split("|"); // splits into from and to date + const fromParts = dateRangeParts[0].split("-"); + const toParts = dateRangeParts[1].split("-"); + + const fromYear = parseInt(fromParts[0]); + const fromMonth = parseInt(fromParts[1])-1; + const fromDay = parseInt(fromParts[2]); + + const toYear = parseInt(toParts[0]); + const toMonth = parseInt(toParts[1])-1; + const toDay = parseInt(toParts[2]); + + + return [ + new Date(fromYear, fromMonth, fromDay), + new Date(toYear, toMonth, toDay) + ]; +} \ No newline at end of file diff --git a/src/client/util/CalendarManager.tsx b/src/client/util/CalendarManager.tsx index d5d4203b1..c3e54ebd3 100644 --- a/src/client/util/CalendarManager.tsx +++ b/src/client/util/CalendarManager.tsx @@ -125,6 +125,7 @@ export class CalendarManager extends ObservableReactComponent<{}> { @action handleCalendarTitleChange = (event: React.ChangeEvent) => { + console.log("Existing calendars: ", this.existingCalendars); this.calendarName = event.target.value; }; @@ -175,7 +176,7 @@ export class CalendarManager extends ObservableReactComponent<{}> { 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 diff --git a/src/client/views/collections/CollectionCalendarView.tsx b/src/client/views/collections/CollectionCalendarView.tsx index 99dc09732..f94d05c61 100644 --- a/src/client/views/collections/CollectionCalendarView.tsx +++ b/src/client/views/collections/CollectionCalendarView.tsx @@ -1,8 +1,18 @@ import * as React from 'react'; import { CollectionSubView } from "./CollectionSubView"; import { observer } from 'mobx-react'; -import { makeObservable, observable } from 'mobx'; -import { Doc, DocListCast } from '../../../fields/Doc'; +import { computed, makeObservable, observable } from 'mobx'; +import { Doc, DocListCast, Opt } from '../../../fields/Doc'; +import { CollectionStackingView } from './CollectionStackingView'; +import { CollectionViewType } from '../../documents/DocumentTypes'; +import { dateRangeStrToDates, emptyFunction, returnAll, returnEmptyDoclist, returnNone, returnOne, returnTrue } from '../../../Utils'; +import { DocumentView, DocumentViewProps } from '../nodes/DocumentView'; +import { TbRuler } from 'react-icons/tb'; +import { Transform } from '../../util/Transform'; +import { DocData } from '../../../fields/DocSymbols'; +import { Cast, NumCast, StrCast } from '../../../fields/Types'; +import { StyleProp } from '../StyleProvider'; +import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocumentView'; @observer export class CollectionCalendarView extends CollectionSubView(){ @@ -20,13 +30,98 @@ export class CollectionCalendarView extends CollectionSubView(){ } - @observable private existingCalendars: Doc[] = DocListCast(Doc.MyCalendars?.data); + @computed get allCalendars(){ + return this.childDocs; // returns a list of docs (i.e. calendars) + } + + removeCalendar = () => { + + } + + addCalendar = (doc: Doc | Doc[], annotationKey?: string | undefined): boolean => { + // bring up calendar modal with option to create a calendar + return true; + } + + _stackRef = React.createRef(); + + panelHeight = () => { + return 0; // a standard height for all calendars; TODO: change + } + + panelWidth = () => { + return 0; //a standard width for all calendars; TODO: change + } + + // most recent calendar should come first + sortByMostRecentDate = (calendarA: Doc, calendarB: Doc) => { + const aDateRangeStr = StrCast(calendarA.date_range); + const bDateRangeStr = StrCast(calendarB.date_range); + + const [aFromDate, aToDate] = dateRangeStrToDates(aDateRangeStr); + const [bFromDate, bToDate] = dateRangeStrToDates(bDateRangeStr); + + if (aFromDate > bFromDate) { + return -1; // a comes first + } else if (aFromDate < bFromDate) { + return 1; // b comes first + } else { // start dates are the same + if (aToDate > bToDate) { + return -1; // a comes first + } else if (aToDate < bToDate) { + return 1; // b comes first + } else { + return 0; // same start and end dates + } + } + + + } + + + + screenToLocalTransform = () => + this._props + .ScreenToLocalTransform() + .translate(Doc.NativeWidth(this._props.Document), 0) + .scale(this._props.NativeDimScaling?.() || 1); + + get calendarsKey() { + return this._props.fieldKey + '_calendars'; + } render(){ return (
- Hello +
+ ) } } \ No newline at end of file diff --git a/src/client/views/nodes/calendarBox/CalendarBox.tsx b/src/client/views/nodes/calendarBox/CalendarBox.tsx index 0aa3b4ccc..989feb774 100644 --- a/src/client/views/nodes/calendarBox/CalendarBox.tsx +++ b/src/client/views/nodes/calendarBox/CalendarBox.tsx @@ -5,6 +5,13 @@ import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps, ViewBoxBaseCompon import { FieldView, FieldViewProps } from '../FieldView'; import { StrCast } from '../../../../fields/Types'; import { makeObservable } from 'mobx'; +import { dateRangeStrToDates } from '../../../../Utils'; +import { Calendar, EventClickArg, EventSourceInput } from '@fullcalendar/core' +import dayGridPlugin from '@fullcalendar/daygrid' +import multiMonthPlugin from '@fullcalendar/multimonth' +import { faListNumeric } from '@fortawesome/free-solid-svg-icons'; + +type CalendarView = 'month' | 'multi-month' | 'week'; @observer export class CalendarBox extends ViewBoxBaseComponent(){ @@ -12,6 +19,103 @@ export class CalendarBox extends ViewBoxBaseComponent(){ return FieldView.LayoutString(CalendarBox, fieldKey); } + componentDidMount(): void { + + } + + componentWillUnmount(): void { + + } + + _calendarRef = React.createRef() + + get dateRangeStr (){ + return StrCast(this.Document.date_range); + } + + // Choose a calendar view based on the date range + get calendarViewType (): CalendarView { + const [fromDate, toDate] = dateRangeStrToDates(this.dateRangeStr); + + if (fromDate.getFullYear() !== toDate.getFullYear() || fromDate.getMonth() !== toDate.getMonth()) return 'multi-month'; + + if (Math.abs(fromDate.getDay() - toDate.getDay()) > 7) return 'month'; + return 'week'; + } + + get calendarStartDate () { + return this.dateRangeStr.split("|")[0]; + } + + get calendarToDate () { + return this.dateRangeStr.split("|")[1]; + } + + get childDocs (): Doc[] { + return this.childDocs; // get all sub docs for a calendar + } + + docBackgroundColor (type: string): string { + // TODO: Return a different color based on the event type + return 'blue'; + } + + get calendarEvents (): EventSourceInput | undefined { + if (this.childDocs.length === 0) return undefined; + return this.childDocs.map((doc, idx) => { + const docTitle = StrCast(doc.title); + const docDateRange = StrCast(doc.date_range); + const [startDate, endDate] = dateRangeStrToDates(docDateRange); + const docType = doc.type; + const docDescription = doc.description ? StrCast(doc.description): ""; + + return { + title: docTitle, + start: startDate, + end: endDate, + allDay: false, + classNames:[StrCast(docType)], // will determine the style + editable: false, // subject to change in the future + backgroundColor: this.docBackgroundColor(StrCast(doc.type)), + color: 'white', + extendedProps: { + description: docDescription + }, + + } + + }) + } + + handleEventClick = (arg: EventClickArg) => { + // TODO: open popover with event description, option to open CalendarManager and change event date, delete event, etc. + } + + calendarEl: HTMLElement = document.getElementById('calendar-box-v1')!; + + // https://fullcalendar.io + get calendar() { + return new Calendar(this.calendarEl, + { + plugins: [this.calendarViewType === 'multi-month' ? multiMonthPlugin : dayGridPlugin], + headerToolbar: { + left: 'prev,next today', + center: 'title', + right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' + }, + initialDate: this.calendarStartDate, + navLinks: true, + editable: false, + displayEventTime: false, + displayEventEnd: false, + events: this.calendarEvents, + eventClick: this.handleEventClick + } + ) + + } + + constructor(props: any){ super(props); makeObservable(this); @@ -19,7 +123,11 @@ export class CalendarBox extends ViewBoxBaseComponent(){ render(){ return ( -
+
+
+ +
+
); } -- cgit v1.2.3-70-g09d2 From 87c30ed34eb7c51da9b6d051e2989c2213644595 Mon Sep 17 00:00:00 2001 From: zaultavangar Date: Sun, 17 Dec 2023 20:16:01 -0500 Subject: adding some unsaved code from CollectionCalendarView --- src/client/views/collections/CollectionCalendarView.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionCalendarView.tsx b/src/client/views/collections/CollectionCalendarView.tsx index f94d05c61..f28154486 100644 --- a/src/client/views/collections/CollectionCalendarView.tsx +++ b/src/client/views/collections/CollectionCalendarView.tsx @@ -46,11 +46,11 @@ export class CollectionCalendarView extends CollectionSubView(){ _stackRef = React.createRef(); panelHeight = () => { - return 0; // a standard height for all calendars; TODO: change + return 0; // TODO: change } panelWidth = () => { - return 0; //a standard width for all calendars; TODO: change + return 0; // TODO: change } // most recent calendar should come first @@ -96,8 +96,8 @@ export class CollectionCalendarView extends CollectionSubView(){ 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/client/views/collections') 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 From e5b641ce31703b3af0238ff93645fcfa9a3f9168 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 17 Dec 2023 22:32:22 -0500 Subject: small change to calendarView to render calendars --- .../views/collections/CollectionCalendarView.tsx | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionCalendarView.tsx b/src/client/views/collections/CollectionCalendarView.tsx index ad880b815..2cec29669 100644 --- a/src/client/views/collections/CollectionCalendarView.tsx +++ b/src/client/views/collections/CollectionCalendarView.tsx @@ -39,17 +39,13 @@ export class CollectionCalendarView extends CollectionSubView() { _stackRef = React.createRef(); panelHeight = () => { - return 0; // TODO: change - }; - - panelWidth = () => { - return 0; // TODO: change + return this._props.PanelHeight() - 40; // this should be the height of the stacking view. For now, it's the hieight of the calendar view minus 40 to allow for a title }; // most recent calendar should come first sortByMostRecentDate = (calendarA: Doc, calendarB: Doc) => { - const aDateRangeStr = StrCast(calendarA.date_range); - const bDateRangeStr = StrCast(calendarB.date_range); + const aDateRangeStr = StrCast(DocListCast(calendarA.data).lastElement()?.date_range); + const bDateRangeStr = StrCast(DocListCast(calendarB.data).lastElement()?.date_range); const [aFromDate, aToDate] = dateRangeStrToDates(aDateRangeStr); const [bFromDate, bToDate] = dateRangeStrToDates(bDateRangeStr); @@ -77,24 +73,23 @@ export class CollectionCalendarView extends CollectionSubView() { .scale(this._props.NativeDimScaling?.() || 1); get calendarsKey() { - return this._props.fieldKey + '_calendars'; + return this._props.fieldKey; } render() { return ( -
+
); -- cgit v1.2.3-70-g09d2