Skip to content

Commit

Permalink
Set thumbnail through the set_thumbnail endpoint and add Apply button (…
Browse files Browse the repository at this point in the history 
…#713)
  • Loading branch information
@DavidQuartz
DavidQuartz authored Jan 18, 2022
1 parent a31e9d2 commit 3cda34b
Show file tree
Hide file tree
Showing 13 changed files with 260 additions and 45 deletions.
13 changes: 11 additions & 2 deletions geonode_mapstore_client/client/js/actions/gnresource.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export const SET_RESOURCE_COMPACT_PERMISSIONS = 'GEONODE:SET_RESOURCE_COMPACT_PE
export const UPDATE_RESOURCE_COMPACT_PERMISSIONS = 'GEONODE:UPDATE_RESOURCE_COMPACT_PERMISSIONS';
export const RESET_GEO_LIMITS = 'GEONODE:RESET_GEO_LIMITS';
export const PROCESS_RESOURCES = 'GEONODE:PROCESS_RESOURCES';
export const SET_RESOURCE_THUMBNAIL = 'GEONODE_SET_RESOURCE_THUMBNAIL';

/**
* Actions for GeoNode resource
Expand Down Expand Up @@ -85,11 +86,19 @@ export function editAbstractResource(abstract) {
* @param {string} image resource
*/

export function editThumbnailResource(thumbnailUrl) {
export function editThumbnailResource(thumbnailUrl, thumbnailChanged = 'false') {

return {
type: EDIT_THUMBNAIL_RESOURCE,
thumbnailUrl
thumbnailUrl,
thumbnailChanged
};
}

export function setResourceThumbnail() {

return {
type: SET_RESOURCE_THUMBNAIL
};
}

Expand Down
5 changes: 5 additions & 0 deletions geonode_mapstore_client/client/js/api/geonode/v2/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,6 +272,11 @@ export const setMapThumbnail = (pk, body) => {
.then(({ data }) => (data));
};

export const setResourceThumbnail = (pk, body) => {
return axios.put(parseDevHostname(`${endpoints[RESOURCES]}/${pk}/set_thumbnail`), body)
.then(({ data }) => data);
};

export const setFavoriteResource = (pk, favorite) => {
const request = favorite ? axios.post : axios.delete;
return request(parseDevHostname(`${endpoints[RESOURCES]}/${pk}/favorite`))
Expand Down
6 changes: 6 additions & 0 deletions geonode_mapstore_client/client/js/components/ContentsEditable/ThumbnailEditable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@ const ThumbnailEditable = ({
setThumbnail(data);
onEdit(data);
}}
thumbnailOptions={{
contain: false,
width: 250,
height: 184.8,
type: 'image/png'
}}
/>
<ButtonWithToolTip
variant="default"
Expand Down
40 changes: 25 additions & 15 deletions geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,14 @@ const EditAbstract = ({ abstract, onEdit, tagName, disabled }) => (
);


const EditThumbnail = ({ image, onEdit }) => (
const EditThumbnail = ({ image, onEdit, thumbnailUpdating }) => (
<div className="editContainer imagepreview">
<ThumbnailEditable onEdit={onEdit} defaultImage={image} />
{thumbnailUpdating && <div className="gn-details-thumbnail-loader">
<Loader size={50} />
</div>
}
</div>

);


Expand Down Expand Up @@ -190,14 +193,7 @@ const MapThumbnailView = ({ layers, featuresProp = [], onMapThumbnail, onClose,
]}
>
</Map>
{savingThumbnailMap && <div
style={{
position: 'absolute', width: '100%',
height: '100%', backgroundColor: 'rgba(255, 255, 255, 0.75)',
top: '0px', zIndex: 2000, display: 'flex',
alignItems: 'center', justifyContent: 'center', right: '0px'
}}>

{savingThumbnailMap && <div className="gn-details-thumbnail-loader">
<Loader size={150} />
</div>
}
Expand Down Expand Up @@ -235,7 +231,10 @@ function DetailsPanel({
enableFavorite,
onMapThumbnail,
savingThumbnailMap,
layers
layers,
isThumbnailChanged,
onResourceThumbnail,
resourceThumbnailUpdating
}) {
const detailsContainerNode = useRef();
const isMounted = useRef();
Expand Down Expand Up @@ -264,6 +263,10 @@ function DetailsPanel({
onFavorite(!favorite);
};

const handleResourceThumbnailUpdate = () => {
onResourceThumbnail();
};

const types = getTypesInfo();
const {
formatEmbedUrl = res => res?.embed_url,
Expand Down Expand Up @@ -521,19 +524,24 @@ function DetailsPanel({
{!enableMapViewer ? <> <EditThumbnail
onEdit={editThumbnail}
image={resource?.thumbnail_url}
thumbnailUpdating={resourceThumbnailUpdating}
/>
{
(resource.resource_type === ResourceTypes.MAP || resource.resource_type === ResourceTypes.DATASET) &&
( <MapThumbnailButtonToolTip
( <><MapThumbnailButtonToolTip
variant="default"
onClick={handleMapViewer}
className={"map-thumbnail"}
className="map-thumbnail"
tooltip={<Message msgId="gnviewer.saveMapThumbnail" />}
tooltipPosition={"top"}
>
<FaIcon name="map" />
</MapThumbnailButtonToolTip>)
</MapThumbnailButtonToolTip>
</>)
}
{isThumbnailChanged && <Button style={{
left: (resource.resource_type === ResourceTypes.MAP || resource.resource_type === ResourceTypes.DATASET) ? '85px' : '50px'
}} variant="primary" className="map-thumbnail apply-button" onClick={handleResourceThumbnailUpdate}><Message msgId={"gnhome.apply"} /></Button>}
</>
: <MapThumbnailView
layers={layers}
Expand Down Expand Up @@ -632,8 +640,10 @@ DetailsPanel.defaultProps = {
onClose: () => { },
formatHref: () => '#',
linkHref: () => '#',
onResourceThumbnail: () => '#',
width: 696,
getTypesInfo: getResourceTypesInfo
getTypesInfo: getResourceTypesInfo,
isThumbnailChanged: false
};

export default DetailsPanel;
67 changes: 67 additions & 0 deletions geonode_mapstore_client/client/js/epics/__tests__/gnresource-test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
/*
* Copyright 2022, GeoSolutions Sas.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/

import expect from 'expect';
import MockAdapter from 'axios-mock-adapter';
import axios from '@mapstore/framework/libs/ajax';
import { testEpic } from '@mapstore/framework/epics/__tests__/epicTestUtils';
import { gnViewerSetNewResourceThumbnail } from '@js/epics/gnresource';
import { setResourceThumbnail, UPDATE_RESOURCE_PROPERTIES } from '@js/actions/gnresource';
import {
SHOW_NOTIFICATION
} from '@mapstore/framework/actions/notifications';

let mockAxios;

describe('gnsave epics', () => {
beforeEach(done => {
global.__DEVTOOLS__ = true;
mockAxios = new MockAdapter(axios);
setTimeout(done);
});
afterEach(done => {
delete global.__DEVTOOLS__;
mockAxios.restore();
setTimeout(done);
});

it('should apply new resource thumbnail', (done) => {
const NUM_ACTIONS = 2;
const pk = 1;
const testState = {
gnresource: {
id: pk,
data: {
'title': 'Map',
'thumbnail_url': 'thumbnail.jpeg'
}
}
};
mockAxios.onPut(new RegExp(`resources/${pk}/set_thumbnail`))
.reply(() => [200, { thumbnail_url: 'test_url' }]);

testEpic(
gnViewerSetNewResourceThumbnail,
NUM_ACTIONS,
setResourceThumbnail(),
(actions) => {
try {
expect(actions.map(({ type }) => type))
.toEqual([
UPDATE_RESOURCE_PROPERTIES,
SHOW_NOTIFICATION
]);
} catch (e) {
done(e);
}
done();
},
testState
);
});
});
41 changes: 37 additions & 4 deletions geonode_mapstore_client/client/js/epics/gnresource.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ import {
getGeoAppByPk,
getDocumentByPk,
getMapByPk,
getCompactPermissionsByPk
getCompactPermissionsByPk,
setResourceThumbnail
} from '@js/api/geonode/v2';
import { configureMap } from '@mapstore/framework/actions/config';
import {
Expand All @@ -38,7 +39,8 @@ import {
loadingResourceConfig,
resourceConfigError,
setResourceCompactPermissions,
updateResourceProperties
updateResourceProperties,
SET_RESOURCE_THUMBNAIL
} from '@js/actions/gnresource';

import {
Expand All @@ -63,14 +65,20 @@ import {
} from '@js/utils/ResourceUtils';
import {
canAddResource,
getResourceData
getResourceData,
getResourceThumbnail
} from '@js/selectors/resource';
import { updateAdditionalLayer } from '@mapstore/framework/actions/additionallayers';
import { STYLE_OWNER_NAME } from '@mapstore/framework/utils/StyleEditorUtils';
import StylesAPI from '@mapstore/framework/api/geoserver/Styles';
import { styleServiceSelector } from '@mapstore/framework/selectors/styleeditor';
import { updateStyleService } from '@mapstore/framework/api/StyleEditor';
import { resizeMap } from '@mapstore/framework/actions/map';
import { saveError } from '@js/actions/gnsave';
import {
error as errorNotification,
success as successNotification
} from '@mapstore/framework/actions/notifications';

const resourceTypes = {
[ResourceTypes.DATASET]: {
Expand Down Expand Up @@ -392,7 +400,32 @@ export const gnViewerRequestResourceConfig = (action$, store) =>
});
});

export const gnViewerSetNewResourceThumbnail = (action$, store) =>
action$.ofType(SET_RESOURCE_THUMBNAIL)
.switchMap(() => {
const state = store.getState();
const newThumbnailData = getResourceThumbnail(state);
const resourceIDThumbnail = state?.gnresource?.id;
const currentResource = state.gnresource?.data || {};

const body = {
file: newThumbnailData
};

return Observable.defer(() => setResourceThumbnail(resourceIDThumbnail, body))
.switchMap((res) => {
return Observable.of(updateResourceProperties({ ...currentResource, thumbnail_url: res.thumbnail_url, thumbnailChanged: false, updatingThumbnail: false }),
successNotification({ title: "gnviewer.thumbnailsaved", message: "gnviewer.thumbnailsaved" }));
}).catch((error) => {
return Observable.of(
saveError(error.data || error.message),
errorNotification({ title: "map.mapError.errorTitle", message: "map.mapError.errorDefault" })
);
});
});

export default {
gnViewerRequestNewResourceConfig,
gnViewerRequestResourceConfig
gnViewerRequestResourceConfig,
gnViewerSetNewResourceThumbnail
};
15 changes: 5 additions & 10 deletions geonode_mapstore_client/client/js/epics/gnsave.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,7 @@ import {
getResourceData,
getResourceId,
getDataPayload,
getCompactPermissions,
getResourceThumbnail
getCompactPermissions
} from '@js/selectors/resource';

import {
Expand Down Expand Up @@ -129,7 +128,6 @@ export const gnSaveContent = (action$, store) =>
const data = getDataPayload(state, contentType);
const body = {
'title': action.metadata.name,
...(action.metadata.thumbnail && { 'thumbnail_url': action.metadata.thumbnail }),
...(action.metadata.description && { 'abstract': action.metadata.description }),
...(data && { 'data': JSON.parse(JSON.stringify(data)) })
};
Expand Down Expand Up @@ -189,19 +187,18 @@ export const gnSetMapThumbnail = (action$, store) =>
return Observable.defer(() => setMapThumbnail(resourceIDThumbnail, body, contentType))
.switchMap((res) => {
return Observable.of(
updateResourceProperties({...currentResource, thumbnail_url: `${res.thumbnail_url}?${Math.random()}`}),
updateResourceProperties({ ...currentResource, thumbnail_url: `${res.thumbnail_url}?${Math.random()}` }),
clearSave(),
...([successNotification({title: "gnviewer.thumbnailsaved", message: "gnviewer.thumbnailsaved"})])
...([successNotification({ title: "gnviewer.thumbnailsaved", message: "gnviewer.thumbnailsaved" })])

);
})
.catch((error) => {
return Observable.of(
saveError(error.data),
errorNotification({title: "gnviewer.thumbnailnotsaved", message: "gnviewer.thumbnailnotsaved"})
errorNotification({ title: "gnviewer.thumbnailnotsaved", message: "gnviewer.thumbnailnotsaved" })
);
})
.startWith();
});
});
export const gnSaveDirectContent = (action$, store) =>
action$.ofType(SAVE_DIRECT_CONTENT)
Expand All @@ -228,11 +225,9 @@ export const gnSaveDirectContent = (action$, store) =>
const geoLimitsErrors = geoLimitsResponses.filter(({ error }) => error);
const name = getResourceName(state);
const description = getResourceDescription(state);
const thumbnail = getResourceThumbnail(state);
const metadata = {
name: (name) ? name : resource?.title,
description: (description) ? description : resource?.abstract,
...(thumbnail && { thumbnail }),
extension: resource?.extension,
href: resource?.href
};
Expand Down
Loading

0 comments on commit 3cda34b

Please sign in to comment.