Skip to content

Commit d119c05

Browse files
gabriellshgabriellsh
committed
Use new modal, change box props
1 parent 8c9a926 commit d119c05

File tree

5 files changed

+48
-47
lines changed

5 files changed

+48
-47
lines changed

‎client/admin/customUserStatus/AddCustomUserStatus.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export function AddCustomUserStatus({ goToNew, close, setCache, ...props }) {
3434
['offline', t('Offline')],
3535
];
3636

37-
return <Box display='flex' flexDirection='column' textStyle='p1' textColor='default' mbs='x20' {...props}>
37+
return <Box display='flex' flexDirection='column' fontScale='p1' color='default' mbs='x20' {...props}>
3838
<Margins block='x4'>
3939
<Field>
4040
<Field.Label>{t('Name')}</Field.Label>

‎client/admin/customUserStatus/CustomUserStatus.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ export function CustomUserStatus({
3737
const renderRow = (status) => {
3838
const { _id, name, statusType } = status;
3939
return <Table.Row key={_id} onKeyDown={onClick(_id, status)} onClick={onClick(_id, status)} tabIndex={0} role='link' action qa-user-id={_id}>
40-
<Table.Cell textStyle='p1' textColor='default' style={style}>{name}</Table.Cell>
41-
<Table.Cell textStyle='p1' textColor='default' style={style}>{statusType}</Table.Cell>
40+
<Table.Cell fontScale='p1' color='default' style={style}>{name}</Table.Cell>
41+
<Table.Cell fontScale='p1' color='default' style={style}>{statusType}</Table.Cell>
4242
</Table.Row>;
4343
};
4444

‎client/admin/customUserStatus/CustomUserStatusRoute.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ export default function CustomUserStatusRoute({ props }) {
3131
const [params, setParams] = useState({ text: '', current: 0, itemsPerPage: 25 });
3232
const [sort, setSort] = useState(['name', 'asc']);
3333
const [cache, setCache] = useState();
34-
const [modal, setModal] = useState();
3534

3635
const debouncedParams = useDebouncedValue(params, 500);
3736
const debouncedSort = useDebouncedValue(sort, 500);
@@ -95,10 +94,9 @@ export default function CustomUserStatusRoute({ props }) {
9594
{ context === 'new' && t('Custom_User_Status_Add') }
9695
<VerticalBar.Close onClick={close}/></VerticalBar.Header>
9796
<VerticalBar.Content>
98-
{context === 'edit' && <EditCustomUserStatusWithData _id={id} close={close} setCache={setCache} cache={cache} setModal={setModal}/>}
97+
{context === 'edit' && <EditCustomUserStatusWithData _id={id} close={close} setCache={setCache} cache={cache}/>}
9998
{context === 'new' && <AddCustomUserStatus goToNew={onClick} close={close} setCache={setCache}/>}
10099
</VerticalBar.Content>
101100
</VerticalBar>}
102-
{ modal && modal }
103101
</Page>;
104102
}

‎client/admin/customUserStatus/EditCustomUserStatus.js‎

Lines changed: 43 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ const DeleteWarningModal = ({ onDelete, onCancel, ...props }) => {
1111
const t = useTranslation();
1212
return <Modal {...props}>
1313
<Modal.Header>
14-
<Icon textColor='danger' name='modal-warning' size={20}/>
14+
<Icon color='danger' name='modal-warning' size={20}/>
1515
<Modal.Title>{t('Are_you_sure')}</Modal.Title>
1616
<Modal.Close onClick={onCancel}/>
1717
</Modal.Header>
18-
<Modal.Content textStyle='p1'>
18+
<Modal.Content fontScale='p1'>
1919
{t('Custom_User_Status_Delete_Warning')}
2020
</Modal.Content>
2121
<Modal.Footer>
@@ -31,11 +31,11 @@ const SuccessModal = ({ onClose, ...props }) => {
3131
const t = useTranslation();
3232
return <Modal {...props}>
3333
<Modal.Header>
34-
<Icon textColor='success' name='checkmark-circled' size={20}/>
34+
<Icon color='success' name='checkmark-circled' size={20}/>
3535
<Modal.Title>{t('Deleted')}</Modal.Title>
3636
<Modal.Close onClick={onClose}/>
3737
</Modal.Header>
38-
<Modal.Content textStyle='p1'>
38+
<Modal.Content fontScale='p1'>
3939
{t('Custom_User_Status_Has_Been_Deleted')}
4040
</Modal.Content>
4141
<Modal.Footer>
@@ -71,20 +71,21 @@ export function EditCustomUserStatusWithData({ _id, cache, ...props }) {
7171
}
7272

7373
if (error || !data || data.statuses.length < 1) {
74-
return <Box textStyle='h1' pb='x20'>{t('Custom_User_Status_Error_Invalid_User_Status')}</Box>;
74+
return <Box fontScale='h1' pb='x20'>{t('Custom_User_Status_Error_Invalid_User_Status')}</Box>;
7575
}
7676

7777
return <EditCustomUserStatus data={data.statuses[0]} {...props}/>;
7878
}
7979

80-
export function EditCustomUserStatus({ close, setCache, setModal, data, ...props }) {
80+
export function EditCustomUserStatus({ close, setCache, data, ...props }) {
8181
const t = useTranslation();
8282
const dispatchToastMessage = useToastMessageDispatch();
8383

8484
const { _id, name: previousName, statusType: previousStatusType } = data || {};
8585

8686
const [name, setName] = useState('');
8787
const [statusType, setStatusType] = useState('');
88+
const [modal, setModal] = useState();
8889

8990
useEffect(() => {
9091
setName(previousName || '');
@@ -114,11 +115,10 @@ export function EditCustomUserStatus({ close, setCache, setModal, data, ...props
114115
const onDeleteConfirm = useCallback(async () => {
115116
try {
116117
await deleteStatus(_id);
117-
setModal(() => <SuccessModal onClose={() => setModal(undefined)}/>);
118-
setCache(new Date());
119-
close();
118+
setModal(() => <SuccessModal onClose={() => { setModal(undefined); close(); setCache(new Date()); }}/>);
120119
} catch (error) {
121120
dispatchToastMessage({ type: 'error', message: error });
121+
setCache(new Date());
122122
}
123123
}, [_id]);
124124

@@ -131,35 +131,38 @@ export function EditCustomUserStatus({ close, setCache, setModal, data, ...props
131131
['offline', t('Offline')],
132132
];
133133

134-
return <Box display='flex' flexDirection='column' textStyle='p1' textColor='default' mbs='x20' {...props}>
135-
<Margins block='x4'>
136-
<Field>
137-
<Field.Label>{t('Name')}</Field.Label>
138-
<Field.Row>
139-
<TextInput value={name} onChange={(e) => setName(e.currentTarget.value)} placeholder={t('Name')} />
140-
</Field.Row>
141-
</Field>
142-
<Field>
143-
<Field.Label>{t('Presence')}</Field.Label>
144-
<Field.Row>
145-
<Select value={statusType} onChange={(value) => setStatusType(value)} placeholder={t('Presence')} options={presenceOptions}/>
146-
</Field.Row>
147-
</Field>
148-
<Field>
149-
<Field.Row>
150-
<ButtonGroup stretch w='full'>
151-
<Button onClick={close}>{t('Cancel')}</Button>
152-
<Button primary onClick={handleSave} disabled={!hasUnsavedChanges}>{t('Save')}</Button>
153-
</ButtonGroup>
154-
</Field.Row>
155-
</Field>
156-
<Field>
157-
<Field.Row>
158-
<ButtonGroup stretch w='full'>
159-
<Button primary danger onClick={openConfirmDelete}><Icon name='trash' mie='x4'/>{t('Delete')}</Button>
160-
</ButtonGroup>
161-
</Field.Row>
162-
</Field>
163-
</Margins>
164-
</Box>;
134+
return <>
135+
<Box display='flex' flexDirection='column' fontScale='p1' color='default' mbs='x20' {...props}>
136+
<Margins block='x4'>
137+
<Field>
138+
<Field.Label>{t('Name')}</Field.Label>
139+
<Field.Row>
140+
<TextInput value={name} onChange={(e) => setName(e.currentTarget.value)} placeholder={t('Name')} />
141+
</Field.Row>
142+
</Field>
143+
<Field>
144+
<Field.Label>{t('Presence')}</Field.Label>
145+
<Field.Row>
146+
<Select value={statusType} onChange={(value) => setStatusType(value)} placeholder={t('Presence')} options={presenceOptions}/>
147+
</Field.Row>
148+
</Field>
149+
<Field>
150+
<Field.Row>
151+
<ButtonGroup stretch w='full'>
152+
<Button onClick={close}>{t('Cancel')}</Button>
153+
<Button primary onClick={handleSave} disabled={!hasUnsavedChanges}>{t('Save')}</Button>
154+
</ButtonGroup>
155+
</Field.Row>
156+
</Field>
157+
<Field>
158+
<Field.Row>
159+
<ButtonGroup stretch w='full'>
160+
<Button primary danger onClick={openConfirmDelete}><Icon name='trash' mie='x4'/>{t('Delete')}</Button>
161+
</ButtonGroup>
162+
</Field.Row>
163+
</Field>
164+
</Margins>
165+
</Box>
166+
{ modal && modal }
167+
</>;
165168
}

‎client/components/basic/VerticalBar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export function VerticalBar({
2929
}
3030

3131
export function VerticalBarHeader(props) {
32-
return <Box backgroundColor='neutral-100' textStyle='s2' pb='x32' pi='x24' display='flex' alignItems='center' justifyContent='space-between' {...props} />;
32+
return <Box backgroundColor='neutral-100' fontScale='s2' pb='x32' pi='x24' display='flex' alignItems='center' justifyContent='space-between' {...props} />;
3333
}
3434

3535
export function VerticalBarClose(props) {

0 commit comments

Comments
 (0)