From e39665be22ecee11b093db07ebe72896a6d43a8c Mon Sep 17 00:00:00 2001
From: zaultavangar <zaul_tavangar@brown.edu>
Date: Sun, 17 Dec 2023 15:59:39 -0500
Subject: starting calendar collection view

---
 src/client/util/CalendarManager.tsx | 82 +++++++++++++++++++++++++++++--------
 1 file changed, 65 insertions(+), 17 deletions(-)

(limited to 'src/client/util/CalendarManager.tsx')

diff --git a/src/client/util/CalendarManager.tsx b/src/client/util/CalendarManager.tsx
index 3872294db..d5d4203b1 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');
@@ -121,19 +124,26 @@ export class CalendarManager extends ObservableReactComponent<{}> {
     };
 
     @action
-    handleTextFieldChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+    handleCalendarTitleChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
         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 +151,7 @@ export class CalendarManager extends ObservableReactComponent<{}> {
                         },
                         []
                     );
+                    console.log('successful calendar creation')
                 } else {
                     this.errorMessage = 'Calendar with this name already exists';
                     return;
@@ -155,15 +166,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
 
             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 +227,7 @@ export class CalendarManager extends ObservableReactComponent<{}> {
 
     @action
     setSelectedDateRange = (range: any) => {
+        console.log("Range: ", range);
         this.selectedDateRange = range;
     };
 
@@ -220,9 +237,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 +278,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 +319,41 @@ 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>
         );
     }
@@ -313,4 +361,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
-- 
cgit v1.2.3-70-g09d2