design-comuni-plone-theme 11.33.1 → 11.34.1

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

@@ -4,16 +4,13 @@
  *
  * CUSTOMIZATIONS:
  * - customized to use design-react-kit elements instead semantic-ui elements
+ * - renamed menu item "Data" to "Dati"
  */
 
 import React from 'react';
-// eslint-disable-next-line import/no-unresolved
-import EditBlock from 'volto-form-block/components/EditBlock';
-// eslint-disable-next-line import/no-unresolved
-import Sidebar from 'volto-form-block/components/Sidebar';
-import ValidateConfigForm from 'volto-form-block/components/ValidateConfigForm';
-
+import { defineMessages } from 'react-intl';
 import { Card, CardBody, Button, Row, Col } from 'design-react-kit';
+import { TabPane, Tab } from 'semantic-ui-react';
 import {
   withDNDContext,
   SubblocksEdit,
@@ -22,7 +19,10 @@ import {
 
 import { SidebarPortal } from '@plone/volto/components';
 
-import { defineMessages } from 'react-intl';
+import EditBlock from 'volto-form-block/components/EditBlock';
+import Sidebar from 'volto-form-block/components/Sidebar';
+import DataTable from 'volto-form-block/components/DataTable';
+import ValidateConfigForm from 'volto-form-block/components/ValidateConfigForm';
 
 const messages = defineMessages({
   addField: {
@@ -46,6 +46,11 @@ const messages = defineMessages({
     defaultMessage:
       'Inserire un campo di tipo "E-mail mittente". Se non è presente, oppure è presente ma non viene compilato dall\'utente, l\'indirizzo del mittente della mail sarà quello configurato dalla sidebar di destra.',
   },
+  warning_enable_save: {
+    id: 'warning_enable_save',
+    defaultMessage:
+      'Selezionare la voce "Salva i dati compilati" nella barra laterale per abilitare il salvataggio e la visualizzazione dei dati',
+  },
 });
 
 /**
@@ -93,10 +98,20 @@ class Edit extends SubblocksEdit {
                 {this.props.data.description}
               </div>
             )}
-            <Card className="card-bg rounded py-3" noWrapper={false} tag="div">
-              <CardBody tag="div">
-                <SubblocksWrapper node={this.node}>
-                  {/*this.state.subblocks.filter((s) => s.field_type === 'from')
+            <Tab
+              panes={[
+                {
+                  menuItem: 'Form',
+                  render: () => (
+                    <TabPane>
+                      <Card
+                        className="card-bg rounded py-3"
+                        noWrapper={false}
+                        tag="div"
+                      >
+                        <CardBody tag="div">
+                          <SubblocksWrapper node={this.node}>
+                            {/*this.state.subblocks.filter((s) => s.field_type === 'from')
                   .length == 0 && (
                   <Alert color="warning" fade isOpen tag="div">
                     <h4>{this.props.intl.formatMessage(messages.warning)}</h4>
@@ -106,47 +121,78 @@ class Edit extends SubblocksEdit {
                   </Alert>
                 )*/}
 
-                  {this.state.subblocks.map((subblock, subindex) => (
-                    <div className="form-field" key={subblock.id}>
-                      <EditBlock
-                        data={subblock}
-                        index={subindex}
-                        selected={this.isSubblockSelected(subindex)}
-                        {...this.subblockProps}
-                        openObjectBrowser={this.props.openObjectBrowser}
-                      />
-                    </div>
-                  ))}
-
-                  {this.props.selected && (
-                    <div className="form-field">
-                      {this.renderAddBlockButton(
-                        this.props.intl.formatMessage(messages.addField),
-                      )}
-                    </div>
-                  )}
+                            {this.state.subblocks.map((subblock, subindex) => (
+                              <div className="form-field" key={subblock.id}>
+                                <EditBlock
+                                  data={subblock}
+                                  index={subindex}
+                                  selected={this.isSubblockSelected(subindex)}
+                                  {...this.subblockProps}
+                                  openObjectBrowser={
+                                    this.props.openObjectBrowser
+                                  }
+                                />
+                              </div>
+                            ))}
 
-                  <Row>
-                    <Col align="center">
-                      {this.props.data?.show_cancel && (
-                        <Button color="secondary" className="me-2">
-                          {this.props.data.cancel_label ||
-                            this.props.intl.formatMessage(
-                              messages.default_cancel_label,
+                            {this.props.selected && (
+                              <div className="form-field">
+                                {this.renderAddBlockButton(
+                                  this.props.intl.formatMessage(
+                                    messages.addField,
+                                  ),
+                                )}
+                              </div>
                             )}
-                        </Button>
-                      )}
-                      <Button color="primary">
-                        {this.props.data.submit_label ||
-                          this.props.intl.formatMessage(
-                            messages.default_submit_label,
+
+                            <Row>
+                              <Col align="center">
+                                {this.props.data?.show_cancel && (
+                                  <Button color="secondary" className="me-2">
+                                    {this.props.data.cancel_label ||
+                                      this.props.intl.formatMessage(
+                                        messages.default_cancel_label,
+                                      )}
+                                  </Button>
+                                )}
+                                <Button color="primary">
+                                  {this.props.data.submit_label ||
+                                    this.props.intl.formatMessage(
+                                      messages.default_submit_label,
+                                    )}
+                                </Button>
+                              </Col>
+                            </Row>
+                          </SubblocksWrapper>
+                        </CardBody>
+                      </Card>
+                    </TabPane>
+                  ),
+                },
+                {
+                  menuItem: 'Dati',
+                  render: () => (
+                    <TabPane className="container">
+                      {this.props.data.store ? (
+                        <DataTable
+                          properties={this.props.properties}
+                          blockId={this.props.block}
+                          removeDataAfterDays={
+                            this.props.data.remove_data_after_days
+                          }
+                        />
+                      ) : (
+                        <p>
+                          {this.props.intl.formatMessage(
+                            messages.warning_enable_save,
                           )}
-                      </Button>
-                    </Col>
-                  </Row>
-                </SubblocksWrapper>
-              </CardBody>
-            </Card>
+                        </p>
+                      )}
+                    </TabPane>
+                  ),
+                },
+              ]}
+            />
           </div>
         </ValidateConfigForm>
 
@@ -160,6 +206,11 @@ class Edit extends SubblocksEdit {
             selected={this.state.subIndexSelected}
             setSelected={this.onSubblockChangeFocus}
             openObjectBrowser={this.props.openObjectBrowser}
+            properties={
+              this.props.metadata?.['@id']
+                ? this.props.metadata
+                : this.props.properties
+            }
           />
         </SidebarPortal>
       </div>

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

@@ -132,15 +132,15 @@ const Field = ({
               isInvalid() ? 'is-invalid' : ''
             }`}
           >
-            <label htmlFor={name}>{getLabel()}</label>
+            <label id={`${name}-label`} htmlFor={name}>
+              {getLabel()}
+            </label>
             <Select
               components={{
                 IndicatorSeparator: null,
                 DropdownIndicator,
               }}
-              id={name}
-              name={name}
-              label={getLabel()}
+              inputId={name}
               isSearchable={true}
               onChange={(v) => {
                 onChange(name, v.value);
@@ -148,9 +148,10 @@ const Field = ({
               options={[
                 ...(input_values?.map((v) => ({ value: v, label: v })) ?? []),
               ]}
+              aria-live="polite"
               isDisabled={disabled}
               placeholder={intl.formatMessage(messages.select_a_value)}
-              aria-label={intl.formatMessage(messages.select_a_value)}
+              aria-labelledby={`${name}-label`}
               classNamePrefix="react-select"
               className={isInvalid() ? 'is-invalid' : ''}
               value={value ? [{ value: value, label: value }] : []}
@@ -172,32 +173,36 @@ const Field = ({
               isInvalid() ? 'is-invalid' : ''
             }`}
           >
-            <label className="active">{getLabel()}</label>
-            {input_values?.map((v, index) => (
-              <FormGroup check key={v + name + index}>
-                <Input
-                  id={v + name}
-                  name={name}
-                  type="radio"
-                  disabled={disabled}
-                  readOnly={disabled}
-                  onChange={(e) => {
-                    onChange(name, v);
-                  }}
-                  addon // Needed to avoid application of form-control class as of kit v4.0.2
-                  checked={value === v}
-                />
-                <Label for={v + name} check>
-                  {v}
-                </Label>
-              </FormGroup>
-            ))}
-            {description && <small className="form-text">{description}</small>}
-            {errorMessage && (
-              <div className="invalid-feedback form-feedback just-validate-error-label form-text form-feedback just-validate-error-label">
-                {errorMessage}
-              </div>
-            )}
+            <fieldset className="radio-group">
+              <legend>{getLabel()}</legend>
+              {input_values?.map((v, index) => (
+                <FormGroup check key={v + name + index}>
+                  <Input
+                    id={v + name}
+                    name={name}
+                    type="radio"
+                    disabled={disabled}
+                    readOnly={disabled}
+                    onChange={(e) => {
+                      onChange(name, v);
+                    }}
+                    addon // Needed to avoid application of form-control class as of kit v4.0.2
+                    checked={value === v}
+                  />
+                  <Label for={v + name} check>
+                    {v}
+                  </Label>
+                </FormGroup>
+              ))}
+              {description && (
+                <small className="form-text">{description}</small>
+              )}
+              {errorMessage && (
+                <div className="invalid-feedback form-feedback just-validate-error-label form-text form-feedback just-validate-error-label">
+                  {errorMessage}
+                </div>
+              )}
+            </fieldset>
           </div>
         </div>
       )}
@@ -208,37 +213,41 @@ const Field = ({
               isInvalid() ? 'is-invalid' : ''
             }`}
           >
-            <label className="active">{getLabel()}</label>
-            {input_values?.map((v, index) => (
-              <FormGroup check key={v + name + index}>
-                <Input
-                  id={v + name}
-                  name={name}
-                  type="checkbox"
-                  checked={value?.indexOf(v) > -1}
-                  onChange={(e) => {
-                    let values = JSON.parse(JSON.stringify(value ?? []));
-                    if (e.target.checked) {
-                      values.push(v);
-                    } else {
-                      values.splice(values.indexOf(v), 1);
-                    }
-                    onChange(name, values);
-                  }}
-                  invalid={isInvalid() ? 'true' : null}
-                  addon // Needed to avoid application of form-control class as of kit v4.0.2
-                />
-                <Label for={v + name} check>
-                  {v}
-                </Label>
-              </FormGroup>
-            ))}
-            {description && <small className="form-text">{description}</small>}
-            {errorMessage && (
-              <div className="invalid-feedback form-feedback just-validate-error-label form-text form-feedback just-validate-error-label">
-                {errorMessage}
-              </div>
-            )}
+            <fieldset className="checkbox-group">
+              <legend>{getLabel()}</legend>
+              {input_values?.map((v, index) => (
+                <FormGroup check key={v + name + index}>
+                  <Input
+                    id={v + name}
+                    name={name}
+                    type="checkbox"
+                    checked={value?.indexOf(v) > -1}
+                    onChange={(e) => {
+                      let values = JSON.parse(JSON.stringify(value ?? []));
+                      if (e.target.checked) {
+                        values.push(v);
+                      } else {
+                        values.splice(values.indexOf(v), 1);
+                      }
+                      onChange(name, values);
+                    }}
+                    invalid={isInvalid() ? 'true' : null}
+                    addon // Needed to avoid application of form-control class as of kit v4.0.2
+                  />
+                  <Label for={v + name} check>
+                    {v}
+                  </Label>
+                </FormGroup>
+              ))}
+              {description && (
+                <small className="form-text">{description}</small>
+              )}
+              {errorMessage && (
+                <div className="invalid-feedback form-feedback just-validate-error-label form-text form-feedback just-validate-error-label">
+                  {errorMessage}
+                </div>
+              )}
+            </fieldset>
           </div>
         </div>
       )}

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

@@ -7,6 +7,7 @@ import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import { Button, Alert } from 'design-react-kit';
 import { getFieldName } from 'volto-form-block/components/utils';
+import config from '@plone/volto/registry';
 
 const messages = defineMessages({
   success: {
@@ -15,12 +16,12 @@ const messages = defineMessages({
   },
   success_warning: {
     id: 'form_submit_success_warning',
-    defaultMessage: "You've been added to the waiting list",
+    defaultMessage: 'Your registration is on the waiting list.',
   },
   success_warning_description: {
     id: 'form_submit_success_warning_description',
     defaultMessage:
-      "Your data has been submitted, but the subscription limit has been reached and you've been added to the waiting list.",
+      'Your data has been submitted successfully. However, the maximum number of registrations has been reached: your request has been placed on the waiting list.',
   },
   reset: {
     id: 'form_reset',
@@ -56,6 +57,9 @@ const replaceMessage = (text, sent_data) => {
 
 const FormResult = ({ formState, data, resetFormState }) => {
   const intl = useIntl();
+  const displayThankYouInAlertMessageFormBlock =
+    config.settings.siteProperties.displayThankYouInAlertMessageFormBlock;
+
   return (
     <Alert
       color={!formState.warning ? 'success' : 'warning'}
@@ -70,26 +74,29 @@ const FormResult = ({ formState, data, resetFormState }) => {
           : intl.formatMessage(messages.success_warning)}
       </h4>
       <br />
-      {/* Custom message */}
-      {!formState.warning ? (
-        data.send_message && (
-          <>
-            <p
-              dangerouslySetInnerHTML={{
-                __html: replaceMessage(
-                  data.send_message,
-                  formState.result.data,
-                ),
-              }}
-            />
-            <br />
-          </>
-        )
-      ) : (
+      {/* Warning submit limit  */}
+      {formState.warning && (
         <>
           <p>{intl.formatMessage(messages.success_warning_description)}</p>
         </>
       )}
+      {/* Custom message */}
+      {!formState.warning ||
+        (formState.warning &&
+          displayThankYouInAlertMessageFormBlock &&
+          data.send_message && (
+            <>
+              <p
+                dangerouslySetInnerHTML={{
+                  __html: replaceMessage(
+                    data.send_message,
+                    formState.result.data,
+                  ),
+                }}
+              />
+              <br />
+            </>
+          ))}
 
       <Button
         color="primary"