feat(openAlex): init list view

dataesr · Nov 15, 2024 · a3885a3 · a3885a3
1 parent f41116d
commit a3885a3
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 6 deletions.
diff --git a/client/src/pages/openalex-ror/components/export-errors-button.jsx b/client/src/pages/openalex-ror/components/export-errors-button.jsx
@@ -12,7 +12,7 @@ export default function ExportErrorsButton({
     <ButtonDropdown
       className="fr-mr-1w"
       data={allOpenalexCorrections}
-      label="OpenAlex errors"
+      label="OpenAlex corrections"
       searchParams={searchParams}
     />
   );

diff --git a/client/src/pages/openalex-ror/results/list-view.jsx b/client/src/pages/openalex-ror/results/list-view.jsx
@@ -1,7 +1,66 @@
-export default function ListView() {
+import { Badge, Col, Link, Row, Tag, TagGroup, Text } from '@dataesr/dsfr-plus';
+
+export default function ListView({
+  onRowEditComplete,
+  setSelectedOpenAlex,
+  selectedOpenAlex,
+  allAffiliations,
+}) {
+  console.log(allAffiliations);
+
   return (
-    <div>
-      <p>ListView</p>
-    </div>
+    <ul className="wm-list">
+      {
+        allAffiliations.map((affiliation) => (
+          <li key={affiliation.key}>
+            <Row>
+              <Col>
+                <input type="checkbox" id={`affiliation-${affiliation.key}`} />
+              </Col>
+              <Col md={11}>
+                <Text as="label" htmlFor={`affiliation-${affiliation.key}`}>
+                  <div dangerouslySetInnerHTML={{ __html: affiliation.nameHtml }} />
+                </Text>
+                <div>
+                  ror list:
+                  {affiliation.rors.map((ror) => (
+                    <>
+                      <Tag
+                        color="blue-cumulus"
+                        size="sm"
+                        className="fr-mr-1w"
+                        aria-describedby={`tooltip-${affiliation.key}-ror-${ror.rorId}`}
+                      >
+                        <Link className="fr-mr-1w" href={`https://ror.org/${ror.rorId}`} target="_blank">
+                          {ror.rorId}
+                        </Link>
+                      </Tag>
+                      <div
+                        className="fr-tooltip fr-placement text-center"
+                        id={`tooltip-${affiliation.key}-ror-${ror.rorId}`}
+                        role="tooltip"
+                        aria-hidden="true"
+                      >
+                        <img src={`https://flagsapi.com/${ror.rorCountry}/flat/48.png`} alt={`${ror.rorCountry} flag`} />
+                        <br />
+                        {ror.rorName}
+                      </div>
+                    </>
+                  ))}
+                </div>
+                <div>
+                  openAlex works:
+                  {affiliation.works.slice(0, 5).map((work) => (
+                    <Link className="fr-mr-1w" href="http://toto.com" target="_blank">
+                      {work}
+                    </Link>
+                  ))}
+                </div>
+              </Col>
+            </Row>
+          </li>
+        ))
+      }
+    </ul>
   );
 }
diff --git a/client/src/pages/openalex-ror/results/views-selector.jsx b/client/src/pages/openalex-ror/results/views-selector.jsx
@@ -86,7 +86,12 @@ export default function OpenalexView({
           undo={undo}
         />
       ) : (
-        <ListView />
+        <ListView
+          onRowEditComplete={onRowEditComplete}
+          setSelectedOpenAlex={setSelectedOpenAlex}
+          selectedOpenAlex={selectedOpenAlex}
+          allAffiliations={allAffiliations}
+        />
       )}
     </>
   );

diff --git a/client/src/styles/index.scss b/client/src/styles/index.scss
@@ -169,6 +169,17 @@ html, body {
     margin-bottom: 5px;
     background-color: #eee;
   }
+
+  .wm-list {
+    background-color: #eee;
+    list-style: none;
+
+    li {
+      padding: 10px;
+      border-bottom: 1px solid #ddd;
+      font-size: 0.9rem;
+    }
+  }
 }
 
 .loader{