mirror of
https://github.com/Sea-Haven-Industries/shoc-frontend-new.git
synced 2026-10-04 18:22:05 +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 }) {
|
function CommentTimeline({ comments }) {
|
||||||
const bottomRef = useRef(null);
|
const bottomRef = useRef(null);
|
||||||
|
const sorted = [...(comments || [])].sort((a, b) =>
|
||||||
|
new Date(a.createdDate) - new Date(b.createdDate)
|
||||||
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
bottomRef.current?.scrollIntoView();
|
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"><p className="woNoComments">No comments yet.</p></div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="woTabScroll">
|
<div className="woTabScroll">
|
||||||
<div className="woTimeline">
|
<div className="woTimeline">
|
||||||
{comments.map((c) => (
|
{sorted.map((c) => (
|
||||||
<div key={c.id} className="woTimelineItem">
|
<div key={c.id} className="woTimelineItem">
|
||||||
<div className="woTimelineHeader">
|
<div className="woTimelineHeader">
|
||||||
<span className="woTimelineAuthor">{c.userName || c.commenter || "System"}</span>
|
<span className="woTimelineAuthor">{c.userName || c.commenter || "System"}</span>
|
||||||
|
|
@ -46,14 +49,23 @@ function CommentTimeline({ comments }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function AuditTimeline({ entries }) {
|
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"><p className="woNoComments">No changes recorded.</p></div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="woTabScroll">
|
<div className="woTabScroll">
|
||||||
<div className="woTimeline">
|
<div className="woTimeline">
|
||||||
{entries.map((e) => (
|
{sorted.map((e) => (
|
||||||
<div key={e.id} className="woTimelineItem woAuditItem">
|
<div key={e.id} className="woTimelineItem woAuditItem">
|
||||||
<div className="woTimelineHeader">
|
<div className="woTimelineHeader">
|
||||||
<span className="woTimelineAuthor">{e.userName || "System"}</span>
|
<span className="woTimelineAuthor">{e.userName || "System"}</span>
|
||||||
|
|
@ -69,6 +81,7 @@ function AuditTimeline({ entries }) {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
<div ref={bottomRef} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue