Skip to content

Commit

Permalink
Pressing Enter key when cloning does not clone the data (#807)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DavidQuartz
DavidQuartz authored Feb 8, 2022
1 parent 1a0be5e commit 9d00832
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 86 deletions.
1 change: 1 addition & 0 deletions geonode_mapstore_client/client/js/plugins/SaveAs.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ function SaveAs({
<SaveModal
{...props}
hideDescription={!isNew}
copy={!isNew}
// add key to reset the component when a new resource is returned
key={props?.resource?.pk || 'new'}
labelId={labelId || 'save'}
Expand Down
199 changes: 113 additions & 86 deletions geonode_mapstore_client/client/js/plugins/save/SaveModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@ function SaveModal({
onClose,
onSave,
onClear,
hideDescription
hideDescription,
copy
}) {

const [thumbnail, setThumbnail] = useState();
Expand All @@ -43,6 +44,8 @@ function SaveModal({
resource
};

const currentModal = useRef(null);

useEffect(() => {
onClear();
}, [ enabled ]);
Expand All @@ -61,94 +64,118 @@ function SaveModal({

const isLoading = loading || saving;

return (
<Portal>
<ResizableModal
title={<Message msgId={labelId}/>}
show={enabled}
fitContent
clickOutEnabled={false}
buttons={isLoading
? []
: [

useEffect(() => {
// clone on enter key press
if (copy && currentModal?.current) {
currentModal?.current?.addEventListener('keyup', (event) => {
if (event.keyCode === 13) {
event.preventDefault();
onSave(
update ? contentId : undefined,
{
text: <Message msgId="close"/>,
onClick: () => onClose()
thumbnail,
name,
description
},
{
text: <Message msgId={labelId}/>,
disabled: !!nameValidation,
bsStyle: 'primary',
onClick: () => onSave(
update ? contentId : undefined,
{
thumbnail,
name,
description
},
true)
}
]}
onClose={isLoading ? null : () => onClose()}
>
{error && <Alert bsStyle="danger" style={{ margin: 0 }}>
<div><Message msgId="map.mapError.errorDefault" /></div>
</Alert>}
{success && <Alert bsStyle="success" style={{ margin: 0 }}>
<div><Message msgId="saveDialog.saveSuccessMessage" /></div>
</Alert>}
<Form>
<FormGroup
validationState={nameValidation}
>
<ControlLabel>
<Message msgId="gnviewer.title" />
</ControlLabel>
<FormControl
placeholder="gnviewer.titlePlaceholder"
value={name}
onChange={(event) => {
setName(event.target.value);
setNameValidation(!event.target.value
? 'error'
: undefined);
}}
onBlur={(event) => {
setNameValidation(!event.target.value
? 'error'
: undefined
);
}}
/>
</FormGroup>
{!hideDescription && <FormGroup>
<ControlLabel>
<Message msgId="saveDialog.description" />
</ControlLabel>
<FormControl
placeholder="saveDialog.descriptionPlaceholder"
value={description}
onChange={(event) => setDescription(event.target.value)}
/>
</FormGroup>}
</Form>
{isLoading && <div
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
zIndex: 2,
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
true);
}
});
}
return () => currentModal?.current?.removeEventListener('keyup', () => {});
}, []);

return (
<Portal>
<div ref={currentModal}>
<ResizableModal
title={<Message msgId={labelId}/>}
show={enabled}
fitContent
clickOutEnabled={false}
buttons={isLoading
? []
: [
{
text: <Message msgId="close"/>,
onClick: () => onClose()
},
{
text: <Message msgId={labelId}/>,
disabled: !!nameValidation,
bsStyle: 'primary',
onClick: () => onSave(
update ? contentId : undefined,
{
thumbnail,
name,
description
},
true)
}
]}
onClose={isLoading ? null : () => onClose()}
>
<Loader size={70}/>
</div>}
</ResizableModal>
{error && <Alert bsStyle="danger" style={{ margin: 0 }}>
<div><Message msgId="map.mapError.errorDefault" /></div>
</Alert>}
{success && <Alert bsStyle="success" style={{ margin: 0 }}>
<div><Message msgId="saveDialog.saveSuccessMessage" /></div>
</Alert>}
<Form>
<FormGroup
validationState={nameValidation}
>
<ControlLabel>
<Message msgId="gnviewer.title" />
</ControlLabel>
<FormControl
autoFocus
placeholder="gnviewer.titlePlaceholder"
value={name}
onChange={(event) => {
setName(event.target.value);
setNameValidation(!event.target.value
? 'error'
: undefined);
}}
onBlur={(event) => {
setNameValidation(!event.target.value
? 'error'
: undefined
);
}}
/>
</FormGroup>
{!hideDescription && <FormGroup>
<ControlLabel>
<Message msgId="saveDialog.description" />
</ControlLabel>
<FormControl
placeholder="saveDialog.descriptionPlaceholder"
value={description}
onChange={(event) => setDescription(event.target.value)}
/>
</FormGroup>}
</Form>
{isLoading && <div
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
zIndex: 2,
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
<Loader size={70}/>
</div>}
</ResizableModal>
</div>
</Portal>
);
}
Expand Down

0 comments on commit 9d00832

Please sign in to comment.