From a2188e75bc161f5ae29c92b682bbf638ee2f2521 Mon Sep 17 00:00:00 2001 From: Sayali Joshi Date: Thu, 18 Jul 2024 13:24:39 +0530 Subject: [PATCH 1/2] [CMG-247] - debugging --- ui/src/components/ContentMapper/index.tsx | 81 ++++++++++++++++++++--- 1 file changed, 71 insertions(+), 10 deletions(-) diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx index 81ef07407..9703c209e 100644 --- a/ui/src/components/ContentMapper/index.tsx +++ b/ui/src/components/ContentMapper/index.tsx @@ -48,7 +48,8 @@ import { optionsType, UidMap, ContentTypeMap, - Advanced + Advanced, + SavedContentType } from './contentMapper.interface'; import { ItemStatusMapProp } from '@contentstack/venus-components/build/components/Table/types'; import { ModalObj } from '../Modal/modal.interface'; @@ -57,6 +58,7 @@ import { UpdatedSettings } from '../AdvancePropertise/advanceProperties.interfac // Components import SchemaModal from '../SchemaModal'; import AdvanceSettings from '../AdvancePropertise'; +import SaveChangesModal from '../Common/SaveChangesModal'; // Styles import './index.scss'; @@ -425,19 +427,71 @@ const ContentMapper = () => { } }; + const [isModalOpen, setIsModalOpen] = useState(false); + + + const [currentCt, setCurrentCt] = useState(contentTypes[0]?.otherCmsTitle); + const [savedContentType, setSavedContentType] = useState({'col1': true, 'col2': false}); + console.log("savedContentType", savedContentType); + + + // Method to change the content type const openContentType = (i: number) => { - setActive(i); + // console.log("savedContentType[i - 1]", i, savedContentType[i - 1]); + + if (i > -1 && 1 < filteredContentTypes?.length) { + + // filteredContentTypes?.forEach((ct: ContentType) => { + // ct.otherCmsTitle = true + // }) - const otherTitle = contentTypes?.[i]?.otherCmsTitle; - setOtherCmsTitle(otherTitle); - const option = contentTypeMapped?.[otherTitle] ?? 'Select Content Type'; - setOtherContentType({ label: option, value: option }); - setContentTypeUid(contentTypes?.[i]?.id ?? ''); - fetchFields(contentTypes?.[i]?.id ?? '', searchText || ''); - setotherCmsUid(contentTypes?.[i]?.otherCmsUid); - setSelectedContentType(contentTypes?.[i]); + // setCurrentCt(otherTitle); + const updatedCT = {} + // updatedCT.contentTypes.[i].otherCmsTitle = true + // contentTypes.[i].otherCmsTitle = true + setSavedContentType(updatedCT) + + + + + + // console.log("isContentTypeSaved", savedContentType[i - 1]?.otherCmsTitle, savedContentType[i]?.otherCmsTitle); + + // savedCTArray.push({contentTypes?.[i]?.otherCmsTitle : true}); + } + + // console.log("savedCTArray", contentTypes?.[i]?.otherCmsTitle, i); + if (isDropDownChanged) { + console.log("otherCmsTitle", otherCmsTitle); + + setIsModalOpen(true); + return cbModal({ + component: (props: ModalObj) => ( + + ), + modalProps: { + size: 'xsmall', + shouldCloseOnOverlayClick: false + } + }); + } else { + setActive(i); + const otherTitle = contentTypes?.[i]?.otherCmsTitle; + setOtherCmsTitle(otherTitle); + const option = contentTypeMapped?.[otherTitle] ?? 'Select Content Type'; + setOtherContentType({ label: option, value: option }); + + setContentTypeUid(contentTypes?.[i]?.id ?? ''); + fetchFields(contentTypes?.[i]?.id ?? '', searchText || ''); + setotherCmsUid(contentTypes?.[i]?.otherCmsUid); + setSelectedContentType(contentTypes?.[i]); + } }; // Function to get exisiting content types list @@ -525,6 +579,8 @@ const ContentMapper = () => { // Method for change select value const handleValueChange = (value: FieldTypes, rowIndex: string) => { + console.log("setisDropDownCHanged", value, rowIndex); + setisDropDownCHanged(true); setFieldValue(value); const updatedRows = tableData?.map((row) => { @@ -893,6 +949,11 @@ const ContentMapper = () => { setisContentTypeMapped(true); setisContentTypeSaved(true); + // const savedCTArray: SavedContentType = {} + // data.updatedContentType.otherCmsTitle = true + // // savedCTArray = data?.updatedContentType; + // setSavedContentType(data?.updatedContentType?.otherCmsTitle) + setFilteredContentTypes(filteredContentTypes?.map(ct => ct?.id === data?.updatedContentType?.id ? { ...ct, status: data?.updatedContentType?.status } : ct )) From 85e8c88041df796d63dcd81a7aa877fb0585418d Mon Sep 17 00:00:00 2001 From: Sayali Joshi Date: Thu, 18 Jul 2024 17:32:34 +0530 Subject: [PATCH 2/2] [CMG-247], [CMG-256] --- .../Common/SaveChangesModal/index.tsx | 41 +++++++ ui/src/components/ContentMapper/index.tsx | 100 ++++++------------ 2 files changed, 76 insertions(+), 65 deletions(-) create mode 100644 ui/src/components/Common/SaveChangesModal/index.tsx diff --git a/ui/src/components/Common/SaveChangesModal/index.tsx b/ui/src/components/Common/SaveChangesModal/index.tsx new file mode 100644 index 000000000..1086c4b6e --- /dev/null +++ b/ui/src/components/Common/SaveChangesModal/index.tsx @@ -0,0 +1,41 @@ + +import { + ModalBody, + ModalHeader, + ModalFooter, + ButtonGroup, + Button, + Paragraph +} from '@contentstack/venus-components'; + +interface Props { + closeModal: () => void; + isopen: any; + otherCmsTitle?: string; + saveContentType: () => void; + openContentType: () => void; +} + +const SaveChangesModal = (props:Props) => { + return( + <> + {props?.closeModal(),props.isopen(false)}} className="text-capitalize" /> + +
+ +
+ + + + + + + + + ) + +} + +export default SaveChangesModal; \ No newline at end of file diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx index 0bc73b380..291427249 100644 --- a/ui/src/components/ContentMapper/index.tsx +++ b/ui/src/components/ContentMapper/index.tsx @@ -49,7 +49,6 @@ import { UidMap, ContentTypeMap, Advanced, - SavedContentType } from './contentMapper.interface'; import { ItemStatusMapProp } from '@contentstack/venus-components/build/components/Table/types'; import { ModalObj } from '../Modal/modal.interface'; @@ -435,50 +434,18 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => { const [isModalOpen, setIsModalOpen] = useState(false); - - const [currentCt, setCurrentCt] = useState(contentTypes[0]?.otherCmsTitle); - const [savedContentType, setSavedContentType] = useState({'col1': true, 'col2': false}); - console.log("savedContentType", savedContentType); - - - // Method to change the content type - const openContentType = (i: number) => { - // console.log("savedContentType[i - 1]", i, savedContentType[i - 1]); - - if (i > -1 && 1 < filteredContentTypes?.length) { - - // filteredContentTypes?.forEach((ct: ContentType) => { - // ct.otherCmsTitle = true - // }) - - - // setCurrentCt(otherTitle); - const updatedCT = {} - // updatedCT.contentTypes.[i].otherCmsTitle = true - // contentTypes.[i].otherCmsTitle = true - setSavedContentType(updatedCT) - - - - - - // console.log("isContentTypeSaved", savedContentType[i - 1]?.otherCmsTitle, savedContentType[i]?.otherCmsTitle); - - // savedCTArray.push({contentTypes?.[i]?.otherCmsTitle : true}); - } - - // console.log("savedCTArray", contentTypes?.[i]?.otherCmsTitle, i); + const handleOpenContentType = (i: number) => { if (isDropDownChanged) { - console.log("otherCmsTitle", otherCmsTitle); - setIsModalOpen(true); return cbModal({ component: (props: ModalObj) => ( openContentType(i)} /> ), modalProps: { @@ -487,19 +454,23 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => { } }); } else { - setActive(i); - const otherTitle = contentTypes?.[i]?.otherCmsTitle; - setOtherCmsTitle(otherTitle); - const option = contentTypeMapped?.[otherTitle] ?? 'Select Content Type'; - setOtherContentType({ label: option, value: option }); - - setContentTypeUid(contentTypes?.[i]?.id ?? ''); - fetchFields(contentTypes?.[i]?.id ?? '', searchText || ''); - setotherCmsUid(contentTypes?.[i]?.otherCmsUid); - setSelectedContentType(contentTypes?.[i]); + openContentType(i); } }; + const openContentType = (i: number) => { + setActive(i); + const otherTitle = contentTypes?.[i]?.otherCmsTitle; + setOtherCmsTitle(otherTitle); + const option = contentTypeMapped?.[otherTitle] ?? 'Select Content Type'; + setOtherContentType({ label: option, value: option }); + + setContentTypeUid(contentTypes?.[i]?.id ?? ''); + fetchFields(contentTypes?.[i]?.id ?? '', searchText || ''); + setotherCmsUid(contentTypes?.[i]?.otherCmsUid); + setSelectedContentType(contentTypes?.[i]); + } + // Function to get exisiting content types list const fetchExistingContentTypes = async () => { const { data, status } = await getExistingContentTypes(projectId); @@ -585,8 +556,6 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => { // Method for change select value const handleValueChange = (value: FieldTypes, rowIndex: string) => { - console.log("setisDropDownCHanged", value, rowIndex); - setisDropDownCHanged(true); setFieldValue(value); const updatedRows = tableData?.map((row) => { @@ -622,15 +591,15 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => { } }); }; + const SelectAccessor = (data: FieldMapType) => { - //const OptionsForRow = Fields[data?.backupFieldType as keyof Mapping]; const OptionsForRow = dummy_obj?.[data?.backupFieldType]?.options ; const initialOption = { label: dummy_obj?.[data?.ContentstackFieldType]?.label, value: dummy_obj?.[data?.ContentstackFieldType]?.label, }; - let option:any; + let option: FieldTypes[]; if (Array.isArray(OptionsForRow)) { option = OptionsForRow.map((option) => ({ label: option, @@ -641,12 +610,18 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => { label, value, })); - }else{ + + if (option?.length === 1 && option?.[0]?.label === initialOption?.label) { + option = [{ label: "No option available", value: "No option available" }]; + } + + } else { option = [{ label: OptionsForRow, value: OptionsForRow }] } - const fieldLabel = data?.ContentstackFieldType === 'url' || data?.ContentstackFieldType === 'group' - ? data?.ContentstackFieldType : option?.[0]?.label + const fieldLabel = data?.ContentstackFieldType === 'url' || data?.ContentstackFieldType === 'group' + ? data?.ContentstackFieldType : option?.[0]?.label + return (
@@ -947,7 +922,7 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => { notificationContent: { text: 'Content type saved successfully' }, notificationProps: { position: 'bottom-center', - hideProgressBar: false + hideProgressBar: true }, type: 'success' }); @@ -955,11 +930,6 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => { setisContentTypeMapped(true); setisContentTypeSaved(true); - // const savedCTArray: SavedContentType = {} - // data.updatedContentType.otherCmsTitle = true - // // savedCTArray = data?.updatedContentType; - // setSavedContentType(data?.updatedContentType?.otherCmsTitle) - setFilteredContentTypes(filteredContentTypes?.map(ct => ct?.id === data?.updatedContentType?.id ? { ...ct, status: data?.updatedContentType?.status } : ct )) @@ -968,7 +938,7 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => { notificationContent: { text: data?.error?.message }, notificationProps: { position: 'bottom-center', - hideProgressBar: false + hideProgressBar: true }, type: 'error' }); @@ -1181,8 +1151,8 @@ const ContentMapper = ({projectData}:ContentMapperComponentProps) => {
  • openContentType(index)} - onKeyDown={() => openContentType(index)} + onClick={() => handleOpenContentType(index)} + onKeyDown={() => handleOpenContentType(index)} >