feat: create dataset module #478 (#603)

* feat: create dataset module #478

* fix: review

app/src/js/applications/concepts/edition-creation/edition-container.js

@@ -7,95 +7,104 @@ import buildPayloadUpdate from 'js/utils/concepts/build-payload-creation-update/
 import { mergeWithAllConcepts } from 'js/utils/concepts/links';
 import D from 'js/i18n';
 import { Loading } from '@inseefr/wilco';
-import { CLOSE_MATCH  } from 'js/constants';
+import { CLOSE_MATCH } from 'js/constants';
 import { ArrayUtils, HTMLUtils, Stores } from 'bauhaus-utilities';
 import api from '../../../remote-api/concepts-api';
 import globalApi from '../../../remote-api/api';
 import { emptyNotes } from '../../../utils/concepts/notes';
 import * as generalUtils from '../../../utils/concepts/general';
 
-const formatNotes = notes => {
+const formatNotes = (notes) => {
 	return Object.assign(
 		{},
 		emptyNotes,
 		Object.keys(notes).reduce((formatted, noteName) => {
-			formatted[noteName] = HTMLUtils.rmesHtmlToRawHtml(
-				notes[noteName]
-			);
+			formatted[noteName] = HTMLUtils.rmesHtmlToRawHtml(notes[noteName]);
 			return formatted;
 		}, {})
 	);
-}
+};
 const EditionContainer = () => {
 	const { id } = useParams();
 	const history = useHistory();
 
-	const langs = useSelector(state => select.getLangs(state));
-	const maxLengthScopeNote = useSelector(state => Number(state.app.properties.maxLengthScopeNote));
+	const langs = useSelector((state) => select.getLangs(state));
+	const maxLengthScopeNote = useSelector((state) =>
+		Number(state.app.properties.maxLengthScopeNote)
+	);
 
-	const [concept, setConcept] = useState({})
-	const [concepts, setConcepts] = useState([])
-	const [stamps, setStamps] = useState([])
-	const [disseminationStatus, setDisseminationStatus] = useState([])
+	const [concept, setConcept] = useState({});
+	const [concepts, setConcepts] = useState([]);
+	const [stamps, setStamps] = useState([]);
+	const [disseminationStatus, setDisseminationStatus] = useState([]);
 
 	const [loading, setLoading] = useState(true);
 	const [loadingExtraData, setLoadingExtraData] = useState(true);
 	const [saving, setSaving] = useState(false);
 
-
 	useEffect(() => {
-		api.getConceptGeneral(id).then(general => {
-			const { conceptVersion } = general;
-			return Promise.all([
-				api.getNoteVersionList(id, conceptVersion),
-				api.getConceptLinkList(id)
-			]).then(([notes, links]) => {
-				setConcept({
-					general: Object.assign(generalUtils.empty(), general),
-					notes: formatNotes(notes),
-					links,
-				})
+		api
+			.getConceptGeneral(id)
+			.then((general) => {
+				const { conceptVersion } = general;
+				return Promise.all([
+					api.getNoteVersionList(id, conceptVersion),
+					api.getConceptLinkList(id),
+				]).then(([notes, links]) => {
+					setConcept({
+						general: Object.assign(generalUtils.empty(), general),
+						notes: formatNotes(notes),
+						links,
+					});
+				});
 			})
-		})
-		.finally(() => setLoading(false))
+			.finally(() => setLoading(false));
 	}, [id]);
 
 	useEffect(() => {
 		Promise.all([
 			api.getConceptList(),
 			globalApi.getStampList(),
-			Stores.DisseminationStatus.api.getDisseminationStatus()
-		]).then(([conceptsList, stampsList, disseminationStatusList]) => {
-			setConcepts(ArrayUtils.sortArrayByLabel(conceptsList))
-			setStamps(stampsList);
-			setDisseminationStatus(disseminationStatusList)
-		}).finally(() => setLoadingExtraData(false))
-	}, [])
+			Stores.DisseminationStatus.api.getDisseminationStatus(),
+		])
+			.then(([conceptsList, stampsList, disseminationStatusList]) => {
+				setConcepts(ArrayUtils.sortArrayByLabel(conceptsList));
+				setStamps(stampsList);
+				setDisseminationStatus(disseminationStatusList);
+			})
+			.finally(() => setLoadingExtraData(false));
+	}, []);
 
-	const handleUpdate = useCallback((id, versioning, oldData, data) => {
-		setSaving(true);
-		api.putConcept(id, buildPayloadUpdate(versioning, oldData, data))
-			.then(() => history.push(`/concept/${id}`))
-			.finally(() => setSaving(false))
-	}, [history])
+	const handleUpdate = useCallback(
+		(id, versioning, oldData, data) => {
+			setSaving(true);
+			api
+				.putConcept(id, buildPayloadUpdate(versioning, oldData, data))
+				.then(() => history.push(`/concept/${id}`))
+				.finally(() => setSaving(false));
+		},
+		[history]
+	);
 
-	if(loading || loadingExtraData){
-		return <Loading />
+	if (loading || loadingExtraData) {
+		return <Loading />;
 	}
-	if(saving){
+	if (saving) {
 		return <Loading textType="saving" />;
 	}
 
 	const { general, notes, links } = concept;
-	const conceptsWithLinks = mergeWithAllConcepts(concepts, links);
+	const conceptsWithLinks = mergeWithAllConcepts(concepts, links ?? []);
 	return (
 		<ConceptEditionCreation
 			id={id}
 			title={D.updateConceptTitle}
 			subtitle={general.prefLabelLg1}
 			general={general}
 			notes={notes}
-			equivalentLinks={concept.links.filter(link => link.typeOfLink === CLOSE_MATCH)}
+			equivalentLinks={concept.links.filter(
+				(link) => link.typeOfLink === CLOSE_MATCH
+			)}
 			conceptsWithLinks={conceptsWithLinks}
 			disseminationStatusList={disseminationStatus}
 			maxLengthScopeNote={maxLengthScopeNote}
@@ -104,5 +113,5 @@ const EditionContainer = () => {
 			langs={langs}
 		/>
 	);
-}
+};
 export default EditionContainer;

app/src/js/applications/datasets/config.js

@@ -0,0 +1 @@
+export const defaultRoute = '';

app/src/js/applications/datasets/datasets/components/temporalField.js

@@ -0,0 +1,130 @@
+import ReactSelect from 'react-select';
+import React from 'react';
+import D, { D1 } from '../../../../i18n/build-dictionary';
+
+const datasetsTemporalCoverageOptions = [
+	{
+		value: 'http://www.w3.org/2001/XMLSchema#gYear',
+		label: D.datasetsTemporalTypeYear,
+	},
+	{
+		value: 'http://www.w3.org/2001/XMLSchema#date',
+		label: D.datasetsTemporalTypeDate,
+	},
+];
+
+export const TemporalField = ({
+	temporalCoverageStartDate,
+	temporalCoverageEndDate,
+	temporalCoverageDataType,
+	updateTemporalCoverage,
+}) => {
+	return (
+		<>
+			<div className="col-md-4 form-group">
+				<label className="w-100 wilco-label-required">
+					{D1.datasetsTemporalCoverage}
+					<ReactSelect
+						value={temporalCoverageDataType}
+						options={datasetsTemporalCoverageOptions}
+						onChange={({ value }) => {
+							updateTemporalCoverage({
+								temporalCoverageStartDate,
+								temporalCoverageEndDate,
+								temporalCoverageDataType: value,
+							});
+						}}
+					/>
+				</label>
+			</div>
+			{temporalCoverageDataType?.endsWith('date') && (
+				<>
+					<div className="col-md-4 form-group">
+						<label className="w-100 wilco-label-required">
+							{D1.datasetsTemporalStartDate}
+							<input
+								type="date"
+								className="form-control"
+								value={temporalCoverageStartDate}
+								onChange={(e) => {
+									updateTemporalCoverage({
+										temporalCoverageStartDate: e.target.value,
+										temporalCoverageEndDate,
+										temporalCoverageDataType,
+									});
+								}}
+							/>
+						</label>
+					</div>
+					<div className="col-md-4 form-group">
+						<label className="w-100 wilco-label-required">
+							{D1.datasetsTemporalEndDate}
+							<input
+								type="date"
+								className="form-control"
+								value={temporalCoverageEndDate}
+								onChange={(e) => {
+									updateTemporalCoverage({
+										temporalCoverageStartDate,
+										temporalCoverageEndDate: e.target.value,
+										temporalCoverageDataType,
+									});
+								}}
+							/>
+						</label>
+					</div>
+				</>
+			)}
+			{temporalCoverageDataType?.endsWith('Year') && (
+				<>
+					<div className="col-md-4 form-group">
+						<label className="w-100 wilco-label-required">
+							{D1.datasetsTemporalStartDate}
+							<input
+								type="number"
+								className="form-control"
+								value={
+									temporalCoverageStartDate
+										? new Date(temporalCoverageStartDate).getFullYear()
+										: new Date().getFullYear()
+								}
+								onChange={(e) => {
+									updateTemporalCoverage({
+										temporalCoverageEndDate: e.target.value,
+										temporalCoverageDataType,
+										temporalCoverageStartDate: new Date(
+											`${e.target.value}-01-01`
+										),
+									});
+								}}
+							/>
+						</label>
+					</div>
+					<div className="col-md-4 form-group">
+						<label className="w-100 wilco-label-required">
+							{D1.datasetsTemporalEndDate}
+							<input
+								type="number"
+								className="form-control"
+								value={
+									temporalCoverageEndDate
+										? new Date(temporalCoverageEndDate).getFullYear()
+										: new Date().getFullYear()
+								}
+								onChange={(e) => {
+									updateTemporalCoverage({
+										temporalCoverageStartDate: e.target.value,
+										temporalCoverageDataType,
+										temporalCoverageEndDate: new Date(
+											`${e.target.value}-01-01`
+										),
+									});
+								}}
+							/>
+						</label>
+					</div>
+				</>
+			)}
+		</>
+	);
+};