@griddo/ax 1.57.22 → 1.58.0

package/src/components/Fields/UrlField/PageFinder/index.tsx

@@ -1,18 +1,25 @@
 import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
 
-import { IPage, IRootState } from "@ax/types";
+import { IContentType, IGlobalLanguage, IPage, IRootState, ISite } from "@ax/types";
 import { useDebounce } from "@ax/hooks";
-import { isReqOk } from "@ax/helpers";
-import { sites } from "@ax/api";
-import { Loader, Pagination, TextField } from "@ax/components";
+import { getStructuredDataTitle, isReqOk } from "@ax/helpers";
+import { sites, structuredData } from "@ax/api";
+import { Loader, Pagination, TextField, Select } from "@ax/components";
 import SelectionListItem from "./SelectionListItem";
 
 import * as S from "./style";
 
 const PageFinder = (props: IPageFinderProps): JSX.Element => {
-  const { onClick, currentSiteID, isOpen } = props;
+  const { onClick, currentSiteID, isOpen, allSites, lang, globalLangs } = props;
+
+  const siteOptions = allSites.map((site) => ({ label: site.name, value: site.id.toString() }));
+  const langOptions = globalLangs.map((lang) => ({ label: lang.label, value: lang.id.toString() }));
+
   const initialState = {
+    site: currentSiteID || Number(siteOptions[0].value),
+    lang: lang.id,
+    type: "all",
     query: "",
     items: [],
     page: 1,
@@ -22,10 +29,16 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
   const [isLoading, setIsLoading] = useState(false);
   const debouncedSearch = useDebounce(state.query);
 
+  const allTypesOption = { label: "All content", value: "all" };
+  const [contentTypeOptions, setContentTypeOptions] = useState<{ label: string, value: string }[]>([{ ...allTypesOption }]);
+  const changeContentTypeOptions = (types: { label: string, value: string }[]) => setContentTypeOptions([allTypesOption, ...types]);
+
   const itemsPerPage = 50;
 
   const resetQuery = () => setState((state) => ({ ...state, query: "" }));
 
+  const changeState = (key: string, value: string | number) => setState((state) => ({ ...state, [key]: value }));
+
   useEffect(() => {
     if (!isOpen) resetQuery();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -34,22 +47,24 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
   useEffect(() => {
     let isMounted = true;
     const params = {
-      siteID: currentSiteID,
+      siteID: state.site,
       deleted: false,
       page: state.page,
       itemsPerPage,
       query: debouncedSearch,
+      lang: state.lang,
+      filterStructuredData: state.type,
     };
 
     const getAndSetItems = async () => {
       if (!isMounted) return;
 
       setIsLoading(true);
-      const response: { status: number; data: { totalItems: number; items: any } } = await sites.getSitePagesLight(
+      const response: { status: number; data: { totalItems: number; items: any } } = await sites.getSitePages(
         params
       );
       if (isReqOk(response.status)) {
-        setState({ ...state, items: response.data.items, totalItems: response.data.totalItems });
+        setState((state) => ({ ...state, items: response.data.items, totalItems: response.data.totalItems }));
       } else {
         console.log("Error en getAndSetItems");
       }
@@ -61,17 +76,30 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
       isMounted = false;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentSiteID, debouncedSearch, state.page]);
+  }, [currentSiteID, debouncedSearch, state.page, state.lang, state.site, state.type]);
+
+  const getAndSetContentTypes = async () => {
+    const { site, lang } = state;
+    const { data } = await structuredData.getContentTypes(site, lang);
+    const contentTypes = data.items.map((type: IContentType) => ({ label: type.title, value: type.id }));
+    changeContentTypeOptions(contentTypes);
+    changeState("type", "all");
+  }
+
+  useEffect(() => {
+    getAndSetContentTypes();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.site]);
 
   const textFieldProps = {
     value: state.query,
-    onChange: (search: string) => setState({ ...state, query: search }),
+    onChange: (search: string) => changeState("query", search),
     placeholder: "Search",
     icon: "search",
     iconPosition: "in",
   };
 
-  const setPage = (newPage: number) => setState({ ...state, page: newPage });
+  const setPage = (newPage: number) => changeState("page", newPage);
 
   const PageList =
     state.items &&
@@ -80,7 +108,7 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
         option={page}
         key={page.id}
         title={page.title}
-        type="Page"
+        type={getStructuredDataTitle(page.structuredData)}
         date={page.modified}
         onClick={onClick}
       />
@@ -92,6 +120,32 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
 
   return (
     <S.Wrapper>
+      <S.LanguageSiteFilters>
+        <Select
+          name="select"
+          options={langOptions}
+          onChange={(value) => changeState("lang", value)}
+          value={state.lang.toString()}
+          type="inline"
+        />
+        <Select
+          name="select"
+          options={siteOptions}
+          onChange={(value) => changeState("site", value)}
+          value={state.site.toString()}
+          type="inline"
+        />
+      </S.LanguageSiteFilters>
+      <S.ContentTypeFilter>
+        <S.Text>Content type</S.Text>
+        <Select
+          name="select"
+          options={contentTypeOptions}
+          onChange={(value) => changeState("type", value)}
+          value={state.type}
+          mandatory
+        />
+      </ S.ContentTypeFilter>
       <S.SearchWrapper>
         {hasQuery ? (
           <TextField {...textFieldProps} onClickIcon={resetQuery} icon="close" />
@@ -99,7 +153,7 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
           <TextField {...textFieldProps} />
         )}
       </S.SearchWrapper>
-      <S.Text>Most recent content</S.Text>
+      <S.LowText>Most recent content</S.LowText>
       {isLoading ? (
         <S.LoadingWrapper>
           <Loader name="circle" />
@@ -128,10 +182,16 @@ interface IPageFinderProps {
   onClick: (value: IPage) => void;
   currentSiteID: number;
   isOpen: boolean;
+  allSites: ISite[];
+  lang: { locale: string; id: number };
+  globalLangs: IGlobalLanguage[];
 }
 
 const mapStateToProps = (state: IRootState) => ({
   currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
+  allSites: state.sites.sites,
+  lang: state.app.lang,
+  globalLangs: state.app.globalLangs,
 });
 
 export default connect(mapStateToProps)(PageFinder);

package/src/components/Fields/UrlField/PageFinder/style.tsx

@@ -35,6 +35,12 @@ const LoadingWrapper = styled.div`
 `;
 
 const Text = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const LowText = styled.div`
   ${(p) => p.theme.textStyle.uiXS};
   color: ${(p) => p.theme.color.textLowEmphasis};
   margin-bottom: ${(p) => p.theme.spacing.s};
@@ -46,4 +52,30 @@ const PaginationWrapper = styled.div`
   margin-top: ${(p) => p.theme.spacing.s};
 `;
 
-export { Wrapper, ListWrapper, PageList, SearchWrapper, LoadingWrapper, Text, PaginationWrapper };
+const LanguageSiteFilters = styled.div`
+  display: flex;
+  & > *:first-child {
+    margin-right: ${(p) => p.theme.spacing.s};
+  }
+  & > *:last-child {
+    flex-grow: 1;
+  }
+`;
+
+const ContentTypeFilter = styled.div`
+  margin-top: ${(p) => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+export {
+  Wrapper,
+  ListWrapper,
+  PageList,
+  SearchWrapper,
+  LoadingWrapper,
+  Text,
+  LowText,
+  PaginationWrapper,
+  LanguageSiteFilters,
+  ContentTypeFilter,
+};

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

@@ -25,7 +25,12 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
       if (isReqOk(response.status)) {
         const { data } = response;
         setInternalPageName(data.title);
-        if (!value?.title) handleTitleChange(data.title);
+
+        onChange({
+          ...value,
+          ...(!data.follow && { noFollow: true }),
+          ...(!value?.title && { title: data.title })
+        });
 
         const anchors: ISelectOption[] = findAnchorsFromPage(data);
         setAnchorOptions(anchors);

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

@@ -99,6 +99,7 @@ const Header = styled.section<{ inversed?: boolean }>`
   justify-content: space-between;
   padding-right: ${(p) => p.theme.spacing.s};
   border-bottom: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  border-left: 1px solid ${(p) => p.theme.color.uiLine};
 
   button:first-child {
     margin-left: ${(p) => p.theme.spacing.m};

package/src/components/SubNav/style.tsx

@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   height: calc(100vh - ${(p) => p.theme.spacing.xl});
 `;
 
-const SubNav = styled.ul`
+const SubNav = styled.div`
   position: relative;
   width: calc(${(p) => p.theme.spacing.s} * 17);
   padding: ${(p) => p.theme.spacing.m};

package/src/containers/StructuredData/actions.tsx

@@ -96,12 +96,15 @@ function updateFormValue(valueObj: any): (dispatch: Dispatch, getState: any) =>
 function resetForm(): (dispatch: Dispatch, getState: any) => void {
   return (dispatch, getState) => {
     const {
-      structuredData: { form },
+      structuredData: {
+        form,
+        currentStructuredData: { defaultValues },
+      },
     } = getState();
 
     form.content &&
       Object.keys(form.content).forEach((key: string) => {
-        form.content[key] = "";
+        defaultValues && defaultValues[key] ? (form.content[key] = defaultValues[key]) : (form.content[key] = "");
       });
     const updatedForm = { content: form.content };
     dispatch(setEntity(null));

package/src/forms/validators.tsx

@@ -152,13 +152,12 @@ const getMandatoryFields = (fields: any[]): any[] => {
     if (field.mandatory) {
       mandatory.push(field);
     }
-    const innerMandatories =
-      field.fields &&
-      field.fields.filter((innerField: any) => {
-        return innerField.mandatory;
-      });
-    if (innerMandatories) {
-      mandatory = [...mandatory, ...innerMandatories];
+
+    if (field.fields) {
+      const innerMandatories = getMandatoryFields(field.fields);
+      if (innerMandatories) {
+        mandatory = [...mandatory, ...innerMandatories];
+      }
     }
   });
   return mandatory;
@@ -170,9 +169,9 @@ const getMandatoryFieldsErrors = (content: any, current: any, name: string, tab:
 
   const conditionalKey = content.find((field: { type: string }) => field.type === "ConditionalField")?.key;
   if (conditionalKey) {
-    mandatoryFields = getMandatoryFields(content).filter(
-      (field) => field.condition === undefined || current[conditionalKey]
-    );
+    mandatoryFields = getMandatoryFields(content).filter((field) => {
+      return field.condition === undefined || field.condition === current[conditionalKey];
+    });
   } else {
     mandatoryFields = getMandatoryFields(content);
   }

package/src/global.d.ts

@@ -5,3 +5,5 @@ declare module "react-froala-wysiwyg";
 declare module "lodash.isequal";
 declare module "is-wsl";
 declare module "react-draft-wysiwyg";
+declare module "history";
+declare module "@griddo/core";

package/src/hooks/forms.tsx

@@ -86,6 +86,7 @@ const useIsDirty = (
 ): { isDirty: boolean; setIsDirty(state: boolean): void; resetDirty: any } => {
   const [isDirty, setIsDirty] = useState(false);
   const [isSaved, setIsSaved] = useState(false);
+  const [isResetting, setIsResetting] = useState(false);
 
   const prevContent = usePrevious(updatedValues, isSaved);
 
@@ -105,9 +106,15 @@ const useIsDirty = (
   const resetDirty = () => {
     setIsDirty(false);
     setIsSaved(true);
+    setIsResetting(true);
   };
 
   useEffect(() => {
+    if (isResetting) {
+      setIsResetting(false);
+      return;
+    }
+
     if (isNew) {
       setIsDirty(true);
     } else if (prevContent && updatedValues) {

package/src/modules/App/Routing/NavMenu/style.tsx

@@ -26,7 +26,6 @@ export const Home = styled.div<{ type: string; isSite: boolean; isOpened: boolea
   & + ul {
     margin-top: ${(p) => p.theme.spacing.s};
   }
-  border-right: 1px solid ${(p) => p.theme.color.uiLine};
   cursor: ${(p) => (p.isSite ? "pointer" : "default")};
 
   &:hover {

package/src/modules/Content/ContentFilters/style.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const Heading = styled.li`
+export const Heading = styled.div`
   ${p => p.theme.textStyle.headingXXS};
   color: ${p => p.theme.color.textLowEmphasis};
   margin-bottom: ${p => p.theme.spacing.xs};
@@ -11,7 +11,7 @@ export const Heading = styled.li`
   }
 `;
 
-export const SubItem = styled.li`
+export const SubItem = styled.div`
   display: block;
   ${p => p.theme.textStyle.uiM};
   color: ${p => p.theme.color.textHighEmphasis};

package/src/modules/Navigation/Defaults/Nav/style.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const Heading = styled.li`
+export const Heading = styled.div`
   ${p => p.theme.textStyle.headingXXS};
   margin-top: ${p => p.theme.spacing.m};
   margin-bottom: ${p => p.theme.spacing.xs};
@@ -11,7 +11,7 @@ export const Heading = styled.li`
   }
 `;
 
-export const SubItem = styled.li`
+export const SubItem = styled.div`
   display: block;
   ${p => p.theme.textStyle.uiM};
   color: ${p => p.theme.color.textHighEmphasis};

package/src/modules/PageEditor/index.tsx

@@ -264,11 +264,8 @@ const PageEditor = (props: IProps) => {
     const createDraft = isPublished && !hasDraft && !isGlobal;
     const status = props.pageStatus === pageStatus.PUBLISHED && !createDraft ? publishPage : undefined;
 
-    await savePage(createDraft, status).then((isSaved: boolean) => {
-      if (isSaved) {
-        resetDirty();
-      }
-    });
+    const isSaved = await savePage(createDraft, status);
+    if (isSaved) resetDirty();
   };
 
   const goToPages = (path: string) => setRoute(path);

package/src/modules/Settings/ContentTypes/DataPacks/Nav/style.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-const Heading = styled.li`
+const Heading = styled.div`
   ${p => p.theme.textStyle.headingXXS};
   color: ${p => p.theme.color.textLowEmphasis};
   margin-bottom: ${p => p.theme.spacing.xs};
@@ -11,7 +11,7 @@ const Heading = styled.li`
   }
 `;
 
-const SubItem = styled.li`
+const SubItem = styled.div`
   display: block;
   ${p => p.theme.textStyle.uiM};
   color: ${p => p.theme.color.textHighEmphasis};

package/src/modules/StructuredData/StructuredDataList/ContentFilters/style.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const Heading = styled.li`
+export const Heading = styled.div`
   ${p => p.theme.textStyle.headingXXS};
   color: ${p => p.theme.color.textLowEmphasis};
   margin-bottom: ${p => p.theme.spacing.xs};
@@ -11,7 +11,7 @@ export const Heading = styled.li`
   }
 `;
 
-export const SubItem = styled.li`
+export const SubItem = styled.div`
   display: block;
   ${p => p.theme.textStyle.uiM};
   color: ${p => p.theme.color.textHighEmphasis};

package/src/types/index.tsx

@@ -263,6 +263,8 @@ export interface IGetSitePagesParams {
   itemsPerPage: number;
   langID?: number;
   query?: string;
+  lang?: number;
+  filterStructuredData?: string;
 }
 
 export interface IGetGlobalPagesParams {
@@ -632,6 +634,28 @@ export interface IImageForm {
   tags: string[];
 }
 
+export interface IGlobalLanguage {
+  id: number;
+  locale: string;
+  language: string;
+  label: string;
+  isDefault: boolean;
+}
+
+export interface IContentType {
+  clone: any,
+  dataPacks: string[],
+  defaultValues: any,
+  editable: boolean,
+  fromPage: boolean,
+  id: string,
+  local: false
+  schema: any,
+  taxonomy: boolean,
+  title: string,
+  translate: boolean,
+}
+
 export type Field =
   | "AsyncCheckGroup"
   | "AsyncSelect"