Skip to content

Commit 6ddbaf1

Browse files
AhsanKhan7AhsanKhan7
committed
pagination UI updates'
1 parent 31f2cc0 commit 6ddbaf1

File tree

10 files changed

+208
-60
lines changed

10 files changed

+208
-60
lines changed

‎src/ui/components/icons/assets/PaginationFirst.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/ui/components/icons/assets/PaginationLast.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/ui/components/icons/assets/PaginationNext.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/ui/components/icons/assets/PaginationPrev.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/ui/components/icons/index.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,11 @@ import { ReactComponent as ChatDots } from './assets/ChatDots.svg';
6262
// import { ReactComponent as RightArrow } from './assets/RightArrow.svg';
6363
// import { ReactComponent as Edit } from './assets/Edit.svg';
6464

65+
import { ReactComponent as PaginationFirst } from './assets/PaginationFirst.svg';
66+
import { ReactComponent as PaginationLast } from './assets/PaginationLast.svg';
67+
import { ReactComponent as PaginationNext } from './assets/PaginationNext.svg';
68+
import { ReactComponent as PaginationPrev } from './assets/PaginationPrev.svg';
69+
6570
import styles from './index.module.scss';
6671
import { joinClassNames } from '../../../utils/styles';
6772
import { iconColors, iconSizes } from '../../../constants';
@@ -76,6 +81,7 @@ interface Props {
7681
const mapSizes = {
7782
xs: 12,
7883
sm: 18,
84+
sml: 16,
7985
md: 24,
8086
lg: 30,
8187
xl: 36,
@@ -179,6 +185,12 @@ const icons = {
179185
Component: ChartBarHorizontal,
180186
useStroke: true,
181187
}),
188+
189+
// paginations
190+
paginationFirst: createIcon({ Component: PaginationFirst, useStroke: true }),
191+
paginationLast: createIcon({ Component: PaginationLast, useStroke: true }),
192+
paginationNext: createIcon({ Component: PaginationNext, useStroke: true }),
193+
paginationPrev: createIcon({ Component: PaginationPrev, useStroke: true }),
182194
};
183195

184196
export { icons };

‎src/ui/layouts/common/Pagination/index.module.scss‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import '../../../globalStyles.scss';
22

3-
$paginationSize: 4rem;
4-
$paginationBorderColor: #eceeef;
3+
$paginationSize: 32px;
4+
$paginationBorderColor: #F1F1F1;
55

66
.paginationNavigationItem,
77
.paginationNumbers {
@@ -10,19 +10,34 @@ $paginationBorderColor: #eceeef;
1010
display: flex;
1111
justify-content: center;
1212
align-items: center;
13+
align-items: center;
1314
cursor: pointer;
1415
outline: 0;
1516
width: $paginationSize;
1617
height: $paginationSize;
1718
border: 1px solid $paginationBorderColor;
19+
border-radius: 8px;
20+
margin-right: 5px;
1821

1922
&.hidden {
2023
pointer-events: none;
2124
visibility: hidden;
2225
}
2326
}
2427

28+
2529
.paginationNumbers.active {
26-
background: $secondaryColor;
30+
background: #443E99;
2731
cursor: initial;
2832
}
33+
34+
.paginationText {
35+
color: #333;
36+
font-size: 13px;
37+
font-weight: 600;
38+
font-family: Rubik;
39+
}
40+
.paginationText.active {
41+
background: #fff;
42+
cursor: initial;
43+
}

‎src/ui/layouts/common/Pagination/index.tsx‎

Lines changed: 46 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
import React, {
22
forwardRef,
3-
useEffect,
43
useImperativeHandle,
5-
useState,
64
} from 'react';
7-
8-
import { FlexBox, Box, Paragraph, icons } from '../../../components';
9-
5+
import { FlexBox, Box, icons } from '../../../components';
106
import styles from './index.module.scss';
117
import { joinClassNames, addStyle } from '../../../../utils';
128
import { useLocation } from 'react-router-dom';
@@ -34,9 +30,9 @@ const PaginationItem = (props: {
3430
addStyle(props.isActive, styles.active),
3531
)}
3632
>
37-
<Paragraph color={props.isActive ? 'white' : 'grey'}>
33+
<span className={styles.paginationText} style={{ color: props.isActive ? '#fff' : '#333' }} >
3834
{props.index}
39-
</Paragraph>
35+
</span>
4036
</div>
4137
);
4238

@@ -55,7 +51,7 @@ const PaginationNavigationItem = (props: {
5551
addStyle(!props.hasNext, styles.hidden),
5652
)}
5753
>
58-
<props.icon color="grey" size="md" />
54+
<props.icon color="black" size="sml" />
5955
</div>
6056
);
6157

@@ -152,7 +148,6 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
152148
<FlexBox.Column justifyContent="center" alignItems="center">
153149
<FlexBox marginTop="xxxl" marginBottom="xxxl" justifyContent="center">
154150
<PaginationNavigationItem
155-
style={{ paddingRight: 2 }}
156151
hasNext={props.pageIndex !== 0}
157152
onClick={() => {
158153
// switch (componentName) {
@@ -173,8 +168,23 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
173168

174169
props.setPageIndex(props.pageIndex - 1);
175170
}}
176-
icon={icons.chevronLeft}
171+
icon={icons.paginationFirst}
177172
/>
173+
<PaginationNavigationItem
174+
hasNext={props.pageIndex !== 0}
175+
onClick={() => {
176+
onChange(
177+
props.pageIndex,
178+
props.itemPerPage,
179+
componentName,
180+
props.filters,
181+
);
182+
183+
props.setPageIndex(props.pageIndex - 1);
184+
}}
185+
icon={icons.paginationPrev}
186+
/>
187+
178188
<FlexBox>
179189
{pageNumbers.map((p: any) => (
180190
<Box key={p}>
@@ -190,9 +200,9 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
190200
</Box>
191201
))}
192202
</FlexBox>
193-
<Box>
194-
<PaginationNavigationItem
195-
style={{ paddingLeft: 2 }}
203+
204+
205+
<PaginationNavigationItem
196206
hasNext={props.pageIndex + 1 < props.totalOfPages}
197207
onClick={() => {
198208
onChange(
@@ -203,10 +213,31 @@ export const Pagination: React.FC<Props> = forwardRef((props, ref) => {
203213
);
204214
props.setPageIndex(props.pageIndex + 1);
205215
}}
206-
icon={icons.chevronRight}
216+
icon={icons.paginationNext}
207217
/>
208-
</Box>
218+
<PaginationNavigationItem
219+
hasNext={props.pageIndex + 1 < props.totalOfPages}
220+
onClick={() => {
221+
onChange(
222+
props.pageIndex + 2,
223+
props.itemPerPage,
224+
componentName,
225+
props.filters,
226+
);
227+
props.setPageIndex(props.pageIndex + 1);
228+
}}
229+
icon={icons.paginationLast}
230+
/>
231+
209232
</FlexBox>
233+
234+
235+
236+
237+
238+
239+
240+
210241
</FlexBox.Column>
211242
);
212243
});

‎src/ui/layouts/common/Table/index.module.scss‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,3 +56,50 @@
5656
.lastTable tbody tr:last-child {
5757
border-bottom: 1px solid $lightestGreyColor;
5858
}
59+
60+
61+
.dropdown {
62+
border: 1px solid #A8A8A8;
63+
border-radius: 4px;
64+
outline: none;
65+
width: 59px;
66+
height: 32px;
67+
font-size: 13px;
68+
font-weight: bold;
69+
color: #333333;
70+
padding-left: 7px;
71+
cursor: pointer;
72+
}
73+
74+
75+
.popup {
76+
background-color: $whiteColor;
77+
border: 1px solid $lightestGreyColor;
78+
border-radius: 4px;
79+
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
80+
width: 5.8rem;
81+
z-index: 9;
82+
position: relative;
83+
}
84+
85+
.popupItem {
86+
cursor: pointer;
87+
transition: 0.2s ease-in all;
88+
}
89+
90+
.popupItem:hover {
91+
background-color: #fbfbfb;
92+
}
93+
94+
.itemText1 {
95+
font-size: 16px;
96+
font-weight: 600;
97+
line-height: 18px;
98+
99+
}
100+
101+
.itemText {
102+
font-size: 16px;
103+
font-weight: 600;
104+
line-height: 18px
105+
}

‎src/ui/layouts/common/Table/index.tsx‎

Lines changed: 59 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ import {
1010
H3,
1111
Truncate,
1212
FullWidthSpinner,
13+
14+
Paragraph,
15+
icons
1316
} from '../../../components';
1417
import { getPaginationData } from '../../../../utils/pagination';
1518
import { Pagination } from '../Pagination';
@@ -24,6 +27,8 @@ import {
2427
import { callActionForPipelineRunsForPagination } from '../../pipelines/PipelineDetail/useService';
2528
import { callActionForStackRunsForPagination } from '../../stacks/StackDetail/useService';
2629
import { callActionForStackComponentRunsForPagination } from '../../stackComponents/StackDetail/useService';
30+
import { iconColors, iconSizes } from '../../../../constants/icons';
31+
import OutsideClickHandler from 'react-outside-click-handler';
2732

2833
export interface HeaderCol {
2934
render?: () => JSX.Element;
@@ -144,7 +149,7 @@ export const Table: React.FC<TableProps> = ({
144149

145150

146151

147-
152+
const [showItems, setShowItems] = useState(false)
148153
const { pageIndex, setPageIndex } = usePaginationAsQueryParam();
149154
const locationPath = useLocation();
150155
// const childRef = React.useRef(null);
@@ -335,36 +340,60 @@ export const Table: React.FC<TableProps> = ({
335340
<If condition={tableRows.length > 0 && paginated?.totalitem > 5}>
336341
{() => (
337342
<>
338-
{/* {console.log(paginated.totalPages, '1111', tableRows.length > 0)} */}
339343
<Box marginLeft="md" className="d-none d-md-block">
340-
<select
341-
onChange={(e: any) => {
342-
onChangePagePerItem(pageIndex, parseInt(e.target.value));
343-
childRef?.current?.callOnChange(
344-
pageIndex,
345-
parseInt(e.target.value),
346-
filters,
347-
);
348-
}}
349-
// defaultValue={itemPerPage}
350-
value={itemPerPage}
351-
placeholder={'Item per Page'}
352-
// className={cn(css.input)}
353-
style={{
354-
border: 'none',
355-
outline: 'none',
356-
width: '146px',
357-
fontSize: '16px',
358-
fontWeight: 'bold',
359-
color: '#424240',
360-
}}
361-
>
362-
{[5, 10, 15, 20].map((option, index) => (
363-
<option key={index} value={option}>
364-
{option}
365-
</option>
366-
))}
367-
</select>
344+
<Box>
345+
<FlexBox>
346+
<Box style={{ marginTop: '4px', marginRight: '10px' }}>
347+
<span className={styles.itemText1}>Items Showing</span>
348+
</Box>
349+
350+
<FlexBox flexDirection='column'>
351+
<Box>
352+
<FlexBox alignItems="center" justifyContent='space-between' paddingHorizontal='sm' className={styles.dropdown} onClick={() => setShowItems(!showItems)}>
353+
<Box paddingRight="sm">
354+
<span className={styles.itemText}>{itemPerPage}</span>
355+
</Box>
356+
<Box>
357+
<icons.chevronDownLight
358+
size={iconSizes.xs}
359+
color={iconColors.black}
360+
/>
361+
</Box>
362+
</FlexBox>
363+
</Box>
364+
<Box>
365+
<If condition={showItems}>
366+
{() => (
367+
<OutsideClickHandler onOutsideClick={() => {}} >
368+
<Box className={styles.popup} marginTop='sm' >
369+
<Box marginVertical='sm' marginLeft='md' className="d-none d-md-block">
370+
<Box marginTop='sm'>
371+
{[5, 10, 15, 20].map((option, index) => (
372+
<Box
373+
marginTop='sm'
374+
key={index}
375+
onClick={() => {
376+
onChangePagePerItem(pageIndex, parseInt(`${option}`));
377+
childRef?.current?.callOnChange(
378+
pageIndex,
379+
parseInt(`${option}`),
380+
filters,
381+
);
382+
}}
383+
>
384+
<span className={styles.itemText} style={{ cursor: 'pointer' }}>{option}</span>
385+
</Box>
386+
))}
387+
</Box>
388+
</Box>
389+
</Box>
390+
</OutsideClickHandler>
391+
)}
392+
</If>
393+
</Box>
394+
</FlexBox>
395+
</FlexBox>
396+
</Box>
368397
</Box>
369398
</>
370399
)}

0 commit comments

Comments
 (0)