Skip to content

Commit b2bd382

Browse files
CREDO23CREDO23
authored
[Bug] Settings | Team Size: Save / cancel button hidden and changes not being saved (#4100)
* move team size constants in the constants file * migrate to headless/ui popover * fix styling * Add ai bot suggestions * reset changes * fix overlap * persist value * clean up * add ai bot suggestions
1 parent a6f045d commit b2bd382

File tree

3 files changed

+88
-64
lines changed

3 files changed

+88
-64
lines changed

‎apps/web/core/components/pages/settings/team/team-setting-form.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,20 @@ export const TeamSettingForm = () => {
186186
[setValue]
187187
);
188188

189+
const handleTimeSizeUpdate = useCallback(async () => {
190+
try {
191+
await editOrganizationTeam({
192+
id: activeTeam?.id,
193+
teamSize: getValues('teamSize')
194+
});
195+
196+
toast.success('Team size updated successfully');
197+
} catch (error) {
198+
console.error('Team size update failed:', error);
199+
toast.error('Failed to update team size. Please try again.');
200+
}
201+
}, [editOrganizationTeam, activeTeam?.id, getValues]);
202+
189203
const handleTeamNameUpdate = useCallback(async () => {
190204
try {
191205
await editOrganizationTeam({
@@ -356,6 +370,7 @@ export const TeamSettingForm = () => {
356370
}}
357371
isTeamManager={isTeamManager}
358372
disabled={!isTeamManager}
373+
onSave={handleTimeSizeUpdate}
359374
/>
360375
</div>
361376
</div>

‎apps/web/core/components/teams/team-size-popover.tsx‎

Lines changed: 55 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -3,57 +3,53 @@ import { Button } from '@/core/components';
33
import { useCallback, useEffect, useRef, useState } from 'react';
44
import { useTranslations } from 'next-intl';
55
import { EditPenUnderlineIcon } from 'assets/svg';
6+
import { sizeOption } from '@/core/constants/config/constants';
7+
import { LoaderCircle } from 'lucide-react';
68

7-
const sizeOption = [
8-
{
9-
name: 'Only me'
10-
},
11-
{
12-
name: '2 - 5'
13-
},
14-
{
15-
name: '6 - 20'
16-
},
17-
{
18-
name: '21 - 100'
19-
},
20-
{
21-
name: '100+'
22-
}
23-
];
249
const TeamSize = ({
2510
defaultValue,
2611
onChange,
2712
isTeamManager,
28-
disabled: disableButton
13+
disabled: disableButton,
14+
onSave
2915
}: {
3016
defaultValue: string;
3117
onChange: (teamSize: string) => void;
3218
isTeamManager: boolean;
3319
disabled?: boolean;
20+
onSave? : (data? : Record<string, any>) => Promise<void>
3421
}) => {
3522
const t = useTranslations();
3623
const [value, setValue] = useState(defaultValue || 'Only me');
3724
const buttonRef = useRef<HTMLButtonElement>(null);
3825
const panelRef = useRef<HTMLDivElement>(null);
3926
const [disabled, setDisabled] = useState<boolean>(true);
27+
const [loading, setLoading] = useState(false)
4028

4129
const toggleDisabled = useCallback(() => {
4230
setDisabled(!disabled);
4331
}, [disabled]);
4432

4533
const onSelect = (value: any) => {
4634
setValue(value);
35+
onChange(value);
4736
};
4837
// const Close = () => {
4938
// setValue('');
5039
// buttonRef.current?.click();
5140
// };
5241

53-
const handleSave = useCallback(() => {
54-
onChange(value);
42+
const handleSave = useCallback(async () => {
43+
setLoading(true);
44+
try {
45+
await onSave?.();
46+
} catch (error) {
47+
console.error('Error saving team size:', error);
48+
} finally {
49+
setLoading(false);
50+
}
5551
setDisabled(true);
56-
}, [value, onChange]);
52+
}, [onSave]);
5753

5854
useEffect(() => {
5955
setValue(defaultValue);
@@ -88,24 +84,21 @@ const TeamSize = ({
8884
}, [defaultValue, onChange]);
8985

9086
return (
91-
<Popover className="relative w-full no-underline border-none">
92-
{() => (
93-
<>
94-
<PopoverButton
95-
className="outline-none w-full"
96-
ref={buttonRef}
97-
disabled={disableButton}
98-
onClick={toggleDisabled}
99-
as="div"
100-
>
101-
<div
102-
className={`relative w-[100%] h-[48px] ${
103-
disabled ? 'bg-[#FCFCFC]' : 'bg-light--theme-light'
104-
} dark:bg-dark--theme-light border rounded-[10px] flex items-center justify-between input-border`}
87+
<div
88+
className={`group px-3 relative w-[100%] h-[48px] border rounded-[10px] flex gap-1 items-center justify-between input-border dark:bg-dark--theme-light ${
89+
disabled ? 'bg-[#FCFCFC]' : 'bg-light--theme-light'
90+
}`}
91+
>
92+
<span className="w-[5rem] shrink-0 text-left ">{defaultValue}</span>
93+
<Popover className="group grow">
94+
{() => (
95+
<>
96+
<PopoverButton className="w-full flex items-center gap-2 justify-end h-full outline-none"
97+
ref={buttonRef}
98+
disabled={disableButton}
99+
onClick={toggleDisabled}
100+
as="div"
105101
>
106-
<div className="flex gap-[8px] h-[40px] items-center pl-[15px]">
107-
<div className="dark:text-white">{defaultValue}</div>
108-
</div>
109102
{isTeamManager && (
110103
<button
111104
className={`flex mr-[0.5rem] gap-3 outline-none`}
@@ -117,29 +110,27 @@ const TeamSize = ({
117110
<EditPenUnderlineIcon className="w-6 h-6 text-inherit" />
118111
</button>
119112
)}
120-
</div>
121-
</PopoverButton>
122-
<Transition
123-
as="div"
124-
enter="transition ease-out duration-200"
125-
enterFrom="opacity-0 translate-y-1"
126-
enterTo="opacity-100 translate-y-0"
127-
leave="transition ease-in duration-150"
128-
leaveFrom="opacity-100 translate-y-0"
129-
leaveTo="opacity-0 translate-y-1"
130-
show={!disabled}
131-
>
132-
<PopoverPanel
133-
ref={panelRef}
134-
className="absolute left-1/2 z-10 mt-0 w-[354px] max-w-sm -translate-x-1/2 transform sm:px-0 lg:max-w-3xl shandow outline-none"
113+
</PopoverButton>
114+
<Transition
115+
as="div"
116+
enter="transition ease-out duration-200"
117+
enterFrom="opacity-0 translate-y-1"
118+
enterTo="opacity-100 translate-y-0"
119+
leave="transition ease-in duration-150"
120+
leaveFrom="opacity-100 translate-y-0"
121+
leaveTo="opacity-0 translate-y-1"
122+
show={!disabled}
135123
>
136-
<div className="bg-white shadow rounded-xl text-[14px] p-[16px] dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] flex flex-col gap-4">
124+
<PopoverPanel
125+
ref={panelRef}
126+
anchor="bottom end"
127+
className="mt-5 bg-light--theme-light dark:bg-dark--theme-light border p-3 rounded-xl shadow-xlcard flex flex-col gap-3"
128+
>
137129
<div className="text-lg text-[#7E7991] dark:text-gray-400 font-[500]">
138130
{t('form.SELECT_TEAM_SIZE')}
139131
</div>
140132
{/* Divider */}
141133
<div className="h-[0.0625rem] bg-[#E5E5E5] dark:bg-[#FFFFFF14]"></div>
142-
143134
<div className="flex flex-col hover:cursor-pointer">
144135
{sizeOption.map((size, index) => {
145136
return (
@@ -162,17 +153,16 @@ const TeamSize = ({
162153
);
163154
})}
164155
</div>
165-
166156
{/* Divider */}
167157
<div className="h-[0.0625rem] bg-[#E5E5E5] dark:bg-[#FFFFFF14]"></div>
168-
169158
<div className="flex items-center justify-end space-x-2">
170159
<Button
171160
variant="primary"
172161
className="font-normal rounded-xl text-md min-w-[90px] bg-[#E6E6E9] text-[#1A1C1E]"
173162
type="submit"
174163
style={{ background: '#E6E6E9' }}
175164
onClick={handleClose}
165+
disabled={loading}
176166
>
177167
{t('common.CANCEL')}
178168
</Button>
@@ -181,16 +171,17 @@ const TeamSize = ({
181171
className="font-normal rounded-xl text-sm min-w-[90px] h-[48px]"
182172
type="submit"
183173
onClick={handleSave}
174+
disabled={loading}
184175
>
185-
{t('common.SAVE')}
176+
{loading ? <LoaderCircle className="w-[18px] h-[18px] animate-spin" strokeWidth="1.4" /> : t('common.SAVE')}
186177
</Button>
187178
</div>
188-
</div>
189-
</PopoverPanel>
190-
</Transition>
191-
</>
192-
)}
193-
</Popover>
179+
</PopoverPanel>
180+
</Transition>
181+
</>
182+
)}
183+
</Popover>
184+
</div>
194185
);
195186
};
196187

‎apps/web/core/constants/config/constants.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -844,3 +844,21 @@ export const InviteStatusDisplayMap = {
844844
} as const;
845845
export const ITEMS_LENGTH_TO_VIRTUALIZED = 8;
846846
export const LOCAL_TIMER_STORAGE_KEY = 'local-timer-ever-team';
847+
848+
export const sizeOption = [
849+
{
850+
name: 'Only me'
851+
},
852+
{
853+
name: '2 - 5'
854+
},
855+
{
856+
name: '6 - 20'
857+
},
858+
{
859+
name: '21 - 100'
860+
},
861+
{
862+
name: '100+'
863+
}
864+
];

0 commit comments

Comments
 (0)