@griddo/ax 10.5.4 → 10.6.1

package/src/containers/Gallery/actions.tsx

@@ -82,7 +82,8 @@ function getSiteImages(props: IGetSiteImages): (dispatch: Dispatch, getState: ()
 function uploadImage(
   imageFiles: File | File[],
   site: number | string,
-  setProgress?: (progress: number) => void
+  setProgress?: (progress: number) => void,
+  visible = true
 ): (dispatch: Dispatch) => Promise<IImage> {
   return async (dispatch) => {
     try {
@@ -95,6 +96,7 @@ function uploadImage(
         const form = new FormData();
         form.append("file", image);
         site && form.append("site", JSON.stringify(site));
+        visible === false && form.append("active", "false");
         const createdImage = await images.createImage(form, setProgress);
         return { ...createdImage, image };
       });
@@ -165,4 +167,10 @@ function deleteImage(imageID: number): (dispatch: Dispatch, getState: () => IRoo
   };
 }
 
-export { setIsLoading, getSiteImages, uploadImage, updateImage, deleteImage, uploadError };
+function resetGalleryState(): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    dispatch(setUploadSuccess(false));
+  };
+}
+
+export { setIsLoading, getSiteImages, uploadImage, updateImage, deleteImage, uploadError, resetGalleryState };

package/src/containers/Sites/actions.tsx

@@ -5,6 +5,7 @@ import {
   SET_SITES_BY_LANG,
   SET_CURRENT_SITE_INFO,
   SET_CURRENT_SITE_PAGES,
+  SET_ALL_SITE_PAGES,
   SET_FILTER,
   SET_TOTAL_ITEMS,
   SET_SITES_TOTAL_ITEMS,
@@ -24,6 +25,7 @@ import {
   ISetSitesByLangAction,
   ISetCurrentSiteInfoAction,
   ISetCurrentSitePagesAction,
+  ISetAllSitePagesAction,
   ISetFilter,
   ISetTotalItems,
   ISetCurrentSiteLanguagesAction,
@@ -90,6 +92,10 @@ function setCurrentSitePages(currentSitePages: IPage[]): ISetCurrentSitePagesAct
   return { type: SET_CURRENT_SITE_PAGES, payload: { currentSitePages } };
 }
 
+function setAllSitePages(allSitePages: IPage[]): ISetAllSitePagesAction {
+  return { type: SET_ALL_SITE_PAGES, payload: { allSitePages } };
+}
+
 function setFilter(currentFilter: string | null): ISetFilter {
   return { type: SET_FILTER, payload: { currentFilter } };
 }
@@ -387,6 +393,26 @@ function getSitePages(
   };
 }
 
+function getAllSitePages(params: IGetSitePagesParams): (dispatch: any) => Promise<void> {
+  return async (dispatch) => {
+    try {
+      const responseActions = {
+        handleSuccess: (response: any) => {
+          const { items } = response;
+          dispatch(setAllSitePages(items));
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      const callback = async () => sites.getSitePages(params);
+
+      await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e); // FIXME: capturar errores mejor
+    }
+  };
+}
+
 function getSiteLanguages(siteID: number): (dispatch: any) => Promise<void> {
   return async (dispatch) => {
     try {
@@ -738,6 +764,7 @@ export {
   setSiteInfo,
   getFilteredContent,
   getSitePages,
+  getAllSitePages,
   getSiteLanguages,
   deleteSite,
   publishSite,

package/src/containers/Sites/constants.tsx

@@ -6,6 +6,7 @@ export const SET_SITES_TOTAL_ITEMS = `${NAME}/SET_SITES_TOTAL_ITEMS`;
 export const SET_SITES_BY_LANG = `${NAME}/SET_SITES_BY_LANG`;
 export const SET_CURRENT_SITE_INFO = `${NAME}/SET_CURRENT_SITE_INFO`;
 export const SET_CURRENT_SITE_PAGES = `${NAME}/SET_CURRENT_SITE_PAGES`;
+export const SET_ALL_SITE_PAGES = `${NAME}/SET_ALL_SITE_PAGES`;
 export const SET_FILTER: string | null = `${NAME}/SET_FILTER`;
 export const SET_TOTAL_ITEMS: string | null = `${NAME}/SET_TOTAL_ITEMS`;
 export const SET_CURRENT_SITE_LANGUAGES: string | null = `${NAME}/SET_CURRENT_SITE_LANGUAGES`;

package/src/containers/Sites/interfaces.tsx

@@ -4,6 +4,7 @@ import {
   SET_SITES_BY_LANG,
   SET_CURRENT_SITE_INFO,
   SET_CURRENT_SITE_PAGES,
+  SET_ALL_SITE_PAGES,
   SET_FILTER,
   SET_TOTAL_ITEMS,
   SET_CURRENT_SITE_LANGUAGES,
@@ -53,6 +54,11 @@ export interface ISetCurrentSitePagesAction {
   payload: { currentSitePages: any }; // FIXME: establecer type
 }
 
+export interface ISetAllSitePagesAction {
+  type: typeof SET_ALL_SITE_PAGES;
+  payload: { allSitePages: any }; // FIXME: establecer type
+}
+
 export interface ISetTotalItems {
   type: typeof SET_TOTAL_ITEMS;
   payload: { totalItems: number };

package/src/containers/Sites/reducer.tsx

@@ -5,6 +5,7 @@ import {
   SET_SITES_BY_LANG,
   SET_CURRENT_SITE_INFO,
   SET_CURRENT_SITE_PAGES,
+  SET_ALL_SITE_PAGES,
   SET_FILTER,
   SET_TOTAL_ITEMS,
   SET_CURRENT_SITE_LANGUAGES,
@@ -24,6 +25,7 @@ import { SitesActionsCreators } from "./interfaces";
 export interface ISitesState {
   currentSiteName: string | null;
   currentSitePages: IPage[];
+  allSitePages: IPage[];
   sites: ISite[];
   recentSites: ISite[];
   sitesTotalItems: number;
@@ -56,6 +58,7 @@ const config = {
 export const initialState = {
   currentSiteName: null,
   currentSitePages: [],
+  allSitePages: [],
   sites: [],
   recentSites: [],
   sitesByLang: [],
@@ -81,6 +84,7 @@ export function reducer(state = initialState, action: any): ISitesState {
     case SET_SITES_BY_LANG:
     case SET_CURRENT_SITE_INFO:
     case SET_CURRENT_SITE_PAGES:
+    case SET_ALL_SITE_PAGES:
     case SET_TOTAL_ITEMS:
     case SET_CURRENT_SITE_LANGUAGES:
     case SET_INITIAL_VALUES:

package/src/helpers/index.tsx

@@ -103,7 +103,7 @@ import { isDevelopment } from "./environment";
 import {
   getDefaultTheme,
   getThemeElements,
-  filterThemeElements,
+  filterThemeModules,
   filterThemeTemplates,
   filterThemeDatapacks,
   isTemplateExcludedFromTheme,
@@ -191,7 +191,7 @@ export {
   splitAndTrim,
   getDefaultTheme,
   getThemeElements,
-  filterThemeElements,
+  filterThemeModules,
   filterThemeTemplates,
   filterThemeDatapacks,
   isTemplateExcludedFromTheme,

package/src/helpers/themes.tsx

@@ -1,5 +1,6 @@
-import { IDataPack, IGriddoTheme, ITemplateOption, IThemeElements } from "@ax/types";
+import { IDataPack, IGriddoTheme, ISchema, ITemplateOption, IThemeElements } from "@ax/types";
 import { themes } from "components";
+import { getSchema } from "@ax/helpers";
 
 const getDefaultTheme = (): string => {
   const defaultTheme = (themes as IGriddoTheme[]).find((theme) => theme.default);
@@ -11,20 +12,19 @@ const getThemeElements = (theme: string): IThemeElements | undefined => {
   return (themes as IGriddoTheme[]).find((griddoTheme) => griddoTheme.value === theme)?.elements;
 };
 
-const filterThemeElements = (
-  themeElements: IThemeElements | null,
-  elements: string[],
-  type: "modules" | "templates" | "datapacks"
-): string[] => {
+const filterThemeModules = (themeElements: IThemeElements | null, elements: string[]): string[] => {
   if (themeElements === null) return elements;
 
   const { exclude, include } = themeElements;
 
   let filteredElements: string[] = elements;
-  if (exclude && Array.isArray(exclude[type])) {
-    filteredElements = elements.filter((element: string) => !exclude[type]?.includes(element));
-  } else if (include && Array.isArray(include[type])) {
-    filteredElements = elements.filter((element: string) => include[type]?.includes(element));
+  if (exclude && Array.isArray(exclude.modules)) {
+    filteredElements = elements.filter((element: string) => !exclude.modules?.includes(element));
+  } else if (include && Array.isArray(include.modules)) {
+    filteredElements = elements.filter((element: string) => {
+      const schema: ISchema = getSchema(element);
+      return schema?.schemaType === "component" ? true : include.modules?.includes(element);
+    });
   }
 
   return filteredElements;
@@ -42,7 +42,9 @@ const filterThemeTemplates = (
   if (exclude && Array.isArray(exclude.templates)) {
     filteredElements = templates.filter((template) => !exclude.templates?.includes(template.value));
   } else if (include && Array.isArray(include.templates)) {
-    filteredElements = templates.filter((template) => include.templates?.includes(template.value));
+    filteredElements = templates.filter(
+      (template) => include.templates?.includes(template.value) || template.value === "BasicTemplate"
+    );
   }
 
   return filteredElements;
@@ -70,7 +72,10 @@ const isTemplateExcludedFromTheme = (themeElements: IThemeElements | null, templ
 
   if (
     (exclude && Array.isArray(exclude.templates) && exclude.templates.includes(template)) ||
-    (include && Array.isArray(include.templates) && !include.templates.includes(template))
+    (include &&
+      Array.isArray(include.templates) &&
+      !include.templates.includes(template) &&
+      template !== "BasicTemplate")
   ) {
     return true;
   }
@@ -81,7 +86,7 @@ const isTemplateExcludedFromTheme = (themeElements: IThemeElements | null, templ
 export {
   getDefaultTheme,
   getThemeElements,
-  filterThemeElements,
+  filterThemeModules,
   filterThemeTemplates,
   filterThemeDatapacks,
   isTemplateExcludedFromTheme,

package/src/modules/Categories/CategoriesList/CategoryNav/NavItem/index.tsx

@@ -34,8 +34,8 @@ const NavItem = (props: IProps): JSX.Element => {
             const selectedClass = isSelected ? "selected" : "";
             const handleClick = () => onClick(category.id);
             return (
-              <MenuItem key={category.id} onClick={handleClick}>
-                <NavLink to="#" className={selectedClass}>
+              <MenuItem key={category.id} onClick={handleClick} className={selectedClass}>
+                <NavLink to="#">
                   <S.Link active={isSelected}>{category.title}</S.Link>
                 </NavLink>
               </MenuItem>

package/src/modules/Content/BulkHeader/TableHeader/index.tsx

@@ -110,11 +110,7 @@ const TableHeader = (props: IProps): JSX.Element => {
             <NameFilter sortItems={sortItems} sortedState={sortedListStatus} />
           </S.NameWrapper>
           {CategoryColumns}
-          {activeColumns.includes("type") && (
-            <S.HeaderWrapper>
-              <TypeFilter filterItems={filterItems} filters={typeFilters} value={filterValues.type} pointer="type" />
-            </S.HeaderWrapper>
-          )}
+          {activeColumns.includes("type") && <S.TypeHeader>Type</S.TypeHeader>}
           {activeColumns.includes("live") && (
             <S.HeaderWrapper>
               <LiveFilter filterItems={filterItems} value={filterValues.liveStatus} />

package/src/modules/Content/BulkHeader/TableHeader/style.tsx

@@ -46,6 +46,11 @@ const SeoHeader = styled(Header)`
   width: 124px;
 `;
 
+const TypeHeader = styled(Header)`
+  width: 170px;
+  justify-content: center;
+`;
+
 const GlobalMark = styled(Header)`
   width: 24px;
   flex: 0 0 24px;
@@ -79,4 +84,5 @@ export {
   NameWrapper,
   HeaderWrapper,
   GlobalMark,
+  TypeHeader,
 };

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

@@ -2,14 +2,12 @@ import React from "react";
 import { connect } from "react-redux";
 import { NavLink } from "react-router-dom";
 
-import { deepClone } from "@ax/helpers";
-import { MenuItem, SubNav } from "@ax/components";
+import { MenuGroup, MenuItem, SubNav } from "@ax/components";
 import { sitesActions } from "@ax/containers/Sites";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { INITIAL_TEMPLATE } from "@ax/containers/PageEditor/constants";
 import { structuredDataActions } from "@ax/containers/StructuredData";
-
-import { filterStructure } from "./constants";
+import { IQueryValue, IStructuredData } from "@ax/types";
 import { getFilters } from "./utils";
 
 import * as S from "./style";
@@ -19,64 +17,91 @@ const ContentFilters = (props: IProps): JSX.Element => {
     setContentFilter,
     current,
     dynamicValues,
+    isAllowedToCreate,
+    typeFilters,
     addTemplate,
     setSelectedStructuredData,
     resetFilter,
     setStructuredDataFilter,
+    setFilter,
+    addNew,
   } = props;
-  const clonedStructure = deepClone(filterStructure);
-  const filters = getFilters(clonedStructure, dynamicValues);
 
-  return (
-    <SubNav>
-      {filters.map((category: any, key: number) => {
-        return (
-          <S.Item key={key}>
-            <S.Heading>{category.title}</S.Heading>
-            {category.filters &&
-              category.filters.map((filter: any, filterKey: number) => {
-                const { name, value, fromPage, firstTemplate } = filter;
+  const type = typeFilters[0].value;
+  const filters = getFilters(dynamicValues);
+
+  const handleClick = (value: string, fromPage = false, firstTemplate: string | null = null) => {
+    const hasTemplate = fromPage && firstTemplate;
 
-                const hasTemplate = fromPage && firstTemplate;
+    resetFilter();
+    setContentFilter(value);
+    setSelectedStructuredData(value, "site");
+    current && setStructuredDataFilter(value);
+    if (hasTemplate) {
+      addTemplate(firstTemplate);
+    } else {
+      addTemplate(INITIAL_TEMPLATE);
+    }
+  };
 
-                const handleClick = () => {
-                  resetFilter();
-                  setContentFilter(value);
-                  setSelectedStructuredData(value, "site");
-                  current && setStructuredDataFilter(value);
-                  if (hasTemplate) {
-                    addTemplate(firstTemplate);
-                  } else {
-                    addTemplate(INITIAL_TEMPLATE);
-                  }
-                };
+  const handleClickBase = (value: string) => {
+    resetFilter();
 
-                const isSelected = value === current;
-                const selectedClass = isSelected ? "selected" : "";
+    let filter = value;
+    if (value === "unique") {
+      filter = "unique-pages";
+      setFilter("type", [{ value, label: value }]);
+    }
+
+    setContentFilter(filter);
+    setSelectedStructuredData(filter, "site");
+    current && setStructuredDataFilter(filter);
+  };
+
+  return (
+    <SubNav>
+      <S.Wrapper>
+        {filters.map((filter) => {
+          const isSelected = type === "all" ? filter.value === current : filter.value === type;
+          const selectedClass = isSelected ? "selected" : "";
 
-                return (
-                  <MenuItem key={filterKey} onClick={handleClick}>
-                    <NavLink to="#" className={selectedClass}>
-                      <S.Link active={isSelected}>{name}</S.Link>
-                    </NavLink>
-                  </MenuItem>
-                );
-              })}
-          </S.Item>
-        );
-      })}
+          return (
+            <React.Fragment key={filter.value}>
+              {!filter.items ? (
+                <MenuItem onClick={() => handleClickBase(filter.value)} className={selectedClass}>
+                  <NavLink to="#">
+                    <S.Link active={isSelected}>{filter.label}</S.Link>
+                  </NavLink>
+                </MenuItem>
+              ) : (
+                <MenuGroup
+                  filter={filter}
+                  current={current}
+                  onClick={handleClick}
+                  addNew={addNew}
+                  isAllowedToCreate={isAllowedToCreate}
+                />
+              )}
+            </React.Fragment>
+          );
+        })}
+      </S.Wrapper>
     </SubNav>
   );
 };
 
 interface IProps {
   current: string | undefined;
+  dynamicValues: IStructuredData[];
+  isAllowedToCreate: boolean;
+  typeFilters: IQueryValue[];
   setContentFilter(filter: string | null): void;
   addTemplate(template: string): void;
-  dynamicValues: any;
   setSelectedStructuredData(id: string, scope: string): void;
   resetFilter(): void;
   setStructuredDataFilter: (filter: string) => void;
+  setFilter: (pointer: string, filter: IQueryValue[]) => void;
+  addNew: () => void;
 }
 
 const mapDispatchToProps = {

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

@@ -1,43 +1,9 @@
 import styled from "styled-components";
 
-export const Heading = styled.div`
-  ${p => p.theme.textStyle.headingXXS};
-  color: ${p => p.theme.color.textLowEmphasis};
-  margin-bottom: ${p => p.theme.spacing.xs};
-  cursor: default;
+const Wrapper = styled.ul``;
 
-  &:empty {
-    display: none;
-  }
+const Link = styled.div<{ active: boolean }>`
+  color: ${(p) => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};
 `;
 
-export const SubItem = styled.div`
-  display: block;
-  ${p => p.theme.textStyle.uiM};
-  color: ${p => p.theme.color.textHighEmphasis};
-  clear: both;
-  width: 100%;
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  > a {
-    display: flex;
-    padding: ${p => p.theme.spacing.xs};
-    border-radius: ${p => p.theme.radii.s};
-    color: inherit;
-
-    &:hover {
-      background: ${p => p.theme.color.overlayHoverPrimary};
-    }
-  }
-`;
-
-export const Item = styled.div`
-  margin-bottom: ${p => p.theme.spacing.m};
-`;
-
-export const Link = styled.div<{ active: boolean }>`
-    color: ${p => p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis};
-`;
+export { Wrapper, Link };

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

@@ -1,20 +1,57 @@
-const getDynamicFilters = (values: any) =>
+import React from "react";
+import { IContentFilter, IDynamicFilter, IStructuredData } from "@ax/types";
+
+const getDynamicFilters = (values: IStructuredData[]): IDynamicFilter[] =>
   values &&
-  values.map((value: any) => ({
-    name: `${value.title}${value.local ? "" : " (Global)"}`,
+  values.map((value) => ({
+    label: `${value.title}${value.local ? "" : " (Global)"}`,
     value: value.id,
     fromPage: value.fromPage,
+    editable: value.editable ? value.editable : false,
     firstTemplate: value.schema.templates ? value.schema.templates[0] : null,
   }));
 
-const getFilters = (staticFilters: any, dynamicValues: any) => {
-  staticFilters &&
-    staticFilters.forEach((item: any) => {
-      if (!item.filters.length) {
-        item.filters = getDynamicFilters(dynamicValues);
-      }
+const getFilters = (dynamicValues: IStructuredData[]): IContentFilter[] => {
+  const filters: IContentFilter[] = [
+    { label: "All Content", value: "unique-pages" },
+    { label: "Base Pages", value: "unique" },
+  ];
+
+  const pageTypes = dynamicValues.filter((value) => value.fromPage);
+  const simpleTypes = dynamicValues.filter((value) => !value.fromPage);
+
+  if (pageTypes.length) {
+    filters.push({
+      label: "Page Content Types",
+      value: "pages",
+      items: getDynamicFilters(pageTypes),
+      description: (
+        <>
+          Content shown in a page. Data is filled
+          <br />
+          on a page and has a URL.
+        </>
+      ),
     });
-  return staticFilters;
+  }
+
+  if (simpleTypes.length) {
+    filters.push({
+      label: "Simple Content Types",
+      value: "simple",
+      items: getDynamicFilters(simpleTypes),
+      description: (
+        <>
+          Pageless content. Data is entered on a<br />
+          form and consumed in lists and
+          <br />
+          distributors.
+        </>
+      ),
+    });
+  }
+
+  return filters;
 };
 
 export { getDynamicFilters, getFilters };

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

@@ -1,4 +1,4 @@
-import React, { useReducer, useEffect, useLayoutEffect } from "react";
+import React, { useReducer, useEffect } from "react";
 import { connect } from "react-redux";
 
 import { IRootState, IStructuredData, ITemplateOption, IThemeElements } from "@ax/types";
@@ -24,6 +24,7 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
     secondaryAction,
     structuredData,
     themeElements,
+    currentStructuredData,
   } = props;
 
   const filteredValues = filterThemeTemplates(themeElements, values);
@@ -39,8 +40,7 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
     });
   };
 
-  const currentOption = filterOptions(selectedValue, "value");
-  const currentType = currentOption[0] ? currentOption[0].type : "static";
+  const currentType = currentStructuredData ? currentStructuredData.dataPacks[0] : "basics";
 
   const initialState: IOptionTableStore = {
     columnValues: filterOptions(currentType, "type"),
@@ -65,17 +65,11 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
 
   let filteredOptionsByDataPack = filterOptionsByDataPack(state.selectedType);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     displayOptions({ value: state.selectedType, label: state.selectedType });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    const firstOption = filteredOptionsByDataPack[0] && filteredOptionsByDataPack[0].value;
-    selectOption(firstOption, filteredOptionsByDataPack);
-    // eslint-disable-next-line
-  }, []);
-
   const setValue = (value: string, isStructuredData: boolean) => {
     setIsStructuredData(isStructuredData);
     isStructuredData ? selectData(value) : selectPage(value);
@@ -131,8 +125,11 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
     });
 
     setValues(filteredOptionsByDataPack);
-    const firstOption = filteredOptionsByDataPack[0] && filteredOptionsByDataPack[0].value;
-    selectOption(firstOption, filteredOptionsByDataPack);
+    const selectedTemplate =
+      currentStructuredData && currentStructuredData.schema.templates
+        ? currentStructuredData.schema.templates[0]
+        : selectedValue;
+    selectOption(selectedTemplate, filteredOptionsByDataPack);
   };
 
   const handleChange = (value: string | boolean) => typeof value === "string" && selectOption(value);
@@ -147,8 +144,8 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
           const isSelected = item.value === state.selectedType;
           const selectedClass = isSelected ? "selected" : "";
           return (
-            <MenuItem key={`${item.value}${i}`}>
-              <S.NavLink onClick={displayFilteredOptions} className={selectedClass}>
+            <MenuItem key={`${item.value}${i}`} className={selectedClass} onClick={displayFilteredOptions}>
+              <S.NavLink>
                 <S.Link active={isSelected}>{item.label}</S.Link>
               </S.NavLink>
             </MenuItem>
@@ -198,11 +195,13 @@ interface IOptionTableProps {
   secondaryAction: IAction;
   structuredData: { global: IStructuredData[]; site: IStructuredData[] };
   themeElements: IThemeElements | null;
+  currentStructuredData: IStructuredData | null;
 }
 
 const mapStateToProps = (state: IRootState) => ({
   structuredData: state.structuredData.structuredData,
   themeElements: state.sites.themeElements,
+  currentStructuredData: state.structuredData.currentStructuredData,
 });
 
 const mapDispatchToProps = {