@eeacms/volto-clms-theme 1.1.235 → 1.1.236

package/CHANGELOG.md

@@ -4,6 +4,32 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.1.236](https://github.com/eea/volto-clms-theme/compare/1.1.235...1.1.236) - 23 May 2025
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`9016383`](https://github.com/eea/volto-clms-theme/commit/9016383cbfb9c0e2c1fbbc60004bb3c8f1066560)]
+- style: Automated code fix [eea-jenkins - [`325e088`](https://github.com/eea/volto-clms-theme/commit/325e08854f08b7c520fa20a8f90a7350758fc89b)]
+- style: Automated code fix [eea-jenkins - [`53a1163`](https://github.com/eea/volto-clms-theme/commit/53a1163aa6837b68b94f5ca6394dc28d38e44429)]
+- style: Automated code fix [eea-jenkins - [`c635903`](https://github.com/eea/volto-clms-theme/commit/c635903ab0c27a8217a2bce36d0fa33b11a5c677)]
+
+#### :hammer_and_wrench: Others
+
+- Refs #286059 - Technical Library search: Set All time as default instead of Last 5 years. [GhitaB - [`b719964`](https://github.com/eea/volto-clms-theme/commit/b719964dfb2b01b7879cf0724431f144b6b6a937)]
+- Refs #286059 - Technical Library search: reorder sort options. [GhitaB - [`f1559d5`](https://github.com/eea/volto-clms-theme/commit/f1559d5b1b8bc02e5f01519aa41b39d9742b3ce1)]
+- Refs #286059 - Technical Library search: move styles to less file. [GhitaB - [`5ad3628`](https://github.com/eea/volto-clms-theme/commit/5ad3628601fbb92d8543d484f2a546dfe7a85c3a)]
+- Refs #286059 - Technical Library search: fix sort by version asc and desc. [GhitaB - [`a71f66e`](https://github.com/eea/volto-clms-theme/commit/a71f66ec65694098bf312c66bdb59f6a633ffb52)]
+- Refs #286059 - Technical Library search: fix error when no categories. [GhitaB - [`a2f9eeb`](https://github.com/eea/volto-clms-theme/commit/a2f9eeb16d41de1658931ae26c303dcb06960d1f)]
+- Refs #286059 - Technical Library search: Categories facet. [GhitaB - [`a1cb44f`](https://github.com/eea/volto-clms-theme/commit/a1cb44f5ba60a6a9bb50572e0ae93e9001360ba2)]
+- Refs #286059 - Technical Library search: use link to file. [GhitaB - [`b1b0ae3`](https://github.com/eea/volto-clms-theme/commit/b1b0ae356d1efb99fe79f29fa1070121004e5631)]
+- Refs #286059 - Technical Library search: solve view if or not isAdmin. [GhitaB - [`e74f011`](https://github.com/eea/volto-clms-theme/commit/e74f011d87ad1426e76ff97bc05944ec038b8211)]
+- Refs #286059 - Technical Library search: use new indexed fields, improve styles. [GhitaB - [`8c895ef`](https://github.com/eea/volto-clms-theme/commit/8c895efaa4f5a588690e29c86446cccacfc40933)]
+- Refs #286059 - Technical Library search: use CLMS colors (redefine secondary color in order to simplify styling). [GhitaB - [`dea975b`](https://github.com/eea/volto-clms-theme/commit/dea975bd41789f0b59f20d2a30aa119d19c6f0dd)]
+- Refs #286059 - Technical Library search: fix display on small screen. [GhitaB - [`93cd051`](https://github.com/eea/volto-clms-theme/commit/93cd051080fce6c9ff14bf929ed78da5bbd39561)]
+- Refs #286059 - Add custom search result in Technical Library searchlib configuration. [GhitaB - [`b2fee24`](https://github.com/eea/volto-clms-theme/commit/b2fee24c2ea1ec567aa45fa5aa26351ef3687fcd)]
+- Refs #286059 - Add custom search result in Technical Library searchlib configuration. [GhitaB - [`8671df1`](https://github.com/eea/volto-clms-theme/commit/8671df1f9a8db3db937b127bd7837b0c82f35dfe)]
+- Refs #286059 - Add sort by Version in Technical Library searchlib configuration. [GhitaB - [`8e7b6e7`](https://github.com/eea/volto-clms-theme/commit/8e7b6e7973d21b266ff2ef0a04a45f586224b0a5)]
+- Refs #286059 - WIP Technical Library searchlib configuration. [GhitaB - [`e97ea02`](https://github.com/eea/volto-clms-theme/commit/e97ea0211991d09b6657af9d7ba8b36233d57b5d)]
 ### [1.1.235](https://github.com/eea/volto-clms-theme/compare/1.1.234...1.1.235) - 21 May 2025
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.235",
+  "version": "1.1.236",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -31,20 +31,27 @@
     "volto-form-block",
     "volto-cookie-banner",
     "@eeacms/volto-tableau",
-    "@eeacms/volto-embed"
+    "@eeacms/volto-embed",
+    "@eeacms/volto-globalsearch"
   ],
+  "resolutions": {
+    "@elastic/search-ui": "1.21.2",
+    "d3-array": "^2.12.1"
+  },
   "dependencies": {
     "@eeacms/volto-accordion-block": "7.0.0",
     "@eeacms/volto-arcgis-block": "0.1.336",
     "@eeacms/volto-clms-utils": "0.1.15",
     "@eeacms/volto-columns-block": "6.0.2",
     "@eeacms/volto-embed": "6.0.0",
+    "@eeacms/volto-globalsearch": "*",
     "@eeacms/volto-metadata-block": "5.0.1",
     "@eeacms/volto-react-table-widget": "0.1.3",
     "@eeacms/volto-resize-helper": "1.0.1",
     "@eeacms/volto-tableau": "1.3.0",
     "@eeacms/volto-tabs-block": "3.0.1",
     "@eeacms/volto-taxonomy": "5.1.0",
+    "@elastic/search-ui": "1.21.2",
     "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-brands-svg-icons": "6.4.2",
     "@fortawesome/free-regular-svg-icons": "5.15.3",
@@ -53,6 +60,7 @@
     "@ginkgo-bioworks/react-json-schema-form-builder": "2.10.1",
     "@kitconcept/volto-blocks-grid": "7.0.2",
     "connected-react-router": "6.8.0",
+    "d3-array": "^2.12.1",
     "husky": "7.0.4",
     "lightgallery": "^2.4.0",
     "razzle-plugin-scss": "4.2.18",

package/src/components/Result/TechnicalLibraryItem.jsx

@@ -0,0 +1,110 @@
+import './search-styles.less';
+import React from 'react';
+import penSVG from '@plone/volto/icons/pen.svg';
+import { Icon as VoltoIcon } from '@plone/volto/components';
+import { Label } from 'semantic-ui-react';
+import { Link } from 'react-router-dom';
+import { ResultContext } from '@eeacms/search';
+import { UniversalCard } from '@eeacms/volto-listing-block';
+import { cclDateFormat } from '@eeacms/volto-clms-theme/components/CclUtils';
+import { useSelector } from 'react-redux';
+import { useState } from 'react';
+
+function formatFileSize(bytes) {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const size = parseFloat((bytes / Math.pow(k, i)).toFixed(2));
+  return `${size} ${sizes[i]}`;
+}
+
+const TechnicalLibraryItem = (props) => {
+  const { result } = props;
+  const [showCategories, setShowCategories] = useState(false);
+  const user = useSelector((state) => state.users.user);
+  const isAdmin = user?.roles?.includes('Manager');
+  const item = {
+    title: (
+      <>
+        <div className="technical-library-title">
+          <Link
+            to={`${result.href}/@@download/file`}
+            title={result.title}
+            className="technical-library-title"
+          >
+            {result.title}
+            {result.isNew && <Label className="new-item">New</Label>}
+            {result.isExpired && (
+              <Label className="archived-item">Archived</Label>
+            )}
+          </Link>
+          {isAdmin && (
+            <Link
+              to={`${result.href}/edit`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="technical-library-edit"
+            >
+              <VoltoIcon
+                name={penSVG}
+                size="12px"
+                className="circled"
+                title={'Edit'}
+              />
+            </Link>
+          )}
+        </div>
+      </>
+    ),
+    description: <ResultContext {...props} />,
+    preview_image_url: result.hasImage ? result.thumbUrl : undefined,
+    extra: (
+      <div className="result-bottom">
+        <strong>Publication date: </strong>
+        <span>{cclDateFormat(result.issued)}</span> &nbsp;
+        <strong>Version: </strong> <span>{result.version.raw}</span>
+        <div className="card-doc-size">
+          {formatFileSize(result.file_size.raw)}
+        </div>
+        {isAdmin && Array.isArray(result.library_categories_values.raw) && (
+          <div className="admin-info">
+            <strong
+              className="categorization-expand"
+              onClick={() => setShowCategories((prev) => !prev)}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  setShowCategories((prev) => !prev);
+                }
+              }}
+            >
+              Categorization
+              <span> {showCategories ? '▾' : '▸'}</span>
+            </strong>
+
+            {showCategories && (
+              <ul>
+                {result.library_categories_values.raw.map((categ, index) => (
+                  <li key={index}>{categ}</li>
+                ))}
+              </ul>
+            )}
+          </div>
+        )}
+      </div>
+    ),
+  };
+
+  const itemModel = {
+    hasImage: result.hasImage,
+    hasDescription: false,
+    '@type': 'searchItem',
+  };
+
+  return <UniversalCard item={item} itemModel={itemModel} />;
+};
+
+export default TechnicalLibraryItem;

package/src/components/Result/search-styles.less

@@ -0,0 +1,58 @@
+@clms-primary: #a0b128;
+
+body.clmsSearchTechnicalLibrary-view {
+  div#page-document.container {
+    width: auto !important;
+  }
+}
+
+.searchapp.searchapp-clmsSearchTechnicalLibrary {
+  .u-item.listing-item {
+    padding: 0.1rem;
+  }
+
+  .result-bottom {
+    display: block !important;
+  }
+
+  div.card-doc-size {
+    float: right;
+    font-weight: 300;
+  }
+
+  a {
+    color: @clms-primary;
+  }
+
+  .technical-library-title {
+    display: inline-flex !important;
+    width: 100%;
+    align-items: start;
+  }
+
+  .label {
+    max-height: fit-content;
+  }
+
+  .technical-library-edit {
+    max-width: 50px;
+    margin-left: 5px;
+  }
+
+  .search-body-footer .column.grid {
+    margin-top: 0px;
+  }
+
+  div.admin-info {
+    strong.categorization-expand {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+
+      span {
+        margin-left: 8px;
+        color: #d3d3d3;
+      }
+    }
+  }
+}

package/src/index.js

@@ -56,6 +56,10 @@ import CLMSLoginView from './components/CLMSLoginView/CLMSLogin';
 //SLATE CONFIGURATION
 import installLinkEditor from '@plone/volto-slate/editor/plugins/AdvancedLink';
 
+// SEARCHLIB
+import installSearchEngine from './search';
+import TechnicalLibraryItem from './components/Result/TechnicalLibraryItem';
+
 //APPEXTRA
 import CustomMatomoAppExtra from './components/AppExtra/AppExtra';
 import FeedbackSurvey from './components/AppExtra/FeedbackSurvey';
@@ -95,6 +99,9 @@ const applyConfig = (config) => {
     ],
   };
 
+  const { resolve } = config.settings.searchlib;
+  resolve.TechnicalLibraryItem = { component: TechnicalLibraryItem };
+
   config.widgets.type.checkbox_html = CheckboxHtmlWidget;
   config.widgets.type.tabs = TabsWidget;
   config.widgets.widget = {
@@ -244,7 +251,10 @@ const applyConfig = (config) => {
     config.settings.serverConfig.extractScripts.errorPages = true;
   }
 
-  config = installLinkEditor(config);
+  config = [installLinkEditor, installSearchEngine].reduce(
+    (acc, apply) => apply(acc),
+    config,
+  );
 
   config.addonRoutes = [
     ...config.addonRoutes,

package/src/search/config.js

@@ -0,0 +1,87 @@
+import { mergeConfig } from '@eeacms/search';
+import { getClientProxyAddress, getSearchThumbUrl } from './utils';
+import vocabs from './vocabulary';
+import facets from './facets';
+import views from './views';
+
+const clmsConfig = {
+  title: 'CLMS Main',
+  ...views,
+};
+
+export default function install(config) {
+  const envConfig = process.env.RAZZLE_ENV_CONFIG
+    ? JSON.parse(process.env.RAZZLE_ENV_CONFIG)
+    : clmsConfig;
+
+  const pjson = require('@eeacms/volto-clms-theme/../package.json');
+
+  envConfig.app_name = pjson.name;
+  envConfig.app_version = pjson.version;
+
+  config.searchui.clmsSearchTechnicalLibrary = {
+    ...mergeConfig(envConfig, config.searchui.globalsearchbase),
+    elastic_index: '_es/clmsSearchTechnicalLibrary',
+    index_name: 'copernicus_searchui',
+    host: process.env.RAZZLE_ES_PROXY_ADDR || 'http://localhost:3000',
+    ...vocabs,
+  };
+
+  const { clmsSearchTechnicalLibrary } = config.searchui;
+
+  clmsSearchTechnicalLibrary.permanentFilters.push({
+    term: {
+      cluster_name: 'copernicus_land',
+    },
+  });
+
+  clmsSearchTechnicalLibrary.facets = facets;
+
+  clmsSearchTechnicalLibrary.resultItemModel = {
+    factory: 'ResultModel',
+    urlField: 'about',
+    titleField: 'title',
+    metatypeField: 'objectProvides',
+    descriptionField: 'description',
+    tagsField: 'topic',
+    issuedField: 'issued',
+    getThumbnailUrl: 'getSearchThumbUrl',
+    getIconUrl: 'getGlobalsearchIconUrl',
+  };
+
+  clmsSearchTechnicalLibrary.sortOptions = [
+    {
+      name: 'Relevance',
+      value: '',
+      direction: '',
+    },
+    {
+      name: 'Newest',
+      value: 'issued.date',
+      direction: 'desc',
+    },
+    {
+      name: 'Oldest',
+      value: 'issued.date',
+      direction: 'asc',
+    },
+    {
+      name: 'Version ↑',
+      value: 'version.keyword',
+      direction: 'asc',
+    },
+    {
+      name: 'Version ↓',
+      value: 'version.keyword',
+      direction: 'desc',
+    },
+  ];
+  config.resolve.getSearchThumbUrl = getSearchThumbUrl();
+
+  if (typeof window !== 'undefined') {
+    config.searchui.clmsSearchTechnicalLibrary.host =
+      process.env.RAZZLE_ES_PROXY_ADDR || getClientProxyAddress();
+  }
+
+  return config;
+}

package/src/search/facets.js

@@ -0,0 +1,22 @@
+import globalSearchBaseConfig from '@eeacms/volto-globalsearch/config/global-search-base-config.js';
+
+export const library_categories = {
+  field: 'library_categories_facet.keyword',
+  factory: 'MultiTermFacet',
+  label: 'Categories',
+  showInFacetsList: true,
+  filterType: 'any',
+  isFilterable: false,
+  show: 10000,
+  isMulti: true,
+};
+
+const facets = [library_categories, ...globalSearchBaseConfig.facets];
+
+// Change default Last 5 years with All time
+const facet = facets.find((f) => f.field === 'issued.date');
+if (facet && facet.default && Array.isArray(facet.default.values)) {
+  facet.default.values[0] = 'All time';
+}
+
+export default facets;

package/src/search/index.js

@@ -0,0 +1,15 @@
+import installMainSearch from './config';
+
+const extra = {
+  text_fields: ['title^4', 'subject^1.5', 'description^1.5'],
+  score_mode: 'sum',
+};
+
+const applyConfig = (config) => {
+  config.settings.searchlib = installMainSearch(config.settings.searchlib);
+
+  config.settings.searchlib.searchui.clmsSearchTechnicalLibrary.extraQueryParams = extra;
+
+  return config;
+};
+export default applyConfig;

package/src/search/utils.js

@@ -0,0 +1,51 @@
+// import config from '@plone/volto/registry';
+
+export function getTodayWithTime() {
+  const d = new Date();
+  const month = d.getMonth() + 1;
+  const day = d.getDate();
+  const hour = d.getHours();
+  const minute = d.getMinutes();
+  const second = d.getSeconds();
+
+  const output = [
+    d.getFullYear(),
+    '-',
+    month < 10 ? '0' : '',
+    month,
+    '-',
+    day < 10 ? '0' : '',
+    day,
+    'T',
+    hour < 10 ? '0' : '',
+    hour,
+    ':',
+    minute < 10 ? '0' : '',
+    minute,
+    ':',
+    second < 10 ? '0' : '',
+    second,
+    'Z',
+  ].join('');
+  return output;
+}
+
+export function getClientProxyAddress() {
+  const url = new URL(window.location);
+  url.pathname = '';
+  url.search = '';
+  return url.toString();
+}
+
+export const getSearchThumbUrl = () => (result, config) => {
+  let image = `https://www.eea.europa.eu/portal_depiction/term/image_preview`;
+  const domain = window.location.origin.replace(/^https?/, '');
+
+  if (result.about?.raw?.indexOf(domain) !== -1) {
+    if (result.image_preview) {
+      image = result.image_preview.raw;
+    }
+  }
+
+  return image;
+};

package/src/search/views.js

@@ -0,0 +1,17 @@
+const views = {
+  resultViews: [
+    {
+      id: 'technicalLibraryCards',
+      title: 'Technical Library cards',
+      icon: 'bars',
+      render: null,
+      isDefault: true,
+      factories: {
+        view: 'HorizontalCard.Group',
+        item: 'TechnicalLibraryItem',
+      },
+    },
+  ],
+};
+
+export default views;

package/src/search/vocabulary.js

@@ -0,0 +1,9 @@
+const vocab = {
+  cluster_name: {
+    copernicus_land: 'CLMS',
+  },
+};
+
+const vocabModule = { vocab };
+
+export default vocabModule;

package/theme/site/globals/site.variables

@@ -30,7 +30,9 @@
     Brand Colors
 --------------------*/
 
-@secondaryColor      : @brown;
+/*@secondaryColor      : @brown;*/
+@clms-primary: #a0b128;
+@secondaryColor: @clms-primary;
 
 @lightSecondaryColor : @lightGrey;