Skip to content

Commit 233273c

Browse files
talhainvenxiontalhainvenxion
committed
sorting implemented on pipelines.
1 parent 6d6c094 commit 233273c

File tree

7 files changed

+351
-12
lines changed

7 files changed

+351
-12
lines changed

‎src/ui/layouts/pipelines/Pipelines/List/ForSorting/SortingHeader.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react';
2+
import { iconColors, iconSizes } from '../../../../../../constants';
3+
import { Box, FlexBox, icons, If, LinkBox } from '../../../../../components';
4+
import { Sorting, SortingDirection } from './types';
5+
6+
import styles from './index.module.scss';
7+
8+
export const SortingHeader: React.FC<{
9+
sortMethod: void;
10+
activeSorting: Sorting | null;
11+
activeSortingDirection: SortingDirection | null;
12+
sorting: Sorting;
13+
}> = ({
14+
children,
15+
sortMethod,
16+
activeSorting,
17+
activeSortingDirection,
18+
sorting,
19+
}) => {
20+
return (
21+
<LinkBox className={styles.sortingBox} onClick={sortMethod}>
22+
<FlexBox alignItems="center">
23+
{children}
24+
<If
25+
condition={
26+
!!activeSorting &&
27+
activeSorting === sorting &&
28+
activeSortingDirection === 'DESC'
29+
}
30+
>
31+
{() => (
32+
<Box paddingLeft="xs">
33+
<icons.chevronDownLight
34+
color={iconColors.darkGrey}
35+
size={iconSizes.xs}
36+
/>
37+
</Box>
38+
)}
39+
</If>
40+
<If
41+
condition={
42+
!!activeSorting &&
43+
activeSorting === sorting &&
44+
activeSortingDirection === 'ASC'
45+
}
46+
>
47+
{() => (
48+
<Box paddingLeft="xs">
49+
<icons.chevronUpLight
50+
color={iconColors.darkGrey}
51+
size={iconSizes.xs}
52+
/>
53+
</Box>
54+
)}
55+
</If>
56+
</FlexBox>
57+
</LinkBox>
58+
);
59+
};

‎src/ui/layouts/pipelines/Pipelines/List/ForSorting/index.module.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
@import '../../../../../globalStyles';
2+
3+
.checkbox {
4+
height: 1.4rem;
5+
width: 1.4rem;
6+
border-radius: 2px;
7+
border: 1px solid $darkGreyColor;
8+
cursor: pointer;
9+
position: relative;
10+
}
11+
12+
.checkedCheckbox {
13+
background: $greenColor;
14+
border: 1px solid $greenColor;
15+
&:before {
16+
position: absolute;
17+
content: '';
18+
display: inline-block;
19+
transform: rotate(45deg);
20+
height: 10px;
21+
width: 5px;
22+
border-bottom: 2px solid $whiteColor;
23+
border-right: 2px solid $whiteColor;
24+
left: 4px;
25+
bottom: 2px;
26+
}
27+
}
28+
29+
.sortingBox {
30+
user-select: none;
31+
32+
& p {
33+
transition: 0.2s ease-in all;
34+
}
35+
36+
&:hover {
37+
& p {
38+
color: $darkGreyColor;
39+
}
40+
}
41+
}

‎src/ui/layouts/pipelines/Pipelines/List/ForSorting/types.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export type Sorting =
2+
| 'id'
3+
| 'name'
4+
| 'status'
5+
| 'datasourceCommit'
6+
| 'createdAt';
7+
8+
export type SortingDirection = 'ASC' | 'DESC';

‎src/ui/layouts/pipelines/Pipelines/List/ForSorting/useServiceForSorting.ts‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import { useDispatch, useSelector } from 'react-redux';
2+
import { stackPagesActions } from '../../../../../../redux/actions';
3+
import { stackPagesSelectors } from '../../../../../../redux/selectors';
4+
import { Sorting, SortingDirection } from './types';
5+
6+
export type SortMethod = (
7+
sorting: Sorting,
8+
{
9+
asc,
10+
desc,
11+
}: {
12+
asc: (pipelines: TPipeline[]) => TPipeline[];
13+
desc: (pipelines: TPipeline[]) => TPipeline[];
14+
},
15+
) => void;
16+
17+
interface ServiceInterface {
18+
toggleSelectRun: (pipelines: TPipeline) => void;
19+
isRunSelected: (pipelines: TPipeline) => boolean;
20+
allRunsSelected: (pipelines: TPipeline[]) => boolean;
21+
selectRuns: (pipelines: TPipeline[]) => void;
22+
unselectRuns: (pipelines: TPipeline[]) => void;
23+
sortMethod: SortMethod;
24+
}
25+
26+
export const useService = ({
27+
activeSorting,
28+
activeSortingDirection,
29+
setActiveSortingDirection,
30+
setActiveSorting,
31+
setFilteredPipelines,
32+
filteredPipelines,
33+
}: {
34+
activeSorting: Sorting | null;
35+
activeSortingDirection: SortingDirection | null;
36+
setActiveSortingDirection: (arg: SortingDirection | null) => void;
37+
setActiveSorting: (arg: Sorting | null) => void;
38+
setFilteredPipelines: (pipelines: TPipeline[]) => void;
39+
filteredPipelines: TPipeline[];
40+
}): ServiceInterface => {
41+
const dispatch = useDispatch();
42+
43+
const setSelectedRunIds = (ids: TId[]) => {
44+
dispatch(stackPagesActions.setSelectedRunIds({ runIds: ids }));
45+
};
46+
47+
const selectedRunIds = useSelector(stackPagesSelectors.selectedRunIds);
48+
49+
const toggleSelectRun = (pipeline: TPipeline): void => {
50+
if (selectedRunIds.indexOf(pipeline.id) === -1) {
51+
setSelectedRunIds([...selectedRunIds, pipeline.id]);
52+
} else {
53+
setSelectedRunIds(selectedRunIds.filter((id: TId) => id !== pipeline.id));
54+
}
55+
};
56+
57+
const isRunSelected = (pipeline: TPipeline): boolean => {
58+
return selectedRunIds.indexOf(pipeline.id) !== -1;
59+
};
60+
61+
const selectRuns = (pipelines: TPipeline[]): void => {
62+
setSelectedRunIds([
63+
...selectedRunIds,
64+
...pipelines.map((pipeline: TPipeline) => pipeline.id),
65+
]);
66+
};
67+
68+
const unselectRuns = (pipelines: TPipeline[]): void => {
69+
const runIdsToUnselect = pipelines.map(
70+
(pipeline: TPipeline) => pipeline.id,
71+
);
72+
73+
const newRunIds = selectedRunIds.filter(
74+
(id: TId) => !runIdsToUnselect.includes(id),
75+
);
76+
77+
setSelectedRunIds(newRunIds);
78+
};
79+
80+
const allRunsSelected = (pipelines: TPipeline[]): boolean => {
81+
return pipelines.every((pipeline: TPipeline) => isRunSelected(pipeline));
82+
};
83+
84+
const sortMethod = (
85+
sorting: Sorting,
86+
sort?: {
87+
asc: (pipelines: TPipeline[]) => TPipeline[];
88+
desc: (pipelines: TPipeline[]) => TPipeline[];
89+
},
90+
) => () => {
91+
if (sorting === activeSorting) {
92+
if (!!activeSortingDirection && activeSortingDirection === 'ASC') {
93+
sort && setFilteredPipelines(sort.desc(filteredPipelines));
94+
setActiveSortingDirection('DESC');
95+
} else if (
96+
!!activeSortingDirection &&
97+
activeSortingDirection === 'DESC'
98+
) {
99+
sort && setFilteredPipelines(sort.asc(filteredPipelines));
100+
setActiveSortingDirection('ASC');
101+
}
102+
} else {
103+
sort && setFilteredPipelines(sort.desc(filteredPipelines));
104+
setActiveSortingDirection('DESC');
105+
}
106+
setActiveSorting(sorting);
107+
};
108+
109+
return {
110+
toggleSelectRun,
111+
isRunSelected,
112+
unselectRuns,
113+
selectRuns,
114+
allRunsSelected,
115+
sortMethod,
116+
};
117+
};

‎src/ui/layouts/pipelines/Pipelines/List/getHeaderCols.tsx‎

Lines changed: 85 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,48 @@ import {
1616
Paragraph,
1717
} from '../../../../components';
1818
import { HeaderCol } from '../../../common/Table';
19+
import { SortingHeader } from './ForSorting/SortingHeader';
20+
import { Sorting, SortingDirection } from './ForSorting/types';
1921
import { Status } from './Status';
22+
import { useService } from './ForSorting/useServiceForSorting';
23+
import _ from 'lodash';
2024
// import { WorkspaceName } from './WorkspaceName';
2125
// import { UserName } from './UserName';
2226

23-
export const getHeaderCols = ({
27+
export const GetHeaderCols = ({
2428
openPipelineIds,
2529
setOpenPipelineIds,
30+
filteredPipelines,
31+
setFilteredPipelines,
32+
activeSorting,
33+
activeSortingDirection,
34+
setActiveSortingDirection,
35+
setActiveSorting,
2636
}: {
2737
openPipelineIds: TId[];
2838
setOpenPipelineIds: (ids: TId[]) => void;
39+
filteredPipelines: TPipeline[];
40+
setFilteredPipelines: (pipelines: TPipeline[]) => void;
41+
activeSorting: Sorting | null;
42+
activeSortingDirection: SortingDirection | null;
43+
setActiveSortingDirection: (direction: SortingDirection | null) => void;
44+
setActiveSorting: (sorting: Sorting | null) => void;
2945
}): HeaderCol[] => {
46+
const {
47+
// toggleSelectRun,
48+
// isRunSelected,
49+
// selectRuns,
50+
// unselectRuns,
51+
// allRunsSelected,
52+
sortMethod,
53+
} = useService({
54+
setActiveSortingDirection,
55+
setActiveSorting,
56+
setFilteredPipelines,
57+
activeSorting,
58+
activeSortingDirection,
59+
filteredPipelines,
60+
});
3061
return [
3162
{
3263
width: '3%',
@@ -51,9 +82,21 @@ export const getHeaderCols = ({
5182
},
5283
{
5384
render: () => (
54-
<Paragraph size="small" color="black" style={{ fontSize: '12px' }}>
55-
ID
56-
</Paragraph>
85+
<SortingHeader
86+
sorting="id"
87+
sortMethod={sortMethod('id', {
88+
asc: (filteredPipelines: TPipeline[]) =>
89+
_.orderBy(filteredPipelines, ['id'], ['asc']),
90+
desc: (filteredPipelines: TPipeline[]) =>
91+
_.orderBy(filteredPipelines, ['id'], ['desc']),
92+
})}
93+
activeSorting={activeSorting}
94+
activeSortingDirection={activeSortingDirection}
95+
>
96+
<Paragraph size="small" color="black" style={{ fontSize: '12px' }}>
97+
ID
98+
</Paragraph>
99+
</SortingHeader>
57100
),
58101
width: '8%',
59102
renderRow: (pipeline: TPipeline) => (
@@ -79,9 +122,21 @@ export const getHeaderCols = ({
79122
},
80123
{
81124
render: () => (
82-
<Paragraph size="small" color="black" style={{ fontSize: '12px' }}>
83-
NAME
84-
</Paragraph>
125+
<SortingHeader
126+
sorting="name"
127+
sortMethod={sortMethod('name', {
128+
asc: (filteredPipelines: TPipeline[]) =>
129+
_.orderBy(filteredPipelines, ['name'], ['asc']),
130+
desc: (filteredPipelines: TPipeline[]) =>
131+
_.orderBy(filteredPipelines, ['name'], ['desc']),
132+
})}
133+
activeSorting={activeSorting}
134+
activeSortingDirection={activeSortingDirection}
135+
>
136+
<Paragraph size="small" color="black" style={{ fontSize: '12px' }}>
137+
Name
138+
</Paragraph>
139+
</SortingHeader>
85140
),
86141
width: '8%',
87142
renderRow: (pipeline: TPipeline) => (
@@ -173,9 +228,29 @@ export const getHeaderCols = ({
173228
},
174229
{
175230
render: () => (
176-
<Paragraph size="small" color="black" style={{ fontSize: '12px' }}>
177-
CREATED AT
178-
</Paragraph>
231+
<SortingHeader
232+
sorting="createdAt"
233+
sortMethod={sortMethod('createdAt', {
234+
asc: (filteredPipelines: TPipeline[]) =>
235+
_.orderBy(
236+
filteredPipelines,
237+
(pipeline: TPipeline) => new Date(pipeline.created).getTime(),
238+
['asc'],
239+
),
240+
desc: (filteredPipelines: TPipeline[]) =>
241+
_.orderBy(
242+
filteredPipelines,
243+
(pipeline: TPipeline) => new Date(pipeline.created).getTime(),
244+
['desc'],
245+
),
246+
})}
247+
activeSorting={activeSorting}
248+
activeSortingDirection={activeSortingDirection}
249+
>
250+
<Paragraph size="small" color="black" style={{ fontSize: '12px' }}>
251+
CREATED
252+
</Paragraph>
253+
</SortingHeader>
179254
),
180255
width: '8%',
181256
renderRow: (pipeline: TPipeline) => (

0 commit comments

Comments
 (0)