@griddo/ax 1.65.11 → 1.65.14

package/src/components/Fields/UrlField/utils.tsx

@@ -1,6 +1,58 @@
+import { getSchema } from "@ax/helpers";
 import { IPage, ISelectOption } from "@ax/types";
 
+const findSchemaComponentArrays = (component: string) => {
+  const keys: string[] = [];
+  const schemaTabs = getSchema(component).configTabs;
+  schemaTabs.forEach((tab: any) => {
+    tab.fields.forEach((field: any) => {
+      if (field.type === "ComponentArray") {
+        keys.push(field.key);
+      }
+    });
+  });
+  return keys;
+};
+
+const findAnchorsFromModule = (module: any) => {
+  if (!module) return [];
+  let options: ISelectOption[] = [];
+
+  if (module.anchorID && module.anchorID.trim() !== "") {
+    const option = { value: module.anchorID, label: module.anchorID };
+    options.push(option);
+  }
+
+  const arrayKeys = findSchemaComponentArrays(module.component);
+  if (arrayKeys.length) {
+    arrayKeys.forEach((key: string) => {
+      module[key].forEach((element: any) => {
+        const subOptions = findAnchorsFromModule(element);
+        options = [...options, ...subOptions];
+      });
+    });
+  }
+
+  return options;
+};
+
 const findAnchorsFromPage = (page: IPage): ISelectOption[] => {
+  let options: ISelectOption[] = [];
+  const { template } = page;
+  const sections = Object.keys(template)
+    .map((key: string) => template[key])
+    .filter((value: any) => typeof value === "object" && value !== null && value.component === "Section");
+
+  sections.forEach((section: any) => {
+    section.modules.forEach((module: any) => {
+      const sectionOptions = findAnchorsFromModule(module);
+      options = [...options, ...sectionOptions];
+    });
+  });
+  return options;
+};
+
+const findTabsFromPage = (page: IPage): ISelectOption[] => {
   const options: ISelectOption[] = [];
   const { template } = page;
   const sections = Object.keys(template)
@@ -9,20 +61,10 @@ const findAnchorsFromPage = (page: IPage): ISelectOption[] => {
 
   sections.forEach((section: any) => {
     section.modules.forEach((module: any) => {
-      if (module.anchorID && module.anchorID.trim() !== "") {
-        const option = { value: module.anchorID, label: module.anchorID };
-        options.push(option);
-      }
-      if (module.elements) {
+      if (module.hasGriddoMultiPage && module.elements) {
         module.elements.forEach((element: any) => {
-          element.componentModules &&
-            Array.isArray(element.componentModules) &&
-            element.componentModules.forEach((component: any) => {
-              if (component.anchorID && component.anchorID.trim() !== "") {
-                const option = { value: component.anchorID, label: component.anchorID };
-                options.push(option);
-              }
-            });
+          const option = { value: element.sectionSlug, label: element.title };
+          options.push(option);
         });
       }
     });
@@ -30,4 +72,22 @@ const findAnchorsFromPage = (page: IPage): ISelectOption[] => {
   return options;
 };
 
-export { findAnchorsFromPage };
+const findAnchorsFromTab = (page: IPage, tabSlug: string): ISelectOption[] => {
+  let options: ISelectOption[] = [];
+  const { template } = page;
+  const sections = Object.keys(template)
+    .map((key: string) => template[key])
+    .filter((value: any) => typeof value === "object" && value !== null && value.component === "Section");
+
+  sections.forEach((section: any) => {
+    section.modules.forEach((module: any) => {
+      if (module.hasGriddoMultiPage) {
+        const tab = module.elements.find((elem: any) => elem.sectionSlug === tabSlug);
+        options = findAnchorsFromModule(tab);
+      }
+    });
+  });
+  return options;
+};
+
+export { findAnchorsFromPage, findTabsFromPage, findAnchorsFromTab };

package/src/components/FieldsBehavior/index.tsx

@@ -73,7 +73,7 @@ const FieldsBehavior = (props: any): JSX.Element => {
   };
   return (
     <S.Wrapper error={errorField} className={wrapperClass} showTitle={showTitle} id={objKey}>
-      <S.Content error={errorField}>
+      <S.Content data-testid="contentWrapper" error={errorField}>
         <Field {...props} showAdvanced={showAdvanced} handleValidation={handleValidation} error={errorField} />
       </S.Content>
       <S.Header className="fieldHeader">

package/src/containers/StructuredData/actions.tsx

@@ -3,6 +3,7 @@ import {
   SET_CATEGORIES,
   SET_STRUCTURED_DATA,
   SET_CURRENT_STRUCTURED_DATA,
+  SET_CURRENT_STRUCTURED_DATA_ID,
   SET_CURRENT_STRUCTURED_DATA_CONTENTS,
   SET_CATEGORY,
   SET_SCHEMA,
@@ -21,6 +22,7 @@ import {
   ISetCategories,
   ISetStructuredData,
   ISetCurrentData,
+  ISetCurrentDataID,
   ISetCurrentDataContent,
   ISetIsActive,
   ISetCategory,
@@ -56,6 +58,10 @@ function setCurrentData(currentStructuredData: any): ISetCurrentData {
   return { type: SET_CURRENT_STRUCTURED_DATA, payload: { currentStructuredData } };
 }
 
+function setCurrentDataID(currentStructuredDataId: any): ISetCurrentDataID {
+  return { type: SET_CURRENT_STRUCTURED_DATA_ID, payload: { currentStructuredDataId } };
+}
+
 function setCurrentDataContent(currentDataContent: any): ISetCurrentDataContent {
   return { type: SET_CURRENT_STRUCTURED_DATA_CONTENTS, payload: { currentDataContent } };
 }
@@ -530,6 +536,7 @@ export {
   setCategories,
   setStructuredData,
   setCurrentData,
+  setCurrentDataID,
   setCategory,
   setSchema,
   setForm,

package/src/containers/StructuredData/constants.tsx

@@ -4,6 +4,7 @@ const SET_IS_ACTIVE = `${NAME}/SET_IS_ACTIVE`;
 const SET_CATEGORIES = `${NAME}/SET_CATEGORIES`;
 const SET_STRUCTURED_DATA = `${NAME}/SET_STRUCTURED_DATA`;
 const SET_CURRENT_STRUCTURED_DATA = `${NAME}/SET_CURRENT_STRUCTURED_DATA`;
+const SET_CURRENT_STRUCTURED_DATA_ID = `${NAME}/SET_CURRENT_STRUCTURED_DATA_ID`;
 const SET_CURRENT_STRUCTURED_DATA_CONTENTS = `${NAME}/SET_CURRENT_STRUCTURED_DATA_CONTENTS`;
 const SET_CATEGORY = `${NAME}/SET_CATEGORY`;
 const SET_SCHEMA = `${NAME}/SET_SCHEMA`;
@@ -30,6 +31,7 @@ export {
   SET_CATEGORIES,
   SET_STRUCTURED_DATA,
   SET_CURRENT_STRUCTURED_DATA,
+  SET_CURRENT_STRUCTURED_DATA_ID,
   SET_CURRENT_STRUCTURED_DATA_CONTENTS,
   SET_CATEGORY,
   SET_SCHEMA,

package/src/containers/StructuredData/interfaces.tsx

@@ -2,6 +2,7 @@ import {
   SET_CATEGORIES,
   SET_STRUCTURED_DATA,
   SET_CURRENT_STRUCTURED_DATA,
+  SET_CURRENT_STRUCTURED_DATA_ID,
   SET_CURRENT_STRUCTURED_DATA_CONTENTS,
   SET_SCHEMA,
   UPDATE_FORM,
@@ -30,6 +31,11 @@ export interface ISetCurrentData {
   payload: { currentStructuredData: any };
 }
 
+export interface ISetCurrentDataID {
+  type: typeof SET_CURRENT_STRUCTURED_DATA_ID;
+  payload: { currentStructuredDataId: number };
+}
+
 export interface ISetCategory {
   type: typeof SET_CATEGORY;
   payload: { category: ICategory };
@@ -79,4 +85,5 @@ export type CategoryActionsCreators = ISetCategories & ISetCurrentData;
 export type StructuredDataActionsCreators = CategoryActionsCreators &
   ISetStructuredData &
   ISetCurrentData &
+  ISetCurrentDataID &
   ISetCurrentDataContent;

package/src/containers/StructuredData/reducer.tsx

@@ -3,6 +3,7 @@ import {
   SET_CATEGORIES,
   SET_STRUCTURED_DATA,
   SET_CURRENT_STRUCTURED_DATA,
+  SET_CURRENT_STRUCTURED_DATA_ID,
   SET_CURRENT_STRUCTURED_DATA_CONTENTS,
   SET_CATEGORY,
   SET_SCHEMA,
@@ -23,6 +24,7 @@ export interface IStructuredDataState {
   categories: { global: IStructuredData[]; site: IStructuredData[] };
   structuredData: { global: IStructuredData[]; site: IStructuredData[] };
   currentStructuredData: IStructuredData | null;
+  currentStructuredDataId: number | null;
   currentDataContent: IStructuredDataContent[];
   category: ICategory;
   schema: any;
@@ -39,6 +41,7 @@ export const initialState = {
   categories: { global: [], site: [] },
   structuredData: { global: [], site: [] },
   currentStructuredData: null,
+  currentStructuredDataId: null,
   currentDataContent: [],
   category: { name: "", code: "", lang: null, isTranslation: false, isNew: true },
   schema: {},
@@ -55,6 +58,7 @@ export function reducer(state = initialState, action: StructuredDataActionsCreat
     case SET_CATEGORIES:
     case SET_STRUCTURED_DATA:
     case SET_CURRENT_STRUCTURED_DATA:
+    case SET_CURRENT_STRUCTURED_DATA_ID:
     case SET_CURRENT_STRUCTURED_DATA_CONTENTS:
     case SET_CATEGORY:
     case SET_SCHEMA:

package/src/modules/StructuredData/Form/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 
 import { IDataPack, IErrorItem, IRootState, ISite } from "@ax/types";
@@ -39,6 +39,8 @@ const Form = (props: IProps) => {
     errors,
     validated,
     validateForm,
+    currentStructuredDataId,
+    resetForm,
   } = props;
 
   const [isNewStructuredData, setIsNewStructuredData] = useState(!form.id);
@@ -56,6 +58,11 @@ const Form = (props: IProps) => {
 
   const theme = getDefaultTheme();
 
+  useEffect(() => {
+    resetForm();
+    currentStructuredDataId && getDataContent(currentStructuredDataId);
+  }, [currentStructuredDataId]);
+
   const Fields =
     fields &&
     fields.map((field: any, i: number) => {
@@ -315,6 +322,8 @@ interface IProps {
   setDataStatus(id: number, status: string): Promise<boolean>;
   deleteStructuredDataContent(id: number): Promise<boolean>;
   validateForm(publish?: boolean): Promise<boolean>;
+  currentStructuredDataId: number | null;
+  resetForm(): void;
 }
 
 const mapStateToProps = (state: IRootState) => ({
@@ -322,6 +331,7 @@ const mapStateToProps = (state: IRootState) => ({
   form: state.structuredData.form,
   site: state.sites.currentSiteInfo,
   currentStructuredData: state.structuredData.currentStructuredData,
+  currentStructuredDataId: state.structuredData.currentStructuredDataId,
   isSaving: state.app.isSaving,
   isLoading: state.app.isLoading,
   lang: state.app.lang,
@@ -343,6 +353,7 @@ const mapDispatchToProps = {
   setDataStatus: structuredDataActions.setStatusStructuredDataContent,
   deleteStructuredDataContent: structuredDataActions.deleteStructuredDataContent,
   validateForm: structuredDataActions.validateForm,
+  resetForm: structuredDataActions.resetForm,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Form);

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

@@ -21,6 +21,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
     setLanguage,
     setEntity,
     currentStructuredData,
+    setCurrentDataID,
     resetForm,
     isSelected,
     onChange,
@@ -52,8 +53,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
   };
 
   const _handleClick = () => {
-    resetForm();
-    updateForm(structuredData);
+    setCurrentDataID(structuredData.id);
     handleClick();
   };
 
@@ -244,6 +244,7 @@ interface IStructuredDataItemProps {
   columns: Record<string, IColumn>;
   categoryColors: any;
   addCategoryColors(cats: string[]): void;
+  setCurrentDataID(id: number | null): void;
 }
 
 const mapStateToProps = (state: IRootState) => ({
@@ -258,6 +259,7 @@ const mapDispatchToProps = {
   resetForm: structuredDataActions.resetForm,
   setLanguage: appActions.setLanguage,
   setDataStatus: structuredDataActions.setStatusStructuredDataContent,
+  setCurrentDataID: structuredDataActions.setCurrentDataID,
 };
 
 const memoizedComponent = memo(StructuredDataItem);

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

@@ -171,6 +171,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
       include_draft: true,
       query: searchQuery,
       format: "list",
+      relatedFields: true,
     };
 
     return params;

package/src/types/index.tsx

@@ -164,6 +164,7 @@ export interface IUrlField {
   noFollow?: boolean;
   anchor?: string;
   title?: string;
+  subSlug?: string;
 }
 
 export interface IHeadingField {
@@ -298,6 +299,7 @@ export interface IGetStructuredDataParams {
   include_draft: boolean;
   query?: string;
   filterQuery?: string;
+  relatedFields?: boolean;
 }
 
 export interface IMenu {
@@ -720,11 +722,11 @@ export interface IDimensionsGroup {
 }
 
 export interface ITemplate {
-  dataPacks: string[],
-  id: string,
-  thumbnails: Record<string, string>,
-  title: string,
-  type: { label: string, value: string, mode: string },
+  dataPacks: string[];
+  id: string;
+  thumbnails: Record<string, string>;
+  title: string;
+  type: { label: string; value: string; mode: string };
 }
 
 export type Field =