diff --git a/client/src/pages/openalex-affiliations/components/export-errors-button.jsx b/client/src/pages/openalex-affiliations/components/export-errors-button.jsx index 6b2b3d8..c74cd10 100644 --- a/client/src/pages/openalex-affiliations/components/export-errors-button.jsx +++ b/client/src/pages/openalex-affiliations/components/export-errors-button.jsx @@ -4,13 +4,14 @@ import { useSearchParams } from 'react-router-dom'; import ButtonDropdown from '../../../components/button-dropdown'; export default function ExportErrorsButton({ + className, corrections, }) { const [searchParams] = useSearchParams(); return ( - - - -
-
-
- - {`Start: ${body.startYear}`} - - - {`End: ${body.endYear}`} - -
- - - - -
-
-
- {body.affiliations.map((affiliation) => ( - - - {affiliation.label} - - {affiliation.children.map((child) => ( - - {child.label} - - ))} - - ))} -
- - - {(body.excludedRors.length > 0) && ( - - -
- - - Excluded RORs - -
-
- {body.excludedRors.split(' ').map((excludedRor) => ( - - {excludedRor} - - ))} -
- - - )} - - - -
+ onExit()} + steps={steps} + /> + +
-
+ - setIsAddModalOpen((prev) => !prev)} - > - - Add ROR to   - {filteredAffiliations.filter((affiliation) => affiliation.selected).length} -   - {`OpenAlex selected affiliation${filteredAffiliations.filter((affiliation) => affiliation.selected).length > 1 ? 's' : ''}`} - - - - - - - ROR website - - - - - - setRor(e.target.value)} - value={ror} - label="ROR" - hint="Enter a valid ROR id and 'check' it with ROR API" - /> - - - - - - - - { - rorMessageType === 'valid' && cleanRor.rorName && cleanRor.rorCountry - && ( - <> -
-
- - - ) - } - - - - - - - setIsRemoveModalOpen((prev) => !prev)} - > - - Remove ROR to - {' '} - {filteredAffiliations.filter((affiliation) => affiliation.selected).length} - {` selected affiliation${filteredAffiliations.filter((affiliation) => affiliation.selected).length > 1 ? 's' : ''}`} - - - - - - - ROR website - - + {child.label} + + ))} - - - { - rorsToRemove && rorsToRemove.length > 0 && ( -
    - {rorsToRemove.map((_ror) => ( -
  • - ROR logo - { - _ror.removed ? ( - + ))} +
+ + + {(body.excludedRors.length > 0) && ( + + +
+ + + Excluded RORs + +
+
+ {body.excludedRors.split(' ').map((excludedRor) => ( + + {excludedRor} + + ))} +
+ + + )} +
+ + +
+
+
+ + setIsAddModalOpen((prev) => !prev)} + > + + Add ROR to   + {filteredAffiliations.filter((affiliation) => affiliation.selected).length} +   + {`OpenAlex selected affiliation${filteredAffiliations.filter((affiliation) => affiliation.selected).length > 1 ? 's' : ''}`} + + + + + + + ROR website + + + + + + setRor(e.target.value)} + value={ror} + label="ROR" + hint="Enter a valid ROR id and 'check' it with ROR API" + /> + + + + + + + + { + rorMessageType === 'valid' && cleanRor.rorName && cleanRor.rorCountry + && ( + <> +
+
+ + + ) + } + + + + + + + setIsRemoveModalOpen((prev) => !prev)} + > + + Remove ROR to + {' '} + {filteredAffiliations.filter((affiliation) => affiliation.selected).length} + {` selected affiliation${filteredAffiliations.filter((affiliation) => affiliation.selected).length > 1 ? 's' : ''}`} + + + + + + + ROR website + + + + + + { + rorsToRemove && rorsToRemove.length > 0 && ( +
    + {rorsToRemove.map((_ror) => ( +
  • + ROR logo + { + _ror.removed ? ( + + + {`https://ror.org/${_ror.rorId}`} + + + ) : ( {`https://ror.org/${_ror.rorId}`} - - ) : ( - - {`https://ror.org/${_ror.rorId}`} - - ) - } -
    • - ))} -
- ) - } - - - - - - - - - - -
-
- affiliation.addList.length > 0 || affiliation.removeList.length > 0)} - /> - affiliation.addList.length > 0 || affiliation.removeList.length > 0)} - resetCorrections={resetCorrections} - /> + ) + } + + + + + + +
+
+ affiliation.addList.length > 0 || affiliation.removeList.length > 0)} + /> + affiliation.addList.length > 0 || affiliation.removeList.length > 0)} + resetCorrections={resetCorrections} + /> +
+
- -
- - + + + )} diff --git a/client/src/pages/openalex-affiliations/search.jsx b/client/src/pages/openalex-affiliations/search.jsx index f40c59e..9f2da4c 100644 --- a/client/src/pages/openalex-affiliations/search.jsx +++ b/client/src/pages/openalex-affiliations/search.jsx @@ -34,34 +34,41 @@ export default function OpenalexAffiliationsSearch() { const [currentSearchParams, setCurrentSearchParams] = useState({}); const [deletedAffiliations, setDeletedAffiliations] = useState([]); + const [excludedRors, setExcludedRors] = useState(''); const [isLoading, setIsLoading] = useState(false); const [isOpen, setIsOpen] = useState(false); const [message, setMessage] = useState(''); const [messageType, setMessageType] = useState(''); const [onInputAffiliationsHandler, setOnInputAffiliationsHandler] = useState(false); - const [excludedRors, setExcludedRors] = useState(''); const [searchedAffiliations, setSearchedAffiliations] = useState([]); + const [stepsEnabled, setStepsEnabled] = useState(true); const [tags, setTags] = useState([]); const steps = [ { element: '.step-ror-to-add', - intro: 'Searched affiliations. Can be ROR or string. Press ENTER to validate. OR boolean.', - position: 'right', - tooltipClass: 'myTooltipClass', - highlightClass: 'myHighlightClass', + intro:
    +
  • Searched affiliations
    • +
  • Can be either ROR or string
    • +
  • Press ENTER to validate each seizure
    • +
  • OR boolean will be applied during the search
    • +
, }, { element: '.step-ror-to-exclude', - intro: 'Excluded ROR. Only ROR. Separate by space.', + intro:
    +
  • ROR to exclude
    • +
  • ROR only
    • +
  • Separate multiple ROR by space
    • +
, }, { element: '.step-year-start', - intro: 'Filter on publication year between start and end, included', + intro: 'Filter on publication year between start and end', }, { element: '.step-search-works', - intro: '⏳ Finally run the search. It can take a while ', + intro: 'Click here to run the search. ⏳ It can take a while', }, ]; @@ -182,26 +189,6 @@ export default function OpenalexAffiliationsSearch() { getData(); }, [currentSearchParams.getRorChildren, deletedAffiliations, searchedAffiliations]); - const onTagsChange = async (_affiliations, _deletedAffiliations) => { - const affiliations = _affiliations - .filter((affiliation) => affiliation.source === 'user') - .map((affiliation) => affiliation.label); - const deletedAffiliations1 = [ - ...new Set( - _deletedAffiliations - .map((affiliation) => affiliation.label) - .concat(currentSearchParams.deletedAffiliations || []), - ), - ].filter( - (item) => !_affiliations.map((affiliation) => affiliation.label).includes(item), - ); - setSearchParams({ - ...currentSearchParams, - affiliations, - deletedAffiliations: deletedAffiliations1, - }); - }; - const checkAndSendQuery = () => { if (onInputAffiliationsHandler) { setMessageType('error'); @@ -222,7 +209,27 @@ export default function OpenalexAffiliationsSearch() { navigate(`/openalex-affiliations/results?${_searchParams.toString()}`); }; - const switchGetRorChildren = () => setSearchParams({ ...currentSearchParams, getRorChildren: currentSearchParams.getRorChildren === '1' ? '0' : '1' }); + const onExit = () => setStepsEnabled(false); + + const onTagsChange = async (_affiliations, _deletedAffiliations) => { + const affiliations = _affiliations + .filter((affiliation) => affiliation.source === 'user') + .map((affiliation) => affiliation.label); + const deletedAffiliations1 = [ + ...new Set( + _deletedAffiliations + .map((affiliation) => affiliation.label) + .concat(currentSearchParams.deletedAffiliations || []), + ), + ].filter( + (item) => !_affiliations.map((affiliation) => affiliation.label).includes(item), + ); + setSearchParams({ + ...currentSearchParams, + affiliations, + deletedAffiliations: deletedAffiliations1, + }); + }; const removeAllAffiliations = () => { setSearchParams({ @@ -233,6 +240,8 @@ export default function OpenalexAffiliationsSearch() { setSearchedAffiliations([]); }; + const switchGetRorChildren = () => setSearchParams({ ...currentSearchParams, getRorChildren: currentSearchParams.getRorChildren === '1' ? '0' : '1' }); + const NB_TAGS_STICKY = 2; const tagsDisplayed = tags.slice(0, NB_TAGS_STICKY); @@ -244,10 +253,10 @@ export default function OpenalexAffiliationsSearch() { <>
onExit()} steps={steps} - onExit={() => {}} /> setIsOpen(false)} size="xl">