Remove field group (#539)

* Add x button for field group

* Fix formatter issues

* Add x icon

* Run formatter

* Translate alt tag

* Use splice instead of loop

* Run formatter

Author: mattwalo32

frontend/.eslintrc.json

@@ -20,8 +20,10 @@
         "react/forbid-prop-types": "off",
         "jsx-a11y/click-events-have-key-events": "off",
         "jsx-a11y/no-static-element-interactions": "off",
+        "jsx-a11y/no-noninteractive-element-interactions": "off",
         "no-use-before-define": "off",
         "no-plusplus": "off",
+        "no-continue": "off",
         "no-underscore-dangle": ["error", { "allow": ["_id"] }],
         "import/order": [
             "warn",

frontend/src/assets/x-icon.png

@@ -1,12 +1,15 @@
 /* eslint import/no-cycle: "off" */
 // Unfortunately, there has to be an import cycle, because this is by nature, recursive
-import React from 'react';
-import PropTypes from 'prop-types';
 import { Button } from '@material-ui/core';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React from 'react';
+import swal from 'sweetalert';
 
+import XIcon from '../../assets/x-icon.png';
+import { useTranslations } from '../../hooks/useTranslations';
 import StepField from '../StepField/StepField';
 import './Fields.scss';
-import { useTranslations } from '../../hooks/useTranslations';
 
 const FieldGroup = ({
     isDisabled,
@@ -53,6 +56,29 @@ const FieldGroup = ({
         handleSimpleUpdate(getKeyBase(getNumFields()), {});
     };
 
+    const onRemoveGroup = (groupNumber) => {
+        if (isDisabled) return;
+
+        swal({
+            title: translations.components.button.discard.question,
+            text: translations.components.button.discard.warningMessage,
+            icon: 'warning',
+            dangerMode: true,
+            buttons: [
+                translations.components.button.discard.cancelButton,
+                translations.components.button.discard.confirmButton,
+            ],
+        }).then((isDeleteConfirmed) => {
+            if (isDeleteConfirmed) doRemoveGroup(groupNumber);
+        });
+    };
+
+    const doRemoveGroup = (groupNumber) => {
+        const newData = _.cloneDeep(value);
+        newData.splice(groupNumber, 1);
+        handleSimpleUpdate(metadata.key, newData);
+    };
+
     const generateSingleGroup = (index) => {
         return metadata?.subFields?.map((field) => {
             return (
@@ -85,6 +111,24 @@ const FieldGroup = ({
         });
     };
 
+    const generateHeader = (groupNumber, displayName) => {
+        const buttonClass = `button-${isDisabled ? 'disabled' : 'active'}`;
+
+        return (
+            <div
+                className={`group-title-container-base group-title-container-${selectedLang}`}
+            >
+                <img
+                    src={XIcon}
+                    alt={translations.components.button.discard}
+                    className={`xicon-base xicon-${selectedLang} ${buttonClass}`}
+                    onClick={() => onRemoveGroup(groupNumber)}
+                />
+                <h3 key={displayName}>{displayName}</h3>
+            </div>
+        );
+    };
+
     const generateAllGroups = () => {
         const numFieldGroups = getNumFields();
         const groups = [];
@@ -93,7 +137,7 @@ const FieldGroup = ({
             const displayName = `${metadata?.displayName[selectedLang]} ${
                 i + 1
             }`;
-            groups.push(<h3 key={displayName}>{displayName}</h3>);
+            groups.push(generateHeader(i, displayName));
             groups.push(generateSingleGroup(i));
         }
 

frontend/src/components/Fields/FieldGroup.js

@@ -1,6 +1,41 @@
 @import '../../styles/colors.scss';
 @import '../../styles/variables.scss';
 
+.xicon-base {
+    width: 20px;
+    height: 20px;
+    align-self: flex-end;
+}
+
+.button-disabled {
+    opacity: 0.5;
+}
+
+.button-active:hover {
+    opacity: 0.5;
+}
+
+.xicon-EN {
+    margin-right: 10px;
+}
+
+.xicon-AR {
+    margin-left: 10px;
+}
+
+.group-title-container-base {
+    display: flex;
+    margin-left: -30px;
+}
+
+.group-title-container-AR {
+    margin-left: -30px;
+}
+
+.group-title-container-EN {
+    margin-right: -30px;
+}
+
 .datepicker {
     padding: 18.5px 14px;
     font-size: 1em;