Feat: add zod in Collections (#920)

* tests ok validation ok but could be prettier

* remove unused brackets

* reshape error messages and display

* validation to typescript

* typescript in concept validation"

src/packages/model/concepts/collection.ts

@@ -0,0 +1,5 @@
+export type Collection = {
+	id: string;
+	prefLabelLg1: string;
+	creator: string;
+};

src/packages/model/concepts/concept.ts

@@ -0,0 +1,14 @@
+export type ConceptGeneral = {
+	prefLabelLg1: string;
+	creator: string;
+	disseminationStatus: string;
+};
+
+export type ConceptNotes = {
+	scopeNoteLg1?: string;
+	scopeNoteLg2?: string;
+	definitionLg1: string;
+	definitionLg2?: string;
+};
+
+export type Concept = ConceptGeneral & ConceptNotes;

src/packages/modules-concepts/collections/edition-creation/controls.js

@@ -1,33 +1,21 @@
-import {
-	CancelButton,
-	ErrorBloc,
-	ActionToolbar,
-	SaveButton,
-} from '@inseefr/wilco';
-import { validate } from './validation';
-
-function Controls({
-	general,
-	collectionList,
-	initialId,
-	initialPrefLabelLg1,
-	handleSave,
-	redirectCancel,
-}) {
-	const message = validate(
-		general,
-		collectionList,
-		initialId,
-		initialPrefLabelLg1
-	);
+import { CancelButton, ActionToolbar, SaveButton } from '@inseefr/wilco';
+import { GlobalClientSideErrorBloc } from '../../../components';
+import D from '../../../deprecated-locales/build-dictionary';
 
+function Controls({ handleSave, redirectCancel, errors }) {
 	return (
 		<>
 			<ActionToolbar>
 				<CancelButton action={redirectCancel()} />
-				<SaveButton action={handleSave} disabled={message} />
+				<SaveButton
+					action={handleSave}
+					disabled={errors?.errorMessage?.length > 0}
+				/>
 			</ActionToolbar>
-			<ErrorBloc error={message} />
+			<GlobalClientSideErrorBloc
+				clientSideErrors={errors?.errorMessage}
+				D={D}
+			/>
 		</>
 	);
 }

src/packages/modules-concepts/collections/edition-creation/controls.spec.js

@@ -1,15 +1,13 @@
 import Controls from './controls';
-import { empty } from '../../../modules-concepts/collections/utils/general';
 import { renderWithRouter } from '../../../tests-utils/render';
 
 describe('collection-edition-creation-controls', () => {
 	it('renders without crashing', () => {
 		renderWithRouter(
 			<Controls
-				general={empty()}
-				collectionList={[]}
 				handleSave={jest.fn()}
 				redirectCancel={() => 'collections'}
+				errors={{ errorMessage: [], fields: {} }}
 			/>
 		);
 	});

src/packages/modules-concepts/collections/edition-creation/general.js

@@ -6,6 +6,7 @@ import {
 	CreatorsInput,
 	RequiredIcon,
 	InputRmes,
+	ClientSideError,
 } from '../../../components';
 
 const handleFieldChange = (handleChange) =>
@@ -14,7 +15,13 @@ const handleFieldChange = (handleChange) =>
 		return handlers;
 	}, {});
 
-function CollectionGeneralEdition({ general, creation, handleChange, langs }) {
+function CollectionGeneralEdition({
+	general,
+	creation,
+	handleChange,
+	langs,
+	errors,
+}) {
 	const {
 		id,
 		prefLabelLg1,
@@ -27,6 +34,7 @@ function CollectionGeneralEdition({ general, creation, handleChange, langs }) {
 	const { lg1, lg2 } = langs;
 
 	const handlers = handleFieldChange(handleChange);
+
 	return (
 		<div>
 			<h4 className="text-center">
@@ -42,6 +50,12 @@ function CollectionGeneralEdition({ general, creation, handleChange, langs }) {
 					disabled={!creation}
 					handleChange={handlers.id}
 					className="w-100"
+					errorBlock={
+						<ClientSideError
+							id="id-error"
+							error={errors?.fields?.id}
+						></ClientSideError>
+					}
 				/>
 			</Row>
 			<Row>
@@ -53,6 +67,12 @@ function CollectionGeneralEdition({ general, creation, handleChange, langs }) {
 					value={prefLabelLg1}
 					handleChange={handlers.prefLabelLg1}
 					className="w-100"
+					errorBlock={
+						<ClientSideError
+							id="labelLg1-error"
+							error={errors?.fields?.prefLabelLg1}
+						></ClientSideError>
+					}
 				/>
 				<InputRmes
 					colMd={6}
@@ -67,6 +87,10 @@ function CollectionGeneralEdition({ general, creation, handleChange, langs }) {
 
 			<div className="form-group">
 				<CreatorsInput value={creator} onChange={handlers.creator} />
+				<ClientSideError
+					id="creator-error"
+					error={errors?.fields?.creator}
+				></ClientSideError>
 			</div>
 			<div className="form-group">
 				<label>{D1.contributorTitle}</label>

src/packages/modules-concepts/collections/edition-creation/general.spec.js

@@ -4,18 +4,22 @@ import { empty } from '../../../modules-concepts/collections/utils/general';
 import { locales } from '../../../tests-utils/default-values';
 
 jest.mock('../../../components', () => ({
+	InputRmes: () => <></>,
+	ClientSideError: () => <></>,
 	TextInput: () => <></>,
 	Row: () => <></>,
 	CreatorsInput: () => <></>,
 	RequiredIcon: () => <></>,
 }));
+
 describe('collection-edition-creation-general', () => {
 	it('renders without crashing', () => {
 		render(
 			<CollectionGeneral
 				general={empty()}
 				handleChange={jest.fn()}
 				langs={locales}
+				errors={{ errorMessage: [], fields: {} }}
 			/>
 		);
 	});

src/packages/modules-concepts/collections/edition-creation/home.js

@@ -3,6 +3,7 @@ import { PageTitle } from '../../../components';
 import CollectionEditionCreationControls from './controls';
 import GeneralEdition from './general';
 import MembersEdition from '../../../modules-concepts/collections/edition/members';
+import { validate } from './validation';
 
 class CollectionEditionCreation extends Component {
 	constructor(props) {
@@ -69,40 +70,36 @@ class CollectionEditionCreation extends Component {
 	render() {
 		const { title, subtitle, collectionList, conceptList, creation, langs } =
 			this.props;
+
 		const {
 			data: { general, members },
 		} = this.state;
+
 		const { id: initialId, prefLabelLg1: initialPrefLabelLg1 } =
 			this.props.general;
 
+		const errors = validate(
+			general,
+			collectionList,
+			initialId,
+			initialPrefLabelLg1
+		);
+
 		return (
 			<div>
 				<div className="container">
 					<PageTitle title={title} subtitle={subtitle} />
-					{creation && (
-						<CollectionEditionCreationControls
-							general={general}
-							collectionList={collectionList}
-							creation
-							handleSave={this.handleSave}
-							redirectCancel={this.redirectCancel}
-						/>
-					)}
-					{!creation && (
-						<CollectionEditionCreationControls
-							general={general}
-							collectionList={collectionList}
-							initialId={initialId}
-							initialPrefLabelLg1={initialPrefLabelLg1}
-							handleSave={this.handleSave}
-							redirectCancel={this.redirectCancel}
-						/>
-					)}
+					<CollectionEditionCreationControls
+						handleSave={this.handleSave}
+						redirectCancel={this.redirectCancel}
+						errors={errors}
+					/>
 					<GeneralEdition
 						general={general}
 						creation={creation}
 						handleChange={this.handleChangeGeneral}
 						langs={langs}
+						errors={errors}
 					/>
 					<MembersEdition
 						members={members}