@eeacms/volto-bise-policy 1.2.28 → 1.2.30

package/CHANGELOG.md

@@ -4,6 +4,30 @@ 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.2.30](https://github.com/eea/volto-bise-policy/compare/1.2.29...1.2.30) - 7 November 2025
+
+#### :rocket: New Features
+
+- feat: update EUNIS marine habitat widgets [laszlocseh - [`702fe69`](https://github.com/eea/volto-bise-policy/commit/702fe69ff8d69c6bd7c130bb12fd57f346b534fd)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`e880e27`](https://github.com/eea/volto-bise-policy/commit/e880e27804d16e394b3d5fc9ced17168a68157bf)]
+
+### [1.2.29](https://github.com/eea/volto-bise-policy/compare/1.2.28...1.2.29) - 5 November 2025
+
+#### :rocket: New Features
+
+- feat: refs #292988 added widgets for the EUNIS Marine Habitats ct fields [laszlocseh - [`c35a36c`](https://github.com/eea/volto-bise-policy/commit/c35a36c57eed53eef0914db0346a0e2a5a51d9a2)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`dbd6b93`](https://github.com/eea/volto-bise-policy/commit/dbd6b93f71c0ef52470cdbcf8810796adc0b0f4d)]
+
+#### :hammer_and_wrench: Others
+
+- temporarily disable sonarqube test [laszlocseh - [`3696d49`](https://github.com/eea/volto-bise-policy/commit/3696d498192b0fb27299de0063d781914616d61e)]
+- fix eslint [laszlocseh - [`01431f6`](https://github.com/eea/volto-bise-policy/commit/01431f6de4fabc32861e53677d3fa43990ef8f8f)]
 ### [1.2.28](https://github.com/eea/volto-bise-policy/compare/1.2.27...1.2.28) - 3 November 2025
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-bise-policy",
-  "version": "1.2.28",
+  "version": "1.2.30",
   "description": "@eeacms/volto-bise-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Widgets/EUNISObjectListWidget.jsx

@@ -0,0 +1,683 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Accordion, Button, Segment } from 'semantic-ui-react';
+import { DragDropList, FormFieldWrapper, Icon } from '@plone/volto/components';
+import { applySchemaDefaults, reorderArray } from '@plone/volto/helpers';
+import ObjectWidget from '@plone/volto/components/manage/Widgets/ObjectWidget';
+
+import upSVG from '@plone/volto/icons/up-key.svg';
+import downSVG from '@plone/volto/icons/down-key.svg';
+import deleteSVG from '@plone/volto/icons/delete.svg';
+import addSVG from '@plone/volto/icons/add.svg';
+import dragSVG from '@plone/volto/icons/drag.svg';
+import { v4 as uuid } from 'uuid';
+
+import { EuropeanRedListVocab, countryCodesVocab } from './vocabularies';
+import './styles.less';
+// import ObjectListWidget from '@plone/volto/components/manage/Widgets/ObjectListWidget';
+
+const messages = defineMessages({
+  labelRemoveItem: {
+    id: 'Remove item',
+    defaultMessage: 'Remove item',
+  },
+  labelCollapseItem: {
+    id: 'Collapse item',
+    defaultMessage: 'Collapse item',
+  },
+  labelShowItem: {
+    id: 'Show item',
+    defaultMessage: 'Show item',
+  },
+  emptyObjectList: {
+    id: 'Empty object list',
+    defaultMessage: 'Empty object list',
+  },
+  add: {
+    id: 'Add (object list)',
+    defaultMessage: 'Add',
+  },
+});
+
+const BaseObjectListWidget = (props) => {
+  const { block, fieldSet, id, schema, onChange, schemaExtender } = props;
+  const value = props.value?.value || props.value || [];
+  const [localActiveObject, setLocalActiveObject] = React.useState(
+    props.activeObject ?? value.length - 1,
+  );
+
+  let activeObject, setActiveObject;
+  if (
+    (props.activeObject || props.activeObject === 0) &&
+    props.setActiveObject
+  ) {
+    activeObject = props.activeObject;
+    setActiveObject = props.setActiveObject;
+  } else {
+    activeObject = localActiveObject;
+    setActiveObject = setLocalActiveObject;
+  }
+
+  const intl = useIntl();
+
+  function handleChangeActiveObject(e, blockProps) {
+    const { index } = blockProps;
+    const newIndex = activeObject === index ? -1 : index;
+
+    setActiveObject(newIndex);
+  }
+  const objectSchema = typeof schema === 'function' ? schema(props) : schema;
+
+  const topLayerShadow = '0 1px 1px rgba(0,0,0,0.15)';
+  const secondLayer = ', 0 10px 0 -5px #eee, 0 10px 1px -4px rgba(0,0,0,0.15)';
+  const thirdLayer = ', 0 20px 0 -10px #eee, 0 20px 1px -9px rgba(0,0,0,0.15)';
+
+  return (
+    <div className="bise-objectlist-widget">
+      <FormFieldWrapper {...props} noForInFieldLabel className="objectlist">
+        <div className="add-item-button-wrapper">
+          <Button
+            compact
+            icon
+            aria-label={
+              objectSchema.addMessage ||
+              `${intl.formatMessage(messages.add)} ${objectSchema.title}`
+            }
+            onClick={(e) => {
+              e.preventDefault();
+              const data = {
+                '@id': uuid(),
+              };
+              const objSchema = schemaExtender
+                ? schemaExtender(schema, data, intl)
+                : objectSchema;
+              const dataWithDefaults = applySchemaDefaults({
+                data,
+                schema: objSchema,
+                intl,
+              });
+
+              onChange(id, { value: [...value, dataWithDefaults] });
+              setActiveObject(value.length);
+            }}
+          >
+            <Icon name={addSVG} size="18px" />
+            &nbsp;
+            {/* Custom addMessage in schema, else default to English */}
+            {objectSchema.addMessage ||
+              `${intl.formatMessage(messages.add)} ${objectSchema.title}`}
+          </Button>
+        </div>
+        {value.length === 0 && (
+          <input
+            aria-labelledby={`fieldset-${
+              fieldSet || 'default'
+            }-field-label-${id}`}
+            type="hidden"
+            value={intl.formatMessage(messages.emptyObjectList)}
+          />
+        )}
+      </FormFieldWrapper>
+      <DragDropList
+        style={{
+          boxShadow: `${topLayerShadow}${value.length > 1 ? secondLayer : ''}${
+            value.length > 2 ? thirdLayer : ''
+          }`,
+        }}
+        forwardedAriaLabelledBy={`fieldset-${
+          fieldSet || 'default'
+        }-field-label-${id}`}
+        childList={value.map((o) => [o['@id'] || uuid(), o])}
+        onMoveItem={(result) => {
+          const { source, destination } = result;
+          if (!destination) {
+            return;
+          }
+          const newValue = reorderArray(value, source.index, destination.index);
+          onChange(id, { value: newValue });
+          return true;
+        }}
+      >
+        {({ child, childId, index, draginfo }) => {
+          return (
+            <div
+              ref={draginfo.innerRef}
+              {...draginfo.draggableProps}
+              key={childId}
+            >
+              <Accordion key={index} fluid styled>
+                <Accordion.Title
+                  active={activeObject === index}
+                  index={index}
+                  onClick={handleChangeActiveObject}
+                  aria-label={`${
+                    activeObject === index
+                      ? intl.formatMessage(messages.labelCollapseItem)
+                      : intl.formatMessage(messages.labelShowItem)
+                  } #${index + 1}`}
+                >
+                  <button
+                    style={{
+                      visibility: 'visible',
+                      display: 'inline-block',
+                    }}
+                    {...draginfo.dragHandleProps}
+                    className="drag handle"
+                  >
+                    <Icon name={dragSVG} size="18px" />
+                  </button>
+
+                  <div className="accordion-title-wrapper">
+                    {`${objectSchema.title} #${index + 1}`}
+                  </div>
+                  <div className="accordion-tools">
+                    <button
+                      aria-label={`${intl.formatMessage(
+                        messages.labelRemoveItem,
+                      )} #${index + 1}`}
+                      onClick={() => {
+                        onChange(id, {
+                          value: value.filter((v, i) => i !== index),
+                        });
+                      }}
+                    >
+                      <Icon name={deleteSVG} size="20px" color="#e40166" />
+                    </button>
+                    {activeObject === index ? (
+                      <Icon name={upSVG} size="20px" />
+                    ) : (
+                      <Icon name={downSVG} size="20px" />
+                    )}
+                  </div>
+                </Accordion.Title>
+                <Accordion.Content active={activeObject === index}>
+                  <Segment>
+                    <ObjectWidget
+                      id={`${id}-${index}`}
+                      key={`ow-${id}-${index}`}
+                      block={block}
+                      schema={
+                        schemaExtender
+                          ? schemaExtender(schema, child, intl)
+                          : objectSchema
+                      }
+                      value={child}
+                      onChange={(fi, fv) => {
+                        const newvalue = value.map((v, i) =>
+                          i !== index ? v : fv,
+                        );
+                        onChange(id, { value: newvalue });
+                      }}
+                    />
+                  </Segment>
+                </Accordion.Content>
+              </Accordion>
+            </div>
+          );
+        }}
+      </DragDropList>
+    </div>
+  );
+};
+
+export const EUNISMSFDView = ({ value }) => {
+  let parsedValue = value;
+
+  if (typeof value === 'string') {
+    try {
+      parsedValue = JSON.parse(value);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  const items = Array.isArray(parsedValue)
+    ? parsedValue
+    : parsedValue?.value || [];
+
+  if (!items || items.length === 0) return null;
+
+  return (
+    <div className="eunis-widget-view">
+      {items.map((item) => (
+        <div key={item['@id']} className="msfd-item">
+          <div>
+            {item.relation}
+            {item.value}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const EUNISCodeView = ({ value }) => {
+  if (!value) return value;
+
+  return (
+    <span>
+      <a
+        href={`/habitats_eunis_revised/EUNISrev_${value}`}
+        target="_blank"
+        rel="noopener"
+      >
+        {value}
+      </a>
+    </span>
+  );
+};
+
+export const EUNISHDView = ({ value }) => {
+  let parsedValue = value;
+
+  if (typeof value === 'string') {
+    try {
+      parsedValue = JSON.parse(value);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  const items = Array.isArray(parsedValue)
+    ? parsedValue
+    : parsedValue?.value || [];
+
+  if (!items || items.length === 0) return null;
+
+  return (
+    <div className="eunis-widget-view">
+      {items.map((item) => (
+        <div key={item['@id']} className="msfd-item">
+          <div>
+            {item.link ? (
+              <>
+                <span>{item.relation}</span>
+                <a href={item.link}>{item.value}</a>
+              </>
+            ) : (
+              <>
+                <span>{item.relation}</span>
+                <a
+                  href={`/habitats/ANNEX1_${item.value}`}
+                  target="_blank"
+                  rel="noopener"
+                >
+                  {item.value}
+                </a>
+              </>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const EUNISEuropeanRedListView = ({ value }) => {
+  let parsedValue = value;
+
+  if (typeof value === 'string') {
+    try {
+      parsedValue = JSON.parse(value);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  const items = Array.isArray(parsedValue)
+    ? parsedValue
+    : parsedValue?.value || [];
+
+  if (!items || items.length === 0) return null;
+
+  return (
+    <div className="eunis-widget-view">
+      {items.map((item) => (
+        <div key={item['@id']} className="msfd-item">
+          <div>
+            {item.link ? (
+              <>
+                <span>{item.relation}</span>
+                <a href={item.link}>{item.value}</a>
+              </>
+            ) : (
+              <>
+                <span>{item.relation}</span>
+                <a
+                  href={`/habitats_rl/REDLIST_${item.value.split(' - ')[1]}`}
+                  target="_blank"
+                  rel="noopener"
+                >
+                  {item.value}
+                </a>
+              </>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const EUNISLinksToFinerEUNISHabitatsView = ({ value }) => {
+  let parsedValue = value;
+
+  if (typeof value === 'string') {
+    try {
+      parsedValue = JSON.parse(value);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  const items = Array.isArray(parsedValue)
+    ? parsedValue
+    : parsedValue?.value || [];
+
+  if (!items || items.length === 0) return null;
+
+  return (
+    <div className="eunis-widget-view">
+      {items.map((item) => (
+        <div key={item['@id']} className="msfd-item">
+          <div>
+            {item.link ? (
+              <>
+                <a href={item.link}>{item.value}</a>
+              </>
+            ) : (
+              <>
+                <a
+                  href={`/habitats_eunis_revised/EUNISrev_${item.value}`}
+                  target="_blank"
+                  rel="noopener"
+                >
+                  {item.value}
+                </a>
+              </>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const EUNISCountryCodeView = ({ value }) => {
+  let parsedValue = value;
+
+  if (typeof value === 'string') {
+    try {
+      parsedValue = JSON.parse(value);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  const items = Array.isArray(parsedValue)
+    ? parsedValue
+    : parsedValue?.value || [];
+
+  if (!items || items.length === 0) return null;
+
+  return items.map((country) => (
+    <div>
+      <div key={country['@id']} className="country-item">
+        {country.countryCode?.join(', ')}
+      </div>
+      <div className="eunis-widget-view">
+        {country.national.map((item) => (
+          <div key={item['@id']} className="msfd-item">
+            <div>
+              {item.relation}
+              {item.value}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  ));
+};
+
+export const EUNISRegionalSeaConventionValueView = EUNISMSFDView;
+
+const msfdSchema = {
+  title: 'MSFD',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'default',
+      fields: ['relation', 'value'],
+    },
+  ],
+  properties: {
+    relation: {
+      title: 'Relation',
+      choices: [
+        ['=', '= equal to'],
+        ['#', '# overlaps'],
+        ['<', '< included in'],
+        ['>', '> including'],
+      ],
+      required: true,
+    },
+    value: {
+      title: 'Value',
+      required: true,
+    },
+  },
+  required: [],
+};
+
+const hdSchema = {
+  title: 'HD (Annex I)',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'default',
+      fields: ['relation', 'value'],
+    },
+  ],
+  properties: {
+    relation: {
+      title: 'Relation',
+      choices: [
+        ['=', '= equal to'],
+        ['#', '# overlaps'],
+        ['<', '< included in'],
+        ['>', '> including'],
+      ],
+      required: true,
+    },
+    value: {
+      title: 'Value',
+      required: true,
+    },
+    link: {
+      title: 'Link',
+      required: true,
+    },
+  },
+  required: [],
+};
+
+const europeanRedlistSchema = {
+  title: 'European Red List',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'default',
+      fields: ['relation', 'value'],
+    },
+  ],
+  properties: {
+    relation: {
+      title: 'Relation',
+      choices: [
+        ['=', '= equal to'],
+        ['#', '# overlaps'],
+        ['<', '< included in'],
+        ['>', '> including'],
+      ],
+      required: true,
+    },
+    value: {
+      title: 'Value',
+      choices: EuropeanRedListVocab,
+      required: true,
+    },
+    link: {
+      title: 'Link',
+      required: true,
+    },
+  },
+  required: [],
+};
+
+const linksToFinerEUNISHabitatsSchema = {
+  title: 'Links to finer EUNIS habitats',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'default',
+      fields: ['value'],
+    },
+  ],
+  properties: {
+    value: {
+      title: 'Value',
+      required: true,
+    },
+    link: {
+      title: 'Link',
+      required: true,
+    },
+  },
+  required: [],
+};
+
+const regionalSeaConventionValueSchema = {
+  title: 'Regional Sea Convention Value',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'default',
+      fields: ['relation', 'value'],
+    },
+  ],
+  properties: {
+    relation: {
+      title: 'Relation',
+      choices: [
+        ['=', '= equal to'],
+        ['#', '# overlaps'],
+        ['<', '< included in'],
+        ['>', '> including'],
+      ],
+
+      required: true,
+    },
+    value: {
+      title: 'Value',
+      required: true,
+    },
+  },
+  required: [],
+};
+
+const nationalSchema = {
+  title: 'National',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'default',
+      fields: ['relation', 'value'],
+    },
+  ],
+  properties: {
+    relation: {
+      title: 'Relation',
+      choices: [
+        ['=', '= equal to'],
+        ['#', '# overlaps'],
+        ['<', '< included in'],
+        ['>', '> including'],
+      ],
+      required: true,
+    },
+    value: {
+      title: 'Value',
+      required: true,
+    },
+  },
+  required: [],
+};
+
+const countryCodeSchema = {
+  title: 'Country Code',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'default',
+      fields: ['countryCode', 'national'],
+    },
+  ],
+  properties: {
+    countryCode: {
+      title: 'Country Code',
+      type: 'array',
+      choices: countryCodesVocab,
+    },
+    national: {
+      title: 'National',
+      schema: nationalSchema,
+      widget: 'object_list',
+    },
+  },
+  required: [],
+};
+
+// const EUNIScountryCodeSchema = {
+//   title: 'Country Codes',
+//   fieldsets: [
+//     {
+//       id: 'default',
+//       title: 'default',
+//       fields: ['countries'],
+//     },
+//   ],
+//   properties: {
+//     countries: {
+//       title: 'Countries',
+//       schema: countryCodeSchema,
+//       widget: 'object_list',
+//     },
+//   },
+//   required: [],
+// };
+
+export const EUNISEuropeanRedListWidget = (props) => (
+  <BaseObjectListWidget {...props} schema={europeanRedlistSchema} />
+);
+
+export const EUNISMSFDWidget = (props) => (
+  <BaseObjectListWidget {...props} schema={msfdSchema} />
+);
+
+export const EUNISHDWidget = (props) => (
+  <BaseObjectListWidget {...props} schema={hdSchema} />
+);
+
+export const EUNISLinksToFinerEUNISHabitatsWidget = (props) => (
+  <BaseObjectListWidget {...props} schema={linksToFinerEUNISHabitatsSchema} />
+);
+
+export const EUNISRegionalSeaConventionValueWidget = (props) => (
+  <BaseObjectListWidget {...props} schema={regionalSeaConventionValueSchema} />
+);
+
+export const EUNISCountryCodeWidget = (props) => (
+  <BaseObjectListWidget {...props} schema={countryCodeSchema} />
+);
+
+export default BaseObjectListWidget;