@eeacms/volto-clms-theme 1.1.130 → 1.1.132

package/CHANGELOG.md

@@ -4,11 +4,11 @@ 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.130](https://github.com/eea/volto-clms-theme/compare/1.1.129...1.1.130) - 26 March 2024
+### [1.1.132](https://github.com/eea/volto-clms-theme/compare/1.1.131...1.1.132) - 4 April 2024
 
-#### :bug: Bug Fixes
+### [1.1.131](https://github.com/eea/volto-clms-theme/compare/1.1.130...1.1.131) - 27 March 2024
 
-- fix: CLMS-3102 [Unai Etxaburu - [`c939a1f`](https://github.com/eea/volto-clms-theme/commit/c939a1fca1340b8d9fe5513d0ece8a7f31022d56)]
+### [1.1.130](https://github.com/eea/volto-clms-theme/compare/1.1.129...1.1.130) - 27 March 2024
 
 ### [1.1.129](https://github.com/eea/volto-clms-theme/compare/1.1.128...1.1.129) - 25 March 2024
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.130",
+  "version": "1.1.132",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/Blocks/CclHelpdeskDocBlock/CclHelpdeskDocBlockEdit.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
+import { InlineForm } from '@plone/volto/components';
+import schema from './schema';
+import CclHelpdeskDocView from './CclHelpdeskDocBlockView';
+
+const CclHelpdeskDocEdit = (props) => {
+  const { block, data, onChangeBlock, selected } = props;
+  return (
+    <>
+      <CclHelpdeskDocView data={data} />
+      <SidebarPortal selected={selected}>
+        <InlineForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default CclHelpdeskDocEdit;

package/src/components/Blocks/CclHelpdeskDocBlock/CclHelpdeskDocBlockView.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Segment, Icon } from 'semantic-ui-react';
+import { HelpdeskForm } from './HelpdeskForm';
+import { toast } from 'react-toastify';
+import { Toast } from '@plone/volto/components';
+const CclHelpdeskDocView = (props) => {
+  const { data } = props;
+  const [file, setFile] = React.useState('');
+  const [endpoint, setEndpoint] = React.useState('');
+  const [result, setResult] = React.useState('');
+  const [fields, setFields] = React.useState({});
+
+  const reEndpoint = /\/api\/(@.*)\?/;
+  const reParams = /(?=&?)(\w*=[a-zA-Z0-9-]*)/gm;
+  React.useEffect(() => {
+    data.url &&
+      fetch(data.url)
+        .then((response) => response.text())
+        .then((data) => setFile(data));
+    return () => {};
+  }, [data.url]);
+
+  React.useEffect(() => {
+    if (file) {
+      const endpoint = file.match(reEndpoint);
+      if (endpoint[1]) {
+        setEndpoint(endpoint[1]);
+      }
+
+      const params = file.match(reParams);
+      if (params) {
+        const fields = params.map((p) => {
+          const s = p.split('=');
+          return {
+            key: s[0],
+            value: s[1],
+          };
+        });
+        setFields(fields);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [file]);
+
+  return (
+    <div>
+      {data.title && <h2>{data.title}</h2>}
+      <h2>Endpoint:</h2>
+      <h3>{endpoint}</h3>
+      <Segment color="teal" padded>
+        {file.split('\n').map((line, key) => (
+          <React.Fragment key={key}>
+            {line}
+            <br />
+          </React.Fragment>
+        ))}
+      </Segment>
+
+      <Segment color="teal" padded>
+        <HelpdeskForm
+          fields={fields}
+          endpoint={endpoint}
+          setResult={setResult}
+        ></HelpdeskForm>
+      </Segment>
+      {result && (
+        <>
+          <Segment color="teal" padded>
+            <h2>Endpoint result:</h2>
+            <Icon
+              color={'olive'}
+              name="copy"
+              size="large"
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                navigator.clipboard.writeText(result);
+                toast.success(
+                  <Toast
+                    success
+                    autoClose={5000}
+                    title={'URL copied to clipboard'}
+                    content={`The result URL has been successfully copied to clipboard`}
+                  />,
+                );
+              }}
+            ></Icon>
+            <br />
+            <br />
+            {JSON.stringify(result)}
+          </Segment>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default CclHelpdeskDocView;

package/src/components/Blocks/CclHelpdeskDocBlock/HelpdeskForm.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Form } from 'semantic-ui-react';
+
+import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
+
+import { getWidget } from './utils';
+
+export const HelpdeskForm = ({ fields, endpoint, setResult }) => {
+  const [datasetInfo, setDatasetInfo] = React.useState(null);
+  const [formData, setFormData] = React.useState({});
+  return fields.length > 0 ? (
+    <>
+      <h2>Form to test the endpoint:</h2>
+      <Form>
+        {fields.map((f, key) => {
+          const Field = getWidget(f.key);
+          return (
+            <Field
+              key={key}
+              label={f.key}
+              placeholder={f.value}
+              dependant={datasetInfo}
+              setDependant={setDatasetInfo}
+              formData={formData}
+              setFormData={setFormData}
+            />
+          );
+        })}
+        <CclButton
+          onClick={() => {
+            fetch(
+              `/++api++/${endpoint}?${Object.keys(formData)
+                .map((k) => `${k}=${formData[k]}`)
+                .join('&')}`,
+            )
+              .then((response) => response.json())
+              .then((data) => setResult(data));
+          }}
+        >
+          Send request
+        </CclButton>
+      </Form>
+    </>
+  ) : (
+    <></>
+  );
+};

package/src/components/Blocks/CclHelpdeskDocBlock/fields/DatasetField.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import Select from 'react-select';
+import { Segment } from 'semantic-ui-react';
+
+import { searchContent } from '@plone/volto/actions';
+import { FormFieldWrapper } from '@plone/volto/components';
+
+export const DatasetField = ({
+  label,
+  setDependant,
+  formData,
+  setFormData,
+}) => {
+  const id = 'helpdesk-block';
+  const separator = '===';
+  const search = useSelector((state) => state.search.subrequests[id]);
+  const dispatch = useDispatch();
+  React.useEffect(() => {
+    dispatch(
+      searchContent(
+        '/',
+        {
+          portal_type: 'DataSet',
+          metadata_fields: ['dataset_download_information', 'UID'],
+          b_size: 9999,
+        },
+        id,
+      ),
+    );
+    return () => {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return (
+    <FormFieldWrapper title={`${label}:`} id={label} className="text">
+      <Segment basic loading={search?.loading}>
+        <Select
+          type="text"
+          onChange={(e) => {
+            setDependant(e.value);
+            setFormData({ ...formData, [label]: e.value.split(separator)[0] });
+          }}
+          options={
+            search?.items
+              ? search?.items.map((i) => {
+                  return {
+                    value: `${i.UID}${separator}${JSON.stringify(
+                      i.dataset_download_information?.items,
+                    )}`,
+                    label: i.title,
+                  };
+                })
+              : []
+          }
+        />
+      </Segment>
+    </FormFieldWrapper>
+  );
+};

package/src/components/Blocks/CclHelpdeskDocBlock/fields/DatasetInfoField.jsx

@@ -0,0 +1,39 @@
+import { useSelector } from 'react-redux';
+import Select from 'react-select';
+import { Segment } from 'semantic-ui-react';
+
+import { FormFieldWrapper } from '@plone/volto/components';
+
+export const DatasetInfoField = ({
+  label,
+  formData,
+  dependant,
+  setFormData,
+}) => {
+  const id = 'helpdesk-block';
+  const search = useSelector((state) => state.search.subrequests[id]);
+  const valueItems = dependant ? JSON.parse(dependant.split('===')[1]) : [];
+  const options = valueItems.map((v) => {
+    return {
+      value: v['@id'],
+      label: `${v.name ?? ''} ${v.collection ?? ''} ${v.full_source ?? ''} ${
+        typeof v.full_format === 'object'
+          ? v.full_format.title ?? ''
+          : v.full_format ?? ''
+      }`,
+    };
+  });
+  return (
+    <FormFieldWrapper title={`${label}:`} id={label} className="text">
+      <Segment basic loading={search?.loading}>
+        <Select
+          type="text"
+          options={options}
+          onChange={(e) => {
+            setFormData({ ...formData, [label]: e.value });
+          }}
+        />
+      </Segment>
+    </FormFieldWrapper>
+  );
+};

package/src/components/Blocks/CclHelpdeskDocBlock/fields/StringField.jsx

@@ -0,0 +1,17 @@
+import { Input } from 'semantic-ui-react';
+
+import { FormFieldWrapper } from '@plone/volto/components';
+
+export const StringField = ({ label, placeholder, formData, setFormData }) => {
+  return (
+    <FormFieldWrapper title={`${label}:`} id={label} className="text">
+      <Input
+        type="text"
+        placeholder={placeholder}
+        onChange={(e) => {
+          setFormData({ ...formData, [label]: e.target.value });
+        }}
+      />
+    </FormFieldWrapper>
+  );
+};

package/src/components/Blocks/CclHelpdeskDocBlock/schema.js

@@ -0,0 +1,26 @@
+const schema = {
+  title: 'Documentation block',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['title', 'url'],
+    },
+  ],
+  properties: {
+    title: {
+      title: 'Title',
+      description: 'Documentation block title',
+      type: 'string',
+    },
+    url: {
+      title: 'URL',
+      description: 'GitHub documentation .req file raw url',
+      mode: 'link',
+      allowExternals: true,
+    },
+  },
+  required: ['title', 'url'],
+};
+
+export default schema;

package/src/components/Blocks/CclHelpdeskDocBlock/utils.js

@@ -0,0 +1,17 @@
+import { StringField } from './fields/StringField';
+import { DatasetField } from './fields/DatasetField';
+import { DatasetInfoField } from './fields/DatasetInfoField';
+const widgets = {
+  default: StringField,
+  dataset_uid: DatasetField,
+  uid: DatasetField,
+  download_information_id: DatasetInfoField,
+};
+
+export const getWidget = (id) => {
+  if (widgets[id]) {
+    return widgets[id];
+  } else {
+    return widgets['default'];
+  }
+};

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclVerticalTabsView.jsx

@@ -18,6 +18,14 @@ const handleClick = (e, tab, activeTab, setActiveTab, location, tabHash) => {
     location.hash = `#${tabHash}`;
     setActiveTab(tab);
   }
+  if (tab === 'd7706c16-7c4a-4c0e-9471-90765a302c1c') {
+    document.querySelector('#loader').style.display = 'block';
+  } else {
+    closeSpinner();
+  }
+};
+const closeSpinner = () => {
+  document.querySelector('#loader').style.display = 'none';
 };
 
 function isSpan(subTab, nextSubTab) {
@@ -34,6 +42,9 @@ const TabsComponent = (props) => {
     tabs = {},
     setActiveTab,
   } = props;
+  if (activeTab === 'd7706c16-7c4a-4c0e-9471-90765a302c1c') {
+    document.querySelector('#loader').style.display = 'block';
+  }
   const location = useLocation();
   return (
     <div className="left-content cont-w-25">
@@ -105,10 +116,50 @@ const PanelsComponent = (props) => {
           const tabHash = `tab=${slugify(title)}`;
           return (
             <Route key={index} to={'#' + tabHash}>
+              <div
+                id="loader"
+                className="loading"
+                role="alert"
+                aria-busy="true"
+                aria-live="polite"
+              >
+                <div>
+                  <svg
+                    width="80"
+                    height="80"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <style>
+                      {`.spinner_ajPY {
+              transform-origin: center;
+              animation: spinner_AtaB .75s infinite linear;
+              fill: #a0b128; stroke-width: 3px; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.1));
+            }
+            @keyframes spinner_AtaB {
+              100% {
+                transform: rotate(360deg);
+              }
+            }`}
+                    </style>
+                    <path
+                      d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+                      opacity=".25"
+                    />
+                    <path
+                      d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+                      className="spinner_ajPY"
+                    />
+                  </svg>
+                </div>
+              </div>
               <div
                 className={cx('panel', tab === activeTab && 'panel-selected')}
-                role="tabpanel"
+                role="button"
                 aria-hidden="false"
+                onLoad={() => {
+                  closeSpinner();
+                }}
               >
                 <RenderBlocks
                   {...props}

package/src/components/Blocks/customBlocks.js

@@ -63,6 +63,8 @@ import SubscriptionBlockView from '@eeacms/volto-clms-theme/components/Blocks/Cc
 import SubscriptionBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/CclSubscriptionBlock/SubscriptionEdit';
 import CclFAQBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/CclFAQBlock/CclFAQBlockEdit';
 import CclFAQBlockView from '@eeacms/volto-clms-theme/components/Blocks/CclFAQBlock/CclFAQBlockView';
+import CclHelpdeskDocBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/CclHelpdeskDocBlock/CclHelpdeskDocBlockEdit';
+import CclHelpdeskDocBlockView from '@eeacms/volto-clms-theme/components/Blocks/CclHelpdeskDocBlock/CclHelpdeskDocBlockView';
 import containerSVG from '@plone/volto/icons/apps.svg';
 import {
   customIdFieldSchema,
@@ -76,6 +78,8 @@ import linkSVG from '@plone/volto/icons/link.svg';
 import navSVG from '@plone/volto/icons/nav.svg';
 import codeSVG from '@plone/volto/icons/code.svg';
 import upSVG from '@plone/volto/icons/up-key.svg';
+import infoSVG from '@plone/volto/icons/info.svg';
+
 import ImageWidget from '@eeacms/volto-clms-theme/components/Widgets/ImageWidget';
 import AttachmentWithSizeLimit from '@eeacms/volto-clms-theme/components/Widgets/AttachmentWithSizeLimit';
 import TextareaWithRequestData from '@eeacms/volto-clms-theme/components/Widgets/TextareaWithRequestData';
@@ -644,6 +648,22 @@ const customBlocks = (config) => ({
       view: [], // Future proof (not implemented yet) view user role(s)
     },
   },
+  cclHelpdeskDoc: {
+    id: 'cclHelpdeskDoc', // The name (id) of the block
+    title: 'Helpdesk Documentation block', // The display name of the block
+    icon: infoSVG, // The icon used in the block chooser
+    group: 'ccl_blocks', // The group (blocks can be grouped, displayed in the chooser)
+    view: CclHelpdeskDocBlockView, // The view mode component
+    edit: CclHelpdeskDocBlockEdit, // The edit mode component
+    restricted: false, // If the block is restricted, it won't show in the chooser
+    mostUsed: false, // A meta group `most used`, appearing at the top of the chooser
+    blockHasOwnFocusManagement: false, // Set this to true if the block manages its own focus
+    sidebarTab: 1, // The sidebar tab you want to be selected when selecting the block
+    security: {
+      addPermission: [], // Future proof (not implemented yet) add user permission role(s)
+      view: [], // Future proof (not implemented yet) view user role(s)
+    },
+  },
   teaser: {
     ...config.blocks.blocksConfig.teaser,
     blockSchema: (intl) => {