DEV: Upgrade modal to Component API (#186)

- Upgrade modal to Component API
- Co-locate templates

assets/javascripts/discourse/components/modal/admin-cancel-subscription.gjs

@@ -0,0 +1,38 @@
+import DButton from "discourse/components/d-button";
+import DModal from "discourse/components/d-modal";
+import Component from "@glimmer/component";
+import { fn, hash } from "@ember/helper";
+import i18n from "discourse-common/helpers/i18n";
+import { Input } from "@ember/component";
+import { tracked } from "@glimmer/tracking";
+
+export default class AdminCancelSubscription extends Component {
+  @tracked refund;
+
+  <template>
+    <DModal
+      @title={{i18n
+        "discourse_subscriptions.user.subscriptions.operations.destroy.confirm"
+      }}
+      @closeModal={{@closeModal}}
+    >
+      <:body>
+        <Input @type="checkbox" @checked={{this.refund}} />
+        {{i18n "discourse_subscriptions.admin.ask_refund"}}
+      </:body>
+      <:footer>
+        <DButton
+          @label="yes_value"
+          @action={{fn
+            @model.cancelSubscription
+            (hash subscription=@model.subscription refund=this.refund)
+          }}
+          @icon="times"
+          @isLoading={{@model.subscription.loading}}
+          class="btn-danger"
+        />
+        <DButton @label="no_value" @action={{@closeModal}} />
+      </:footer>
+    </DModal>
+  </template>
+}

assets/javascripts/discourse/controllers/admin-plugins-discourse-subscriptions-subscriptions.js

@@ -1,30 +1,57 @@
-import AdminSubscription from "discourse/plugins/discourse-subscriptions/discourse/models/admin-subscription";
+import AdminCancelSubscription from "../components/modal/admin-cancel-subscription";
+import AdminSubscription from "../models/admin-subscription";
 import Controller from "@ember/controller";
-import showModal from "discourse/lib/show-modal";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import I18n from "discourse-i18n";
 
 export default Controller.extend({
+  modal: service(),
+  dialog: service(),
   loading: false,
 
-  actions: {
+  @action
-    showCancelModal(subscription) {
+  showCancelModal(subscription) {
-      showModal("admin-cancel-subscription", {
+    this.modal.show(AdminCancelSubscription, {
-        model: subscription,
+      model: {
+        subscription,
+        cancelSubscription: this.cancelSubscription,
+      },
+    });
+  },
+
+  @action
+  loadMore() {
+    if (!this.loading && this.model.has_more) {
+      this.set("loading", true);
+
+      return AdminSubscription.loadMore(this.model.last_record).then(
+        (result) => {
+          const updated = this.model.data.concat(result.data);
+          this.set("model", result);
+          this.set("model.data", updated);
+          this.set("loading", false);
+        }
+      );
+    }
+  },
+
+  @action
+  cancelSubscription(model) {
+    const subscription = model.subscription;
+    const refund = model.refund;
+    subscription.set("loading", true);
+    subscription
+      .destroy(refund)
+      .then((result) => {
+        subscription.set("status", result.status);
+        this.dialog.alert(I18n.t("discourse_subscriptions.admin.canceled"));
+      })
+      .catch((data) =>
+        this.dialog.alert(data.jqXHR.responseJSON.errors.join("\n"))
+      )
+      .finally(() => {
+        subscription.set("loading", false);
       });
-    },
-
-    loadMore() {
-      if (!this.loading && this.model.has_more) {
-        this.set("loading", true);
-
-        return AdminSubscription.loadMore(this.model.last_record).then(
-          (result) => {
-            const updated = this.model.data.concat(result.data);
-            this.set("model", result);
-            this.set("model.data", updated);
-            this.set("loading", false);
-          }
-        );
-      }
-    },
   },
 });

assets/javascripts/discourse/routes/admin-plugins-discourse-subscriptions-subscriptions.js

@@ -1,33 +1,8 @@
-import I18n from "I18n";
 import Route from "@ember/routing/route";
 import AdminSubscription from "discourse/plugins/discourse-subscriptions/discourse/models/admin-subscription";
-import { action } from "@ember/object";
-import { inject as service } from "@ember/service";
 
 export default Route.extend({
-  dialog: service(),
   model() {
     return AdminSubscription.find();
   },
-
-  @action
-  cancelSubscription(model) {
-    const subscription = model.subscription;
-    const refund = model.refund;
-    subscription.set("loading", true);
-    subscription
-      .destroy(refund)
-      .then((result) => {
-        subscription.set("status", result.status);
-        this.send("closeModal");
-        this.dialog.alert(I18n.t("discourse_subscriptions.admin.canceled"));
-      })
-      .catch((data) =>
-        this.dialog.alert(data.jqXHR.responseJSON.errors.join("\n"))
-      )
-      .finally(() => {
-        subscription.set("loading", false);
-        this.refresh();
-      });
-  },
 });

assets/javascripts/discourse/templates/modal/admin-cancel-subscription.hbs

@@ -1,27 +0,0 @@
-<div>
-  <DModalBody
-    @rawTitle={{i18n
-      "discourse_subscriptions.user.subscriptions.operations.destroy.confirm"
-    }}
-  >
-    <Input @type="checkbox" @checked={{refund}} />
-    {{i18n "discourse_subscriptions.admin.ask_refund"}}
-  </DModalBody>
-
-  <div class="modal-footer">
-    {{#if model.loading}}
-      {{loading-spinner}}
-    {{else}}
-      <DButton
-        @label="yes_value"
-        @action={{route-action
-          "cancelSubscription"
-          (hash subscription=model refund=refund)
-        }}
-        @icon="times"
-        class="btn-danger"
-      />
-      <DButton @label="no_value" @action={{route-action "closeModal"}} />
-    {{/if}}
-  </div>
-</div>