Skip to content

Commit e354f3e

Browse files
dsuren1dsuren1
authored
Visual organization of functionality inside the resource panel (#2085)
1 parent 85787f5 commit e354f3e

25 files changed

+215
-149
lines changed

‎geonode_mapstore_client/client/js/plugins/ResourceDetails/ResourceDetails.jsx‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -208,26 +208,12 @@ function ResourceDetailsPanel({
208208
}
209209
]
210210
},
211-
{
212-
"type": "permissions",
213-
"id": "permissions",
214-
"labelId": "gnviewer.permissions",
215-
"disableIf": "{!context.canAccessPermissions(state('gnResourceData'))}",
216-
"items": [true]
217-
},
218211
{
219212
"type": "locations",
220213
"id": "locations",
221214
"labelId": "gnviewer.locations",
222215
"items": "{({extent: context.get(state('gnResourceData'), 'extent')})}"
223216
},
224-
{
225-
"type": "attribute-table",
226-
"id": "attributes",
227-
"labelId": "gnviewer.attributes",
228-
"disableIf": "{context.get(state('gnResourceData'), 'resource_type') !== 'dataset'}",
229-
"items": "{context.get(state('gnResourceData'), 'attribute_set')}"
230-
},
231217
{
232218
"type": "linked-resources",
233219
"id": "related",
@@ -240,14 +226,19 @@ function ResourceDetailsPanel({
240226
"labelId": "gnviewer.assets",
241227
"items": "{context.get(state('gnResourceData'), 'assets')}"
242228
},
229+
{
230+
"type": "data",
231+
"id": "data",
232+
"labelId": "gnviewer.data",
233+
"disableIf": "{context.get(state('gnResourceData'), 'resource_type') !== 'dataset'}",
234+
"items": "{context.get(state('gnResourceData'), 'attribute_set')}"
235+
},
243236
{
244237
"type": "settings",
245238
"id": "settings",
246239
"labelId": "gnviewer.management",
247-
"disableIf": "{!context.canManageResourceSettings(state('gnResourceData'))}",
248-
"items": [
249-
true
250-
]
240+
"disableIf": "{!context.canManageResourceSettings(state('gnResourceData')) && !context.canAccessPermissions(state('gnResourceData'))}",
241+
"items": [true]
251242
}
252243
],
253244
items,

‎geonode_mapstore_client/client/js/plugins/ResourceDetails/components/DetailsAttributeTable.jsx‎

Lines changed: 0 additions & 71 deletions
This file was deleted.

‎geonode_mapstore_client/client/js/plugins/ResourceDetails/components/DetailsData.jsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/*
2+
* Copyright 2025, GeoSolutions Sas.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
import React from 'react';
9+
import { FormattedMessage } from 'react-intl';
10+
import PropTypes from 'prop-types';
11+
import Text from '@mapstore/framework/components/layout/Text';
12+
import Message from '@mapstore/framework/components/I18N/Message';
13+
import TimeSeriesSettings from '@js/plugins/ResourceDetails/components/DetailsTimeSeries';
14+
import FlexBox from '@mapstore/framework/components/layout/FlexBox';
15+
16+
const parseAttributeData = (fields) => {
17+
if (fields) {
18+
const header = [{
19+
value: "Name",
20+
key: "name"
21+
}, {
22+
value: "Label",
23+
key: "label"
24+
}, {
25+
value: "Description",
26+
key: "description"
27+
}];
28+
const na = <FormattedMessage id="gnhome.na" defaultMessage="N/A" />;
29+
const rows = fields.map(attribute => ({
30+
name: attribute.attribute,
31+
label: attribute.attribute_label || na,
32+
description: attribute.description || na
33+
}));
34+
35+
return { header, rows };
36+
}
37+
38+
return { header: [], rows: [] };
39+
};
40+
41+
42+
const DetailsData = ({ fields, resource, onChange }) => {
43+
const attributeData = parseAttributeData(fields);
44+
return (
45+
<FlexBox column gap="sm" className="gn-details-data _padding-tb-md">
46+
<FlexBox column className="gn-details-data-table">
47+
<Text strong>
48+
<Message msgId={"gnviewer.attributes"} />
49+
</Text>
50+
<Text fontSize="sm">
51+
<table className="table">
52+
<thead>
53+
<tr>
54+
{attributeData.header.map(({ value }, idx) => {
55+
return (<th key={idx}>{value}</th>);
56+
})}
57+
</tr>
58+
</thead>
59+
<tbody>
60+
{attributeData.rows.map((row, rowIdx) => {
61+
return (<tr key={rowIdx}>
62+
{attributeData.header.map((column, idx) => <td key={idx} >{row[column.key]}</td>)}
63+
</tr>);
64+
})}
65+
</tbody>
66+
</table>
67+
</Text>
68+
</FlexBox>
69+
<TimeSeriesSettings resource={resource} onChange={onChange} />
70+
</FlexBox>
71+
);
72+
};
73+
74+
DetailsData.propTypes = {
75+
fields: PropTypes.array
76+
};
77+
78+
DetailsData.defaultProps = {
79+
fields: []
80+
};
81+
82+
export default DetailsData;

‎geonode_mapstore_client/client/js/plugins/ResourceDetails/components/DetailsSettings.jsx‎

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import React, { forwardRef } from 'react';
22
import { Checkbox } from 'react-bootstrap';
33
import Message from '@mapstore/framework/components/I18N/Message';
44
import tooltip from '@mapstore/framework/components/misc/enhancers/tooltip';
5-
import { RESOURCE_MANAGEMENT_PROPERTIES } from '@js/utils/ResourceUtils';
6-
import TimeSeriesSettings from './DetailsTimeSeries';
5+
import { canAccessPermissions, canManageResourceSettings, RESOURCE_MANAGEMENT_PROPERTIES } from '@js/utils/ResourceUtils';
76
import FlexBox from '@mapstore/framework/components/layout/FlexBox';
87
import Text from '@mapstore/framework/components/layout/Text';
8+
import DetailsPermissions from '@js/plugins/ResourceDetails/containers/Permissions';
99

1010
const MessageTooltip = tooltip(forwardRef(({children, msgId, ...props}, ref) => {
1111
return (
@@ -18,30 +18,31 @@ const MessageTooltip = tooltip(forwardRef(({children, msgId, ...props}, ref) =>
1818
}));
1919

2020
function DetailsSettings({ resource, onChange }) {
21-
const perms = resource?.perms || [];
2221
return (
2322
<FlexBox column gap="md" className="gn-details-settings _padding-tb-md">
24-
<FlexBox column gap="xs">
25-
<Text fontSize="sm">
26-
<Message msgId={"gnviewer.resourceManagement"} />
27-
</Text>
28-
{Object.keys(RESOURCE_MANAGEMENT_PROPERTIES).map((key) => {
29-
const { labelId, disabled, tooltipId } = RESOURCE_MANAGEMENT_PROPERTIES[key];
30-
return (
31-
<Text key={key} fontSize="sm" className="_row _padding-b-xs">
32-
<Checkbox
33-
style={{ margin: 0 }}
34-
disabled={disabled(perms)}
35-
checked={!!resource?.[key]}
36-
onChange={(event) => onChange({ [key]: !!event.target.checked })}
37-
>
38-
<MessageTooltip msgId={labelId} tooltipId={tooltipId}/>
39-
</Checkbox>
40-
</Text>
41-
);
42-
})}
43-
</FlexBox>
44-
<TimeSeriesSettings resource={resource} onChange={onChange} />
23+
{canAccessPermissions(resource) && <DetailsPermissions resource={resource} />}
24+
{canManageResourceSettings(resource) && (
25+
<FlexBox column gap="xs">
26+
<Text strong>
27+
<Message msgId={"gnviewer.resourceManagement"} />
28+
</Text>
29+
{Object.keys(RESOURCE_MANAGEMENT_PROPERTIES).map((key) => {
30+
const { labelId, disabled, tooltipId } = RESOURCE_MANAGEMENT_PROPERTIES[key];
31+
return (
32+
<Text key={key} fontSize="sm" className="_row _padding-b-xs">
33+
<Checkbox
34+
style={{ margin: 0 }}
35+
disabled={disabled(resource?.perms || [])}
36+
checked={!!resource?.[key]}
37+
onChange={(event) => onChange({ [key]: !!event.target.checked })}
38+
>
39+
<MessageTooltip msgId={labelId} tooltipId={tooltipId}/>
40+
</Checkbox>
41+
</Text>
42+
);
43+
})}
44+
</FlexBox>
45+
)}
4546
</FlexBox>
4647
);
4748
}

‎geonode_mapstore_client/client/js/plugins/ResourceDetails/components/DetailsTimeSeries.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@ const TimeSeriesSettings = ({ resource, onChange }, context) => {
6060
const attributeFields = ['attribute', 'end_attribute'];
6161
const hasTime = !!timeseries?.has_time;
6262
return (
63-
<FlexBox column gap="sm">
64-
<FlexBox component={Text} fontSize="sm" gap="xs" centerChildrenVertically>
63+
<FlexBox className="gn-details-time-series" column gap="sm">
64+
<FlexBox component={Text} strong gap="xs" centerChildrenVertically>
6565
<Message msgId={"gnviewer.timeSeriesSetting.title"} />
6666
<InfoPopover
6767
glyph="info-sign"

‎geonode_mapstore_client/client/js/plugins/ResourceDetails/containers/Permissions/index.jsx‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@ import {
3333
ResourceTypes
3434
} from "@js/utils/ResourceUtils";
3535
import GeoLimits from "./GeoLimits";
36+
import FlexBox from '@mapstore/framework/components/layout/FlexBox';
37+
import Text from '@mapstore/framework/components/layout/Text';
38+
import Message from '@mapstore/framework/components/I18N/Message';
3639

3740
const entriesTabs = [
3841
{
@@ -113,22 +116,27 @@ const Permissions = ({
113116
});
114117
}, [availableResourceTypes]);
115118
return (
116-
<PermissionsComponent
117-
editing
118-
compactPermissions={permissionsCompactToLists(compactPermissions)}
119-
entriesTabs={entriesTabs}
120-
onChange={(value) =>
121-
onChangePermissions(permissionsListsToCompact(value))
122-
}
123-
showGroupsPermissions
124-
tools={
125-
enableGeoLimits
126-
? [{ Component: GeoLimits, name: "GeoLimits" }]
127-
: []
128-
}
129-
loading={permissionsLoading}
130-
permissionOptions={permissionsObject}
131-
/>
119+
<FlexBox className="permissions-container" column gap="xs">
120+
<Text strong>
121+
<Message msgId={"gnviewer.permissions"} />
122+
</Text>
123+
<PermissionsComponent
124+
editing
125+
compactPermissions={permissionsCompactToLists(compactPermissions)}
126+
entriesTabs={entriesTabs}
127+
onChange={(value) =>
128+
onChangePermissions(permissionsListsToCompact(value))
129+
}
130+
showGroupsPermissions
131+
tools={
132+
enableGeoLimits
133+
? [{ Component: GeoLimits, name: "GeoLimits" }]
134+
: []
135+
}
136+
loading={permissionsLoading}
137+
permissionOptions={permissionsObject}
138+
/>
139+
</FlexBox>
132140
);
133141
};
134142

‎geonode_mapstore_client/client/js/plugins/ResourceDetails/containers/tabComponents.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,16 @@
99
import { connect } from 'react-redux';
1010
import DetailsLocations from '../components/DetailsLocations';
1111
import DetailsAssets from '../components/DetailsAssets';
12-
import DetailsAttributeTable from '../components/DetailsAttributeTable';
12+
import DetailsData from '../components/DetailsData';
1313
import DetailsLinkedResources from '../components/DetailsLinkedResources';
14-
import DetailsPermissions from './Permissions';
1514
import DetailsSettings from '../components/DetailsSettings';
1615
import { setResourceExtent, updateResourceProperties } from '@js/actions/gnresource';
1716

1817
const tabComponents = {
19-
'attribute-table': DetailsAttributeTable,
20-
'linked-resources': DetailsLinkedResources,
21-
'permissions': DetailsPermissions,
2218
'locations': connect(() => ({}), { onSetExtent: setResourceExtent })(DetailsLocations),
19+
'linked-resources': DetailsLinkedResources,
2320
'assets': DetailsAssets,
21+
'data': connect(() => ({}), { onChange: updateResourceProperties })(DetailsData),
2422
'settings': connect(() => ({}), { onChange: updateResourceProperties })(DetailsSettings)
2523
};
2624

‎geonode_mapstore_client/client/js/utils/PluginsContextUtils.js‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ import {
1212
resourceHasPermission,
1313
canCopyResource,
1414
isDocumentExternalSource,
15-
getCataloguePath
15+
getCataloguePath,
16+
canManageResourceSettings,
17+
canAccessPermissions
1618
} from '@js/utils/ResourceUtils';
1719
import {
1820
getUploadMainFile,
@@ -46,17 +48,6 @@ const getCreateNewMapLink = (resource) => {
4648
return `#/map/new?gn-dataset=${resource?.pk}:${resource?.subtype || ''}`;
4749
};
4850

49-
const canManageResourceSettings = (resource) => {
50-
const { perms } = resource || {};
51-
const settingsPerms = ['feature_resourcebase', 'approve_resourcebase', 'publish_resourcebase'];
52-
return !!(perms || []).find(perm => settingsPerms.includes(perm));
53-
};
54-
55-
const canAccessPermissions = (resource) => {
56-
const { perms } = resource || {};
57-
return perms?.includes('change_resourcebase_permissions');
58-
};
59-
6051
export const getPluginsContext = () => ({
6152
get,
6253
getMetadataUrl,

0 commit comments

Comments
 (0)