design-comuni-plone-theme 11.33.1 → 11.34.0

package/src/customizations/volto-form-block/components/FormView.jsx

@@ -124,216 +124,214 @@ const FormView = ({
   return (
     <div className="block form">
       <div className="public-ui">
-        <div className="p-4">
-          {data?.title && <h2>{data.title}</h2>}
-          {data?.description && (
-            <div className="block-description">{data.description}</div>
-          )}
-          <Card className="card-bg rounded py-3" noWrapper={false} tag="div">
-            <CardBody tag="div">
-              {formState.result ? (
-                <FormResult
-                  formState={formState}
-                  data={data}
-                  resetFormState={resetFormState}
-                />
-              ) : (
-                <form
-                  onSubmit={submit}
-                  noValidate
-                  autoComplete="off"
-                  method="post"
-                >
-                  {/* Controlla che ci siano campi obbligatori al suo interno e applica una legenda  */}
-                  {data.subblocks.some((item) => item.required === true) && (
-                    <legend className="text-muted text-end mb-3">
-                      <small>
-                        {intl.formatMessage(messages.legend_required)}
-                      </small>
-                    </legend>
-                  )}
-                  {data.static_fields && (
-                    <fieldset disabled>
-                      {data.static_fields?.map((field) => (
-                        <Row key={field.field_id} className="static-field">
-                          <Col className="py-2">
-                            <Field
-                              {...field}
-                              field_type={field.field_type || 'text'}
-                              name={
-                                'static_field_' +
-                                (field.field_id ??
-                                  field.name?.toLowerCase()?.replace(' ', ''))
-                              }
-                              value={field.value}
-                              onChange={() => {}}
-                              valid
-                              disabled
-                              formHasErrors={formErrors.length > 0}
-                            />
-                          </Col>
-                        </Row>
-                      ))}
-                    </fieldset>
-                  )}
-                  {data.subblocks.map((subblock, index) => {
-                    let name = getFieldName(subblock.label, subblock.id);
-                    const fields_to_send_with_value =
-                      getFieldsToSendWithValue(subblock);
+        {data?.title && <h2>{data.title}</h2>}
+        {data?.description && (
+          <div className="block-description">{data.description}</div>
+        )}
+        <Card className="card-bg rounded py-3" noWrapper={false} tag="div">
+          <CardBody tag="div">
+            {formState.result ? (
+              <FormResult
+                formState={formState}
+                data={data}
+                resetFormState={resetFormState}
+              />
+            ) : (
+              <form
+                onSubmit={submit}
+                noValidate
+                autoComplete="off"
+                method="post"
+              >
+                {/* Controlla che ci siano campi obbligatori al suo interno e applica una legenda  */}
+                {data.subblocks.some((item) => item.required === true) && (
+                  <legend className="text-muted text-end mb-3">
+                    <small>
+                      {intl.formatMessage(messages.legend_required)}
+                    </small>
+                  </legend>
+                )}
+                {data.static_fields && (
+                  <fieldset disabled>
+                    {data.static_fields?.map((field) => (
+                      <Row key={field.field_id} className="static-field">
+                        <Col className="py-2">
+                          <Field
+                            {...field}
+                            field_type={field.field_type || 'text'}
+                            name={
+                              'static_field_' +
+                              (field.field_id ??
+                                field.name?.toLowerCase()?.replace(' ', ''))
+                            }
+                            value={field.value}
+                            onChange={() => {}}
+                            valid
+                            disabled
+                            formHasErrors={formErrors.length > 0}
+                          />
+                        </Col>
+                      </Row>
+                    ))}
+                  </fieldset>
+                )}
+                {data.subblocks.map((subblock, index) => {
+                  let name = getFieldName(subblock.label, subblock.id);
+                  const fields_to_send_with_value =
+                    getFieldsToSendWithValue(subblock);
 
-                    return (
-                      evaluateAllConditions(
-                        subblock?.visibility_conditions,
-                        formData,
-                      ) && (
-                        <Row key={'row' + index}>
+                  return (
+                    evaluateAllConditions(
+                      subblock?.visibility_conditions,
+                      formData,
+                    ) && (
+                      <Row key={'row' + index}>
+                        <Col className="py-2">
+                          <Field
+                            {...subblock}
+                            name={name}
+                            onChange={(field, value) =>
+                              onChangeFormData(
+                                subblock.id,
+                                field,
+                                value,
+                                fields_to_send_with_value,
+                              )
+                            }
+                            value={
+                              subblock.field_type === 'static_text'
+                                ? subblock.value
+                                : formData[name]?.value
+                            }
+                            valid={isValidField(name)}
+                            errorMessage={getErrorMessage(name)}
+                            formHasErrors={formErrors.length > 0}
+                          />
+                        </Col>
+                      </Row>
+                    )
+                  );
+                })}
+
+                {/*OTP*/}
+                {data.email_otp_verification ? (
+                  data.subblocks
+                    .filter((subblock) => subblock.use_as_bcc)
+                    .map((subblock, index) => {
+                      const fieldName = getFieldName(
+                        subblock.label,
+                        subblock.id,
+                      );
+                      const name = fieldName + OTP_FIELDNAME_EXTENDER;
+                      const fieldValue = formData[fieldName]?.value;
+                      const value = formData[fieldName]?.otp;
+                      const fields_to_send_with_value =
+                        getFieldsToSendWithValue(subblock);
+
+                      return (
+                        <Row key={'row_otp' + index}>
                           <Col className="py-2">
-                            <Field
+                            <OTPWidget
                               {...subblock}
-                              name={name}
-                              onChange={(field, value) =>
+                              fieldValue={fieldValue}
+                              onChange={(field, value) => {
                                 onChangeFormData(
                                   subblock.id,
-                                  field,
-                                  value,
-                                  fields_to_send_with_value,
-                                )
-                              }
-                              value={
-                                subblock.field_type === 'static_text'
-                                  ? subblock.value
-                                  : formData[name]?.value
-                              }
+                                  fieldName,
+                                  fieldValue,
+                                  {
+                                    ...fields_to_send_with_value,
+                                    otp: value,
+                                  },
+                                );
+                              }}
+                              value={value}
                               valid={isValidField(name)}
                               errorMessage={getErrorMessage(name)}
-                              formHasErrors={formErrors.length > 0}
+                              formHasErrors={formErrors?.length > 0}
+                              path={path}
+                              block_id={block_id}
                             />
                           </Col>
                         </Row>
-                      )
-                    );
-                  })}
-
-                  {/*OTP*/}
-                  {data.email_otp_verification ? (
-                    data.subblocks
-                      .filter((subblock) => subblock.use_as_bcc)
-                      .map((subblock, index) => {
-                        const fieldName = getFieldName(
-                          subblock.label,
-                          subblock.id,
-                        );
-                        const name = fieldName + OTP_FIELDNAME_EXTENDER;
-                        const fieldValue = formData[fieldName]?.value;
-                        const value = formData[fieldName]?.otp;
-                        const fields_to_send_with_value =
-                          getFieldsToSendWithValue(subblock);
-
-                        return (
-                          <Row key={'row_otp' + index}>
-                            <Col className="py-2">
-                              <OTPWidget
-                                {...subblock}
-                                fieldValue={fieldValue}
-                                onChange={(field, value) => {
-                                  onChangeFormData(
-                                    subblock.id,
-                                    fieldName,
-                                    fieldValue,
-                                    {
-                                      ...fields_to_send_with_value,
-                                      otp: value,
-                                    },
-                                  );
-                                }}
-                                value={value}
-                                valid={isValidField(name)}
-                                errorMessage={getErrorMessage(name)}
-                                formHasErrors={formErrors?.length > 0}
-                                path={path}
-                                block_id={block_id}
-                              />
-                            </Col>
-                          </Row>
-                        );
-                      })
-                  ) : (
-                    <></>
-                  )}
+                      );
+                    })
+                ) : (
+                  <></>
+                )}
 
-                  {enableCaptcha && <>{captcha.render()}</>}
+                {enableCaptcha && <>{captcha.render()}</>}
 
-                  {formErrors.length > 0 && (
-                    <Alert
-                      color="danger"
-                      fade
-                      isOpen
-                      tag="div"
-                      transition={alertTransition}
-                    >
-                      <h4>{intl.formatMessage(messages.error)}</h4>
-                      <p>{intl.formatMessage(messages.form_errors)}</p>
-                    </Alert>
-                  )}
-                  {formState.error && (
-                    <Alert
-                      color="danger"
-                      fade
-                      isOpen
-                      tag="div"
-                      transition={alertTransition}
-                    >
-                      <h4>{intl.formatMessage(messages.error)}</h4>
-                      <p>{formState.error}</p>
-                    </Alert>
-                  )}
+                {formErrors.length > 0 && (
+                  <Alert
+                    color="danger"
+                    fade
+                    isOpen
+                    tag="div"
+                    transition={alertTransition}
+                  >
+                    <h4>{intl.formatMessage(messages.error)}</h4>
+                    <p>{intl.formatMessage(messages.form_errors)}</p>
+                  </Alert>
+                )}
+                {formState.error && (
+                  <Alert
+                    color="danger"
+                    fade
+                    isOpen
+                    tag="div"
+                    transition={alertTransition}
+                  >
+                    <h4>{intl.formatMessage(messages.error)}</h4>
+                    <p>{formState.error}</p>
+                  </Alert>
+                )}
 
-                  <Row>
-                    <Col align="center">
-                      {data?.show_cancel && (
-                        <Button
-                          color="secondary"
-                          type="button"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            resetFormState();
-                          }}
-                          className="me-2"
-                        >
-                          {data.cancel_label ||
-                            intl.formatMessage(messages.default_cancel_label)}
-                        </Button>
-                      )}
+                <Row>
+                  <Col align="center">
+                    {data?.show_cancel && (
                       <Button
-                        color="primary"
-                        type="submit"
-                        disabled={
-                          (enableCaptcha &&
-                            !captcha?.props?.captchaToken?.current) ||
-                          formState.loading
-                        }
+                        color="secondary"
+                        type="button"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          resetFormState();
+                        }}
+                        className="me-2"
                       >
-                        {data.submit_label ||
-                          intl.formatMessage(messages.default_submit_label)}
-
-                        {formState.loading && (
-                          <span>
-                            <Progress
-                              indeterminate={true}
-                              role="progressbar"
-                              tag="div"
-                            />
-                          </span>
-                        )}
+                        {data.cancel_label ||
+                          intl.formatMessage(messages.default_cancel_label)}
                       </Button>
-                    </Col>
-                  </Row>
-                </form>
-              )}
-            </CardBody>
-          </Card>
-        </div>
+                    )}
+                    <Button
+                      color="primary"
+                      type="submit"
+                      disabled={
+                        (enableCaptcha &&
+                          !captcha?.props?.captchaToken?.current) ||
+                        formState.loading
+                      }
+                    >
+                      {data.submit_label ||
+                        intl.formatMessage(messages.default_submit_label)}
+
+                      {formState.loading && (
+                        <span>
+                          <Progress
+                            indeterminate={true}
+                            role="progressbar"
+                            tag="div"
+                          />
+                        </span>
+                      )}
+                    </Button>
+                  </Col>
+                </Row>
+              </form>
+            )}
+          </CardBody>
+        </Card>
       </div>
     </div>
   );

package/src/customizations/volto-form-block/components/Sidebar.jsx

@@ -1,65 +1,27 @@
 // CUSTOMIZATION:
 // - 112-113 reset subscription limit to default when set_limit is not active
 
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
-import { useSelector, useDispatch } from 'react-redux';
-import {
-  Segment,
-  Accordion,
-  Form,
-  Button,
-  Grid,
-  Confirm,
-  Dimmer,
-  Loader,
-} from 'semantic-ui-react';
+import { Segment, Accordion, Form, Grid } from 'semantic-ui-react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Icon } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
-import downloadSVG from '@plone/volto/icons/download.svg';
-import deleteSVG from '@plone/volto/icons/delete.svg';
 
-import warningSVG from '@plone/volto/icons/warning.svg';
+import config from '@plone/volto/registry';
 
-import {
-  getFormData,
-  exportCsvFormData,
-  clearFormData,
-  setSubblocksIDList,
-} from 'volto-form-block/actions';
+import { setSubblocksIDList } from 'volto-form-block/actions';
 
 import { BlockDataForm } from '@plone/volto/components';
-import { flattenToAppURL } from '@plone/volto/helpers';
 import { getFieldName } from 'volto-form-block/components/utils';
 
 import 'volto-form-block/components/Sidebar.css';
-import config from '@plone/volto/registry';
 
 const messages = defineMessages({
-  exportCsv: {
-    id: 'form_edit_exportCsv',
-    defaultMessage: 'Export data',
-  },
-  clearData: {
-    id: 'form_clear_data',
-    defaultMessage: 'Clear data',
-  },
-  formDataCount: {
-    id: 'form_formDataCount',
-    defaultMessage: '{formDataCount} item(s) stored',
-  },
-  confirmClearData: {
-    id: 'form_confirmClearData',
-    defaultMessage: 'Are you sure you want to delete all saved items?',
-  },
-  cancel: {
-    id: 'Cancel',
-    defaultMessage: 'Cancel',
-  },
   fieldId: {
     id: 'fieldId',
     defaultMessage: 'Field ID',
@@ -91,22 +53,6 @@ const Sidebar = ({
 }) => {
   const intl = useIntl();
   const dispatch = useDispatch();
-  const [confirmOpen, setConfirmOpen] = useState(false);
-
-  const formData = useSelector((state) => state.formData);
-  const clearFormDataState = useSelector(
-    (state) => state.clearFormData?.loaded,
-  );
-  useEffect(() => {
-    if (properties?.['@id'])
-      dispatch(
-        getFormData({
-          path: flattenToAppURL(properties['@id']),
-          block_id: block,
-        }),
-      );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [clearFormDataState]);
 
   if (data.send_email === undefined) data.send_email = true;
 
@@ -149,117 +95,7 @@ const Sidebar = ({
           />
           {properties?.['@components']?.form_data && (
             <Form.Field inline>
-              <Grid>
-                <Grid.Row stretched centered style={{ padding: '1rem 0' }}>
-                  <Dimmer active={formData?.loading}>
-                    <Loader size="tiny" />
-                  </Dimmer>
-                  <p>
-                    {intl.formatMessage(messages.formDataCount, {
-                      formDataCount: formData?.result?.items_total ?? 0,
-                    })}
-                  </p>
-                </Grid.Row>
-                <Grid.Row
-                  stretched
-                  centered
-                  columns={2}
-                  style={{ marginBottom: '0.5rem' }}
-                >
-                  <Grid.Column>
-                    <Button
-                      compact
-                      onClick={() =>
-                        dispatch(
-                          exportCsvFormData(
-                            flattenToAppURL(properties['@id']),
-                            `export-${properties.id ?? 'form'}.csv`,
-                            block,
-                          ),
-                        )
-                      }
-                      size="tiny"
-                      style={{ display: 'flex', alignItems: 'center' }}
-                    >
-                      <Icon name={downloadSVG} size="1.5rem" />{' '}
-                      {intl.formatMessage(messages.exportCsv)}
-                    </Button>
-                  </Grid.Column>
-                  <Grid.Column>
-                    <Button
-                      compact
-                      onClick={() => setConfirmOpen(true)}
-                      size="tiny"
-                      style={{ display: 'flex', alignItems: 'center' }}
-                    >
-                      <Icon name={deleteSVG} size="1.5rem" />{' '}
-                      {intl.formatMessage(messages.clearData)}
-                    </Button>
-                    <Confirm
-                      open={confirmOpen}
-                      content={intl.formatMessage(messages.confirmClearData)}
-                      cancelButton={intl.formatMessage(messages.cancel)}
-                      onCancel={() => setConfirmOpen(false)}
-                      onConfirm={() => {
-                        dispatch(
-                          clearFormData({
-                            path: flattenToAppURL(properties['@id']),
-                            block_id: block,
-                          }),
-                        );
-                        setConfirmOpen(false);
-                      }}
-                    />
-                  </Grid.Column>
-                </Grid.Row>
-                {data.remove_data_after_days > 0 && (
-                  <Grid.Row>
-                    <div class="ui message info tiny">
-                      {formData.loaded &&
-                        formData.result?.expired_total > 0 && (
-                          <>
-                            <p>
-                              <Icon name={warningSVG} size="18px" />
-                              {intl.formatMessage(
-                                messages.remove_data_warning,
-                                {
-                                  record: formData.result.expired_total,
-                                },
-                              )}
-                            </p>
-                            <p>
-                              <Button
-                                onClick={() =>
-                                  dispatch(
-                                    clearFormData({
-                                      path: flattenToAppURL(properties['@id']),
-                                      expired: true,
-                                      block_id: block,
-                                    }),
-                                  )
-                                }
-                                size="tiny"
-                                compact
-                                style={{
-                                  display: 'flex',
-                                  alignItems: 'center',
-                                }}
-                              >
-                                <Icon name={deleteSVG} size="1.5rem" />{' '}
-                                {intl.formatMessage(
-                                  messages.remove_data_button,
-                                )}
-                              </Button>
-                            </p>
-                          </>
-                        )}
-                      <p>
-                        {intl.formatMessage(messages.remove_data_cron_info)}
-                      </p>
-                    </div>
-                  </Grid.Row>
-                )}
-              </Grid>
+              <Grid></Grid>
             </Form.Field>
           )}
         </Segment>
@@ -307,7 +143,6 @@ const Sidebar = ({
                         if (subblock.field_type === 'static_text') {
                           update_values.required = false;
                         }
-
                         onChangeSubBlock(index, {
                           ...subblock,
                           [name]: value,

package/src/customizations/volto-form-block/components/View.jsx

@@ -242,8 +242,8 @@ const View = ({ data, id, path }) => {
       .verify()
       .then(() => {
         if (isValidForm()) {
-          let attachments = {};
-          let captcha = {
+          const attachments = {};
+          const captcha = {
             provider: data.captcha,
             token: captchaToken.current,
           };
@@ -251,9 +251,9 @@ const View = ({ data, id, path }) => {
             captcha.value = formData[data.captcha_props.id]?.value ?? '';
           }
 
-          let formattedFormData = { ...formData };
+          const formattedFormData = { ...formData };
           data.subblocks.forEach((subblock) => {
-            let name = getFieldName(subblock.label, subblock.id);
+            const name = getFieldName(subblock.label, subblock.id);
             if (formattedFormData[name]?.value) {
               formattedFormData[name].field_id = subblock.field_id;
               const isAttachment =
@@ -263,7 +263,11 @@ const View = ({ data, id, path }) => {
               // const isDate = subblock.field_type === 'date';
 
               if (isAttachment) {
-                attachments[name] = formattedFormData[name].value;
+                attachments[name] = {
+                  ...formattedFormData[name].value,
+                  label: formattedFormData[name].label,
+                  field_id: subblock.field_id,
+                };
                 delete formattedFormData[name];
               }