diff --git a/ui/src/components/AdvancePropertise/index.scss b/ui/src/components/AdvancePropertise/index.scss index 3df80f930..09cdf3dec 100644 --- a/ui/src/components/AdvancePropertise/index.scss +++ b/ui/src/components/AdvancePropertise/index.scss @@ -1,3 +1,5 @@ +@import '../../scss/variables'; + .options-class { display: flex; flex-direction: column; @@ -17,3 +19,35 @@ margin-top: 0; margin-left: 30px; } +.modal-data { + padding: 0.75rem; + .radio-field { + margin-bottom: 0.75rem; + } + .Radio { + width: calc(33.33333% - .66667rem); + padding: .5rem; + margin: 0 !important; + } + .info-style { + margin-top: .75rem; + margin-bottom: 1.5rem; + .Info__border { + border-left-color: #0469e3; + } + } + .options-class { + line-height: $line-height-reset; + } + .nl-note { + color: $color-font-base; + font-size: $size-font-large; + line-height: $line-height-default; + margin-left: 2.75rem; + margin-top: -.25rem !important; + } + .ToggleWrap { + margin-top: 0.5rem; + padding: 0 0.5rem + } +} diff --git a/ui/src/components/AdvancePropertise/index.tsx b/ui/src/components/AdvancePropertise/index.tsx index 58b52f25d..180565e6f 100644 --- a/ui/src/components/AdvancePropertise/index.tsx +++ b/ui/src/components/AdvancePropertise/index.tsx @@ -1,17 +1,20 @@ +// Libraries import { useState } from 'react'; - import { ModalBody, ModalHeader, FieldLabel, TextInput, ToggleSwitch, - Tooltip + Tooltip, + Radio, + Info } from '@contentstack/venus-components'; +// Styles import './index.scss'; -export interface SchemaProps { +interface SchemaProps { fieldtype: string; value: any; rowId: string; @@ -23,10 +26,14 @@ export interface SchemaProps { const AdvancePropertise = (props: SchemaProps) => { const [toggleStates, setToggleStates] = useState({ validationRegex: props?.value?.ValidationRegex, + basic: props?.value?.Basic, + advanced: true || props?.value?.Advanced, + custom: props?.value?.Custom, mandatory: props?.value?.Mandatory, multiple: props?.value?.Multiple, unique: props?.value?.Unique, - nonLocalizable: props?.value?.NonLocalizable + nonLocalizable: props?.value?.NonLocalizable, + embedObject: props?.value?.EmbedObject }); const handleToggleChange = (field: string, value: boolean, checkBoxChanged: boolean) => { @@ -55,65 +62,236 @@ const AdvancePropertise = (props: SchemaProps) => { ); }; + const handleRadioChange = (field: string, event: any, checkBoxChanged: boolean) => { + setToggleStates((prevStates) => ({ + ...prevStates, + [field]: event + })); + + props?.updateFieldSettings( + props?.rowId, + { [field?.charAt(0)?.toUpperCase() + field?.slice(1)]: event }, + checkBoxChanged + ); + }; + return ( <> - + - - Validation (Regex) - - handleOnChange('validationRegex', e, true)} - /> - - Options - -
- handleToggleChange('mandatory', e?.target?.checked, true)} - /> - handleToggleChange('multiple', e?.target?.checked, true)} - /> - handleToggleChange('unique', e?.target?.checked, true)} - /> - - handleToggleChange('nonLocalizable', e?.target?.checked, true)} - /> - -

- If enabled, editing this field is restricted in localized entries. The field will use - the value of the master-language entry in all localized entries. -

+
+ {props?.fieldtype === 'HTML Rich text Editor' || props?.fieldtype === 'JSON Rich Text Editor' && ( +
+ Editor Type +
+ handleRadioChange('basic', e?.target?.checked, e?.target?.checked)} + + /> + handleRadioChange('advanced', e?.target?.checked, e?.target?.checked)} + /> + handleRadioChange('custom', e?.target?.checked, e?.target?.checked)} + /> +
+ + + + + Options + +
+
+ handleToggleChange('embedObject', e?.target?.checked, true)} + /> +
+
+ handleToggleChange('mandatory', e?.target?.checked, true)} + /> +
+ +
+ handleToggleChange('multiple', e?.target?.checked, true)} + /> +
+ +
+ + handleToggleChange('nonLocalizable', e?.target?.checked, true)} + /> + +
+
+ If enabled, editing this field is restricted in localized entries. The field will use + the value of the master-language entry in all localized entries. +
+
+
+ )} + + {props?.fieldtype === 'text' || props?.fieldtype === 'Single Line Textbox' && ( +
+ + Validation (Regex) + + handleOnChange('validationRegex', e, true)} + /> + + Options + +
+
+ handleToggleChange('mandatory', e?.target?.checked, true)} + /> +
+ +
+ handleToggleChange('multiple', e?.target?.checked, true)} + /> +
+ +
+ handleToggleChange('unique', e?.target?.checked, true)} + /> +
+ +
+ + handleToggleChange('nonLocalizable', e?.target?.checked, true)} + /> + +
+

+ If enabled, editing this field is restricted in localized entries. The field will use + the value of the master-language entry in all localized entries. +

+
+
+ )} + + {props?.fieldtype === 'global_field' && ( +
+ + Other Options + +
+
+ handleToggleChange('multiple', e?.target?.checked, true)} + /> +
+ +
+ + handleToggleChange('nonLocalizable', e?.target?.checked, true)} + /> + +
+
+ If enabled, editing this field is restricted in localized entries. The field will use + the value of the master-language entry in all localized entries. +
+
+
+ )}
diff --git a/ui/src/components/ContentMapper/contentMapper.interface.ts b/ui/src/components/ContentMapper/contentMapper.interface.ts index 8d307299c..3ea0b996d 100644 --- a/ui/src/components/ContentMapper/contentMapper.interface.ts +++ b/ui/src/components/ContentMapper/contentMapper.interface.ts @@ -9,13 +9,6 @@ interface mapDataType { contentTypes: ContentType[]; projectId: string; } -interface Advanced { - ValidationRegex: string; - mandatory: boolean; - multiple: boolean; - unique: boolean; - nonLocalizable: boolean; -} export interface ContentMapperType { content_types_heading?: string; cta: CTA; @@ -68,6 +61,26 @@ export interface FieldMapType { advanced: Advanced; } +// export interface Advanced { +// ValidationRegex: string; +// Mandatory: boolean; +// Multiple: boolean; +// Unique: boolean; +// NonLocalizable: boolean; +// } + +export interface Advanced { + ValidationRegex?: string; + Basic?: boolean; + Advanced?: boolean; + Custom?: boolean; + Mandatory?: boolean; + Multiple?: boolean; + Unique?: boolean; + NonLocalizable?: boolean; + EmbedObject?: boolean; +} + export interface ItemStatus { [key: number]: string; } @@ -118,3 +131,5 @@ export interface UidMap { export interface ContentTypeMap { [key: string]: string; } + + diff --git a/ui/src/components/ContentMapper/index.scss b/ui/src/components/ContentMapper/index.scss index 6a19fc3ea..33ca9ad58 100644 --- a/ui/src/components/ContentMapper/index.scss +++ b/ui/src/components/ContentMapper/index.scss @@ -2,7 +2,9 @@ @import '../../scss/variables'; .content-types-list-wrapper { - max-height: calc(100vh - 7.25rem); + display: flex; + flex-direction: column; + max-height: calc(100vh - 173px); max-width: 27%; overflow: hidden; width: 100%; @@ -19,9 +21,8 @@ } } .ct-list { - height: 100%; list-style-type: none; - margin: 15px 0; + padding: 15px 0; overflow-y: auto; overflow-x: hidden; li { diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx index cb6d47d74..83f56fae4 100644 --- a/ui/src/components/ContentMapper/index.tsx +++ b/ui/src/components/ContentMapper/index.tsx @@ -53,7 +53,8 @@ import { ContentTypesSchema, optionsType, UidMap, - ContentTypeMap + ContentTypeMap, + Advanced } from './contentMapper.interface'; import { ItemStatusMapProp } from '@contentstack/venus-components/build/components/Table/types'; import { ModalObj } from '../Modal/modal.interface'; @@ -72,9 +73,22 @@ const Fields: Mapping = { 'HTML Rich text Editor', 'JSON Rich Text Editor' ], + 'text': [ + 'Single Line Textbox', + 'Multi Line Textbox', + 'HTML Rich text Editor', + 'JSON Rich Text Editor' + ], + 'single_line_text': [ + 'Single Line Textbox', + 'Multi Line Textbox', + 'HTML Rich text Editor', + 'JSON Rich Text Editor' + ], 'Multi Line Textbox': ['Multi Line Textbox', 'HTML Rich text Editor', 'JSON Rich Text Editor'], 'HTML Rich text Editor': 'JSON Rich Text Editor', 'JSON Rich Text Editor': 'JSON Rich Text Editor', + json: 'JSON Rich Text Editor', URL: 'URL', file: 'File', number: 'Number', @@ -84,7 +98,8 @@ const Fields: Mapping = { reference: 'Reference', dropdown: 'Select', radio: 'Select', - CheckBox: 'Select' + CheckBox: 'Select', + global_field: 'Global' }; interface ModalProps { @@ -204,7 +219,7 @@ const ContentMapper = () => { }, [contentTypeMapped, otherCmsTitle]); useEffect(() => { - const updatedExstingField: any = {}; + const updatedExstingField: ExistingFieldType = {}; if (isContentTypeSaved) { tableData?.forEach((row) => { if (row?.contentstackField) { @@ -491,7 +506,7 @@ const ContentMapper = () => { // Function to handle selected fields const handleSelectedEntries = (singleSelectedRowIds: UidMap[], selectedData: FieldMapType[]) => { - const selectedObj: any = {}; + const selectedObj: UidMap = {}; singleSelectedRowIds.forEach((uid: any) => { selectedObj[uid] = true; @@ -539,7 +554,9 @@ const ContentMapper = () => { // fetchFields(contentTypes?.[i]?.id, searchText); }; - const handleAdvancedSetting = (fieldtype: string, fieldvalue: any, rowId: string, data: any) => { + const handleAdvancedSetting = (fieldtype: string, fieldvalue: Advanced, rowId: string, data: FieldMapType) => { + // console.log("fieldvalue", data); + return cbModal({ component: (props: ModalObj) => ( { const SelectAccessor = (data: FieldMapType) => { const OptionsForRow = Fields[data?.backupFieldType as keyof Mapping]; + // console.log("OptionsForRow", OptionsForRow, Fields[data?.backupFieldType], data); + + const option = Array.isArray(OptionsForRow) ? OptionsForRow.map((option) => ({ label: option, value: option })) : [{ label: OptionsForRow, value: OptionsForRow }]; @@ -609,16 +629,27 @@ const ContentMapper = () => { } />
- - - handleAdvancedSetting(data?.ContentstackFieldType, data?.advanced, data?.uid, data) + {data?.ContentstackFieldType !== 'group' && + data?.otherCmsField !== 'title' && + data?.otherCmsField !== 'url' && + - + > + + handleAdvancedSetting(data?.ContentstackFieldType, data?.advanced, data?.uid, data) + } + /> + + } ); }; @@ -796,13 +827,13 @@ const ContentMapper = () => { icon="Setting" size="small" onClick={() => { - const value = { - ValidationRegex: data?.advanced?.ValidationRegex, - Mandatory: data?.advanced?.mandatory, - Multiple: data?.advanced?.multiple, - Unique: data?.advanced?.unique, - NonLocalizable: data?.advanced?.nonLocalizable - }; + // const value = { + // ValidationRegex: data?.advanced?.ValidationRegex, + // Mandatory: data?.advanced?.mandatory, + // Multiple: data?.advanced?.multiple, + // Unique: data?.advanced?.unique, + // NonLocalizable: data?.advanced?.nonLocalizable + // }; handleAdvancedSetting(data?.ContentstackFieldType, advancePropertise, data?.uid, data); }} /> @@ -985,6 +1016,15 @@ const ContentMapper = () => { isDisabled: contentTypeMapped && Object.values(contentTypeMapped).includes(option?.label) })); + // const itemSize = tableData?.forEach((data) => { + // return data?.uid?.length > 80 ? 130 : 90 + // console.log("data?.uid", data?.uid?.length); + + // }) + + // console.log("itemSize", itemSize); + + return (
@@ -1063,12 +1103,12 @@ const ContentMapper = () => { searchPlaceholder={searchPlaceholder} fetchTableData={fetchData} loadMoreItems={loadMoreItems} - tableHeight={465} + tableHeight={IsEmptyStack ? 495 : 465} equalWidthColumns={true} columnSelector={false} initialRowSelectedData={tableData} initialSelectedRowIds={rowIds} - itemSize={90} + itemSize={130} withExportCta={{ component: (
diff --git a/ui/src/pages/Login/index.tsx b/ui/src/pages/Login/index.tsx index 15061ad48..04e000c26 100644 --- a/ui/src/pages/Login/index.tsx +++ b/ui/src/pages/Login/index.tsx @@ -67,6 +67,7 @@ const Login: FC = () => { // ************* ALL States Here ************ const [loginStates, setLoginStates] = useState(defaultStates); + const [isLoading, setIsLoading] = useState(false) const navigate = useNavigate(); const location = useLocation(); @@ -107,6 +108,7 @@ const Login: FC = () => { // ************* Login submit ************ const onSubmit = async (values: User) => { + setIsLoading(true); if (loginStates?.tfa) { setLoginStates((prevState: IStates) => { return { @@ -142,14 +144,17 @@ const Login: FC = () => { const response = await userSession(userAuth?.user); if (response?.status === 294 && response?.data?.error_message === TFA_MESSAGE) { + setIsLoading(false); setLoginStates((prev) => ({ ...prev, tfa: true })); } if (response?.status === 104 || response?.status === 400 || response?.status === 422) { + setIsLoading(false); failtureNotification(response?.data?.error_message || response?.data?.error?.message); } if (response?.status === 200 && response?.data?.message === LOGIN_SUCCESSFUL_MESSAGE) { + setIsLoading(false); setDataInLocalStorage('app_token', response?.data?.app_token); setAuthToken(response?.data?.app_token); setIsAuthenticated(true); @@ -394,6 +399,7 @@ const Login: FC = () => { type="submit" icon="v2-Login" tabindex={0} + isLoading={isLoading} > {login?.cta?.title}