UX: Add tabs to filter between different types of RSVPed guests (#174)

UX: Add tabs to filter between different types of RSVPed guests (#174)

  • UX: Adding tabs to invitees modal

Co-authored-by: Jarek Radosz jradosz@gmail.com

diff --git a/app/controllers/discourse_post_event/invitees_controller.rb b/app/controllers/discourse_post_event/invitees_controller.rb
index 064507f..9d1f693 100644
--- a/app/controllers/discourse_post_event/invitees_controller.rb
+++ b/app/controllers/discourse_post_event/invitees_controller.rb
@@ -13,6 +13,10 @@ module DiscoursePostEvent
           .where('LOWER(users.username) LIKE :filter', filter: "%#{params[:filter].downcase}%")
       end
 
+      if params[:type]
+        event_invitees = event_invitees.with_status(params[:type].to_sym)
+      end
+
       render json: ActiveModel::ArraySerializer.new(
         event_invitees.order([:status, :user_id]).limit(200),
         each_serializer: InviteeSerializer
diff --git a/assets/javascripts/discourse/components/toggle-invitees-modal.js.es6 b/assets/javascripts/discourse/components/toggle-invitees-modal.js.es6
new file mode 100644
index 0000000..0f2f7cc
--- /dev/null
+++ b/assets/javascripts/discourse/components/toggle-invitees-modal.js.es6
@@ -0,0 +1,23 @@
+import Component from "@ember/component";
+import { readOnly } from "@ember/object/computed";
+import discourseComputed from "discourse-common/utils/decorators";
+
+export default Component.extend({
+  tagName: "",
+  viewingType: readOnly("modal.type"),
+
+  @discourseComputed("viewingType")
+  isGoing(viewingType) {
+    return viewingType === "going" ? " btn-danger" : " btn-default";
+  },
+
+  @discourseComputed("viewingType")
+  isInterested(viewingType) {
+    return viewingType === "interested" ? " btn-danger" : " btn-default";
+  },
+
+  @discourseComputed("viewingType")
+  isNotGoing(viewingType) {
+    return viewingType === "not_going" ? " btn-danger" : " btn-default";
+  },
+});
diff --git a/assets/javascripts/discourse/controllers/discourse-post-event-invitees.js.es6 b/assets/javascripts/discourse/controllers/discourse-post-event-invitees.js.es6
index 63543a6..2411fd0 100644
--- a/assets/javascripts/discourse/controllers/discourse-post-event-invitees.js.es6
+++ b/assets/javascripts/discourse/controllers/discourse-post-event-invitees.js.es6
@@ -7,10 +7,20 @@ export default Controller.extend(ModalFunctionality, {
   invitees: null,
   filter: null,
   isLoading: false,
+  type: "going",
 
   onShow() {
     this._fetchInvitees();
   },
+  @action
+  toggleViewingFilter(filter) {
+    this.onFilterChanged(filter);
+  },
+  @action
+  toggleType(type) {
+    this.set("type", type);
+    this._fetchInvitees(this.filter);
+  },
 
   @action
   onFilterChanged(filter) {
@@ -21,7 +31,7 @@ export default Controller.extend(ModalFunctionality, {
       debounceFunc = require("discourse-common/lib/debounce").default;
     } catch (_) {}
 
-    debounceFunc(this, this._fetchInvitees, filter, 250);
+    debounceFunc(this, this._fetchInvitees, filter, this.type, 250);
   },
 
   @action
@@ -36,6 +46,7 @@ export default Controller.extend(ModalFunctionality, {
       .findAll("discourse-post-event-invitee", {
         filter,
         post_id: this.model.id,
+        type: this.type,
       })
       .then((invitees) => this.set("invitees", invitees))
       .finally(() => this.set("isLoading", false));
diff --git a/assets/javascripts/discourse/templates/components/toggle-invitees-modal.hbs b/assets/javascripts/discourse/templates/components/toggle-invitees-modal.hbs
new file mode 100644
index 0000000..e8ce987
--- /dev/null
+++ b/assets/javascripts/discourse/templates/components/toggle-invitees-modal.hbs
@@ -0,0 +1,22 @@
+<div class="invitees-type-filter">
+  {{d-button
+    label="discourse_post_event.models.invitee.status.going"
+    class=(concat "btn toggle-going" isGoing)
+    action=toggle
+    actionParam="going"
+  }}
+
+  {{d-button
+    label="discourse_post_event.models.invitee.status.interested"
+    class=(concat "btn toggle-interested" isInterested)
+    action=toggle
+    actionParam="interested"
+  }}
+
+  {{d-button
+    label="discourse_post_event.models.invitee.status.not_going"
+    class=(concat "btn toggle-not-going" isNotGoing)
+    action=toggle
+    actionParam="not_going"
+  }}
+</div>
\ No newline at end of file
diff --git a/assets/javascripts/discourse/templates/modal/discourse-post-event-invitees.hbs b/assets/javascripts/discourse/templates/modal/discourse-post-event-invitees.hbs
index 1a28e98..5a4d26b 100644
--- a/assets/javascripts/discourse/templates/modal/discourse-post-event-invitees.hbs
+++ b/assets/javascripts/discourse/templates/modal/discourse-post-event-invitees.hbs
@@ -5,31 +5,37 @@
     class="filter"
     placeholderKey="discourse_post_event.invitees_modal.filter_placeholder"
   }}
-
+  {{toggle-invitees-modal modal=this toggle=(action "toggleType")}}
   {{#conditional-loading-spinner condition=isLoading}}
-    <ul class="invitees">
-      {{#each invitees as |invitee|}}
-        <li class="invitee">
-          {{render-invitee invitee}}
+    {{#if invitees}}
+      <ul class="invitees">
+        {{#each invitees as |invitee|}}
+          <li class="invitee">
+            {{render-invitee invitee}}
 
-          {{#if invitee.status}}
-            <span class="status {{invitee.status}}">
-              {{i18n (concat "discourse_post_event.models.invitee.status." invitee.status)}}
-            </span>
-          {{else}}
-            <span class="status">
-              -
-            </span>
-          {{/if}}
+            {{#if invitee.status}}
+              <span class="status {{invitee.status}}">
+                {{i18n (concat "discourse_post_event.models.invitee.status." invitee.status)}}
+              </span>
+            {{else}}
+              <span class="status">
+                -
+              </span>
+            {{/if}}
 
-          {{#if model.can_act_on_discourse_post_event}}
-            {{d-button
-              icon="trash-alt"
-              action=(action "removeInvitee" invitee)
-            }}
-          {{/if}}
-        </li>
-      {{/each}}
-    </ul>
+            {{#if model.can_act_on_discourse_post_event}}
+              {{d-button
+                icon="trash-alt"
+                action=(action "removeInvitee" invitee)
+              }}
+            {{/if}}
+          </li>
+        {{/each}}
+      </ul>
+    {{else}}
+      <p class="no-users">
+        {{i18n "discourse_post_event.models.invitee.no_users"}}
+      </p>
+    {{/if}}
   {{/conditional-loading-spinner}}
 {{/d-modal-body}}
diff --git a/assets/stylesheets/common/discourse-post-event-invitees.scss b/assets/stylesheets/common/discourse-post-event-invitees.scss
index 1402675..834f513 100644
--- a/assets/stylesheets/common/discourse-post-event-invitees.scss
+++ b/assets/stylesheets/common/discourse-post-event-invitees.scss
@@ -1,10 +1,35 @@
 .discourse-post-event-invitees-modal {
+  .modal-body {
+    padding: 0;
+  }
+  .modal-inner-container {
+    min-width: 350px;
+  }
+  .loading-container {
+    height: 40vh;
+    overflow-y: scroll;
+    padding: 0 1em 9px 1em;
+    .no-users {
+      text-align: center;
+      font-size: var(--font-up-1);
+    }
+  }
+  .invitees-type-filter {
+    margin-bottom: 9px;
+    display: flex;
+    .btn {
+      width: calc(100% / 3);
+      margin: 0;
+      border-radius: 0px;
+      padding: 0.75em 0em;
+    }
+  }
   .filter {
-    width: 100%;
+    width: calc(100% - 2em);
+    margin: 1em;
   }
   .invitees {
     display: flex;
-    padding: 0;
     margin: 0;
     flex-direction: column;
 
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index fe0e805..fe7be1a 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -288,6 +288,7 @@ en:
         ends_in_duration: "Ends %{duration}"
       models:
         invitee:
+          no_users: "There are no users of this type."
           status:
             unknown: "Not interested"
             going: "Going"
diff --git a/spec/requests/invitees_controller_spec.rb b/spec/requests/invitees_controller_spec.rb
index ddb707c..3eb2789 100644

[... diff too long, it was truncated ...]

GitHub sha: 8bd20e663654d79c73fe661771239fea2e69b91f

This commit appears in #174 which was approved by CvX. It was merged by jordanvidrine.