From 682a0f8f32e16fb09324efae456b139790f2a85c Mon Sep 17 00:00:00 2001 From: BulotF Date: Fri, 23 Jul 2021 16:10:13 +0200 Subject: [PATCH 01/44] remove "components" from routes --- app/src/js/applications/codelists/routes/index.js | 14 +++----------- packages/codelists/src/components/home/home.js | 8 ++++---- packages/codelists/src/components/search/search.js | 10 ++++------ packages/codelists/src/i18n/dictionary.js | 8 ++++++-- 4 files changed, 17 insertions(+), 23 deletions(-) diff --git a/app/src/js/applications/codelists/routes/index.js b/app/src/js/applications/codelists/routes/index.js index e9751dea6..a185d9084 100644 --- a/app/src/js/applications/codelists/routes/index.js +++ b/app/src/js/applications/codelists/routes/index.js @@ -19,22 +19,14 @@ const CodesListComponent = () => {
- + - +
diff --git a/packages/codelists/src/components/home/home.js b/packages/codelists/src/components/home/home.js index 6dcf749cc..9aa79cb9c 100644 --- a/packages/codelists/src/components/home/home.js +++ b/packages/codelists/src/components/home/home.js @@ -26,16 +26,16 @@ function CodeListsList() { return ; } return ( -
+
- +
- + ( -
  • - - {formatLabel(component)} - + const dataLinks = data.map((codelist) => ( +
  • + {formatLabel(codelist)}
    • )); return ( @@ -91,7 +89,7 @@ class SearchFormList extends AbstractAdvancedSearchComponent { redirect={} >
    - {D.componentTitle} + {D.codelistTitle}
    {codelist.codes && ( -
    - } - title={D.listElements} - alone={true} - /> -
    - )} - {codelist.codes && sortedCodes.filter((code) => code.parents).length > 0 && (
    `item/${id}`} + (a.code > b.code ? 1 : -1))} /> } title={D.listElements} @@ -124,6 +114,11 @@ export const CodeListDetailView = ({ /> )} + {codelist.codes && codes.filter((code) => code.parents).length > 0 && ( +
    + +
    + )} ); }; diff --git a/packages/codelists/src/components/codes-tree/index.js b/packages/codelists/src/components/codes-tree/index.js new file mode 100644 index 000000000..9bdff5a37 --- /dev/null +++ b/packages/codelists/src/components/codes-tree/index.js @@ -0,0 +1,57 @@ +import React, { useCallback, useState } from 'react'; +import PropTypes from 'prop-types'; +import SlidingPanel from 'react-sliding-side-panel'; +import D from '../../i18n/build-dictionary'; +import { CollapsiblePanel } from '../collapsible-panel'; +import { CodeDetail } from '../code-detail'; +import RmesTree from '../tree'; + +const CodesTree = ({ hidden = false, codes, tree, handleAdd }) => { + const [openPanel, setOpenPanel] = useState(false); + const [selectedCode, setSelectedCode] = useState(null); + + const seeClickHandler = useCallback( + (e) => { + const code = codes.find((c) => c.id === e.id); + setSelectedCode(code); + setOpenPanel(true); + }, + [codes] + ); + + /* const addClickHandler = useCallback( + (e) => { + handleAdd(e.id); + }, + [handleAdd] + ); */ + + return ( + + ); +}; + +CodesTree.propTypes = { + hidden: PropTypes.bool, + codes: PropTypes.array, + tree: PropTypes.array, + handleAdd: PropTypes.bool, +}; + +export default CodesTree; diff --git a/packages/codelists/src/components/collapsible-panel/collapsible-panel.spec.js b/packages/codelists/src/components/collapsible-panel/collapsible-panel.spec.js new file mode 100644 index 000000000..e9425ddca --- /dev/null +++ b/packages/codelists/src/components/collapsible-panel/collapsible-panel.spec.js @@ -0,0 +1,46 @@ +import '@testing-library/jest-dom'; +import React from 'react'; +import { render, fireEvent } from '@testing-library/react'; + +import { CollapsiblePanel } from '.'; + +describe('Collapsible Panel', () => { + it('should not be collapsible', () => { + const { container } = render( + + Children + + ); + expect(container.querySelector('#idbutton')).toBeNull(); + }); + it('should be expanded by default', () => { + const { container } = render( + + ); + expect(container.querySelector('#idbutton')).not.toBeNull(); + expect(container.querySelector('#idbody')).not.toHaveAttribute('hidden'); + }); + it('should be collapsed by default', () => { + const { container } = render( + + ); + expect(container.querySelector('#idbutton')).not.toBeNull(); + expect(container.querySelector('#idbody')).toHaveAttribute('hidden'); + }); + it('should be expanded after clicking to the button', () => { + const { container } = render( + + ); + expect(container.querySelector('#idbody')).not.toHaveAttribute('hidden'); + + fireEvent.click(container.querySelector('#idbutton')); + + expect(container.querySelector('#idbody')).toHaveAttribute('hidden'); + }); +}); diff --git a/packages/codelists/src/components/collapsible-panel/index.js b/packages/codelists/src/components/collapsible-panel/index.js new file mode 100644 index 000000000..c4a5bcae1 --- /dev/null +++ b/packages/codelists/src/components/collapsible-panel/index.js @@ -0,0 +1,59 @@ +import React, { useState, useCallback } from 'react'; +import { Note } from '@inseefr/wilco'; +import PropTypes from 'prop-types'; + +export const CollapsiblePanel = ({ + id, + title, + children, + hidden: hiddenProps, + collapsible = true, +}) => { + const [hidden, setHidden] = useState(hiddenProps); + const clickTitleHandler = useCallback(() => { + setHidden(!hidden); + }, [hidden]); + + const bodyId = `${id}body`; + const buttonId = `${id}button`; + + return ( +
    +
    + } + title={ + collapsible ? ( + + ) : ( + title + ) + } + alone={true} + /> + + ); +}; + +CollapsiblePanel.propTypes = { + id: PropTypes.string.isRequired, + title: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired, + children: PropTypes.oneOfType([PropTypes.array, PropTypes.string]).isRequired, + hidden: PropTypes.bool, + collapsible: PropTypes.bool, +}; diff --git a/packages/codelists/src/components/tree/index.js b/packages/codelists/src/components/tree/index.js index 41fbd9eb2..d5d6576de 100644 --- a/packages/codelists/src/components/tree/index.js +++ b/packages/codelists/src/components/tree/index.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; -import { Link } from 'react-router-dom'; import SortableTree from 'react-sortable-tree'; import 'react-sortable-tree/style.css'; +import D from '../../i18n/build-dictionary'; const RmesTree = (props) => { const [treeData, setTreeData] = useState(props.treeData); @@ -15,9 +15,13 @@ const RmesTree = (props) => { canDrop={() => false} generateNodeProps={(rowInfo) => ({ buttons: [ - - {rowInfo.node.label} - , + , ], })} /> diff --git a/packages/codelists/src/utils/index.js b/packages/codelists/src/utils/index.js index a750e8a59..8426e22c4 100644 --- a/packages/codelists/src/utils/index.js +++ b/packages/codelists/src/utils/index.js @@ -6,7 +6,7 @@ export const formatLabel = (component) => { return {component.labelLg1}; }; -export const validateCodelist = (component) => { +export const validateCodelist = (codelist) => { const validations = { id: 'errorsIdMandatory', lastListUriSegment: 'lastListUriSegmentMandatory', @@ -17,7 +17,26 @@ export const validateCodelist = (component) => { disseminationStatus: 'errorsDisseminationStatusMandatory', }; - const field = Object.keys(validations).find((field) => !component[field]); + const field = Object.keys(validations).find((field) => !codelist[field]); + + if (field) { + return { + field, + message: D[validations[field]], + }; + } + + return {}; +}; + +export const validateCode = (code) => { + const validations = { + id: 'errorsIdMandatory', + labelLg1: 'errorsLabelLg1Mandatory', + labelLg2: 'errorsLabelLg1Mandatory', + }; + + const field = Object.keys(validations).find((field) => !code[field]); if (field) { return { @@ -33,14 +52,14 @@ const treeElement = (n) => { if (n.parents) { return n.parents.map((p) => ({ id: n.code, - //title: '', + title: n.code + ' - ' + n.labelLg1, label: n.labelLg1, parent: p, })); } return { id: n.code, - //title: '', + title: n.code + ' - ' + n.labelLg1, label: n.labelLg1, parent: null, }; From 7af80bd9e7e4016fe0bd44f22429ca34335014b7 Mon Sep 17 00:00:00 2001 From: BulotF Date: Fri, 23 Jul 2021 20:58:06 +0200 Subject: [PATCH 03/44] manage right panel data --- packages/codelists/src/components/codes-tree/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/codelists/src/components/codes-tree/index.js b/packages/codelists/src/components/codes-tree/index.js index 9bdff5a37..d4d6e349c 100644 --- a/packages/codelists/src/components/codes-tree/index.js +++ b/packages/codelists/src/components/codes-tree/index.js @@ -12,7 +12,9 @@ const CodesTree = ({ hidden = false, codes, tree, handleAdd }) => { const seeClickHandler = useCallback( (e) => { - const code = codes.find((c) => c.id === e.id); + const code = codes.find( + (c) => c.id === e.target.parentElement.dataset.id + ); setSelectedCode(code); setOpenPanel(true); }, From b6092f05770e4c07f92fde6835eacdbaf0e52aa7 Mon Sep 17 00:00:00 2001 From: BulotF Date: Tue, 27 Jul 2021 12:07:39 +0200 Subject: [PATCH 04/44] manage code detail view : parents --- .../src/components/code-detail/edit.js | 29 +++++++++++ .../src/components/code-detail/index.js | 2 - .../src/components/code-detail/view.js | 36 +++++++++++++- .../src/components/codelist-detail/view.js | 18 +++++-- .../src/components/codes-tree/index.js | 48 +++++++++++-------- .../src/components/collapsible-panel/index.js | 2 +- packages/codelists/src/i18n/dictionary.js | 8 ++++ 7 files changed, 114 insertions(+), 29 deletions(-) diff --git a/packages/codelists/src/components/code-detail/edit.js b/packages/codelists/src/components/code-detail/edit.js index ab7d44768..f511e679f 100644 --- a/packages/codelists/src/components/code-detail/edit.js +++ b/packages/codelists/src/components/code-detail/edit.js @@ -5,6 +5,7 @@ import { ActionToolbar, ErrorBloc, LabelRequired, + Select, } from '@inseefr/wilco'; import { Stores } from 'bauhaus-utilities'; import { validateCode } from '../../utils'; @@ -14,6 +15,7 @@ import './edit.scss'; const DumbCodeDetailEdit = ({ code: initialCode, + codes, handleSave, handleBack, serverSideError, @@ -22,6 +24,7 @@ const DumbCodeDetailEdit = ({ useEffect(() => { setCode({ ...initialCode }); }, [initialCode]); + const [parents, setParents] = useState(code.parents); const handleChange = useCallback( (e) => { @@ -34,6 +37,15 @@ const DumbCodeDetailEdit = ({ [code] ); + const codesOptions = codes + .map((code) => { + return { + label: code.code + ' - ' + code.labelLg1, + value: code.code, + }; + }) + .concat({ label: '', value: null }); + const handleSaveClick = useCallback(() => { handleSave(code); }, [code, handleSave]); @@ -48,6 +60,23 @@ const DumbCodeDetailEdit = ({ {message && } {serverSideError && }
    +
    + {D.parentCodeTitle} + + (parents && parents.some((parent) => parent === value)) || + (!parents && value === null) + ) || null + } + options={codesOptions} + disabled + unclearable + onChange={setParents} + multi + /> +
    @@ -66,8 +98,10 @@ export const CodeDetailView = ({ CodeDetailView.propTypes = { code: PropTypes.object, + codes: PropTypes.object, handleUpdate: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), handleBack: PropTypes.func, updatable: PropTypes.bool, secondLang: PropTypes.bool, + publishComponent: PropTypes.func, }; diff --git a/packages/codelists/src/components/codelist-detail/view.js b/packages/codelists/src/components/codelist-detail/view.js index 8e4fd49aa..c8d44c916 100644 --- a/packages/codelists/src/components/codelist-detail/view.js +++ b/packages/codelists/src/components/codelist-detail/view.js @@ -15,6 +15,7 @@ import { PublicationFemale, } from 'bauhaus-utilities'; import D, { D1, D2 } from '../../i18n/build-dictionary'; +import { CollapsiblePanel } from '../collapsible-panel'; import { treedData } from '../../utils'; import CodesTree from '../codes-tree'; import { rowParams } from '../code-detail/code-columns'; @@ -28,6 +29,7 @@ export const CodeListDetailView = ({ col = 3, publishComponent, serverSideError, + hidden = false, }) => { const descriptionLg1 = HTMLUtils.renderMarkdownElement( codelist.descriptionLg1 @@ -102,21 +104,27 @@ export const CodeListDetailView = ({ {codelist.codes && (
    -
    )} {codelist.codes && codes.filter((code) => code.parents).length > 0 && (
    - +
    )} diff --git a/packages/codelists/src/components/codes-tree/index.js b/packages/codelists/src/components/codes-tree/index.js index d4d6e349c..71a1406c8 100644 --- a/packages/codelists/src/components/codes-tree/index.js +++ b/packages/codelists/src/components/codes-tree/index.js @@ -12,10 +12,10 @@ const CodesTree = ({ hidden = false, codes, tree, handleAdd }) => { const seeClickHandler = useCallback( (e) => { - const code = codes.find( - (c) => c.id === e.target.parentElement.dataset.id + const chosenCode = codes.find( + (c) => c.code === e.target.parentElement.dataset.componentId ); - setSelectedCode(code); + setSelectedCode(chosenCode); setOpenPanel(true); }, [codes] @@ -29,23 +29,31 @@ const CodesTree = ({ hidden = false, codes, tree, handleAdd }) => { ); */ return ( - +