@eeacms/volto-editing-progress 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -4,6 +4,18 @@ 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).
 
+### [0.4.0](https://github.com/eea/volto-editing-progress/compare/0.3.0...0.4.0) - 19 February 2024
+
+#### :rocket: New Features
+
+- feat: Improve editing progress, add propery option, remove property, change states - refs #262289 [dobri1408 - [`82c1ceb`](https://github.com/eea/volto-editing-progress/commit/82c1ceb2920b12e8eaf7225de944baad20382989)]
+
+#### :house: Internal changes
+
+
+#### :hammer_and_wrench: Others
+
+- Release 0.4.0 [alin - [`13fc3ef`](https://github.com/eea/volto-editing-progress/commit/13fc3ef5bbeaeaa5f8086a9003e42b05bc06c30a)]
 ### [0.3.0](https://github.com/eea/volto-editing-progress/compare/0.2.3...0.3.0) - 18 October 2023
 
 #### :rocket: New Features
@@ -40,7 +52,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - test: Update failing snapshots [Alin Voinea - [`c1b022f`](https://github.com/eea/volto-editing-progress/commit/c1b022f39c9ff8ee1f6a9732eb2ba7f58b7e8492)]
 - test: remade interface in accordion style and accommodated tests [Chirilov Narcis - [`2cc87f5`](https://github.com/eea/volto-editing-progress/commit/2cc87f5456cf9610be6c883877b4ec87e5613ede)]
 - test: EN locales, pre-commit fix, feature PRs checks Refs #257193 [valentinab25 - [`59236c9`](https://github.com/eea/volto-editing-progress/commit/59236c9381b5d1f2059086d1f61823a1ec2309b0)]
-- Release 0.3.0 [Alin Voinea - [`21d325a`](https://github.com/eea/volto-editing-progress/commit/21d325a8f265c21fb3bf78a5ad2fe037aa86040e)]
 - new feature [Narcis2005 - [`d981603`](https://github.com/eea/volto-editing-progress/commit/d981603df4204eab8a650df92521201a299ea75e)]
 - more refactoring [Narcis2005 - [`28cfc60`](https://github.com/eea/volto-editing-progress/commit/28cfc6021b4ee328cecbef285b9ed2296891c7e9)]
 - refactoring [Narcis2005 - [`8dc569c`](https://github.com/eea/volto-editing-progress/commit/8dc569cf2b21a7528a77ee55881b56c11a4ad3c6)]

package/cypress.config.js

@@ -5,9 +5,9 @@ module.exports = defineConfig({
   defaultCommandTimeout: 8888,
   chromeWebSecurity: false,
   reporter: 'junit',
-  video: true,
+  video: false,
   retries: {
-    runMode: 1,
+    runMode: 2,
     openMode: 0,
   },
   reporterOptions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-editing-progress",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "@eeacms/volto-editing-progress: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/EditingProgress.jsx

@@ -86,7 +86,7 @@ const EditingProgress = (props) => {
                 className={'sidenav-ol sidenav-ol--ep is-hidden'}
                 ref={sideMenuRef}
               >
-                {remaining_steps.map((step, index) => {
+                {remaining_steps.map((step) => {
                   return (
                     <li className={'ep-sidenav-li'} key={step['link_label']}>
                       <a

package/src/VisualJSONWidget.jsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { ModalForm } from '@plone/volto/components';
 import { JSONSchema } from './schema';
+import { Dropdown } from 'semantic-ui-react';
+
 import {
   Button,
   Container,
@@ -42,6 +44,8 @@ function addNewStateToAlreadyExistingField(
   currentField,
   statesToAdd,
   message,
+  condition,
+  link,
 ) {
   for (
     let localRuleIndex = 0;
@@ -55,7 +59,9 @@ function addNewStateToAlreadyExistingField(
     // to currentContentTypeData dinamically in order to create the posibillity
     // for multiple fields
 
-    if (message) currentContentTypeData[localRuleIndex].message = message;
+    if (message) currentContentTypeData[localRuleIndex].linkLabel = message;
+    if (condition) currentContentTypeData[localRuleIndex].condition = condition;
+    if (link) currentContentTypeData[localRuleIndex].link = link;
     if (statesToAdd !== undefined) {
       currentContentTypeData[localRuleIndex].states = statesToAdd;
     } else if (!message) currentContentTypeData.splice(localRuleIndex, 1);
@@ -74,20 +80,13 @@ function createFieldRule(currentField, statesToAdd) {
     prefix: currentField,
     states: statesToAdd,
     condition: 'python:value',
-    hideReady: 'False',
-    iconEmpty: 'eea-icon eea-icon-edit',
-    iconReady: 'eea-icon eea-icon-check',
-    labelEmpty: 'Please set the {label} of this {context.portal_type}',
-    labelReady: 'You added the {label}',
-    link: 'edit#fieldset-supporting information-field-label-data_description',
+    link: 'edit#fieldset-metadata-field-label-' + currentField,
     linkLabel: 'Add {label}',
-    message: '',
   };
 }
 
 const VisualJSONWidget = (props) => {
   const { id, value = {}, onChange } = props;
-  // console.log(value);
   const [isJSONEditorOpen, setIsJSONEditorOpen] = useState(false);
   const [currentContentType, setCurrentContentType] = useState();
 
@@ -99,7 +98,10 @@ const VisualJSONWidget = (props) => {
   const request = useSelector((state) => state.rawdata?.[path]);
   const content = request?.data;
   const types = useSelector((state) => state.types);
-
+  const fields =
+    request?.data?.fieldsets.reduce((acc, cur) => {
+      return [...acc, ...(cur.fields || [])];
+    }, []) || [];
   useEffect(() => {
     if (path && !request?.loading && !request?.loaded && !content)
       dispatch(getRawContent(path));
@@ -120,7 +122,9 @@ const VisualJSONWidget = (props) => {
     e.preventDefault();
     setIsJSONEditorOpen(true);
   };
-
+  const makeFirstLetterCapital = (string) => {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  };
   const onJSONSubmit = (e) => {
     setIsJSONEditorOpen(false);
     if (typeof e.json === 'string' && isValidJson(e.json)) {
@@ -134,8 +138,15 @@ const VisualJSONWidget = (props) => {
     setCurrentContentType(type);
   };
 
-  const handleOnDropdownChange = (e, data, currentField, message) => {
-    const states = data?.value?.length > 0 ? data?.value : undefined;
+  const handleOnDropdownChange = (
+    e,
+    data,
+    currentField,
+    message,
+    condition,
+    link,
+  ) => {
+    const states = data.value;
     const statesToAdd = states?.map((state) => state.toLowerCase());
     const localCopyOfValue = _.cloneDeep(value);
     const currentContentTypeData = localCopyOfValue[currentContentType.id];
@@ -159,6 +170,8 @@ const VisualJSONWidget = (props) => {
         currentField,
         statesToAdd,
         message,
+        condition,
+        link,
       );
     }
     //The variable currentContentTypeData cannot be used here because of eslint and delete keyword
@@ -167,6 +180,19 @@ const VisualJSONWidget = (props) => {
     }
     onChange(id, localCopyOfValue);
   };
+  const getDropdownValues = (currentField) => {
+    if (
+      !request.loading &&
+      request.loaded &&
+      currentContentType &&
+      value[currentContentType.id]
+    )
+      return value[currentContentType.id]
+        .find((rule) => rule?.prefix === currentField)
+        ?.states.map((state) => makeFirstLetterCapital(state));
+
+    return undefined;
+  };
 
   return (
     <>
@@ -186,6 +212,26 @@ const VisualJSONWidget = (props) => {
           <Button onClick={handleEditJSON} color="grey" id="json_button">
             <FormattedMessage id="Edit JSON" defaultMessage="Edit JSON" />
           </Button>
+
+          {fields && (
+            <Dropdown
+              className="ui grey button dropdown-button"
+              text="Add Property"
+              options={fields
+                .filter((field) => {
+                  return (
+                    getDropdownValues(field) === undefined &&
+                    !request.data.required.includes(field)
+                  );
+                })
+                .map((field) => {
+                  return { key: field, text: field, value: field };
+                })}
+              onChange={(e, t) => {
+                handleOnDropdownChange(e, { value: ['all'] }, t.value);
+              }}
+            />
+          )}
         </Container>
         <Divider />
       </div>
@@ -202,6 +248,8 @@ const VisualJSONWidget = (props) => {
             handleOnDropdownChange={handleOnDropdownChange}
             currentContentType={currentContentType}
             value={value}
+            fields={fields}
+            getDropdownValues={getDropdownValues}
           />
         </Sidebar.Pusher>
       </Sidebar.Pushable>

package/src/WidgetDataComponent.jsx

@@ -5,6 +5,8 @@ import { useSelector, useDispatch } from 'react-redux';
 import { getRawContent } from './actions';
 import { COMPONENT_HEIGHT } from './VisualJSONWidget';
 
+import './less/editor.less';
+
 export function makeFirstLetterCapital(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
@@ -14,6 +16,8 @@ const EditDataComponent = ({
   handleOnDropdownChange,
   currentContentType,
   value,
+  fields,
+  getDropdownValues,
 }) => {
   const path = flattenToAppURL(
     '/@vocabularies/plone.app.vocabularies.WorkflowStates',
@@ -43,41 +47,28 @@ const EditDataComponent = ({
   ]);
 
   //Returns the saved values for dropdown with the first letter in uppercase
-  const getDropdownValues = (currentField) => {
-    if (
-      !request.loading &&
-      request.loaded &&
-      currentContentType &&
-      value[currentContentType.id]
-    )
-      return value[currentContentType.id]
-        .find((rule) => rule?.prefix === currentField)
-        ?.states.map((state) => makeFirstLetterCapital(state));
 
-    return undefined;
-  };
-  const getMessage = (currentField) => {
+  const getValues = (currentField) => {
     if (
       !request.loading &&
       request.loaded &&
       currentContentType &&
       value[currentContentType.id]
     )
-      return (
-        value[currentContentType.id].find(
-          (rule) => rule?.prefix === currentField,
-        )?.message || ''
+      return value[currentContentType.id].find(
+        (rule) => rule?.prefix === currentField,
       );
 
-    return '';
+    return undefined;
   };
+
   const renderLabel = (label) => ({
     color: 'blue',
     content: `${label.text}`,
   });
 
   const createStateOption = (stateOptions) => {
-    return stateOptions.map((state) => ({
+    return ['all', ...(stateOptions || [])].map((state) => ({
       key: makeFirstLetterCapital(state),
       text: makeFirstLetterCapital(state),
       value: makeFirstLetterCapital(state),
@@ -86,17 +77,46 @@ const EditDataComponent = ({
   const [activeIndex, setActiveIndex] = useState(0);
   // const inputRef = useRef();
   const [inputValue, setInputValue] = useState('');
-
+  const [conditionValue, setConditionValue] = useState('');
+  const [linkValue, setLinkValue] = useState();
   const handleClick = (e, titleProps, currentField) => {
     const { index } = titleProps;
     const newIndex = activeIndex === index ? -1 : index;
 
     setActiveIndex(newIndex);
-    setInputValue(getMessage(currentField));
+    setInputValue(getValues(currentField)?.linkLabel || '');
+    setConditionValue(getValues(currentField)?.condition || '');
+    setLinkValue(getValues(currentField)?.link || '');
   };
   const handleInputChange = (e, currentField) => {
     setInputValue(e.target.value);
-    handleOnDropdownChange(null, null, currentField, e.target.value);
+    handleOnDropdownChange(
+      null,
+      { value: getValues(currentField).states || [] },
+      currentField,
+      e.target.value,
+    );
+  };
+  const handleInputLinkChange = (e, currentField) => {
+    setLinkValue(e.target.value);
+    handleOnDropdownChange(
+      null,
+      { value: getValues(currentField).states || [] },
+      currentField,
+      undefined,
+      undefined,
+      e.target.value,
+    );
+  };
+  const handleInputConditionChange = (e, currentField) => {
+    setConditionValue(e.target.value);
+    handleOnDropdownChange(
+      null,
+      { value: getValues(currentField).states || [] },
+      currentField,
+      undefined,
+      e.target.value,
+    );
   };
   return (
     <Segment
@@ -104,8 +124,8 @@ const EditDataComponent = ({
         width: '100%',
         paddingBottom:
           request?.data?.fieldsets[0]?.fields.length > 9 ? '120px' : '',
-        maxHeight: COMPONENT_HEIGHT,
-        overflow: request?.data?.fieldsets[0]?.fields.length > 9 ? 'auto' : '',
+        height: COMPONENT_HEIGHT,
+        overflow: 'auto',
       }}
     >
       <Accordion styled fluid>
@@ -114,8 +134,12 @@ const EditDataComponent = ({
           requestStateOptions?.loaded &&
           !requestStateOptions?.loading &&
           requestStateOptions?.data &&
-          request?.data?.fieldsets[0]?.fields?.map((currentField, index) => {
-            if (request.data.required.includes(currentField)) return null;
+          fields.map((currentField, index) => {
+            if (
+              request.data.required.includes(currentField) ||
+              getDropdownValues(currentField) === undefined
+            )
+              return null;
             return (
               <React.Fragment key={`${currentField}${index}`}>
                 <Accordion.Title
@@ -126,31 +150,80 @@ const EditDataComponent = ({
                   }
                   id={`property_${currentField}`}
                 >
-                  <Icon name="dropdown" />
-                  {currentField}
+                  <div className="title-editing-progress">
+                    <Icon name="dropdown" size="tiny" />
+                    &nbsp;
+                    {currentField}
+                  </div>
+                  <div className="title-editing-progress">
+                    <Icon
+                      name="cancel"
+                      size="mini"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleOnDropdownChange(
+                          e,
+                          { value: undefined },
+                          currentField,
+                        );
+                      }}
+                    />
+                  </div>
                 </Accordion.Title>
                 <Accordion.Content
                   active={activeIndex === index}
                   id={`property_content_${currentField}`}
                 >
-                  <>
-                    <label
-                      htmlFor="message"
-                      style={{ display: 'block', padding: '10px' }}
-                    >
-                      Message
-                    </label>
-                    <input
-                      className="message-input"
-                      value={inputValue}
-                      onChange={(e) => handleInputChange(e, currentField)}
-                      // ref={inputRef}
-                      name="message"
-                      style={{ padding: '10px' }}
-                      disabled={getDropdownValues(currentField) == null}
-                      placeholder="Write a dfferent message after you set at lest one state"
-                    />
-                  </>
+                  <label
+                    htmlFor="message"
+                    style={{ display: 'block', padding: '10px' }}
+                  >
+                    Message
+                  </label>
+                  <input
+                    className="message-input"
+                    value={inputValue}
+                    onChange={(e) => handleInputChange(e, currentField)}
+                    // ref={inputRef}
+                    name="message"
+                    style={{ padding: '10px' }}
+                    disabled={getDropdownValues(currentField) == null}
+                    placeholder="Write a dfferent message after you set at lest one state"
+                  />
+                  <label
+                    htmlFor="message"
+                    style={{ display: 'block', padding: '10px' }}
+                  >
+                    Link
+                  </label>
+                  <input
+                    className="link-input"
+                    value={linkValue}
+                    onChange={(e) => handleInputLinkChange(e, currentField)}
+                    // ref={inputRef}
+                    name="link"
+                    style={{ padding: '10px' }}
+                    disabled={getDropdownValues(currentField) == null}
+                    placeholder="Write a dfferent href link"
+                  />
+                  <label
+                    htmlFor="condition"
+                    style={{ display: 'block', padding: '10px' }}
+                  >
+                    Condition
+                  </label>
+                  <input
+                    className="condition-input"
+                    value={conditionValue}
+                    onChange={(e) =>
+                      handleInputConditionChange(e, currentField)
+                    }
+                    // ref={inputRef}
+                    name="condition"
+                    style={{ padding: '10px' }}
+                    disabled={getDropdownValues(currentField) == null}
+                    placeholder="Write a dfferent condition"
+                  />
                   <label
                     htmlFor="dropdown"
                     style={{ display: 'block', padding: '10px' }}
@@ -165,11 +238,13 @@ const EditDataComponent = ({
                     search
                     name="dropdown"
                     defaultValue={getDropdownValues(currentField)}
-                    options={createStateOption(
-                      requestStateOptions.data.items.map(
-                        (option) => option.token,
+                    options={[
+                      ...createStateOption(
+                        requestStateOptions.data.items.map(
+                          (option) => option.token,
+                        ),
                       ),
-                    )}
+                    ]}
                     onChange={(e, data) =>
                       handleOnDropdownChange(e, data, currentField)
                     }

package/src/less/editor.less

@@ -8,6 +8,15 @@
   }
 }
 
+.dropdown-button {
+  background: grey;
+  color: #ffffff !important;
+
+  .divider.text {
+    color: #ffffff !important;
+  }
+}
+
 .soft-required .wrapper {
   > label[for]::after,
   .ui.label::after {
@@ -27,6 +36,19 @@
   -webkit-animation: flash linear 1s 1s 1.5;
   animation: flash linear 1s 1s 1.5;
 }
+
+.title-editing-progress {
+  display: inline-block;
+  font-size: 1.5rem !important;
+
+  .dropdown {
+    font-size: 1.5rem !important;
+  }
+
+  .cancel {
+    font-size: 1.5rem !important;
+  }
+}
 @-webkit-keyframes flash {
   0% {
     opacity: 1;