Merge pull request #1206 from culturecreates/develop

Develop
culturecreates · Jul 4, 2024 · 3c5a921 · 3c5a921
2 parents d8e9221 + f29c76d
commit 3c5a921
Show file tree

Hide file tree

Showing 18 changed files with 477 additions and 226 deletions.
diff --git a/src/components/Card/MandatoryField/MandatoryField.jsx b/src/components/Card/MandatoryField/MandatoryField.jsx
@@ -34,7 +34,7 @@ function MandatoryField(props) {
 
       setAddedFields(updatedFields);
       setAvailableFields([...availableFields, removedField]);
-      setDirtyStatus();
+      setDirtyStatus(true);
     }
   };
 
@@ -54,7 +54,7 @@ function MandatoryField(props) {
     });
     setAddedFields([...addedFields, { ...field, isRequiredField: true }]);
     setAvailableFields(updatedFields);
-    setDirtyStatus();
+    setDirtyStatus(true);
   };
 
   useEffect(() => {

diff --git a/src/components/ImageUpload/ImageUpload.jsx b/src/components/ImageUpload/ImageUpload.jsx
@@ -107,6 +107,9 @@ function ImageUpload(props) {
   };
 
   const onRemove = () => {
+    form.setFieldsValue({
+      imageCrop: null,
+    });
     setImageUrl(false);
   };
 

diff --git a/src/components/MultipleImageUpload/MultipleImageUpload.jsx b/src/components/MultipleImageUpload/MultipleImageUpload.jsx
@@ -1,5 +1,5 @@
-import { DownloadOutlined, DeleteOutlined } from '@ant-design/icons';
-import { Tooltip, Upload, message } from 'antd';
+import { DownloadOutlined, DeleteOutlined, HolderOutlined } from '@ant-design/icons';
+import { Upload, message } from 'antd';
 import update from 'immutability-helper';
 import React, { useCallback, useRef, useState } from 'react';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
@@ -8,8 +8,10 @@ import { useTranslation } from 'react-i18next';
 import Outlined from '../Button/Outlined';
 const type = 'DragableUploadList';
 import './multipleImageUpload.css';
+import { getWidthFromAspectRatio } from '../../utils/getWidthFromAspectRatio';
+import { useOutletContext } from 'react-router-dom';
 
-const DragableUploadListItem = ({ originNode, moveRow, file, fileList }) => {
+const DragableUploadListItem = ({ moveRow, file, fileList, actions, width }) => {
   const ref = useRef(null);
 
   const index = fileList.indexOf(file);
@@ -39,15 +41,50 @@ const DragableUploadListItem = ({ originNode, moveRow, file, fileList }) => {
     }),
   });
   drop(drag(ref));
-  const errorNode = <Tooltip title="Upload Error">{originNode.props.children}</Tooltip>;
+  // const errorNode = <Tooltip title="Upload Error">{originNode.props.children}</Tooltip>;
   return (
     <div
       ref={ref}
       className={`ant-upload-draggable-list-item ${isOver ? dropClassName : ''}`}
       style={{
         cursor: 'grab',
       }}>
-      {file.status === 'error' ? errorNode : originNode}
+      <span className="image-footer">
+        <span className="image-contents">
+          <span className="image-actions">
+            <span
+              onClick={actions?.download}
+              data-cy="span-download-image"
+              style={{
+                cursor: 'grab',
+              }}>
+              <HolderOutlined style={{ color: '#1B3DE6', fontWeight: '600', fontSize: '22px' }} />
+            </span>
+          </span>
+          <img
+            className="image-thumbnail"
+            src={file?.url ?? file?.thumbUrl}
+            style={{
+              width: width ? `${width}px` : 'auto',
+              minWidth: width ? `${width}px` : 'none',
+            }}
+          />
+          <a
+            className="image-name"
+            target="_blank"
+            rel="noopener noreferrer"
+            href={file?.url}
+            data-cy="anchor-image-link">
+            {file?.name}
+          </a>
+        </span>
+        <span className="image-actions">
+          <span onClick={actions?.remove} data-cy="span-download-image">
+            <DeleteOutlined style={{ color: '#1B3DE6', fontWeight: '600', fontSize: '16px' }} />
+          </span>
+        </span>
+      </span>
+      {/* {file.status === 'error' ? errorNode : originNode} */}
     </div>
   );
 };
@@ -63,8 +100,9 @@ const getBase64 = (img, callback) => {
   });
 };
 const MultipleImageUpload = (props) => {
-  const { eventImageData, form, imageReadOnly } = props;
+  const { eventImageData, form, imageReadOnly, setShowDialog } = props;
   const { t } = useTranslation();
+  const [currentCalendarData] = useOutletContext();
 
   const [fileList, setFileList] = useState(
     eventImageData?.length > 0
@@ -98,6 +136,14 @@ const MultipleImageUpload = (props) => {
       : [],
   );
 
+  let aspectRatio;
+  let width;
+
+  if (currentCalendarData?.imageConfig[0]?.thumbnail?.aspectRatio) {
+    aspectRatio = currentCalendarData.imageConfig[0]?.large.aspectRatio;
+    width = getWidthFromAspectRatio(aspectRatio, 48);
+  }
+
   const moveRow = useCallback(
     (dragIndex, hoverIndex) => {
       const dragRow = fileList[dragIndex];
@@ -148,6 +194,7 @@ const MultipleImageUpload = (props) => {
     form.setFieldsValue({
       multipleImagesCrop: newFileList,
     });
+    if (setShowDialog) setShowDialog(true);
   };
 
   const beforeUpload = (file) => {
@@ -174,6 +221,7 @@ const MultipleImageUpload = (props) => {
           customRequest={customRequest}
           beforeUpload={beforeUpload}
           showUploadList={{
+            showRemoveIcon: imageReadOnly ? false : true,
             removeIcon: <DeleteOutlined style={{ color: '#1B3DE6', fontWeight: '600', fontSize: '16px' }} />,
           }}
           multiple
@@ -185,11 +233,19 @@ const MultipleImageUpload = (props) => {
                 fileList={currFileList}
                 moveRow={moveRow}
                 actions={actions}
+                width={width}
               />
             ) : (
               <span className="image-footer">
                 <span className="image-contents">
-                  <img className="image-thumbnail" src={file?.url ?? file?.thumbUrl} />
+                  <img
+                    className="image-thumbnail"
+                    src={file?.url ?? file?.thumbUrl}
+                    style={{
+                      width: width ? `${width}px` : 'auto',
+                      minWidth: width ? `${width}px` : 'none',
+                    }}
+                  />
                   <a
                     className="image-name"
                     target="_blank"

diff --git a/src/components/MultipleImageUpload/multipleImageUpload.css b/src/components/MultipleImageUpload/multipleImageUpload.css
@@ -12,8 +12,8 @@
   justify-content: space-between;
   width: 100%;
   gap: 10px;
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
+  border: 1px solid #607efc;
+  border-radius: 4px;
   height: 66px;
   padding: 8px;
   margin-top: 8px;
@@ -52,6 +52,13 @@
   font-size: 16px;
 }
 
+.multiple-image-upload-wrapper .ant-upload-list-picture .ant-upload-list-item-name {
+  flex: auto;
+  margin: 0;
+  padding-right: 8px;
+  padding-left: 48px;
+}
+
 @media (max-width: 480px) {
   .multiple-image-upload-wrapper .image-footer .image-name {
     text-wrap: wrap;

diff --git a/src/components/RecurringEvents/RecurringEvents.jsx b/src/components/RecurringEvents/RecurringEvents.jsx
@@ -24,6 +24,10 @@ const RecurringEvents = function ({
   eventDetails,
   setFormFields,
   dateType,
+  disabledDate,
+  onCalendarChange,
+  setSubEventCount,
+  subEventCount,
 }) {
   const [nummberofDates, setNumberofDates] = useState(numberOfDaysEvent);
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -32,7 +36,6 @@ const RecurringEvents = function ({
   const [isCustom, setIsCustom] = useState(false);
   const [selectedWeekDays, setSelectedWeekDays] = useState([]);
   const [dateModified, setDateModified] = useState(false);
-  const [subEventCount, setSubEventCount] = useState(0);
   const startDateRecur = Form.useWatch('startDateRecur', form);
   const { t } = useTranslation();
   Form.useWatch('endTimeRecur', form);
@@ -341,6 +344,8 @@ const RecurringEvents = function ({
             <DateRangePicker
               style={{ width: '423px' }}
               disabled={(isCustom || formFields?.frequency === 'CUSTOM') && startDateRecur?.length == 2 && true}
+              disabledDate={disabledDate}
+              onCalendarChange={onCalendarChange}
               suffixIcon={
                 subEventCount > 0 && (
                   <Tags

diff --git a/src/constants/calendarSettingsForm.js b/src/constants/calendarSettingsForm.js
@@ -143,39 +143,46 @@ export const calendarSettingsFormFields = {
     {
       name: 'calendarName',
       label: <Translation>{(t) => t('dashboard.settings.calendarSettings.calendarName')}</Translation>,
-      field: ({ t }) => (
-        <BilingualInput>
-          <Form.Item name="calendarNameFr">
-            <TextArea
-              autoSize
-              style={{
-                borderRadius: '4px',
-                border: '4px solid #E8E8E8',
-                width: '100%',
-              }}
-              size="large"
-              autoComplete="off"
-              placeholder={t('dashboard.settings.calendarSettings.placeholders.calendarNameFr')}
-              data-cy="input-calendar-name"
-            />
-          </Form.Item>
+      field: ({ t, initialValues }) => {
+        const fieldData = {
+          fr: initialValues?.calendarNameFr,
+          en: initialValues?.calendarNameEn,
+        };
 
-          <Form.Item name="calendarNameEn">
-            <TextArea
-              autoSize
-              style={{
-                borderRadius: '4px',
-                border: '4px solid #E8E8E8',
-                width: '100%',
-              }}
-              size="large"
-              autoComplete="off"
-              placeholder={t('dashboard.settings.calendarSettings.placeholders.calendarNameEn')}
-              data-cy="input-calendar-name"
-            />
-          </Form.Item>
-        </BilingualInput>
-      ),
+        return (
+          <BilingualInput fieldData={fieldData}>
+            <Form.Item name="calendarNameFr">
+              <TextArea
+                autoSize
+                style={{
+                  borderRadius: '4px',
+                  border: '4px solid #E8E8E8',
+                  width: '100%',
+                }}
+                size="large"
+                autoComplete="off"
+                placeholder={t('dashboard.settings.calendarSettings.placeholders.calendarNameFr')}
+                data-cy="input-calendar-name"
+              />
+            </Form.Item>
+
+            <Form.Item name="calendarNameEn">
+              <TextArea
+                autoSize
+                style={{
+                  borderRadius: '4px',
+                  border: '4px solid #E8E8E8',
+                  width: '100%',
+                }}
+                size="large"
+                autoComplete="off"
+                placeholder={t('dashboard.settings.calendarSettings.placeholders.calendarNameEn')}
+                data-cy="input-calendar-name"
+              />
+            </Form.Item>
+          </BilingualInput>
+        );
+      },
       rules: [
         ({ getFieldValue }) => ({
           validator() {

diff --git a/src/constants/formFields.js b/src/constants/formFields.js
@@ -370,6 +370,7 @@ export const formFieldValue = [
       eventImageGalleryData,
       enableGallery,
       t,
+      setShowDialog,
     }) => (
       <>
         {position === 'top' && datatype === dataTypes.IMAGE && <p className="add-event-date-heading">{userTips}</p>}
@@ -390,10 +391,10 @@ export const formFieldValue = [
         {name?.includes(mappedFieldTypes.IMAGE) && (
           <Form.Item
             label={t('dashboard.events.addEditEvent.otherInformation.image.additionalImages')}
-            className="subheading-wrap"
             data-cy="form-item-event-multiple-image"
             hidden={!enableGallery}>
             <MultipleImageUpload
+              setShowDialog={setShowDialog}
               form={form}
               largeAspectRatio={largeAspectRatio}
               thumbnailAspectRatio={thumbnailAspectRatio}
@@ -691,6 +692,7 @@ export const returnFormDataWithFields = ({
   isEntitiesFetching,
   adminOnlyFields,
   mandatoryFields,
+  setShowDialog,
 }) => {
   return renderFormFields({
     fieldName: field?.name,
@@ -767,6 +769,7 @@ export const returnFormDataWithFields = ({
       isExternalSourceFetching,
       isEntitiesFetching,
       // required: checkMandatoryAdminOnlyFields(field?.name, mandatoryFields),
+      setShowDialog,
     }),
     key: index,
     initialValue: formInitialValueHandler(field?.type, field?.mappedField, field?.datatype, entityData),

diff --git a/src/locales/fr/transalationFr.json b/src/locales/fr/transalationFr.json
@@ -254,7 +254,7 @@
             "title": "Image",
             "mainImage": "Image principale",
             "additionalImages": "Images supplémentaires",
-            "subHeading": "Les images doivent être au format paysage ou carré et mesurer au moins 600 px de large. Uniquement les fichiers .jpeg et .png sont acceptés.",
+            "subHeading": "Uniquement les fichiers .jpeg et .png sont acceptés.",
             "dragAndDrop": "ou glisser pour télécharger",
             "browse": "Parcourir",
             "imageGallery": "Galerie d'images",