Skip to content

Commit 187787a

Browse files
kkartunovkkartunov
authored
Merge pull request #817 from topcoder-platform/profiles-app
MP-276 adding more modals
2 parents 6945b54 + d1c48c0 commit 187787a

34 files changed

+1265
-8
lines changed

‎src/apps/profiles/src/components/BannersIconsDetailsModal/BannersIconsDetailsModal.module.scss

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@import "@libs/ui/styles/includes";
2+
3+
.container {
4+
display: flex;
5+
flex-direction: column;
6+
7+
.content {
8+
.contentHeader {
9+
display: flex;
10+
justify-content: space-between;
11+
align-items: center;
12+
border-bottom: 1px solid $black-10;
13+
margin: $sp-4 0;
14+
padding-bottom: $sp-2;
15+
16+
.contentHeaderActions {
17+
button {
18+
margin-right: $sp-2;
19+
20+
&:last-child {
21+
margin-right: 0;
22+
}
23+
}
24+
}
25+
}
26+
27+
.contentBody {
28+
height: 385px;
29+
overflow: auto;
30+
31+
@include ltelg {
32+
height: auto;
33+
}
34+
}
35+
}
36+
}

‎src/apps/profiles/src/components/BannersIconsDetailsModal/BannersIconsDetailsModal.tsx

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/* eslint-disable complexity */
2+
import { Dispatch, FC, SetStateAction, useState } from 'react'
3+
4+
import { BaseModal } from '~/libs/ui'
5+
import {
6+
MemberStats,
7+
} from '~/libs/core'
8+
9+
import { numberToFixed } from '../../lib'
10+
11+
import styles from './BannersIconsDetailsModal.module.scss'
12+
13+
type WebDesignViewTypes = 'CHALLENGES DETAILS'
14+
15+
interface BannersIconsDetailsModalProps {
16+
onClose: () => void
17+
bannersIconsStats: MemberStats | undefined
18+
}
19+
20+
const BannersIconsDetailsModal: FC<BannersIconsDetailsModalProps> = (props: BannersIconsDetailsModalProps) => {
21+
const [viewType]: [WebDesignViewTypes, Dispatch<SetStateAction<WebDesignViewTypes>>]
22+
= useState<WebDesignViewTypes>('CHALLENGES DETAILS')
23+
24+
return (
25+
<BaseModal
26+
onClose={props.onClose}
27+
open
28+
size='body'
29+
title='Banners Or Icons'
30+
>
31+
32+
<div className={styles.container}>
33+
<div className='member-stat-header'>
34+
<div>
35+
<span className='member-stat-value'>{props.bannersIconsStats?.wins}</span>
36+
Wins
37+
</div>
38+
<div>
39+
<span className='member-stat-value'>{props.bannersIconsStats?.challenges}</span>
40+
Challenges
41+
</div>
42+
<div>
43+
<span className='member-stat-value'>
44+
{numberToFixed(props.bannersIconsStats?.rank?.overallPercentile || 0)}
45+
%
46+
</span>
47+
Percentile
48+
</div>
49+
<div>
50+
<span className='member-stat-value'>
51+
{numberToFixed(props.bannersIconsStats?.screeningSuccessRate || 0)}
52+
%
53+
</span>
54+
Screening Success Rate
55+
</div>
56+
<div>
57+
<span className='member-stat-value'>
58+
{numberToFixed(props.bannersIconsStats?.avgPlacement || 0)}
59+
</span>
60+
Average Placement
61+
</div>
62+
</div>
63+
64+
<div className={styles.content}>
65+
<div className={styles.contentHeader}>
66+
<h4>{viewType}</h4>
67+
</div>
68+
69+
<div className={styles.contentBody}>
70+
{
71+
viewType === 'CHALLENGES DETAILS' && (
72+
<div />
73+
)
74+
75+
}
76+
</div>
77+
</div>
78+
</div>
79+
</BaseModal>
80+
)
81+
}
82+
83+
export default BannersIconsDetailsModal

‎src/apps/profiles/src/components/BannersIconsDetailsModal/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as BannersIconsDetailsModal } from './BannersIconsDetailsModal'

‎src/apps/profiles/src/components/DesignF2FDetailsModal/DesignF2FDetailsModal.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,9 @@ const DesignF2FDetailsModal: FC<DesignF2FDetailsModalProps> = (props: DesignF2FD
5555
Screening Success Rate
5656
</div>
5757
<div>
58-
<span className='member-stat-value'>{props.designF2FStats?.avgPlacement}</span>
58+
<span className='member-stat-value'>
59+
{numberToFixed(props.designF2FStats?.avgPlacement || 0)}
60+
</span>
5961
Average Placement
6062
</div>
6163
</div>

‎src/apps/profiles/src/components/FEDesignDetailsModal/FEDesignDetailsModal.module.scss

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@import "@libs/ui/styles/includes";
2+
3+
.container {
4+
display: flex;
5+
flex-direction: column;
6+
7+
.content {
8+
.contentHeader {
9+
display: flex;
10+
justify-content: space-between;
11+
align-items: center;
12+
border-bottom: 1px solid $black-10;
13+
margin: $sp-4 0;
14+
padding-bottom: $sp-2;
15+
16+
.contentHeaderActions {
17+
button {
18+
margin-right: $sp-2;
19+
20+
&:last-child {
21+
margin-right: 0;
22+
}
23+
}
24+
}
25+
}
26+
27+
.contentBody {
28+
height: 385px;
29+
overflow: auto;
30+
31+
@include ltelg {
32+
height: auto;
33+
}
34+
}
35+
}
36+
}

‎src/apps/profiles/src/components/FEDesignDetailsModal/FEDesignDetailsModal.tsx

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/* eslint-disable complexity */
2+
import { Dispatch, FC, SetStateAction, useState } from 'react'
3+
4+
import { BaseModal } from '~/libs/ui'
5+
import {
6+
MemberStats,
7+
} from '~/libs/core'
8+
9+
import { numberToFixed } from '../../lib'
10+
11+
import styles from './FEDesignDetailsModal.module.scss'
12+
13+
type WebDesignViewTypes = 'CHALLENGES DETAILS'
14+
15+
interface FEDesignDetailsModalProps {
16+
onClose: () => void
17+
feDesignStats: MemberStats | undefined
18+
}
19+
20+
const FEDesignDetailsModal: FC<FEDesignDetailsModalProps>
21+
= (props: FEDesignDetailsModalProps) => {
22+
const [viewType]: [WebDesignViewTypes, Dispatch<SetStateAction<WebDesignViewTypes>>]
23+
= useState<WebDesignViewTypes>('CHALLENGES DETAILS')
24+
25+
return (
26+
<BaseModal
27+
onClose={props.onClose}
28+
open
29+
size='body'
30+
title='Application Front End Design'
31+
>
32+
33+
<div className={styles.container}>
34+
<div className='member-stat-header'>
35+
<div>
36+
<span className='member-stat-value'>{props.feDesignStats?.wins}</span>
37+
Wins
38+
</div>
39+
<div>
40+
<span className='member-stat-value'>{props.feDesignStats?.challenges}</span>
41+
Challenges
42+
</div>
43+
<div>
44+
<span className='member-stat-value'>
45+
{numberToFixed(props.feDesignStats?.rank?.overallPercentile || 0)}
46+
%
47+
</span>
48+
Percentile
49+
</div>
50+
<div>
51+
<span className='member-stat-value'>
52+
{numberToFixed(props.feDesignStats?.screeningSuccessRate || 0)}
53+
%
54+
</span>
55+
Screening Success Rate
56+
</div>
57+
<div>
58+
<span className='member-stat-value'>
59+
{numberToFixed(props.feDesignStats?.avgPlacement || 0)}
60+
</span>
61+
Average Placement
62+
</div>
63+
</div>
64+
65+
<div className={styles.content}>
66+
<div className={styles.contentHeader}>
67+
<h4>{viewType}</h4>
68+
</div>
69+
70+
<div className={styles.contentBody}>
71+
{
72+
viewType === 'CHALLENGES DETAILS' && (
73+
<div />
74+
)
75+
76+
}
77+
</div>
78+
</div>
79+
</div>
80+
</BaseModal>
81+
)
82+
}
83+
84+
export default FEDesignDetailsModal

‎src/apps/profiles/src/components/FEDesignDetailsModal/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as FEDesignDetailsModal } from './FEDesignDetailsModal'

‎src/apps/profiles/src/components/FrontEndFlashDetailsModal/FrontEndFlashDetailsModal.module.scss

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@import "@libs/ui/styles/includes";
2+
3+
.container {
4+
display: flex;
5+
flex-direction: column;
6+
7+
.content {
8+
.contentHeader {
9+
display: flex;
10+
justify-content: space-between;
11+
align-items: center;
12+
border-bottom: 1px solid $black-10;
13+
margin: $sp-4 0;
14+
padding-bottom: $sp-2;
15+
16+
.contentHeaderActions {
17+
button {
18+
margin-right: $sp-2;
19+
20+
&:last-child {
21+
margin-right: 0;
22+
}
23+
}
24+
}
25+
}
26+
27+
.contentBody {
28+
height: 385px;
29+
overflow: auto;
30+
31+
@include ltelg {
32+
height: auto;
33+
}
34+
}
35+
}
36+
}

‎src/apps/profiles/src/components/FrontEndFlashDetailsModal/FrontEndFlashDetailsModal.tsx

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/* eslint-disable complexity */
2+
import { Dispatch, FC, SetStateAction, useState } from 'react'
3+
4+
import { BaseModal } from '~/libs/ui'
5+
import {
6+
MemberStats,
7+
} from '~/libs/core'
8+
9+
import { numberToFixed } from '../../lib'
10+
11+
import styles from './FrontEndFlashDetailsModal.module.scss'
12+
13+
type WebDesignViewTypes = 'CHALLENGES DETAILS'
14+
15+
interface FrontEndFlashDetailsModalProps {
16+
onClose: () => void
17+
froneEndFlashStats: MemberStats | undefined
18+
}
19+
20+
const FrontEndFlashDetailsModal: FC<FrontEndFlashDetailsModalProps> = (props: FrontEndFlashDetailsModalProps) => {
21+
const [viewType]: [WebDesignViewTypes, Dispatch<SetStateAction<WebDesignViewTypes>>]
22+
= useState<WebDesignViewTypes>('CHALLENGES DETAILS')
23+
24+
return (
25+
<BaseModal
26+
onClose={props.onClose}
27+
open
28+
size='body'
29+
title='Front End Flash'
30+
>
31+
32+
<div className={styles.container}>
33+
<div className='member-stat-header'>
34+
<div>
35+
<span className='member-stat-value'>{props.froneEndFlashStats?.wins}</span>
36+
Wins
37+
</div>
38+
<div>
39+
<span className='member-stat-value'>{props.froneEndFlashStats?.challenges}</span>
40+
Challenges
41+
</div>
42+
<div>
43+
<span className='member-stat-value'>
44+
{numberToFixed(props.froneEndFlashStats?.rank?.overallPercentile || 0)}
45+
%
46+
</span>
47+
Percentile
48+
</div>
49+
<div>
50+
<span className='member-stat-value'>
51+
{numberToFixed(props.froneEndFlashStats?.screeningSuccessRate || 0)}
52+
%
53+
</span>
54+
Screening Success Rate
55+
</div>
56+
<div>
57+
<span className='member-stat-value'>
58+
{numberToFixed(props.froneEndFlashStats?.avgPlacement || 0)}
59+
</span>
60+
Average Placement
61+
</div>
62+
</div>
63+
64+
<div className={styles.content}>
65+
<div className={styles.contentHeader}>
66+
<h4>{viewType}</h4>
67+
</div>
68+
69+
<div className={styles.contentBody}>
70+
{
71+
viewType === 'CHALLENGES DETAILS' && (
72+
<div />
73+
)
74+
75+
}
76+
</div>
77+
</div>
78+
</div>
79+
</BaseModal>
80+
)
81+
}
82+
83+
export default FrontEndFlashDetailsModal

‎src/apps/profiles/src/components/FrontEndFlashDetailsModal/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as FrontEndFlashDetailsModal } from './FrontEndFlashDetailsModal'

0 commit comments

Comments
 (0)