COMPATIBILITY: Fixes for Discourse 3.2

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

@@ -1,10 +1,12 @@
-import showModal from "discourse/lib/show-modal";
 import { eventLabel } from "../lib/date-utilities";
 import { default as discourseComputed } from "discourse-common/utils/decorators";
+import AddEvent from "./modal/add-event";
 import Component from "@ember/component";
+import { service } from "@ember/service";
 
 export default Component.extend({
   classNames: ["event-label"],
+  modal: service(),
 
   didInsertElement() {
     $(".title-and-category").toggleClass(
@@ -45,7 +47,7 @@ export default Component.extend({
 
   actions: {
     showAddEvent() {
-      showModal("add-event", {
+      this.modal.show(AddEvent, {
         model: {
           bufferedEvent: this.event,
           event: this.event,

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

@@ -0,0 +1,16 @@
+<DModal
+  class="add-event-modal"
+  @title={{this.title}}
+  @closeModal={{@closeModal}}
+  @flash={{this.flash}}
+>
+  <:body>
+    {{event-form
+      event=model.event
+      updateEvent=(action 'updateEvent')}}
+  </: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>
+</DModal>

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

@@ -1,10 +1,9 @@
-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 Component.extend({
+  title: I18n.t("add_event.modal_title"),
 
   @action
   clear() {
@@ -16,9 +15,9 @@ export default Controller.extend(ModalFunctionality, {
     saveEvent() {
       if (this.valid) {
         this.get("model.update")(this.bufferedEvent);
-        this.send("closeModal");
+        this.closeModal();
       } else {
-        this.flash(I18n.t("add_event.error"), "error");
+        this.set("flash", I18n.t("add_event.error"));
       }
     },
 

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

@@ -6,7 +6,6 @@ import {
 } from "discourse-common/utils/decorators";
 import DiscourseURL from "discourse/lib/url";
 import { withPluginApi } from "discourse/lib/plugin-api";
-import { calendarRange } from "../lib/date-utilities";
 import { CREATE_TOPIC } from "discourse/models/composer";
 import { bind, scheduleOnce } from "@ember/runloop";
 import EmberObject from "@ember/object";
@@ -244,94 +243,6 @@ export default {
         },
       });
 
-      const calendarRoutes = [
-        `calendar`,
-        `calendarCategory`,
-        `calendarCategoryNone`,
-      ];
-
-      calendarRoutes.forEach((route) => {
-        api.modifyClass(`route:discovery.${route}`, {
-          pluginId: "events",
-
-          beforeModel(transition) {
-            const routeName = this.routeName;
-            const queryParams = this.paramsFor(routeName);
-
-            if (!queryParams.start || !queryParams.end) {
-              const month = moment().month();
-              const year = moment().year();
-              const { start, end } = calendarRange(month, year);
-              this.setProperties({ start, end });
-            }
-
-            this._super(transition);
-          },
-
-          setupController(controller, model) {
-            const start = this.get("start");
-            const end = this.get("end");
-
-            if (start || end) {
-              let initialDateRange = {};
-              if (start) {
-                initialDateRange["start"] = start;
-              }
-              if (end) {
-                initialDateRange["end"] = end;
-              }
-              this.controllerFor("discovery/topics").setProperties({
-                initialDateRange,
-              });
-            }
-
-            this._super(controller, model);
-          },
-
-          renderTemplate(controller, model) {
-            // respect discourse-layouts settings
-            const global = siteSettings.layouts_list_navigation_disabled_global;
-            const catGlobal =
-              model.category &&
-              model.category.get("layouts_list_navigation_disabled_global");
-            if (!global && !catGlobal) {
-              if (this.routeName.indexOf("Category") > -1) {
-                this.render("navigation/category", {
-                  outlet: "navigation-bar",
-                });
-              } else {
-                this.render("navigation/default", { outlet: "navigation-bar" });
-              }
-            }
-            this.render("discovery/calendar", {
-              outlet: "list-container",
-              controller: "discovery/topics",
-            });
-          },
-        });
-      });
-
-      const categoryRoutes = ["category", "categoryNone"];
-
-      categoryRoutes.forEach(function (route) {
-        api.modifyClass(`route:discovery.${route}`, {
-          pluginId: "events",
-
-          afterModel(model) {
-            const filter = this.filter(model.category);
-            if (filter === "calendar" || filter === "agenda") {
-              return this.replaceWith(
-                `/c/${Category.slugFor(model.category)}/l/${this.filter(
-                  model.category
-                )}`
-              );
-            } else {
-              return this._super(...arguments);
-            }
-          },
-        });
-      });
-
       api.modifyClass("controller:preferences/interface", {
         pluginId: "events",
 

assets/javascripts/discourse/routes/build-calendar-route.js

@@ -0,0 +1,49 @@
+import buildCategoryRoute from "discourse/routes/build-category-route";
+import buildTopicRoute from "discourse/routes/build-topic-route";
+import { calendarRange } from "../lib/date-utilities";
+
+export default function buildCalendarRoute(routeConfig) {
+  const klass = routeConfig.type === 'category' ? 
+    buildCategoryRoute({ filter: 'calendar' }) :
+    buildTopicRoute('calendar');
+
+  return class extends klass {
+    templateName = "discovery/calendar";
+
+    beforeModel(transition) {
+      super.beforeModel(...arguments);
+      const routeName = this.routeName;
+      const queryParams = this.paramsFor(routeName);
+
+      if (!queryParams.start || !queryParams.end) {
+        const month = moment().month();
+        const year = moment().year();
+        const { start, end } = calendarRange(month, year);
+        this.setProperties({ start, end });
+      }
+    }
+
+    setupController(controller, model) {
+      super.setupController(...arguments);
+      const start = this.get("start");
+      const end = this.get("end");
+
+      if (start || end) {
+        let initialDateRange = {};
+        if (start) {
+          initialDateRange["start"] = start;
+        }
+        if (end) {
+          initialDateRange["end"] = end;
+        }
+
+        const controllerName = this.routeConfig.type === "category" ?
+          "discovery.calendarCategory" :
+          "discovery.calendar";
+        this.controllerFor(controllerName).setProperties({
+          initialDateRange,
+        });
+      }
+    }
+  }
+}

assets/javascripts/discourse/routes/discovery-calendar-category.js

@@ -0,0 +1,4 @@
+import buildCalendarRoute from "./build-calendar-route";
+
+export default class DiscoveryCalendarCategory extends buildCalendarRoute({ type: "category" }) {
+}

assets/javascripts/discourse/routes/discovery-calendar.js

@@ -0,0 +1,4 @@
+import buildCalendarRoute from "./build-calendar-route";
+
+export default class DiscoveryCategory extends buildCalendarRoute({ type: "topic" }) {
+}

assets/javascripts/discourse/templates/discovery/calendar.hbs

@@ -1,5 +1,45 @@
-{{events-calendar
-  topics=model.topics
-  category=category
-  loading=discovery.loading
-  initialDateRange=initialDateRange}}
+<Discovery::Layout
+  @model={{this.model}}
+  @createTopicDisabled={{this.createTopicDisabled}}
+>
+  <:navigation>
+    <Discovery::Navigation
+      @category={{this.model.category}}
+      @tag={{this.model.tag}}
+      @additionalTags={{this.model.additionalTags}}
+      @filterType={{this.model.filterType}}
+      @noSubcategories={{this.model.noSubcategories}}
+      @canBulkSelect={{this.canBulkSelect}}
+      @bulkSelectHelper={{this.bulkSelectHelper}}
+      @createTopic={{this.createTopic}}
+      @createTopicDisabled={{this.createTopicDisabled}}
+      @canCreateTopicOnTag={{this.model.canCreateTopicOnTag}}
+      @toggleTagInfo={{this.toggleTagInfo}}
+      @tagNotification={{this.model.tagNotification}}
+      @model={{this.model.list}}
+      @showDismissRead={{this.showDismissRead}}
+      @showResetNew={{this.showResetNew}}
+      @dismissRead={{this.dismissRead}}
+      @resetNew={{this.resetNew}}
+    />
+  </:navigation>
+
+  <:header>
+    {{#if this.model.subcategoryList}}
+      <Discovery::CategoriesDisplay
+        @categories={{this.model.subcategoryList.categories}}
+        @parentCategory={{this.model.subcategoryList.parentCategory}}
+      />
+    {{/if}}
+    {{#if (and this.showTagInfo this.model.tag)}}
+      <TagInfo @tag={{this.model.tag}} @list={{this.model.list}} />
+    {{/if}}
+  </:header>
+  <:list>
+    {{events-calendar
+      topics=model.list.topics
+      category=model.category
+      loading=discovery.loading
+      initialDateRange=initialDateRange}}
+  </:list>
+</Discovery::Layout>

assets/stylesheets/common/events.scss

@@ -1,7 +1,10 @@
 @import "event-form";
 
 .add-event-modal {
-  &.modal-body {
+  .d-modal__container {
+    max-width: 630px;
+  }
+  .d-modal__body {
     padding: 20px;
   }
 

plugin.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 # name: discourse-events
 # about: Allows you to manage events in Discourse
-# version: 0.2.11
+# version: 0.3.0
 # authors: Angus McLeod
 # contact_emails: [email protected]
 # url: https://github.com/paviliondev/discourse-events
@@ -12,6 +12,7 @@
 register_asset 'stylesheets/common/admin.scss'
 register_asset 'stylesheets/desktop/events.scss', :desktop
 register_asset 'stylesheets/mobile/events.scss', :mobile
+register_asset 'lib/jquery-3.7.1.min.js'
 register_asset 'lib/jquery.timepicker.min.js'
 register_asset 'lib/jquery.timepicker.scss'