@eeacms/volto-marine-policy 2.0.16 → 2.0.18

package/CHANGELOG.md

@@ -4,6 +4,50 @@ 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).
 
+### [2.0.18](https://github.com/eea/volto-marine-policy/compare/2.0.17...2.0.18) - 22 August 2025
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`58ad0aa`](https://github.com/eea/volto-marine-policy/commit/58ad0aa67a4d13e03c1bf338e904eb07cef47dba)]
+- style: Automated code fix [eea-jenkins - [`25f767c`](https://github.com/eea/volto-marine-policy/commit/25f767ce4e26f68cd3daeebee7e2d0f594e8afd5)]
+
+#### :hammer_and_wrench: Others
+
+- fix eslint [laszlocseh - [`f494ab2`](https://github.com/eea/volto-marine-policy/commit/f494ab287e04db2c75d413de398e73ae510f6f4c)]
+- fix eslint [laszlocseh - [`0a94318`](https://github.com/eea/volto-marine-policy/commit/0a94318433bc0ae035efa9f3043d63b53645ab67)]
+- WiP NIS listing [laszlocseh - [`eed0dcf`](https://github.com/eea/volto-marine-policy/commit/eed0dcf37c5047db6d85f12e0a14683c8e48884e)]
+- Update Login.jsx [dobri1408 - [`668cbf6`](https://github.com/eea/volto-marine-policy/commit/668cbf619d63d51062f869c3e3b3d180e64f223e)]
+- entraid [Dobricean Ioan Dorian - [`c573e9b`](https://github.com/eea/volto-marine-policy/commit/c573e9bcddba9dab7ddea558d935365ea905b282)]
+### [2.0.17](https://github.com/eea/volto-marine-policy/compare/2.0.16...2.0.17) - 8 August 2025
+
+#### :rocket: Dependency updates
+
+- Release @eeacms/volto-searchlib@2.1.8 [EEA Jenkins - [`1b2e062`](https://github.com/eea/volto-marine-policy/commit/1b2e0626e3611781312ca277b5957ea8972f08f1)]
+- Release @eeacms/volto-searchlib@2.1.7 [EEA Jenkins - [`3eede38`](https://github.com/eea/volto-marine-policy/commit/3eede38464192fee6b4345abed30f88f71833d14)]
+- Release @eeacms/volto-searchlib@2.1.6 [EEA Jenkins - [`01fcc56`](https://github.com/eea/volto-marine-policy/commit/01fcc56fb139709fe8acb93b578457d2081501a9)]
+- Release @eeacms/volto-searchlib@2.1.5 [EEA Jenkins - [`49c7e7f`](https://github.com/eea/volto-marine-policy/commit/49c7e7fa2fdd94ad1f7d79a0a85ccf61cb1524ab)]
+- Release @eeacms/volto-searchlib@2.1.4 [EEA Jenkins - [`3ae9f4a`](https://github.com/eea/volto-marine-policy/commit/3ae9f4aefe347140dc5131c9067e4dc7a9fc5767)]
+- Release @eeacms/volto-searchlib@2.1.3 [EEA Jenkins - [`eb97433`](https://github.com/eea/volto-marine-policy/commit/eb97433cb35e4f581280b39cc2b75653433f49cc)]
+- Release @eeacms/volto-searchlib@2.1.2 [EEA Jenkins - [`b5ded14`](https://github.com/eea/volto-marine-policy/commit/b5ded1460e823f94c4fea46efdb91d36e81d9ee9)]
+- Release @eeacms/volto-searchlib@2.1.1 [EEA Jenkins - [`f7ab409`](https://github.com/eea/volto-marine-policy/commit/f7ab409191128f41205b1ef276320b49cef92d6b)]
+- Release @eeacms/volto-searchlib@2.1.0 [EEA Jenkins - [`a048b09`](https://github.com/eea/volto-marine-policy/commit/a048b090cff0ceb103cafdaa6fbd3db842e032b2)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`55e51fa`](https://github.com/eea/volto-marine-policy/commit/55e51fa06d4991cb3ac9949b431371a57e67e59e)]
+- style: Automated code fix [eea-jenkins - [`fe2a258`](https://github.com/eea/volto-marine-policy/commit/fe2a258459e72935b0df977ba2002d09db598bc6)]
+- style: Automated code fix [eea-jenkins - [`287b77c`](https://github.com/eea/volto-marine-policy/commit/287b77cd87ebbb1c21f710ca0837a6d743961f24)]
+- style: Automated code fix [eea-jenkins - [`b4bdb34`](https://github.com/eea/volto-marine-policy/commit/b4bdb3434ae0413dbe5e7fbbe8c9547050a33113)]
+
+#### :hammer_and_wrench: Others
+
+- fix NIS workflow progress endpoint [laszlocseh - [`947cc35`](https://github.com/eea/volto-marine-policy/commit/947cc35cb6b5f678f655d18e53a42932b85e1b79)]
+- fix eslint [laszlocseh - [`7123c4b`](https://github.com/eea/volto-marine-policy/commit/7123c4bb126f60ee5b45acb62ca5a3d4b8480ae9)]
+- fix eslint [laszlocseh - [`bc216d1`](https://github.com/eea/volto-marine-policy/commit/bc216d14a1b2d0057b8db0185dbee58df114f22e)]
+- WiP NIS workflow progress [laszlocseh - [`56669f0`](https://github.com/eea/volto-marine-policy/commit/56669f0736952381c5b52db88bde42dc8e309a3d)]
+- NIS workflow progress [laszlocseh - [`57d82c5`](https://github.com/eea/volto-marine-policy/commit/57d82c5a3fd7b3fe278e1fca8b5de85796587e5c)]
+- NIS edit page [laszlocseh - [`eabce65`](https://github.com/eea/volto-marine-policy/commit/eabce6569fe8d08b1761d0305a8eb49e971df8bb)]
+- WiP NIS table listing [laszlocseh - [`d489f00`](https://github.com/eea/volto-marine-policy/commit/d489f0097cd3e644de04f2c8a978761fce5b0e58)]
 ### [2.0.16](https://github.com/eea/volto-marine-policy/compare/2.0.15...2.0.16) - 15 July 2025
 
 #### :rocket: Dependency updates

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-marine-policy",
-  "version": "2.0.16",
+  "version": "2.0.18",
   "description": "@eeacms/volto-marine-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -22,7 +22,10 @@
     "@eeacms/volto-embed",
     "@eeacms/volto-eea-design-system",
     "@eeacms/volto-eea-website-theme",
-    "@eeacms/volto-globalsearch"
+    "@eeacms/volto-globalsearch",
+    "@eeacms/volto-metadata-block",
+    "@eeacms/volto-workflow-progress",
+    "@plone-collective/volto-authomatic"
   ],
   "resolutions": {
     "react-countup/countup.js": "2.5.0",
@@ -35,9 +38,12 @@
     "@eeacms/volto-eea-website-theme": "*",
     "@eeacms/volto-embed": "*",
     "@eeacms/volto-globalsearch": "2.1.2",
+    "@eeacms/volto-metadata-block": "*",
     "@eeacms/volto-openlayers-map": "1.0.1",
-    "@eeacms/volto-searchlib": "2.0.16",
+    "@eeacms/volto-searchlib": "2.1.8",
     "@eeacms/volto-tabs-block": "*",
+    "@eeacms/volto-workflow-progress": "*",
+    "@plone-collective/volto-authomatic": "2.0.1",
     "axios": "0.30.0",
     "d3-array": "^2.12.1",
     "jquery": "3.6.0",

package/src/components/index.js

@@ -3,7 +3,6 @@ export StickyHeader from './theme/Header/StickyHeader';
 export HeroSectionView from './theme/View/HeroSectionView';
 export FullwidthView from './theme/View/FullwidthView';
 export MetadataListingView from './theme/MetadataListingView/MetadataListingView';
-export NISListingView from './theme/NISListingView/NISListingView';
 export ItemMetadata from './theme/ItemMetadata/ItemMetadata';
 export ItemTitle from './theme/ItemMetadata/ItemTitle';
 export MetadataHeader from './theme/MetadataListingView/MetadataHeader';
@@ -15,3 +14,5 @@ export TableauFullscreen from './theme/Tableau/TableauFullscreen';
 export ItemMetadataSnippet from './theme/ItemMetadata/ItemMetadataSnippet';
 export MapPreview from './theme/MetadataListingView/MapPreview';
 export DemoSitesExplorer from './Blocks/DemoSitesExplorer/DemoSitesExplorerView';
+export NISListingView from './theme/NISListingView/NISListingView';
+export NISMetadataSectionTableView from './theme/NISMetadataSectionTableView/NISMetadataSectionTableView';

package/src/components/theme/NISListingView/NISListingView.jsx

@@ -1,37 +1,199 @@
-import { Link } from 'react-router-dom';
+// import ProgressWorkflow from '@eeacms/volto-workflow-progress/ProgressWorkflow';
+import ProgressWorkflow from '@eeacms/volto-marine-policy/components/theme/ProgressWorkflow/ProgressWorkflow';
+
+// import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import './style.less';
+import { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { Checkbox } from 'semantic-ui-react';
+import { Button, Select } from 'semantic-ui-react';
 
 const NISListingView = ({ items, isEditMode }) => {
+  // console.log(items);
+  const [selectedItems, setSelectedItems] = useState([]);
+  const [users, setUsers] = useState([]);
+  const [assignee, setAssignee] = useState(null);
+  const content = useSelector((state) => state.content.data);
+  const canEditPage = content?.['@components']?.actions?.object?.some(
+    (action) => action.id === 'edit',
+  );
+  // console.log('canEditPage', canEditPage);
+
+  const toggleSelection = (id) => {
+    setSelectedItems((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
+    );
+  };
+
+  const handleBulkAssign = () => {
+    onBulkAssign(selectedItems, assignee);
+    setSelectedItems([]);
+    setAssignee(null);
+  };
+
+  const onBulkAssign = async (ids, assignee) => {
+    await fetch(`${window.location.origin}/++api++/@bulk-assign`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      credentials: 'include',
+      body: JSON.stringify({
+        items: ids,
+        assigned_to: assignee,
+      }),
+    });
+
+    // const result = await res.json();
+    window.location.reload();
+  };
+
+  useEffect(() => {
+    const fetchUsers = async () => {
+      const res = await fetch(
+        `${window.location.origin}/++api++/@vocabularies/nis_experts_vocabulary`,
+        {
+          headers: {
+            Accept: 'application/json',
+          },
+          credentials: 'include',
+        },
+      );
+      const data = await res.json();
+      if (data?.items) {
+        setUsers(
+          data.items.map((u) => ({
+            key: u.token,
+            text: u.title,
+            value: u.token,
+          })),
+        );
+      }
+    };
+    fetchUsers();
+  }, []);
+
   return (
-    <div className="items">
-      {items.map((item, index) => (
-        <div className="listing-item" key={item['@id']}>
-          <div className="listing-body">
-            <h3>
-              <Link to={item['@id']}>{item.title}</Link>
-            </h3>
-            <div className="listing-metadata">
-              {item.nis_species_name_accepted && (
-                <div className="metadata-item">
-                  <b>Species name accepted:</b> {item.nis_species_name_accepted}
+    <>
+      <table className="ui table">
+        <thead>
+          <tr>
+            <th>Species name original</th>
+            <th>Species name accepted</th>
+            <th>Scientific name accepted</th>
+            <th>Region</th>
+            <th>Subregion</th>
+            <th>Status</th>
+            <th>Group</th>
+            <th>Assigned to</th>
+            <th>
+              {canEditPage && (
+                <div>
+                  <a
+                    href={`/++api++${window.location.pathname}/nis-export${window.location.search}`}
+                    title="Download"
+                    target="_blank"
+                    rel="noopener"
+                    className="ui button primary download-as-xls"
+                  >
+                    <i className="ri-file-download-line"></i>
+                    Download
+                  </a>
                 </div>
               )}
-              {item.nis_region && (
-                <div className="metadata-item">
-                  <b>Region:</b> {item.nis_region}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {items.map((item, index) => (
+            <tr key={item['@id']}>
+              <td>{item.nis_species_name_original}</td>
+              <td>{item.nis_species_name_accepted}</td>
+              <td>{item.nis_scientificname_accepted}</td>
+              <td>{item.nis_region}</td>
+              <td>{item.nis_subregion}</td>
+              <td>{item.nis_status}</td>
+              <td>{item.nis_group}</td>
+              <td>
+                <div className="assigned-to-container">
+                  <div>{item.nis_assigned_to}</div>
+                  {canEditPage && (
+                    <Checkbox
+                      checked={selectedItems.includes(item['@id'])}
+                      onChange={() => toggleSelection(item['@id'])}
+                    />
+                  )}
                 </div>
-              )}
-              {item.nis_subregion && (
-                <div className="metadata-item">
-                  <b>Subregion:</b> {item.nis_subregion}
+              </td>
+              <td>
+                <div className="workflow-actions">
+                  <div className="action-buttons">
+                    <a
+                      className="ui button secondary mini"
+                      href={`${item['@id']}`}
+                      target="_blank"
+                      rel="noopener"
+                    >
+                      View
+                    </a>
+                    <a
+                      className="ui button primary mini"
+                      href={`${item['@id']}/edit`}
+                      target="_blank"
+                      rel="noopener"
+                    >
+                      Edit
+                    </a>
+                  </div>
+                  <div className="workflow-progress">
+                    <ProgressWorkflow
+                      content={item}
+                      pathname={item['@id']}
+                      token={123}
+                    />
+                  </div>
                 </div>
-              )}
-            </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {selectedItems.length > 0 && (
+        <div className="users-assign-container">
+          <h4>
+            Assign {selectedItems.length} item
+            {selectedItems.length > 1 ? 's' : ''}
+          </h4>
+          <Select
+            placeholder="Select expert"
+            options={users}
+            value={assignee}
+            onChange={(e, { value }) => setAssignee(value)}
+          />
+          <div style={{ marginTop: '10px', textAlign: 'right' }}>
+            <Button
+              className="tertiary"
+              size="small"
+              onClick={() => setSelectedItems([])}
+              style={{ marginRight: '5px' }}
+            >
+              Cancel
+            </Button>
+            <Button
+              className="primary"
+              size="small"
+              // color="green"
+              disabled={!assignee}
+              onClick={handleBulkAssign}
+            >
+              Assign
+            </Button>
           </div>
         </div>
-      ))}
-    </div>
+      )}{' '}
+    </>
   );
 };
 

package/src/components/theme/NISListingView/style.less

@@ -6,6 +6,142 @@
 
 .metadata-item {
   align-items: baseline;
-  padding: 8px 15px;
+  padding: 5px 10px;
   background-color: #ebebeb;
+  font-size: 0.9em;
+}
+
+.ui.table tr {
+  td,
+  th {
+    border-right: 1px solid #bcbec0 !important;
+
+    &:last-of-type {
+      border-right: none !important;
+    }
+  }
+}
+
+.ui.button.mini {
+  padding: 0.5em 0.8em;
+  vertical-align: middle;
+}
+
+.action-buttons {
+  display: flex;
+  flex-direction: column;
+}
+
+.workflow-select {
+  // min-width: 10em;
+  width: 80%;
+  margin: auto;
+
+  .react-select__control {
+    min-height: unset;
+
+    .react-select__value-container {
+      // padding: 0 !important;
+    }
+
+    .react-select__indicator {
+      padding: 0;
+    }
+  }
+
+  .react-select__option {
+    text-align: left;
+  }
+
+  .react-select__menu {
+    border: 1px solid #b8c6c8;
+    border-top: none;
+    border-top-left-radius: 0.25em !important;
+    border-top-right-radius: 0.25em !important;
+  }
+}
+
+.workflow-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  .workflow-progress {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.25rem;
+
+    .sidenav-ol {
+      position: fixed;
+      top: 40%;
+      right: 0;
+      left: unset;
+      overflow: visible;
+      border: 1px solid #eef2f3;
+    }
+  }
+
+  .toolbar-workflow-progress {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 !important;
+    gap: 0.25em;
+  }
+
+  .circle-right-btn {
+    height: auto !important;
+    padding: 0.5em 0.8em;
+    border-width: 1px !important;
+    border-radius: 0 !important;
+    border-radius: 0.25em !important;
+    margin: 0 !important;
+  }
+
+  .review-state-text {
+    line-height: normal;
+    // text-align: left;
+  }
+}
+
+.review-state-draft {
+  border-color: #ed4033 !important;
+  color: #ed4033 !important;
+}
+
+.review-state-submitted {
+  border-color: #f6a808 !important;
+  color: #f6a808 !important;
+}
+
+.review-state-approved {
+  border-color: #3ca34a !important;
+  color: #3ca34a !important;
+}
+
+.users-assign-container {
+  position: fixed;
+  z-index: 1000;
+  top: 20px;
+  right: 20px;
+  padding: 16px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background: white;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
+}
+
+.assigned-to-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ri-file-download-line {
+  margin-right: 5px;
+}
+
+.download-as-xls {
+  padding: 0.6em 0.5em !important;
 }

package/src/components/theme/NISMetadataSectionTableView/NISMetadataSectionTableView.jsx

@@ -0,0 +1,12 @@
+import { MetadataSectionTableView } from '@eeacms/volto-metadata-block/components';
+import './style.less';
+
+const NISMetadataSectionTableView = (props) => {
+  return (
+    <div className="nis-metadata-section-table-view">
+      <MetadataSectionTableView {...props} />
+    </div>
+  );
+};
+
+export default NISMetadataSectionTableView;

package/src/components/theme/NISMetadataSectionTableView/style.less

@@ -0,0 +1,18 @@
+.nis-metadata-section-table-view {
+  .ui.table th.one.wide {
+    width: 25%;
+  }
+
+  .ui.table tr th {
+    border-right: 1px solid #0079cf;
+    border-bottom: 1px solid #bcbec0;
+  }
+
+  .ui.table tr:last-child th {
+    border-bottom: none;
+  }
+
+  td .block.metadata {
+    margin: 0;
+  }
+}