mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-27 00:42:45 +08:00
This PR makes the following key changes to the load-more component: * Updating to a Glimmer component * Changing from an eyeline/scrolling-based mechanism to an IntersectionObserver to determine when to load * Keeping track of a single invisible sentinel element to help trigger the loadMore action instead of having to find and track the last item of the collection upon every load * The component can now be used without wrapping around some content to be yielded - the intent is to use this for cases like [DiscoveryTopicsList](f0057c7353/app/assets/javascripts/discourse/app/components/discovery/topics.gjs (L222)) where we might want more precise placement of the sentinel element. * Added utility toggle functions to control observer behaviour in this class for testing We will replace the load-more mixin in DiscoveryTopicsList in another PR. https://github.com/user-attachments/assets/50d9763f-b5f8-40f6-8630-41bdf107baf7 ### Technical Considerations 1. Keeping track of a single sentinel element simplifies the logic greatly and is also more robust to changes in the collection that's being loaded. (ref: a [previous commit](https://github.com/discourse/discourse/pull/32285/commits/2279519081eef9649864453c90d72dbb2bd8970c) that was following the previous approach of tracking specifically the last item of the loaded collection); this also sidesteps odd edge cases like if the tracked element is larger than the entire viewport. 2. Using [isIntersecting](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry/isIntersecting) instead of calculating manually whether the element is in the viewport is also less flaky - I ran into issues with the boundingClientRect inconsistently being calculated as outside the viewport on different sized screens. 3. We need to properly bind `loadMore` functions with the action decorator, otherwise the way we pass the loadMore callbacks through to the observe-intersection modifier results in attempting to call it on the loadMore component context instead. I've done this for all such functions except for the one in [`category-list`](0ed4b09527/app/assets/javascripts/discourse/app/models/category-list.js (L117)) which uses `@bind` that should be equivalent in terms of binding to the correct `this`.
165 lines
6 KiB
Text
Vendored
165 lines
6 KiB
Text
Vendored
import { fn } from "@ember/helper";
|
|
import { LinkTo } from "@ember/routing";
|
|
import RouteTemplate from "ember-route-template";
|
|
import { gt } from "truth-helpers";
|
|
import ConditionalLoadingSpinner from "discourse/components/conditional-loading-spinner";
|
|
import LoadMore from "discourse/components/load-more";
|
|
import TextField from "discourse/components/text-field";
|
|
import avatar from "discourse/helpers/avatar";
|
|
import icon from "discourse/helpers/d-icon";
|
|
import formatDate from "discourse/helpers/format-date";
|
|
import slice from "discourse/helpers/slice";
|
|
import { i18n } from "discourse-i18n";
|
|
import DTooltip from "float-kit/components/d-tooltip";
|
|
|
|
export default RouteTemplate(
|
|
<template>
|
|
<LoadMore @action={{@controller.loadMore}}>
|
|
<table class="table email-list">
|
|
<thead>
|
|
<tr>
|
|
<th>{{i18n "admin.email.sent_at"}}</th>
|
|
<th>{{i18n "admin.email.user"}}</th>
|
|
<th>{{i18n "admin.email.to_address"}}</th>
|
|
<th>{{i18n "admin.email.email_type"}}</th>
|
|
<th>{{i18n "admin.email.reply_key"}}</th>
|
|
<th>{{i18n "admin.email.post_link_with_smtp"}}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="filters">
|
|
<td>{{i18n "admin.email.logs.filters.title"}}</td>
|
|
<td>
|
|
<TextField
|
|
@value={{@controller.filter.user}}
|
|
@placeholderKey="admin.email.logs.filters.user_placeholder"
|
|
/></td>
|
|
<td>
|
|
<TextField
|
|
@value={{@controller.filter.address}}
|
|
@placeholderKey="admin.email.logs.filters.address_placeholder"
|
|
/></td>
|
|
<td>
|
|
<TextField
|
|
@value={{@controller.filter.type}}
|
|
@placeholderKey="admin.email.logs.filters.type_placeholder"
|
|
/></td>
|
|
<td>
|
|
<TextField
|
|
@value={{@controller.filter.reply_key}}
|
|
@placeholderKey="admin.email.logs.filters.reply_key_placeholder"
|
|
/></td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
{{#each @controller.model as |l|}}
|
|
<tr class="sent-email-item">
|
|
<td class="sent-email-date">{{formatDate l.created_at}}</td>
|
|
<td class="sent-email-username">
|
|
{{#if l.user}}
|
|
<LinkTo @route="adminUser" @model={{l.user}}>{{avatar
|
|
l.user
|
|
imageSize="tiny"
|
|
}}</LinkTo>
|
|
<LinkTo
|
|
@route="adminUser"
|
|
@model={{l.user}}
|
|
>{{l.user.username}}</LinkTo>
|
|
{{else}}
|
|
—
|
|
{{/if}}
|
|
</td>
|
|
<td class="sent-email-address">
|
|
{{#if l.bounced}}{{icon
|
|
"arrow-rotate-right"
|
|
title="admin.email.bounced"
|
|
}}{{/if}}
|
|
<p><a
|
|
href="mailto:{{l.to_address}}"
|
|
title="TO"
|
|
>{{l.to_address}}</a></p>
|
|
{{#if l.cc_addresses}}
|
|
{{#if
|
|
(gt
|
|
l.cc_addresses.length
|
|
@controller.ccAddressDisplayThreshold
|
|
)
|
|
}}
|
|
{{#each
|
|
(slice
|
|
0
|
|
@controller.ccAddressDisplayThreshold
|
|
(fn @controller.sortWithAddressFilter l.cc_addresses)
|
|
)
|
|
as |cc|
|
|
}}
|
|
<p><a href="mailto:{{cc}}" title="CC">{{cc}}</a></p>
|
|
{{/each}}
|
|
<DTooltip
|
|
@placement="right-start"
|
|
@arrow={{true}}
|
|
@identifier="email-log-cc-addresses"
|
|
@interactive={{true}}
|
|
>
|
|
<:trigger>
|
|
{{i18n "admin.email.logs.email_addresses.see_more"}}
|
|
</:trigger>
|
|
<:content>
|
|
<ul>
|
|
{{#each
|
|
(slice
|
|
@controller.ccAddressDisplayThreshold
|
|
l.cc_addresses
|
|
)
|
|
as |cc|
|
|
}}
|
|
<li>
|
|
<span>
|
|
<a href="mailto:{{cc}}" title="CC">{{cc}}</a>
|
|
</span>
|
|
</li>
|
|
{{/each}}
|
|
</ul>
|
|
</:content>
|
|
</DTooltip>
|
|
|
|
{{else}}
|
|
{{#each l.cc_addresses as |cc|}}
|
|
<p><a href="mailto:{{cc}}" title="CC">{{cc}}</a></p>
|
|
{{/each}}
|
|
{{/if}}
|
|
{{/if}}
|
|
</td>
|
|
<td class="sent-email-type">{{l.email_type}}</td>
|
|
<td class="sent-email-reply-key">
|
|
<span
|
|
title={{l.reply_key}}
|
|
class="reply-key"
|
|
>{{l.reply_key}}</span>
|
|
</td>
|
|
<td class="sent-email-post-link-with-smtp-response">
|
|
{{#if l.post_url}}
|
|
<a href={{l.post_url}}>
|
|
{{l.post_description}}
|
|
</a>
|
|
{{i18n "admin.email.logs.post_id" post_id=l.post_id}}
|
|
<br />
|
|
/{{/if}}
|
|
<code
|
|
title={{l.smtp_transaction_response}}
|
|
>{{l.smtp_transaction_response}}</code>
|
|
</td>
|
|
</tr>
|
|
{{else}}
|
|
{{#unless @controller.loading}}
|
|
<tr>
|
|
<td colspan="5">{{i18n "admin.email.logs.none"}}</td></tr>
|
|
{{/unless}}
|
|
{{/each}}
|
|
</tbody>
|
|
</table>
|
|
</LoadMore>
|
|
|
|
<ConditionalLoadingSpinner @condition={{@controller.loading}} />
|
|
</template>
|
|
);
|