jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: show note start point instead of date

Browse source
This commit is contained in:
nick-delirium 2025-02-11 11:49:25 +01:00
parent 3a2e822bea
commit 6e7ced6959
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
1 changed files with 45 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
View file

@ -1,6 +1,6 @@
import React from 'react';
import { tagProps, Note } from 'App/services/NotesService';
import { formatTimeOrDate } from 'App/date';
import { formatTimeOrDate, shortDurationFromMs } from 'App/date';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
import copy from 'copy-to-clipboard';
@ -8,10 +8,10 @@ import { toast } from 'react-toastify';
import { session } from 'App/routes';
import { confirm, Icon } from 'UI';
import { TeamBadge } from 'Shared/SessionsTabOverview/components/Notes';
import { Tag, Dropdown, Button } from 'antd'
import { MoreOutlined } from "@ant-design/icons";
import { MessageSquareDot } from 'lucide-react'
import { noNoteMsg } from 'App/mstore/notesStore'
import { Tag, Dropdown, Button } from 'antd';
import { MoreOutlined } from '@ant-design/icons';
import { MessageSquareDot } from 'lucide-react';
import { noNoteMsg } from 'App/mstore/notesStore';
interface Props {
note: Note;
@ -26,14 +26,14 @@ function NoteEvent(props: Props) {
const onEdit = () => {
notesStore.setEditNote(props.note);
props.setActiveTab('HIGHLIGHT')
props.setActiveTab('HIGHLIGHT');
};
const onCopy = () => {
copy(
`${window.location.origin}/${window.location.pathname.split('/')[1]}${session(
props.note.sessionId
)}${
`${window.location.origin}/${
window.location.pathname.split('/')[1]
}${session(props.note.sessionId)}${
props.note.timestamp > 0
? `?jumpto=${props.note.timestamp}&note=${props.note.noteId}`
: `?note=${props.note.noteId}`
@ -57,12 +57,33 @@ function NoteEvent(props: Props) {
}
};
const menuItems = [
{ icon: <Icon name={'pencil'} />, label: 'Edit', key: '1', onClick: onEdit, disabled: props.noEdit },
{ icon: <Icon name={'link-45deg'} />, label: 'Copy URL', key: '2', onClick: onCopy },
{ icon: <Icon name={'trash'} />, label: 'Delete', key: '3', onClick: onDelete },
{
icon: <Icon name={'pencil'} />,
label: 'Edit',
key: '1',
onClick: onEdit,
disabled: props.noEdit,
},
{
icon: <Icon name={'link-45deg'} />,
label: 'Copy URL',
key: '2',
onClick: onCopy,
},
{
icon: <Icon name={'trash'} />,
label: 'Delete',
key: '3',
onClick: onDelete,
},
];
console.log(props.note)
return (
<div className="flex items-start flex-col p-2 border rounded ps-4" style={{ background: 'rgba(252, 193, 0, 0.1)' }}>
<div
className="flex items-start flex-col p-2 border rounded ps-4"
style={{ background: 'rgba(252, 193, 0, 0.1)' }}
>
<div className="flex items-center w-full relative">
<MessageSquareDot size={16} strokeWidth={1} />
<div className="ml-2">
@ -78,7 +99,12 @@ function NoteEvent(props: Props) {
{props.note.userName}
</div>
<div className="text-disabled-text text-xs">
{formatTimeOrDate(props.note.createdAt as unknown as number, timezone)}
{props.note.startAt !== undefined
? shortDurationFromMs(props.note.startAt)
: formatTimeOrDate(
props.note.createdAt as unknown as number,
timezone
)}
</div>
</div>
<div className="cursor-pointer absolute" style={{ right: -5 }}>
@ -98,7 +124,11 @@ function NoteEvent(props: Props) {
<div>
<div className="flex items-center flex-wrap w-full">
{props.note.tag ? (
<Tag color={tagProps[props.note.tag]} bordered={false} className='rounded-lg'>
<Tag
color={tagProps[props.note.tag]}
bordered={false}
className="rounded-lg"
>
{props.note.tag}
</Tag>
) : null}