fix(export): Add button dropdown for multiple formats

dataesr · Jan 31, 2024 · 4d0d7d4 · 4d0d7d4
1 parent 74b9277
commit 4d0d7d4
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 65 deletions.
diff --git a/client/src/components/button-dropdown/index.jsx b/client/src/components/button-dropdown/index.jsx
@@ -0,0 +1,50 @@
+// https://www.w3schools.com/css/css_dropdowns.asp
+import PropTypes from 'prop-types';
+
+import Button from '../button';
+import { export2Csv, export2FosmCsv, export2jsonl } from '../../utils/file';
+
+import './index.scss';
+
+export default function ButtonDropdown({ data, label }) {
+  return (
+    <div className={`dropdown ${data.length > 0 ? 'enabled' : 'disabled'}`}>
+      <Button
+        disabled={!data.length}
+        icon="ri-save-line"
+        size="sm"
+      >
+        Export
+        {' '}
+        {label}
+      </Button>
+      <div className="dropdown-content">
+        <Button
+          onClick={() => export2Csv({ data, label })}
+          size="sm"
+        >
+          Export in CSV (minimal data)
+        </Button>
+        <Button
+          onClick={() => export2jsonl({ data, label })}
+          size="sm"
+        >
+          Export in JSONL (complete data)
+        </Button>
+        {label === 'publications' && (
+          <Button
+            onClick={() => export2FosmCsv(data)}
+            size="sm"
+          >
+            Custom export for French OSM
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+ButtonDropdown.propTypes = {
+  data: PropTypes.array.isRequired,
+  label: PropTypes.string.isRequired,
+};
diff --git a/client/src/components/button-dropdown/index.scss b/client/src/components/button-dropdown/index.scss
@@ -0,0 +1,15 @@
+.dropdown {
+  display: inline-block;
+  position: relative;
+
+  .dropdown-content {
+    display: none;
+    min-width: 160px;
+    position: absolute;
+    z-index: 1;
+  }
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
diff --git a/client/src/pages/actions.jsx b/client/src/pages/actions.jsx
@@ -5,7 +5,8 @@ import { useSearchParams } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
 
 import Button from '../components/button';
-import { export2Csv, export2FosmCsv, export2json, export2jsonl, importJson } from '../utils/file';
+import ButtonDropdown from '../components/button-dropdown';
+import { export2json, importJson } from '../utils/file';
 import { status } from '../config';
 
 export default function Actions({
@@ -50,70 +51,8 @@ export default function Actions({
           <Tooltip id="restore-affiliations-button">
             Restore affiliations from saved file
           </Tooltip>
-          <Button
-            data-tooltip-id="export-datasets-csv-button"
-            disabled={!allDatasets.length}
-            icon="ri-save-line"
-            onClick={() => export2Csv({ data: allDatasets, label: 'datasets' })}
-            size="sm"
-          >
-            Export datasets (minimal data)
-          </Button>
-          <Tooltip id="export-datasets-csv-button" hidden={!allDatasets.length}>
-            Export all datasets in CSV
-          </Tooltip>
-          <Button
-            data-tooltip-id="export-datasets-jsonl-button"
-            disabled={!allDatasets.length}
-            icon="ri-save-line"
-            onClick={() => export2jsonl({ data: allDatasets, label: 'datasets' })}
-            size="sm"
-          >
-            Export datasets (complete data)
-          </Button>
-          <Tooltip id="export-datasets-jsonl-button" hidden={!allDatasets.length}>
-            Export all datasets in JSONL
-          </Tooltip>
-          <Button
-            data-tooltip-id="export-publications-csv-button"
-            disabled={!allPublications.length}
-            icon="ri-save-line"
-            onClick={() => export2Csv({ data: allPublications, label: 'publications' })}
-            size="sm"
-          >
-            Export publications (minimal data)
-          </Button>
-          <Tooltip id="export-publications-csv-button" hidden={!allPublications.length}>
-            Export all publications in CSV
-          </Tooltip>
-          <Button
-            data-tooltip-id="export-publications-jsonl-button"
-            disabled={!allPublications.length}
-            icon="ri-save-line"
-            onClick={() => export2jsonl({ data: allPublications, label: 'publications' })}
-            size="sm"
-          >
-            Export publications (complete data)
-          </Button>
-          <Tooltip id="export-publications-jsonl-button" hidden={!allPublications.length}>
-            Export all publications in JSONL
-          </Tooltip>
-          <Button
-            data-tooltip-id="export-fosm-button"
-            disabled={!allPublications.length}
-            icon="ri-save-line"
-            onClick={() => export2FosmCsv(allPublications)}
-            size="sm"
-          >
-            Custom export for French OSM
-          </Button>
-          <Tooltip id="export-fosm-button" hidden={!allPublications.length}>
-            Export the
-            {' '}
-            <b>validated</b>
-            {' '}
-            publications in the format needed to build a local French OSM in CSV
-          </Tooltip>
+          <ButtonDropdown data={allDatasets} label="datasets" />
+          <ButtonDropdown data={allPublications} label="publications" />
         </Col>
       </Row>
       {displayFileUpload && (