Merge pull request #988 from InseeFr/feat/create-document-from-sims

feat: be able to add document/link from the SIMS page

src/packages/modules-operations/document/edition/edition.jsx

@@ -154,7 +154,11 @@ const OperationsDocumentationEdition = (props) => {
 		saveDocument(document, type, files)
 			.then(
 				(id = document.id) => {
-					goBack(`/operations/${type}/${id}`, isCreation);
+					if (props.onSave) {
+						props.onSave(id);
+					} else {
+						goBack(`/operations/${type}/${id}`, isCreation);
+					}
 				},
 				(err) => {
 					setServerSideError(err);
@@ -219,7 +223,11 @@ const OperationsDocumentationEdition = (props) => {
 				/>
 			)}
 			<ActionToolbar>
-				<CancelButton action={() => goBack('/operations/documents')} />
+				<CancelButton
+					action={() =>
+						props.onCancel ? props.onCancel() : goBack('/operations/documents')
+					}
+				/>
 				<SaveButton
 					action={onSubmit}
 					disabled={clientSideErrors.errorMessage?.length > 0}

src/packages/modules-operations/msd/documents/documents-bloc/index.jsx

@@ -1,7 +1,7 @@
 import D, { D1, D2 } from '../../../../deprecated-locales';
 import { useState, useEffect } from 'react';
 import './style.scss';
-import { isDocument, isLink } from '../../../document/utils';
+import { DOCUMENT, isDocument, isLink, LINK } from '../../../document/utils';
 import { getBaseURI } from '../../../../sdk';
 import { sortArray } from '../../../../utils/array-utils';
 import { getLang } from '../../../../utils/dictionnary';
@@ -43,7 +43,7 @@ export function DocumentsBloc({
 	addHandler,
 	objectType,
 }) {
-	const documentStores = useDocumentsStoreContext();
+	const { documentStores, openLateralPanelOpened } = useDocumentsStoreContext();
 
 	/**
 	 * @param {import('js/types').SimsDocuments} document
@@ -127,7 +127,7 @@ export function DocumentsBloc({
 				</ul>
 			)}
 			{editMode && (
-				<div className="panel panel-default">
+				<div className="documentblock__picker panel panel-default">
 					<div className="panel-heading">
 						<button
 							type="button"
@@ -143,6 +143,18 @@ export function DocumentsBloc({
 							/>
 							{addTitle} <span className="badge">{otherDocuments.length}</span>
 						</button>
+						<button
+							type="button"
+							className="btn"
+							aria-label={D.btnAdd}
+							onClick={() =>
+								openLateralPanelOpened(
+									objectType === 'documents' ? DOCUMENT : LINK
+								)
+							}
+						>
+							<AddLogo />
+						</button>
 					</div>
 					{panelStatus && (
 						<div className="panel-body">

src/packages/modules-operations/msd/documents/documents-bloc/index.spec.jsx

@@ -44,7 +44,9 @@ const documents = [
 
 export const renderWithStore = (component) => {
 	return render(
-		<DocumentsStoreProvider value={{ lg1: documents, lg2: documents }}>
+		<DocumentsStoreProvider
+			value={{ documentStores: { lg1: documents, lg2: documents } }}
+		>
 			{component}
 		</DocumentsStoreProvider>
 	);

src/packages/modules-operations/msd/documents/documents-bloc/style.scss

@@ -23,3 +23,15 @@
 		flex: 2 1 auto;
 	}
 }
+
+.documentblock__picker {
+	.panel-heading {
+		display: flex;
+		justify-content: space-between;
+
+		.btn {
+			background-color: transparent;
+		}
+	}
+
+}

src/packages/modules-operations/msd/index.jsx

@@ -17,16 +17,15 @@ import { getOperationsCodesList } from '../../redux/operations/selector';
 
 import { useParams } from 'react-router-dom';
 import { getOperationsSimsCurrent } from '../../redux/selectors';
-import { GeneralApi } from '../../sdk/general-api';
 import { OperationsApi } from '../../sdk/operations-api';
-import { sortArray } from '../../utils/array-utils';
 import { useOrganizations } from '../../utils/hooks/organizations';
 import { useGoBack } from '../../utils/hooks/useGoBack';
 import { SimsContextProvider } from './context';
 import './msd.scss';
 import { DocumentsStoreProvider } from './pages/sims-creation/documents-store-context';
 import { isEssentialRubricKo } from './sims-field-title';
 import { getParentId, getParentType } from './utils';
+import { useDocumentsList } from './pages/sims-creation/useDocumentsList';
 
 export const HELP = 'HELP';
 export const CREATE = 'CREATE';
@@ -263,10 +262,7 @@ const MSDContainerWithParent = (props) => {
 	const { idParent, parentType } = props;
 	const [parent, setParent] = useState(props.parent);
 	const [loading, setLoading] = useState(true);
-	const [documentStores, setDocumentStores] = useState({
-		lg1: [],
-		lg2: [],
-	});
+	const { documentStores, setDocumentStores } = useDocumentsList();
 
 	const goBack = useGoBack();
 
@@ -297,25 +293,20 @@ const MSDContainerWithParent = (props) => {
 		}
 	}, [idParent, parentType]);
 
-	useEffect(() => {
-		GeneralApi.getDocumentsList().then((results) => {
-			const unSortedDocuments = results.map((document) => {
-				return {
-					...document,
-					id: document.uri.substr(document.uri.lastIndexOf('/') + 1),
-				};
-			});
-			setDocumentStores({
-				lg1: sortArray('labelLg1')(unSortedDocuments),
-				lg2: sortArray('labelLg2')(unSortedDocuments),
-			});
-		});
-	}, []);
+	const [lateralPanelOpened, setLateralPanelOpened] = useState();
 
 	if (loading) return <Loading />;
 
 	return (
-		<DocumentsStoreProvider value={documentStores}>
+		<DocumentsStoreProvider
+			value={{
+				documentStores,
+				updateDocumentStores: setDocumentStores,
+				lateralPanelOpened,
+				onLateralPanelHide: () => setLateralPanelOpened(undefined),
+				openLateralPanelOpened: (type) => setLateralPanelOpened(type),
+			}}
+		>
 			<MSDContainer
 				{...props}
 				organisations={organisations}

src/packages/modules-operations/msd/pages/sims-creation/document-form-panel.scss

@@ -0,0 +1,5 @@
+.documents-form-panel {
+	.container {
+		width: 100%;
+	}
+}

src/packages/modules-operations/msd/pages/sims-creation/document-form-panel.tsx

@@ -0,0 +1,54 @@
+import { RightSlidingPanel } from '../../../../components/sliding-panel';
+import { useCodesList } from '../../../../utils/hooks/codeslist';
+import OperationsDocumentationEdition from '../../../document/edition/edition';
+import { useDocumentsStoreContext } from './documents-store-context';
+import './document-form-panel.scss';
+import { useState } from 'react';
+import { Loading } from '../../../../components';
+import { getDocumentsList } from './useDocumentsList';
+
+type DocumentFormPanelTypes = {
+	opened: boolean;
+	onHide: () => void;
+};
+export const DocumentFormPanel = ({
+	opened,
+	onHide,
+}: Readonly<DocumentFormPanelTypes>) => {
+	const langOptions = useCodesList('ISO-639');
+	const { lateralPanelOpened, onLateralPanelHide, updateDocumentStores } =
+		useDocumentsStoreContext();
+	const [saving, setSaving] = useState(false);
+
+	const onSave = () => {
+		setSaving(true);
+		getDocumentsList()
+			.then((result) => updateDocumentStores(result))
+			.then(() => {
+				setSaving(false);
+				if (onLateralPanelHide) {
+					onLateralPanelHide();
+				}
+			});
+	};
+
+	return (
+		<RightSlidingPanel
+			isOpen={opened}
+			backdropClicked={onHide}
+			panelClassName="documents-form-panel"
+		>
+			{saving ? (
+				<Loading textType="saving" />
+			) : (
+				<OperationsDocumentationEdition
+					document={{}}
+					langOptions={langOptions}
+					type={lateralPanelOpened}
+					onCancel={onLateralPanelHide}
+					onSave={onSave}
+				/>
+			)}
+		</RightSlidingPanel>
+	);
+};

src/packages/modules-operations/msd/pages/sims-creation/documents-store-context.tsx

@@ -1,10 +1,18 @@
 import { createContext, useContext } from 'react';
 import { Document } from '../../../../model/operations/document';
+import { DOCUMENT, LINK } from '../../../document/utils';
 
-export type DocumentsStoreContextType = {
+export type DocumentsStoreObject = {
 	lg1: Document[];
 	lg2: Document[];
 };
+export type DocumentsStoreContextType = {
+	documentStores: DocumentsStoreObject;
+	updateDocumentStores: (store: DocumentsStoreObject) => void;
+	lateralPanelOpened?: typeof DOCUMENT | typeof LINK;
+	onLateralPanelHide?: () => void;
+	openLateralPanelOpened?: (type: typeof DOCUMENT | typeof LINK) => void;
+};
 const DocumentsStoreContext = createContext<
 	DocumentsStoreContextType | undefined
 >(undefined);

src/packages/modules-operations/msd/pages/sims-creation/index.jsx

@@ -25,6 +25,8 @@ import { flattenTree, rangeType } from '../../../utils/msd';
 import { RubricEssentialMsg } from '../../rubric-essantial-msg';
 import './sims-creation.scss';
 import { useBlocker } from 'react-router-dom';
+import { DocumentFormPanel } from './document-form-panel';
+import { useDocumentsStoreContext } from './documents-store-context';
 
 const { RICH_TEXT } = rangeType;
 
@@ -255,6 +257,9 @@ const SimsCreation = ({
 			});
 		};
 	};
+
+	const { lateralPanelOpened, onLateralPanelHide } = useDocumentsStoreContext();
+
 	if (loading) return <Loading textType="loading" />;
 	if (saving) return <Loading textType="saving" />;
 
@@ -267,6 +272,11 @@ const SimsCreation = ({
 
 			<RubricEssentialMsg secondLang={secondLang} />
 
+			<DocumentFormPanel
+				opened={lateralPanelOpened}
+				onHide={onLateralPanelHide}
+			/>
+
 			{Object.values(metadataStructure).map((msd, index) => {
 				return (
 					<div key={msd.idMas} className="bauhaus-sims-creation">

src/packages/modules-operations/msd/pages/sims-creation/sims-document-field.tsx

@@ -43,7 +43,6 @@ export const SimsDocumentField = ({
 
 	return (
 		<>
-			{' '}
 			<div className="bauhaus-document-field">
 				<DocumentsBloc
 					documents={(currentSection['documents' + lang] || []).filter(

src/packages/modules-operations/msd/pages/sims-creation/sims-field.scss

@@ -8,7 +8,7 @@
 .bauhaus-document-field {
 	padding-left: 0.5em;
 	padding-right: 0.5em;
-	.panel-heading {
+	> .panel-default > .panel-heading {
 		padding: 5px 15px;
 		background-color: var(--color-2);
 		color: white;

src/packages/modules-operations/msd/pages/sims-creation/useDocumentsList.ts

@@ -0,0 +1,31 @@
+import { sortArray } from '../../../../utils/array-utils';
+import { GeneralApi } from '../../../../sdk/general-api';
+import { useEffect, useState } from 'react';
+
+export const useDocumentsList = () => {
+	const [documentStores, setDocumentStores] = useState({
+		lg1: [],
+		lg2: [],
+	});
+
+	useEffect(() => {
+		getDocumentsList().then((result: any) => setDocumentStores(result));
+	}, []);
+
+	return { documentStores, setDocumentStores };
+};
+
+export const getDocumentsList = () => {
+	return GeneralApi.getDocumentsList().then((results: any) => {
+		const unSortedDocuments = results.map((document: any) => {
+			return {
+				...document,
+				id: document.uri.substr(document.uri.lastIndexOf('/') + 1),
+			};
+		});
+		return {
+			lg1: sortArray('labelLg1')(unSortedDocuments),
+			lg2: sortArray('labelLg2')(unSortedDocuments),
+		};
+	});
+};

src/packages/modules-operations/msd/pages/sims-visualisation/index.jsx

@@ -43,7 +43,7 @@ export default function SimsVisualisation({
 	missingDocuments,
 	owners = [],
 }) {
-	const documentStores = useDocumentsStoreContext();
+	const { documentStores } = useDocumentsStoreContext();
 	const [secondLang] = useSecondLang();
 	const [modalOpened, setModalOpened] = useState(false);
 	const [exportModalOpened, setExportModalOpened] = useState(false);

src/packages/modules-operations/msd/pages/sims-visualisation/sims-block-richtext.spec.jsx

@@ -4,7 +4,7 @@ import { DocumentsStoreProvider } from '../sims-creation/documents-store-context
 
 export const renderWithStore = (component) => {
 	return render(
-		<DocumentsStoreProvider value={{ lg1: [], lg2: [] }}>
+		<DocumentsStoreProvider value={{ documentStores: { lg1: [], lg2: [] } }}>
 			{component}
 		</DocumentsStoreProvider>
 	);