Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit cc4b75c

Browse files
narekcatnarekcat
committed
Fix issue 17, 'Add to Group', 'Manage Filters' and 'Edit Profile' modals fully visible.
1 parent 6cf9adb commit cc4b75c

File tree

7 files changed

+211
-185
lines changed

7 files changed

+211
-185
lines changed

‎client/src/components/AddToGroupModal/index.jsx

Lines changed: 56 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -137,57 +137,63 @@ export default function AddToGroupModal({ onCancel, updateUser, user }) {
137137
overlayClassName={style.overlay}
138138
>
139139
<h1 className={style.title}>Add to Group</h1>
140-
<div className={style.searchRow}>
141-
<ZoomIcon className={style.zoomIcon} />
142-
<input
143-
className={style.search}
144-
onChange={({ target }) => {
145-
setFilter(target.value);
146-
setImmediate(() => target.focus());
147-
}}
148-
placeholder="Search or create group"
149-
value={filter}
150-
disabled={loadingGroups}
151-
/>
152-
<Button
153-
className={style.createButton}
154-
onClick={createGroup}
155-
disabled={creatingGroup}
156-
>
157-
{creatingGroup ? "Creating..." : "+ Create"}
158-
</Button>
159-
</div>
160-
<h3 className={style.subTitle}>
161-
My groups{loadingGroups && " (Loading...)"}
162-
</h3>
163-
<div className={style.groups}>
164-
{!loadingGroups &&
165-
myGroups
166-
.filter((g) => g.name.toLowerCase().includes(filter.toLowerCase()))
167-
.map((g) => (
168-
<Group
169-
checked={g.isSelected === true}
170-
group={g}
171-
key={g.id}
172-
onSwitch={() => switchSelected(g)}
173-
/>
174-
))}
175-
</div>
176-
<h3 className={style.subTitle}>
177-
Other Groups{loadingGroups && " (Loading...)"}
178-
</h3>
179140
<div className={style.groups}>
180-
{!loadingGroups &&
181-
otherGroups
182-
.filter((g) => g.name.toLowerCase().includes(filter.toLowerCase()))
183-
.map((g) => (
184-
<Group
185-
checked={g.isSelected === true}
186-
group={g}
187-
key={g.id}
188-
onSwitch={() => switchSelected(g)}
189-
/>
190-
))}
141+
<div className={style.searchRow}>
142+
<ZoomIcon className={style.zoomIcon} />
143+
<input
144+
className={style.search}
145+
onChange={({ target }) => {
146+
setFilter(target.value);
147+
setImmediate(() => target.focus());
148+
}}
149+
placeholder="Search or create group"
150+
value={filter}
151+
disabled={loadingGroups}
152+
/>
153+
<Button
154+
className={style.createButton}
155+
onClick={createGroup}
156+
disabled={creatingGroup}
157+
>
158+
{creatingGroup ? "Creating..." : "+ Create"}
159+
</Button>
160+
</div>
161+
<h3 className={style.subTitle}>
162+
My groups{loadingGroups && " (Loading...)"}
163+
</h3>
164+
<div>
165+
{!loadingGroups &&
166+
myGroups
167+
.filter((g) =>
168+
g.name.toLowerCase().includes(filter.toLowerCase())
169+
)
170+
.map((g) => (
171+
<Group
172+
checked={g.isSelected === true}
173+
group={g}
174+
key={g.id}
175+
onSwitch={() => switchSelected(g)}
176+
/>
177+
))}
178+
</div>
179+
<h3 className={style.subTitle}>
180+
Other Groups{loadingGroups && " (Loading...)"}
181+
</h3>
182+
<div>
183+
{!loadingGroups &&
184+
otherGroups
185+
.filter((g) =>
186+
g.name.toLowerCase().includes(filter.toLowerCase())
187+
)
188+
.map((g) => (
189+
<Group
190+
checked={g.isSelected === true}
191+
group={g}
192+
key={g.id}
193+
onSwitch={() => switchSelected(g)}
194+
/>
195+
))}
196+
</div>
191197
</div>
192198
<div className={style.buttons}>
193199
<Button onClick={onCancel} disabled={updatingGroups || creatingGroup}>

‎client/src/components/AddToGroupModal/style.module.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444

4545
.groups {
4646
margin: 0 -30px;
47-
max-height: 150px;
47+
max-height: calc(95vh - 157px);
4848
overflow-y: auto;
4949
}
5050

@@ -68,10 +68,12 @@
6868
.searchRow {
6969
display: flex;
7070
position: relative;
71+
margin: 0 30px;
7172
}
7273

7374
.subTitle {
7475
@include h3;
76+
margin-left: 30px;
7577
}
7678

7779
.title {

‎client/src/components/EditProfileModal/index.jsx

Lines changed: 121 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -114,132 +114,136 @@ export default function EditProfileModal({
114114
{isSavingChanges ? "Saving changes, please wait..." : "Save"}
115115
</Button>
116116
</div>
117-
<h3>General</h3>
118-
<div className={style.inputs}>
119-
<Input
120-
label="First name"
121-
onChange={({ target }) => {
122-
setLocalUser({
123-
...localUser,
124-
firstName: target.value,
125-
});
126-
setImmediate(() => target.focus());
127-
}}
128-
value={localUser.firstName}
129-
/>
130-
<Input
131-
label="Last name"
132-
onChange={({ target }) => {
133-
setLocalUser({
134-
...localUser,
135-
lastName: target.value,
136-
});
137-
setImmediate(() => target.focus());
138-
}}
139-
value={localUser.lastName}
140-
/>
141-
<Input
142-
label="Current role"
143-
onChange={({ target }) => {
144-
setLocalUser({
145-
...localUser,
146-
title: {
147-
id: localUser.title.id,
148-
value: target.value,
149-
},
150-
});
151-
setImmediate(() => target.focus());
152-
}}
153-
value={localUser.title.value}
154-
/>
155-
<Input
156-
label="Company"
157-
onChange={({ target }) => {
158-
setLocalUser({
159-
...localUser,
160-
company: {
161-
id: localUser.company.id,
162-
value: target.value,
163-
},
164-
});
165-
setImmediate(() => target.focus());
166-
}}
167-
value={localUser.company.value}
168-
/>
169-
<Input
170-
label="Location"
171-
onChange={({ target }) => {
172-
setLocalUser({
173-
...localUser,
174-
location: {
175-
id: localUser.location.id,
176-
value: target.value,
177-
},
178-
});
179-
setImmediate(() => target.focus());
180-
}}
181-
value={localUser.location.value}
182-
/>
183-
</div>
184-
<h3>Skills</h3>
185-
<div className={style.pillGroup}>
186-
<SuggestionBox
187-
placeholder={"Search skill to add"}
188-
onSelect={addSkill}
189-
purpose="skills"
190-
/>
191-
{localUser.skills
192-
.filter((item) => !item.isDeleted)
193-
.map((item) => (
194-
<Pill
195-
key={`${item.skillProviderId}-${item.externalId}`}
196-
name={item.name}
197-
onRemove={() => {
198-
deleteSkill(item.externalId);
199-
}}
200-
/>
201-
))}
202-
</div>
203-
<h3>Achievements</h3>
204-
<div className={style.pillGroup}>
205-
{localUser.achievements.length > 0 &&
206-
localUser.achievements.map((value, key) => (
207-
<Pill key={key} name={value} removable={false} />
208-
))}
209-
{localUser.achievements.length === 0 && (
210-
<span className={style.message}>
211-
{"This user has no achievements"}
212-
</span>
213-
)}
214-
</div>
215-
<h3>Custom attributes</h3>
216-
<div className={style.companyAttributes}>
217-
{localUser.companyAttributes.map((attr, key) => (
117+
<div className={style.body}>
118+
<h3>General</h3>
119+
<div className={style.inputs}>
218120
<Input
219-
key={key}
220-
label={attr.name}
121+
label="First name"
221122
onChange={({ target }) => {
222123
setLocalUser({
223124
...localUser,
224-
companyAttributes: localUser.companyAttributes.map((el) =>
225-
el.id === attr.id ? { ...el, value: target.value } : el
226-
),
125+
firstName: target.value,
227126
});
228127
setImmediate(() => target.focus());
229128
}}
230-
value={localUser.companyAttributes[key].value}
129+
value={localUser.firstName}
231130
/>
232-
))}
131+
<Input
132+
label="Last name"
133+
onChange={({ target }) => {
134+
setLocalUser({
135+
...localUser,
136+
lastName: target.value,
137+
});
138+
setImmediate(() => target.focus());
139+
}}
140+
value={localUser.lastName}
141+
/>
142+
<Input
143+
label="Current role"
144+
onChange={({ target }) => {
145+
setLocalUser({
146+
...localUser,
147+
title: {
148+
id: localUser.title.id,
149+
value: target.value,
150+
},
151+
});
152+
setImmediate(() => target.focus());
153+
}}
154+
value={localUser.title.value}
155+
/>
156+
<Input
157+
label="Company"
158+
onChange={({ target }) => {
159+
setLocalUser({
160+
...localUser,
161+
company: {
162+
id: localUser.company.id,
163+
value: target.value,
164+
},
165+
});
166+
setImmediate(() => target.focus());
167+
}}
168+
value={localUser.company.value}
169+
/>
170+
<Input
171+
label="Location"
172+
onChange={({ target }) => {
173+
setLocalUser({
174+
...localUser,
175+
location: {
176+
id: localUser.location.id,
177+
value: target.value,
178+
},
179+
});
180+
setImmediate(() => target.focus());
181+
}}
182+
value={localUser.location.value}
183+
/>
184+
</div>
185+
<h3>Skills</h3>
186+
<div className={style.pillGroup}>
187+
<SuggestionBox
188+
placeholder={"Search skill to add"}
189+
onSelect={addSkill}
190+
purpose="skills"
191+
/>
192+
{localUser.skills
193+
.filter((item) => !item.isDeleted)
194+
.map((item) => (
195+
<Pill
196+
key={`${item.skillProviderId}-${item.externalId}`}
197+
name={item.name}
198+
onRemove={() => {
199+
deleteSkill(item.externalId);
200+
}}
201+
/>
202+
))}
203+
</div>
204+
<h3>Achievements</h3>
205+
<div className={style.pillGroup}>
206+
{localUser.achievements.length > 0 &&
207+
localUser.achievements.map((value, key) => (
208+
<Pill key={key} name={value} removable={false} />
209+
))}
210+
{localUser.achievements.length === 0 && (
211+
<span className={style.message}>
212+
{"This user has no achievements"}
213+
</span>
214+
)}
215+
</div>
216+
<h3>Custom attributes</h3>
217+
<div className={style.companyAttributes}>
218+
{localUser.companyAttributes.map((attr, key) => (
219+
<Input
220+
key={key}
221+
label={attr.name}
222+
onChange={({ target }) => {
223+
setLocalUser({
224+
...localUser,
225+
companyAttributes: localUser.companyAttributes.map((el) =>
226+
el.id === attr.id ? { ...el, value: target.value } : el
227+
),
228+
});
229+
setImmediate(() => target.focus());
230+
}}
231+
value={localUser.companyAttributes[key].value}
232+
/>
233+
))}
234+
</div>
235+
<Button
236+
className={
237+
isDeactivatingUser
238+
? style.disabledDangerButton
239+
: style.dangerButton
240+
}
241+
onClick={confirmDeactivateUser}
242+
disabled={isDeactivatingUser || isSavingChanges}
243+
>
244+
{isDeactivatingUser ? "Deactivating" : "Deactivate this user"}
245+
</Button>
233246
</div>
234-
<Button
235-
className={
236-
isDeactivatingUser ? style.disabledDangerButton : style.dangerButton
237-
}
238-
onClick={confirmDeactivateUser}
239-
disabled={isDeactivatingUser || isSavingChanges}
240-
>
241-
{isDeactivatingUser ? "Deactivating" : "Deactivate this user"}
242-
</Button>
243247
</div>
244248
</Modal>
245249
);

0 commit comments

Comments
 (0)