components: EventEdit add RRule widget

src/components/EventEdit.tsx

@@ -35,6 +35,7 @@ import { getCurrentTimezone } from '../helpers';
 import { EventType, timezoneLoadFromName } from '../pim-types';
 import RRuleEteSync, { RRuleOptions } from '../widgets/RRule';
 
+
 interface PropsType {
   collections: EteSync.CollectionInfo[];
   initialCollection?: string;
@@ -56,7 +57,7 @@ class EventEdit extends React.PureComponent<PropsType> {
     location: string;
     description: string;
     journalUid: string;
-
+    rruleOptions?: RRuleOptions;
     error?: string;
     showDeleteDialog: boolean;
   };
@@ -70,7 +71,6 @@ class EventEdit extends React.PureComponent<PropsType> {
       location: '',
       description: '',
       timezone: null,
-
       journalUid: '',
       showDeleteDialog: false,
     };
@@ -105,6 +105,7 @@ class EventEdit extends React.PureComponent<PropsType> {
       this.state.location = event.location ? event.location : '';
       this.state.description = event.description ? event.description : '';
       this.state.timezone = event.timezone;
+      this.state.rruleOptions = this.props.item?.component.getFirstPropertyValue('rrule');
     } else {
       this.state.uid = uuid.v4();
     }
@@ -122,6 +123,8 @@ class EventEdit extends React.PureComponent<PropsType> {
     this.handleInputChange = this.handleInputChange.bind(this);
     this.toggleAllDay = this.toggleAllDay.bind(this);
     this.onDeleteRequest = this.onDeleteRequest.bind(this);
+    this.toggleRecurring = this.toggleRecurring.bind(this);
+    this.handleRRuleChange = this.handleRRuleChange.bind(this);
   }
 
   public UNSAFE_componentWillReceiveProps(nextProps: any) {
@@ -155,7 +158,16 @@ class EventEdit extends React.PureComponent<PropsType> {
   public toggleAllDay() {
     this.setState({ allDay: !this.state.allDay });
   }
+  public toggleRecurring() {
+    const value = this.state.rruleOptions ? undefined : { freq: 'WEEKLY', interval: 1 };
+    this.setState({ rruleOptions: value });
+  }
 
+
+  public handleRRuleChange(rrule: RRuleOptions): void {
+    this.setState({ rruleOptions: rrule });
+    console.log(rrule);
+  }
   public onSubmit(e: React.FormEvent<any>) {
     e.preventDefault();
 
@@ -191,7 +203,7 @@ class EventEdit extends React.PureComponent<PropsType> {
       this.props.item.clone()
       :
       new EventType()
-    ;
+      ;
     event.uid = this.state.uid;
     event.summary = this.state.title;
     event.startDate = startDate;
@@ -233,21 +245,17 @@ class EventEdit extends React.PureComponent<PropsType> {
       },
     };
 
-    const recurring = this.props.item && this.props.item.isRecurring();
+    if (this.props.item && this.props.item.isRecurring()) {
+      console.log(1);
+    }
     const differentTimezone = this.state.timezone && (this.state.timezone !== getCurrentTimezone()) && timezoneLoadFromName(this.state.timezone);
 
+
     return (
       <>
         <h2>
           {this.props.item ? 'Edit Event' : 'New Event'}
         </h2>
-        {recurring && (
-          <div>
-            <span style={{ color: 'red' }}>IMPORTANT: </span>
-            This is a recurring event, for now, only editing the whole series
-            (by editing the first instance) is supported.
-          </div>
-        )}
         {this.state.error && (
           <div>ERROR! {this.state.error}</div>
         )}
@@ -336,7 +344,25 @@ class EventEdit extends React.PureComponent<PropsType> {
             value={this.state.description}
             onChange={this.handleInputChange}
           />
-
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Switch
+                  name="recurring"
+                  checked={!!this.state.rruleOptions}
+                  onChange={this.toggleRecurring}
+                  color="primary"
+                />
+              }
+              label="Recurring"
+            />
+          </FormGroup>
+          {this.state.rruleOptions &&
+            <RRuleEteSync
+              onChange={this.handleRRuleChange}
+              rrule={this.state.rruleOptions ? this.state.rruleOptions : { freq: 'DAILY', interval: 1 }}
+            />
+          }
           <div style={styles.submit}>
             <Button
               variant="contained"
@@ -374,6 +400,7 @@ class EventEdit extends React.PureComponent<PropsType> {
           </div>
         </form>
 
+
         <ConfirmationDialog
           title="Delete Confirmation"
           labelOk="Delete"
@@ -381,7 +408,7 @@ class EventEdit extends React.PureComponent<PropsType> {
           onOk={() => this.props.onDelete(this.props.item!, this.props.initialCollection!)}
           onCancel={() => this.setState({ showDeleteDialog: false })}
         >
-        Are you sure you would like to delete this event?
+          Are you sure you would like to delete this event?
         </ConfirmationDialog>
       </>
     );