fix(ui): cards pagination
This commit is contained in:
Shekar Siri
parent
212b412838
commit
c3993e284d
2 changed files with 73 additions and 43 deletions
|
|
@ -1,8 +1,10 @@
|
|||
import React, { useState, useMemo } from 'react';
|
||||
import { Checkbox, Table } from 'antd';
|
||||
import { Checkbox, Table, Typography } from 'antd';
|
||||
import MetricListItem from '../MetricListItem';
|
||||
import { TablePaginationConfig, SorterResult } from 'antd/lib/table/interface';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
interface Metric {
|
||||
metricId: number;
|
||||
name: string;
|
||||
|
|
@ -23,12 +25,27 @@ interface Props {
|
|||
}
|
||||
|
||||
const ListView: React.FC<Props> = (props: Props) => {
|
||||
const { siteId, list, selectedList, toggleSelection, disableSelection = false, allSelected = false, toggleAll } = props;
|
||||
const {
|
||||
siteId,
|
||||
list,
|
||||
selectedList,
|
||||
toggleSelection,
|
||||
disableSelection = false,
|
||||
allSelected = false,
|
||||
toggleAll
|
||||
} = props;
|
||||
const [sorter, setSorter] = useState<{ field: string; order: 'ascend' | 'descend' }>({
|
||||
field: 'lastModified',
|
||||
order: 'descend'
|
||||
});
|
||||
const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10 });
|
||||
const totalMessage = (
|
||||
<>
|
||||
Showing <Text strong>{pagination.pageSize * (pagination.current - 1) + 1}</Text> to <Text
|
||||
strong>{Math.min(pagination.pageSize * pagination.current, list.length)}</Text> of <Text
|
||||
strong>{list.length}</Text> cards
|
||||
</>
|
||||
);
|
||||
|
||||
const sortedData = useMemo(() => {
|
||||
return [...list].sort((a, b) => {
|
||||
|
|
@ -37,9 +54,9 @@ const ListView: React.FC<Props> = (props: Props) => {
|
|||
? new Date(a.lastModified).getTime() - new Date(b.lastModified).getTime()
|
||||
: new Date(b.lastModified).getTime() - new Date(a.lastModified).getTime();
|
||||
} else if (sorter.field === 'name') {
|
||||
return sorter.order === 'ascend' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
|
||||
return sorter.order === 'ascend' ? a.name?.localeCompare(b.name) : b.name?.localeCompare(a.name);
|
||||
} else if (sorter.field === 'owner') {
|
||||
return sorter.order === 'ascend' ? a.owner.localeCompare(b.owner) : b.owner.localeCompare(a.owner);
|
||||
return sorter.order === 'ascend' ? a.owner?.localeCompare(b.owner) : b.owner?.localeCompare(a.owner);
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
|
@ -82,7 +99,7 @@ const ListView: React.FC<Props> = (props: Props) => {
|
|||
dataIndex: 'name',
|
||||
key: 'title',
|
||||
className: 'cap-first',
|
||||
width:'35%',
|
||||
width: '35%',
|
||||
sorter: true,
|
||||
render: (text: string, metric: Metric) => (
|
||||
<MetricListItem
|
||||
|
|
@ -97,14 +114,14 @@ const ListView: React.FC<Props> = (props: Props) => {
|
|||
}}
|
||||
renderColumn="title"
|
||||
/>
|
||||
),
|
||||
)
|
||||
},
|
||||
{
|
||||
title: 'Owner',
|
||||
dataIndex: 'owner',
|
||||
key: 'owner',
|
||||
className: 'capitalize',
|
||||
width:'25%',
|
||||
width: '25%',
|
||||
sorter: true,
|
||||
render: (text: string, metric: Metric) => (
|
||||
<MetricListItem
|
||||
|
|
@ -113,7 +130,7 @@ const ListView: React.FC<Props> = (props: Props) => {
|
|||
siteId={siteId}
|
||||
renderColumn="owner"
|
||||
/>
|
||||
),
|
||||
)
|
||||
},
|
||||
{
|
||||
title: 'Last Modified',
|
||||
|
|
@ -127,7 +144,7 @@ const ListView: React.FC<Props> = (props: Props) => {
|
|||
siteId={siteId}
|
||||
renderColumn="lastModified"
|
||||
/>
|
||||
),
|
||||
)
|
||||
},
|
||||
{
|
||||
title: 'Visibility',
|
||||
|
|
@ -141,7 +158,7 @@ const ListView: React.FC<Props> = (props: Props) => {
|
|||
siteId={siteId}
|
||||
renderColumn="visibility"
|
||||
/>
|
||||
),
|
||||
)
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
|
|
@ -154,8 +171,8 @@ const ListView: React.FC<Props> = (props: Props) => {
|
|||
siteId={siteId}
|
||||
renderColumn="options"
|
||||
/>
|
||||
),
|
||||
},
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
|
|
@ -167,19 +184,31 @@ const ListView: React.FC<Props> = (props: Props) => {
|
|||
rowSelection={
|
||||
!disableSelection
|
||||
? {
|
||||
selectedRowKeys: selectedList.map((id: number) => id.toString()),
|
||||
onChange: (selectedRowKeys) => {
|
||||
selectedRowKeys.forEach((key) => {
|
||||
toggleSelection && toggleSelection(parseInt(key));
|
||||
});
|
||||
},
|
||||
selectedRowKeys: selectedList.map((id: number) => id.toString()),
|
||||
onChange: (selectedRowKeys) => {
|
||||
selectedRowKeys.forEach((key: any) => {
|
||||
toggleSelection && toggleSelection(parseInt(key));
|
||||
});
|
||||
}
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
// footer={() => (
|
||||
// <div className="flex justify-end">
|
||||
// <Checkbox name="slack" checked={allSelected} onClick={toggleAll}>
|
||||
// Select All
|
||||
// </Checkbox>
|
||||
// </div>
|
||||
// )}
|
||||
pagination={{
|
||||
current: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
total: sortedData.length,
|
||||
showSizeChanger: false,
|
||||
className: 'px-4',
|
||||
showLessItems: true,
|
||||
showTotal: () => totalMessage,
|
||||
showQuickJumper: true
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -54,20 +54,20 @@ function MetricsList({
|
|||
<NoContent
|
||||
show={lenth === 0}
|
||||
title={
|
||||
<div className='flex flex-col items-center justify-center'>
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<AnimatedSVG name={ICONS.NO_CARDS} size={60} />
|
||||
<div className='text-center mt-4'>
|
||||
<div className="text-center mt-4">
|
||||
{metricsSearch !== '' ? 'No matching results' : 'You haven\'t created any cards yet'}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
subtext='Utilize cards to visualize key user interactions or product performance metrics.'
|
||||
subtext="Utilize cards to visualize key user interactions or product performance metrics."
|
||||
>
|
||||
{listView ? (
|
||||
<ListView
|
||||
disableSelection={!onSelectionChange}
|
||||
siteId={siteId}
|
||||
list={sliceListPerPage(cards, metricStore.page - 1, metricStore.pageSize)}
|
||||
list={cards}
|
||||
selectedList={selectedMetrics}
|
||||
existingCardIds={existingCardIds}
|
||||
toggleSelection={toggleMetricSelection}
|
||||
|
|
@ -77,28 +77,29 @@ function MetricsList({
|
|||
}
|
||||
/>
|
||||
) : (
|
||||
<GridView
|
||||
siteId={siteId}
|
||||
list={sliceListPerPage(cards, metricStore.page - 1, metricStore.pageSize)}
|
||||
selectedList={selectedMetrics}
|
||||
toggleSelection={toggleMetricSelection}
|
||||
/>
|
||||
<>
|
||||
<GridView
|
||||
siteId={siteId}
|
||||
list={sliceListPerPage(cards, metricStore.page - 1, metricStore.pageSize)}
|
||||
selectedList={selectedMetrics}
|
||||
toggleSelection={toggleMetricSelection}
|
||||
/>
|
||||
<div className="w-full flex items-center justify-between py-4 px-6 border-t">
|
||||
<div className="">
|
||||
Showing{' '}
|
||||
<span className="font-semibold">{Math.min(cards.length, metricStore.pageSize)}</span> out
|
||||
of <span className="font-semibold">{cards.length}</span> cards
|
||||
</div>
|
||||
<Pagination
|
||||
page={metricStore.page}
|
||||
total={lenth}
|
||||
onPageChange={(page) => metricStore.updateKey('page', page)}
|
||||
limit={metricStore.pageSize}
|
||||
debounceRequest={100}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className='w-full flex items-center justify-between py-4 px-6 border-t'>
|
||||
<div className=''>
|
||||
Showing{' '}
|
||||
<span className='font-semibold'>{Math.min(cards.length, metricStore.pageSize)}</span> out
|
||||
of <span className='font-semibold'>{cards.length}</span> cards
|
||||
</div>
|
||||
<Pagination
|
||||
page={metricStore.page}
|
||||
total={lenth}
|
||||
onPageChange={(page) => metricStore.updateKey('page', page)}
|
||||
limit={metricStore.pageSize}
|
||||
debounceRequest={100}
|
||||
/>
|
||||
</div>
|
||||
</NoContent>
|
||||
</Loader>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue