Add Event modal

assets/javascripts/discourse/components/add-event-controls.js

@@ -1,7 +1,8 @@
-import showModal from "discourse/lib/show-modal";
 import { eventLabel } from "../lib/date-utilities";
 import { default as discourseComputed } from "discourse-common/utils/decorators";
 import Component from "@ember/component";
+import AddEventModal from "../components/modal/add-event";
+import { getOwner } from "@ember/application"
 
 export default Component.extend({
   classNames: ["event-label"],
@@ -45,7 +46,8 @@ export default Component.extend({
 
   actions: {
     showAddEvent() {
-      showModal("add-event", {
+      let modal = getOwner(this).lookup("service:modal");
+      modal.show(AddEventModal, {
         model: {
           bufferedEvent: this.event,
           event: this.event,

assets/javascripts/discourse/components/modal/add-event.hbs

@@ -1,10 +1,18 @@
-{{#d-modal-body class="add-event-modal" id="event-modal" title=title}}
+<DModal
+  @closeModal={{@closeModal}}
+  class="add-event-modal"
+  id="event-modal"
+  @flash={{this.flash}}
+  @title={{this.title}}
+>
+<:body>
   {{event-form
     event=model.event
     updateEvent=(action 'updateEvent')}}
-{{/d-modal-body}}
+</:body>
+  <:footer>
+      {{d-button action=(action "saveEvent") class="btn-primary" label="add_event.event_add"}}
+      <a href class="clear" {{on "click" (fn this.clear)}}>{{i18n 'add_event.event_clear'}}</a>
+  </:footer>
 
-<div class="modal-footer">
-  {{d-button action=(action "saveEvent") class="btn-primary" label="add_event.event_add"}}
-  <a href class="clear" {{on "click" (fn this.clear)}}>{{i18n 'add_event.event_clear'}}</a>
-</div>
+</DModal>

assets/javascripts/discourse/components/modal/add-event.js

@@ -1,30 +1,31 @@
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import Controller from "@ember/controller";
+import Component from "@ember/component";
 import I18n from "I18n";
 import { action } from "@ember/object";
 
-export default Controller.extend(ModalFunctionality, {
-  title: "add_event.modal_title",
+export default class AddEventModal extends Component {
+  title = I18n.t("add_event.modal_title");
 
   @action
   clear() {
-    event?.preventDefault();
     this.set("bufferedEvent", null);
-  },
+  }
 
-  actions: {
-    saveEvent() {
-      if (this.valid) {
-        this.get("model.update")(this.bufferedEvent);
-        this.send("closeModal");
-      } else {
-        this.flash(I18n.t("add_event.error"), "error");
-      }
-    },
+  @action
+  saveEvent() {
+    if (this.valid) {
+      this.get("model.update")(this.bufferedEvent);
+      this.closeModal();
+    } else {
+      this.setProperties({
+        flash: I18n.t("add_event.error"),
+        flashType: "error",
+      });
+    }
+  }
 
-    updateEvent(event, valid) {
-      this.set("bufferedEvent", event);
-      this.set("valid", valid);
-    },
-  },
-});
+  @action
+  updateEvent(event, valid) {
+    this.set("bufferedEvent", event);
+    this.set("valid", valid);
+  }
+};

assets/javascripts/discourse/helpers/event-label.js

@@ -1,8 +1,11 @@
-import { helperContext, registerUnbound } from "discourse-common/lib/helpers";
+import { helper } from '@ember/component/helper';
 import { htmlSafe } from "@ember/template";
 import { eventLabel } from "../lib/date-utilities";
+import { getOwnerWithFallback } from "discourse-common/lib/get-owner";
 
-export default registerUnbound("event-label", function (event, args) {
-  let siteSettings = helperContext().siteSettings;
+export function eventLabelHelper([event, args]) {
+  let siteSettings = getOwnerWithFallback(this).lookup('site-settings:main');
   return htmlSafe(eventLabel(event, Object.assign({}, args, { siteSettings })));
-});
+};
+
+export default helper(eventLabelHelper);

assets/javascripts/discourse/initializers/discourse-events.js

@@ -269,6 +269,8 @@ export default {
           },
 
           setupController(controller, model) {
+            super.setupController(controller, model);
+
             const start = this.get("start");
             const end = this.get("end");