From 55edc663c8e9262f552439bc7009dd65c62ff440 Mon Sep 17 00:00:00 2001
From: jerem <jeremy.peglion@gmail.com>
Date: Tue, 26 Nov 2024 11:58:14 +0100
Subject: [PATCH] fix(openalex): Highlight selected affiliations in the list
 view

---
 client/src/pages/openalex-ror/results/list-view.jsx      | 7 +++++--
 client/src/pages/openalex-ror/results/views-selector.jsx | 1 -
 client/src/styles/index.scss                             | 5 +++++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/client/src/pages/openalex-ror/results/list-view.jsx b/client/src/pages/openalex-ror/results/list-view.jsx
index 2367e17..4f69bc6 100644
--- a/client/src/pages/openalex-ror/results/list-view.jsx
+++ b/client/src/pages/openalex-ror/results/list-view.jsx
@@ -30,7 +30,10 @@ export default function ListView({
     <ul className="wm-list">
       {
         allAffiliations.map((affiliation) => (
-          <li key={affiliation.key}>
+          <li
+            className={selectedOpenAlex.some((a) => a.key === affiliation.key) ? 'selected' : ''}
+            key={affiliation.key}
+          >
             <Row>
               <Col>
                 <div style={{ display: 'inline-flex' }}>
@@ -54,7 +57,7 @@ export default function ListView({
                     }
                   </div>
                   <div className="fr-ml-1w" style={{ display: 'inline-block', maxWidth: '95%' }}>
-                    <Text as="label" htmlFor={`affiliation-${affiliation.key}`} style={{ cursor: 'pointer' }}>
+                    <Text as="span">
                       <div dangerouslySetInnerHTML={{ __html: affiliation.nameHtml.replace(' [ source: OpenAlex ]', '') }} />
                     </Text>
                     <WorksList works={affiliation.works} />
diff --git a/client/src/pages/openalex-ror/results/views-selector.jsx b/client/src/pages/openalex-ror/results/views-selector.jsx
index fd309ed..5272109 100644
--- a/client/src/pages/openalex-ror/results/views-selector.jsx
+++ b/client/src/pages/openalex-ror/results/views-selector.jsx
@@ -126,7 +126,6 @@ export default function ViewsSelector({
           <Col xs="3">
             <Checkbox
               checked={(selectedOpenAlex.length === filteredAffiliations.length) && (selectedOpenAlex.length > 0)}
-              className="fr-ml-2w"
               onChange={() => {
                 if (selectedOpenAlex.length === 0) {
                   setSelectedOpenAlex(filteredAffiliations);
diff --git a/client/src/styles/index.scss b/client/src/styles/index.scss
index 5ffdaea..60e6b99 100644
--- a/client/src/styles/index.scss
+++ b/client/src/styles/index.scss
@@ -198,11 +198,16 @@ html, body {
     background-color: #eee;
     list-style: none;
     border: #777 1px solid;
+    padding-left: 1px;
 
     li {
       padding: 10px;
       border-bottom: 1px solid #ddd;
       font-size: 0.9rem;
+
+    }
+    .selected {
+      background-color: #d7cdf1;
     }
   }