DEV: Update Event Invitees modal to new Component API (#476)

- Upgrade modal to new component based API
- Remove redundant event status in RSVPed modal

# Before
<img width="593" alt="Screenshot 2023-11-09 at 12 28 03 PM" src="https://github.com/discourse/discourse-calendar/assets/50783505/c860c5b5-10b0-4b09-b25b-56bf5d6262e8">

# After
<img width="334" alt="Screenshot 2023-11-09 at 1 12 58 PM" src="https://github.com/discourse/discourse-calendar/assets/50783505/9a2132ae-179c-455c-8dda-65a060416c3c">

assets/javascripts/discourse/components/modal/post-event-invitees.hbs

@@ -0,0 +1,41 @@
+<DModal
+  @title={{this.title}}
+  @closeModal={{@closeModal}}
+  class={{concat-class
+    (or @model.extraClass "invited")
+    "discourse-post-event-invitees-modal"
+  }}
+>
+  <:body>
+    <Input
+      @value={{this.filter}}
+      {{on "input" this.onFilterChanged}}
+      class="filter"
+      placeholder={{i18n
+        "discourse_post_event.invitees_modal.filter_placeholder"
+      }}
+    />
+    <ToggleInvitees @viewType={{this.type}} @toggle={{this.toggleType}} />
+    <ConditionalLoadingSpinner @condition={{this.isLoading}}>
+      {{#if this.invitees}}
+        <ul class="invitees">
+          {{#each this.invitees as |invitee|}}
+            <li class="invitee">
+              {{render-invitee invitee}}
+              {{#if @model.event.can_act_on_discourse_post_event}}
+                <DButton
+                  @icon="trash-alt"
+                  @action={{fn this.removeInvitee invitee}}
+                />
+              {{/if}}
+            </li>
+          {{/each}}
+        </ul>
+      {{else}}
+        <p class="no-users">
+          {{i18n "discourse_post_event.models.invitee.no_users"}}
+        </p>
+      {{/if}}
+    </ConditionalLoadingSpinner>
+  </:body>
+</DModal>

assets/javascripts/discourse/components/modal/post-event-invitees.js

@@ -0,0 +1,63 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import { debounce } from "discourse-common/utils/decorators";
+import I18n from "discourse-i18n";
+
+export default class PostEventInvitees extends Component {
+  @service store;
+
+  @tracked invitees;
+  @tracked filter;
+  @tracked isLoading = false;
+  @tracked type = "going";
+
+  constructor() {
+    super(...arguments);
+    this._fetchInvitees();
+  }
+
+  get title() {
+    return I18n.t(
+      `discourse_post_event.invitees_modal.${
+        this.args.model.title || "title_invited"
+      }`
+    );
+  }
+
+  @action
+  toggleType(type) {
+    this.type = type;
+    this._fetchInvitees(this.filter);
+  }
+
+  @debounce(250)
+  onFilterChanged() {
+    this._fetchInvitees(this.filter);
+  }
+
+  @action
+  async removeInvitee(invitee) {
+    await invitee.destroyRecord();
+    this._fetchInvitees();
+  }
+
+  async _fetchInvitees(filter) {
+    try {
+      this.isLoading = true;
+      const invitees = await this.store.findAll(
+        "discourse-post-event-invitee",
+        {
+          filter,
+          post_id: this.args.model.event.id,
+          type: this.type,
+        }
+      );
+
+      this.invitees = invitees;
+    } finally {
+      this.isLoading = false;
+    }
+  }
+}

assets/javascripts/discourse/components/toggle-invitees.hbs

@@ -0,0 +1,28 @@
+<div class="invitees-type-filter">
+  <DButton
+    @label="discourse_post_event.models.invitee.status.going"
+    class={{concat-class
+      "btn toggle-going"
+      (if (eq @viewType "going") "btn-danger" "btn-default")
+    }}
+    @action={{fn @toggle "going"}}
+  />
+
+  <DButton
+    @label="discourse_post_event.models.invitee.status.interested"
+    class={{concat-class
+      "btn toggle-interested"
+      (if (eq @viewType "interested") "btn-danger" "btn-default")
+    }}
+    @action={{fn @toggle "interested"}}
+  />
+
+  <DButton
+    @label="discourse_post_event.models.invitee.status.not_going"
+    class={{concat-class
+      "btn toggle-not-going"
+      (if (eq @viewType "not_going") "btn-danger" "btn-default")
+    }}
+    @action={{fn @toggle "not_going"}}
+  />
+</div>

assets/javascripts/discourse/models/discourse-post-event-invitee.js

@@ -3,7 +3,6 @@ import RestModel from "discourse/models/rest";
 export default RestModel.extend({
   init() {
     this._super(...arguments);
-
     this.__type = "discourse-post-event-invitee";
   },
 });

assets/javascripts/discourse/widgets/discourse-post-event.js

@@ -1,5 +1,4 @@
 import EmberObject from "@ember/object";
-import { dasherize } from "@ember/string";
 import { routeAction } from "discourse/helpers/route-action";
 import { exportEntity } from "discourse/lib/export-csv";
 import showModal from "discourse/lib/show-modal";
@@ -8,12 +7,13 @@ import { escapeExpression } from "discourse/lib/utilities";
 import hbs from "discourse/widgets/hbs-compiler";
 import { createWidget } from "discourse/widgets/widget";
 import I18n from "I18n";
+import PostEventInvitees from "../components/modal/post-event-invitees";
 import cleanTitle from "../lib/clean-title";
 import { buildParams, replaceRaw } from "../lib/raw-event-helper";
 
 export default createWidget("discourse-post-event", {
   tagName: "div.discourse-post-event-widget",
-  services: ["dialog"],
+  services: ["dialog", "store", "modal", "currentUser", "siteSettings"],
 
   buildKey: (attrs) => `discourse-post-event-${attrs.id}`,
 
@@ -32,20 +32,17 @@ export default createWidget("discourse-post-event", {
   },
 
   showAllInvitees(params) {
-    const postId = params.postId;
-    const title = params.title || "title_invited";
-    const extraClass = params.extraClass || "invited";
-    const name = "discourse-post-event-invitees";
-
-    this.store.find("discourse-post-event-event", postId).then((eventModel) => {
-      showModal(name, {
-        model: eventModel,
-        title: `discourse_post_event.invitees_modal.${title}`,
-        modalClass: [`${dasherize(name).toLowerCase()}-modal`, extraClass].join(
-          " "
-        ),
+    this.store
+      .find("discourse-post-event-event", params.postId)
+      .then((eventModel) => {
+        this.modal.show(PostEventInvitees, {
+          model: {
+            event: eventModel,
+            title: params.title,
+            extraClass: params.extraClass,
+          },
+        });
       });
-    });
   },
 
   editPostEvent(postId) {