diff --git a/src/components/Card/MandatoryField/MandatoryField.jsx b/src/components/Card/MandatoryField/MandatoryField.jsx index 87b8347c3..b05b3912d 100644 --- 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 index a45eece02..f0597d39a 100644 --- 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 index 7be958dfc..8dc47676b 100644 --- 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,7 +41,7 @@ const DragableUploadListItem = ({ originNode, moveRow, file, fileList }) => { }), }); drop(drag(ref)); - const errorNode = {originNode.props.children}; + // const errorNode = {originNode.props.children}; return (
{ style={{ cursor: 'grab', }}> - {file.status === 'error' ? errorNode : originNode} + + + + + + + + + + {file?.name} + + + + + + + + + {/* {file.status === 'error' ? errorNode : originNode} */}
); }; @@ -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: , }} multiple @@ -185,11 +233,19 @@ const MultipleImageUpload = (props) => { fileList={currFileList} moveRow={moveRow} actions={actions} + width={width} /> ) : ( - + 0 && ( {(t) => t('dashboard.settings.calendarSettings.calendarName')}, - field: ({ t }) => ( - - -