@griddo/ax 11.7.12-rc.4 → 11.7.13-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.7.12-rc.4",
+  "version": "11.7.13-rc.0",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -223,5 +223,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "96f4a36f82c95316a44143e8eeec2b0d8fae9ed6"
+  "gitHead": "5a9e624c2b0b432051abcac24ffdb6da14aa95c0"
 }

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/Field/index.tsx

@@ -47,6 +47,7 @@ const Field = (props: IFieldProps): JSX.Element => {
       selectedContent,
       isTemplateActivated,
       theme,
+      moduleCopy,
       disabled,
       site,
       errors,

package/src/containers/PageEditor/actions.tsx

@@ -45,6 +45,7 @@ import {
   getPageNavigation,
   getStateValues,
   protectFormKeys,
+  addElementToCollection,
 } from "./utils";
 import {
   SET_BREADCRUMB,
@@ -679,7 +680,7 @@ function duplicatePage(pageID: number, data: any, siteID?: number): (dispatch: D
 
       const callback = async () => pages.duplicatePage(pageID, data, siteID);
 
-      return await handleRequest(callback, responseActions, [])(dispatch);
+      return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
     } catch (e) {
       console.log(e);
       return false;
@@ -708,27 +709,37 @@ function addComponent(
       type,
     };
 
-    const updatedObj = getUpdatedComponents(sections, component, key);
-    const updatedSections = updatedObj.updatedSections;
+    let lastElementEditorID = null;
 
-    const updatedPageContent = {
-      ...editorContent,
-      template: {
-        ...editorContent.template,
-        ...updatedSections,
-      },
-    };
+    if (sections.length) {
+      const updatedObj = getUpdatedComponents(sections, component, key);
+      const updatedSections = updatedObj.updatedSections;
 
-    generatePageContent(updatedPageContent)(dispatch, getState);
+      const updatedPageContent = {
+        ...editorContent,
+        template: {
+          ...editorContent.template,
+          ...updatedSections,
+        },
+      };
+
+      generatePageContent(updatedPageContent)(dispatch, getState);
+
+      if (typeof type === "object" && Object.prototype.hasOwnProperty.call(type, "editorID")) {
+        setSelectedContent(type.editorID)(dispatch, getState);
+      } else {
+        const { sections: generatedSections } = getStateValues(getState);
 
-    if (typeof type === "object" && Object.prototype.hasOwnProperty.call(type, "editorID")) {
-      setSelectedContent(type.editorID)(dispatch, getState);
+        lastElementEditorID = getLastComponentEditorID(generatedSections, component.editorID, key);
+        dispatch(setLastElementAddedId(lastElementEditorID));
+        localStorage.setItem("selectedID", `${lastElementEditorID}`);
+      }
     } else {
-      const { sections: generatedSections } = getStateValues(getState);
-      const lastElementEditorID = getLastComponentEditorID(generatedSections, component.editorID, key);
-      dispatch(setLastElementAddedId(lastElementEditorID));
-      localStorage.setItem("selectedID", `${lastElementEditorID}`);
+      lastElementEditorID = addElementToCollection(type as string, key, dispatch, getState);
     }
+
+    dispatch(setLastElementAddedId(lastElementEditorID));
+    localStorage.setItem("selectedID", `${lastElementEditorID}`);
   };
 }
 
@@ -747,36 +758,42 @@ function addModule(
       return;
     }
 
-    const componentModule = {
-      editorID,
-      type,
-    };
+    let lastModuleEditorID = null;
 
-    let updatedSections,
-      updatedSectionIndex = 0;
+    if (sections.length) {
+      const componentModule = {
+        editorID,
+        type,
+      };
 
-    if (isComponentModule) {
-      const updatedObj = getUpdatedComponents(sections, componentModule, key);
-      updatedSections = updatedObj.updatedSections;
-      updatedSectionIndex = updatedObj.selectedIndex;
-    } else {
-      const updatedObj = getUpdatedSections(sections, selectedID, type);
-      updatedSections = updatedObj.updatedSections;
-      updatedSectionIndex = updatedObj.selectedIndex;
-    }
+      let updatedSections,
+        updatedSectionIndex = 0;
 
-    const updatedPageContent = {
-      ...editorContent,
-      template: {
-        ...editorContent.template,
-        ...updatedSections,
-      },
-    };
+      if (isComponentModule) {
+        const updatedObj = getUpdatedComponents(sections, componentModule, key);
+        updatedSections = updatedObj.updatedSections;
+        updatedSectionIndex = updatedObj.selectedIndex;
+      } else {
+        const updatedObj = getUpdatedSections(sections, selectedID, type);
+        updatedSections = updatedObj.updatedSections;
+        updatedSectionIndex = updatedObj.selectedIndex;
+      }
 
-    generatePageContent(updatedPageContent)(dispatch, getState);
+      const updatedPageContent = {
+        ...editorContent,
+        template: {
+          ...editorContent.template,
+          ...updatedSections,
+        },
+      };
 
-    const { sections: generatedSections } = getStateValues(getState);
-    const lastModuleEditorID = getLastModuleEditorID(generatedSections, updatedSectionIndex);
+      generatePageContent(updatedPageContent)(dispatch, getState);
+
+      const { sections: generatedSections } = getStateValues(getState);
+      lastModuleEditorID = getLastModuleEditorID(generatedSections, updatedSectionIndex);
+    } else {
+      lastModuleEditorID = addElementToCollection(type, key, dispatch, getState);
+    }
 
     dispatch(setLastElementAddedId(lastModuleEditorID));
     localStorage.setItem("selectedID", `${lastModuleEditorID}`);
@@ -833,12 +850,17 @@ function deleteModule(editorID: number[], key?: string): (dispatch: Dispatch, ge
   return (dispatch, getState) => {
     const { sections, editorContent, errors } = getStateValues(getState);
 
-    const updatedSections: any = [...sections];
-    const { parent, grandParent } = findByEditorID(updatedSections, editorID[0]);
-    const parentModule = Array.isArray(parent) ? grandParent : parent;
+    let itemsArr: IModule[] = [];
+    if (sections.length) {
+      const updatedSections: any = [...sections];
+      const { parent, grandParent } = findByEditorID(updatedSections, editorID[0]);
+      const parentModule = Array.isArray(parent) ? grandParent : parent;
 
-    const parentKey = key ? key : getParentKey(parentModule, editorID[0]);
-    const itemsArr = parentModule[parentKey];
+      const parentKey = key ? key : getParentKey(parentModule, editorID[0]);
+      itemsArr = parentModule[parentKey];
+    } else {
+      itemsArr = editorContent.template[key as string];
+    }
 
     editorID.forEach((moduleID) => {
       const index = itemsArr.findIndex((module: IModule) => module.editorID === moduleID);
@@ -863,7 +885,7 @@ function duplicateModule(editorID: number[], key?: string): (dispatch: Dispatch,
   return (dispatch, getState) => {
     const { sections, editorContent } = getStateValues(getState);
 
-    const updatedSections: any = [...sections];
+    const updatedSections: any[] = sections.length ? [...sections] : [editorContent.template];
 
     const { parent, grandParent } = findByEditorID(updatedSections, editorID[0]);
     const parentModule = Array.isArray(parent) ? grandParent : parent;
@@ -891,9 +913,10 @@ function duplicateModule(editorID: number[], key?: string): (dispatch: Dispatch,
 
     generatePageContent(updatedPageContent)(dispatch, getState);
 
-    const { sections: generatedSections } = getStateValues(getState);
+    const { sections: generatedSections, editorContent: generatedEditor } = getStateValues(getState);
+    const generatedContent = generatedSections.length ? generatedSections : generatedEditor.template;
     const { parent: generatedParent, grandParent: generatedGrandParent } = findByEditorID(
-      generatedSections,
+      generatedContent,
       editorID[0]
     );
     const section = Array.isArray(generatedParent) ? generatedGrandParent : generatedParent;
@@ -907,11 +930,12 @@ function duplicateModule(editorID: number[], key?: string): (dispatch: Dispatch,
 
 function copyModule(editorID: number[]): (dispatch: Dispatch, getState: () => IRootState) => boolean | number {
   return (dispatch, getState) => {
-    const { sections } = getStateValues(getState);
+    const { sections, editorContent } = getStateValues(getState);
     const modulesToCopy: Record<string, unknown>[] = [];
 
+    const content = sections.length ? sections : editorContent.template;
     editorID.forEach((id) => {
-      const { element: originalElement } = findByEditorID(sections, id);
+      const { element: originalElement } = findByEditorID(content, id);
       if (originalElement) {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { editorID, parentEditorID, ...element } = originalElement;
@@ -948,7 +972,7 @@ function pasteModule(
 
     const updatedSections: any = [...sections];
     const { element: originalElement } = findByEditorID(updatedSections, editorID);
-    const itemsArr = originalElement[key];
+    const itemsArr = sections.length ? originalElement[key] : editorContent.template[key];
 
     let error: INotification | undefined;
 
@@ -994,8 +1018,9 @@ function pasteModule(
 
     generatePageContent(updatedPageContent)(dispatch, getState);
 
-    const { sections: generatedSections } = getStateValues(getState);
-    const { element: generatedElement } = findByEditorID(generatedSections, editorID);
+    const { sections: generatedSections, editorContent: generatedEditorContent } = getStateValues(getState);
+    const generatedContent = generatedSections.length ? generatedSections : generatedEditorContent;
+    const { element: generatedElement } = findByEditorID(generatedContent, editorID);
     const pastedEditorID = generatedElement[key][itemsArr.length - 1].editorID;
 
     localStorage.setItem("selectedID", `${pastedEditorID}`);

package/src/containers/PageEditor/utils.tsx

@@ -1,5 +1,7 @@
-import { IIntegration, ISavePageParams } from "@ax/types";
-import { cleanContent, findByComponent } from "@ax/forms";
+import { IIntegration, IRootState, ISavePageParams } from "@ax/types";
+import { cleanContent, findByComponent, updateElementCollection } from "@ax/forms";
+import { Dispatch } from "redux";
+import { generatePageContent } from "./actions";
 
 const getPageParams = (getState: any): ISavePageParams => {
   const {
@@ -135,6 +137,18 @@ const protectFormKeys = (content: any, key: string) => {
   return content;
 };
 
+const addElementToCollection = (type: string, key: string, dispatch: Dispatch, getState: () => IRootState) => {
+  const { editorContent } = getStateValues(getState);
+  const updatedComponent = updateElementCollection(type, editorContent.template[key]);
+  const updatedPageContent = { ...editorContent, template: { ...editorContent.template, [key]: updatedComponent } };
+  generatePageContent(updatedPageContent)(dispatch, getState);
+
+  const { editorContent: generatedEditor } = getStateValues(getState);
+  const generatedElement = generatedEditor.template[key];
+  const lastModuleEditorID = generatedElement[generatedElement.length - 1].editorID as number;
+  return lastModuleEditorID;
+};
+
 export {
   getPageParams,
   getPageData,
@@ -143,4 +157,5 @@ export {
   getDefaultIntegrations,
   getDefaultPageNavigation,
   protectFormKeys,
+  addElementToCollection,
 };

package/src/containers/StructuredData/constants.tsx

@@ -27,6 +27,7 @@ const DEFAULT_PARAMS = {
   pagination: true,
   deleted: false,
   include_draft: true,
+  relatedFields: true,
 };
 
 export {

package/src/forms/editor.tsx

@@ -149,8 +149,9 @@ const getLastModuleEditorID = (sections: any, sectionIndex: number) => {
   return updatedModules[lastModuleIndex].editorID;
 };
 
-const getLastComponentEditorID = (sections: any, parentEditorID: number, key: string) => {
+const getLastComponentEditorID = (sections: any, parentEditorID: number, key: string): number | null => {
   const { element: module } = findByEditorID(sections, parentEditorID);
+  if (!module || module[key] === undefined) return null;
   const lastElementIndex = module[key].length - 1;
   return module[key][lastElementIndex].editorID;
 };

package/src/forms/elements.tsx

@@ -4,7 +4,7 @@ import { IComponent, IModule } from "@ax/types";
 
 const updateElementCollection = (elementType: string, prevCollection: any[]) => {
   const newElement = getDefaultSchema(elementType);
-  return [...prevCollection, newElement];
+  return prevCollection ? [...prevCollection, newElement] : [newElement];
 };
 
 const addElement = (componentType: IComponent) => {
@@ -175,8 +175,7 @@ const moveModule = (params: IMoveElementParams) => {
   const isPage = ["Page", "GlobalPage"].includes(selectedContent.component);
   let newContent;
   if (isPage) {
-    const { modules } = content;
-    const newModules = moveElement(elementID, modules, newIndex);
+    const newModules = moveElement(elementID, content[key], newIndex);
     const { template } = selectedContent;
     const selectedSection = Object.keys(template).find(
       (key: string) => template[key] && template[key].editorID === content.editorID
@@ -192,7 +191,13 @@ const moveModule = (params: IMoveElementParams) => {
             },
           },
         }
-      : null;
+      : {
+          ...selectedContent,
+          template: {
+            ...selectedContent.template,
+            [key]: newModules,
+          },
+        };
   } else {
     const contentElements = content[key];
     const { template } = page;
@@ -240,4 +245,5 @@ export {
   moveElement,
   deleteComponent,
   replaceElements,
+  updateElementCollection,
 };

package/src/forms/fields.tsx

@@ -8,6 +8,7 @@ const getInnerFields = (
   selectedContent: IPage,
   isTemplateActivated: boolean,
   theme: string,
+  moduleCopy: { date: string; element: Record<string, unknown> } | null,
   parentDisabled?: boolean,
   site?: ISite,
   errors?: IErrorItem[],
@@ -28,6 +29,7 @@ const getInnerFields = (
           selectedContent,
           isTemplateActivated,
           theme,
+          moduleCopy,
           parentDisabled,
           site,
           errors,
@@ -51,6 +53,7 @@ const getInnerFields = (
           error={error}
           deleteError={deleteError}
           theme={theme}
+          moduleCopy={moduleCopy}
         />
       );
     })

package/src/forms/index.tsx

@@ -24,6 +24,7 @@ import {
   moveElement,
   deleteComponent,
   replaceElements,
+  updateElementCollection,
 } from "./elements";
 import { getInnerFields, getStructuredDataInnerFields } from "./fields";
 import {
@@ -69,4 +70,5 @@ export {
   checkMaxModules,
   evaluateComputedFields,
   findByComponent,
+  updateElementCollection,
 };

package/src/helpers/index.tsx

@@ -84,7 +84,7 @@ import { getFieldByPath } from "./fields";
 
 import { formatBytes, imageToBase64, getImageFromHtml, getImageFromIFrame } from "./images";
 
-import { isReqOk, handleRequest } from "./requests";
+import { isReqOk, handleRequest, delay } from "./requests";
 
 import {
   dateToString,
@@ -232,4 +232,5 @@ export {
   updateColumns,
   findObjectValue,
   removeDuplicatesByProperty,
+  delay,
 };

package/src/helpers/requests.tsx

@@ -33,4 +33,6 @@ function handleRequest(
   };
 }
 
-export { isReqOk, handleRequest };
+const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
+
+export { isReqOk, handleRequest, delay };

package/src/modules/Content/PageItem/index.tsx

@@ -15,6 +15,7 @@ import {
   IDataPack,
   ILanguage,
   ISchemaField,
+  IRootState,
 } from "@ax/types";
 import { pageStatus, ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
 import {
@@ -56,6 +57,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     hoverCheck,
     createNewTranslation,
     setLanguage,
+    isSaving,
   } = props;
   const { isSelected, siteLanguages, page, lang, isDuplicable } = item;
   const {
@@ -299,7 +301,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
   const mainModalAction = {
     title: "Duplicate",
     onClick: handleDuplicatePage,
-    disabled: !modalState.title.trim() || !modalState.slug.trim(),
+    disabled: !modalState.title.trim() || !modalState.slug.trim() || isSaving,
   };
   const secondaryModalAction = { title: "Cancel", onClick: handleCloseDuplicate };
 
@@ -490,7 +492,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
   const CategoryColumns = categoryColumns.map((col) => {
     if (!activeColumns.includes(col.key)) {
-      return <></>;
+      return <React.Fragment key={col.key} />;
     }
 
     const type: any = structuredDataContent && structuredDataContent[col.key];
@@ -721,11 +723,16 @@ interface IPageItemProps {
   hoverCheck?: boolean;
   createNewTranslation(isNewTranslation: boolean): void;
   setLanguage(lang: { locale: string; id: number | null }): void;
+  isSaving: boolean;
 }
 
+const mapStateToProps = (state: IRootState) => ({
+  isSaving: state.app.isSaving,
+});
+
 const mapDispatchToProps = {
   createNewTranslation: pageEditorActions.createNewTranslation,
   setLanguage: appActions.setLanguage,
 };
 
-export default connect(null, mapDispatchToProps)(PageItem);
+export default connect(mapStateToProps, mapDispatchToProps)(PageItem);

package/src/modules/Forms/FormEditor/Editor/FormConfigPanel/Form/ConnectedField/Field/index.tsx

@@ -37,7 +37,17 @@ const Field = (props: IFieldProps): JSX.Element => {
 
   if (isGroup || isConditional || isArrayGroup) {
     const innerActions = { ...actions, updateValue, goTo };
-    innerFields = getInnerFields(field.fields, innerActions, selectedContent, true, theme, disabled, site, errors);
+    innerFields = getInnerFields(
+      field.fields,
+      innerActions,
+      selectedContent,
+      true,
+      theme,
+      moduleCopy,
+      disabled,
+      site,
+      errors
+    );
   }
 
   return isGroup ? (

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/index.tsx

@@ -11,6 +11,7 @@ import {
   IPage,
   IColumn,
   ISchemaField,
+  IRootState,
 } from "@ax/types";
 import { getHumanLastModifiedDate, getScheduleFormatDate, getStructuredDataTitle, trimText } from "@ax/helpers";
 import { appActions } from "@ax/containers/App";
@@ -62,6 +63,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
     addCategoryColors,
     skipReview,
     hoverCheck,
+    isSaving,
   } = props;
 
   const { locale } = lang;
@@ -287,7 +289,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
   const mainDuplicateModalAction = {
     title: "Duplicate",
     onClick: handleDuplicatePage,
-    disabled: !duplicateModalState.title.trim() || !duplicateModalState.slug.trim(),
+    disabled: !duplicateModalState.title.trim() || !duplicateModalState.slug.trim() || isSaving,
   };
   const secondaryDuplicateModalAction = { title: "Cancel", onClick: toggleDuplicateModal };
 
@@ -368,7 +370,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 
   const CategoryColumns = categoryColumns.map((col) => {
     if (!activeColumns.includes(col.key)) {
-      return <></>;
+      return <React.Fragment key={col.key} />;
     }
 
     const type: any = structuredDataContent && structuredDataContent[col.key];
@@ -514,8 +516,13 @@ interface IGlobalPageItemProps {
   addCategoryColors(cats: string[]): void;
   skipReview?: boolean;
   hoverCheck?: boolean;
+  isSaving: boolean;
 }
 
+const mapStateToProps = (state: IRootState) => ({
+  isSaving: state.app.isSaving,
+});
+
 const mapDispatchToProps = {
   setLanguage: appActions.setLanguage,
   updatePageStatus: pageEditorActions.updatePageStatus,
@@ -529,4 +536,4 @@ const mapDispatchToProps = {
   deleteBulk: pageEditorActions.deleteBulk,
 };
 
-export default connect(null, mapDispatchToProps)(GlobalPageItem);
+export default connect(mapStateToProps, mapDispatchToProps)(GlobalPageItem);

package/src/modules/StructuredData/StructuredDataList/StructuredDataItem/index.tsx

@@ -213,7 +213,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 
   const CategoryColumns = categoryColumns.map((col) => {
     if (!activeColumns.includes(col.key)) {
-      return <></>;
+      return <React.Fragment key={col.key} />;
     }
 
     const type: any = structuredData && structuredData.content && structuredData.content[col.key];