[mm-66] - provides a better date selection ui

README.md

@@ -28,9 +28,8 @@ The meeting settings for each channel can be configured in the Channel Header Dr
 Meeting settings include:
 
 - Schedule Day: Day of the week when the meeting is scheduled.
-- Hashtag Format: The format of the hashtag for the meeting date. The date format is based on [Go date and time formatting](https://yourbasic.org/golang/format-parse-string-time-date-example/#standard-time-and-date-formats).
-  The date format must be wrapped in double Braces ( {{ }} ).
-  A default is generated from the first 15 characters of the channel's name with the short name of the month and day (i.e. Dev-{{ Jan02 }}).
+- Hashtag Format: The format of the hashtag for the meeting date. 
+  A default is generated from the first 15 characters of the channel's name with the short name of the month and day (i.e. Dev-{{ Jan 2 }}).
 
 #### Slash Commands to manage the meeting agenda:
 

server/meeting.go

@@ -16,7 +16,7 @@ var (
 type Meeting struct {
 	ChannelID     string         `json:"channelId"`
 	Schedule      []time.Weekday `json:"schedule"`
-	HashtagFormat string         `json:"hashtagFormat"` // Default: {ChannelName}-Jan02
+	HashtagFormat string         `json:"hashtagFormat"` // Default: {ChannelName}-Jan-2
 }
 
 // GetMeeting returns a meeting
@@ -37,9 +37,10 @@ func (p *Plugin) GetMeeting(channelID string) (*Meeting, error) {
 		if err != nil {
 			return nil, err
 		}
+		paddedChannelName := strings.ReplaceAll(channel.Name, "-", "_")
 		meeting = &Meeting{
 			Schedule:      []time.Weekday{time.Thursday},
-			HashtagFormat: strings.Join([]string{fmt.Sprintf("%.15s", channel.Name), "{{ Jan02 }}"}, "-"),
+			HashtagFormat: strings.Join([]string{fmt.Sprintf("%.15s", paddedChannelName), "{{ Jan 2 }}"}, "_"),
 			ChannelID:     channelID,
 		}
 	}
@@ -92,8 +93,10 @@ func (p *Plugin) GenerateHashtag(channelID string, nextWeek bool, weekday int) (
 		prefix = matchGroups[1]
 		hashtagFormat = strings.TrimSpace(matchGroups[2])
 		postfix = matchGroups[3]
+		formattedDate := meetingDate.Format(hashtagFormat)
+		formattedDate = strings.ReplaceAll(formattedDate, " ", "_")
 
-		hashtag = fmt.Sprintf("#%s%v%s", prefix, meetingDate.Format(hashtagFormat), postfix)
+		hashtag = fmt.Sprintf("#%s%v%s", prefix, formattedDate, postfix)
 	} else {
 		hashtag = fmt.Sprintf("#%s", meeting.HashtagFormat)
 	}

server/meeting_test.go

@@ -55,9 +55,9 @@ func TestPlugin_GenerateHashtag(t *testing.T) {
 				meeting: &Meeting{
 					ChannelID:     "QA",
 					Schedule:      []time.Weekday{time.Wednesday},
-					HashtagFormat: "{{Jan02}}",
+					HashtagFormat: "{{Jan 2}}",
 				}},
-			want:    "#" + assertNextWeekdayDate(time.Wednesday, true).Format("Jan02"),
+			want:    "#" + strings.ReplaceAll(assertNextWeekdayDate(time.Wednesday, true).Format("Jan 2"), " ", "_"),
 			wantErr: false,
 		},
 		{
@@ -67,9 +67,9 @@ func TestPlugin_GenerateHashtag(t *testing.T) {
 				meeting: &Meeting{
 					ChannelID:     "QA Backend",
 					Schedule:      []time.Weekday{time.Monday},
-					HashtagFormat: "QA-{{January 02 2006}}",
+					HashtagFormat: "QA_{{January 02 2006}}",
 				}},
-			want:    "#QA-" + assertNextWeekdayDate(time.Monday, true).Format("January 02 2006"),
+			want:    "#QA_" + strings.ReplaceAll(assertNextWeekdayDate(time.Monday, true).Format("January 02 2006"), " ", "_"),
 			wantErr: false,
 		},
 		{
@@ -81,7 +81,7 @@ func TestPlugin_GenerateHashtag(t *testing.T) {
 					Schedule:      []time.Weekday{time.Monday},
 					HashtagFormat: "{{January 02 2006}}.vue",
 				}},
-			want:    "#" + assertNextWeekdayDate(time.Monday, false).Format("January 02 2006") + ".vue",
+			want:    "#" + strings.ReplaceAll(assertNextWeekdayDate(time.Monday, false).Format("January 02 2006"), " ", "_") + ".vue",
 			wantErr: false,
 		},
 		{
@@ -93,7 +93,7 @@ func TestPlugin_GenerateHashtag(t *testing.T) {
 					Schedule:      []time.Weekday{time.Monday},
 					HashtagFormat: "React {{January 02 2006}} Born",
 				}},
-			want:    "#React " + assertNextWeekdayDate(time.Monday, false).Format("January 02 2006") + " Born",
+			want:    "#React " + strings.ReplaceAll(assertNextWeekdayDate(time.Monday, false).Format("January 02 2006"), " ", "_") + " Born",
 			wantErr: false,
 		},
 		{
@@ -105,7 +105,7 @@ func TestPlugin_GenerateHashtag(t *testing.T) {
 					Schedule:      []time.Weekday{time.Monday},
 					HashtagFormat: "January 02 2006 {{January 02 2006}} January 02 2006",
 				}},
-			want:    "#January 02 2006 " + assertNextWeekdayDate(time.Monday, false).Format("January 02 2006") + " January 02 2006",
+			want:    "#January 02 2006 " + strings.ReplaceAll(assertNextWeekdayDate(time.Monday, false).Format("January 02 2006"), " ", "_") + " January 02 2006",
 			wantErr: false,
 		},
 		{
@@ -117,7 +117,7 @@ func TestPlugin_GenerateHashtag(t *testing.T) {
 					Schedule:  []time.Weekday{time.Monday},
 					HashtagFormat: "{{   January 02 2006			}}",
 				}},
-			want:    "#" + assertNextWeekdayDate(time.Monday, false).Format("January 02 2006"),
+			want:    "#" + strings.ReplaceAll(assertNextWeekdayDate(time.Monday, false).Format("January 02 2006"), " ", "_"),
 			wantErr: false,
 		},
 		{
@@ -129,7 +129,7 @@ func TestPlugin_GenerateHashtag(t *testing.T) {
 					Schedule:      []time.Weekday{time.Monday},
 					HashtagFormat: "{{ Mon Jan _2 }}",
 				}},
-			want:    "#" + assertNextWeekdayDate(time.Monday, false).Format("Mon Jan _2"),
+			want:    "#" + strings.ReplaceAll(assertNextWeekdayDate(time.Monday, false).Format("Mon Jan _2"), " ", "_"),
 			wantErr: false,
 		},
 	}
@@ -176,7 +176,7 @@ func TestPlugin_GetMeeting(t *testing.T) {
 			},
 			want: &Meeting{
 				Schedule:      []time.Weekday{time.Thursday},
-				HashtagFormat: "Short-{{ Jan02 }}",
+				HashtagFormat: "Short_{{ Jan 2 }}",
 				ChannelID:     "#short.name.channel",
 			},
 			wantErr: false,
@@ -190,7 +190,7 @@ func TestPlugin_GetMeeting(t *testing.T) {
 			},
 			want: &Meeting{
 				Schedule:      []time.Weekday{time.Thursday},
-				HashtagFormat: "Very Long Chann-{{ Jan02 }}",
+				HashtagFormat: "Very Long Chann_{{ Jan 2 }}",
 				ChannelID:     "#long.name.channel",
 			},
 			wantErr: false,

webapp/src/components/meeting_settings/meeting_settings.jsx

@@ -17,8 +17,9 @@ export default class MeetingSettingsModal extends React.PureComponent {
         super(props);
 
         this.state = {
-            hashtag: '{{Jan02}}',
+            hashtagPrefix: 'Prefix',
             weekdays: [1],
+            dateFormat: '1-2',
         };
     }
 
@@ -28,20 +29,30 @@ export default class MeetingSettingsModal extends React.PureComponent {
         }
 
         if (this.props.meeting && this.props.meeting !== prevProps.meeting) {
+            const splitResult = this.props.meeting.hashtagFormat.split('{{');// we know, date Format is preceded by {{
+            const hashtagPrefix = splitResult[0];
+            const dateFormat = splitResult[1].substring(0, splitResult[1].length - 2); // remove trailing }}
             // eslint-disable-next-line react/no-did-update-set-state
             this.setState({
-                hashtag: this.props.meeting.hashtagFormat,
+                hashtagPrefix,
+                dateFormat,
                 weekdays: this.props.meeting.schedule || [],
             });
         }
     }
 
     handleHashtagChange = (e) => {
         this.setState({
-            hashtag: e.target.value,
+            hashtagPrefix: e.target.value,
         });
     }
 
+    handleDateFormat = (event) => {
+        this.setState({
+            dateFormat: event.target.value,
+        });
+    };
+
     handleCheckboxChanged = (e) => {
         const changeday = Number(e.target.value);
         let changedWeekdays = Object.assign([], this.state.weekdays);
@@ -62,7 +73,7 @@ export default class MeetingSettingsModal extends React.PureComponent {
     onSave = () => {
         this.props.saveMeetingSettings({
             channelId: this.props.channelId,
-            hashtagFormat: this.state.hashtag,
+            hashtagFormat: `${this.state.hashtagPrefix}{{${this.state.dateFormat}}}`,
             schedule: this.state.weekdays.sort(),
         });
 
@@ -118,19 +129,50 @@ export default class MeetingSettingsModal extends React.PureComponent {
                         </div>
                     </div>
                     <div className='form-group'>
-                        <label className='control-label'>{'Hashtag Format'}</label>
-                        <input
-                            onChange={this.handleHashtagChange}
-                            className='form-control'
-                            value={this.state.hashtag ? this.state.hashtag : ''}
-                        />
-                        <p className='text-muted pt-1'> {'Hashtag is formatted using the '}
-                            <a
-                                target='_blank'
-                                rel='noopener noreferrer'
-                                href='https://godoc.org/time#pkg-constants'
-                            >{'Go time package.'}</a>
-                            {' Embed a date by surrounding what January 2, 2006 would look like with double curly braces, i.e. {{Jan02}}'}
+                        <div style={{display: 'flex'}}>
+                            <div
+                                className='fifty'
+                                style={{padding: '5px'}}
+                            >
+                                <label className='control-label'>{'Hashtag Prefix'}</label>
+                                <input
+                                    onChange={this.handleHashtagChange}
+                                    className='form-control'
+                                    value={this.state.hashtagPrefix ? this.state.hashtagPrefix : ''}
+                                />
+                            </div>
+                            <div
+                                className='fifty'
+                                style={{padding: '5px'}}
+                            >
+                                <label className='control-label'>{'Date Format'}</label>
+                                <br/>
+                                <select
+                                    name='format'
+                                    value={this.state.dateFormat}
+                                    onChange={this.handleDateFormat}
+                                    style={{height: '35px', border: '1px solid #ced4da'}}
+                                    className='form-select'
+                                >
+                                    <option value='Jan 2'>{'Month_day'}</option>
+                                    <option value='2 Jan'>{'day_Month'}</option>
+                                    <option value='1 2'>{'month_day'}</option>
+                                    <option value='2 1'>{'day_month'}</option>
+                                    <option value='2006 1 2'>{'year_month_day'}</option>
+
+                                </select>
+                            </div>
+                        </div>
+
+                        <p className='text-muted pt-1'>
+                            <div
+                                className='alert alert-warning'
+                                role='alert'
+                                style={{marginBottom: '3px'}}
+                            >
+                                {'You may use underscore'}<code>{'_'}</code>{'.'} {'Other special characters including'} <code>{'-'}</code>{','} {'not allowed.'}
+                            </div>
+                            {'Date would be appended to Hashtag Prefix, according to format chosen.'}
                         </p>
                     </div>
                 </Modal.Body>