feat(ui): add notes list to default page
This commit is contained in:
sylenien
Delirium
parent
fdc9b1d305
commit
d1a325c413
5 changed files with 158 additions and 16 deletions
|
|
@ -1,13 +1,16 @@
|
|||
import React from 'react';
|
||||
import SessionList from './components/SessionList';
|
||||
import SessionHeader from './components/SessionHeader';
|
||||
import NotesList from './components/Notes/NoteList';
|
||||
|
||||
function SessionListContainer() {
|
||||
return (
|
||||
<div className="widget-wrapper">
|
||||
<SessionHeader />
|
||||
<div className="border-b" />
|
||||
<SessionList />
|
||||
{/* <SessionList /> */}
|
||||
<NotesList />
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
import React from 'react'
|
||||
import { Icon } from 'UI'
|
||||
import PlayLink from 'Shared/SessionItem/PlayLink'
|
||||
|
||||
enum Tags {
|
||||
QUERY,
|
||||
ISSUE,
|
||||
TASK,
|
||||
OTHER
|
||||
}
|
||||
|
||||
interface Props {
|
||||
author: string
|
||||
date: string
|
||||
tag: Tags
|
||||
isPrivate: boolean
|
||||
description: string
|
||||
sessionId: string
|
||||
}
|
||||
|
||||
function NoteItem(props: Props) {
|
||||
|
||||
return (
|
||||
<div className="flex items-center p-4 border-b hover:backdrop-opacity-25" style={{ background: 'rgba(253, 243, 155, 0.1)' }}>
|
||||
<div className="flex flex-col">
|
||||
<div>{props.description}</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div>{props.tag}</div>
|
||||
<div className='text-disabled-text flex items-center'>
|
||||
<span className="text-figmaColors-text-primary mr-1">By </span>
|
||||
{props.author}, {props.date}
|
||||
{props.isPrivate ? null : (
|
||||
<>
|
||||
<Icon name="user-friends" className="ml-4 mr-1" color="gray-dark" /> Team
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-auto"><PlayLink isAssist={false} viewed={false} sessionId={props.sessionId} queryParams="noteurlparams" /></div>
|
||||
<div className="ml-2 cursor-pointer"><Icon name="ellipsis-v" size={20} /></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NoteItem
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
import React from 'react';
|
||||
import { NoContent, Pagination, Icon } from 'UI';
|
||||
import { sliceListPerPage } from 'App/utils';
|
||||
import NoteItem from './NoteItem';
|
||||
|
||||
//{ siteId }: { siteId: string }
|
||||
function NotesList() {
|
||||
const list = [
|
||||
{
|
||||
author: 'nikita@openreplay.com',
|
||||
date: 'Today, 12.00PM',
|
||||
tag: 1,
|
||||
isPrivate: true,
|
||||
description: 'Testing private note stuff bla bla bla',
|
||||
sessionId: '123123123',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
author: 'sasha@openreplay.com',
|
||||
date: 'Tomorrow, 12.00PM',
|
||||
tag: 0,
|
||||
isPrivate: false,
|
||||
description: 'Not Testing team note stuff bla bla bla',
|
||||
sessionId: '123123123',
|
||||
id: 1,
|
||||
},
|
||||
];
|
||||
|
||||
const store = {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
// @ts-ignore
|
||||
updateKey: (a, b) => 1,
|
||||
};
|
||||
|
||||
return (
|
||||
<NoContent
|
||||
show={list.length === 0}
|
||||
title={
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<Icon name="no-metrics" size={80} color="figmaColors-accent-secondary" />
|
||||
<div className="text-center text-gray-600 my-4">No notes yet</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="mt-3 border-b rounded bg-white">
|
||||
{sliceListPerPage(list, store.page - 1, store.pageSize).map((note) => (
|
||||
<React.Fragment key={note.id}>
|
||||
<NoteItem
|
||||
author={note.author}
|
||||
tag={note.tag}
|
||||
date={note.date}
|
||||
isPrivate={note.isPrivate}
|
||||
description={note.description}
|
||||
sessionId={note.sessionId}
|
||||
/>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="w-full flex items-center justify-between pt-4 px-6">
|
||||
<div className="text-disabled-text">
|
||||
Showing <span className="font-semibold">{Math.min(list.length, store.pageSize)}</span> out
|
||||
of <span className="font-semibold">{list.length}</span> notes
|
||||
</div>
|
||||
<Pagination
|
||||
page={store.page}
|
||||
totalPages={Math.ceil(list.length / store.pageSize)}
|
||||
onPageChange={(page) => store.updateKey('page', page)}
|
||||
limit={store.pageSize}
|
||||
debounceRequest={100}
|
||||
/>
|
||||
</div>
|
||||
</NoContent>
|
||||
);
|
||||
}
|
||||
|
||||
export default NotesList;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './NoteList'
|
||||
|
|
@ -10,10 +10,22 @@ import cn from 'classnames';
|
|||
import { setActiveTab } from 'Duck/search';
|
||||
import SessionSettingButton from '../SessionSettingButton';
|
||||
|
||||
// @ts-ignore
|
||||
const Tab = ({ addBorder, onClick, children }) => (
|
||||
<div
|
||||
className={cn('py-3 cursor-pointer', {
|
||||
'border-b color-teal border-teal': addBorder,
|
||||
})}
|
||||
onClick={onClick}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
||||
interface Props {
|
||||
listCount: number;
|
||||
filter: any;
|
||||
isBookmark: any;
|
||||
activeTab: string;
|
||||
isEnterprise: boolean;
|
||||
applyFilter: (filter: any) => void;
|
||||
setActiveTab: (tab: any) => void;
|
||||
|
|
@ -21,7 +33,7 @@ interface Props {
|
|||
function SessionHeader(props: Props) {
|
||||
const {
|
||||
filter: { startDate, endDate, rangeValue },
|
||||
isBookmark,
|
||||
activeTab,
|
||||
isEnterprise,
|
||||
} = props;
|
||||
|
||||
|
|
@ -35,27 +47,29 @@ function SessionHeader(props: Props) {
|
|||
return (
|
||||
<div className="flex items-center px-4 justify-between">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="mr-3 text-lg flex items-center">
|
||||
<div
|
||||
className={cn('py-3 cursor-pointer mr-4', {
|
||||
'border-b color-teal border-teal': !isBookmark,
|
||||
})}
|
||||
<div className="mr-3 text-lg flex items-center gap-2">
|
||||
<Tab
|
||||
onClick={() => props.setActiveTab({ type: 'all' })}
|
||||
addBorder={activeTab === 'all'}
|
||||
>
|
||||
<span className="font-bold">SESSIONS</span>
|
||||
</div>
|
||||
<div
|
||||
className={cn('py-3 cursor-pointer', {
|
||||
'border-b color-teal border-teal': isBookmark,
|
||||
})}
|
||||
</Tab>
|
||||
<Tab
|
||||
onClick={() => props.setActiveTab({ type: 'bookmark' })}
|
||||
addBorder={activeTab === 'bookmark'}
|
||||
>
|
||||
<span className="font-bold">{`${isEnterprise ? 'VAULT' : 'BOOKMARKS'}`}</span>
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab
|
||||
addBorder={activeTab === 'notes'}
|
||||
onClick={() => props.setActiveTab({ type: 'notes' })}
|
||||
>
|
||||
<span className="font-bold">NOTES</span>
|
||||
</Tab>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!isBookmark && <div className="flex items-center">
|
||||
{activeTab === 'all' && <div className="flex items-center">
|
||||
<SessionTags />
|
||||
<div className="mx-4" />
|
||||
<SelectDateRange period={period} onChange={onDateChange} right={true} />
|
||||
|
|
@ -71,7 +85,7 @@ export default connect(
|
|||
(state: any) => ({
|
||||
filter: state.getIn(['search', 'instance']),
|
||||
listCount: numberWithCommas(state.getIn(['sessions', 'total'])),
|
||||
isBookmark: state.getIn(['search', 'activeTab', 'type']) === 'bookmark',
|
||||
activeTab: state.getIn(['search', 'activeTab', 'type']),
|
||||
isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
|
||||
}),
|
||||
{ applyFilter, setActiveTab }
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue