Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: add outlet wrapper for small user list (#29763) 

* DEV: add outlet wrapper for small user list

* DEV: use value transformer to extend small user attrs function

* Update app/assets/javascripts/discourse/app/components/small-user-list.gjs

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

---------

Co-authored-by: Jarek Radosz <jradosz@gmail.com>
This commit is contained in:
Amanda Alves Branquinho 2024-11-20 19:22:02 -03:00 committed by GitHub
parent b98af3bc53
commit 71a8d48d21
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 66 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/admin/addon/templates/user-badges.hbs
View File

@ -21,6 +21,7 @@
@outletArgs={{hash @outletArgs={{hash
availableBadges=this.availableBadges availableBadges=this.availableBadges
userBadges=this.userBadges userBadges=this.userBadges
user=this.user
}} }}
> >
<form class="form-horizontal"> <form class="form-horizontal">

94
app/assets/javascripts/discourse/app/components/small-user-list.gjs
View File

@ -1,31 +1,22 @@
import Component from "@glimmer/component"; import Component from "@glimmer/component";
import { hash } from "@ember/helper";
import { service } from "@ember/service"; import { service } from "@ember/service";
import PluginOutlet from "discourse/components/plugin-outlet";
import avatar from "discourse/helpers/bound-avatar-template"; import avatar from "discourse/helpers/bound-avatar-template";
import { userPath } from "discourse/lib/url"; import { smallUserAttrs } from "discourse/lib/user-list-attrs";
import getURL from "discourse-common/lib/get-url"; import getURL from "discourse-common/lib/get-url";
import { i18n } from "discourse-i18n"; import { i18n } from "discourse-i18n";
export default class SmallUserList extends Component { export default class SmallUserList extends Component {
@service currentUser; @service currentUser;
smallUserAtts(user) {
return {
template: user.avatar_template,
username: user.username,
post_url: user.post_url,
url: userPath(user.username_lower),
unknown: user.unknown,
};
}
get users() { get users() {
let users = this.args.users; let users = this.args.users;
if ( if (
this.args.addSelf && this.args.addSelf &&
!users.some((u) => u.username === this.currentUser.username) !users.some((u) => u.username === this.currentUser.username)
) { ) {
users = users.concat(this.smallUserAtts(this.currentUser)); users = users.concat(smallUserAttrs(this.currentUser));
} }
return users; return users;
} }
@ -39,47 +30,52 @@ export default class SmallUserList extends Component {
<template> <template>
{{#if this.users}} {{#if this.users}}
<div class="clearfix small-user-list" ...attributes> <PluginOutlet
<span @name="small-user-list-internal"
class="small-user-list-content" @outletArgs={{hash data=this.args}}
aria-label={{@ariaLabel}} >
role="list" <div class="clearfix small-user-list" ...attributes>
> <span
{{#each this.users key="username" as |user|}} class="small-user-list-content"
{{#if user.unknown}} aria-label={{@ariaLabel}}
<div role="list"
title={{i18n "post.unknown_user"}} >
class="unknown" {{#each this.users key="username" as |user|}}
role="listitem" {{#if user.unknown}}
></div> <div
{{else}} title={{i18n "post.unknown_user"}}
<a class="unknown"
class="trigger-user-card" role="listitem"
data-user-card={{user.username}} ></div>
title={{user.username}} {{else}}
aria-hidden="false" <a
role="listitem" class="trigger-user-card"
> data-user-card={{user.username}}
{{avatar user.template "tiny"}} title={{user.username}}
</a> aria-hidden="false"
{{/if}} role="listitem"
{{/each}} >
{{avatar user.template "tiny"}}
</a>
{{/if}}
{{/each}}
{{#if @description}} {{#if @description}}
{{#if this.postUrl}} {{#if this.postUrl}}
<a href={{this.postUrl}}> <a href={{this.postUrl}}>
<span aria-hidden="true" class="list-description">
{{i18n @description count=@count}}
</span>
</a>
{{else}}
<span aria-hidden="true" class="list-description"> <span aria-hidden="true" class="list-description">
{{i18n @description count=@count}} {{i18n @description count=@count}}
</span> </span>
</a> {{/if}}
{{else}}
<span aria-hidden="true" class="list-description">
{{i18n @description count=@count}}
</span>
{{/if}} {{/if}}
{{/if}} </span>
</span> </div>
</div> </PluginOutlet>
{{/if}} {{/if}}
</template> </template>
} }

1
app/assets/javascripts/discourse/app/lib/transformer/registry.js
View File

@ -14,4 +14,5 @@ export const VALUE_TRANSFORMERS = Object.freeze([
"mentions-class", "mentions-class",
"more-topics-tabs", "more-topics-tabs",
"post-menu-buttons", "post-menu-buttons",
"small-user-attrs",
]); ]);

16
app/assets/javascripts/discourse/app/lib/user-list-attrs.js Normal file
View File

@ -0,0 +1,16 @@
import { applyValueTransformer } from "discourse/lib/transformer";
import { userPath } from "discourse/lib/url";
export function smallUserAttrs(user) {
const defaultAttrs = {
template: user.avatar_template,
username: user.username,
post_url: user.post_url,
url: userPath(user.username_lower),
unknown: user.unknown,
};
return applyValueTransformer("small-user-attrs", defaultAttrs, {
user,
});
}

17
app/assets/javascripts/discourse/app/widgets/post-menu.js
View File

@ -6,7 +6,7 @@ import AdminPostMenu from "discourse/components/admin-post-menu";
import DeleteTopicDisallowedModal from "discourse/components/modal/delete-topic-disallowed"; import DeleteTopicDisallowedModal from "discourse/components/modal/delete-topic-disallowed";
import { formattedReminderTime } from "discourse/lib/bookmark"; import { formattedReminderTime } from "discourse/lib/bookmark";
import { recentlyCopied, showAlert } from "discourse/lib/post-action-feedback"; import { recentlyCopied, showAlert } from "discourse/lib/post-action-feedback";
import { userPath } from "discourse/lib/url"; import { smallUserAttrs } from "discourse/lib/user-list-attrs";
import { import {
NO_REMINDER_ICON, NO_REMINDER_ICON,
WITH_REMINDER_ICON, WITH_REMINDER_ICON,
@ -55,16 +55,6 @@ function registerButton(name, builder) {
_builders[name] = builder; _builders[name] = builder;
} }
function smallUserAtts(user) {
return {
template: user.avatar_template,
username: user.username,
post_url: user.post_url,
url: userPath(user.username_lower),
unknown: user.unknown,
};
}
export function buildButton(name, widget) { export function buildButton(name, widget) {
let { attrs, state, siteSettings, settings, currentUser } = widget; let { attrs, state, siteSettings, settings, currentUser } = widget;
@ -907,14 +897,13 @@ export default createWidget("post-menu", {
getWhoLiked() { getWhoLiked() {
const { attrs, state } = this; const { attrs, state } = this;
return this.store return this.store
.find("post-action-user", { .find("post-action-user", {
id: attrs.id, id: attrs.id,
post_action_type_id: LIKE_ACTION, post_action_type_id: LIKE_ACTION,
}) })
.then((users) => { .then((users) => {
state.likedUsers = users.map(smallUserAtts); state.likedUsers = users.map(smallUserAttrs);
state.total = users.totalRows; state.total = users.totalRows;
}); });
}, },
@ -923,7 +912,7 @@ export default createWidget("post-menu", {
const { attrs, state } = this; const { attrs, state } = this;
return this.store.find("post-reader", { id: attrs.id }).then((users) => { return this.store.find("post-reader", { id: attrs.id }).then((users) => {
state.readers = users.map(smallUserAtts); state.readers = users.map(smallUserAttrs);
state.totalReaders = users.totalRows; state.totalReaders = users.totalRows;
}); });
}, },