mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-26 21:18:34 +08:00
7b062e24de
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`.
87 lines
3 KiB
Text
Vendored
87 lines
3 KiB
Text
Vendored
import { LinkTo } from "@ember/routing";
|
|
import RouteTemplate from "ember-route-template";
|
|
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 formatDate from "discourse/helpers/format-date";
|
|
import { i18n } from "discourse-i18n";
|
|
|
|
export default RouteTemplate(
|
|
<template>
|
|
<LoadMore @action={{@controller.loadMore}}>
|
|
<table class="table email-list">
|
|
<thead>
|
|
<tr>
|
|
<th>{{i18n "admin.email.time"}}</th>
|
|
<th>{{i18n "admin.email.incoming_emails.from_address"}}</th>
|
|
<th>{{i18n "admin.email.incoming_emails.to_addresses"}}</th>
|
|
<th>{{i18n "admin.email.incoming_emails.subject"}}</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr class="filters">
|
|
<td>{{i18n "admin.email.logs.filters.title"}}</td>
|
|
<td>
|
|
<TextField
|
|
@value={{@controller.filter.from}}
|
|
@placeholderKey="admin.email.incoming_emails.filters.from_placeholder"
|
|
/></td>
|
|
<td>
|
|
<TextField
|
|
@value={{@controller.filter.to}}
|
|
@placeholderKey="admin.email.incoming_emails.filters.to_placeholder"
|
|
/></td>
|
|
<td>
|
|
<TextField
|
|
@value={{@controller.filter.subject}}
|
|
@placeholderKey="admin.email.incoming_emails.filters.subject_placeholder"
|
|
/></td>
|
|
</tr>
|
|
|
|
{{#each @controller.model as |email|}}
|
|
<tr>
|
|
<td class="time">{{formatDate email.created_at}}</td>
|
|
<td class="username">
|
|
<div>
|
|
{{#if email.user}}
|
|
<LinkTo @route="adminUser" @model={{email.user}}>
|
|
{{avatar email.user imageSize="tiny"}}
|
|
{{email.from_address}}
|
|
</LinkTo>
|
|
{{else}}
|
|
—
|
|
{{/if}}
|
|
</div>
|
|
</td>
|
|
<td class="addresses">
|
|
{{#each email.to_addresses as |to|}}
|
|
<p><a href="mailto:{{to}}" title="TO">{{to}}</a></p>
|
|
{{/each}}
|
|
{{#each email.cc_addresses as |cc|}}
|
|
<p><a href="mailto:{{cc}}" title="CC">{{cc}}</a></p>
|
|
{{/each}}
|
|
</td>
|
|
<td>
|
|
{{#if email.post_url}}
|
|
<a href={{email.post_url}}>{{email.subject}}</a>
|
|
{{else}}
|
|
{{email.subject}}
|
|
{{/if}}
|
|
</td>
|
|
</tr>
|
|
{{else}}
|
|
<tr>
|
|
<td colspan="4">
|
|
{{i18n "admin.email.incoming_emails.none"}}
|
|
</td>
|
|
</tr>
|
|
{{/each}}
|
|
</tbody>
|
|
</table>
|
|
</LoadMore>
|
|
|
|
<ConditionalLoadingSpinner @condition={{@controller.loading}} />
|
|
</template>
|
|
);
|
