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
GitHub
parent
b98af3bc53
commit
71a8d48d21
|
|
@ -21,6 +21,7 @@
|
|||
@outletArgs={{hash
|
||||
availableBadges=this.availableBadges
|
||||
userBadges=this.userBadges
|
||||
user=this.user
|
||||
}}
|
||||
>
|
||||
<form class="form-horizontal">
|
||||
|
|
|
|||
|
|
@ -1,31 +1,22 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { hash } from "@ember/helper";
|
||||
import { service } from "@ember/service";
|
||||
import PluginOutlet from "discourse/components/plugin-outlet";
|
||||
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 { i18n } from "discourse-i18n";
|
||||
|
||||
export default class SmallUserList extends Component {
|
||||
@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() {
|
||||
let users = this.args.users;
|
||||
|
||||
if (
|
||||
this.args.addSelf &&
|
||||
!users.some((u) => u.username === this.currentUser.username)
|
||||
) {
|
||||
users = users.concat(this.smallUserAtts(this.currentUser));
|
||||
users = users.concat(smallUserAttrs(this.currentUser));
|
||||
}
|
||||
return users;
|
||||
}
|
||||
|
|
@ -39,47 +30,52 @@ export default class SmallUserList extends Component {
|
|||
|
||||
<template>
|
||||
{{#if this.users}}
|
||||
<div class="clearfix small-user-list" ...attributes>
|
||||
<span
|
||||
class="small-user-list-content"
|
||||
aria-label={{@ariaLabel}}
|
||||
role="list"
|
||||
>
|
||||
{{#each this.users key="username" as |user|}}
|
||||
{{#if user.unknown}}
|
||||
<div
|
||||
title={{i18n "post.unknown_user"}}
|
||||
class="unknown"
|
||||
role="listitem"
|
||||
></div>
|
||||
{{else}}
|
||||
<a
|
||||
class="trigger-user-card"
|
||||
data-user-card={{user.username}}
|
||||
title={{user.username}}
|
||||
aria-hidden="false"
|
||||
role="listitem"
|
||||
>
|
||||
{{avatar user.template "tiny"}}
|
||||
</a>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
<PluginOutlet
|
||||
@name="small-user-list-internal"
|
||||
@outletArgs={{hash data=this.args}}
|
||||
>
|
||||
<div class="clearfix small-user-list" ...attributes>
|
||||
<span
|
||||
class="small-user-list-content"
|
||||
aria-label={{@ariaLabel}}
|
||||
role="list"
|
||||
>
|
||||
{{#each this.users key="username" as |user|}}
|
||||
{{#if user.unknown}}
|
||||
<div
|
||||
title={{i18n "post.unknown_user"}}
|
||||
class="unknown"
|
||||
role="listitem"
|
||||
></div>
|
||||
{{else}}
|
||||
<a
|
||||
class="trigger-user-card"
|
||||
data-user-card={{user.username}}
|
||||
title={{user.username}}
|
||||
aria-hidden="false"
|
||||
role="listitem"
|
||||
>
|
||||
{{avatar user.template "tiny"}}
|
||||
</a>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
|
||||
{{#if @description}}
|
||||
{{#if this.postUrl}}
|
||||
<a href={{this.postUrl}}>
|
||||
{{#if @description}}
|
||||
{{#if 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">
|
||||
{{i18n @description count=@count}}
|
||||
</span>
|
||||
</a>
|
||||
{{else}}
|
||||
<span aria-hidden="true" class="list-description">
|
||||
{{i18n @description count=@count}}
|
||||
</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</PluginOutlet>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,4 +14,5 @@ export const VALUE_TRANSFORMERS = Object.freeze([
|
|||
"mentions-class",
|
||||
"more-topics-tabs",
|
||||
"post-menu-buttons",
|
||||
"small-user-attrs",
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
});
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import AdminPostMenu from "discourse/components/admin-post-menu";
|
|||
import DeleteTopicDisallowedModal from "discourse/components/modal/delete-topic-disallowed";
|
||||
import { formattedReminderTime } from "discourse/lib/bookmark";
|
||||
import { recentlyCopied, showAlert } from "discourse/lib/post-action-feedback";
|
||||
import { userPath } from "discourse/lib/url";
|
||||
import { smallUserAttrs } from "discourse/lib/user-list-attrs";
|
||||
import {
|
||||
NO_REMINDER_ICON,
|
||||
WITH_REMINDER_ICON,
|
||||
|
|
@ -55,16 +55,6 @@ function registerButton(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) {
|
||||
let { attrs, state, siteSettings, settings, currentUser } = widget;
|
||||
|
||||
|
|
@ -907,14 +897,13 @@ export default createWidget("post-menu", {
|
|||
|
||||
getWhoLiked() {
|
||||
const { attrs, state } = this;
|
||||
|
||||
return this.store
|
||||
.find("post-action-user", {
|
||||
id: attrs.id,
|
||||
post_action_type_id: LIKE_ACTION,
|
||||
})
|
||||
.then((users) => {
|
||||
state.likedUsers = users.map(smallUserAtts);
|
||||
state.likedUsers = users.map(smallUserAttrs);
|
||||
state.total = users.totalRows;
|
||||
});
|
||||
},
|
||||
|
|
@ -923,7 +912,7 @@ export default createWidget("post-menu", {
|
|||
const { attrs, state } = this;
|
||||
|
||||
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;
|
||||
});
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue