@griddo/ax 10.4.7 → 10.4.9

package/src/containers/PageEditor/actions.tsx

@@ -80,6 +80,9 @@ import {
   IStructuredDataContent,
   INotification,
   IPageLanguage,
+  IComponent,
+  IModule,
+  IRootState,
 } from "@ax/types";
 import {
   ISetBreadcrumb,
@@ -199,7 +202,7 @@ function setLastElementAddedId(lastElementAddedId: null | number): ISetLastEleme
   return { type: SET_LAST_ELEMENT_ADDED_ID, payload: { lastElementAddedId } };
 }
 
-function setCopyModule(moduleCopy: Record<string, unknown> | null): ISetCopyModule {
+function setCopyModule(moduleCopy: { date: Date; elements: Record<string, unknown>[] } | null): ISetCopyModule {
   return { type: SET_COPY_MODULE, payload: { moduleCopy } };
 }
 
@@ -288,7 +291,7 @@ function generateNewPage(dispatch: Dispatch, getState: any, baseSchema: string)
 
   // SET PAGE AS ROOT WHEN NEW PAGE
   setRootEditorID(dispatch);
-  generatePageContent(page, dispatch, getState);
+  generatePageContent(page)(dispatch, getState);
 }
 
 // API RELATED ACTIONS
@@ -350,7 +353,7 @@ function getPage(pageID?: number, global?: boolean): (dispatch: Dispatch, getSta
         if (isReqOk(response.status)) {
           addTemplate(page.templateId)(dispatch);
           setRootEditorID(dispatch);
-          generatePageContent(page, dispatch, getState);
+          generatePageContent(page)(dispatch, getState);
           dispatch(setCurrentPageName(page.title));
           dispatch(setCurrentPageID(page.id));
           dispatch(setTemplateConfig(page.templateConfig));
@@ -674,7 +677,7 @@ function addTemplate(template: string): (dispatch: Dispatch) => Promise<void> {
   };
 }
 
-function addComponent(type: any, key: string): (dispatch: Dispatch, getState: any) => void {
+function addComponent(type: IComponent | string, key: string): (dispatch: Dispatch, getState: any) => void {
   return (dispatch, getState) => {
     const { editorContent, sections, editorID } = getStateValues(getState);
     const component = {
@@ -693,9 +696,9 @@ function addComponent(type: any, key: string): (dispatch: Dispatch, getState: an
       },
     };
 
-    generatePageContent(updatedPageContent, dispatch, getState);
+    generatePageContent(updatedPageContent)(dispatch, getState);
 
-    if (type.editorID) {
+    if (typeof type === "object" && Object.prototype.hasOwnProperty.call(type, "editorID")) {
       setSelectedContent(type.editorID)(dispatch, getState);
     } else {
       const { sections: generatedSections } = getStateValues(getState);
@@ -747,7 +750,7 @@ function addModule(
       },
     };
 
-    generatePageContent(updatedPageContent, dispatch, getState);
+    generatePageContent(updatedPageContent)(dispatch, getState);
 
     const { sections: generatedSections } = getStateValues(getState);
     const lastModuleEditorID = getLastModuleEditorID(generatedSections, updatedSectionIndex);
@@ -778,11 +781,14 @@ function replaceModule(module: any, parent: any, objKey: string): (dispatch: Dis
     });
 
     const updatedContent = updateByEditorID(editorContent, parent.editorID, objKey, updatedVal);
-    generatePageContent(updatedContent, dispatch, getState);
+    generatePageContent(updatedContent)(dispatch, getState);
   };
 }
 
-function replaceElementsInCollection(newValue: string, reference: string): (dispatch: Dispatch, getState: any) => void {
+function replaceElementsInCollection(
+  newValue: string,
+  reference?: string
+): (dispatch: Dispatch, getState: any) => void {
   return async (dispatch, getState) => {
     const { selectedContent } = getStateValues(getState);
 
@@ -792,23 +798,25 @@ function replaceElementsInCollection(newValue: string, reference: string): (disp
     updateEditorContent(selectedContent.editorID, key, updatedContent)(dispatch, getState);
 
     const { editorContent } = getStateValues(getState);
-    generatePageContent(editorContent, dispatch, getState);
+    generatePageContent(editorContent)(dispatch, getState);
   };
 }
 
-function deleteModule(editorID: number, key?: string): (dispatch: Dispatch, getState: any) => void {
+function deleteModule(editorID: number[], key?: string): (dispatch: Dispatch, getState: any) => void {
   return (dispatch, getState) => {
     const { sections, editorContent, errors } = getStateValues(getState);
 
     const updatedSections: any = [...sections];
-    const { parent, grandParent } = findByEditorID(updatedSections, editorID);
+    const { parent, grandParent } = findByEditorID(updatedSections, editorID[0]);
     const parentModule = Array.isArray(parent) ? grandParent : parent;
 
-    const parentKey = key ? key : getParentKey(parentModule, editorID);
+    const parentKey = key ? key : getParentKey(parentModule, editorID[0]);
     const itemsArr = parentModule[parentKey];
 
-    const index = itemsArr.findIndex((module: any) => module.editorID === editorID);
-    itemsArr.splice(index, 1);
+    editorID.forEach((moduleID) => {
+      const index = itemsArr.findIndex((module: IModule) => module.editorID === moduleID);
+      itemsArr.splice(index, 1);
+    });
 
     const updatedPageContent = {
       ...editorContent,
@@ -818,45 +826,51 @@ function deleteModule(editorID: number, key?: string): (dispatch: Dispatch, getS
       validatePage()(dispatch, getState);
     }
 
-    generatePageContent(updatedPageContent, dispatch, getState);
+    generatePageContent(updatedPageContent)(dispatch, getState);
 
     dispatch(setLastElementAddedId(null));
   };
 }
 
-function duplicateModule(editorID: number, key?: string): (dispatch: Dispatch, getState: any) => Promise<number> {
+function duplicateModule(editorID: number[], key?: string): (dispatch: Dispatch, getState: any) => number {
   return (dispatch, getState) => {
     const { sections, editorContent } = getStateValues(getState);
 
     const updatedSections: any = [...sections];
-    const { element: originalItem, parent, grandParent } = findByEditorID(updatedSections, editorID);
-
-    const { isMaxModules, errorMessage } = checkMaxModules(editorContent, originalItem.component);
-
-    if (isMaxModules) {
-      handleError(errorMessage)(dispatch);
-      return editorID;
-    }
 
+    const { parent, grandParent } = findByEditorID(updatedSections, editorID[0]);
     const parentModule = Array.isArray(parent) ? grandParent : parent;
-
-    const parentKey = key ? key : getParentKey(parentModule, editorID);
+    const parentKey = key ? key : getParentKey(parentModule, editorID[0]);
     const itemsArr = parentModule[parentKey];
+    let duplicatedItemIndex = 0;
 
-    const originalItemIndex = itemsArr.findIndex((module: any) => module.editorID === editorID);
-    const duplicatedItemIndex = originalItemIndex + 1;
-    itemsArr.splice(duplicatedItemIndex, 0, originalItem);
+    editorID.forEach((id) => {
+      const { element: originalItem } = findByEditorID(updatedSections, id);
+      const { isMaxModules, errorMessage } = checkMaxModules(editorContent, originalItem.component);
+
+      if (isMaxModules) {
+        handleError(errorMessage)(dispatch);
+        return;
+      } else {
+        const originalItemIndex = itemsArr.findIndex((module: any) => module.editorID === id);
+        duplicatedItemIndex = originalItemIndex + 1;
+        itemsArr.splice(duplicatedItemIndex, 0, originalItem);
+      }
+    });
 
     const updatedPageContent = {
       ...editorContent,
     };
 
-    generatePageContent(updatedPageContent, dispatch, getState);
+    generatePageContent(updatedPageContent)(dispatch, getState);
 
     const { sections: generatedSections } = getStateValues(getState);
-    const { parent: generatedParent, grandParent: generatedGrandParent } = findByEditorID(generatedSections, editorID);
+    const { parent: generatedParent, grandParent: generatedGrandParent } = findByEditorID(
+      generatedSections,
+      editorID[0]
+    );
     const section = Array.isArray(generatedParent) ? generatedGrandParent : generatedParent;
-    const duplicatedEditorID = section[parentKey][duplicatedItemIndex].editorID;
+    const duplicatedEditorID: number = section[parentKey][duplicatedItemIndex].editorID;
 
     localStorage.setItem("selectedID", `${duplicatedEditorID}`);
 
@@ -864,17 +878,27 @@ function duplicateModule(editorID: number, key?: string): (dispatch: Dispatch, g
   };
 }
 
-function copyModule(editorID: number): (dispatch: Dispatch, getState: any) => boolean {
+function copyModule(editorID: number[]): (dispatch: Dispatch, getState: any) => boolean {
   return (dispatch, getState) => {
     const { sections } = getStateValues(getState);
-    const { element: originalElement } = findByEditorID(sections, editorID);
-    if (originalElement) {
-      const { editorID, parentEditorID, ...element } = originalElement;
+    const modulesToCopy: Record<string, unknown>[] = [];
+
+    editorID.forEach((id) => {
+      const { element: originalElement } = findByEditorID(sections, id);
+      if (originalElement) {
+        const { editorID, parentEditorID, ...element } = originalElement;
+        modulesToCopy.push(element);
+      }
+    });
+
+    if (modulesToCopy.length) {
       const payload = {
         date: new Date(),
-        element,
+        elements: modulesToCopy,
       };
+
       dispatch(setCopyModule(payload));
+
       return true;
     } else {
       return false;
@@ -884,59 +908,63 @@ function copyModule(editorID: number): (dispatch: Dispatch, getState: any) => bo
 
 function pasteModule(
   editorID: number,
-  key: string
+  key: string,
+  modulesToPaste: IModule[]
 ): (dispatch: Dispatch, getState: any) => Promise<{ error?: INotification }> {
   return async (dispatch, getState) => {
     const {
-      pageEditor: { moduleCopy },
       sites: { currentSiteInfo },
-    } = getState();
+    }: IRootState = getState();
 
     const { sections, editorContent } = getStateValues(getState);
 
-    const { isMaxModules, errorMessage } = checkMaxModules(editorContent, moduleCopy.element.component);
-    if (isMaxModules && errorMessage) {
-      const error: INotification = {
-        type: "error",
-        text: errorMessage,
-      };
-      return { error };
-    }
-
     const updatedSections: any = [...sections];
     const { element: originalElement } = findByEditorID(updatedSections, editorID);
+    const itemsArr = originalElement[key];
 
-    const validatedModuleCopy: any = deepClone(moduleCopy.element);
     let error: INotification | undefined;
 
-    if (moduleCopy.element.hasDistributorData) {
-      const { mode, fixed } = moduleCopy.element.data;
-      const isManualMode = mode === "manual" && !!fixed?.length;
-      if (isManualMode) {
-        const response = await structuredData.getDataContentBulk(fixed, currentSiteInfo.id);
-        if (isReqOk(response.status)) {
-          const validDataIds: number[] = [];
-          response.data.items.forEach((data: IStructuredDataContent) => data.relatedSite && validDataIds.push(data.id));
-          const hasInvalidData = validDataIds.length < fixed.length;
-          validatedModuleCopy.data.fixed = validDataIds;
-          if (hasInvalidData) {
-            error = {
-              type: "warning",
-              text: "Some distributor data were not copied because they are not imported into this site",
-            };
+    modulesToPaste.forEach(async (element) => {
+      const { isMaxModules, errorMessage } = checkMaxModules(editorContent, element.component);
+      if (isMaxModules && errorMessage) {
+        error = {
+          type: "error",
+          text: errorMessage,
+        };
+      }
+
+      const validatedModuleCopy: any = deepClone(element);
+
+      if (element.hasDistributorData) {
+        const { mode, fixed } = element.data;
+        const isManualMode = mode === "manual" && !!fixed?.length;
+        if (isManualMode) {
+          const response = await structuredData.getDataContentBulk(fixed, currentSiteInfo?.id);
+          if (isReqOk(response.status)) {
+            const validDataIds: number[] = [];
+            response.data.items.forEach(
+              (data: IStructuredDataContent) => data.relatedSite && validDataIds.push(data.id)
+            );
+            const hasInvalidData = validDataIds.length < fixed.length;
+            validatedModuleCopy.data.fixed = validDataIds;
+            if (hasInvalidData) {
+              error = {
+                type: "warning",
+                text: "Some distributor data were not copied because they are not imported into this site",
+              };
+            }
           }
         }
       }
-    }
 
-    const itemsArr = originalElement[key];
-    itemsArr.push(validatedModuleCopy);
+      itemsArr.push(validatedModuleCopy);
+    });
 
     const updatedPageContent = {
       ...editorContent,
     };
 
-    generatePageContent(updatedPageContent, dispatch, getState);
+    generatePageContent(updatedPageContent)(dispatch, getState);
 
     const { sections: generatedSections } = getStateValues(getState);
     const { element: generatedElement } = findByEditorID(generatedSections, editorID);
@@ -963,40 +991,42 @@ function overwriteHeaderConfig(params: IFieldProps): (dispatch: Dispatch, getSta
   };
 }
 
-function generatePageContent(editorContent: IPage, dispatch: Dispatch, getState: any): void {
-  const {
-    pageEditor: { selectedEditorID, isNewTranslation, template },
-    navigation: { currentDefaultsContent },
-    dataPacks: { configFormData },
-  } = getState();
+function generatePageContent(editorContent: IPage): (dispatch: Dispatch, getState: any) => void {
+  return (dispatch, getState) => {
+    const {
+      pageEditor: { selectedEditorID, isNewTranslation, template },
+      navigation: { currentDefaultsContent },
+      dataPacks: { configFormData },
+    } = getState();
 
-  const { header, footer, isGlobal } = editorContent;
-  const { defaultHeader, defaultFooter } = (configFormData?.templates && configFormData?.templates[template]) || {};
+    const { header, footer, isGlobal } = editorContent;
+    const { defaultHeader, defaultFooter } = (configFormData?.templates && configFormData?.templates[template]) || {};
 
-  const headerID =
-    header === null || header === undefined ? defaultHeader : typeof header === "object" ? header.id : header;
-  const footerID =
-    footer === null || footer === undefined ? defaultFooter : typeof footer === "object" ? footer.id : footer;
+    const headerID =
+      header === null || header === undefined ? defaultHeader : typeof header === "object" ? header.id : header;
+    const footerID =
+      footer === null || footer === undefined ? defaultFooter : typeof footer === "object" ? footer.id : footer;
 
-  const { header: pageHeader, footer: pageFooter } = getPageNavigation(
-    headerID,
-    footerID,
-    currentDefaultsContent,
-    isGlobal
-  );
+    const { header: pageHeader, footer: pageFooter } = getPageNavigation(
+      headerID,
+      footerID,
+      currentDefaultsContent,
+      isGlobal
+    );
+
+    const { pageContent } = generateEditorIDs({ ...editorContent, header: pageHeader, footer: pageFooter });
+    const { element: selectedContent, parent: selectedParent } = findByEditorID({ pageContent }, selectedEditorID);
+    const { component } = selectedContent;
+    const schema = getSchema(component);
 
-  const { pageContent } = generateEditorIDs({ ...editorContent, header: pageHeader, footer: pageFooter });
-  const { element: selectedContent, parent: selectedParent } = findByEditorID({ pageContent }, selectedEditorID);
-  const { component } = selectedContent;
-  const schema = getSchema(component);
-
-  dispatch(setSchema(schema));
-  dispatch(setEditorContent(pageContent));
-  dispatch(updateBreadcrumb(selectedEditorID));
-  dispatch(setSelectedPageContent(selectedContent));
-  dispatch(setSelectedParent(selectedParent));
-  dispatch(setIsLoading(false));
-  if (isNewTranslation) setTranslatedParent()(dispatch, getState);
+    dispatch(setSchema(schema));
+    dispatch(setEditorContent(pageContent));
+    dispatch(updateBreadcrumb(selectedEditorID));
+    dispatch(setSelectedPageContent(selectedContent));
+    dispatch(setSelectedParent(selectedParent));
+    dispatch(setIsLoading(false));
+    if (isNewTranslation) setTranslatedParent()(dispatch, getState);
+  };
 }
 
 function updateEditorContent(
@@ -1023,14 +1053,14 @@ function updateEditorContent(
 
     const timeoutId = setTimeout(() => {
       updatedEditorContent = evalueComputedFields(updatedEditorContent);
-      generatePageContent(updatedEditorContent, dispatch, getState);
+      generatePageContent(updatedEditorContent)(dispatch, getState);
     }, 1500);
 
     dispatch(setLastTimeout(timeoutId));
 
     const isNavigation = ["header", "footer"].includes(key);
     if (isNavigation || (value && typeof value === "object")) {
-      generatePageContent(updatedEditorContent, dispatch, getState);
+      generatePageContent(updatedEditorContent)(dispatch, getState);
     }
   };
 }
@@ -1144,14 +1174,15 @@ function resetPageEditor(): (dispatch: Dispatch) => Promise<void> {
 }
 
 function moveElement(
-  elementID: number,
+  elementID: number[],
   content: any,
   newIndex: number,
   key: string
 ): (dispatch: Dispatch, getState: any) => void {
   return async (dispatch, getState) => {
     try {
-      const { selectedContent, editorContent } = getState().pageEditor;
+      const { editorContent, editorID, selectedContent } = getStateValues(getState);
+
       const newContent = moveModule({
         elementID,
         content,
@@ -1161,9 +1192,11 @@ function moveElement(
         key,
       });
 
-      generatePageContent(newContent, dispatch, getState);
-    } catch {
-      console.log("error in moveModule");
+      dispatch(setEditorContent(newContent));
+      const { element: selectedPageContent } = findByEditorID(newContent, editorID);
+      dispatch(setSelectedPageContent(selectedPageContent));
+    } catch (e) {
+      console.log(e);
     }
   };
 }
@@ -1384,7 +1417,7 @@ function getPageSummary(): (dispatch: Dispatch, getState: any) => Promise<boolea
           const content = deepClone(editorContent);
           content["metaDescription"] = data.summary;
           content["metaKeywords"] = data.keywords;
-          generatePageContent(content, dispatch, getState);
+          generatePageContent(content)(dispatch, getState);
         },
         handleError: () => console.log("Error en GetPageSummary"),
       };
@@ -1409,7 +1442,7 @@ function getPageTranslation(langID: number): (dispatch: Dispatch, getState: any)
       const responseActions = {
         handleSuccess: (data: IPage) => {
           data["canBeTranslated"] = false;
-          generatePageContent(data, dispatch, getState);
+          generatePageContent(data)(dispatch, getState);
           dispatch(setCurrentPageName(data.title));
           dispatch(setIsIATranslated(true));
         },

package/src/containers/PageEditor/interfaces.tsx

@@ -121,7 +121,7 @@ export interface ISetLastElementAddedId {
 
 export interface ISetCopyModule {
   type: typeof SET_COPY_MODULE;
-  payload: { moduleCopy: Record<string, unknown> | null };
+  payload: { moduleCopy: { date: Date; elements: Record<string, unknown>[] } | null };
 }
 
 export interface ISetIsIATranslated {

package/src/containers/PageEditor/reducer.tsx

@@ -1,4 +1,4 @@
-import { IPage, IBreadcrumbItem, ISchema, IErrorItem, IUserEditing } from "@ax/types";
+import { IPage, IBreadcrumbItem, ISchema, IErrorItem, IUserEditing, IModule } from "@ax/types";
 
 import {
   SET_EDITOR_CONTENT,
@@ -48,7 +48,7 @@ export interface IPageEditorState {
   sitePageID: number | null;
   userEditing: IUserEditing | null;
   lastElementAddedId: null | number;
-  moduleCopy: { date: string; element: Record<string, unknown> } | null;
+  moduleCopy: { date: Date; elements: IModule[] } | null;
   isIATranslated: boolean;
   lastTimeout: NodeJS.Timeout | null;
 }

package/src/containers/PageEditor/utils.tsx

@@ -42,7 +42,7 @@ const getStateValues = (getState: any) => {
   } = getState();
   const { header, footer } = editorContent;
 
-  const editorID = selectedEditorID;
+  const editorID: number = selectedEditorID;
   const sections = getTemplateValues(editorContent.template);
 
   return {

package/src/containers/Settings/DataPacks/actions.tsx

@@ -256,7 +256,10 @@ function resetForm(): (dispatch: Dispatch) => void {
   };
 }
 
-function getAvailableSiteDataPacks(queryParams: string | null): (dispatch: Dispatch, getState: any) => Promise<void> {
+function getAvailableSiteDataPacks(
+  queryParams: string | null,
+  loading = true,
+): (dispatch: Dispatch, getState: any) => Promise<void> {
   return async (dispatch, getState) => {
     try {
       const {
@@ -277,7 +280,9 @@ function getAvailableSiteDataPacks(queryParams: string | null): (dispatch: Dispa
 
       const callback = async () => dataPack.getSiteDataPack(currentSiteID, query);
 
-      await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
+      const setLoading = loading ? [appActions.setIsLoading] : [];
+
+      await handleRequest(callback, responseActions, setLoading)(dispatch);
     } catch (e) {
       console.log(e); // TODO: capturar error bien
     }

package/src/forms/elements.tsx

@@ -1,12 +1,13 @@
 import { getDefaultSchema, camelize, isSelectedEditorID, deepClone } from "@ax/helpers";
 import { findByEditorID } from "./editor";
+import { IComponent, IModule } from "@ax/types";
 
 const updateElementCollection = (elementType: string, prevCollection: any[]) => {
   const newElement = getDefaultSchema(elementType);
   return [...prevCollection, newElement];
 };
 
-const addElement = (componentType: any) => {
+const addElement = (componentType: IComponent) => {
   const defaultSchema = getDefaultSchema(componentType.component);
   for (const key in defaultSchema) {
     componentType[key] = defaultSchema[key];
@@ -22,20 +23,24 @@ const updateComponent = (component: any, schema: any) => {
   }
 };
 
-const updateCollection = (type: string, item: any, key: string) =>
+const updateCollection = (type: string, item: IModule, key: string) =>
   (item[key] = updateElementCollection(type, item[key]));
 
-const getUpdatedComponents = (sections: any, component: any, key: string) => {
+const getUpdatedComponents = (
+  sections: any[],
+  component: { editorID: number; type: IComponent | string },
+  key: string
+) => {
   const { editorID, type } = component;
 
   const isCollectionItem = typeof type === "string";
   let selectedIndex = 0;
 
-  const addItem = (item: any) => (isCollectionItem ? updateCollection(type, item, key) : addElement(type));
+  const addItem = (item: IModule) => (isCollectionItem ? updateCollection(type, item, key) : addElement(type));
 
   const sectionEntries = sections.map((section: any, index: number) => {
-    const updatedModules = section.modules.map((module: any) => {
-      const mapValues = (item: any) => {
+    const updatedModules = section.modules.map((module: IModule) => {
+      const mapValues = (item: IModule) => {
         if (item.editorID && item.editorID === editorID) {
           addItem(item);
           selectedIndex = index;
@@ -150,14 +155,15 @@ const updateByEditorID = (content: any, editorID: number, contentKey: string, va
   return content;
 };
 
-const moveElement = (elementID: number, arr: any[], newIndex: number, idKey = "editorID") => {
-  const arrCopy = [...arr];
+const moveElement = (elementID: number[], arr: any[], newIndex: number, idKey = "editorID"): any[] => {
+  const arrCopy = deepClone(arr);
   if (arrCopy.length <= 1) return arrCopy;
-  const elementIndex = arrCopy.findIndex((el: any) => el[idKey] === elementID);
-  const element = { ...arrCopy[elementIndex] };
-  arrCopy.splice(elementIndex, 1);
-  arrCopy.splice(newIndex, 0, element);
-
+  elementID.forEach((id) => {
+    const elementIndex = arrCopy.findIndex((el: any) => el[idKey] === id);
+    const element = { ...arrCopy[elementIndex] };
+    arrCopy.splice(elementIndex, 1);
+    arrCopy.splice(newIndex, 0, element);
+  });
   return arrCopy;
 };
 
@@ -213,7 +219,7 @@ function replaceElements(elements: any, elemType: string): any {
 }
 
 interface IMoveElementParams {
-  elementID: number;
+  elementID: number[];
   content: any;
   newIndex: number;
   selectedContent: any;