Feat/split dataset form (#521)

* feat: add datasets and distributions

* feat: review dataset and remove new array reference on a useSelector

* feat: remove duplicated array

* fix: review Datasets

* fix: solve issue with distribution and dataset

* feat: the select component for themes should handle multiple value

* feat: split dataset form

* feat: implement new layout for dataset

app/src/js/applications/datasets/datasets/edit.scss

@@ -0,0 +1,7 @@
+.dataset-container [role="tabpanel"]{
+  margin-top: 1em;
+}
+
+.dataset-container [role="tablist"] a{
+  color: var(--color-3);
+}

app/src/js/applications/datasets/datasets/layout-with-lateral-menu.js

@@ -0,0 +1,101 @@
+import D from '../../../i18n/build-dictionary';
+import React, { useState } from 'react';
+import './layout-with-lateral-menu.scss';
+
+const styleContent = {
+	width: '70%',
+	display: 'block',
+};
+
+export const CollapsibleTrigger = ({ opened, onClick }) => {
+	return (
+		<button type="button" title={opened ? D.hide : D.display} onClick={onClick}>
+			<span
+				className={` glyphicon glyphicon-chevron-${opened ? 'up' : 'down'}`}
+			/>
+		</button>
+	);
+};
+export const LayoutWithLateralMenu = ({ children, layoutConfiguration }) => {
+	const [runtimeLayoutConfiguration, setRuntimeLayoutConfiguration] =
+		useState(layoutConfiguration);
+
+	const allChildrenItems = Object.values(runtimeLayoutConfiguration).reduce(
+		(acc, configuration) => {
+			return {
+				...acc,
+				...configuration.children,
+			};
+		},
+		{}
+	);
+	const [currentOpenedPanelKey, setCurrentOpenedPanelKey] = useState(
+		Object.keys(allChildrenItems)[0]
+	);
+
+	const openMainMenu = (key) => {
+		setRuntimeLayoutConfiguration({
+			...runtimeLayoutConfiguration,
+			[key]: {
+				...runtimeLayoutConfiguration[key],
+				closed: !runtimeLayoutConfiguration[key].closed,
+			},
+		});
+	};
+
+	return (
+		<div className="layout_with_lateral_menu">
+			<section className="layout_with_lateral_menu__outline">
+				<nav>
+					<ul>
+						{Object.entries(layoutConfiguration).map(([key, configuration]) => {
+							const opened = !runtimeLayoutConfiguration[key].closed;
+
+							return (
+								<li>
+									<div className="layout_with_lateral_menu__outline__main_item">
+										{configuration.title}
+										<CollapsibleTrigger
+											opened={opened}
+											onClick={() => openMainMenu(key)}
+										></CollapsibleTrigger>
+									</div>
+
+									{opened && (
+										<ul className="secondary__item">
+											{Object.entries(configuration.children ?? {}).map(
+												([key2, configuration2]) => {
+													return (
+														<li>
+															<button
+																type="button"
+																className={
+																	key2 === currentOpenedPanelKey
+																		? 'selected'
+																		: ''
+																}
+																onClick={() => setCurrentOpenedPanelKey(key2)}
+															>
+																{configuration2.title}
+															</button>
+														</li>
+													);
+												}
+											)}
+										</ul>
+									)}
+								</li>
+							);
+						})}
+					</ul>
+				</nav>
+			</section>
+			<section style={styleContent} className="content">
+				<h2 className="wilco-page-title__title ">
+					{allChildrenItems[currentOpenedPanelKey].title}
+				</h2>
+				{children(currentOpenedPanelKey)}
+			</section>
+		</div>
+	);
+};

app/src/js/applications/datasets/datasets/layout-with-lateral-menu.scss

@@ -0,0 +1,159 @@
+@import 'src/styles/tools.scss';
+
+.layout_with_lateral_menu {
+  position: relative;
+  display: block;
+  padding: 0;
+  margin-top: 20px;
+
+  ul {
+    list-style: none;
+  }
+
+  &__outline {
+    box-sizing: border-box;
+    float: left;
+    width: 30%;
+    display: block;
+    margin: 0;
+    overflow: hidden;
+    padding: 0 20px 20px 20px;
+    border-right: solid var(--color-3) 1px;
+
+    background-color: transparent;
+
+    nav {
+      border: none;
+      margin: 0;
+      padding: 0;
+
+      > ul {
+        background-color: transparent;
+        padding: 0;
+        margin: 0;
+        border: none;
+      }
+    }
+
+    &__main_item {
+      padding: 15px 10px;
+      margin-top: 30px;
+      color: white;
+      position: relative;
+      border-color: #d9d9d9 #ccc #b3b3b3;
+      border-radius: 4px;
+      border: 1px solid #ccc;
+      box-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.05);
+      color: white;
+      background: var(--color-3);
+      > button {
+        background: transparent;
+        color: white;
+        border: 0px none;
+        padding: 0;
+        text-align: left;
+        position: absolute;
+        right: 7px;
+        top: 35%;
+        display: block;
+
+      }
+
+
+    }
+
+    .secondary__item {
+      font-size: 1.4rem;
+      padding: 15px 0;
+      margin-bottom: 30px;
+      border: solid #e0e0e0 1px;
+      border-top: none;
+      background-color: #fff;
+      &-secondary {
+        padding: 0;
+        border: none;
+      }
+
+      li {
+        display: flex;
+        flex-direction: column;
+        text-transform: none;
+        color: #337ab7;
+        border-radius: 0;
+
+        button {
+          background: transparent;
+          border: none;
+          display: flex;
+          flex-direction: row;
+          min-width: 0;
+          padding: 5px 5px !important;
+          font-size: .9em;
+
+          &.selected {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+  }
+
+  .content {
+    box-sizing: border-box;
+    float: right;
+    width: 67%;
+    margin: 0;
+    padding: 0;
+    padding: 0 20px 20px 20px;
+
+    & .panel {
+      background: white;
+      margin-bottom: 30px;
+    }
+    & .panel-body {
+      background: white;
+    }
+    ul {
+      list-style: disc;
+    }
+  }
+}
+
+
+
+
+
+.msd__panel-trigger {
+  &_right {
+    @include panel-trigger();
+    position: absolute;
+    right: 0;
+    display: block;
+  }
+  &_left {
+    @include panel-trigger();
+  }
+  &_middle {
+    position: absolute;
+    margin-top: 20px;
+    background-color: var(--color-3);
+    color: #fff;
+    text-align: center;
+    text-transform: uppercase;
+    width: 50px;
+    height: 30px;
+    left: calc(30% - 30px);
+    border-radius: 2px;
+    display: table;
+
+    > div {
+      vertical-align: middle;
+      display: table-cell;
+
+      > button {
+        background: transparent;
+        border: none;
+      }
+    }
+  }
+}

app/src/js/applications/datasets/datasets/validation.js

@@ -0,0 +1,43 @@
+import D, { D1, D2 } from '../../../i18n/build-dictionary';
+
+export function validate({
+	creator,
+	contributor,
+	disseminationStatus,
+	labelLg1,
+	labelLg2,
+	idSerie,
+}) {
+	const errorMessages = [];
+	if (!labelLg1) {
+		errorMessages.push(D.mandatoryProperty(D1.title));
+	}
+	if (!labelLg2) {
+		errorMessages.push(D.mandatoryProperty(D2.title));
+	}
+	if (!creator) {
+		errorMessages.push(D.mandatoryProperty(D1.creatorTitle));
+	}
+	if (!contributor) {
+		errorMessages.push(D.mandatoryProperty(D1.contributorTitle));
+	}
+	if (!disseminationStatus) {
+		errorMessages.push(D.mandatoryProperty(D1.disseminationStatusTitle));
+	}
+	if (!idSerie) {
+		errorMessages.push(D.mandatoryProperty(D1.generatedBy));
+	}
+	return {
+		fields: {
+			labelLg1: !labelLg1 ? D.mandatoryProperty(D1.title) : '',
+			labelLg2: !labelLg2 ? D.mandatoryProperty(D2.title) : '',
+			creator: !labelLg2 ? D.mandatoryProperty(D1.creatorTitle) : '',
+			contributor: !contributor ? D.mandatoryProperty(D1.contributorTitle) : '',
+			disseminationStatus: !disseminationStatus
+				? D.mandatoryProperty(D1.disseminationStatusTitle)
+				: '',
+			idSerie: !idSerie ? D.mandatoryProperty(D1.generatedBy) : '',
+		},
+		errorMessage: errorMessages,
+	};
+}

app/src/js/applications/datasets/datasets/view.js

@@ -118,7 +118,6 @@ export const DatasetView = (props) => {
 					title={D1.globalInformationsTitle}
 					alone={true}
 				/>
-
 			</Row>
 			<Row>
 				<Note

app/src/js/i18n/dictionary/datasets.js

@@ -1,9 +1,13 @@
 const dictionary = {
-	datasetsTitle: {fr:"Jeu de Données",en:"Dataset"},
-	distributionsTitle: {fr:"Distributions",en:"Distributions"},
-	formatTitle: {fr:"Format",en:"Format"},
-	tailleTitle: {fr:"Taille",en:"Size"},
-	downloadUrlTitle: {fr:"URL de téléchargement",en:"Download URL"},
+	datasetsTitle: { fr: 'Jeu de Données', en: 'Dataset' },
+	distributionsTitle: { fr: 'Distributions', en: 'Distributions' },
+	formatTitle: { fr: 'Format', en: 'Format' },
+	tailleTitle: { fr: 'Taille', en: 'Size' },
+	downloadUrlTitle: { fr: 'URL de téléchargement', en: 'Download URL' },
+	staticsInformations: {
+		fr: 'Informations Statistiques',
+		en: 'Statistical Information',
+	},
 };
 
 export default dictionary;

app/src/js/router/routes.js

@@ -56,7 +56,7 @@ export default auth(() => {
 	if (!homePage) {
 		return null;
 	}
-	console.log(pages);
+
 	return (
 		<React.Fragment>
 			<Suspense fallback={<Loading />}>
@@ -91,4 +91,4 @@ export default auth(() => {
 			</Suspense>
 		</React.Fragment>
 	);
-});
+});