Update after-time modal to use new date time inputs

assets/javascripts/discourse/controllers/next-session-scheduled.js.es6

@@ -1,58 +1,27 @@
 import { default as discourseComputed } from 'discourse-common/utils/decorators';
-import { scheduleOnce } from "@ember/runloop";
 import Controller from "@ember/controller";
 
 export default Controller.extend({
   title: 'admin.wizard.after_time_modal.title',
 
   setup() {
-    const dateTime = this.get('model.dateTime');
-    const ROUNDING = 30 * 60 * 1000;
-    const nextInterval = moment(Math.ceil((+moment()) / ROUNDING) * ROUNDING);
-    const mDateTime = dateTime ? moment(dateTime) : nextInterval;
-    const mDateTimeLocal = mDateTime.local();
-    const date = mDateTimeLocal.format('YYYY-MM-DD');
-    const time = mDateTimeLocal.format('HH:mm');
-
-    this.setProperties({ date, time });
-
-    scheduleOnce('afterRender', this, () => {
-      const $timePicker = $("#time-picker");
-      $timePicker.timepicker({ timeFormat: 'H:i' });
-      $timePicker.timepicker('setTime', time);
-      $timePicker.change(() => this.set('time', $timePicker.val()));
-    });
+    this.set('bufferedDateTime', moment(this.model.dateTime));
   },
 
-  @discourseComputed('date', 'time')
-  dateTime: function(date, time) {
-    return moment(date + 'T' + time).format();
-  },
-
-  @discourseComputed('dateTime')
+  @discourseComputed('bufferedDateTime')
   submitDisabled(dateTime) {
     return moment().isAfter(dateTime);
   },
 
-  resetProperties() {
-    this.setProperties({
-      date: null,
-      time: null
-    });
-  },
-
   actions: {
-    clear() {
-      this.resetProperties();
-      this.get('model.update')(null);
+    submit() {
+      const dateTime = this.get('bufferedDateTime');
+      this.get('model.update')(moment(dateTime).utc().toISOString());
+      this.send("closeModal");
     },
     
-    submit() {
-      const dateTime = this.get('dateTime');
-      const formatted = moment(dateTime).utc().toISOString();
-      this.get('model.update')(formatted);
-      this.resetProperties();
-      this.send("closeModal");
+    dateTimeChanged(dateTime) {
+      this.set('bufferedDateTime', dateTime);
     }
   }
 });

assets/javascripts/discourse/templates/modal/next-session-scheduled.hbs

@@ -1,24 +1,16 @@
 {{#d-modal-body class="next-session-time-modal" title=title}}
-  <div class="date-time-card">
-	  <div class="modal-date-time-set">
-      <div class="modal-date-area">
-        <label class="input-group-label">
-          {{i18n "admin.wizard.after_time_modal.date"}}
-        </label>
-        {{date-picker value=date containerId="date-container"}}
-      </div>
-      <div class="modal-time-area">
-        <label class="input-group-label">
-          {{i18n "admin.wizard.after_time_modal.time"}}
-        </label>
-        <input type="text" id="time-picker"/>
-      </div>
-    </div>
-    <div id="date-container"/>
-  </div>
+  {{date-time-input
+    date=bufferedDateTime
+    onChange=(action "dateTimeChanged")
+    showTime=true
+    clearable=true
+  }}
 {{/d-modal-body}}
 
 <div class="modal-footer">
-  {{d-button action="submit" class="btn-primary" label="admin.wizard.after_time_modal.done" disabled=submitDisabled}}
-  <a class="clear" {{action 'clear'}}>{{i18n 'admin.wizard.after_time_modal.clear'}}</a>
+  {{d-button
+    action="submit"
+    class="btn-primary"
+    label="admin.wizard.after_time_modal.done"
+    disabled=submitDisabled}}
 </div>

assets/stylesheets/common/wizard-admin.scss

@@ -481,54 +481,12 @@
   min-height: 150px;
 }
 
-.next-session-time-modal {
-  text-align: center;
+.modal .modal-body.next-session-time-modal {
+  overflow: visible;
   
-  .date-time-card {
-    width: 270px;
-    padding: 10px 20px;
-    text-align: left;
-  }
-
-  .modal-date-time-set{
-    padding-top: 3px;
-    padding-bottom: 4px;
-    display: flex;
-    flex-direction: row;
-
-    .modal-date-area{
-      order: 1;
-    }
-
-    .modal-time-area{
-      order: 2;
-      margin-left: 10px;
-
-      .modal-time{
-        width: 127px;
-      }
-    }
-  }
-
-  .ui-timepicker-input {
-    width: 119px;
-    text-align: center;
-  }
-
-  .date-picker{
-     width: 121px;
-  }
-
-  .pika-single {
-    position: relative !important;
-
-    .pika-lendar {
-      border: 1px solid #eee;
-      padding: 14px;
-      margin: 0;
-      float: none;
-      width: auto;
-    }
+  .picker-container {
+    position: absolute;
+    top: 30px;
   }
 }