@eeacms/volto-editing-progress 0.2.3 → 0.4.0

package/src/VisualJSONWidget.jsx

@@ -0,0 +1,294 @@
+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,
+  Segment,
+  Divider,
+  Sidebar,
+} from 'semantic-ui-react';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import './less/editor.less';
+import _ from 'lodash';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { useSelector, useDispatch } from 'react-redux';
+import { getRawContent } from './actions';
+import SidebarComponent from './WidgetSidebar';
+import EditDataComponent from './WidgetDataComponent';
+import './less/editor.less';
+const messages = defineMessages({
+  jsonTitle: {
+    id: 'Edit JSON',
+    defaultMessage: 'Edit JSON',
+  },
+});
+
+export const SIDEBAR_WIDTH = '250px';
+export const COMPONENT_HEIGHT = '750px';
+
+function isValidJson(json) {
+  try {
+    JSON.parse(json);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function addNewStateToAlreadyExistingField(
+  currentContentTypeData,
+  currentField,
+  statesToAdd,
+  message,
+  condition,
+  link,
+) {
+  for (
+    let localRuleIndex = 0;
+    localRuleIndex < currentContentTypeData.length;
+    localRuleIndex++
+  ) {
+    if (currentContentTypeData[localRuleIndex].prefix !== currentField)
+      continue;
+
+    // TODO rewrite message as an object with multiple message as a key and add it
+    // to currentContentTypeData dinamically in order to create the posibillity
+    // for multiple fields
+
+    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);
+  }
+}
+
+function doesPrefixExistInCurrentContentTypeData(
+  currentContentTypeData,
+  currentField,
+) {
+  return currentContentTypeData.every((rule) => rule.prefix !== currentField);
+}
+
+function createFieldRule(currentField, statesToAdd) {
+  return {
+    prefix: currentField,
+    states: statesToAdd,
+    condition: 'python:value',
+    link: 'edit#fieldset-metadata-field-label-' + currentField,
+    linkLabel: 'Add {label}',
+  };
+}
+
+const VisualJSONWidget = (props) => {
+  const { id, value = {}, onChange } = props;
+  const [isJSONEditorOpen, setIsJSONEditorOpen] = useState(false);
+  const [currentContentType, setCurrentContentType] = useState();
+
+  const path = flattenToAppURL(
+    currentContentType?.['@id'] ? `${currentContentType['@id']}` : null,
+  );
+
+  const dispatch = useDispatch();
+  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));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dispatch, path, content, request?.loaded, request?.loading]);
+
+  useEffect(() => {
+    if (types.loaded && !types.loading && Array.isArray(types.types)) {
+      setCurrentContentType(types.types[0]);
+    }
+  }, [types]);
+
+  const handleOnCancel = (e) => {
+    setIsJSONEditorOpen(false);
+  };
+
+  const handleEditJSON = (e) => {
+    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)) {
+      onChange(id, JSON.parse(e.json));
+      return;
+    }
+    onChange(id, e.json);
+  };
+
+  const handleChangeSelectedContentType = (e, type) => {
+    setCurrentContentType(type);
+  };
+
+  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];
+
+    if (!currentContentTypeData && data) {
+      //Reference doesn't work with currentContentTypeData
+      localCopyOfValue[currentContentType.id] = [
+        createFieldRule(currentField, statesToAdd),
+      ];
+    } else if (
+      doesPrefixExistInCurrentContentTypeData(
+        currentContentTypeData,
+        currentField,
+      ) &&
+      data
+    ) {
+      currentContentTypeData.push(createFieldRule(currentField, statesToAdd));
+    } else {
+      addNewStateToAlreadyExistingField(
+        currentContentTypeData,
+        currentField,
+        statesToAdd,
+        message,
+        condition,
+        link,
+      );
+    }
+    //The variable currentContentTypeData cannot be used here because of eslint and delete keyword
+    if (localCopyOfValue[currentContentType.id]?.length === 0) {
+      delete localCopyOfValue[currentContentType.id];
+    }
+    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 (
+    <>
+      <div>
+        {isJSONEditorOpen && (
+          <ModalForm
+            schema={JSONSchema(props)}
+            onSubmit={onJSONSubmit}
+            title={props.intl.formatMessage(messages.jsonTitle)}
+            open={isJSONEditorOpen}
+            formData={{ json: JSON.stringify(value, undefined, 2) }}
+            onCancel={handleOnCancel}
+            key="JSON"
+          />
+        )}
+        <Container>
+          <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>
+      <Sidebar.Pushable as={Segment} style={{ height: COMPONENT_HEIGHT }}>
+        <SidebarComponent
+          handleChangeSelectedContentType={handleChangeSelectedContentType}
+          currentContentType={currentContentType}
+          types={types}
+          value={value}
+        />
+        <Sidebar.Pusher style={{ width: `calc(100% - ${SIDEBAR_WIDTH})` }}>
+          <EditDataComponent
+            request={request}
+            handleOnDropdownChange={handleOnDropdownChange}
+            currentContentType={currentContentType}
+            value={value}
+            fields={fields}
+            getDropdownValues={getDropdownValues}
+          />
+        </Sidebar.Pusher>
+      </Sidebar.Pushable>
+    </>
+  );
+};
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+VisualJSONWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.object,
+  onChange: PropTypes.func,
+  onEdit: PropTypes.func,
+  onDelete: PropTypes.func,
+  wrapped: PropTypes.bool,
+  placeholder: PropTypes.string,
+};
+
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+VisualJSONWidget.defaultProps = {
+  description: null,
+  required: false,
+  error: [],
+  value: null,
+  onChange: null,
+  onEdit: null,
+  onDelete: null,
+  title: '',
+  id: '',
+};
+export default injectIntl(VisualJSONWidget);

package/src/VisualWidget.test.js

@@ -0,0 +1,51 @@
+import { makeFirstLetterCapital } from './WidgetDataComponent';
+import React from 'react';
+import { Provider } from 'react-intl-redux';
+import { MemoryRouter } from 'react-router-dom';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import VisualJSONWidget from './VisualJSONWidget';
+import { backgroundColor } from './WidgetSidebar';
+const mockStore = configureStore();
+const propsEmpty = {};
+describe('Widget Data Component', () => {
+  it('should make first letter capital', () => {
+    const testString = 'this is a test string';
+    expect(makeFirstLetterCapital(testString)[0]).toEqual(
+      testString[0].toUpperCase(),
+    );
+  });
+});
+describe('Widget Sidebar', () => {
+  it('should return a background lightblue', () => {
+    expect(backgroundColor(true, false)).toEqual('lightblue');
+    expect(backgroundColor(true, true)).toEqual('lightblue');
+  });
+  it('should return a background lightpink', () => {
+    expect(backgroundColor(false, true)).toEqual('lightpink');
+  });
+});
+describe('Visual widget', () => {
+  it('renders the VisualJSONWidget component without breaking if props and progressEditing are empty', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      progressEditing: {},
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <VisualJSONWidget
+            pathname="/test"
+            {...propsEmpty}
+            hasToolbar={true}
+          />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/WidgetDataComponent.jsx

@@ -0,0 +1,262 @@
+import React, { useEffect, useState } from 'react';
+import { Segment, Dropdown, Accordion, Icon } from 'semantic-ui-react';
+import { flattenToAppURL } from '@plone/volto/helpers';
+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);
+}
+
+const EditDataComponent = ({
+  request,
+  handleOnDropdownChange,
+  currentContentType,
+  value,
+  fields,
+  getDropdownValues,
+}) => {
+  const path = flattenToAppURL(
+    '/@vocabularies/plone.app.vocabularies.WorkflowStates',
+  );
+
+  const dispatch = useDispatch();
+  const requestStateOptions = useSelector((state) => state.rawdata?.[path]);
+  const content = requestStateOptions?.data;
+
+  useEffect(() => {
+    if (
+      path &&
+      !requestStateOptions?.loading &&
+      !requestStateOptions?.loaded &&
+      !content
+    )
+      dispatch(getRawContent(path));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    dispatch,
+    path,
+    content,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    requestStateOptions?.loaded,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    requestStateOptions?.loading,
+  ]);
+
+  //Returns the saved values for dropdown with the first letter in uppercase
+
+  const getValues = (currentField) => {
+    if (
+      !request.loading &&
+      request.loaded &&
+      currentContentType &&
+      value[currentContentType.id]
+    )
+      return value[currentContentType.id].find(
+        (rule) => rule?.prefix === currentField,
+      );
+
+    return undefined;
+  };
+
+  const renderLabel = (label) => ({
+    color: 'blue',
+    content: `${label.text}`,
+  });
+
+  const createStateOption = (stateOptions) => {
+    return ['all', ...(stateOptions || [])].map((state) => ({
+      key: makeFirstLetterCapital(state),
+      text: makeFirstLetterCapital(state),
+      value: makeFirstLetterCapital(state),
+    }));
+  };
+  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(getValues(currentField)?.linkLabel || '');
+    setConditionValue(getValues(currentField)?.condition || '');
+    setLinkValue(getValues(currentField)?.link || '');
+  };
+  const handleInputChange = (e, currentField) => {
+    setInputValue(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
+      style={{
+        width: '100%',
+        paddingBottom:
+          request?.data?.fieldsets[0]?.fields.length > 9 ? '120px' : '',
+        height: COMPONENT_HEIGHT,
+        overflow: 'auto',
+      }}
+    >
+      <Accordion styled fluid>
+        {request?.loaded &&
+          !request?.loading &&
+          requestStateOptions?.loaded &&
+          !requestStateOptions?.loading &&
+          requestStateOptions?.data &&
+          fields.map((currentField, index) => {
+            if (
+              request.data.required.includes(currentField) ||
+              getDropdownValues(currentField) === undefined
+            )
+              return null;
+            return (
+              <React.Fragment key={`${currentField}${index}`}>
+                <Accordion.Title
+                  active={activeIndex === index}
+                  index={index}
+                  onClick={(e, titleProps) =>
+                    handleClick(e, titleProps, currentField)
+                  }
+                  id={`property_${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' }}
+                  >
+                    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' }}
+                  >
+                    States
+                  </label>
+                  <Dropdown
+                    placeholder="Fields"
+                    multiple
+                    floating
+                    selection
+                    search
+                    name="dropdown"
+                    defaultValue={getDropdownValues(currentField)}
+                    options={[
+                      ...createStateOption(
+                        requestStateOptions.data.items.map(
+                          (option) => option.token,
+                        ),
+                      ),
+                    ]}
+                    onChange={(e, data) =>
+                      handleOnDropdownChange(e, data, currentField)
+                    }
+                    renderLabel={renderLabel}
+                  />
+                </Accordion.Content>
+              </React.Fragment>
+            );
+          })}
+      </Accordion>
+    </Segment>
+  );
+};
+
+export default EditDataComponent;

package/src/WidgetSidebar.jsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from 'react';
+import { Sidebar, List } from 'semantic-ui-react';
+import { SIDEBAR_WIDTH } from './VisualJSONWidget';
+
+export const backgroundColor = (currentContentType, modified) => {
+  let color = undefined;
+  if (modified) {
+    color = 'lightpink';
+  }
+  if (currentContentType) {
+    color = 'lightblue';
+  }
+  return color;
+};
+
+const SidebarComponent = (props) => {
+  const { types, currentContentType, handleChangeSelectedContentType } = props;
+  // console.log(types);
+  const [filtredTypes, setFiltredTypes] = useState({ ...types });
+  const [inputValue, setInputValue] = useState('');
+
+  useEffect(() => {
+    setFiltredTypes({ ...types });
+  }, [types]);
+
+  const handleInputChange = (e) => {
+    if (e.target.value == null) return;
+    setInputValue(e.target.value);
+    if (
+      types.loaded &&
+      !types.loading &&
+      Array.isArray(types.types) &&
+      types.types.length > 0
+    ) {
+      setFiltredTypes({
+        ...types,
+        types: types.types.filter((type) =>
+          type.title.toLowerCase().includes(e.target.value.toLowerCase()),
+        ),
+      });
+    }
+  };
+
+  return (
+    <Sidebar
+      as={List}
+      animation="push"
+      icon="labeled"
+      visible
+      relaxed
+      size="big"
+      divided
+      selection
+      style={{ width: SIDEBAR_WIDTH }}
+    >
+      <input
+        value={inputValue}
+        onChange={handleInputChange}
+        placeholder="Search... "
+        style={{ paddingLeft: ' 10px' }}
+      />
+      {filtredTypes.loaded &&
+        !filtredTypes.loading &&
+        Array.isArray(filtredTypes.types) &&
+        filtredTypes.types.map((type) => (
+          <List.Item
+            style={{
+              padding: '25px 5px',
+              textAlign: 'center',
+              backgroundColor: backgroundColor(
+                currentContentType?.id === type.id,
+                Object.keys(props.value).includes(type.id),
+              ),
+            }}
+            key={type.id}
+            id={`sidebar_${type.id}`}
+            onClick={(e) => handleChangeSelectedContentType(e, type)}
+          >
+            <List.Content>
+              <List.Header>{type.title}</List.Header>
+            </List.Content>
+          </List.Item>
+        ))}
+    </Sidebar>
+  );
+};
+
+export default SidebarComponent;

package/src/actionTypes/index.js

@@ -1 +1,2 @@
 export const EDITING_PROGRESS = 'EDITING_PROGRESS';
+export const GET_RAW_CONTENT = 'GET_RAW_CONTENT';