improvment(openAlex): change actions for UX

dataesr · Nov 18, 2024 · 152448a · 152448a
1 parent 6eafdf4
commit 152448a
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 83 deletions.
diff --git a/client/src/pages/openalex-ror/results/index.jsx b/client/src/pages/openalex-ror/results/index.jsx
@@ -283,50 +283,41 @@ export default function Affiliations() {
                     </Button>
                   </ModalFooter>
                 </Modal>
-                <div className="wm-external-actions">
-                  <span className="wm-text fr-mb-3w">
-                    <Badge color="brown-opera">{selectedOpenAlex.length}</Badge>
-                    <i>
-                      {` selected affiliation${selectedOpenAlex.length === 1 ? '' : 's'}`}
-                    </i>
-                  </span>
-                  <Button
-                    className="fr-ml-5w fr-mr-1w"
-                    color="blue-ecume"
-                    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="blue-ecume"
-                    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={body}
-                  />
-                  <SendFeedbackButton
-                    allOpenalexCorrections={allOpenalexCorrections}
-                  />
+                <div className="wm-external-actions" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <div className="left-content">
+                    <span className="wm-text fr-mb-3w fr-ml-1w">
+                      <Badge color="brown-opera">{selectedOpenAlex.length}</Badge>
+                      <i>
+                        {` selected affiliation${selectedOpenAlex.length === 1 ? '' : 's'}`}
+                      </i>
+                    </span>
+
+                    <Button
+                      className="fr-ml-5w fr-mr-1w"
+                      color="blue-ecume"
+                      disabled={!selectedOpenAlex.length}
+                      icon="add-circle-line"
+                      key="add-ror"
+                      onClick={() => {
+                        setAction('add');
+                        setIsModalOpen((prev) => !prev);
+                      }}
+                      size="sm"
+                      title="Add ROR"
+                    >
+                      Modify selected ROR
+                    </Button>
+                  </div>
+
+                  <div className="right-content fr-mr-1w">
+                    <ExportErrorsButton
+                      allOpenalexCorrections={allOpenalexCorrections}
+                      options={body}
+                    />
+                    <SendFeedbackButton
+                      allOpenalexCorrections={allOpenalexCorrections}
+                    />
+                  </div>
                 </div>
                 <ViewsSelector
                   allAffiliations={filteredAffiliations}

diff --git a/client/src/pages/openalex-ror/results/list-view.jsx b/client/src/pages/openalex-ror/results/list-view.jsx
@@ -48,45 +48,56 @@ export default function ListView({
                   type="checkbox"
                 />
               </Col>
-              <Col md={9}>
+              <Col md={7}>
                 <Text as="label" htmlFor={`affiliation-${affiliation.key}`}>
                   <div dangerouslySetInnerHTML={{ __html: affiliation.nameHtml }} />
                 </Text>
                 <WorksList works={affiliation.works} />
               </Col>
-              <Col>
-                {affiliation.rors.map((ror) => (
-                  <>
-                    <Tag
-                      color={defineRorColor.find((r) => r.ror === ror.rorId)?.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}
-                      <br />
-                      <Button
-                        onClick={() => setFilteredAffiliationName(ror.rorId)}
-                        size="sm"
-                        variant="secondary"
-                      >
-                        Filter on this id
-                      </Button>
-                    </div>
-                  </>
-                ))}
+              <Col md={4}>
+                <table className="wm-table">
+                  {affiliation.rors.map((ror) => (
+                    <tr>
+                      <td>
+                        <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>
+                      </td>
+                      <td>
+                        <Tag
+                          className="fr-mr-1w"
+                          color={defineRorColor.find((r) => r.ror === ror.rorId)?.color || 'blue-cumulus'}
+                          size="sm"
+                        >
+                          <Link className="fr-mr-1w" href={`https://ror.org/${ror.rorId}`} target="_blank">
+                            {ror.rorId}
+                          </Link>
+                        </Tag>
+                        <Button
+                          icon="filter-line"
+                          onClick={() => setFilteredAffiliationName(ror.rorId)}
+                          size="sm"
+                          variant="text"
+                        />
+
+                      </td>
+                    </tr>
+                  ))}
+                </table>
+
               </Col>
             </Row>
           </li>

diff --git a/client/src/pages/openalex-ror/results/views-selector.jsx b/client/src/pages/openalex-ror/results/views-selector.jsx
@@ -58,11 +58,13 @@ export default function OpenalexView({
     <>
       <div className="wm-internal-actions">
         <Row>
-          <Col xs="1">
-            <Button onClick={() => changeView('table')} icon="table-line" size="sm" color="beige-gris-galet" />
-            <Button onClick={() => changeView('list')} icon="list-unordered" size="sm" color="beige-gris-galet" />
+          <Col>
+            <input
+              className="fr-ml-2w"
+              type="checkbox"
+            />
           </Col>
-          <Col xs="9">
+          <Col xs="8">
             <span className="fr-icon-search-line" />
             <i className="fr-mx-1w">
               Filter results
@@ -110,7 +112,10 @@ export default function OpenalexView({
                 </div>
               </label>
             </span>
-
+          </Col>
+          <Col xs="1" className="text-right">
+            <Button onClick={() => changeView('table')} icon="table-line" size="sm" color="beige-gris-galet" />
+            <Button onClick={() => changeView('list')} icon="list-unordered" size="sm" color="beige-gris-galet" />
           </Col>
         </Row>
       </div>