feat: institutions page (#2257)

* Add search funcionality to EntityTable

* Add pagination to entity table

* Update collections type page content header with description and share button

* Add country and countryPrefLabel to organisations cacher and display in table

* Add search form style

* Add sort field and direction to route query to persist

* Add row details for small screen layout

* Prevent entity table route queries passed along to search page and search form

* Fix and align styles

* Add screen reader text to mobile toggle buttons

* Increase docker image size limit

* Remove europeana logo as fallback share media URL

* refactor: localise org country prefLabel

* Update i18n-iso-countries to latest for Maltese support

* Refactor data props and watchers to computed props

* Move translation strings

* Update unit tests

* Add active and update hover styles on sort icon

* Pass disabled state down to b-link to handle disabled state and tabindex

* Increase size limit and clean up comments

* refactor: add setters for sort-related computed properties

* chore: reset ordering to ascending on column change

---------

Co-authored-by: Richard Doe <[email protected]>

.github/workflows/ci.yml

@@ -276,7 +276,7 @@ jobs:
       -
         name: Check image size
         env:
-          DOCKER_IMAGE_SIZE_LIMIT: '358M'
+          DOCKER_IMAGE_SIZE_LIMIT: '359M'
         run: |
           docker_image_size=$(docker image inspect --format '{{.Size}}' ${{ needs.metadata.outputs.docker-full-tag }})
           if [ ${docker_image_size} -gt $(numfmt --from=si ${DOCKER_IMAGE_SIZE_LIMIT}) ]; then

packages/portal/package.json

@@ -37,6 +37,7 @@
     "elastic-apm-node": "^3.24.0",
     "express": "^4.17.1",
     "http-errors": "^2.0.0",
+    "i18n-iso-countries": "^7.11.0",
     "isbot": "^3.7.0",
     "lodash": "^4.17.21",
     "marked": "^4.0.10",

packages/portal/src/cachers/collections/organisations.js

@@ -1,9 +1,16 @@
 import baseData from './index.js';
 import { createEuropeanaApiClient } from '../utils.js';
+import { isEntityUri } from '../../plugins/europeana/entity.js';
+import uniq from 'lodash/uniq.js';
+// TODO: remove and uninstall when deprecated after API released with place references for countries
+import countryCodes from 'i18n-iso-countries';
+import localeCodes from '../../plugins/i18n/codes.js';
 
-const PICK = ['slug', 'recordCount', 'prefLabel'];
+const PICK = ['slug', 'recordCount', 'prefLabel', 'countryPrefLabel'];
+const LOCALISE = 'countryPrefLabel';
 
 let axiosClient;
+let axiosClientEntity;
 
 async function getRecordCounts() {
   const params = {
@@ -17,24 +24,59 @@ async function getRecordCounts() {
   return response.data?.facets?.[0]?.fields || [];
 }
 
+async function getCountryPrefLabel(entityUrl) {
+  const response = await axiosClientEntity.get(entityUrl);
+  return response.data.prefLabel;
+}
+
 const data = async(config = {}) => {
   const organisationData = await baseData({ type: 'organization' }, config);
 
   axiosClient = createEuropeanaApiClient(config.europeana?.apis?.record);
+  axiosClientEntity = createEuropeanaApiClient(config.europeana?.apis?.entity);
 
   const recordCounts = await getRecordCounts();
 
+  // Get array with all unique countries to only have to request prefLabels once
+  const organisationCountries = uniq(organisationData.map(organisation => organisation.country));
+
+  const organisationCountriesPrefLabels = {};
+  for (const country of organisationCountries) {
+    // Acceptance Entity API returns entity URI for country
+    if (isEntityUri(country)) {
+      const entityId = country.split('/').pop();
+      organisationCountriesPrefLabels[country] = await getCountryPrefLabel(`/place/${entityId}.json`);
+    } else if (country) {
+      // Production Entity API returns country code. This as in between solution.
+      // TODO: remove when deprecated after API released with place references for countries
+      const countryPrefLabelForLocale = {};
+      for (const locale of localeCodes) {
+        const countryNameFromCode = countryCodes.getName(country, locale, { select: 'official' });
+        if (countryNameFromCode) {
+          countryPrefLabelForLocale[locale] = countryNameFromCode;
+        }
+      }
+      organisationCountriesPrefLabels[country] = countryPrefLabelForLocale;
+    }
+  }
+
   return organisationData.map(
     organisation => {
+      // Add recordCount
       const organisationId = organisation.id;
       const organisationWithCount = recordCounts.find(facet => facet.label === organisationId);
       const recordCount = organisationWithCount?.count || 0;
       organisation.recordCount = recordCount;
+
+      // Add countryPrefLabel with langmap prefLabel
+      organisation.countryPrefLabel = organisationCountriesPrefLabels[organisation.country] || organisation.country;
+
       return organisation;
     });
 };
 
 export {
   data,
+  LOCALISE,
   PICK
 };