@griddo/ax 11.6.4-rc.0 → 11.6.4-rc.1

package/package.json

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

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

@@ -39,19 +39,26 @@ const TableHeader = (props: IProps): JSX.Element => {
 
   const CategoryColumns =
     isGlobalPages &&
-    categoryColumns.map(
-      (col) =>
+    categoryColumns.map((col) => {
+      return (
         activeColumns.includes(col.key) && (
-          <S.HeaderWrapper key={col.key}>
-            <CategoryFilter
-              filterItems={filterItems}
-              structuredData={col}
-              value={filterValues.categories}
-              siteID={siteID}
-            />
-          </S.HeaderWrapper>
+          <React.Fragment key={col.key}>
+            {col.type === "AsyncCheckGroup" ? (
+              <S.HeaderWrapper>
+                <CategoryFilter
+                  filterItems={filterItems}
+                  structuredData={col}
+                  value={filterValues.categories}
+                  siteID={siteID}
+                />
+              </S.HeaderWrapper>
+            ) : (
+              <S.ColumnHeader>{col.title}</S.ColumnHeader>
+            )}
+          </React.Fragment>
         )
-    );
+      );
+    });
 
   return (
     <S.TableHeader isScrolling={isScrolling}>

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

@@ -74,6 +74,11 @@ const HeaderWrapper = styled.div`
   position: relative;
 `;
 
+const ColumnHeader = styled(Header)`
+  flex: 0 0 150px;
+  justify-content: center;
+`;
+
 export {
   TableHeader,
   CheckHeader,
@@ -87,4 +92,5 @@ export {
   HeaderWrapper,
   GlobalMark,
   TypeHeader,
+  ColumnHeader,
 };

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

@@ -5,7 +5,17 @@ import { useTheme } from "styled-components";
 
 import { useAdaptiveText, useModal, usePermission } from "@ax/hooks";
 import { getHumanLastModifiedDate, getScheduleFormatDate, getTemplateDisplayName, slugify } from "@ax/helpers";
-import { IPage, ISite, ISavePageParams, ICheck, IColumn, IPageLanguage, IDataPack, ILanguage } from "@ax/types";
+import {
+  IPage,
+  ISite,
+  ISavePageParams,
+  ICheck,
+  IColumn,
+  IPageLanguage,
+  IDataPack,
+  ILanguage,
+  ISchemaField,
+} from "@ax/types";
 import { pageStatus, ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
 import {
   CheckField,
@@ -478,8 +488,21 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
   const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
 
-  const CategoryColumns = categoryColumns.map((col: any) => {
+  const CategoryColumns = categoryColumns.map((col) => {
+    if (!activeColumns.includes(col.key)) {
+      return <></>;
+    }
+
     const type: any = structuredDataContent && structuredDataContent[col.key];
+
+    if (typeof type === "string") {
+      return (
+        <S.ColumnCell key={col.key} onClick={goToPage}>
+          {type}
+        </S.ColumnCell>
+      );
+    }
+
     const categories: string[] = !type
       ? []
       : Array.isArray(type)
@@ -487,14 +510,12 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
         : [type.label || type.title];
 
     return (
-      activeColumns.includes(col.key) && (
-        <CategoryCell
-          key={col.key}
-          categories={categories}
-          categoryColors={categoryColors}
-          addCategoryColors={addCategoryColors}
-        />
-      )
+      <CategoryCell
+        key={col.key}
+        categories={categories}
+        categoryColors={categoryColors}
+        addCategoryColors={addCategoryColors}
+      />
     );
   });
 
@@ -689,7 +710,7 @@ interface IPageItemProps {
   activatedTemplates: any[];
   toggleToast(): void;
   setRemovedPage(pageID: number): void;
-  categoryColumns: any[];
+  categoryColumns: ISchemaField[];
   columns: IColumn[];
   categoryColors: any;
   addCategoryColors(cats: string[]): void;

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

@@ -194,6 +194,12 @@ const ModalContent = styled.div`
   padding: ${(p) => p.theme.spacing.m};
 `;
 
+const ColumnCell = styled(Cell)`
+  flex: 0 0 150px;
+  position: relative;
+  align-items: center;
+`;
+
 export {
   CheckCell,
   NameCell,
@@ -218,4 +224,5 @@ export {
   GlobalCell,
   Mark,
   Home,
+  ColumnCell,
 };

package/src/modules/StructuredData/StructuredDataList/BulkHeader/TableHeader/index.tsx

@@ -44,9 +44,15 @@ const TableHeader = (props: IProps): JSX.Element => {
     categoryColumns.map(
       (col) =>
         activeColumns.includes(col.key) && (
-          <S.HeaderWrapper key={col.key}>
-            <CategoryFilter filterItems={filterItems} value={filterCategories} structuredData={col} siteID={null} />
-          </S.HeaderWrapper>
+          <React.Fragment key={col.key}>
+            {col.type === "AsyncCheckGroup" ? (
+              <S.HeaderWrapper key={col.key}>
+                <CategoryFilter filterItems={filterItems} value={filterCategories} structuredData={col} siteID={null} />
+              </S.HeaderWrapper>
+            ) : (
+              <S.ColumnHeader>{col.title}</S.ColumnHeader>
+            )}
+          </React.Fragment>
         )
     );
 

package/src/modules/StructuredData/StructuredDataList/BulkHeader/TableHeader/style.tsx

@@ -64,6 +64,11 @@ const HeaderWrapper = styled.div`
   position: relative;
 `;
 
+const ColumnHeader = styled(Header)`
+  flex: 0 0 150px;
+  justify-content: center;
+`;
+
 export {
   TableHeader,
   CheckHeader,
@@ -77,4 +82,5 @@ export {
   HeaderWrapper,
   SeoHeader,
   TypeHeader,
+  ColumnHeader,
 };

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/index.tsx

@@ -2,7 +2,16 @@ import React, { useRef, useState } from "react";
 import { connect } from "react-redux";
 import { useTheme } from "styled-components";
 
-import { ICheck, IAvailableSites, ISavePageParams, ILanguage, IPageLanguage, IPage, IColumn } from "@ax/types";
+import {
+  ICheck,
+  IAvailableSites,
+  ISavePageParams,
+  ILanguage,
+  IPageLanguage,
+  IPage,
+  IColumn,
+  ISchemaField,
+} from "@ax/types";
 import { getHumanLastModifiedDate, getScheduleFormatDate, getStructuredDataTitle, trimText } from "@ax/helpers";
 import { appActions } from "@ax/containers/App";
 import { pageStatus, ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
@@ -357,8 +366,21 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 
   const mainUnpublishAction = { title: "Ok", onClick: toggleUnpublishModal };
 
-  const CategoryColumns = categoryColumns.map((col: any) => {
+  const CategoryColumns = categoryColumns.map((col) => {
+    if (!activeColumns.includes(col.key)) {
+      return <></>;
+    }
+
     const type: any = structuredDataContent && structuredDataContent[col.key];
+
+    if (typeof type === "string") {
+      return (
+        <S.ColumnCell key={col.key} onClick={_handleClick}>
+          {type}
+        </S.ColumnCell>
+      );
+    }
+
     const categories: string[] = !type
       ? []
       : Array.isArray(type)
@@ -366,14 +388,12 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
         : [type.label || type.title];
 
     return (
-      activeColumns.includes(col.key) && (
-        <CategoryCell
-          key={col.key}
-          categories={categories}
-          categoryColors={categoryColors}
-          addCategoryColors={addCategoryColors}
-        />
-      )
+      <CategoryCell
+        key={col.key}
+        categories={categories}
+        categoryColors={categoryColors}
+        addCategoryColors={addCategoryColors}
+      />
     );
   });
 
@@ -487,7 +507,7 @@ interface IGlobalPageItemProps {
   toggleToast(): void;
   setDeletedItem(item: number | number[] | null): void;
   deleteBulk(ids: number[]): Promise<boolean>;
-  categoryColumns: any[];
+  categoryColumns: ISchemaField[];
   columns: IColumn[];
   categoryColors: any;
   addCategoryColors(cats: string[]): void;

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

@@ -163,6 +163,12 @@ const ModalContent = styled.div`
   }
 `;
 
+const ColumnCell = styled(Cell)`
+  flex: 0 0 150px;
+  position: relative;
+  align-items: center;
+`;
+
 export {
   CheckCell,
   NameCell,
@@ -185,4 +191,5 @@ export {
   ModalContent,
   Title,
   Slug,
+  ColumnCell,
 };

package/src/modules/StructuredData/StructuredDataList/StructuredDataItem/index.tsx

@@ -211,8 +211,21 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
     });
   }
 
-  const CategoryColumns = categoryColumns.map((col: any) => {
+  const CategoryColumns = categoryColumns.map((col) => {
+    if (!activeColumns.includes(col.key)) {
+      return <></>;
+    }
+
     const type: any = structuredData && structuredData.content && structuredData.content[col.key];
+
+    if (typeof type === "string") {
+      return (
+        <S.ColumnCell key={col.key} onClick={_handleClick}>
+          {type}
+        </S.ColumnCell>
+      );
+    }
+
     const categories: string[] = !type
       ? []
       : Array.isArray(type)
@@ -220,14 +233,12 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
         : [type.label || type.title];
 
     return (
-      activeColumns.includes(col.key) && (
-        <CategoryCell
-          key={col.key}
-          categories={categories}
-          categoryColors={categoryColors}
-          addCategoryColors={addCategoryColors}
-        />
-      )
+      <CategoryCell
+        key={col.key}
+        categories={categories}
+        categoryColors={categoryColors}
+        addCategoryColors={addCategoryColors}
+      />
     );
   });
 

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

@@ -92,6 +92,12 @@ const FlagsWrapper = styled.div`
   }
 `;
 
+const ColumnCell = styled(Cell)`
+  flex: 0 0 150px;
+  position: relative;
+  align-items: center;
+`;
+
 export {
   CheckCell,
   NameCell,
@@ -104,4 +110,5 @@ export {
   StructuredDataRow,
   FlagsWrapper,
   Title,
+  ColumnCell,
 };