diff --git a/ui/src/components/ContentMapper/contentMapper.interface.ts b/ui/src/components/ContentMapper/contentMapper.interface.ts index 02e05cf29..be0a68242 100644 --- a/ui/src/components/ContentMapper/contentMapper.interface.ts +++ b/ui/src/components/ContentMapper/contentMapper.interface.ts @@ -55,8 +55,7 @@ export interface FieldMapType { otherCmsType: string; uid: string; id: string; - _canFreezeCheckbox?: boolean; - _canSelect?: boolean; + _invalid?: boolean; } export interface ItemStatus { diff --git a/ui/src/components/ContentMapper/index.scss b/ui/src/components/ContentMapper/index.scss index 882fd243a..fc9d30f37 100644 --- a/ui/src/components/ContentMapper/index.scss +++ b/ui/src/components/ContentMapper/index.scss @@ -20,18 +20,19 @@ list-style-type: none; margin: 5px 15px 0; li { + align-items: center; border: 1px solid transparent; cursor: pointer; + display: flex; font-size: $size-font-large; + justify-content: space-between; line-height: normal; + min-height: 42px; padding: $space-10 35px; &.active-ct { - align-items: center; background-color: $color-brand-white-base; border: 1px solid $color-brand-primary-base; color: $color-brand-primary-base; - display: flex; - justify-content: space-between; } } } @@ -73,6 +74,9 @@ } } } +.disabled-field { + color: $color-font-disabled; +} .action-btn-wrapper { background-color: $color-brand-white-base; display: flex; diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx index 73aaf204e..4435f6fd4 100644 --- a/ui/src/components/ContentMapper/index.tsx +++ b/ui/src/components/ContentMapper/index.tsx @@ -138,6 +138,8 @@ const ContentMapper = () => { const [active, setActive] = useState(null ?? 0); + const [searchContentType, setSearchContentType] = useState(''); + /** ALL HOOKS Here */ const { projectId = '' } = useParams(); const navigate = useNavigate(); @@ -160,13 +162,16 @@ const ContentMapper = () => { fetchExistingContentTypes(); stackStatus(); + }, []); + // Make title and url field non editable + useEffect(() => { tableData?.forEach((field) => { - if (field?.otherCmsField === 'title') { - field._canFreezeCheckbox = true; + if (field?.otherCmsField === 'title' || field?.otherCmsField === 'url') { + field._invalid = true; } }); - }, []); + }) useEffect(() => { if (contentTypeMapped && otherCmsTitle) { @@ -194,16 +199,18 @@ const ContentMapper = () => { // Method to fetch content types const fetchContentTypes = async (searchText: string) => { - const { data } = await getContentTypes(projectId || '', 0, 10, ''); //org id will always present + const { data } = await getContentTypes(projectId || '', 0, 10, searchContentType || ''); //org id will always present setContentTypes(data?.contentTypes); setSelectedContentType(data?.contentTypes?.[0]); setTotalCounts(data?.contentTypes?.[0]?.fieldMapping?.length); setOtherCmsTitle(data?.contentTypes?.[0]?.otherCmsTitle); setContentTypeUid(data?.contentTypes?.[0]?.id); + fetchFields(data?.contentTypes?.[0]?.id, searchText || ''); setotherCmsUid(data?.contentTypes?.[0]?.otherCmsUid); - fetchFields(data?.contentTypes?.[0]?.id, searchText); }; + + // Get the stack status if it is empty or not const stackStatus = async () => { const contentTypeCount = await getStackStatus( newMigrationData?.destination_stack?.selectedOrg?.value, @@ -218,17 +225,24 @@ const ContentMapper = () => { }; // Method to search content types - const handleSearch = async (search: string) => { - setSearchText(search); - const { data } = await getContentTypes(projectId, 0, 5, search); //org id will always present + const handleSearch = async (searchCT: string) => { + console.log("searchCT", searchCT); + + setSearchContentType(searchCT) + + const { data } = await getContentTypes(projectId, 0, 5, searchCT || ''); //org id will always present + setContentTypes(data?.contentTypes); - setContentTypeUid(data?.contentTypes[0]?.id); - fetchFields(data?.contentTypes[0]?.id, searchText); + setSelectedContentType(data?.contentTypes?.[0]); + setTotalCounts(data?.contentTypes?.[0]?.fieldMapping?.length); + setOtherCmsTitle(data?.contentTypes?.[0]?.otherCmsTitle); + setContentTypeUid(data?.contentTypes?.[0]?.id); + fetchFields(data?.contentTypes[0]?.id, searchText || ''); }; // Method to get fieldmapping const fetchFields = async (contentTypeId: string, searchText: string) => { - const { data } = await getFieldMapping(contentTypeId, 0, 30, searchText); + const { data } = await getFieldMapping(contentTypeId, 0, 30, searchText || ''); try { const itemStatusMap: ItemStatusMapProp = {}; @@ -256,7 +270,8 @@ const ContentMapper = () => { // Fetch table data const fetchData = async ({ searchText }: TableTypes) => { - fetchContentTypes(searchText); + setSearchText(searchText); + fetchContentTypes(searchText || ''); }; // Method for Load more table data @@ -300,11 +315,10 @@ const ContentMapper = () => { setContentTypeUid(contentTypes?.[i]?.id); setCurrentIndex(i); + fetchFields(contentTypes?.[i]?.id, searchText || ''); setotherCmsUid(contentTypes?.[i]?.otherCmsUid); setSelectedContentType(contentTypes?.[i]); - - fetchFields(contentTypes?.[i]?.id, searchText); - }; + }; //function to handle previous content type navigation const handlePrevClick = (e: React.MouseEvent) => { @@ -340,10 +354,6 @@ const ContentMapper = () => { } }; - // const handleDropDownChange = (value: ContentType) => { - // setSelectedContentType(value); - // }; - const handleOnClick = (title: string) => { return cbModal({ component: (props: ModalObj) => ( @@ -464,7 +474,7 @@ const ContentMapper = () => { maxWidth="290px" isClearable={false} options={option} - isDisabled={data?.otherCmsField === 'title' || data?.otherCmsField === 'url'} + // isDisabled={data?.otherCmsField === 'title' || data?.otherCmsField === 'url'} /> { isDisabled: contentTypeMapped && Object.values(contentTypeMapped).includes(option?.label) })); - const [SelectedAssets, updateSelectedAssets] = useState({}); - const [resetRowSelection, updateResetRowSelection] = useState(false); - - const onRowSelectProp = [ - { - label: 'Log selected Items', - cb: (data: any) => { - updateResetRowSelection(true); - } - } - ]; - return (
@@ -808,7 +806,6 @@ const ContentMapper = () => {
- {/* */}

{parseDescription}

{ version="v2" onChange={(search: string) => handleSearch(search)} onClear={true} - value={searchText} + value={searchContentType} debounceSearch={true} />
@@ -827,8 +824,7 @@ const ContentMapper = () => { {contentTypes?.map((content: ContentType, index: number) => (
  • openContentType(e, index)} > {content?.otherCmsTitle} @@ -879,10 +875,6 @@ const ContentMapper = () => { totalCounts={totalCounts} searchPlaceholder={searchPlaceholder} fetchTableData={fetchData} - rowDisableProp={{ - key: '_invalid', - value: true - }} loadMoreItems={loadMoreItems} tableHeight={485} equalWidthColumns={true} @@ -911,7 +903,7 @@ const ContentMapper = () => { ), showExportCta: true }} - v2Features={{ key: 'canFreezeCheckbox', value: true }} + rowDisableProp={{ key: '_invalid', value: true }} />
  • diff --git a/ui/src/scss/_variables.scss b/ui/src/scss/_variables.scss index 92a6478ca..170e0d0f3 100644 --- a/ui/src/scss/_variables.scss +++ b/ui/src/scss/_variables.scss @@ -24,6 +24,7 @@ $color-base-gray-20: #475161; $color-base-gray-40: #dde3ee; $color-stepper-title: #6e6b86; $color-brand-warning-medium: #eb5646; +$color-font-disabled: rgba(160, 174, 192, 0.5); $font-family-primary: Inter; $font-family-secondary: 'Montserrat', sans-serif;