feat: add export/clear buttons

collective · Mar 12, 2021 · 9dc8545 · 9dc8545
1 parent b27b736
commit 9dc8545
Show file tree

Hide file tree

Showing 12 changed files with 425 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "volto-subblocks"
   ],
   "dependencies": {
+    "file-saver": "^2.0.5",
     "react-google-recaptcha-v3": "^1.8.0",
     "volto-subblocks": "collective/volto-subblocks#v1.0.1"
   }

diff --git a/src/actions/index.js b/src/actions/index.js
@@ -27,3 +27,51 @@ export function submitForm(path = '', block_id, data, attachments) {
     },
   };
 }
+
+/**
+ * exportCsvFormData action
+ * @modulee actions/exportCsvFormData
+ */
+export const EXPORT_CSV_FORMDATA = 'EXPORT_CSV_FORMDATA';
+
+export function exportCsvFormData(path = '') {
+  return {
+    type: EXPORT_CSV_FORMDATA,
+    request: {
+      op: 'get',
+      path: path + '/@form-data-export',
+    },
+  };
+}
+
+/**
+ * getFormData action
+ * @modulee actions/getFormData
+ */
+export const GET_FORM_DATA = 'GET_FORMDATA';
+
+export function getFormData(path = '') {
+  return {
+    type: GET_FORM_DATA,
+    request: {
+      op: 'get',
+      path: path + '/@form-data',
+    },
+  };
+}
+
+/**
+ * clearFormData action
+ * @modulee actions/getFormData
+ */
+export const CLEAR_FORM_DATA = 'CLEAR_FORM_DATA';
+
+export function clearFormData(path = '') {
+  return {
+    type: CLEAR_FORM_DATA,
+    request: {
+      op: 'get',
+      path: path + '/@form-data-clear',
+    },
+  };
+}
diff --git a/src/components/Edit.jsx b/src/components/Edit.jsx
@@ -1,15 +1,14 @@
 import React from 'react';
-import EditBlock from './EditBlock';
-
 import { Segment, Grid, Form, Button } from 'semantic-ui-react';
 import {
   withDNDContext,
   SubblocksEdit,
   SubblocksWrapper,
 } from 'volto-subblocks';
-
 import { SidebarPortal } from '@plone/volto/components';
-import Sidebar from './Sidebar.jsx';
+
+import EditBlock from 'volto-form-block/components/EditBlock';
+import Sidebar from 'volto-form-block/components/Sidebar';
 
 import { defineMessages } from 'react-intl';
 

diff --git a/src/components/EditBlock.jsx b/src/components/EditBlock.jsx
@@ -8,7 +8,7 @@ import { compose } from 'redux';
 
 import { DNDSubblocks, SubblockEdit, Subblock } from 'volto-subblocks';
 
-import Field from './Field';
+import Field from 'volto-form-block/components/Field';
 import { getFieldName } from './utils';
 
 /**
@@ -52,6 +52,7 @@ class EditBlock extends SubblockEdit {
             key={this.props.data.index}
             isOnEdit={true}
             id={id}
+            field_id={id}
             index={this.props.data.index}
             onChange={() => {}}
           />

diff --git a/src/components/Field.jsx b/src/components/Field.jsx
@@ -8,8 +8,8 @@ import EmailWidget from '@plone/volto/components/manage/Widgets/EmailWidget';
 import CheckboxWidget from '@plone/volto/components/manage/Widgets/CheckboxWidget';
 import { DatetimeWidget } from '@plone/volto/components';
 
-import RadioWidget from './Widget/RadioWidget';
-import FileWidget from './Widget/FileWidget';
+import RadioWidget from 'volto-form-block/components/Widget/RadioWidget';
+import FileWidget from 'volto-form-block/components/Widget/FileWidget';
 
 const messages = defineMessages({
   select_a_value: {

diff --git a/src/components/Form.jsx b/src/components/Form.jsx
@@ -2,9 +2,9 @@ import React, { useState, useEffect, useReducer } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { useIntl, defineMessages } from 'react-intl';
-import { submitForm } from '../actions';
-import { getFieldName } from './utils';
-import FormView from './FormView';
+import { submitForm } from 'volto-form-block/actions';
+import { getFieldName } from 'volto-form-block/components/utils';
+import FormView from 'volto-form-block/components/FormView';
 
 const messages = defineMessages({
   messageSent: {
@@ -60,10 +60,10 @@ const Form = ({ data, id, path }) => {
 
   const [formState, setFormState] = useReducer(formStateReducer, initialState);
   const [formErrors, setFormErrors] = useState([]);
-  const submitResults = useSelector((state) => state.sendActionForm);
+  const submitResults = useSelector((state) => state.submitForm);
 
-  const onChangeFormData = (field, value, label) => {
-    setFormData({ field: field, value: { value: value, label: label } });
+  const onChangeFormData = (field_id, field, value, label) => {
+    setFormData({ field, value: { field_id, value, label } });
   };
 
   useEffect(() => {
@@ -98,6 +98,7 @@ const Form = ({ data, id, path }) => {
       data.subblocks.forEach((subblock, index) => {
         let name = getFieldName(subblock.label);
         if (formData[name]?.value) {
+          formData[name].field_id = subblock.field_id;
           const isAttachment = subblock.field_type === 'attachment';
 
           if (isAttachment) {
@@ -111,7 +112,7 @@ const Form = ({ data, id, path }) => {
           path,
           id,
           Object.keys(formData).map((name) => ({
-            id: name,
+            field_id: formData[name].field_id,
             label: formData[name].label,
             value: formData[name].value,
           })),

diff --git a/src/components/FormView.jsx b/src/components/FormView.jsx
@@ -9,8 +9,8 @@ import {
   Progress,
   Button,
 } from 'semantic-ui-react';
-import { getFieldName } from './utils';
-import Field from './Field';
+import { getFieldName } from 'volto-form-block/components/utils';
+import Field from 'volto-form-block/components/Field';
 
 const messages = defineMessages({
   default_submit_label: {
@@ -94,7 +94,12 @@ const FormView = ({
                           {...subblock}
                           name={name}
                           onChange={(field, value) =>
-                            onChangeFormData(field, value, subblock.label)
+                            onChangeFormData(
+                              subblock.id,
+                              field,
+                              value,
+                              subblock.label,
+                            )
                           }
                           value={formData[name]?.value}
                           valid={isValidField(name)}

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
@@ -1,6 +1,16 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Segment, Accordion, Form } from 'semantic-ui-react';
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  Segment,
+  Accordion,
+  Form,
+  Button,
+  Grid,
+  Confirm,
+  Dimmer,
+  Loader,
+} from 'semantic-ui-react';
 import {
   defineMessages,
   useIntl,
@@ -18,6 +28,14 @@ import {
 
 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 {
+  getFormData,
+  exportCsvFormData,
+  clearFormData,
+} from 'volto-form-block/actions';
 
 const messages = defineMessages({
   default_to: {
@@ -102,18 +120,31 @@ const messages = defineMessages({
     defaultMessage:
       'Questo indirizzo verrà utilizzato come mittente della mail con i dati del form',
   },
-  save_persistent_data: {
+  store: {
     id: 'form_save_persistent_data',
     defaultMessage: 'Salva i dati compilati',
   },
-  send_email: {
+  send: {
     id: 'form_send_email',
     defaultMessage: 'Invia email al destinatario',
   },
+  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',
+  },
 });
 
 const Sidebar = ({
   data,
+  properties,
   block,
   onChangeBlock,
   onChangeSubBlock,
@@ -122,12 +153,28 @@ const Sidebar = ({
   openObjectBrowser,
 }) => {
   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(properties['@id']));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [clearFormDataState]);
 
   if (data.send_email === undefined) data.send_email = true;
 
+  data.subblocks &&
+    data.subblocks.forEach((subblock) => {
+      subblock.field_id = subblock.id;
+    });
+
   return (
     <Form>
-      <Segment.Group raised form>
+      <Segment.Group raised>
         <header className="header pulled">
           <h2>
             <FormattedMessage id="Form" defaultMessage="Form" />
@@ -186,10 +233,10 @@ const Sidebar = ({
           />
 
           <CheckboxWidget
-            id="save_persistent_data"
-            title={intl.formatMessage(messages.save_persistent_data)}
+            id="store"
+            title={intl.formatMessage(messages.store)}
             required={false}
-            value={data.save_persistent_data ?? false}
+            value={data.store ?? false}
             onChange={(name, value) => {
               onChangeBlock(block, {
                 ...data,
@@ -198,17 +245,78 @@ const Sidebar = ({
             }}
           />
           <CheckboxWidget
-            id="send_email"
-            title={intl.formatMessage(messages.send_email)}
+            id="send"
+            title={intl.formatMessage(messages.send)}
             required={false}
-            value={data.send_email ?? false}
+            value={data.send ?? false}
             onChange={(name, value) => {
               onChangeBlock(block, {
                 ...data,
                 [name]: value,
               });
             }}
           />
+
+          {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(
+                            properties['@id'],
+                            `export-${properties.id ?? 'form'}.csv`,
+                          ),
+                        )
+                      }
+                      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}
+                      onCancel={() => setConfirmOpen(false)}
+                      onConfirm={() => {
+                        dispatch(clearFormData(properties['@id']));
+                        setConfirmOpen(false);
+                      }}
+                    />
+                  </Grid.Column>
+                </Grid.Row>
+              </Grid>
+            </Form.Field>
+          )}
         </Segment>
         <Accordion fluid styled className="form">
           {data.subblocks &&

diff --git a/src/components/View.jsx b/src/components/View.jsx
@@ -6,7 +6,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
-import Form from './Form';
+import Form from 'volto-form-block/components/Form';
 
 /**
  * View blocks class.