From c328c51e684664be32c9954c34c7b22da5b97b32 Mon Sep 17 00:00:00 2001
From: eric <eric.jeangirard@recherche.gouv.fr>
Date: Wed, 28 Feb 2024 21:16:59 +0100
Subject: [PATCH] split actions into tabs

---
 .../src/pages/actions/actionsAffiliations.jsx | 79 +++++++++++++++++++
 client/src/pages/actions/actionsDatasets.jsx  | 34 ++++++++
 .../src/pages/actions/actionsPublications.jsx | 37 +++++++++
 client/src/pages/index.jsx                    | 30 ++++---
 4 files changed, 169 insertions(+), 11 deletions(-)
 create mode 100644 client/src/pages/actions/actionsAffiliations.jsx
 create mode 100644 client/src/pages/actions/actionsDatasets.jsx
 create mode 100644 client/src/pages/actions/actionsPublications.jsx

diff --git a/client/src/pages/actions/actionsAffiliations.jsx b/client/src/pages/actions/actionsAffiliations.jsx
new file mode 100644
index 00000000..07d1f38f
--- /dev/null
+++ b/client/src/pages/actions/actionsAffiliations.jsx
@@ -0,0 +1,79 @@
+import { Col, File, Row } from '@dataesr/react-dsfr';
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { Tooltip } from 'react-tooltip';
+
+import Button from '../../components/button';
+import { export2json, importJson } from '../../utils/files';
+import { status } from '../../config';
+
+export default function ActionsAffiliations({
+  allAffiliations,
+  options,
+  setAllAffiliations,
+  tagAffiliations,
+}) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [displayFileUpload, setDisplayFileUpload] = useState(false);
+  const decidedAffiliations = allAffiliations?.filter((affiliation) => affiliation.status !== status.tobedecided.id) || [];
+
+  return (
+    <>
+      <Row className="fr-mb-1w">
+        <Col className="text-right">
+          <Button
+            data-tooltip-id="save-affiliations-button"
+            disabled={!decidedAffiliations.length}
+            icon="ri-save-line"
+            onClick={() => export2json({ decidedAffiliations, label: 'affiliations', searchParams })}
+            size="sm"
+          >
+            Save decided affiliations
+          </Button>
+          <Tooltip id="save-affiliations-button" hidden={!decidedAffiliations.length}>
+            Save the decided affiliations in order to restore it later
+          </Tooltip>
+          <Button
+            data-tooltip-id="restore-affiliations-button"
+            icon="ri-file-upload-line"
+            onClick={() => setDisplayFileUpload(true)}
+            secondary
+            size="sm"
+          >
+            Restore affiliations
+          </Button>
+          <Tooltip id="restore-affiliations-button">
+            Restore affiliations from saved file
+          </Tooltip>
+        </Col>
+      </Row>
+      {displayFileUpload && (
+        <Row className="fr-mb-1w">
+          <Col>
+            <File
+              accept=".json"
+              hint="Select JSON file to restore from previous state"
+              label="JSON file"
+              onChange={(e) => { importJson(e, options, setAllAffiliations, setSearchParams, tagAffiliations); setDisplayFileUpload(false); }}
+            />
+          </Col>
+        </Row>
+      )}
+    </>
+  );
+}
+
+ActionsAffiliations.propTypes = {
+  allAffiliations: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    nameHtml: PropTypes.string.isRequired,
+    key: PropTypes.string.isRequired,
+    status: PropTypes.string.isRequired,
+    works: PropTypes.arrayOf(PropTypes.string).isRequired,
+    worksNumber: PropTypes.number.isRequired,
+  })).isRequired,
+  options: PropTypes.object.isRequired,
+  setAllAffiliations: PropTypes.func.isRequired,
+  tagAffiliations: PropTypes.func.isRequired,
+};
diff --git a/client/src/pages/actions/actionsDatasets.jsx b/client/src/pages/actions/actionsDatasets.jsx
new file mode 100644
index 00000000..daa11c9d
--- /dev/null
+++ b/client/src/pages/actions/actionsDatasets.jsx
@@ -0,0 +1,34 @@
+import { Col, Row } from '@dataesr/react-dsfr';
+import PropTypes from 'prop-types';
+import { useSearchParams } from 'react-router-dom';
+
+import ButtonDropdown from '../../components/button-dropdown';
+
+export default function ActionsDatasets({
+  allDatasets,
+  options,
+  setAllDatasets,
+}) {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  return (
+    <Row className="fr-mb-1w">
+      <Col className="text-right">
+        <ButtonDropdown data={allDatasets} label="datasets" searchParams={searchParams} />
+      </Col>
+    </Row>
+  );
+}
+
+ActionsDatasets.propTypes = {
+  allDatasets: PropTypes.arrayOf(PropTypes.shape({
+    affiliations: PropTypes.arrayOf(PropTypes.object),
+    allIds: PropTypes.arrayOf(PropTypes.object).isRequired,
+    datasource: PropTypes.arrayOf(PropTypes.string).isRequired,
+    id: PropTypes.string.isRequired,
+    status: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+  })).isRequired,
+  options: PropTypes.object.isRequired,
+  setAllDatasets: PropTypes.func.isRequired,
+};
diff --git a/client/src/pages/actions/actionsPublications.jsx b/client/src/pages/actions/actionsPublications.jsx
new file mode 100644
index 00000000..68a1e393
--- /dev/null
+++ b/client/src/pages/actions/actionsPublications.jsx
@@ -0,0 +1,37 @@
+import { Col, File, Row } from '@dataesr/react-dsfr';
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import ButtonDropdown from '../../components/button-dropdown';
+import { export2json, importJson } from '../../utils/files';
+import { status } from '../../config';
+
+export default function ActionsPublications({
+  allPublications,
+  options,
+  setAllPublications,
+}) {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  return (
+    <Row className="fr-mb-1w">
+      <Col className="text-right">
+        <ButtonDropdown data={allPublications} label="publications" searchParams={searchParams} />
+      </Col>
+    </Row>
+  );
+}
+
+ActionsPublications.propTypes = {
+  allPublications: PropTypes.arrayOf(PropTypes.shape({
+    affiliations: PropTypes.arrayOf(PropTypes.object).isRequired,
+    allIds: PropTypes.arrayOf(PropTypes.object).isRequired,
+    datasource: PropTypes.arrayOf(PropTypes.string).isRequired,
+    id: PropTypes.string.isRequired,
+    status: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+  })).isRequired,
+  options: PropTypes.object.isRequired,
+  setAllPublications: PropTypes.func.isRequired,
+};
diff --git a/client/src/pages/index.jsx b/client/src/pages/index.jsx
index 8ed0bb36..7cd1d041 100644
--- a/client/src/pages/index.jsx
+++ b/client/src/pages/index.jsx
@@ -9,7 +9,9 @@ import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import useWebSocket from 'react-use-websocket';
 
-import Actions from './actions';
+import ActionsAffiliations from './actions/actionsAffiliations';
+import ActionsDatasets from './actions/actionsDatasets';
+import ActionsPublications from './actions/actionsPublications';
 import AffiliationsTab from './affiliationsTab';
 import { PageSpinner } from '../components/spinner';
 import Stepper from '../components/stepper';
@@ -151,15 +153,6 @@ export default function Home() {
         </Row>
       </Container>
       <Container className="fr-mx-5w" as="section" fluid>
-        <Actions
-          allAffiliations={allAffiliations}
-          allDatasets={allDatasets}
-          allPublications={allPublications}
-          options={options}
-          setAllAffiliations={setAllAffiliations}
-          setAllPublications={setAllPublications}
-          tagAffiliations={tagAffiliations}
-        />
         {isFetching && (
           <>
             <Stepper current={current} />
@@ -167,7 +160,7 @@ export default function Home() {
           </>
         )}
         {!isFetching && (allAffiliations?.length > 0 || allDatasets?.length > 0 || allPublications?.length > 0) && (
-          <Tabs defaultActiveTab={1}>
+          <Tabs defaultActiveTab={0}>
             <Tab label="Affiliation RoR matching in OpenAlex">
               <OpenalexTab
                 affiliations={allAffiliations.filter((aff) => aff.source === 'OpenAlex')}
@@ -177,6 +170,12 @@ export default function Home() {
               />
             </Tab>
             <Tab label="List of raw affiliations">
+              <ActionsAffiliations
+                allAffiliations={allAffiliations}
+                options={options}
+                setAllAffiliations={setAllAffiliations}
+                tagAffiliations={tagAffiliations}
+              />
               <AffiliationsTab
                 affiliations={allAffiliations}
                 selectedAffiliations={selectedAffiliations}
@@ -185,6 +184,11 @@ export default function Home() {
               />
             </Tab>
             <Tab label="List of publications">
+              <ActionsPublications
+                allPublications={allPublications}
+                options={options}
+                setAllPublications={setAllPublications}
+              />
               <PublicationsTab
                 publishers={data.publications?.publishers || []}
                 publications={allPublications}
@@ -196,6 +200,10 @@ export default function Home() {
               />
             </Tab>
             <Tab label="List of datasets">
+              <ActionsDatasets
+                allDatasets={allDatasets}
+                options={options}
+              />
               <DatasetsTab
                 datasets={allDatasets}
                 publishers={data.datasets.publishers}