Skip to content

Fix #2157 Refactor of the create dataset page and attribute table validation #2161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
allyoucanmap wants to merge 6 commits into from
Closed

Fix #2157 Refactor of the create dataset page and attribute table validation #2161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
021c5db
Fix #2157 Refactor of the create dataset page and attribute table val…
allyoucanmap Sep 16, 2025
3ea3ca8
align submodule with master branch
allyoucanmap Sep 17, 2025
990b5b0
Merge branch 'master' of github.com:GeoNode/geonode-mapstore-client i…
allyoucanmap Sep 17, 2025
dfaf57d
add validations and code refactor
dsuren1 Sep 23, 2025
ba4af0d
lint and unit test fix
dsuren1 Sep 23, 2025
f466a07
translation files updated
dsuren1 Sep 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions geonode_mapstore_client/client/js/apps/gn-catalogue.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,8 +104,7 @@ const getViewer = (component) => {
const viewers = {
[appRouteComponentTypes.VIEWER]: ViewerRoute,
[appRouteComponentTypes.CATALOGUE]: useRedirect ? RedirectRoute : ComponentsRoute,
[appRouteComponentTypes.DATASET_UPLOAD]: ComponentsRoute,
[appRouteComponentTypes.DOCUMENT_UPLOAD]: ComponentsRoute,
[appRouteComponentTypes.COMPONENTS]: ComponentsRoute,
[appRouteComponentTypes.MAP_VIEWER]: MapViewerRoute
};
return viewers[component];
Expand Down
283 changes: 283 additions & 0 deletions ..._mapstore_client/client/js/plugins/CreateDataset/components/CreateDatasetAttributeRow.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,283 @@
/*
* Copyright 2025, 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 React from 'react';
import PropTypes from 'prop-types';
import FlexBox from '@mapstore/framework/components/layout/FlexBox';
import Text from '@mapstore/framework/components/layout/Text';
import { FormGroup, FormControl, ControlLabel, Checkbox, Glyphicon, HelpBlock } from 'react-bootstrap';
import Button from '@mapstore/framework/components/layout/Button';
import Message from '@mapstore/framework/components/I18N/Message';
import uuid from 'uuid/v1';
import { getMessageById } from '@mapstore/framework/utils/LocaleUtils';
import { AttributeTypes, RestrictionsTypes } from '../utils/CreateDatasetUtils';

const parseNumber = (value) => {
if (value === '') {
return null;
}
return parseFloat(value);
};

const CreateDatasetAttributeRow = ({
data,
geometryAttribute,
tools,
onChange,
getErrorByPath = () => undefined,
index
}, context) => {

const errors = {
name: getErrorByPath(`/attributes/${index}/name`),
restrictionsType: getErrorByPath(`/attributes/${index}/restrictionsType`),
restrictionsRangeMin: getErrorByPath(`/attributes/${index}/restrictionsRangeMin`),
restrictionsRangeMax: getErrorByPath(`/attributes/${index}/restrictionsRangeMax`)
};

const typesOptions = geometryAttribute
? [
{ value: AttributeTypes.Point, labelId: 'gnviewer.points' },
{ value: AttributeTypes.LineString, labelId: 'gnviewer.lines' },
{ value: AttributeTypes.Polygon, labelId: 'gnviewer.polygons' }]
: [
{ value: AttributeTypes.String, labelId: 'gnviewer.string' },
{ value: AttributeTypes.Integer, labelId: 'gnviewer.integer' },
{ value: AttributeTypes.Float, labelId: 'gnviewer.float' },
{ value: AttributeTypes.Date, labelId: 'gnviewer.date' }
];

const restrictionsOptions = [
AttributeTypes.Integer,
AttributeTypes.Float,
AttributeTypes.String
].includes(data?.type)
? [
{ value: RestrictionsTypes.None, labelId: 'gnviewer.none' },
...(data?.type !== AttributeTypes.String
? [{ value: RestrictionsTypes.Range, labelId: 'gnviewer.range' }]
: []
),
{ value: RestrictionsTypes.Options, labelId: 'gnviewer.options' }
]
: [{ value: RestrictionsTypes.None, labelId: 'gnviewer.none' }];

const getControlId = (suffix) => `attribute-${data?.id}-${suffix}`;

function handleOnChange(properties) {
onChange({
...data,
...properties
});
}

function handleTypeChange(event) {
const newType = event.target.value;
const currentType = data?.type;

// If type is changing, clear restrictions and set to default
if (newType !== currentType) {
onChange({
...data,
type: newType,
restrictionsType: RestrictionsTypes.None,
restrictionsRangeMin: null,
restrictionsRangeMax: null,
restrictionsOptions: []
});
} else {
handleOnChange({ type: newType });
}
}

return (
<tr className="gn-dataset-attribute">
<td className="gn-attribute-name">
<FormGroup
controlId={getControlId('name')}
validationState={errors?.name ? 'error' : undefined}
>
<FormControl
type="text"
value={data?.name || ''}
disabled={!!geometryAttribute}
onChange={(event) => handleOnChange({ name: event.target.value })}
/>
{errors?.name ? <HelpBlock><Message msgId={errors.name} /></HelpBlock> : null}
</FormGroup>
</td>
<td className="gn-attribute-type">
<FormGroup controlId={getControlId('type')}>
<FormControl
value={data?.type || ''}
componentClass="select"
placeholder="select"
onChange={handleTypeChange}
>
{typesOptions.map(({ labelId, value }) =>
<option key={value} value={value}>
{getMessageById(context.messages, labelId)}
</option>
)}
</FormControl>
</FormGroup>
</td>
<td className="gn-attribute-nillable">
<FormGroup controlId={getControlId('nillable')}>
<Checkbox
style={{ paddingTop: 6 }}
checked={!!data?.nillable}
disabled={!!geometryAttribute}
onChange={(event) =>
handleOnChange({ nillable: event.target.checked })
}
/>
</FormGroup>
</td>
<td>
<FlexBox column gap="sm">
<FormGroup
controlId={getControlId('restrictions')}
validationState={errors?.restrictionsType ? 'error' : undefined}>
<FormControl
value={data?.restrictionsType}
componentClass="select"
placeholder="select"
disabled={!!geometryAttribute}
onChange={(event) =>
handleOnChange({ restrictionsType: event.target.value })
}
>
{restrictionsOptions.map(({ labelId, value }) =>
<option key={value} value={value}>
{getMessageById(context.messages, labelId)}
</option>
)}
</FormControl>
{errors?.restrictionsType ? <HelpBlock>{errors.restrictionsType}</HelpBlock> : null}
</FormGroup>
{data?.restrictionsType === RestrictionsTypes.Range ?
<FlexBox centerChildrenVertically wrap gap="sm">
<FlexBox.Fill
flexBox
component={FormGroup}
validationState={errors?.restrictionsRangeMin ? 'error' : undefined}
controlId={getControlId('restrictions-min')}
centerChildrenVertically
gap="sm"
>
<ControlLabel><Message msgId="gnviewer.min" /></ControlLabel>
<FormControl
type="number"
value={data?.restrictionsRangeMin}
onChange={(event) => handleOnChange({
restrictionsRangeMin: parseNumber(event.target.value)
})}
/>
{errors?.restrictionsRangeMin ?
<HelpBlock>
<Message msgId={errors.restrictionsRangeMin} />
</HelpBlock> : null}
</FlexBox.Fill>
<FlexBox.Fill
flexBox
component={FormGroup}
validationState={errors?.restrictionsRangeMax ? 'error' : undefined}
controlId={getControlId('restrictions-max')}
gap="sm"
centerChildrenVertically
>
<ControlLabel><Message msgId="gnviewer.max" /></ControlLabel>
<FormControl
type="number"
value={data?.restrictionsRangeMax}
onChange={(event) => handleOnChange({
restrictionsRangeMax: parseNumber(event.target.value)
})}
/>
{errors?.restrictionsRangeMax
? <HelpBlock>
<Message msgId={errors.restrictionsRangeMax} />
</HelpBlock> : null}
</FlexBox.Fill>
</FlexBox> : null}
{data?.restrictionsType === RestrictionsTypes.Options
? <FlexBox column wrap gap="sm">
<FlexBox gap="sm" column component="ul">
{(data?.restrictionsOptions || []).map((option, idx) => {
const optionsError = {
value: getErrorByPath(`/attributes/${index}/restrictionsOptions/${idx}/value`)
};
return (
<FlexBox component="li" gap="sm" key={option.id}>
<Text style={{ paddingTop: 6 }}>●</Text>
<FlexBox.Fill
component={FormGroup}
key={option.id}
validationState={optionsError?.value ? 'error' : undefined}
controlId={getControlId(`option-${option.id}`)}
>
<FormControl
type={data?.type === AttributeTypes.String ? "text" : "number"}
value={option.value}
onChange={(event) => handleOnChange({
restrictionsOptions: (data?.restrictionsOptions || [])
.map((opt) => {
return opt.id !== option.id
? opt : {
...option,
value: data?.type === AttributeTypes.String
? event.target.value
: parseNumber(event.target.value)
};
})
})}
/>
{optionsError?.value ? <HelpBlock>
<Message msgId={optionsError.value} />
</HelpBlock> : null}
</FlexBox.Fill>
<Button square
onClick={() => handleOnChange({
restrictionsOptions: (data?.restrictionsOptions || [])
.filter(opt => opt.id !== option.id)
})}>
<Glyphicon glyph="trash" />
</Button>
</FlexBox>
);
})}
<div>
<Button size="sm" onClick={() => handleOnChange({
restrictionsOptions: [
...(data?.restrictionsOptions || []),
{
id: uuid(),
value: ''
}
]
})}>
<Glyphicon glyph="plus" />
<Message msgId="gnviewer.addOption" />
</Button>
</div>
</FlexBox>
</FlexBox> : null}
</FlexBox>
</td>
<td className="gn-attribute-tools">
{tools}
</td>
</tr>
);
};

CreateDatasetAttributeRow.contextTypes = {
messages: PropTypes.object
};

export default CreateDatasetAttributeRow;
Loading