Skip to content

Commit a6e5cbc

Browse files
kkartunovkkartunov
committed
MP-90 education figma look
1 parent 9014d8e commit a6e5cbc

File tree

5 files changed

+140
-110
lines changed

5 files changed

+140
-110
lines changed

‎src/apps/profiles/src/member-profile/education-and-certifications/EducationCard/EducationCard.module.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,28 @@
22

33
.educationCard {
44
flex: 1;
5+
margin-bottom: $sp-8;
6+
font-size: 14px;
7+
line-height: 22px;
8+
color: $black-60;
9+
10+
:global(.body-main-bold) {
11+
color: $black-100;
12+
}
13+
14+
&.educationCardModalView {
15+
margin-bottom: 0;
16+
17+
.educationCardHeader {
18+
flex-direction: column;
19+
align-items: flex-start;
20+
justify-content: flex-start;
21+
22+
:global(.body-main-bold) {
23+
margin-bottom: $sp-2;
24+
}
25+
}
26+
}
527

628
.educationCardHeader {
729
display: flex;

‎src/apps/profiles/src/member-profile/education-and-certifications/EducationCard/EducationCard.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { FC } from 'react'
2+
import classNames from 'classnames'
23
import moment from 'moment'
34

45
import { UserTrait } from '~/libs/core'
@@ -7,10 +8,11 @@ import styles from './EducationCard.module.scss'
78

89
interface EducationCardProps {
910
education: UserTrait
11+
isModalView?: boolean
1012
}
1113

1214
const EducationCard: FC<EducationCardProps> = (props: EducationCardProps) => (
13-
<div className={styles.educationCard}>
15+
<div className={classNames(styles.educationCard, props.isModalView ? styles.educationCardModalView : '')}>
1416
<div className={styles.educationCardHeader}>
1517
<div className={styles.educationCardHeaderLeft}>
1618
<p className='body-main-bold'>

‎src/apps/profiles/src/member-profile/education-and-certifications/ModifyEducationModal/ModifyEducationModal.module.scss‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,25 @@
33
.container {
44
display: flex;
55
flex-direction: column;
6+
align-items: flex-start;
67

78
.educationWrap {
8-
margin-bottom: $sp-8;
9+
margin: $sp-8 0;
10+
display: grid;
11+
grid-template-columns: 1fr 1fr;
12+
gap: $sp-4;
13+
width: 100%;
914

1015
&.noItems {
1116
margin-bottom: 0;
1217
}
1318

1419
.educationCardWrap {
1520
display: flex;
16-
align-items: center;
21+
align-items: flex-start;
22+
border: 1px solid $black-20;
23+
border-radius: 8px;
24+
padding: $sp-4;
1725

1826
.actionElements {
1927
display: flex;
@@ -60,27 +68,13 @@
6068

6169
.formWrap {
6270
margin-top: $sp-4;
71+
width: 100%;
6372

6473
@include ltelg {
6574
:global(.input-wrapper) {
6675
margin-bottom: $sp-2;
6776
}
6877
}
69-
70-
.formCTAs {
71-
display: flex;
72-
align-items: center;
73-
74-
svg {
75-
width: 14px;
76-
height: 14px;
77-
margin-right: $sp-1;
78-
}
79-
80-
.ctaBtnCancel {
81-
margin-left: $sp-8;
82-
}
83-
}
8478
}
8579
}
8680

‎src/apps/profiles/src/member-profile/education-and-certifications/ModifyEducationModal/ModifyEducationModal.tsx‎

Lines changed: 102 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ const ModifyEducationModal: FC<ModifyEducationModalProps> = (props: ModifyEducat
3333
const [isSaving, setIsSaving]: [boolean, Dispatch<SetStateAction<boolean>>]
3434
= useState<boolean>(false)
3535

36-
const [isFormChanged, setIsFormChanged]: [boolean, Dispatch<SetStateAction<boolean>>]
37-
= useState<boolean>(false)
36+
const [addingNewItem, setAddingNewItem]: [boolean, Dispatch<SetStateAction<boolean>>]
37+
= useState<boolean>(props.education?.length === 0 || false)
3838

3939
const [formValues, setFormValues]: [
4040
{ [key: string]: string | boolean | Date | undefined },
@@ -62,6 +62,12 @@ const ModifyEducationModal: FC<ModifyEducationModalProps> = (props: ModifyEducat
6262
= useState<UserTrait[] | undefined>(props.education)
6363

6464
function handleModifyEducationSave(): void {
65+
if (addingNewItem || editedItemIndex !== undefined) {
66+
handleFormAction()
67+
68+
return
69+
}
70+
6571
setIsSaving(true)
6672

6773
methodsMap[!!props.education ? 'update' : 'create'](props.profile.handle, [{
@@ -99,15 +105,12 @@ const ModifyEducationModal: FC<ModifyEducationModalProps> = (props: ModifyEducat
99105
})
100106
}
101107

102-
function handleCancelEditMode(): void {
103-
setEditedItemIndex(undefined)
104-
resetForm()
105-
}
106-
107108
function resetForm(): void {
108109
setFormValues({})
110+
setFormErrors({})
109111
formElRef.current.reset()
110112
setEditedItemIndex(undefined)
113+
setAddingNewItem(false)
111114
}
112115

113116
function handleFormAction(): void {
@@ -146,7 +149,6 @@ const ModifyEducationModal: FC<ModifyEducationModalProps> = (props: ModifyEducat
146149
)
147150
}
148151

149-
setIsFormChanged(true)
150152
resetForm()
151153
}
152154

@@ -168,117 +170,125 @@ const ModifyEducationModal: FC<ModifyEducationModalProps> = (props: ModifyEducat
168170

169171
updatedEducation.splice(indx, 1)
170172
setMemberEducation(updatedEducation)
171-
setIsFormChanged(true)
173+
}
174+
175+
function handleAddNewItem(): void {
176+
setAddingNewItem(true)
177+
}
178+
179+
function handleModifyEducationCancel(): void {
180+
if (addingNewItem || editedItemIndex !== undefined) {
181+
setAddingNewItem(false)
182+
setEditedItemIndex(undefined)
183+
resetForm()
184+
} else {
185+
props.onClose()
186+
}
172187
}
173188

174189
return (
175190
<BaseModal
176191
onClose={props.onClose}
177192
open
178193
size='lg'
179-
title='LEARNING & EDUCATION'
194+
title='EDUCATION'
180195
buttons={(
181196
<div className={styles.modalButtons}>
182197
<Button
183198
label='Cancel'
184-
onClick={props.onClose}
199+
onClick={handleModifyEducationCancel}
185200
secondary
186201
/>
187202
<Button
188203
label='Save'
189204
onClick={handleModifyEducationSave}
190205
primary
191-
disabled={isSaving || !isFormChanged}
206+
disabled={isSaving}
192207
/>
193208
</div>
194209
)}
195210
>
196211
<div className={styles.container}>
197-
<div className={classNames(styles.educationWrap, !memberEducation?.length ? styles.noItems : '')}>
198-
{
199-
memberEducation?.map((education: UserTrait, indx: number) => (
200-
<div
201-
className={styles.educationCardWrap}
202-
key={`${education.schoolCollegeName}-${education.major}`}
203-
>
204-
<EducationCard education={education} />
205-
<div className={styles.actionElements}>
206-
<Button
207-
className={styles.ctaBtn}
208-
icon={IconOutline.PencilIcon}
209-
onClick={bind(handleEducationEdit, this, indx)}
210-
size='lg'
211-
/>
212-
<Button
213-
className={styles.ctaBtn}
214-
icon={IconOutline.TrashIcon}
215-
onClick={bind(handleEducationDelete, this, indx)}
216-
size='lg'
217-
/>
218-
</div>
219-
</div>
220-
))
221-
}
222-
</div>
223212

224213
<p>
225-
Enter information about your schooling and degrees.
214+
Add degrees or other education details.
226215
</p>
227216

228-
<form
229-
ref={formElRef}
230-
className={styles.formWrap}
231-
>
232-
<InputText
233-
name='school'
234-
label='Name of College or University *'
235-
error={formErrors.schoolCollegeName}
236-
placeholder='Enter name of college or university'
237-
dirty
238-
tabIndex={0}
239-
type='text'
240-
onChange={bind(handleFormValueChange, this, 'schoolCollegeName')}
241-
value={formValues.schoolCollegeName as string}
242-
/>
243-
<InputText
244-
name='major'
245-
label='Degree *'
246-
error={formErrors.major}
247-
placeholder='Enter Degree'
248-
dirty
249-
tabIndex={-1}
250-
type='text'
251-
onChange={bind(handleFormValueChange, this, 'major')}
252-
value={formValues.major as string}
253-
/>
254-
<InputDatePicker
255-
label='End date (or expected)'
256-
date={formValues.endDate as Date}
257-
onChange={bind(handleFormValueChange, this, 'endDate')}
258-
disabled={false}
259-
error={formErrors.endDate}
260-
dirty
261-
showMonthPicker={false}
262-
showYearPicker
263-
dateFormat='yyyy'
264-
/>
265-
<div className={styles.formCTAs}>
266-
{editedItemIndex === undefined ? <IconOutline.PlusCircleIcon /> : undefined}
267-
<Button
268-
link
269-
label={`${editedItemIndex !== undefined ? 'Edit' : 'Add'} School / Degree`}
270-
onClick={handleFormAction}
271-
/>
272-
{editedItemIndex !== undefined && (
273-
<Button
274-
className={styles.ctaBtnCancel}
275-
link
276-
label='Cancel'
277-
onClick={handleCancelEditMode}
278-
/>
279-
)}
217+
{editedItemIndex === undefined && !addingNewItem ? (
218+
<div className={classNames(styles.educationWrap, !memberEducation?.length ? styles.noItems : '')}>
219+
{
220+
memberEducation?.map((education: UserTrait, indx: number) => (
221+
<div
222+
className={styles.educationCardWrap}
223+
key={`${education.schoolCollegeName}-${education.major}`}
224+
>
225+
<EducationCard education={education} isModalView />
226+
<div className={styles.actionElements}>
227+
<Button
228+
className={styles.ctaBtn}
229+
icon={IconOutline.PencilIcon}
230+
onClick={bind(handleEducationEdit, this, indx)}
231+
size='lg'
232+
/>
233+
<Button
234+
className={styles.ctaBtn}
235+
icon={IconOutline.TrashIcon}
236+
onClick={bind(handleEducationDelete, this, indx)}
237+
size='lg'
238+
/>
239+
</div>
240+
</div>
241+
))
242+
}
280243
</div>
281-
</form>
244+
) : undefined}
245+
246+
{editedItemIndex !== undefined || addingNewItem ? (
247+
<form
248+
ref={formElRef}
249+
className={styles.formWrap}
250+
>
251+
<InputText
252+
name='school'
253+
label='Name of College or University *'
254+
error={formErrors.schoolCollegeName}
255+
placeholder='Enter name of college or university'
256+
dirty
257+
tabIndex={0}
258+
type='text'
259+
onChange={bind(handleFormValueChange, this, 'schoolCollegeName')}
260+
value={formValues.schoolCollegeName as string}
261+
/>
262+
<InputText
263+
name='major'
264+
label='Degree *'
265+
error={formErrors.major}
266+
placeholder='Enter Degree'
267+
dirty
268+
tabIndex={-1}
269+
type='text'
270+
onChange={bind(handleFormValueChange, this, 'major')}
271+
value={formValues.major as string}
272+
/>
273+
<InputDatePicker
274+
label='End date (or expected)'
275+
date={formValues.endDate as Date}
276+
onChange={bind(handleFormValueChange, this, 'endDate')}
277+
disabled={false}
278+
error={formErrors.endDate}
279+
dirty
280+
showMonthPicker={false}
281+
showYearPicker
282+
dateFormat='yyyy'
283+
/>
284+
</form>
285+
) : (
286+
<Button
287+
label='+ Add Education'
288+
secondary
289+
onClick={handleAddNewItem}
290+
/>
291+
)}
282292
</div>
283293
</BaseModal>
284294
)

‎src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.module.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@
4848
border: none;
4949
background-color: transparent;
5050
margin: auto;
51+
-webkit-appearance: menulist;
52+
appearance: menulist;
5153

5254
option:hover {
5355
background-color: $turq-160;

0 commit comments

Comments
 (0)