ui: added OrganizationsList component

inveniosoftware · Oct 17, 2024 · d4828aa · d4828aa
1 parent 05537f3
commit d4828aa
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 85 deletions.
diff --git a/...ts/semantic-ui/js/invenio_communities/community/communitiesItems/CommunityItemComputer.js b/...ts/semantic-ui/js/invenio_communities/community/communitiesItems/CommunityItemComputer.js
@@ -11,6 +11,7 @@ import React from "react";
 import { Image } from "react-invenio-forms";
 import { Button, Grid, Icon } from "semantic-ui-react";
 import PropTypes from "prop-types";
+import OrganizationsList from "../../organizations/OrganizationsList";
 
 export const CommunityItemComputer = ({ result }) => {
   const communityType = result.ui?.type?.title_l10n;
@@ -70,34 +71,7 @@ export const CommunityItemComputer = ({ result }) => {
                 )}
 
                 {result.metadata.organizations && (
-                  <div>
-                    <Icon name="building outline" />
-                    {result.metadata.organizations.map((org, index) => {
-                      const separator = (index > 0 && ", ") || "";
-
-                      return (
-                        <span className="text-muted" key={org.name}>
-                          {separator}
-                          {org.name}
-                          {org.id && (
-                            <a
-                              href={`https://ror.org/${org.id}`}
-                              aria-label={`${org.name}'s ROR ${i18next.t("profile")}`}
-                              title={`${org.name}'s ROR ${i18next.t("profile")}`}
-                              target="_blank"
-                              rel="noreferrer"
-                            >
-                              <img
-                                className="inline-id-icon ml-5"
-                                src="/static/images/ror-icon.svg"
-                                alt=""
-                              />
-                            </a>
-                          )}
-                        </span>
-                      );
-                    })}
-                  </div>
+                  <OrganizationsList organizations={result.metadata.organizations} />
                 )}
               </div>
             )}

diff --git a/...sets/semantic-ui/js/invenio_communities/community/communitiesItems/CommunityItemMobile.js b/...sets/semantic-ui/js/invenio_communities/community/communitiesItems/CommunityItemMobile.js
@@ -11,6 +11,7 @@ import React from "react";
 import { Image } from "react-invenio-forms";
 import { Button, Grid, Icon } from "semantic-ui-react";
 import PropTypes from "prop-types";
+import OrganizationsList from "../../organizations/OrganizationsList";
 
 export const CommunityItemMobile = ({ result, index }) => {
   const communityType = result.ui?.type?.title_l10n;
@@ -105,34 +106,7 @@ export const CommunityItemMobile = ({ result, index }) => {
               )}
 
               {result.metadata.organizations && (
-                <div className="mb-5">
-                  <Icon name="building outline" />
-                  {result.metadata.organizations.map((org, index) => {
-                    const separator = (index > 0 && ", ") || "";
-
-                    return (
-                      <span className="text-muted" key={org.name}>
-                        {separator}
-                        {org.name}
-                        {org.id && (
-                          <a
-                            href={`https://ror.org/${org.id}`}
-                            aria-label={`${org.name}'s ROR ${i18next.t("profile")}`}
-                            title={`${org.name}'s ROR ${i18next.t("profile")}`}
-                            target="_blank"
-                            rel="noreferrer"
-                          >
-                            <img
-                              className="inline-id-icon ml-5"
-                              src="/static/images/ror-icon.svg"
-                              alt=""
-                            />
-                          </a>
-                        )}
-                      </span>
-                    );
-                  })}
-                </div>
+                <OrganizationsList organizations={result.metadata.organizations} />
               )}
             </div>
           </Grid.Column>

diff --git a/invenio_communities/assets/semantic-ui/js/invenio_communities/community/header/index.js b/invenio_communities/assets/semantic-ui/js/invenio_communities/community/header/index.js
@@ -7,11 +7,21 @@
  */
 
 import ReactDOM from "react-dom";
-
+import OrganizationsList from "../../organizations/OrganizationsList";
 import React from "react";
 
 import { RequestMembershipButton } from "./RequestMembershipButton";
 
+const organizationsContainer = document.getElementById("organizations-list");
+const organizations = JSON.parse(organizationsContainer.dataset.organizations);
+
+if (organizationsContainer) {
+  ReactDOM.render(
+    <OrganizationsList organizations={organizations} />,
+    organizationsContainer
+  );
+}
+
 const domContainer = document.getElementById("request-membership-app");
 
 const community = JSON.parse(domContainer.dataset.community);

diff --git a/..._communities/assets/semantic-ui/js/invenio_communities/organizations/OrganizationsList.js b/..._communities/assets/semantic-ui/js/invenio_communities/organizations/OrganizationsList.js
@@ -0,0 +1,96 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Popup } from "semantic-ui-react";
+
+const OrganizationsList = ({ organizations }) => {
+  const handleClick = (e) => {
+    e.preventDefault();
+  };
+
+  return (
+    <div>
+      {organizations && organizations.length > 0 && (
+        <div>
+          <span className="org-list-inline">
+            <i className="building outline icon" aria-hidden="true" />
+            {organizations[0].id ? (
+              <a
+                href={`https://ror.org/${organizations[0].id}`}
+                aria-label={`${organizations[0].name}'s ROR profile`}
+                title={`${organizations[0].name}'s ROR profile`}
+                target="_blank"
+                rel="noreferrer"
+              >
+                {organizations[0].name}
+                <span>&nbsp;</span>
+                <img
+                  className="inline-id-icon"
+                  src="/static/images/ror-icon.svg"
+                  alt={`${organizations[0].name}'s ROR profile`}
+                />
+              </a>
+            ) : (
+              organizations[0].name
+            )}
+          </span>
+          {organizations.length > 1 && (
+            <span className="ml-1">
+              &nbsp;and&nbsp;
+              <Popup
+                trigger={
+                  <a href="#!" onClick={handleClick}>
+                    {`${organizations.length - 1} more organizations`}
+                  </a>
+                }
+                size="small"
+                wide="very"
+                content={
+                  <div className="expanded-orgs">
+                    {organizations.slice(1).map((org, index) => (
+                      <div key={org.id || org.name} className="inline-computer mt-5">
+                        {org.id ? (
+                          <a
+                            href={`https://ror.org/${org.id}`}
+                            aria-label={`${org.name}'s ROR profile`}
+                            title={`${org.name}'s ROR profile`}
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            {org.name}
+                            <span>&nbsp;</span>
+                            <img
+                              className="inline-id-icon"
+                              src="/static/images/ror-icon.svg"
+                              alt={`${organizations[0].name}'s ROR profile`}
+                            />
+                          </a>
+                        ) : (
+                          org.name
+                        )}
+                        {index < organizations.length - 2 && <span>{", "}&nbsp;</span>}
+                      </div>
+                    ))}
+                  </div>
+                }
+                on="click"
+                position="bottom left"
+                positionFixed
+              />
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+OrganizationsList.propTypes = {
+  organizations: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      name: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+};
+
+export default OrganizationsList;
diff --git a/invenio_communities/templates/semantic-ui/invenio_communities/details/header.html b/invenio_communities/templates/semantic-ui/invenio_communities/details/header.html
@@ -85,34 +85,7 @@ <h1 class="ui medium header mb-0">{{ community.metadata.title }}</h1>
               {% endif %}
 
               {% if community.metadata.organizations %}
-                {% for org in community.metadata.organizations %}
-                  {% set ror_id = org.id %}
-                  {% set name = org.name %}
-
-                  <div class="inline-computer mt-5">
-                    {% if loop.index == 1 %}
-                      <i class="building outline icon" aria-hidden="true"></i>
-                    {% endif %}
-
-                    {% if ror_id %}
-                      <a
-                        href="https://ror.org/{{ ror_id }}"
-                        aria-label="{{ name }}'s ROR {{ _('profile') }}"
-                        title="{{ name }}'s ROR {{ _('profile') }}"
-                        target="_blank"
-                      >
-                        {{ name }}
-                        <img
-                          class="inline-id-icon"
-                          src="{{ url_for('static', filename='images/ror-icon.svg') }}"
-                          alt=""
-                        /></a>
-                    {%- else %}
-                      {{ name -}}
-                    {% endif %}
-                    {{- ", " if not loop.last }}
-                  </div>
-                {% endfor %}
+                    <div class="inline-computer" id="organizations-list" data-organizations='{{ community.metadata.organizations|tojson }}'></div>
               {% endif %}
             </div>
           </div>