feat(openAlex): add RorBadge component and integrate it into ListView

dataesr · Nov 19, 2024 · afd04c9 · afd04c9
1 parent ac3ad65
commit afd04c9
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 46 deletions.
diff --git a/client/src/pages/openalex-ror/components/ror-badge.jsx b/client/src/pages/openalex-ror/components/ror-badge.jsx
@@ -0,0 +1,62 @@
+import { Link } from '@dataesr/dsfr-plus';
+import PropTypes from 'prop-types';
+
+export default function RorBadge({ ror, setFilteredAffiliationName, rorColor }) {
+  console.log(rorColor, getComputedStyle(document.documentElement).getPropertyValue(`--${rorColor}`));
+
+  return (
+    <div className="wm-ror-badge">
+      <span style={{ backgroundColor: getComputedStyle(document.documentElement).getPropertyValue(`--${rorColor}`) }} />
+      <div>
+        <img
+          alt="ROR logo"
+          className="vertical-middle fr-mx-1w"
+          src="https://raw.githubusercontent.com/ror-community/ror-logos/main/ror-icon-rgb.svg"
+          height="16"
+        />
+      </div>
+      https://ror.org/
+      <Link href={`https://ror.org/${ror.rorId}`} target="_blank">
+        {` ${ror.rorId}`}
+      </Link>
+      <button
+        type="button"
+        aria-label="filter on this ROR id"
+        className="fr-icon fr-fi-filter-line fr-icon--sm"
+        onClick={() => setFilteredAffiliationName(ror.rorId)}
+      />
+
+      {/* <img
+        alt="ROR logo"
+        className="vertical-middle fr-mx-1w"
+        src="https://raw.githubusercontent.com/ror-community/ror-logos/main/ror-icon-rgb.svg"
+        height="16"
+      />
+      https://ror.org/
+      <Badge
+        className="fr-mr-1w"
+        color={defineRorColor.find((r) => r.ror === ror.rorId)?.color || 'yellow-tournesol'}
+        size="sm"
+      >
+        <Link className="fr-mr-1w" href={`https://ror.org/${ror.rorId}`} target="_blank">
+          {` ${ror.rorId}`}
+        </Link>
+      </Badge>
+      <Button
+        aria-label="filter on this ROR id"
+        icon="filter-line"
+        onClick={() => setFilteredAffiliationName(ror.rorId)}
+        size="sm"
+        variant="text"
+      /> */}
+    </div>
+  );
+}
+
+RorBadge.propTypes = {
+  ror: PropTypes.shape({
+    rorId: PropTypes.string.isRequired,
+  }).isRequired,
+  setFilteredAffiliationName: PropTypes.func.isRequired,
+  rorColor: PropTypes.string.isRequired,
+};
diff --git a/client/src/pages/openalex-ror/results/list-view.jsx b/client/src/pages/openalex-ror/results/list-view.jsx
@@ -2,6 +2,7 @@ import { Badge, Button, Col, Link, Row, Text } from '@dataesr/dsfr-plus';
 import PropTypes from 'prop-types';
 
 import WorksList from '../components/works-list';
+import RorBadge from '../components/ror-badge';
 
 export default function ListView({
   onRowEditComplete,
@@ -11,12 +12,7 @@ export default function ListView({
   setFilteredAffiliationName,
 }) {
   const defineRorColor = [];
-  const dsColors = ['green-archipel', 'blue-ecume', 'blue-cumulus', 'purple-glycine', 'pink-macaron',
-    'pink-tuile', 'orange-terre-battue',
-    'brown-cafe-creme', 'brown-caramel', 'brown-opera', 'beige-gris-galet'];
-    // tri des ror mar nombre
-    // creation d'un tableau de ror avec un index pour chaque ror et son nombre d'occurences
-    // ajout des couleurs pour chaque ror
+  const dsColors = ['ror-1', 'ror-2', 'ror-3', 'ror-4', 'ror-5'];
   const rorCount = {};
   allAffiliations.forEach((affiliation) => {
     affiliation.rors.forEach((ror) => {
@@ -29,6 +25,7 @@ export default function ListView({
   });
   const sortedRor = Object.keys(rorCount).sort((a, b) => rorCount[b] - rorCount[a]);
   defineRorColor.push(...sortedRor.slice(0, 5).map((ror, index) => ({ ror, color: dsColors[index % dsColors.length] })));
+  console.log('defineRorColor', defineRorColor);
 
   return (
     <ul className="wm-list">
@@ -61,49 +58,30 @@ export default function ListView({
                   {affiliation.rors.map((ror) => (
                     <tr>
                       <td>
-                        <img
-                          alt={`${ror.rorCountry} flag`}
-                          src={`https://flagsapi.com/${ror.rorCountry}/flat/16.png`}
+                        <RorBadge
+                          ror={ror}
+                          rorColor={defineRorColor.find((item) => item.ror === ror.rorId)?.color || 'ror-x'}
                         />
-                        <span
-                          className="fr-ml-1w"
-                          style={{
-                            width: '300px',
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            display: 'inline-block',
-                          }}
-                        >
-                          {ror.rorName}
-                        </span>
                       </td>
                       <td>
-                        <img
-                          alt="ROR logo"
-                          className="vertical-middle fr-mx-1w"
-                          src="https://raw.githubusercontent.com/ror-community/ror-logos/main/ror-icon-rgb.svg"
-                          height="16"
-                        />
-                        https://ror.org/
-                        <Badge
-                          className="fr-mr-1w"
-                          color={defineRorColor.find((r) => r.ror === ror.rorId)?.color || 'yellow-tournesol'}
-                          size="sm"
-                        >
-                          <Link className="fr-mr-1w" href={`https://ror.org/${ror.rorId}`} target="_blank">
-                            {/* <strong>
-                              ROR
-                            </strong> */}
-                            {` ${ror.rorId}`}
-                          </Link>
-                        </Badge>
-                        <Button
-                          icon="filter-line"
-                          onClick={() => setFilteredAffiliationName(ror.rorId)}
-                          size="sm"
-                          variant="text"
-                        />
+                        <div style={{ display: 'inline-flex', justifyContent: 'center', alignItems: 'center' }}>
+                          <img
+                            alt={`${ror.rorCountry} flag`}
+                            src={`https://flagsapi.com/${ror.rorCountry}/flat/16.png`}
+                          />
+                          <span
+                            className="fr-ml-1w"
+                            style={{
+                              width: '300px',
+                              whiteSpace: 'nowrap',
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                              display: 'inline-block',
+                            }}
+                          >
+                            {ror.rorName}
+                          </span>
+                        </div>
                       </td>
                     </tr>
                   ))}

diff --git a/client/src/styles/index.scss b/client/src/styles/index.scss
@@ -205,6 +205,35 @@ html, body {
       font-size: 0.9rem;
     }
   }
+
+  .wm-ror-badge{
+    display: inline-flex;
+    align-items: center;
+    background-color: #fff;
+    border-radius: 10px;
+    border-top-left-radius: 10px;
+    span{
+      border-radius: 10px;
+      display: inline-block;
+      width: 15px;
+      height: 15px;
+      margin-left: 5px;        
+      }
+      div{
+      margin-left: 5px;
+      display: inline-block;
+      background-color: #fff;
+    }
+  }
+}
+
+:root {
+  --ror-1: #006A6F;
+  --ror-2: #5c006f;
+  --ror-3: #e99700;
+  --ror-4: #6f0018;
+  --ror-5: #046f00;
+  --ror-x: #fff;
 }
 
 .loader{