feat: adding the discard modal

virtualidentityag · Dec 7, 2022 · 4e0a1a5 · 4e0a1a5
1 parent b86d456
commit 4e0a1a5
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 2 deletions.
diff --git a/src/components/CardEditable/components/UnsavedChanges/index.tsx b/src/components/CardEditable/components/UnsavedChanges/index.tsx
@@ -0,0 +1,26 @@
+import { Modal } from 'antd';
+import { useTranslation } from 'react-i18next';
+import Title from 'antd/lib/typography/Title';
+
+export interface UnsavedChangesProps {
+    onConfirm: () => void;
+    onClose: () => void;
+}
+
+export const UnsavedChangesModal = ({ onConfirm, onClose }: UnsavedChangesProps) => {
+    const { t } = useTranslation();
+
+    return (
+        <Modal
+            title={<Title level={2}>{t('overlay.unsaved.title')}</Title>}
+            open
+            onOk={onConfirm}
+            onCancel={onClose}
+            cancelText={t('overlay.unsaved.cancel')}
+            centered
+            okText={t('overlay.unsaved.confirm')}
+        >
+            {t('overlay.unsaved.text')}
+        </Modal>
+    );
+};
diff --git a/src/components/CardEditable/index.tsx b/src/components/CardEditable/index.tsx
@@ -9,6 +9,7 @@ import Pencil from '../CustomIcons/Pencil';
 import { Tooltip } from '../tooltip/Tooltip';
 import styles from './styles.module.scss';
 import { ReactComponent as InfoIcon } from '../../resources/img/svg/i.svg';
+import { UnsavedChangesModal } from './components/UnsavedChanges';
 
 interface CardEditableProps {
     className?: string;
@@ -24,9 +25,11 @@ interface CardEditableProps {
     formProp?: FormInstance;
     onAddMode?: boolean;
     tooltip?: React.ReactChild;
+    allowUnsavedChanges?: boolean;
 }
 
 export const CardEditable = ({
+    allowUnsavedChanges,
     className,
     isLoading,
     initialValues,
@@ -41,6 +44,9 @@ export const CardEditable = ({
     const [form] = Form.useForm(formProp);
     const { t } = useTranslation();
     const [editing, setEditing] = useState(onAddMode);
+    const [hasChanges, setHasChanges] = useState(false);
+    const [showUnsavedChangesModal, setShowUnsavedChangesModal] = useState(false);
+
     const cancelEditButton: ButtonItem = {
         label: t('agency.edit.general.general_information.cancel'),
         type: BUTTON_TYPES.LINK,
@@ -55,6 +61,7 @@ export const CardEditable = ({
         (formData) => {
             onSave(formData);
             setEditing(false);
+            setHasChanges(false);
         },
         [onSave],
     );
@@ -85,6 +92,7 @@ export const CardEditable = ({
                         labelWrap
                         layout="vertical"
                         form={form}
+                        onValuesChange={() => setHasChanges(true)}
                         onFinish={onFormSubmit}
                         disabled={!editing}
                         initialValues={initialValues}
@@ -99,13 +107,27 @@ export const CardEditable = ({
                     <Button
                         item={cancelEditButton}
                         buttonHandle={() => {
-                            form.resetFields();
-                            setEditing(false);
+                            if (allowUnsavedChanges && hasChanges) {
+                                setShowUnsavedChangesModal(true);
+                            } else {
+                                form.resetFields();
+                                setEditing(false);
+                            }
                         }}
                     />
                     <Button item={saveEditButton} buttonHandle={() => form.submit()} />
                 </div>
             )}
+            {allowUnsavedChanges && showUnsavedChangesModal && (
+                <UnsavedChangesModal
+                    onConfirm={() => setShowUnsavedChangesModal(false)}
+                    onClose={() => {
+                        form.resetFields();
+                        setEditing(false);
+                        setShowUnsavedChangesModal(false);
+                    }}
+                />
+            )}
         </Box>
     );
 };
diff --git a/src/locales/de/translation.json b/src/locales/de/translation.json
@@ -352,6 +352,10 @@
     "twoFactorAuth.switch.type.EMAIL": "E-Mail",
     "twoFactorAuth.switch.type.APP": "App",
     "overlay.step.headline.prefix": ". Schritt | ",
+    "overlay.unsaved.title": "Änderungen verwerfen?",
+    "overlay.unsaved.text": "Es sind ungespeicherte Änderungen vorhanden. Wollen Sie diese verwerfen und Ihre Bearbeitung ohne zu Speichern beenden?",
+    "overlay.unsaved.cancel": "Abbrechen",
+    "overlay.unsaved.confirm": "Verwerfen",
     "topic": "Thema",
     "topics.title": "Themen",
     "topics.title.text": "Erstellen und bearbeiten Sie Themen",

diff --git a/src/pages/TenantSettings/LegalSettings/components/LegalText/index.tsx b/src/pages/TenantSettings/LegalSettings/components/LegalText/index.tsx
@@ -29,6 +29,7 @@ export const LegalText = ({ fieldName, titleKey, subTitle, placeHolderKey, showC
     return (
         <>
             <CardEditable
+                allowUnsavedChanges
                 isLoading={isLoading}
                 initialValues={{ ...data }}
                 titleKey={titleKey}