mirror of
https://github.com/Sea-Haven-Industries/shoc-frontend-new.git
synced 2026-09-30 06:53:12 +00:00
Sort all activity tabs oldest-first with newest at bottom
- CommentTimeline and AuditTimeline both sort by date ascending - Auto-scroll to bottom on all tabs for consistency
This commit is contained in:
parent
287839d089
commit
049934478c
1 changed files with 18 additions and 5 deletions
|
|
@ -16,19 +16,22 @@ function formatDateTime(value) {
|
|||
|
||||
function CommentTimeline({ comments }) {
|
||||
const bottomRef = useRef(null);
|
||||
const sorted = [...(comments || [])].sort((a, b) =>
|
||||
new Date(a.createdDate) - new Date(b.createdDate)
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
bottomRef.current?.scrollIntoView();
|
||||
}, [comments?.length]);
|
||||
}, [sorted.length]);
|
||||
|
||||
if (!comments || comments.length === 0) {
|
||||
if (!sorted.length) {
|
||||
return <div className="woTabScroll"><p className="woNoComments">No comments yet.</p></div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="woTabScroll">
|
||||
<div className="woTimeline">
|
||||
{comments.map((c) => (
|
||||
{sorted.map((c) => (
|
||||
<div key={c.id} className="woTimelineItem">
|
||||
<div className="woTimelineHeader">
|
||||
<span className="woTimelineAuthor">{c.userName || c.commenter || "System"}</span>
|
||||
|
|
@ -46,14 +49,23 @@ function CommentTimeline({ comments }) {
|
|||
}
|
||||
|
||||
function AuditTimeline({ entries }) {
|
||||
if (!entries || entries.length === 0) {
|
||||
const bottomRef = useRef(null);
|
||||
const sorted = [...(entries || [])].sort((a, b) =>
|
||||
new Date(a.createdAt) - new Date(b.createdAt)
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
bottomRef.current?.scrollIntoView();
|
||||
}, [sorted.length]);
|
||||
|
||||
if (!sorted.length) {
|
||||
return <div className="woTabScroll"><p className="woNoComments">No changes recorded.</p></div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="woTabScroll">
|
||||
<div className="woTimeline">
|
||||
{entries.map((e) => (
|
||||
{sorted.map((e) => (
|
||||
<div key={e.id} className="woTimelineItem woAuditItem">
|
||||
<div className="woTimelineHeader">
|
||||
<span className="woTimelineAuthor">{e.userName || "System"}</span>
|
||||
|
|
@ -69,6 +81,7 @@ function AuditTimeline({ entries }) {
|
|||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div ref={bottomRef} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue