fix: added event form validation before starting workflow to go to en…

…tity createation page from quick create modal. closes #1524
culturecreates · Jan 21, 2025 · e0e7015 · e0e7015
1 parent 9ab9deb
commit e0e7015
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 17 deletions.
diff --git a/src/components/Modal/QuickCreateOrganization/QuickCreateOrganization.jsx b/src/components/Modal/QuickCreateOrganization/QuickCreateOrganization.jsx
@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import CustomModal from '../Common/CustomModal';
+import { CloseCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 import TextButton from '../../Button/Text/Text';
 import { useTranslation } from 'react-i18next';
 import PrimaryButton from '../../Button/Primary/Primary';
-import { Row, Col, Form, Input, notification } from 'antd';
+import { Row, Col, Form, Input, notification, message, Button } from 'antd';
 import ImageUpload from '../../ImageUpload/ImageUpload';
 import StyledInput from '../../Input/Common';
 import { useAddImageMutation } from '../../../services/image';
@@ -42,6 +43,7 @@ function QuickCreateOrganization(props) {
     setSelectedPerformers,
     selectedSupporters,
     setSelectedSupporters,
+    eventForm,
     selectedOrganizerPerformerSupporterType,
     organizerPerformerSupporterTypes,
     saveAsDraftHandler,
@@ -228,10 +230,41 @@ function QuickCreateOrganization(props) {
   };
 
   const goToAddFullDetailsPageHandler = async (e) => {
-    const response = await createOrganizationHandler(false);
-    if (response) {
-      setEvent([e, response]);
-    }
+    eventForm
+      .validateFields([
+        ...new Set([
+          ...(calendarContentLanguage.map((language) => ['name', `${contentLanguageKeyMap[language]}`]) ?? []),
+          'datePicker',
+          'dateRangePicker',
+          'datePickerWrapper',
+          'startDateRecur',
+        ]),
+      ])
+      .then(async () => {
+        const response = await createOrganizationHandler(false);
+        if (response) {
+          setEvent([e, response]);
+        }
+      })
+      .catch((error) => {
+        console.error(error);
+        message.warning({
+          duration: 10,
+          maxCount: 1,
+          key: 'event-save-as-warning',
+          content: (
+            <>
+              {t('dashboard.events.addEditEvent.validations.errorDraft')} &nbsp;
+              <Button
+                type="text"
+                icon={<CloseCircleOutlined style={{ color: '#222732' }} />}
+                onClick={() => message.destroy('event-save-as-warning')}
+              />
+            </>
+          ),
+          icon: <ExclamationCircleOutlined />,
+        });
+      });
   };
 
   return (

diff --git a/src/components/Modal/QuickCreatePerson/QuickCreatePerson.jsx b/src/components/Modal/QuickCreatePerson/QuickCreatePerson.jsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
 import './quickCreatePerson.css';
-import { CloseCircleOutlined } from '@ant-design/icons';
+import { CloseCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 import CustomModal from '../Common/CustomModal';
 import TextButton from '../../Button/Text/Text';
 import { useTranslation } from 'react-i18next';
 import PrimaryButton from '../../Button/Primary/Primary';
-import { Row, Col, Form, Input, notification } from 'antd';
+import { Row, Col, Form, Input, notification, Button, message } from 'antd';
 import StyledInput from '../../Input/Common';
 import { treeEntitiesOption, treeTaxonomyOptions } from '../../TreeSelectOption/treeSelectOption.settings';
 import { useSelector } from 'react-redux';
@@ -43,6 +43,7 @@ function QuickCreatePerson(props) {
     setSelectedOrganizers,
     selectedOrganizers,
     selectedPerformers,
+    eventForm,
     setSelectedPerformers,
     selectedSupporters,
     setSelectedSupporters,
@@ -198,10 +199,41 @@ function QuickCreatePerson(props) {
   };
 
   const goToAddFullDetailsPageHandler = async (e) => {
-    const response = await createPersonHandler(false);
-    if (response) {
-      setEvent([e, response]);
-    }
+    eventForm
+      .validateFields([
+        ...new Set([
+          ...(calendarContentLanguage.map((language) => ['name', `${contentLanguageKeyMap[language]}`]) ?? []),
+          'datePicker',
+          'dateRangePicker',
+          'datePickerWrapper',
+          'startDateRecur',
+        ]),
+      ])
+      .then(async () => {
+        const response = await createPersonHandler(false);
+        if (response) {
+          setEvent([e, response]);
+        }
+      })
+      .catch((error) => {
+        console.error(error);
+        message.warning({
+          duration: 10,
+          maxCount: 1,
+          key: 'event-save-as-warning',
+          content: (
+            <>
+              {t('dashboard.events.addEditEvent.validations.errorDraft')} &nbsp;
+              <Button
+                type="text"
+                icon={<CloseCircleOutlined style={{ color: '#222732' }} />}
+                onClick={() => message.destroy('event-save-as-warning')}
+              />
+            </>
+          ),
+          icon: <ExclamationCircleOutlined />,
+        });
+      });
   };
 
   return (

diff --git a/src/components/Modal/QuickCreatePlace/QuickCreatePlace.jsx b/src/components/Modal/QuickCreatePlace/QuickCreatePlace.jsx
@@ -4,9 +4,9 @@ import CustomModal from '../Common/CustomModal';
 import TextButton from '../../Button/Text/Text';
 import { useTranslation } from 'react-i18next';
 import PrimaryButton from '../../Button/Primary/Primary';
-import { Row, Col, Form, Input, notification, Dropdown } from 'antd';
+import { Row, Col, Form, Input, notification, Dropdown, message, Button } from 'antd';
 import PlacesAutocomplete, { geocodeByAddress, getLatLng } from 'react-places-autocomplete';
-import { CloseCircleOutlined, SearchOutlined } from '@ant-design/icons';
+import { CloseCircleOutlined, SearchOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 import { contentLanguageKeyMap } from '../../../constants/contentLanguage';
 import { treeTaxonomyOptions } from '../../TreeSelectOption/treeSelectOption.settings';
 import { useSelector } from 'react-redux';
@@ -282,10 +282,41 @@ function QuickCreatePlace(props) {
   };
 
   const goToAddFullDetailsPageHandler = async (e) => {
-    const response = await createPlaceHandler(false);
-    if (response) {
-      setEvent([e, response]);
-    }
+    eventForm
+      .validateFields([
+        ...new Set([
+          ...(calendarContentLanguage.map((language) => ['name', `${contentLanguageKeyMap[language]}`]) ?? []),
+          'datePicker',
+          'dateRangePicker',
+          'datePickerWrapper',
+          'startDateRecur',
+        ]),
+      ])
+      .then(async () => {
+        const response = await createPlaceHandler(false);
+        if (response) {
+          setEvent([e, response]);
+        }
+      })
+      .catch((error) => {
+        console.error(error);
+        message.warning({
+          duration: 10,
+          maxCount: 1,
+          key: 'event-save-as-warning',
+          content: (
+            <>
+              {t('dashboard.events.addEditEvent.validations.errorDraft')} &nbsp;
+              <Button
+                type="text"
+                icon={<CloseCircleOutlined style={{ color: '#222732' }} />}
+                onClick={() => message.destroy('event-save-as-warning')}
+              />
+            </>
+          ),
+          icon: <ExclamationCircleOutlined />,
+        });
+      });
   };
 
   return (

diff --git a/src/pages/Dashboard/AddEvent/AddEvent.jsx b/src/pages/Dashboard/AddEvent/AddEvent.jsx
@@ -3064,6 +3064,7 @@ function AddEvent() {
                 )}
                 <QuickCreatePlace
                   open={quickCreatePlaceModal}
+                  validateFields={validateFields}
                   setOpen={setQuickCreatePlaceModal}
                   calendarId={calendarId}
                   keyword={quickCreateKeyword}
@@ -3433,6 +3434,7 @@ function AddEvent() {
                 />
                 <QuickCreateOrganization
                   open={quickCreateOrganizerModal}
+                  validateFields={validateFields}
                   setOpen={setQuickCreateOrganizerModal}
                   calendarId={calendarId}
                   keyword={quickCreateKeyword}
@@ -3448,14 +3450,17 @@ function AddEvent() {
                   selectedOrganizerPerformerSupporterType={selectedOrganizerPerformerSupporterType}
                   organizerPerformerSupporterTypes={organizerPerformerSupporterTypes}
                   saveAsDraftHandler={saveAsDraftHandler}
+                  eventForm={form}
                   setLoaderModalOpen={setLoaderModalOpen}
                   loaderModalOpen={loaderModalOpen}
                   setShowDialog={setShowDialog}
                 />
                 <QuickCreatePerson
                   open={quickCreatePersonModal}
+                  validateFields={validateFields}
                   setOpen={setQuickCreatePersonModal}
                   calendarId={calendarId}
+                  eventForm={form}
                   keyword={quickCreateKeyword}
                   setKeyword={setQuickCreateKeyword}
                   interfaceLanguage={user?.interfaceLanguage?.toLowerCase()}