Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UX: Render invitees count #663

Merged
merged 7 commits into from
Dec 5, 2024
Merged

UX: Render invitees count #663

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d3230e3
UX: Render invitees count
jordanvidrine Dec 5, 2024
836ec30
lint
jordanvidrine Dec 5, 2024
60cd20e
lint
jordanvidrine Dec 5, 2024
72fabe0
lint
jordanvidrine Dec 5, 2024
8cf198f
remove method
jordanvidrine Dec 5, 2024
7aa2e26
refactor
jordanvidrine Dec 5, 2024
ca5f407
lint
jordanvidrine Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 13 additions & 53 deletions assets/javascripts/discourse/components/discourse-post-event/invitees.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,38 @@
import Component from "@glimmer/component";
import { action } from "@ember/object";
import { service } from "@ember/service";
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";

export default class DiscoursePostEventInvitees extends Component {
@service modal;
@service siteSettings;

@action
showAllInvitees() {
this.modal.show(PostEventInvitees, {
model: {
event: this.args.event,
title: this.args.event.title,
extraClass: this.args.event.extraClass,
},
});
get hasAttendees() {
return this.args.event.stats.going > 0;
}

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";
}

const count = this.args.event.stats[button] || 0;

const label = i18n(
`discourse_post_event.models.invitee.status.${localeKey}_count`,
{ count }
);
return this.args.event.stats.going;
}

stats.push({
class: `event-status-${localeKey}`,
label,
});
get inviteesTitle() {
return i18n("discourse_post_event.models.invitee.status.going_count", {
count: this.args.event.stats.going,
});

return stats;
}

<template>
{{#unless @event.minimal}}
{{#if @event.shouldDisplayInvitees}}
<section class="event__section event-invitees">
<div class="header">
<div class="event-invitees-status">
{{#each this.statsInfo as |info|}}
<span class={{info.class}}>{{info.label}}</span>
{{/each}}
</div>

<DButton
class="show-all btn-small"
@label="discourse_post_event.show_all"
@action={{this.showAllInvitees}}
/>
Comment on lines -68 to -72
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this removal was intentional then showAllInvitees method should be deleted too

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes this was intentional, this button is now avail in the drop down ellipsis menu.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will remove the method.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

now the component can be reduced to a template-only component, both service injections are unused and the properties could be inlined in the template 😃

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would this still remain a gjs file? and only include while still using the imports like: 

import icon from "discourse-common/helpers/d-icon";
import i18n from "discourse-common/helpers/i18n";
import Invitee from "./invitee";

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yup - still a gjs but without a js class:

const DiscoursePostEventInvitees = <template>
  ...
</template>

export default DiscoursePostEventInvitees;

(btw, the new i18n import is: import { i18n } from "discourse-i18n";)

</div>
<div class="event-invitees-avatars-container">
{{icon "users"}}
<div class="event-invitees-icon" title={{this.inviteesTitle}}>
{{icon "users"}}
{{#if this.hasAttendees}}
<span class="going">{{this.statsInfo}}</span>
{{/if}}
</div>
<ul class="event-invitees-avatars">
{{#each @event.sampleInvitees as |invitee|}}
<Invitee @invitee={{invitee}} />
Expand Down
16 changes: 16 additions & 0 deletions assets/stylesheets/common/discourse-post-event.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -401,4 +401,20 @@ $show-interested: inherit;
font-weight: 400;
grid-column-start: 2;
}
.event-invitees-icon {
position: relative;
display: flex;
}
.event-invitees-icon .going {
font-size: var(--font-down-3);
position: absolute;
right: 4px;
bottom: -8px;
background: var(--secondary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-medium);
}
}
Loading