@eeacms/volto-editing-progress 0.4.0 → 2.0.0

package/src/WidgetDataComponent.jsx

@@ -18,6 +18,8 @@ const EditDataComponent = ({
   value,
   fields,
   getDropdownValues,
+  handleUpdateEnforceCharLimits,
+  handleRemoveEnforceCharLimits,
 }) => {
   const path = flattenToAppURL(
     '/@vocabularies/plone.app.vocabularies.WorkflowStates',
@@ -74,6 +76,16 @@ const EditDataComponent = ({
       value: makeFirstLetterCapital(state),
     }));
   };
+
+  // Get enforceCharLimits rule if it exists
+  const getEnforceCharLimitsRule = () => {
+    if (!currentContentType || !value[currentContentType.id]) return null;
+    return value[currentContentType.id].find(
+      (rule) => rule.type === 'enforceCharLimits',
+    );
+  };
+
+  const enforceCharLimitsRule = getEnforceCharLimitsRule();
   const [activeIndex, setActiveIndex] = useState(0);
   // const inputRef = useRef();
   const [inputValue, setInputValue] = useState('');
@@ -129,6 +141,91 @@ const EditDataComponent = ({
       }}
     >
       <Accordion styled fluid>
+        {/* Enforce Character Limits section */}
+        {enforceCharLimitsRule &&
+          requestStateOptions?.loaded &&
+          !requestStateOptions?.loading &&
+          requestStateOptions?.data && (
+            <React.Fragment key="enforceCharLimits">
+              <Accordion.Title
+                active={activeIndex === 'charLimits'}
+                index="charLimits"
+                onClick={() =>
+                  setActiveIndex(
+                    activeIndex === 'charLimits' ? -1 : 'charLimits',
+                  )
+                }
+                id="property_enforceCharLimits"
+              >
+                <div className="title-editing-progress">
+                  <Icon name="dropdown" size="tiny" />
+                  &nbsp; Enforce character limits
+                </div>
+                <div className="title-editing-progress">
+                  <Icon
+                    name="cancel"
+                    size="mini"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleRemoveEnforceCharLimits();
+                    }}
+                  />
+                </div>
+              </Accordion.Title>
+              <Accordion.Content
+                active={activeIndex === 'charLimits'}
+                id="property_content_enforceCharLimits"
+              >
+                <label
+                  htmlFor="charLimitsLinkLabel"
+                  style={{ display: 'block', padding: '10px' }}
+                >
+                  Link Label (use {'{title}'} as placeholder)
+                </label>
+                <input
+                  className="message-input"
+                  value={enforceCharLimitsRule.linkLabel || ''}
+                  onChange={(e) =>
+                    handleUpdateEnforceCharLimits('linkLabel', e.target.value)
+                  }
+                  name="charLimitsLinkLabel"
+                  style={{ padding: '10px' }}
+                  placeholder="Fix {title}"
+                />
+                <label
+                  htmlFor="charLimitsStates"
+                  style={{ display: 'block', padding: '10px' }}
+                >
+                  States
+                </label>
+                <Dropdown
+                  placeholder="States"
+                  multiple
+                  floating
+                  selection
+                  search
+                  name="charLimitsStates"
+                  value={
+                    enforceCharLimitsRule.states?.map((s) =>
+                      makeFirstLetterCapital(s),
+                    ) || ['All']
+                  }
+                  options={createStateOption(
+                    requestStateOptions.data.items.map(
+                      (option) => option.token,
+                    ),
+                  )}
+                  onChange={(e, data) =>
+                    handleUpdateEnforceCharLimits('states', data.value)
+                  }
+                  renderLabel={renderLabel}
+                />
+              </Accordion.Content>
+            </React.Fragment>
+          )}
+
+        {/* Regular fields */}
         {request?.loaded &&
           !request?.loading &&
           requestStateOptions?.loaded &&

package/src/less/editor.less

@@ -5,6 +5,15 @@
   &.sidenav-ol--ep {
     left: @progress-wf-sidebar-width;
     padding: 1.5rem;
+
+    .ep-sidenav-li {
+      list-style: none;
+      text-align: left;
+
+      .ep-sidenav-a {
+        text-align: left;
+      }
+    }
   }
 }
 
@@ -25,9 +34,9 @@
     display: inline-block;
     width: 10px;
     height: 10px;
+    border-radius: 50%;
     margin-left: 5px;
     background-color: @orange;
-    border-radius: 50%;
     content: '';
   }
 }

package/.project.eslintrc.js

@@ -1,48 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const projectRootPath = fs.existsSync('./project')
-  ? fs.realpathSync('./project')
-  : fs.realpathSync('./../../../');
-const packageJson = require(path.join(projectRootPath, 'package.json'));
-const jsConfig = require(path.join(projectRootPath, 'jsconfig.json')).compilerOptions;
-
-const pathsConfig = jsConfig.paths;
-
-let voltoPath = path.join(projectRootPath, 'node_modules/@plone/volto');
-
-Object.keys(pathsConfig).forEach(pkg => {
-  if (pkg === '@plone/volto') {
-    voltoPath = `./${jsConfig.baseUrl}/${pathsConfig[pkg][0]}`;
-  }
-});
-const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
-const reg = new AddonConfigurationRegistry(projectRootPath);
-
-// Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
-const addonAliases = Object.keys(reg.packages).map(o => [
-  o,
-  reg.packages[o].modulePath,
-]);
-
-
-module.exports = {
-  extends: `${projectRootPath}/node_modules/@plone/volto/.eslintrc`,
-  settings: {
-    'import/resolver': {
-      alias: {
-        map: [
-          ['@plone/volto', '@plone/volto/src'],
-          ...addonAliases,
-          ['@package', `${__dirname}/src`],
-          ['~', `${__dirname}/src`],
-        ],
-        extensions: ['.js', '.jsx', '.json'],
-      },
-      'babel-plugin-root-import': {
-        rootPathSuffix: 'src',
-      },
-    },
-  },
-};
-