+ |
+
+ handleOnChange({ name: event.target.value })}
+ />
+ {errors?.name ? : null}
+
+ |
+
+
+
+ {typesOptions.map(({ labelId, value }) =>
+
+ )}
+
+
+ |
+
+
+
+ handleOnChange({ nillable: event.target.checked })
+ }
+ />
+
+ |
+
+
+
+
+ handleOnChange({ restrictionsType: event.target.value })
+ }
+ >
+ {restrictionsOptions.map(({ labelId, value }) =>
+
+ )}
+
+ {errors?.restrictionsType ? {errors.restrictionsType} : null}
+
+ {data?.restrictionsType === RestrictionsTypes.Range ?
+
+
+
+ handleOnChange({
+ restrictionsRangeMin: parseNumber(event.target.value)
+ })}
+ />
+ {errors?.restrictionsRangeMin ?
+
+
+ : null}
+
+
+
+ handleOnChange({
+ restrictionsRangeMax: parseNumber(event.target.value)
+ })}
+ />
+ {errors?.restrictionsRangeMax
+ ?
+
+ : null}
+
+ : null}
+ {data?.restrictionsType === RestrictionsTypes.Options
+ ?
+
+ {(data?.restrictionsOptions || []).map((option, idx) => {
+ const optionsError = {
+ value: getErrorByPath(`/attributes/${index}/restrictionsOptions/${idx}/value`)
+ };
+ return (
+
+ ●
+
+ 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 ?
+
+ : null}
+
+
+
+ );
+ })}
+
+
+
+
+ : null}
+
+ |
+
+ {tools}
+ |
+
+ );
+};
+
+CreateDatasetAttributeRow.contextTypes = {
+ messages: PropTypes.object
+};
+
+export default CreateDatasetAttributeRow;
diff --git a/geonode_mapstore_client/client/js/plugins/CreateDataset/containers/CreateDataset.jsx b/geonode_mapstore_client/client/js/plugins/CreateDataset/containers/CreateDataset.jsx
new file mode 100644
index 0000000000..387a1cbf46
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/CreateDataset/containers/CreateDataset.jsx
@@ -0,0 +1,234 @@
+/*
+ * 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, { useState } from 'react';
+import { isNil } from 'lodash';
+import FlexBox from '@mapstore/framework/components/layout/FlexBox';
+import Text from '@mapstore/framework/components/layout/Text';
+import { FormGroup, FormControl, ControlLabel, 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 validator from '@rjsf/validator-ajv8';
+import axios from '@mapstore/framework/libs/ajax';
+import {
+ AttributeTypes,
+ RestrictionsTypes,
+ validateSchema,
+ validateAttributes,
+ getErrorByPath,
+ DEFAULT_ATTRIBUTE
+} from '../utils/CreateDatasetUtils';
+import CreateDatasetAttributeRow from '../components/CreateDatasetAttributeRow';
+import Spinner from '@mapstore/framework/components/layout/Spinner';
+
+const CreateDataset = () => {
+
+ const [dataset, setDataset] = useState({
+ name: '',
+ title: '',
+ geometry_type: AttributeTypes.Point,
+ attributes: []
+ });
+
+ const [loading, setLoading] = useState(false);
+
+ const { errors = [] } = validator.rawValidation(validateSchema, dataset) || {};
+ const attributeValidationErrors = validateAttributes(dataset);
+ const allErrors = [...errors, ...attributeValidationErrors];
+
+ const tileError = getErrorByPath('/title', allErrors);
+
+ function handleAddAttribute() {
+ setDataset(prevDataset => ({
+ ...prevDataset,
+ attributes: [
+ ...prevDataset.attributes,
+ {
+ id: uuid(),
+ name: '',
+ type: AttributeTypes.String,
+ restrictionsType: 'none',
+ nillable: true
+ }
+ ]
+ }));
+ }
+
+ function handleUpdateAttribute(newAttribute) {
+ setDataset(prevDataset => ({
+ ...prevDataset,
+ attributes: prevDataset.attributes
+ .map(attribute => attribute.id !== newAttribute.id ? attribute : newAttribute)
+ }));
+ }
+
+ function handleRemoveAttribute(removeId) {
+ setDataset(prevDataset => ({
+ ...prevDataset,
+ attributes: prevDataset.attributes
+ .filter(attribute => attribute.id !== removeId)
+ }));
+ }
+
+ function handleCreate() {
+ const formData = new FormData();
+ formData.append('title', dataset.title);
+ formData.append('geometry_type', dataset.geometry_type);
+ const attributes = dataset.attributes.reduce((acc, attribute) => {
+ const restrictionsType = attribute.restrictionsType || RestrictionsTypes.None;
+ acc[attribute.name] = {
+ type: attribute.type,
+ nillable: !!attribute.nillable,
+ ...(restrictionsType === RestrictionsTypes.Range && {
+ range: {
+ ...(!isNil(attribute.restrictionsRangeMin) && {
+ min: attribute.restrictionsRangeMin
+ }),
+ ...(!isNil(attribute.restrictionsRangeMax) && {
+ max: attribute.restrictionsRangeMax
+ })
+ }
+ }),
+ ...(restrictionsType === RestrictionsTypes.Options && {
+ options: (attribute.restrictionsOptions || []).map(option => option.value)
+ })
+ };
+ return acc;
+ }, {});
+
+ setLoading(true);
+ formData.append('attributes', JSON.stringify(attributes));
+ axios.post('/createlayer/?f=json', formData)
+ .then((response) => {
+ if (response?.data?.detail_url) {
+ window.location.href = response.data.detail_url;
+ }
+ })
+ .finally(() => setLoading(false));
+ }
+
+ return (
+