Merge pull request #1540 from culturecreates/develop

Develop
culturecreates · Jan 20, 2025 · 53e5a31 · 53e5a31
2 parents 0afdae6 + 3b1964d
commit 53e5a31
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 27 deletions.
diff --git a/src/layout/CreateMultiLingualFormItems/CreateMultiLingualFormItems.jsx b/src/layout/CreateMultiLingualFormItems/CreateMultiLingualFormItems.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { contentLanguageKeyMap } from '../../constants/contentLanguage';
 import { Form } from 'antd';
 import { useTranslation } from 'react-i18next';
@@ -26,22 +26,26 @@ import MultilingualInput from '../../components/MultilingualInput';
 
 const CreateMultiLingualFormItems = ({ children, ...rest }) => {
   const { calendarContentLanguage, form, name, data, required, validations, dataCy, placeholder, entityId } = rest;
+  Form.useWatch(name[0], form);
   const { t } = useTranslation();
 
-  // State to track dirty fields
-  const [isFieldDirty, setIsFieldDirty] = useState({});
-
+  let isFieldDirty = {}; // to keep track of dirty fields
   let dataCyCollection = [];
   let placeholderCollection = [];
 
-  const formItemList = calendarContentLanguage.map((language) => {
+  calendarContentLanguage.forEach((language) => {
     const lanKey = contentLanguageKeyMap[language];
+    const fieldName = name.concat([lanKey]);
+    isFieldDirty[lanKey] = form.isFieldTouched(fieldName);
+  });
+
+  const formItemList = calendarContentLanguage.map((language) => {
     const dependencies = calendarContentLanguage // dependencies for each form item
       .filter((lan) => lan !== language)
       .map((lan) => [name, contentLanguageKeyMap[lan]]);
 
     dataCyCollection.push(`${dataCy}${language.toLowerCase()}`);
-    placeholderCollection.push(placeholder[lanKey] ?? '');
+    placeholderCollection.push(placeholder[contentLanguageKeyMap[language]] ?? '');
 
     const validationRules = required // validation rules for each form item
       ? [
@@ -62,21 +66,11 @@ const CreateMultiLingualFormItems = ({ children, ...rest }) => {
 
     return (
       <Form.Item
-        name={[`${name}`, lanKey]}
+        name={[`${name}`, contentLanguageKeyMap[language]]}
         key={language}
         dependencies={dependencies}
-        initialValue={data?.[lanKey]}
-        rules={validationRules}
-        shouldUpdate={() => {
-          const updatedIsFieldDirty = {};
-          calendarContentLanguage.forEach((language) => {
-            const lanKey = contentLanguageKeyMap[language];
-            const fieldName = name.concat([lanKey]);
-            updatedIsFieldDirty[lanKey] = form.isFieldTouched(fieldName);
-          });
-          setIsFieldDirty(updatedIsFieldDirty);
-          return true;
-        }}>
+        initialValue={data?.[contentLanguageKeyMap[language]]}
+        rules={validationRules}>
         {children}
       </Form.Item>
     );

diff --git a/src/locales/en/translationEn.json b/src/locales/en/translationEn.json
@@ -500,7 +500,13 @@
         "location": "Location",
         "edit": "Edit",
         "Edit": "Edit",
-        "socialMediaLinks": "Social media links"
+        "socialMediaLinks": "Social media links",
+        "image": {
+          "image": "Image",
+          "mainImage": "Main image",
+          "additionalImages": "Additional images"
+        },
+        "logo": "Logo"
       },
       "createNew": {
         "search": {

diff --git a/src/locales/fr/transalationFr.json b/src/locales/fr/transalationFr.json
@@ -499,7 +499,13 @@
         "memberOf": "Membre de",
         "location": "Endroit",
         "edit": "Éditer",
-        "socialMediaLinks": "Liens vers les réseaux sociaux"
+        "socialMediaLinks": "Liens vers les réseaux sociaux",
+        "image": {
+          "image": "Image",
+          "mainImage": "Image principale",
+          "additionalImages": "Images supplémentaires"
+        },
+        "logo": "Logo"
       },
       "createNew": {
         "search": {

diff --git a/src/pages/Dashboard/OrganizationsReadOnly/OrganizationsReadOnly.jsx b/src/pages/Dashboard/OrganizationsReadOnly/OrganizationsReadOnly.jsx
@@ -418,17 +418,36 @@ function OrganizationsReadOnly() {
                                 ))}
                             </Col>
                           )}
+                          {checkIfFieldIsToBeDisplayed(organizationFormFieldNames.LOGO, organizationData?.logo) &&
+                            organizationData?.logo?.large?.uri && (
+                              <div>
+                                <p className="read-only-event-content-sub-title-primary">
+                                  {t('dashboard.organization.readOnly.logo')}
+                                </p>
+                                <ImageUpload
+                                  imageUrl={organizationData?.logo?.large?.uri}
+                                  imageReadOnly={true}
+                                  preview={true}
+                                  eventImageData={organizationData?.logo?.large}
+                                />
+                              </div>
+                            )}
                           {checkIfFieldIsToBeDisplayed(
                             organizationFormFieldNames.IMAGE,
                             organizationData?.image?.find((image) => image?.isMain),
                           ) &&
                             organizationData?.image?.find((image) => image?.isMain)?.large?.uri && (
-                              <ImageUpload
-                                imageUrl={organizationData?.image?.find((image) => image?.isMain)?.large?.uri}
-                                imageReadOnly={true}
-                                preview={true}
-                                eventImageData={organizationData?.image?.find((image) => image?.isMain)?.large}
-                              />
+                              <div>
+                                <p className="read-only-event-content-sub-title-primary">
+                                  {t('dashboard.organization.readOnly.image.mainImage')}
+                                </p>
+                                <ImageUpload
+                                  imageUrl={organizationData?.image?.find((image) => image?.isMain)?.large?.uri}
+                                  imageReadOnly={true}
+                                  preview={true}
+                                  eventImageData={organizationData?.image?.find((image) => image?.isMain)?.large}
+                                />
+                              </div>
                             )}
                           {checkIfFieldIsToBeDisplayed(
                             organizationFormFieldNames.IMAGE,

diff --git a/src/pages/Dashboard/PersonReadOnly/PersonReadOnly.jsx b/src/pages/Dashboard/PersonReadOnly/PersonReadOnly.jsx
@@ -39,6 +39,7 @@ import { isDataValid } from '../../../utils/MultiLingualFormItemSupportFunctions
 import { personFormFieldNames } from '../../../constants/personAndOrganizationFormFieldNames';
 import { adminCheckHandler } from '../../../utils/adminCheckHandler';
 import { getCurrentCalendarDetailsFromUserDetails } from '../../../utils/getCurrentCalendarDetailsFromUserDetails';
+import ImageUpload from '../../../components/ImageUpload';
 
 function PersonReadOnly() {
   const { t } = useTranslation();
@@ -469,6 +470,20 @@ function PersonReadOnly() {
                                     ))}
                                 </Col>
                               )}
+                              {checkIfFieldIsToBeDisplayed(personFormFieldNames.IMAGE, mainImageData) &&
+                                mainImageData?.large?.uri && (
+                                  <div>
+                                    <p className="read-only-event-content-sub-title-primary">
+                                      {t('dashboard.organization.readOnly.image.mainImage')}
+                                    </p>
+                                    <ImageUpload
+                                      imageUrl={mainImageData?.large?.uri}
+                                      imageReadOnly={true}
+                                      preview={true}
+                                      eventImageData={mainImageData?.large}
+                                    />
+                                  </div>
+                                )}
                               {imageConfig.enableGallery && imageGalleryData?.length > 0 && (
                                 <Col span={24}>
                                   <p className="read-only-event-content-sub-title-primary">

diff --git a/src/pages/Dashboard/PlaceReadOnly/PlaceReadOnly.jsx b/src/pages/Dashboard/PlaceReadOnly/PlaceReadOnly.jsx
@@ -42,6 +42,7 @@ import { isDataValid } from '../../../utils/MultiLingualFormItemSupportFunctions
 import { placeFormRequiredFieldNames } from '../../../constants/placeFormRequiredFieldNames';
 import { adminCheckHandler } from '../../../utils/adminCheckHandler';
 import { getCurrentCalendarDetailsFromUserDetails } from '../../../utils/getCurrentCalendarDetailsFromUserDetails';
+import ImageUpload from '../../../components/ImageUpload';
 
 function PlaceReadOnly() {
   const { t } = useTranslation();
@@ -482,6 +483,20 @@ function PlaceReadOnly() {
                                 )}
                               </Col>
                             )}
+                            {checkIfFieldIsToBeDisplayed(placeFormRequiredFieldNames.IMAGE, mainImageData) &&
+                              mainImageData?.large?.uri && (
+                                <div>
+                                  <p className="read-only-event-content-sub-title-primary">
+                                    {t('dashboard.organization.readOnly.image.mainImage')}
+                                  </p>
+                                  <ImageUpload
+                                    imageUrl={mainImageData?.large?.uri}
+                                    imageReadOnly={true}
+                                    preview={true}
+                                    eventImageData={mainImageData?.large}
+                                  />
+                                </div>
+                              )}
                             {imageGalleryData?.length > 0 && imageConfig.enableGallery && (
                               <Col span={24}>
                                 <div>