@griddo/ax 11.9.9-rc.0 → 11.9.9-rc.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.9.9-rc.0",
+  "version": "11.9.9-rc.2",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -225,5 +225,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "df9f9d683ad5f84b7f209c28b352c1b43d6d684f"
+  "gitHead": "40e12cbab48091331921da9166d2acd62906854a"
 }

package/src/api/navigation.tsx

@@ -72,6 +72,11 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: "/navigations/page/bulk",
     method: "PUT",
   },
+  GET_NAVIGATIONS: {
+    ...template,
+    endpoint: "/navigations",
+    method: "GET",
+  },
 };
 
 const getNavigation = (id: number) => {
@@ -200,6 +205,14 @@ const getPagesByFooter = async (footerID: number | number[], siteID: number) =>
 
 const updatePageNavigation = (data: any) => sendRequest(SERVICES.UPDATE_PAGE_NAVIGATION, data);
 
+const getNavigations = (ids: number[]) => {
+  const { host, endpoint } = SERVICES.GET_NAVIGATIONS;
+
+  SERVICES.GET_NAVIGATIONS.dynamicUrl = `${host}${endpoint}?ids=${ids}&skipDelete=true`;
+
+  return sendRequest(SERVICES.GET_NAVIGATIONS);
+};
+
 export default {
   getNavigation,
   getHeaders,
@@ -215,4 +228,5 @@ export default {
   getPagesByHeader,
   getPagesByFooter,
   updatePageNavigation,
+  getNavigations,
 };

package/src/modules/Forms/FormUseModal/FormUseItem/index.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { ElementsTooltip, IconAction } from "@ax/components";
+
+import * as S from "./style";
+
+const FormUseItem = (props: IFormUseItem): JSX.Element => {
+  const { isSiteView, title, subtitle, structuredDataTitle, categoryColors, availableSiteNames, goToItem } = props;
+
+  return (
+    <S.Item>
+      <S.PageInfo>
+        <S.Title>{title}</S.Title>
+        <S.SubTitle>{subtitle}</S.SubTitle>
+      </S.PageInfo>
+      <S.Type>
+        {structuredDataTitle && (
+          <ElementsTooltip elements={[structuredDataTitle]} colors={categoryColors} maxChar={30} rounded={true} />
+        )}
+      </S.Type>
+      {!isSiteView && (
+        <S.SiteInfo>
+          <ElementsTooltip elements={availableSiteNames} defaultColor="#E8E8EC" elementsPerRow={1} maxChar={30} />
+        </S.SiteInfo>
+      )}
+      <S.Action>
+        <IconAction icon="openOutside" onClick={() => goToItem()} />
+      </S.Action>
+    </S.Item>
+  );
+};
+
+interface IFormUseItem {
+  title: string;
+  subtitle: string;
+  isSiteView: boolean;
+  structuredDataTitle?: string;
+  categoryColors?: Record<string, string>;
+  availableSiteNames: string[];
+  goToItem(): void;
+}
+
+export default FormUseItem;

package/src/modules/Forms/FormUseModal/FormUseItem/style.tsx

@@ -0,0 +1,56 @@
+import styled from "styled-components";
+
+const Action = styled.div`
+  display: flex;
+  width: 56px;
+  flex-shrink: 0;
+  justify-content: flex-end;
+  align-items: center;
+  opacity: 0;
+`;
+
+const Item = styled.div`
+  display: flex;
+  padding: ${(p) => `${p.theme.spacing.s} 0 ${p.theme.spacing.xs} 0`};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+  &:hover {
+    ${Action} {
+      opacity: 1;
+    }
+  }
+`;
+
+const PageInfo = styled.div`
+  flex-grow: 1;
+`;
+
+const Title = styled.div`
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const SubTitle = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+`;
+
+const Type = styled.div`
+  position: relative;
+  display: flex;
+  width: 200px;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+`;
+
+const SiteInfo = styled.div`
+  position: relative;
+  display: flex;
+  width: 200px;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+`;
+
+export { Item, PageInfo, Title, SubTitle, Type, SiteInfo, Action };

package/src/modules/Forms/FormUseModal/index.tsx

@@ -1,21 +1,41 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
-import { IAvailableSites, IFilterValue, IGetPagesParams, IModal, IPage, IQueryValue, ISite } from "@ax/types";
-import { CheckGroupFilter, ElementsTooltip, IconAction, Loading, Modal } from "@ax/components";
-import { pages, sites } from "@ax/api";
-import { getStructuredDataTitle, isReqOk } from "@ax/helpers";
+import {
+  IAvailableSites,
+  IFilterValue,
+  IGetPagesParams,
+  IModal,
+  INavigation,
+  IPage,
+  IQueryValue,
+  ISite,
+} from "@ax/types";
+import { CheckGroupFilter, Loading, Modal } from "@ax/components";
+import { getStructuredDataTitle } from "@ax/helpers";
 import { useCategoryColors } from "@ax/hooks";
 import { appActions } from "@ax/containers/App";
 import { pageEditorActions } from "@ax/containers/PageEditor";
+import { navigationActions } from "@ax/containers/Navigation";
 import { sitesActions } from "@ax/containers/Sites";
-import { getSiteOptions, getStructuredDataOptions } from "./utils";
+import {
+  addSiteOptions,
+  getFilterDataIds,
+  getFilterSitesIds,
+  getNavigations,
+  getPages,
+  getSite,
+  getSiteOptions,
+  getStructuredDataOptions,
+} from "./utils";
+import FormUseItem from "./FormUseItem";
 
 import * as S from "./style";
 
 const FormUseModal = (props: IFormUseModalModal): JSX.Element => {
-  const { isOpen, toggleModal, formInUse, isSiteView, setCurrentPageID, setHistoryPush, setSiteInfo } = props;
-  const { page } = formInUse || {};
+  const { isOpen, toggleModal, formInUse, isSiteView } = props;
+  const { page, header, footer } = formInUse || {};
+  const navigationsIds = React.useMemo(() => [...(header ?? []), ...(footer ?? [])], [header, footer]);
 
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [filters, setFilters] = useState({
@@ -23,22 +43,16 @@ const FormUseModal = (props: IFormUseModalModal): JSX.Element => {
     filterSites: [{ value: "all", label: "All" }],
   });
   const [options, setOptions] = useState<Record<string, IFilterValue[]>>({
-    sites: [],
-    structuredData: [],
+    sites: [{ value: "all", name: "all", title: "All" }],
+    structuredData: [{ value: "all", name: "all", title: "All" }],
   });
-  const [items, setItems] = useState<IPage[]>([]);
+  const [items, setItems] = useState<{ pages: IPage[]; navigations: INavigation[] }>({ pages: [], navigations: [] });
   const { categoryColors, addCategoryColors } = useCategoryColors();
   const firstUpdate = useRef(true);
 
   const getParams = useCallback(() => {
-    const sitesIDs = filters.filterSites
-      .filter((item) => item.value !== "all")
-      .map((item) => (typeof item.value === "string" ? parseInt(item.value) : item.value));
-
-    const dataIDs = filters.filterStructuredData
-      .filter((item) => item.value !== "all" && item.value !== "unique")
-      .map((item) => item.value);
-
+    const sitesIDs = getFilterSitesIds(filters.filterSites);
+    const dataIDs = getFilterDataIds(filters.filterStructuredData);
     const isBasicChecked = filters.filterStructuredData.some((item) => item.value === "unique");
 
     const params: IGetPagesParams = {
@@ -56,32 +70,69 @@ const FormUseModal = (props: IFormUseModalModal): JSX.Element => {
   useEffect(() => {
     let isMounted = true;
 
-    const getPages = async () => {
-      if (!isMounted) return;
+    const fetchData = async () => {
       setIsLoading(true);
-      const params = getParams();
-      const response: { status: number; data: { totalItems: number; items: IPage[] } } = await pages.getPages(params);
-      const { status, data } = response;
-      if (isReqOk(status)) {
-        setItems(data.items);
-        if (firstUpdate.current) {
-          const sites = getSiteOptions(data.items);
-          const types = getStructuredDataOptions(data.items);
-          const allOption = { value: "all", name: "all", title: "All" };
-          setOptions({ sites: [allOption, ...sites], structuredData: [allOption, ...types] });
+
+      try {
+        let allSites: IFilterValue[] = [];
+        let structuredData: IFilterValue[] = [];
+        let pagesData: IPage[] = [];
+        let navsData: INavigation[] = [];
+
+        if (page && page.length) {
+          const params = getParams();
+          const data = await getPages(params);
+
+          if (isMounted && data.length) {
+            pagesData = data;
+
+            if (firstUpdate.current) {
+              allSites = getSiteOptions(data);
+              structuredData = getStructuredDataOptions(data);
+            }
+          }
+        }
+
+        const dataIDs = getFilterDataIds(filters.filterStructuredData);
+        if (!dataIDs.length && navigationsIds.length) {
+          const data = await getNavigations(navigationsIds);
+
+          if (isMounted && data.length) {
+            const sitesIDs = getFilterSitesIds(filters.filterSites);
+            navsData = sitesIDs.length ? data.filter((item: INavigation) => sitesIDs.includes(item.site)) : data;
+
+            if (firstUpdate.current) {
+              const siteIds = data.map((item: INavigation) => item.site);
+              const sitesWithNavs = await addSiteOptions(allSites, siteIds);
+              allSites = sitesWithNavs;
+            }
+          }
+        }
+
+        setItems((prev) =>
+          prev.pages.length !== pagesData.length || prev.navigations.length !== navsData.length
+            ? { pages: pagesData, navigations: navsData }
+            : prev
+        );
+
+        if (firstUpdate.current && isMounted) {
+          setOptions((state) => ({
+            ...state,
+            sites: [...state.sites, ...allSites],
+            structuredData: [...state.structuredData, ...structuredData],
+          }));
           firstUpdate.current = false;
         }
-      } else {
-        console.log("Error en getPages");
+      } catch (error) {
+        console.error("Error general en fetchData:", error);
+      } finally {
+        if (isMounted) setIsLoading(false);
       }
-      setIsLoading(false);
     };
 
-    if (page && page.length > 0) {
-      getPages();
-    }
+    fetchData();
 
-    return function cleanup() {
+    return () => {
       isMounted = false;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -91,17 +142,8 @@ const FormUseModal = (props: IFormUseModalModal): JSX.Element => {
     setFilters((state) => ({ ...state, [pointer]: filter }));
   };
 
-  const getSite = async (siteID: number) => {
-    const response: { status: number; data: ISite } = await sites.getSiteInfo(siteID);
-    const { status, data } = response;
-    if (isReqOk(status)) {
-      return data;
-    } else {
-      return null;
-    }
-  };
-
   const goToPage = async (pageID: number, siteID: number | null) => {
+    const { setCurrentPageID, setSiteInfo, setHistoryPush } = props;
     if (!isSiteView && siteID) {
       const siteInfo = await getSite(siteID);
       if (siteInfo) {
@@ -115,7 +157,27 @@ const FormUseModal = (props: IFormUseModalModal): JSX.Element => {
     }
   };
 
-  const textInfo = `This form appears on ${page ? `${page.length} page` : ""}${page && page.length > 1 ? "s" : ""}:`;
+  const goToNavigation = async (navID: number, siteID: number, type: "header" | "footer") => {
+    const { setHeader, setFooter, setSelectedDefault, setHistoryPush, setSiteInfo } = props;
+    const isHeader = type === "header";
+
+    if (!isSiteView) {
+      const siteInfo = await getSite(siteID);
+      if (siteInfo) {
+        await setSiteInfo(siteInfo);
+      }
+    }
+    setSelectedDefault(isHeader ? "Headers" : "Footers");
+    isHeader ? setHeader(navID) : setFooter(navID);
+    setHistoryPush("/sites/navigations/editor", true);
+  };
+
+  const pagesText = items.pages.length ? `${items.pages.length} page${items.pages.length > 1 ? "s" : ""}` : "";
+  const navigationsText = items.navigations.length
+    ? `${items.navigations.length} navigation module${items.navigations.length > 1 ? "s" : ""}`
+    : "";
+  const andText = items.navigations.length && items.pages.length ? " and " : "";
+  const textInfo = `This form appears on ${pagesText}${andText}${navigationsText}:`;
 
   return (
     <Modal isOpen={isOpen} hide={toggleModal} title="Using this form" size="L" height={640}>
@@ -157,7 +219,25 @@ const FormUseModal = (props: IFormUseModalModal): JSX.Element => {
           <Loading />
         ) : (
           <S.ListContent>
-            {items.map((item) => {
+            {items.navigations.map((item) => {
+              const { id, title, site, type } = item;
+
+              const handleGoToNavigation = () => id && goToNavigation(id, site, type);
+              const availableSiteNames =
+                options.sites.filter((item) => item.name === site).map((item) => item.title) || [];
+
+              return (
+                <FormUseItem
+                  key={id}
+                  title={title}
+                  subtitle={"Navigation modules"}
+                  availableSiteNames={availableSiteNames}
+                  isSiteView={isSiteView}
+                  goToItem={handleGoToNavigation}
+                />
+              );
+            })}
+            {items.pages.map((item) => {
               const { id, title, fullPath, structuredData, availableSites, site } = item;
               const structuredDataTitle = structuredData ? getStructuredDataTitle(structuredData) : "Base Page";
 
@@ -165,34 +245,19 @@ const FormUseModal = (props: IFormUseModalModal): JSX.Element => {
 
               const availableSiteNames = availableSites?.map((site: IAvailableSites) => site.name) || [];
 
+              const handleGoToPage = () => goToPage(id, site);
+
               return (
-                <S.Item key={id}>
-                  <S.PageInfo>
-                    <S.Title>{title}</S.Title>
-                    <S.SubTitle>{fullPath?.page || ""}</S.SubTitle>
-                  </S.PageInfo>
-                  <S.Type>
-                    <ElementsTooltip
-                      elements={[structuredDataTitle]}
-                      colors={categoryColors}
-                      maxChar={30}
-                      rounded={true}
-                    />
-                  </S.Type>
-                  {!isSiteView && (
-                    <S.SiteInfo>
-                      <ElementsTooltip
-                        elements={availableSiteNames}
-                        defaultColor="#E8E8EC"
-                        elementsPerRow={1}
-                        maxChar={30}
-                      />
-                    </S.SiteInfo>
-                  )}
-                  <S.Action>
-                    <IconAction icon="openOutside" onClick={() => goToPage(id, site)} />
-                  </S.Action>
-                </S.Item>
+                <FormUseItem
+                  key={id}
+                  title={title}
+                  subtitle={fullPath?.page || ""}
+                  structuredDataTitle={structuredDataTitle}
+                  categoryColors={categoryColors}
+                  availableSiteNames={availableSiteNames}
+                  isSiteView={isSiteView}
+                  goToItem={handleGoToPage}
+                />
               );
             })}
           </S.ListContent>
@@ -203,17 +268,23 @@ const FormUseModal = (props: IFormUseModalModal): JSX.Element => {
 };
 
 interface IFormUseModalModal extends IModal {
-  formInUse: { page: number[] } | null;
+  formInUse: { page?: number[]; header?: number[]; footer?: number[] } | null;
   isSiteView: boolean;
   setHistoryPush: (path: string, isEditor: boolean) => void;
   setCurrentPageID: (currentPageID: number | null) => void;
   setSiteInfo(currentSiteInfo: ISite): Promise<void>;
+  setSelectedDefault(selectedDefault: string): void;
+  setHeader(id: number | null): void;
+  setFooter(id: number | null): void;
 }
 
 const mapDispatchToProps = {
   setHistoryPush: appActions.setHistoryPush,
   setCurrentPageID: pageEditorActions.setCurrentPageID,
   setSiteInfo: sitesActions.setSiteInfo,
+  setSelectedDefault: navigationActions.setSelectedDefault,
+  setHeader: navigationActions.setHeader,
+  setFooter: navigationActions.setFooter,
 };
 
 export default connect(null, mapDispatchToProps)(FormUseModal);

package/src/modules/Forms/FormUseModal/style.tsx

@@ -34,32 +34,6 @@ const Action = styled.div`
   opacity: 0;
 `;
 
-const Item = styled.div`
-  display: flex;
-  padding: ${(p) => `${p.theme.spacing.s} 0 ${p.theme.spacing.xs} 0`};
-  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
-  &:hover {
-    ${Action} {
-      opacity: 1;
-    }
-  }
-`;
-
-const PageInfo = styled.div`
-  flex-grow: 1;
-`;
-
-const Title = styled.div`
-  ${(p) => p.theme.textStyle.uiL};
-  color: ${(p) => p.theme.color.textHighEmphasis};
-  margin-bottom: ${(p) => p.theme.spacing.xxs};
-`;
-
-const SubTitle = styled.div`
-  ${(p) => p.theme.textStyle.uiXS};
-  color: ${(p) => p.theme.color.textMediumEmphasis};
-`;
-
 const Type = styled.div`
   position: relative;
   display: flex;
@@ -78,4 +52,4 @@ const SiteInfo = styled.div`
   align-items: center;
 `;
 
-export { ModalContent, ListHeader, HeaderText, ListContent, Item, PageInfo, Title, SubTitle, Type, SiteInfo, Action };
+export { ModalContent, ListHeader, HeaderText, ListContent, Type, SiteInfo, Action };

package/src/modules/Forms/FormUseModal/utils.tsx

@@ -1,21 +1,63 @@
-import { getStructuredDataTitle } from "@ax/helpers";
-import { IFilterValue, IPage } from "@ax/types";
+import { navigation, pages, sites } from "@ax/api";
+import { getStructuredDataTitle, isReqOk } from "@ax/helpers";
+import { IFilterValue, IGetPagesParams, INavigation, IPage, ISite } from "@ax/types";
 
-const getSiteOptions = (pages: IPage[]) => {
-  return Object.values(
-    pages.reduce((acc: Record<number, IFilterValue>, current) => {
-      if (current.availableSites) {
-        current.availableSites
-          .map((site) => {
-            return { value: site.id.toString(), title: site.name, name: site.id };
-          })
-          .forEach((item) => {
-            acc = { ...acc, [item.value]: item };
-          });
+const getSite = async (siteID: number) => {
+  try {
+    const response: { status: number; data: ISite } = await sites.getSiteInfo(siteID);
+    const { status, data } = response;
+    if (isReqOk(status)) {
+      return data;
+    } else {
+      return null;
+    }
+  } catch {
+    return null;
+  }
+};
+
+const getSiteOptions = (pages: IPage[]): IFilterValue[] => {
+  const sites = pages.flatMap((page) => page.availableSites ?? []);
+  const uniqueSites = new Map<number, IFilterValue>();
+
+  for (const site of sites) {
+    uniqueSites.set(site.id, {
+      value: site.id.toString(),
+      title: site.name,
+      name: site.id,
+    });
+  }
+
+  return Array.from(uniqueSites.values());
+};
+
+const addSiteOptions = async (baseOptions: IFilterValue[], siteIDs: number[]): Promise<IFilterValue[]> => {
+  const existingIds = new Set(baseOptions.map((opt) => Number(opt.value)));
+  const idsToAdd = siteIDs.filter((id) => !existingIds.has(id));
+
+  if (idsToAdd.length === 0) return baseOptions;
+
+  const newSites = await Promise.all(
+    idsToAdd.map(async (id) => {
+      try {
+        const site = await getSite(id);
+        if (!site) return null;
+        return {
+          value: site.id.toString(),
+          title: site.name,
+          name: site.id,
+        } as IFilterValue;
+      } catch (error) {
+        console.error(`Error al obtener site ${id}:`, error);
+        return null;
       }
-      return acc;
-    }, {})
+    })
   );
+
+  const filteredNewSites = newSites.filter((s): s is IFilterValue => s !== null);
+  if (filteredNewSites.length === 0) return baseOptions;
+
+  return [...baseOptions, ...filteredNewSites];
 };
 
 const getStructuredDataOptions = (pages: IPage[]) => {
@@ -36,4 +78,49 @@ const getStructuredDataOptions = (pages: IPage[]) => {
   );
 };
 
-export { getSiteOptions, getStructuredDataOptions };
+const getFilterSitesIds = (filters: { value: string; label: string }[]) =>
+  filters
+    .filter((item) => item.value !== "all")
+    .map((item) => (typeof item.value === "string" ? parseInt(item.value) : item.value));
+
+const getFilterDataIds = (filters: { value: string; label: string }[]) =>
+  filters.filter((item) => item.value !== "all" && item.value !== "unique").map((item) => item.value);
+
+const getNavigations = async (navigations: number[]) => {
+  try {
+    const response: { status: number; data: { items: INavigation[] } } = await navigation.getNavigations(navigations);
+    const { status, data } = response;
+    if (isReqOk(status)) {
+      return data.items;
+    } else {
+      return [];
+    }
+  } catch {
+    return [];
+  }
+};
+
+const getPages = async (params: IGetPagesParams) => {
+  try {
+    const response: { status: number; data: { items: IPage[] } } = await pages.getPages(params);
+    const { status, data } = response;
+    if (isReqOk(status)) {
+      return data.items;
+    } else {
+      return [];
+    }
+  } catch {
+    return [];
+  }
+};
+
+export {
+  getSiteOptions,
+  getStructuredDataOptions,
+  getSite,
+  addSiteOptions,
+  getFilterSitesIds,
+  getFilterDataIds,
+  getNavigations,
+  getPages,
+};

package/src/types/forms.tsx

@@ -16,7 +16,7 @@ export type FormContent = {
   canBeTranslated: boolean;
   originalLanguage: number;
   editorID: number;
-  formInUse: { page: number[] } | null;
+  formInUse: { page?: number[]; header?: number[]; footer?: number[] } | null;
   deleted: boolean;
 };