@griddo/ax 1.66.1 → 1.66.4

package/src/components/MainWrapper/AppBar/style.tsx

@@ -7,6 +7,14 @@ const WrapperTabs = styled.div`
   flex-direction: row;
   align-items: center;
   margin-right: auto;
+  flex: 1 1 auto;
+`;
+
+const TabsContent = styled.div`
+  position: absolute;
+  right: 50%;
+  bottom: 0;
+  transform: translateX(50%);
 `;
 
 const WrapperEnd = styled.div`
@@ -20,7 +28,6 @@ const WrapperTitle = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  width: 600px;
   margin-right: ${(p) => p.theme.spacing.xl};
 `;
 
@@ -165,8 +172,8 @@ const ErrorWrapper = styled.div`
   }
 `;
 
-const SearchWrapper = styled.div`
-  width: ${(p) => `calc(${p.theme.spacing.xl} * 5)`};
+const SearchWrapper = styled.div<{ length: number }>`
+  width: ${(p) => `calc(${p.theme.spacing.xl} * ${p.length})`};
   display: flex;
   justify-content: flex-end;
 `;
@@ -191,4 +198,5 @@ export {
   SearchWrapper,
   WrapperEnd,
   WrapperTitle,
+  TabsContent,
 };

package/src/components/MainWrapper/index.tsx

@@ -42,6 +42,8 @@ interface IWrapperProps {
     getDataContent?(dataID?: number): void;
   } | null;
   searchAction?(query: string): void;
+  filterSearchAction?(filter: string): void;
+  searchFilters?: any;
   errors?: IErrorItem[];
   errorActions?: {
     goToError(editorID: number, tab: string, template: boolean): void;

package/src/components/Modal/style.tsx

@@ -77,7 +77,6 @@ export const ModalHeader = styled.div`
 export const ModalContent = styled.div`
   position: relative;
   flex-grow: 1;
-  overflow: auto;
 `;
 
 export const Title = styled.div`

package/src/components/SearchField/index.tsx

@@ -1,13 +1,24 @@
 import { Icon } from "@ax/components";
 import React, { useState } from "react";
+import { Select } from "../Fields";
 
 import * as S from "./style";
 
 const SearchField = (props: IProps): JSX.Element => {
-  const { onChange, placeholder, closeOnInactive = false, searchOnEnter = true, disabled = false } = props;
+  const {
+    onChange,
+    placeholder,
+    closeOnInactive = false,
+    searchOnEnter = true,
+    disabled = false,
+    searchFilters,
+    onFilterChange,
+  } = props;
 
   const [isOpen, setIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState("");
+  const initState = searchFilters && searchFilters[0] ? searchFilters[0].value : "";
+  const [selectValue, setSelectValue] = useState<string>(initState);
 
   const toggleField = () => setIsOpen(!isOpen);
 
@@ -36,12 +47,32 @@ const SearchField = (props: IProps): JSX.Element => {
     }
   };
 
+  const handleSelectChange = (value: string) => {
+    setSelectValue(value);
+    onFilterChange && onFilterChange(value);
+  };
+
   const showField = isOpen || !closeOnInactive;
 
   return (
     <S.Wrapper>
       {showField ? (
-        <S.FieldWrapper>
+        <S.FieldWrapper closeOnInactive={closeOnInactive} disabled={disabled}>
+          {searchFilters && searchFilters.length && (
+            <>
+              <S.FilterWrapper>
+                <Select
+                  name="filterSelect"
+                  value={selectValue}
+                  options={searchFilters}
+                  onChange={handleSelectChange}
+                  type="inline"
+                  placeholder="Filter by"
+                />
+              </S.FilterWrapper>
+              <S.Separator />
+            </>
+          )}
           <S.Input
             type="text"
             value={inputValue}
@@ -50,7 +81,6 @@ const SearchField = (props: IProps): JSX.Element => {
             placeholder={placeholder}
             closeOnInactive={closeOnInactive}
             disabled={disabled}
-            autoFocus
           />
           {inputValue.trim() !== "" && searchOnEnter && <S.HelpText>Press ENTER</S.HelpText>}
           {closeOnInactive || inputValue.length > 0 ? (
@@ -78,6 +108,8 @@ interface IProps {
   closeOnInactive?: boolean;
   searchOnEnter?: boolean;
   disabled?: boolean;
+  searchFilters?: any;
+  onFilterChange?(filter: string): void;
 }
 
-export default SearchField;
+export default SearchField;

package/src/components/SearchField/style.tsx

@@ -5,15 +5,9 @@ const Wrapper = styled.div`
   width: 100%;
 `;
 
-const FieldWrapper = styled.div``;
-
-const Input = styled.input<{ closeOnInactive: boolean; disabled: boolean }>`
-  ${(p) => p.theme.textStyle.fieldContent};
-  color: ${(p) => p.theme.color.textHighEmphasis};
-  background-color: ${(p) => p.theme.color.interactiveBackground};
-  width: 100%;
-  height: ${(p) => p.theme.spacing.l};
-  padding-left: ${(p) => p.theme.spacing.xs};
+const FieldWrapper = styled.div<{ closeOnInactive: boolean; disabled: boolean }>`
+  display: flex;
+  align-items: center;
   border-color: ${(p) =>
     p.disabled
       ? p.theme.color.interactiveDisabled
@@ -23,6 +17,16 @@ const Input = styled.input<{ closeOnInactive: boolean; disabled: boolean }>`
   border-width: ${(p) => (p.closeOnInactive ? "0 0 1px" : "1px")};
   border-style: solid;
   border-radius: ${(p) => (p.closeOnInactive ? 0 : p.theme.radii.s)};
+`;
+
+const Input = styled.input<{ closeOnInactive: boolean; disabled: boolean }>`
+  ${(p) => p.theme.textStyle.fieldContent};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  background-color: ${(p) => p.theme.color.interactiveBackground};
+  flex: 1 1 auto;
+  height: ${(p) => p.theme.spacing.l};
+  padding-left: ${(p) => p.theme.spacing.xs};
+  border: none;
 
   &:active,
   &:focus {
@@ -66,4 +70,13 @@ const IconCloseWrapper = styled.div`
   transform: translateY(-50%);
 `;
 
-export { Wrapper, IconSearchWrapper, FieldWrapper, Input, HelpText, IconCloseWrapper };
+const FilterWrapper = styled.div``;
+
+const Separator = styled.div`
+  border-right: 1px solid ${(p) => p.theme.color.uiLine};
+  height: ${(p) => p.theme.spacing.m};
+  margin-right: ${(p) => p.theme.spacing.xs};
+  margin-left: ${(p) => p.theme.spacing.s};
+`;
+
+export { Wrapper, IconSearchWrapper, FieldWrapper, Input, HelpText, IconCloseWrapper, FilterWrapper, Separator };

package/src/components/SideModal/style.tsx

@@ -11,7 +11,8 @@ const Wrapper = styled.div<{ optionsType?: string }>`
 
   height: 100vh;
   background: ${(p) => p.theme.colors.uiBackground01};
-  box-shadow: ${(p) => (p.optionsType && placeRight.includes(p.optionsType) ? p.theme.shadow.rightPanel : p.theme.shadow.leftPanel)};
+  box-shadow: ${(p) =>
+    p.optionsType && placeRight.includes(p.optionsType) ? p.theme.shadow.rightPanel : p.theme.shadow.leftPanel};
   padding-bottom: calc(${(p) => p.theme.spacing.m} * 2);
 `;
 
@@ -31,11 +32,10 @@ const Header = styled.div`
   }
 `;
 
-const Title = styled.h6`
-`;
+const Title = styled.h6``;
 
 const ColumnsWrapper = styled.div`
-  display:flex;
+  display: flex;
 `;
 
 const Content = styled.div`
@@ -64,11 +64,11 @@ const FeaturedWrapper = styled.div`
 `;
 
 const SearchWrapper = styled.div`
-  width: ${p => `calc(${p.theme.spacing.xl} * 4)`};
+  width: ${(p) => `calc(${p.theme.spacing.xl} * 4)`};
 `;
 
 const Link = styled.div<{ active: boolean }>`
-  color: ${p => p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis};
+  color: ${(p) => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};
 `;
 
 const ButtonWrapper = styled.div`

package/src/components/TableFilters/StatusFilter/index.tsx

@@ -4,7 +4,7 @@ import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
 
 import * as S from "./style";
 
-const StatusFilter = (props: IStatusFilterProps) => {
+const StatusFilter = (props: IStatusFilterProps): JSX.Element => {
   const { sortItems, sortedState, isStructuredData } = props;
   const { isAscending, sortedByDate } = sortedState;
   const value = isStructuredData ? "date" : "modified";
@@ -46,7 +46,7 @@ const StatusFilter = (props: IStatusFilterProps) => {
 
 interface IStatusFilterProps {
   sortedState: any;
-  sortItems(orderPointer: string, isAscendent: boolean): any;
+  sortItems(orderPointer: string, isAscendent: boolean): void;
   isStructuredData?: boolean;
 }
 

package/src/components/index.tsx

@@ -13,6 +13,7 @@ import {
   HeadingField,
   HiddenField,
   ImageField,
+  LinkField,
   NoteField,
   NumberField,
   RadioField,
@@ -105,6 +106,7 @@ export {
   HeadingField,
   HiddenField,
   ImageField,
+  LinkField,
   NoteField,
   NumberField,
   RadioField,

package/src/containers/App/actions.tsx

@@ -99,14 +99,10 @@ function resetError(): ISetErrorAction {
 
 function handleError(response: any): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
-    const {
-      data: { code, message },
-      btnText,
-      actionsBelow,
-    } = response;
+    const { data, btnText, actionsBelow, text } = response;
     const error = {
-      code,
-      text: message,
+      code: data?.code,
+      text: data?.message || text,
       btnText,
       actionsBelow,
     };

package/src/containers/PageEditor/actions.tsx

@@ -26,6 +26,10 @@ import {
   replaceElements,
   findFieldsErrors,
   getParentKey,
+  checkMaxModules,
+  checkH1content,
+  parseValidationErrors,
+  findPackagesActivationErrors,
 } from "@ax/forms";
 import { appActions } from "@ax/containers/App";
 import { navigationActions } from "@ax/containers/Navigation";
@@ -50,8 +54,8 @@ import {
   SET_VALIDATED,
   SET_SITE_PAGE_ID,
   SET_USER_EDITING,
-  SET_LAST_ELEMENT_ADDED_ID,
   SET_COPY_MODULE,
+  SET_LAST_ELEMENT_ADDED_ID,
 } from "./constants";
 
 import {
@@ -85,11 +89,11 @@ import {
   ISetSitePageID,
   ISetUserEditing,
   pageStatus,
-  ISetLastElementAddedId,
   ISetCopyModule,
+  ISetLastElementAddedId,
 } from "./interfaces";
 
-const { setIsLoading, setIsSaving } = appActions;
+const { setIsLoading, setIsSaving, handleError } = appActions;
 const { getSiteDefaults, getDefaults } = navigationActions;
 
 // AUDIT: THIS FILE IS WAY TOO LONG - LOOK FOR A REFACTOR SOLUTION
@@ -167,14 +171,14 @@ function setUserEditing(userEditing: IUserEditing | null): ISetUserEditing {
   return { type: SET_USER_EDITING, payload: { userEditing } };
 }
 
-function setLastElementAddedId(lastElementAddedId: null | number): ISetLastElementAddedId {
-  return { type: SET_LAST_ELEMENT_ADDED_ID, payload: { lastElementAddedId } };
-}
-
 function setCopyModule(moduleCopy: Record<string, unknown> | null): ISetCopyModule {
   return { type: SET_COPY_MODULE, payload: { moduleCopy } };
 }
 
+function setLastElementAddedId(lastElementAddedId: null | number): ISetLastElementAddedId {
+  return { type: SET_LAST_ELEMENT_ADDED_ID, payload: { lastElementAddedId } };
+}
+
 function setTranslatedParent(): (dispatch: Dispatch, getState: any) => void {
   return async (dispatch, getState) => {
     try {
@@ -197,7 +201,7 @@ function setTranslatedParent(): (dispatch: Dispatch, getState: any) => void {
           const translatedParentId = translatedParent && translatedParent[0] ? translatedParent[0].pageId : null;
           updateEditorContent(selectedEditorID, "parent", translatedParentId)(dispatch, getState);
         },
-        handleError: (response: any) => appActions.handleError(response)(dispatch),
+        handleError: (response: any) => handleError(response)(dispatch),
       };
 
       const callback = async () => pages.getPageLanguages(parent, site, entity);
@@ -551,18 +555,29 @@ function getPageLanguages(pageID: number, siteID: number | null, entity?: string
   };
 }
 
-function duplicatePage(pageID: number, data: any): (dispatch: any) => Promise<void> {
+function duplicatePage(pageID: number, data: any, siteID?: number): (dispatch: Dispatch) => Promise<boolean> {
   return async (dispatch) => {
     try {
-      const response: { status: number; data: IPage } = await pages.duplicatePage(pageID, data);
-      if (isReqOk(response.status)) {
-        dispatch(setCurrentPageID(response.data.id));
-        dispatch(setCurrentPageStatus("offline"));
-      } else {
-        console.log("Error en duplicate Page"); // FIXME: capturar errores mejor
-      }
+      const responseActions = {
+        handleSuccess: (data: any) => {
+          if (!siteID) {
+            dispatch(setCurrentPageID(data.id));
+            dispatch(setCurrentPageStatus("offline"));
+          }
+          return true;
+        },
+        handleError: (response: any) => {
+          appActions.handleError(response)(dispatch);
+          return false;
+        },
+      };
+
+      const callback = async () => pages.duplicatePage(pageID, data, siteID);
+
+      return await handleRequest(callback, responseActions, [])(dispatch);
     } catch (e) {
-      console.log(e); // FIXME: capturar errores mejor
+      console.log(e);
+      return false;
     }
   };
 }
@@ -617,6 +632,13 @@ function addModule(
 ): (dispatch: Dispatch, getState: any) => void {
   return (dispatch, getState) => {
     const { editorContent, sections, editorID } = getStateValues(getState);
+
+    const { isMaxModules, errorMessage } = checkMaxModules(editorContent, type);
+    if (isMaxModules) {
+      handleError({ text: errorMessage })(dispatch);
+      return;
+    }
+
     const componentModule = {
       editorID,
       type,
@@ -691,7 +713,7 @@ function replaceElementsInCollection(newValue: string, reference: string): (disp
 
 function deleteModule(editorID: number, key?: string): (dispatch: Dispatch, getState: any) => void {
   return (dispatch, getState) => {
-    const { sections, editorContent } = getStateValues(getState);
+    const { sections, editorContent, errors } = getStateValues(getState);
 
     const updatedSections: any = [...sections];
     const { parent, grandParent } = findByEditorID(updatedSections, editorID);
@@ -707,6 +729,10 @@ function deleteModule(editorID: number, key?: string): (dispatch: Dispatch, getS
       ...editorContent,
     };
 
+    if (errors.length) {
+      validatePage()(dispatch, getState);
+    }
+
     generatePageContent(updatedPageContent, dispatch, getState);
 
     dispatch(setLastElementAddedId(null));
@@ -719,6 +745,13 @@ function duplicateModule(editorID: number, key?: string): (dispatch: Dispatch, g
 
     const updatedSections: any = [...sections];
     const { element: originalItem, parent, grandParent } = findByEditorID(updatedSections, editorID);
+
+    const { isMaxModules, errorMessage } = checkMaxModules(editorContent, originalItem.component);
+    if (isMaxModules) {
+      handleError({ text: errorMessage })(dispatch);
+      return;
+    }
+
     const parentModule = Array.isArray(parent) ? grandParent : parent;
 
     const parentKey = key ? key : getParentKey(parentModule, editorID);
@@ -1025,16 +1058,52 @@ function getTemplateConfig(template: string): (dispatch: Dispatch, getState: any
   };
 }
 
-function validatePage(publish: boolean): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+function validatePage(publish?: boolean, browserRef?: any): (dispatch: Dispatch, getState: any) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       const { editorContent } = getStateValues(getState);
 
-      const errors = findFieldsErrors(editorContent);
-      dispatch(setErrors(errors));
-      if (errors.length === 0) {
+      const {
+        dataPacks: { modules, templates },
+        pageEditor,
+      } = getState();
+
+      const page = getPageData(getState, false);
+      const { values } = parseData(page, false);
+
+      let errors: IErrorItem[] = [];
+
+      const responseActions = {
+        handleSuccess: (data: any) => {
+          const apiErrors = parseValidationErrors(data, editorContent);
+          errors = [...errors, ...apiErrors];
+        },
+        handleError: () => console.log("Error en page check"),
+      };
+
+      const callback = async () => pages.pageCheck(values);
+
+      await handleRequest(callback, responseActions, [])(dispatch);
+
+      const fieldErrors = findFieldsErrors(editorContent);
+      errors = [...errors, ...fieldErrors];
+      const packagesActivationErrors = findPackagesActivationErrors(pageEditor, modules, templates);
+      errors = packagesActivationErrors ? [...errors, packagesActivationErrors] : errors;
+
+      let warnings: IErrorItem[] = [];
+      if (browserRef && browserRef.current) {
+        const h1Warning = checkH1content(browserRef.current);
+        warnings = h1Warning ? [...warnings, h1Warning] : warnings;
+      }
+
+      const allErrors = [...errors, ...warnings];
+
+      dispatch(setErrors(allErrors));
+      if (!allErrors.length) {
         !publish && dispatch(setValidated(true));
         return true;
+      } else if (publish && !errors.length) {
+        return true;
       } else {
         dispatch(setValidated(false));
         return false;

package/src/containers/PageEditor/constants.tsx

@@ -18,8 +18,8 @@ export const SET_ERRORS = `${NAME}/SET_ERRORS`;
 export const SET_VALIDATED = `${NAME}/SET_VALIDATED`;
 export const SET_SITE_PAGE_ID = `${NAME}/SET_SITE_PAGE_ID`;
 export const SET_USER_EDITING = `${NAME}/SET_USER_EDITING`;
-export const SET_LAST_ELEMENT_ADDED_ID = `${NAME}/SET_LAST_ELEMENT_ADDED_ID`;
 export const SET_COPY_MODULE = `${NAME}/SET_COPY_MODULE`;
+export const SET_LAST_ELEMENT_ADDED_ID = `${NAME}/SET_LAST_ELEMENT_ADDED_ID`;
 
 export const INITIAL_TEMPLATE = "BasicTemplate";
 export const MULTIMEDIA_COMPONENTS = ["LinkableImage", "Video"];

package/src/containers/PageEditor/interfaces.tsx

@@ -17,8 +17,8 @@ import {
   SET_VALIDATED,
   SET_SITE_PAGE_ID,
   SET_USER_EDITING,
-  SET_LAST_ELEMENT_ADDED_ID,
   SET_COPY_MODULE,
+  SET_LAST_ELEMENT_ADDED_ID,
 } from "./constants";
 import { IBreadcrumbItem, ISchema, IPage, IErrorItem, IUserEditing } from "@ax/types";
 
@@ -112,16 +112,16 @@ export interface ISetUserEditing {
   payload: { userEditing: IUserEditing | null };
 }
 
-export interface ISetLastElementAddedId {
-  type: typeof SET_LAST_ELEMENT_ADDED_ID;
-  payload: { lastElementAddedId: null | number };
-}
-
 export interface ISetCopyModule {
   type: typeof SET_COPY_MODULE;
   payload: { moduleCopy: Record<string, unknown> | null };
 }
 
+export interface ISetLastElementAddedId {
+  type: typeof SET_LAST_ELEMENT_ADDED_ID;
+  payload: { lastElementAddedId: null | number };
+}
+
 export interface IFieldProps {
   id: number;
   key: string;

package/src/containers/PageEditor/reducer.tsx

@@ -20,8 +20,8 @@ import {
   SET_VALIDATED,
   SET_SITE_PAGE_ID,
   SET_USER_EDITING,
-  SET_LAST_ELEMENT_ADDED_ID,
   SET_COPY_MODULE,
+  SET_LAST_ELEMENT_ADDED_ID,
 } from "./constants";
 
 import { PageEditorActionsCreators } from "./interfaces";
@@ -45,8 +45,8 @@ export interface IPageEditorState {
   validated: boolean;
   sitePageID: number | null;
   userEditing: IUserEditing | null;
-  lastElementAddedId: null | number;
   moduleCopy: { date: string; element: Record<string, unknown> } | null;
+  lastElementAddedId: null | number;
 }
 
 export const initialState = {
@@ -68,8 +68,8 @@ export const initialState = {
   validated: false,
   sitePageID: null,
   userEditing: null,
-  lastElementAddedId: null,
   moduleCopy: null,
+  lastElementAddedId: null,
 };
 
 export function reducer(state = initialState, action: PageEditorActionsCreators): IPageEditorState {
@@ -93,8 +93,8 @@ export function reducer(state = initialState, action: PageEditorActionsCreators)
     case SET_VALIDATED:
     case SET_SITE_PAGE_ID:
     case SET_USER_EDITING:
-    case SET_LAST_ELEMENT_ADDED_ID:
     case SET_COPY_MODULE:
+    case SET_LAST_ELEMENT_ADDED_ID:
       return { ...state, ...action.payload };
     default:
       return state;

package/src/containers/PageEditor/utils.tsx

@@ -38,7 +38,7 @@ const getTemplateValues = (template: any) => {
 
 export const getStateValues = (getState: any) => {
   const {
-    pageEditor: { editorContent: pageContent, selectedEditorID, selectedContent, template },
+    pageEditor: { editorContent: pageContent, selectedEditorID, selectedContent, template, errors },
   } = getState();
   const { editorContent, header, footer } = pageContent;
 
@@ -53,6 +53,7 @@ export const getStateValues = (getState: any) => {
     editorID,
     template,
     selectedContent,
+    errors,
   };
 };