From a32df0458831f7c6259005b92ec10cc16e97b6fb Mon Sep 17 00:00:00 2001
From: jerem <jeremy.peglion@gmail.com>
Date: Wed, 13 Nov 2024 10:48:22 +0100
Subject: [PATCH] style(openAlex): add left column

---
 client/src/pages/openalex-ror/openalexTab.jsx | 123 +++++++++---------
 client/src/pages/openalex-ror/results.jsx     |  34 +++--
 2 files changed, 80 insertions(+), 77 deletions(-)

diff --git a/client/src/pages/openalex-ror/openalexTab.jsx b/client/src/pages/openalex-ror/openalexTab.jsx
index 7d35877..b0ebd46 100644
--- a/client/src/pages/openalex-ror/openalexTab.jsx
+++ b/client/src/pages/openalex-ror/openalexTab.jsx
@@ -79,7 +79,7 @@ export default function OpenalexTab({
   }, [affiliations, filteredAffiliationName, filteredStatus]);
 
   return (
-    <Container fluid>
+    <div className="wm-bg wm-content">
       <Modal isOpen={isModalOpen} hide={() => setIsModalOpen((prev) => !prev)}>
         <ModalTitle>
           {`${capitalize(action)} ROR to ${
@@ -109,69 +109,66 @@ export default function OpenalexTab({
           </Button>
         </ModalFooter>
       </Modal>
-      <Row className="wm-bg">
-        <Col md={12} className="wm-content fr-mb-1w">
-          <div className="wm-actions">
-            <div className="wm-external-actions">
-              <span className="wm-text fr-mb-3w">
-                <span>{selectedOpenAlex.length}</span>
-                {` selected affiliation${selectedOpenAlex.length === 1 ? '' : 's'}`}
-              </span>
-              <Button
-                className="fr-ml-5w fr-mr-1w"
-                color="beige-gris-galet"
-                disabled={!selectedOpenAlex.length}
-                icon="add-circle-line"
-                key="add-ror"
-                onClick={() => {
-                  setAction('add');
-                  setIsModalOpen((prev) => !prev);
-                }}
-                size="sm"
-                title="Add ROR"
-              >
-                Add ROR
-              </Button>
-              <Button
-                className="fr-mr-1w"
-                color="beige-gris-galet"
-                disabled={!selectedOpenAlex.length}
-                icon="close-circle-line"
-                key="remove-ror"
-                onClick={() => {
-                  setAction('remove');
-                  setIsModalOpen((prev) => !prev);
-                }}
-                size="sm"
-                title="Remove ROR"
-              >
-                Remove ROR
-              </Button>
-              <ExportErrorsButton
-                allOpenalexCorrections={allOpenalexCorrections}
-                options={options}
-              />
-              <SendFeedbackButton
-                allOpenalexCorrections={allOpenalexCorrections}
-              />
-            </div>
-            <div className="wm-internal-actions">
-              actions relatives au tableau du dessous
-            </div>
-          </div>
-          <OpenalexView
-            allAffiliations={filteredAffiliations}
-            filteredAffiliationName={filteredAffiliationName}
-            selectedOpenAlex={selectedOpenAlex}
-            setAllOpenalexCorrections={setAllOpenalexCorrections}
-            setFilteredAffiliationName={setFilteredAffiliationName}
-            setSelectedOpenAlex={setSelectedOpenAlex}
-            undo={undo}
+      {/* <Col md={12} className="wm-content fr-mb-1w"> */}
+      <div className="wm-actions">
+        <div className="wm-external-actions">
+          <span className="wm-text fr-mb-3w">
+            <span>{selectedOpenAlex.length}</span>
+            {` selected affiliation${selectedOpenAlex.length === 1 ? '' : 's'}`}
+          </span>
+          <Button
+            className="fr-ml-5w fr-mr-1w"
+            color="beige-gris-galet"
+            disabled={!selectedOpenAlex.length}
+            icon="add-circle-line"
+            key="add-ror"
+            onClick={() => {
+              setAction('add');
+              setIsModalOpen((prev) => !prev);
+            }}
+            size="sm"
+            title="Add ROR"
+          >
+            Add ROR
+          </Button>
+          <Button
+            className="fr-mr-1w"
+            color="beige-gris-galet"
+            disabled={!selectedOpenAlex.length}
+            icon="close-circle-line"
+            key="remove-ror"
+            onClick={() => {
+              setAction('remove');
+              setIsModalOpen((prev) => !prev);
+            }}
+            size="sm"
+            title="Remove ROR"
+          >
+            Remove ROR
+          </Button>
+          <ExportErrorsButton
+            allOpenalexCorrections={allOpenalexCorrections}
+            options={options}
+          />
+          <SendFeedbackButton
+            allOpenalexCorrections={allOpenalexCorrections}
           />
-        </Col>
-        <Col />
-      </Row>
-    </Container>
+        </div>
+        <div className="wm-internal-actions">
+          actions relatives au tableau du dessous
+        </div>
+      </div>
+      <OpenalexView
+        allAffiliations={filteredAffiliations}
+        filteredAffiliationName={filteredAffiliationName}
+        selectedOpenAlex={selectedOpenAlex}
+        setAllOpenalexCorrections={setAllOpenalexCorrections}
+        setFilteredAffiliationName={setFilteredAffiliationName}
+        setSelectedOpenAlex={setSelectedOpenAlex}
+        undo={undo}
+      />
+      {/* </Col> */}
+    </div>
   );
 }
 
diff --git a/client/src/pages/openalex-ror/results.jsx b/client/src/pages/openalex-ror/results.jsx
index 347af2e..16788ea 100644
--- a/client/src/pages/openalex-ror/results.jsx
+++ b/client/src/pages/openalex-ror/results.jsx
@@ -94,7 +94,7 @@ export default function Affiliations() {
   return (
     <>
       <Header isSticky />
-      <Container fluid as="section">
+      <Container fluid as="section" className="wm-bg">
         {isFetching && (
           <Row>
             <Col xs="2" offsetXs="6">
@@ -115,8 +115,8 @@ export default function Affiliations() {
         )}
 
         {!isFetching && isFetched && (
-          <>
-            <Row className="wm-bg">
+          <Row>
+            {/* <Row className="wm-bg">
               <Col md={9} offsetMd={2}>
                 <div className="wm-actions">
                   <ExportErrorsButton
@@ -129,17 +129,23 @@ export default function Affiliations() {
                 </div>
               </Col>
               <Col />
-            </Row>
-            <OpenalexTab
-              affiliations={affiliations.filter(
-                (affiliation) => affiliation.source === 'OpenAlex',
-              )}
-              allOpenalexCorrections={allOpenalexCorrections}
-              options={options}
-              setAllOpenalexCorrections={setAllOpenalexCorrections}
-              undo={undo}
-            />
-          </>
+            </Row> */}
+            <Col md={2}>
+              params:
+
+            </Col>
+            <Col md={10}>
+              <OpenalexTab
+                affiliations={affiliations.filter(
+                  (affiliation) => affiliation.source === 'OpenAlex',
+                )}
+                allOpenalexCorrections={allOpenalexCorrections}
+                options={options}
+                setAllOpenalexCorrections={setAllOpenalexCorrections}
+                undo={undo}
+              />
+            </Col>
+          </Row>
         )}
       </Container>
     </>