diff --git a/assets/javascripts/discourse/components/discourse-post-event/index.gjs b/assets/javascripts/discourse/components/discourse-post-event/index.gjs index 1c8c9e649..a55e49701 100644 --- a/assets/javascripts/discourse/components/discourse-post-event/index.gjs +++ b/assets/javascripts/discourse/components/discourse-post-event/index.gjs @@ -7,6 +7,7 @@ import concatClass from "discourse/helpers/concat-class"; import replaceEmoji from "discourse/helpers/replace-emoji"; import routeAction from "discourse/helpers/route-action"; import icon from "discourse-common/helpers/d-icon"; +import DTooltip from "float-kit/components/d-tooltip"; import Creator from "./creator"; import Dates from "./dates"; import EventStatus from "./event-status"; @@ -67,6 +68,10 @@ export default class DiscoursePostEvent extends Component { return this.currentUser && this.args.event.can_act_on_discourse_post_event; } + get eventStatsGoingInterestedCount() { + return this.args.event.stats.going + this.args.event.stats.interested; + } + diff --git a/assets/javascripts/discourse/components/discourse-post-event/invitees.gjs b/assets/javascripts/discourse/components/discourse-post-event/invitees.gjs index a3bb470b3..a5758140a 100644 --- a/assets/javascripts/discourse/components/discourse-post-event/invitees.gjs +++ b/assets/javascripts/discourse/components/discourse-post-event/invitees.gjs @@ -1,7 +1,10 @@ import Component from "@glimmer/component"; +import { tracked } from "@glimmer/tracking"; import { action } from "@ember/object"; import { service } from "@ember/service"; +import ConditionalLoadingSpinner from "discourse/components/conditional-loading-spinner"; import DButton from "discourse/components/d-button"; +import icon from "discourse-common/helpers/d-icon"; import i18n from "discourse-common/helpers/i18n"; import PostEventInvitees from "../modal/post-event-invitees"; import Invitee from "./invitee"; @@ -9,6 +12,15 @@ import Invitee from "./invitee"; export default class DiscoursePostEventInvitees extends Component { @service modal; @service siteSettings; + @service discoursePostEventApi; + + @tracked isLoading = false; + @tracked inviteesList = {}; + + constructor() { + super(...arguments); + this._fetchInvitees(); + } @action showAllInvitees() { @@ -21,60 +33,79 @@ export default class DiscoursePostEventInvitees extends Component { }); } - get statsInfo() { - const stats = []; - const visibleStats = this.siteSettings.event_participation_buttons - .split("|") - .filter(Boolean); - - if (this.args.event.isPrivate) { - visibleStats.push("invited"); - } - - visibleStats.forEach((button) => { - const localeKey = button.replace(" ", "_"); - if (button === "not_going") { - button = "notGoing"; - } + async _fetchInvitees() { + try { + this.isLoading = true; - const count = this.args.event.stats[button] || 0; + const [going, interested, notGoing] = await Promise.all([ + this.discoursePostEventApi.listEventInvitees(this.args.event, { + type: "going", + }), + this.discoursePostEventApi.listEventInvitees(this.args.event, { + type: "interested", + }), + this.discoursePostEventApi.listEventInvitees(this.args.event, { + type: "not_going", + }), + ]); - const label = i18n( - `discourse_post_event.models.invitee.status.${localeKey}_count`, - { count } - ); - - stats.push({ - class: `event-status-${localeKey}`, - label, - }); - }); - - return stats; + this.inviteesList["going"] = going; + this.inviteesList["interested"] = interested; + this.inviteesList["not_going"] = notGoing; + } catch (error) { + console.error("Error fetching invitees:", error); + } finally { + this.isLoading = false; + } } } diff --git a/assets/stylesheets/common/discourse-post-event.scss b/assets/stylesheets/common/discourse-post-event.scss index 4bdee323e..6a32f5f0c 100644 --- a/assets/stylesheets/common/discourse-post-event.scss +++ b/assets/stylesheets/common/discourse-post-event.scss @@ -6,6 +6,10 @@ $interested: #fb985d; .event__section { padding: 0.5em 1em; + &.event-actions svg { + padding-right: 0.25em; + } + &:not(:last-child) { border-bottom: 1px solid var(--primary-low); } @@ -70,6 +74,7 @@ $interested: #fb985d; align-items: center; padding: 0 1em; height: 75px; + border-bottom: 1px solid var(--primary-low); .more-dropdown { margin-left: auto; @@ -176,16 +181,21 @@ $interested: #fb985d; height: 60px; padding: 0 1em; + .fk-d-tooltip__trigger-container { + display: flex; + align-items: center; + } + .event-status { margin: 0; - &.status-going .going-button .d-icon { + &.status-going .d-icon:not(.d-icon-angle-down) { color: var(--success); } - &.status-interested .interested-button .d-icon { + &.status-interested .d-icon:not(.d-icon-angle-down) { color: $interested; } - &.status-not_going .not-going-button .d-icon { + &.status-not_going .d-icon:not(.d-icon-angle-down) { color: var(--danger); } } @@ -337,3 +347,60 @@ $interested: #fb985d; } } } + +.event__section.event-invitees { + .event-invitees-avatars { + list-style: none; + margin: 0; + display: flex; + flex-direction: column; + &-item { + display: flex; + align-items: center; + .d-icon { + margin-right: 0.5em; + } + .d-icon-star { + color: #fb985d; + } + .d-icon-check { + color: var(--success); + } + .d-icon-times { + color: var(--danger); + } + &:not(:last-child) { + border-bottom: 1px solid var(--primary-low); + } + padding: 0.25em 0; + &:first-of-type { + padding-top: 0; + } + &:last-of-type { + padding-bottom: 0; + } + .event-invitees-count { + margin-right: 0.5em; + font-size: var(--font-down-1); + color: var(--primary-medium); + } + } + &-sublist { + list-style: none; + display: grid; + grid-column-gap: 0.25em; + grid-row-gap: 0.25em; + grid-template-rows: 22.5px; + grid-template-columns: repeat(7, 22.5px); + } + } + .event-invitee { + width: 22px; + height: 22px; + } + .topic-invitee-avatar img { + width: 100%; + height: 100%; + } + display: flex; +} diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 5de542ba7..23096cf97 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -389,6 +389,7 @@ en: invitee: no_users: "No users found" status: + not_set: "RSVP" unknown: "Not interested" going: "Going" not_going: "Not Going"