[CMG-174] - Frontend for Content Mapping Status and Filter functionality

ui/src/components/AdvancePropertise/advanceProperties.interface.ts

@@ -1,16 +1,32 @@
-import { FieldMapType } from '../ContentMapper/contentMapper.interface';
+import { Advanced, FieldMapType } from '../ContentMapper/contentMapper.interface';
 
 export interface SchemaProps {
   fieldtype: string;
-  value: any;
+  value: UpdatedSettings;
   rowId: string;
-  updateFieldSettings: (rowId: string, value: any, checkBoxChanged: boolean) => void;
+  updateFieldSettings: (rowId: string, value: Advanced, checkBoxChanged: boolean) => void;
   isLocalised: boolean;
   closeModal: () => void;
   data: FieldMapType;
   projectId?: string;
 }
 
+export interface UpdatedSettings {
+  MinChars?: string;
+  MaxChars?: number;
+  MinRange?: number;
+  MaxRange?: number;
+  minSize?: string;
+  maxSize?: number;
+  DefaultValue?: string;
+  ValidationRegex?: string;
+  title?: string;
+  url?: string;
+  Mandatory?: boolean;
+  AllowImagesOnly?: boolean;
+  NonLocalizable?: boolean;
+}
+
 export interface Props {
   data: SchemaProps;
   states?: StateType;

ui/src/components/AdvancePropertise/index.tsx

@@ -42,15 +42,15 @@ const AdvancePropertise = (props: SchemaProps) => {
   });
 
   const [contentTypes, setContentTypes] = useState<ContentType[]>([]);
-  const [CTValue, setCTValue] = useState(null);
+  const [ctValue, setCTValue] = useState(null);
 
   useEffect(() => {
     fetchContentTypes('');
   }, [])
 
   // Fetch content types list
   const fetchContentTypes = async (searchText: string) => {
-    const { data } = await getContentTypes(props?.projectId || '', 0, 10, searchText || ''); //org id will always present
+    const { data } = await getContentTypes(props?.projectId ?? '', 0, 10, searchText || ''); //org id will always present
 
     setContentTypes(data?.contentTypes);
   };
@@ -63,7 +63,15 @@ const AdvancePropertise = (props: SchemaProps) => {
 
     props?.updateFieldSettings(
       props?.rowId,
-      { [field?.charAt(0)?.toUpperCase() + field?.slice(1)]: (event.target as HTMLInputElement)?.value },
+      {
+        [field?.charAt(0)?.toUpperCase() + field?.slice(1)]: (event.target as HTMLInputElement)?.value,
+        validationRegex: '',
+        Mandatory: false,
+        Multiple: false,
+        Unique: false,
+        NonLocalizable: false,
+        EmbedObject: false
+      },
       checkBoxChanged
     );
   };
@@ -76,7 +84,15 @@ const AdvancePropertise = (props: SchemaProps) => {
 
     props?.updateFieldSettings(
       props?.rowId,
-      { [field?.charAt(0)?.toUpperCase() + field?.slice(1)]: value },
+      {
+        [field?.charAt(0)?.toUpperCase() + field?.slice(1)]: value,
+        validationRegex: '',
+        Mandatory: false,
+        Multiple: false,
+        Unique: false,
+        NonLocalizable: false,
+        EmbedObject: false
+      },
       checkBoxChanged
     );
   };
@@ -282,7 +298,7 @@ const AdvancePropertise = (props: SchemaProps) => {
 
                   {toggleStates?.embedObject && (
                     <Select
-                      value={CTValue}
+                      value={ctValue}
                       isMulti={true}
                       onChange={setCTValue}
                       options={option}

ui/src/components/Common/AddStack/addStack.interface.ts

@@ -1,3 +1,4 @@
+import { IDropDown } from '../../../context/app/app.interface';
 export interface AddStackCMSData {
   primary_cta: PrimaryCta;
   secondary_cta: SecondaryCta;
@@ -33,3 +34,39 @@ export const defaultAddStackCMSData: AddStackCMSData = {
   stack_name_placeholder: '',
   title: ''
 };
+
+export interface AddStackProps {
+  defaultValues: Stack;
+  locales: IDropDown[];
+  onSubmit: (value: Stack) => {};
+  selectedOrganisation: string;
+  closeModal: () => void;
+}
+export interface Stack {
+  name: string;
+  description: string;
+  locale: string;
+}
+export interface StackData {
+  name: string;
+  description: string;
+  locale: Locale;
+}
+interface Locale {
+  value: string;
+}
+
+export interface Response {
+  data: Data;
+}
+interface Data {
+  locales: LocaleType;
+}
+interface LocaleType {
+  [key: string]: string;
+}
+export interface Errors {
+  name: string;
+  locale: string;
+  description: string;
+}

ui/src/components/Common/AddStack/addStack.tsx

@@ -19,32 +19,30 @@ import {
 
 // Services
 import { getCMSDataFromFile } from '../../../cmsData/cmsSelector';
+import { getAllLocales } from '../../../services/api/user.service';
+
 
 // Utilities
 import { CS_ENTRIES } from '../../../utilities/constants';
+import { validateObject } from '../../../utilities/functions';
+
 
 // Interface
-import { AddStackCMSData, defaultAddStackCMSData } from './addStack.interface';
+import { AddStackCMSData, defaultAddStackCMSData, AddStackProps, StackData, Response, Stack, Errors } from './addStack.interface';
+import { IDropDown } from '../../../context/app/app.interface';
+
 
 // Styles
 import './addStack.scss';
-import { getAllLocales } from '../../../services/api/user.service';
-import { validateObject } from '../../../utilities/functions';
-import { IDropDown } from '../../../context/app/app.interface';
-export interface Stack {
-  name: string;
-  description: string;
-  locale: string;
-}
 
-const AddStack = (props: any): JSX.Element => {
+const AddStack = (props: AddStackProps): JSX.Element => {
   const [isProcessing, setIsProcessing] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [allLocales, setAllLocales] = useState<IDropDown[]>([]);
   const [addStackCMSData, setAddStackCMSData] = useState<AddStackCMSData>(defaultAddStackCMSData);
-  const onSubmit = async (formData: any) => {
+  const onSubmit = async (formData: StackData) => {
     setIsProcessing(true);
-    const resp = await props?.onSubmit({
+    const resp = props?.onSubmit({
       name: formData?.name || props?.defaultValues?.name,
       description: formData?.description || props?.defaultValues?.description,
       locale: formData?.locale?.value || props?.defaultValues?.locale
@@ -76,14 +74,14 @@ const AddStack = (props: any): JSX.Element => {
         setAddStackCMSData(data);
         setIsLoading(false);
       })
-      .catch((err: any) => {
+      .catch((err: string) => {
         console.error(err);
         setIsLoading(false);
       });
 
     //fetch all locales
     getAllLocales(props?.selectedOrganisation)
-      .then((response: any) => {
+      .then((response: Response) => {
         const rawMappedLocalesMapped =
           validateObject(response?.data) && response?.data?.locales
             ? Object?.keys(response?.data?.locales)?.map((key) => ({
@@ -97,7 +95,7 @@ const AddStack = (props: any): JSX.Element => {
             : [];
         setAllLocales(rawMappedLocalesMapped);
       })
-      .catch((err: any) => {
+      .catch((err: string) => {
         console.error(err);
       });
     //org id will always be there
@@ -114,12 +112,16 @@ const AddStack = (props: any): JSX.Element => {
         <FinalForm
           onSubmit={onSubmit}
           keepDirtyOnReinitialize={true}
-          validate={(values): any => {
-            const errors: any = {};
-            if (!values?.name || values?.name?.trim().lenght < 1) {
+          validate={(values): Stack => {
+            const errors: Errors = {
+              name: '',
+              description: '',
+              locale: ''
+            };
+            if (!values?.name || values?.name?.trim().length < 1) {
               errors.name = 'Stack name required';
             }
-            if (!values?.locale || values?.locale === '') {
+            if (!values?.locale) {
               errors.locale = 'Required';
             }
             return errors;
@@ -152,7 +154,7 @@ const AddStack = (props: any): JSX.Element => {
                                   testId="cs-stack-create-title-input"
                                   version="v2"
                                   {...input}
-                                  onChange={(event: any): any => {
+                                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                                     input?.onChange(event);
                                   }}
                                   name="name"
@@ -176,7 +178,7 @@ const AddStack = (props: any): JSX.Element => {
                       </Field>
                       <Field>
                         <ReactFinalField name={'description'} type="textarea">
-                          {({ input }): any => {
+                          {({ input }) => {
                             return (
                               <div className="input-description">
                                 <Field>
@@ -193,11 +195,10 @@ const AddStack = (props: any): JSX.Element => {
                                     className="Description-field"
                                     {...input}
                                     name="description"
-                                    onChange={(event: any): any => {
+                                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                                       input?.onChange(event);
-                                    }}
-                                    placeholder={addStackCMSData?.stack_description_placeholder}
-                                  />
+                                    } }
+                                    placeholder={addStackCMSData?.stack_description_placeholder} />
                                 </Field>
                               </div>
                             );
@@ -206,7 +207,7 @@ const AddStack = (props: any): JSX.Element => {
                       </Field>
                       <Field>
                         <ReactFinalField name={'locale'}>
-                          {({ input, meta }): any => {
+                          {({ input, meta }) => {
                             return (
                               <>
                                 <FieldLabel
@@ -221,7 +222,7 @@ const AddStack = (props: any): JSX.Element => {
                                 <Select
                                   value={input?.value}
                                   isSearchable={true}
-                                  onChange={(event: any): any => {
+                                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                                     input?.onChange(event);
                                   }}
                                   name="locale"
@@ -253,7 +254,7 @@ const AddStack = (props: any): JSX.Element => {
                           version="v2"
                           testId="cs-cancel-create-stack"
                           buttonType="tertiary"
-                          onClick={(): any => {
+                          onClick={() => { 
                             props?.closeModal();
                           }}
                         >

ui/src/components/ContentMapper/contentMapper.interface.ts

@@ -44,6 +44,7 @@ export interface ContentType {
   otherCmsUid: string;
   updateAt: string;
   id?: string;
+  status: string;
 }
 
 export interface FieldMapType {
@@ -58,19 +59,16 @@ export interface FieldMapType {
   uid: string;
   id: string;
   _canSelect?: boolean;
-  advanced: Advanced;
+  advanced?: Advanced;
   contentstackUid: string;
 }
 
 export interface Advanced {
-  ValidationRegex?: string;
-  Basic?: boolean;
-  Advanced?: boolean;
-  Custom?: boolean;
-  Mandatory?: boolean;
-  Multiple?: boolean;
-  Unique?: boolean;
-  NonLocalizable?: boolean;
+  validationRegex: string;
+  Mandatory: boolean;
+  Multiple: boolean;
+  Unique: boolean;
+  NonLocalizable: boolean;
   EmbedObject?: boolean;
 }