@griddo/ax 1.58.4 → 1.59.0

package/src/forms/index.tsx

@@ -23,7 +23,7 @@ import {
   replaceElements,
 } from "./elements";
 import { getInnerFields, getStructuredDataInnerFields } from "./fields";
-import { getValidity, findMandatoryFieldsErrors } from "./validators";
+import { getValidity, findMandatoryFieldsErrors, findMandatoryStructuredDataErrors } from "./validators";
 
 export {
   parseData,
@@ -50,4 +50,5 @@ export {
   getParentKey,
   getValidity,
   findMandatoryFieldsErrors,
+  findMandatoryStructuredDataErrors,
 };

package/src/forms/validators.tsx

@@ -141,6 +141,8 @@ const isEmptyField = (value: any, fieldType: string) => {
     case "ComponentArray":
     case "ArrayFieldGroup":
       return !value || !value.length;
+    case "ReferenceField":
+      return value.fixed && !value.fixed.length;
     default:
       return typeof value === "string" && value.trim().length === 0;
   }
@@ -163,7 +165,7 @@ const getMandatoryFields = (fields: any[]): any[] => {
   return mandatory;
 };
 
-const getMandatoryFieldsErrors = (content: any, current: any, name: string, tab: string, template: boolean) => {
+const getMandatoryFieldsErrors = (content: any, current: any, name: string | null, tab: string, template: boolean) => {
   let mandatoryFields = [];
   const errors: IErrorItem[] = [];
 
@@ -184,9 +186,9 @@ const getMandatoryFieldsErrors = (content: any, current: any, name: string, tab:
           type: "Error",
           message: "Empty Field",
           validator: { mandatory: true },
-          editorID: current.editorID,
-          component: current.component,
-          name,
+          editorID: current.editorID ? current.editorID : null,
+          component: current.component ? current.component : null,
+          name: name ? name : field.title,
           key: field.key,
           tab,
           template,
@@ -244,9 +246,14 @@ const findMandatoryFieldsErrors = (content: any): IErrorItem[] => {
   return errors;
 };
 
+const findMandatoryStructuredDataErrors = (content: any, schema: any): IErrorItem[] => {
+  const errors: IErrorItem[] = getMandatoryFieldsErrors(schema.fields, content, null, "", false);
+  return errors;
+};
+
 interface IError {
   isValid: boolean;
   errorCode: string;
 }
 
-export { getValidity, findMandatoryFieldsErrors };
+export { getValidity, findMandatoryFieldsErrors, findMandatoryStructuredDataErrors };

package/src/helpers/arrays.tsx

@@ -1,3 +1,14 @@
 const isEmptyArray = (arr: any[]) => arr && arr.length === 0;
 
-export { isEmptyArray };
+const moveArrayElement = (element: unknown, arr: unknown[], isPush: boolean): Array<unknown> => {
+  const arrCopy = [...arr];
+  if (arrCopy.length <= 1) return arrCopy;
+  const elementIndex = arrCopy.findIndex((el: unknown) => el === element);
+  const newIndex = isPush ? elementIndex + 1 : elementIndex - 1;
+  const el = arrCopy[elementIndex];
+  arrCopy.splice(elementIndex, 1);
+  arrCopy.splice(newIndex, 0, el);
+  return arrCopy;
+};
+
+export { isEmptyArray, moveArrayElement };

package/src/helpers/index.tsx

@@ -16,6 +16,7 @@ import {
   trimText,
   decodeEntities,
   isNumber,
+  getFileExtension,
 } from "./strings";
 
 import {
@@ -78,7 +79,7 @@ import {
 
 import { imageResizeCropAndCompress, compressImage } from "./imageResize";
 
-import { isEmptyArray } from "./arrays";
+import { isEmptyArray, moveArrayElement } from "./arrays";
 
 import { getActivatedDataPacksIds, isModuleDisabled } from "./dataPacks";
 
@@ -146,4 +147,6 @@ export {
   isStructuredDataFromPage,
   getGlobalPageTypes,
   isNumber,
+  getFileExtension,
+  moveArrayElement,
 };

package/src/helpers/strings.tsx

@@ -75,6 +75,12 @@ const decodeEntities = (() => {
 
 const isNumber = (value: string): boolean => !isNaN(parseInt(value));
 
+const getFileExtension = (fileName: string): string | null => {
+  const re = /\.[0-9a-z]+$/i;
+  const extension = fileName.match(re);
+  return extension && extension[0].slice(1);
+};
+
 export {
   filterImageText,
   splitCamelCase,
@@ -86,4 +92,5 @@ export {
   trimText,
   decodeEntities,
   isNumber,
+  getFileExtension,
 };

package/src/hooks/content.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+
+const useCategoryColors = (): any => {
+  const fixedColors = [
+    "#FFE695",
+    "#C1F0FF",
+    "#C3FFC1",
+    "#DDBCFE",
+    "#FDCBF2",
+    "#FFB8B8",
+    "#9CF3D4",
+    "#E3CDB8",
+    "#CCDA76",
+    "#DBDDE9",
+  ];
+
+  const colors = [...fixedColors];
+  const [categoryColors, setCategoryColors] = useState({});
+
+  const getColor = () => {
+    return "hsl(" + 360 * Math.random() + "," + (25 + 70 * Math.random()) + "%," + (85 + 10 * Math.random()) + "%)";
+  };
+
+  const addCategoryColors = (cats: string[]) => {
+    cats &&
+      cats.forEach((cat: string) => {
+        const founded = Object.keys(categoryColors).find((catID: string) => cat === catID);
+        if (!founded) {
+          const color = colors.length ? colors.shift() : getColor();
+          setCategoryColors({ ...categoryColors, [cat]: color });
+        }
+      });
+  };
+
+  return {
+    categoryColors,
+    addCategoryColors,
+  };
+};
+
+export { useCategoryColors };

package/src/hooks/index.tsx

@@ -2,6 +2,7 @@ import { useBulkSelection } from "./bulk";
 import { useDebounce, useEqualStructured, useEqualValue, useIsDirty, usePrevious } from "./forms";
 import { useHandleClickOutside, useModal, useToast } from "./modals";
 import { useURLSearchParam } from "./location";
+import { useCategoryColors } from "./content";
 
 export {
   useModal,
@@ -13,5 +14,6 @@ export {
   useIsDirty,
   useToast,
   useBulkSelection,
-  useURLSearchParam
+  useURLSearchParam,
+  useCategoryColors,
 };

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

@@ -1,12 +1,12 @@
 import styled from "styled-components";
 
-const NavItemWrapper = styled.li`
+const NavItemWrapper = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.s};
 `;
 
 const NavLink = styled.div`
   display: flex;
-  border-bottom: 1px solid ${p => p.theme.color.uiLine};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
   margin-bottom: ${(p) => p.theme.spacing.xxs};
   align-items: center;
   padding-bottom: ${(p) => p.theme.spacing.xs};
@@ -14,8 +14,8 @@ const NavLink = styled.div`
 `;
 
 const Title = styled.div`
-  ${p => p.theme.textStyle.headingXXS};
-  color: ${p => p.theme.color.textMediumEmphasis};
+  ${(p) => p.theme.textStyle.headingXXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
 `;
 
 const Arrow = styled.div`
@@ -24,15 +24,15 @@ const Arrow = styled.div`
   width: ${(p) => p.theme.spacing.m};
 `;
 
-const Dropdown = styled.ul<{isOpen: boolean}>`
-  display: ${(p) => p.isOpen ? "flex" : "none"};
-  transition: all .5s ease-in-out;
-  opacity: ${(p) => p.isOpen ? "1" : "0"};
+const Dropdown = styled.ul<{ isOpen: boolean }>`
+  display: ${(p) => (p.isOpen ? "flex" : "none")};
+  transition: all 0.5s ease-in-out;
+  opacity: ${(p) => (p.isOpen ? "1" : "0")};
   flex-direction: column;
 `;
 
 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)};
 `;
 
 export { NavItemWrapper, NavLink, Title, Arrow, Dropdown, Link };

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

@@ -1,15 +1,21 @@
 import React from "react";
 
-import { CheckField, TableCounter } from "@ax/components";
-import Name from "../../HeaderMenus/Name";
-import Status from "../../HeaderMenus/Status";
-import Types from "../../HeaderMenus/Types";
-import Translations from "../../HeaderMenus/Translations";
-import Live from "../../HeaderMenus/Live";
+import {
+  CheckField,
+  TableCounter,
+  CustomizeFilters,
+  CategoryFilter,
+  NameFilter,
+  TypeFilter,
+  StatusFilter,
+  LiveFilter,
+  TranslationsFilter,
+} from "@ax/components";
+import { IColumn } from "@ax/types";
 
 import * as S from "./style";
 
-const TableHeader = (props: any): JSX.Element => {
+const TableHeader = (props: IProps): JSX.Element => {
   const {
     isScrolling,
     isStructuredData,
@@ -19,8 +25,44 @@ const TableHeader = (props: any): JSX.Element => {
     filterItems,
     sortedListStatus,
     totalItems,
+    categoryColumns,
+    columns,
+    setColumns,
+    isGlobalPages,
+    filterValues,
   } = props;
 
+  const activeColumns = Object.keys(columns).filter((col: string) => columns[col].show);
+
+  const CategoryColumns =
+    isGlobalPages &&
+    categoryColumns.map(
+      (col: any) =>
+        activeColumns.includes(col.key) && (
+          <S.HeaderWrapper key={col.key}>
+            <CategoryFilter filterItems={filterItems} structuredData={col} value={filterValues.categories} />
+          </S.HeaderWrapper>
+        )
+    );
+
+  const typeFilters = [
+    {
+      name: "all",
+      value: "all",
+      title: "All content",
+    },
+    {
+      name: "unique",
+      value: "unique",
+      title: "Basic templates",
+    },
+    {
+      name: "structuredData",
+      value: "structuredData",
+      title: "Content types",
+    },
+  ];
+
   return (
     <S.TableHeader isScrolling={isScrolling}>
       <S.CheckHeader>
@@ -40,33 +82,62 @@ const TableHeader = (props: any): JSX.Element => {
           <S.LiveHeader>Live</S.LiveHeader>
           <S.StatusHeader>Status</S.StatusHeader>
           <S.TransHeader>Translations</S.TransHeader>
+          <S.ActionsHeader>
+            <TableCounter totalItems={totalItems} />
+          </S.ActionsHeader>
         </>
       ) : (
         <>
           <S.NameWrapper>
-            <Name sortItems={sortItems} sortedState={sortedListStatus} />
+            <NameFilter sortItems={sortItems} sortedState={sortedListStatus} />
           </S.NameWrapper>
-          <S.TypesWrapper>
-            <Types filterItems={filterItems} />
-          </S.TypesWrapper>
-          <S.LiveWrapper>
-            <Live filterItems={filterItems} />
-          </S.LiveWrapper>
-          <S.StatusWrapper>
-            <Status sortItems={sortItems} sortedState={sortedListStatus} />
-          </S.StatusWrapper>
-          <S.TranslationsWrapper>
-            <Translations filterItems={filterItems} />
-          </S.TranslationsWrapper>
-          <S.SeoHeader>SEO</S.SeoHeader>
+          {CategoryColumns}
+          {activeColumns.includes("type") && (
+            <S.HeaderWrapper>
+              <TypeFilter filterItems={filterItems} filters={typeFilters} pointer="type" />
+            </S.HeaderWrapper>
+          )}
+          {activeColumns.includes("live") && (
+            <S.HeaderWrapper>
+              <LiveFilter filterItems={filterItems} value={filterValues.liveStatus} />
+            </S.HeaderWrapper>
+          )}
+          {activeColumns.includes("status") && (
+            <S.HeaderWrapper>
+              <StatusFilter sortItems={sortItems} sortedState={sortedListStatus} />
+            </S.HeaderWrapper>
+          )}
+          {activeColumns.includes("translation") && (
+            <S.HeaderWrapper>
+              <TranslationsFilter filterItems={filterItems} value={filterValues.translated} />
+            </S.HeaderWrapper>
+          )}
+          {activeColumns.includes("seo") && <S.SeoHeader>SEO</S.SeoHeader>}
           <S.GlobalMark />
+          <S.ActionsHeader>
+            <TableCounter totalItems={totalItems} />
+            <CustomizeFilters columns={columns} setColumns={setColumns} value={activeColumns} />
+          </S.ActionsHeader>
         </>
       )}
-      <S.ActionsHeader>
-        <TableCounter totalItems={totalItems} />
-      </S.ActionsHeader>
     </S.TableHeader>
   );
 };
 
+interface IProps {
+  isScrolling: boolean;
+  isStructuredData: boolean;
+  totalItems: number;
+  selectAllItems: () => void;
+  checkState: Record<string, boolean>;
+  sortItems: (orderPointer: string, isAscending: boolean) => void;
+  filterItems: (filterPointer: string, filtersSelected: string) => void;
+  sortedListStatus: { isAscending: boolean; sortedByDate: boolean; sortedByTitle: boolean; sortedByURL: boolean };
+  categoryColumns: any[];
+  columns: Record<string, IColumn>;
+  setColumns: (columns: Record<string, IColumn>) => void;
+  isGlobalPages: boolean;
+  filterValues: any;
+}
+
 export default TableHeader;

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

@@ -48,32 +48,22 @@ const SeoHeader = styled(Header)`
 
 const GlobalMark = styled(Header)`
   width: 24px;
+  flex: 0 0 24px;
 `;
 
 const ActionsHeader = styled(Header)`
-  width: 92px;
+  width: 100px;
   padding-right: 0;
+  justify-content: flex-end;
+  align-items: center;
 `;
 
 const NameWrapper = styled.div`
-  width: 40%;
   flex-grow: 1;
   position: relative;
 `;
 
-const TypesWrapper = styled.div`
-  position: relative;
-`;
-
-const LiveWrapper = styled.div`
-  position: relative;
-`;
-
-const StatusWrapper = styled.div`
-  position: relative;
-`;
-
-const TranslationsWrapper = styled.div`
+const HeaderWrapper = styled.div`
   position: relative;
 `;
 
@@ -87,9 +77,6 @@ export {
   SeoHeader,
   ActionsHeader,
   NameWrapper,
-  LiveWrapper,
-  TypesWrapper,
-  StatusWrapper,
-  TranslationsWrapper,
+  HeaderWrapper,
   GlobalMark,
 };

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { BulkSelectionOptions } from "@ax/components";
+import { IColumn } from "@ax/types";
 import TableHeader from "./TableHeader";
 
 const BulkHeader = (props: IProps): JSX.Element => {
@@ -18,6 +19,11 @@ const BulkHeader = (props: IProps): JSX.Element => {
     filterItems,
     sortedListStatus,
     isEditable,
+    filterValues,
+    categoryColumns,
+    columns,
+    setColumns,
+    isGlobalPages,
   } = props;
 
   const deleteAction = {
@@ -59,6 +65,11 @@ const BulkHeader = (props: IProps): JSX.Element => {
       filterItems={filterItems}
       sortedListStatus={sortedListStatus}
       totalItems={totalItems}
+      filterValues={filterValues}
+      categoryColumns={categoryColumns}
+      columns={columns}
+      setColumns={setColumns}
+      isGlobalPages={isGlobalPages}
     />
   );
 };
@@ -78,6 +89,11 @@ interface IProps {
   filterItems: (filterPointer: string, filtersSelected: string) => void;
   sortedListStatus: any;
   isEditable?: boolean | null;
+  filterValues: any;
+  categoryColumns: any[];
+  columns: Record<string, IColumn>;
+  setColumns: (columns: Record<string, IColumn>) => void;
+  isGlobalPages: boolean;
 }
 
 export default BulkHeader;

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

@@ -15,7 +15,7 @@ import { getFilters } from "./utils";
 import * as S from "./style";
 
 const ContentFilters = (props: IProps): JSX.Element => {
-  const { setContentFilter, current, dynamicValues, addTemplate, setSelectedStructuredData } = props;
+  const { setContentFilter, current, dynamicValues, addTemplate, setSelectedStructuredData, resetFilter } = props;
   const clonedStructure = deepClone(filterStructure);
   const filters = getFilters(clonedStructure, dynamicValues);
 
@@ -32,6 +32,7 @@ const ContentFilters = (props: IProps): JSX.Element => {
                 const hasTemplate = fromPage && firstTemplate;
 
                 const handleClick = () => {
+                  resetFilter();
                   setContentFilter(value);
                   setSelectedStructuredData(value, "site");
                   if (hasTemplate) {
@@ -47,9 +48,7 @@ const ContentFilters = (props: IProps): JSX.Element => {
                 return (
                   <MenuItem key={filterKey} onClick={handleClick}>
                     <NavLink to="#" className={selectedClass}>
-                      <S.Link active={isSelected}>
-                        {name}
-                      </S.Link>
+                      <S.Link active={isSelected}>{name}</S.Link>
                     </NavLink>
                   </MenuItem>
                 );
@@ -67,6 +66,7 @@ interface IProps {
   addTemplate(template: string): void;
   dynamicValues: any;
   setSelectedStructuredData(id: string, scope: string): void;
+  resetFilter(): void;
 }
 
 const mapDispatchToProps = {

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

@@ -43,7 +43,7 @@ export const ThumbnailWrapper = styled.div`
 export const Thumbnail = styled.div<{backgroundUrl: string | boolean}>`
   background: ${p => p.backgroundUrl ? `url(${p.backgroundUrl}) no-repeat` : ""};
   background-size: cover;
-  background-position: center;
+  background-position: top;
   border-radius: 4px;
   min-width: calc(${p => p.theme.spacing.l} * 3);
   height: 100%;

package/src/modules/Content/PageItem/atoms.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect } from "react";
+
+import { ElementsTooltip } from "@ax/components";
+
+import * as S from "./style";
+
+const CategoryCell = (props: ICategoryCellProps): JSX.Element => {
+  const { categories, categoryColors, addCategoryColors } = props;
+
+  useEffect(() => {
+    addCategoryColors(categories);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [categories]);
+
+  return (
+    <S.CategoryCell>
+      <ElementsTooltip elements={categories} colors={categoryColors} maxChar={30} rounded={true} />
+    </S.CategoryCell>
+  );
+};
+
+interface ICategoryCellProps {
+  categories: any;
+  categoryColors: any;
+  addCategoryColors(cats: string[]): void;
+}
+
+export { CategoryCell };

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

@@ -2,7 +2,7 @@ import React, { memo, useState } from "react";
 
 import { useModal } from "@ax/hooks";
 import { getHumanLastModifiedDate, getTemplateDisplayName, slugify } from "@ax/helpers";
-import { IPage, ISite, ISavePageParams, ICheck } from "@ax/types";
+import { IPage, ISite, ISavePageParams, ICheck, IColumn } from "@ax/types";
 import { pageStatus, ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
 
 import {
@@ -17,10 +17,22 @@ import {
   Tooltip,
 } from "@ax/components";
 
+import { CategoryCell } from "./atoms";
+
 import * as S from "./style";
 
 const PageItem = (props: IPageItemProps): JSX.Element => {
-  const { functions, item, activatedTemplates, toggleToast, setRemovedPage } = props;
+  const {
+    functions,
+    item,
+    activatedTemplates,
+    toggleToast,
+    setRemovedPage,
+    columns,
+    categoryColumns,
+    categoryColors,
+    addCategoryColors,
+  } = props;
   const { isSelected, siteLanguages, page, lang } = item;
   const {
     onClick,
@@ -45,6 +57,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
   const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
 
   const isGlobal = origin === "GLOBAL";
+  const activeColumns = Object.keys(columns).filter((col: string) => columns[col].show);
 
   const publishedTooltip: any = {
     active: "Live",
@@ -356,6 +369,23 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
   const mainUnpublishAction = { title: "Ok", onClick: toggleUnpublishModal };
 
+  const CategoryColumns =
+    isGlobal &&
+    categoryColumns.map((col: any) => {
+      const type = page.template[col.from];
+      const categories = type && type.map((cat: any) => cat.title);
+      return (
+        activeColumns.includes(col.key) && (
+          <CategoryCell
+            key={col.key}
+            categories={categories}
+            categoryColors={categoryColors}
+            addCategoryColors={addCategoryColors}
+          />
+        )
+      );
+    });
+
   return (
     <>
       <S.PageRow role="rowgroup" selected={isSelected} global={isGlobal}>
@@ -369,28 +399,37 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
           </S.Title>
           <S.Slug>{fullPath.page}</S.Slug>
         </S.NameCell>
-        <S.TypeCell role="cell" onClick={goToPage}>
-          {displayName}
-        </S.TypeCell>
-        <S.LiveCell role="cell" onClick={goToPage}>
-          <Tooltip content={publishedTooltip[getLiveStatus()]}>
-            <Icon name={getLiveStatus()} />
-          </Tooltip>
-        </S.LiveCell>
-        <S.StatusCell role="cell" onClick={goToPage}>
-          {checkWorkflowStatus()}
-          <S.ModDate>{`Mod. ${getHumanLastModifiedDate(page.modified)}`}</S.ModDate>
-        </S.StatusCell>
-        <S.TransCell role="cell">
-          <FloatingMenu Button={FlagsButton}>
-            {languageMenu()}
-          </FloatingMenu>
-        </S.TransCell>
-        <S.SeoCell role="cell">
-          <SeoItems.Index />
-          {SeoTitleMenu()}
-          {SeoDescriptionMenu()}
-        </S.SeoCell>
+        {CategoryColumns}
+        {activeColumns.includes("type") && (
+          <S.TypeCell role="cell" onClick={goToPage}>
+            {displayName}
+          </S.TypeCell>
+        )}
+        {activeColumns.includes("live") && (
+          <S.LiveCell role="cell" onClick={goToPage}>
+            <Tooltip content={publishedTooltip[getLiveStatus()]}>
+              <Icon name={getLiveStatus()} />
+            </Tooltip>
+          </S.LiveCell>
+        )}
+        {activeColumns.includes("status") && (
+          <S.StatusCell role="cell" onClick={goToPage}>
+            {checkWorkflowStatus()}
+            <S.ModDate>{`Mod. ${getHumanLastModifiedDate(page.modified)}`}</S.ModDate>
+          </S.StatusCell>
+        )}
+        {activeColumns.includes("translation") && (
+          <S.TransCell role="cell">
+            <FloatingMenu Button={FlagsButton}>{languageMenu()}</FloatingMenu>
+          </S.TransCell>
+        )}
+        {activeColumns.includes("seo") && (
+          <S.SeoCell role="cell">
+            <SeoItems.Index />
+            {SeoTitleMenu()}
+            {SeoDescriptionMenu()}
+          </S.SeoCell>
+        )}
         <S.GlobalCell>{isGlobal && <GlobalMark />}</S.GlobalCell>
         <S.ActionsCell role="cell">
           <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Page actions" />
@@ -499,6 +538,10 @@ interface IPageItemProps {
   activatedTemplates: any[];
   toggleToast(): void;
   setRemovedPage(pageID: number): void;
+  categoryColumns: any[];
+  columns: Record<string, IColumn>;
+  categoryColors: any;
+  addCategoryColors(cats: string[]): void;
 }
 
 export default memo(PageItem);