@griddo/ax 1.58.6 → 1.59.2

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

@@ -15,25 +15,24 @@ const CheckCell = styled(Cell)`
 const NameCell = styled(Cell)`
   ${(p) => p.theme.textStyle.uiL};
   color: ${(p) => p.theme.color.textHighEmphasis};
-  width: 20%;
   flex-grow: 1;
 `;
 
 const TypeCell = styled(Cell)`
-  width: 230px;
   align-items: center;
+  flex: 0 0 170px;
 `;
 
 const SiteCell = styled(Cell)`
-  width: 230px;
+  flex: 0 0 170px;
   align-items: center;
 `;
 
 const ActionsCell = styled(Cell)`
-  width: 92px;
+  flex: 0 0 100px;
 `;
 
-export const ActionsWrapper = styled.div`
+const ActionsWrapper = styled.div`
   opacity: 0;
   transition: opacity 0.1s;
   text-align: right;
@@ -41,13 +40,13 @@ export const ActionsWrapper = styled.div`
 
 const TransCell = styled(Cell)`
   ${(p) => p.theme.textStyle.uiXS};
-  width: 115px;
   align-items: center;
   position: relative;
+  flex: 0 0 115px;
 `;
 
 const LiveCell = styled(Cell)`
-  width: 80px;
+  flex: 0 0 80px;
   align-items: center;
   svg {
     width: ${(p) => p.theme.spacing.m};
@@ -56,7 +55,7 @@ const LiveCell = styled(Cell)`
 `;
 
 const StatusCell = styled(Cell)`
-  width: 170px;
+  flex: 0 0 170px;
   align-items: center;
   div:nth-child(2) {
     margin-top: ${(p) => p.theme.spacing.xs};
@@ -75,6 +74,12 @@ const StyledActionMenu = styled(ActionMenu)`
   margin-left: auto;
 `;
 
+const CategoryCell = styled(Cell)`
+  flex: 0 0 150px;
+  align-items: center;
+  position: relative;
+`;
+
 const StructuredDataRow = styled(Row)<{ disabled: boolean }>`
   cursor: ${(p) => (p.disabled ? "default" : "pointer")};
   &:hover {
@@ -96,7 +101,7 @@ const FlagsWrapper = styled.div`
 
 const SeoCell = styled(Cell)`
   ${(p) => p.theme.textStyle.uiXS};
-  width: 124px;
+  flex: 0 0 124px;
 `;
 
 const StyledSeo = styled.div`
@@ -150,6 +155,7 @@ export {
   CheckCell,
   NameCell,
   ActionsCell,
+  ActionsWrapper,
   StyledActionMenu,
   TransCell,
   LiveCell,
@@ -165,4 +171,5 @@ export {
   StyledClose,
   FloatingSeo,
   ModalContent,
+  CategoryCell,
 };

package/src/modules/StructuredData/StructuredDataList/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/StructuredData/StructuredDataList/hooks.tsx

@@ -24,12 +24,13 @@ const useFilterQuery = (): IUseFilterQuery => {
     liveStatus: "all",
     order: "",
     filterSites: "all",
+    categories: "all",
   };
 
   const [query, setQuery] = useState(initialQueryValues);
 
   const setFilterQuery = (filterValues: IStructuredDataQueryValues) => {
-    const { types, translated, liveStatus, order, filterSites } = filterValues;
+    const { types, translated, liveStatus, order, filterSites, categories } = filterValues;
     let filterQuery = "";
 
     const currentQuery = (pointer: string, values: string) => {
@@ -45,12 +46,13 @@ const useFilterQuery = (): IUseFilterQuery => {
     if (isNotInitialValue("liveStatus")) filterQuery = currentQuery("liveStatus", liveStatus);
     if (isNotInitialValue("order")) filterQuery = currentQuery("order", order);
     if (isNotInitialValue("filterSites")) filterQuery = currentQuery("filterSites", filterSites);
+    if (isNotInitialValue("categories")) filterQuery = currentQuery("categories", categories);
 
     return filterQuery;
   };
 
   const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
-    const { types, translated, liveStatus, order, filterSites } = query;
+    const { types, translated, liveStatus, order, filterSites, categories } = query;
     const orderMethod = isAscendent ? "asc" : "desc";
     const filterValues = {
       types: pointer === "types" ? filter : types,
@@ -58,6 +60,7 @@ const useFilterQuery = (): IUseFilterQuery => {
       liveStatus: pointer === "liveStatus" ? filter : liveStatus,
       order: pointer === "order" ? `${filter}-${orderMethod}` : order,
       filterSites: pointer === "filterSites" ? filter : filterSites,
+      categories: pointer === "categories" ? filter : categories,
     };
 
     setQuery(filterValues);
@@ -65,9 +68,12 @@ const useFilterQuery = (): IUseFilterQuery => {
     return filterValues;
   };
 
+  const resetFilterQuery = () => setQuery(initialQueryValues);
+
   return {
     setFiltersSelection,
     setFilterQuery,
+    resetFilterQuery,
     filterValues: query,
   };
 };
@@ -80,6 +86,7 @@ interface IUseSortedListStatus {
 interface IUseFilterQuery {
   setFiltersSelection(pointer: string, filter: string, isAscendent?: boolean): IStructuredDataQueryValues;
   setFilterQuery(filterValues: IStructuredDataQueryValues): string;
+  resetFilterQuery(): void;
   filterValues: IStructuredDataQueryValues;
 }
 

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

@@ -15,6 +15,7 @@ import {
   IGetGlobalPagesParams,
   IPage,
   ICheck,
+  IColumn,
 } from "@ax/types";
 import {
   ISetCurrentPageIDAction,
@@ -22,7 +23,7 @@ import {
   ISetCurrentPageNameAction,
   pageStatus,
 } from "@ax/containers/PageEditor/interfaces";
-import { useBulkSelection, useModal, useToast } from "@ax/hooks";
+import { useBulkSelection, useModal, useToast, useCategoryColors } from "@ax/hooks";
 import { appActions } from "@ax/containers/App";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { sitesActions } from "@ax/containers/Sites";
@@ -99,13 +100,14 @@ const StructuredDataList = (props: IProps): JSX.Element => {
   const { isOpen: isNewOpen, toggleModal: toggleNewModal } = useModal();
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
   const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
-  const { setFiltersSelection, setFilterQuery, filterValues } = useFilterQuery();
+  const { setFiltersSelection, setFilterQuery, filterValues, resetFilterQuery } = useFilterQuery();
   const [currentFilterQuery, setCurrentFilterQuery] = useState("");
   const history = useHistory();
   const [isFirstRender, setIsFirstRender] = useState(true);
   const [deleteAllVersions, setDeleteAllVersions] = useState(false);
   const [arePagesTranslated, setArePagesTranslated] = useState(false);
   const { state: locationState } = useLocation<{ isFromEditor: boolean }>();
+  const { categoryColors, addCategoryColors } = useCategoryColors();
 
   const scope = currentSiteID ? "site" : "global";
   const isDataEditable = !currentStructuredData || currentStructuredData.editable;
@@ -116,6 +118,30 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     ? currentSitePages.map((page: IPage) => page.id)
     : currentDataContent.map((data: IStructuredDataContent) => data.id);
 
+  const categoryColumns =
+    currentStructuredData && currentStructuredData.schema
+      ? currentStructuredData.schema.fields.filter((field: any) => field.showList)
+      : [];
+
+  const defaultColumns: Record<string, IColumn> = {
+    live: { title: "Live", show: true },
+    status: { title: "Status", show: true },
+    translation: { title: "Trans.", show: true },
+    seo: { title: "SEO", show: true },
+  };
+
+  const extraColumns = categoryColumns.reduce((acc: Record<string, IColumn>, cur: any) => {
+    acc[cur.key] = { title: cur.title, show: false };
+    return acc;
+  }, {});
+
+  const allColumns = { type: { title: "Types", show: true }, ...extraColumns, ...defaultColumns };
+  const filterColumns = { site: { title: "Site", show: true }, ...extraColumns, ...defaultColumns };
+
+  const initialColumns = isAllPages ? allColumns : filterColumns;
+
+  const [columnsState, setColumnsState] = useState(initialColumns);
+
   const {
     resetBulkSelection,
     selectedItems,
@@ -144,10 +170,10 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     (id: string, filterQuery?: string) => {
       const params: IGetStructuredDataParams = { ...getParams(), dataID: null };
       params.dataID = id;
-      if (isStructuredDataFromPage) params.filterQuery = filterQuery;
+      params.filterQuery = filterQuery;
       getStructuredDataContents(params);
     },
-    [getParams, isStructuredDataFromPage, getStructuredDataContents]
+    [getParams, getStructuredDataContents]
   );
 
   const handleGetGlobalPages = () => {
@@ -157,7 +183,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
   };
 
   const handleGetData = () => {
-    isStructuredDataFromPage ? handleGetGlobalPages() : getStructuredData(filter);
+    isStructuredDataFromPage ? handleGetGlobalPages() : getStructuredData(filter, currentFilterQuery);
   };
 
   const resetFilter = () => {
@@ -180,6 +206,11 @@ const StructuredDataList = (props: IProps): JSX.Element => {
       filterItems("filterSites", "all");
     }
     unselectAllItems();
+    if (filter === "all-pages") {
+      setColumnsState(filter === "all-pages" ? allColumns : filterColumns);
+    } else {
+      setColumnsState({ site: { title: "Site", show: true }, ...extraColumns, ...initialColumns });
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filter]);
 
@@ -232,6 +263,8 @@ const StructuredDataList = (props: IProps): JSX.Element => {
   };
 
   const handleMenuClick = (dataID: string) => {
+    resetFilterQuery();
+    setCurrentFilterQuery("");
     setPage(firstPage);
     setSelectedStructuredData(dataID, scope);
   };
@@ -359,6 +392,9 @@ const StructuredDataList = (props: IProps): JSX.Element => {
       filterItems={filterItems}
       filterValues={filterValues}
       isAllPages={isAllPages}
+      categoryColumns={categoryColumns}
+      columns={columnsState}
+      setColumns={setColumnsState}
     />
   );
 
@@ -447,6 +483,10 @@ const StructuredDataList = (props: IProps): JSX.Element => {
           getGlobalPages={handleGetGlobalPages}
           toggleToast={togglePageToast}
           setDeletedItem={setDeletedItem}
+          categoryColumns={categoryColumns}
+          columns={columnsState}
+          categoryColors={categoryColors}
+          addCategoryColors={addCategoryColors}
         />
       );
     });

package/src/routes/multisite.tsx

@@ -7,6 +7,7 @@ import Profile from "../modules/Users/Profile";
 import UserCreate from "../modules/Users/UserCreate";
 import UserEdit from "../modules/Users/UserEdit";
 import Editor from "./../modules/GlobalEditor";
+import GlobalSettings from "./../modules/GlobalSettings";
 
 export default [
   { path: "/sites", component: Sites, name: "Sites", showInNav: true, icon: "Project" },
@@ -25,4 +26,11 @@ export default [
     showInNav: false,
     hideNav: true,
   },
+  {
+    path: `/settings/robots`,
+    component: GlobalSettings,
+    name: "Settings",
+    showInNav: true,
+    icon: "Settings",
+  },
 ];

package/src/types/index.tsx

@@ -8,6 +8,7 @@ import { ILanguageState } from "@ax/containers/Settings/Languages/reducer";
 import { IDataPacksState } from "@ax/containers/Settings/DataPacks/reducer";
 import { IUsersState } from "@ax/containers/Users/reducer";
 import { IGalleryState } from "@ax/containers/Gallery/reducer";
+import { IDomainsState } from "@ax/containers/Domains/reducer";
 
 export interface IBreadcrumbItem {
   editorID: number;
@@ -179,6 +180,7 @@ export interface IRootState {
   social: ISocialState;
   users: IUsersState;
   gallery: IGalleryState;
+  domains: IDomainsState;
 }
 
 export interface IStyledProps {
@@ -415,6 +417,8 @@ export interface IRelatedPage {
   origin: string;
   pageId: number;
   url: string;
+  originalPageId: number;
+  originalStructuredDataId: number;
 }
 
 export interface IStructuredDataContent {
@@ -592,6 +596,7 @@ export interface IStructuredDataQueryValues {
   liveStatus: string;
   order: string;
   filterSites: string;
+  categories: string;
 }
 
 export interface IDataPackConfigImportCategory {
@@ -634,6 +639,11 @@ export interface IImageForm {
   tags: string[];
 }
 
+export interface IColumn {
+  title: string;
+  show: boolean;
+}
+
 export interface IGlobalLanguage {
   id: number;
   locale: string;
@@ -643,17 +653,24 @@ export interface IGlobalLanguage {
 }
 
 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,
+  clone: any;
+  dataPacks: string[];
+  defaultValues: any;
+  editable: boolean;
+  fromPage: boolean;
+  id: string;
+  local: false;
+  schema: any;
+  taxonomy: boolean;
+  title: string;
+  translate: boolean;
+}
+
+export interface IDomainRobot {
+  id: number;
+  path: string;
+  fullUrl: string;
+  content: string;
 }
 
 export type Field =

package/src/modules/Content/HeaderMenus/Live/index.tsx

@@ -1,93 +0,0 @@
-import React, { useState, useEffect } from "react";
-
-import { CheckGroup, Icon, FloatingMenu, ListTitle } from "@ax/components";
-import { checkgroups } from "@ax/api";
-import { areEquals, isReqOk } from "@ax/helpers";
-import { IPageLiveStatus } from "@ax/types";
-
-import * as S from "./style";
-
-const Live = (props: ILiveProps): JSX.Element => {
-  const { filterItems } = props;
-
-  const filters: Array<{ name: string; value: string; title: string; icon?: string }> = [
-    {
-      name: "all",
-      value: "all",
-      title: "All",
-    },
-  ];
-
-  const initialState = ["all"];
-  const selectAllOption = "all";
-  const [selectedValue, setSelectedValue] = useState(initialState);
-  const [options, setOptions] = useState(filters);
-
-  const getLiveStatusValues = async () => {
-    try {
-      const items = await checkgroups.getLiveStatusItems();
-      if (items && isReqOk(items.status)) {
-        return items.data;
-      }
-    } catch (e) {
-      console.log(e);
-    }
-    return false;
-  };
-
-  useEffect(() => {
-    getLiveStatusValues()
-      .then((items) => {
-        items.forEach((item: IPageLiveStatus) => {
-          const newFilter = {
-            name: item.status,
-            value: item.status,
-            title: item.title,
-            icon: item.status,
-          };
-          filters.push(newFilter);
-        });
-        setOptions(filters);
-      })
-      .catch((apiError) => console.log(apiError));
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const setQuery = (selection: any) => {
-    if (!selection.length) {
-      selection = initialState;
-    }
-    setSelectedValue(selection);
-    const queryFilters = selection.join(",");
-    const pointer = "liveStatus";
-    filterItems(pointer, queryFilters);
-  };
-
-  const isActive = !areEquals(selectedValue, initialState);
-  const Header = () => (
-    <S.MenuWrapper>
-      <S.LiveOptions isActive={isActive}>
-        Live
-        <S.IconsWrapper>
-          <Icon name="Filter" size="16" />
-        </S.IconsWrapper>
-      </S.LiveOptions>
-    </S.MenuWrapper>
-  );
-
-  return (
-    <FloatingMenu Button={Header} position="left" closeOnSelect={false}>
-      <ListTitle>Filter by status</ListTitle>
-      <S.ChecksWrapper>
-        <CheckGroup options={options} value={selectedValue} onChange={setQuery} selectAllOption={selectAllOption} />
-      </S.ChecksWrapper>
-    </FloatingMenu>
-  );
-};
-
-interface ILiveProps {
-  filterItems(pointer: string, filter: string): void;
-}
-
-export default Live;

package/src/modules/Content/HeaderMenus/Name/index.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-
-import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
-
-import * as S from "./style";
-
-const NameHeader = ({ sortItems, sortedState }: INameHeaderProps) => {
-  const { isAscending, sortedByTitle, sortedByURL } = sortedState;
-  const sortByName = (isAscending: boolean) => sortItems("title", isAscending);
-  const sortAscendingURL = () => sortItems("slug", true);
-  const sortAscendingName = () => sortByName(true);
-  const sortDescendingName = () => sortByName(false);
-
-  const SortedStateArrow = () =>
-    isAscending ? <Icon name="FullArrowUp" size="16" /> : <Icon name="FullArrowDown" size="16" />;
-  const isActive = sortedByTitle || sortedByURL;
-
-  const Header = () => (
-    <S.NameHeader isActive={isActive}>
-      Name & URL
-      <S.IconsWrapper>
-        {(sortedByTitle || sortedByURL) && <SortedStateArrow />}
-        <S.InteractiveArrow>
-          <Icon name="DownArrow" size="16" />
-        </S.InteractiveArrow>
-      </S.IconsWrapper>
-    </S.NameHeader>
-  );
-
-  return (
-    <FloatingMenu Button={Header} position="left">
-      <ListTitle>Name Sorting</ListTitle>
-      <ListItem isSelected={sortedByTitle && isAscending} onClick={sortAscendingName}>
-        Ascendent
-      </ListItem>
-      <ListItem isSelected={sortedByTitle && !isAscending} onClick={sortDescendingName}>
-        Descendent
-      </ListItem>
-      <ListTitle>URL Sorting</ListTitle>
-      <ListItem isSelected={sortedByURL} onClick={sortAscendingURL}>
-        Ascendent
-      </ListItem>
-    </FloatingMenu>
-  );
-};
-
-interface INameHeaderProps {
-  sortedState: any;
-  sortItems(orderPointer: string, isAscendent: boolean): any;
-}
-
-export default NameHeader;

package/src/modules/Content/HeaderMenus/Translations/index.tsx

@@ -1,62 +0,0 @@
-import React, { useState } from "react";
-
-import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
-
-import { areEquals } from "@ax/helpers";
-
-import * as S from "./style";
-
-const Translations = ({ filterItems }: ITranslationsProps) => {
-  const filters = [
-    {
-      name: "all",
-      value: "all",
-      title: "All",
-    },
-    {
-      name: "no",
-      value: "no",
-      title: "Not translated content",
-    },
-  ];
-
-  const initialState = ["all"];
-  const selectAllOption = "all";
-  const [selectedValue, setSelectedValue] = useState(initialState);
-
-  const setQuery = (selection: any) => {
-    if (!selection.length) {
-      selection = initialState;
-    }
-    setSelectedValue(selection);
-    const queryFilters = selection.join("&");
-    const pointer = "translated";
-    filterItems(pointer, queryFilters);
-  };
-
-  const isActive = !areEquals(selectedValue, initialState);
-
-  const Header = () => (
-    <S.Translations isActive={isActive}>
-      Trans.
-      <S.IconsWrapper>
-        <Icon name="Filter" size="16" />
-      </S.IconsWrapper>
-    </S.Translations>
-  );
-
-  return (
-    <FloatingMenu Button={Header} position="left" closeOnSelect={true} isCheckGroup={true}>
-      <ListTitle>Filter by translations</ListTitle>
-      <S.ChecksWrapper>
-        <CheckGroup options={filters} value={selectedValue} onChange={setQuery} selectAllOption={selectAllOption} />
-      </S.ChecksWrapper>
-    </FloatingMenu>
-  );
-};
-
-interface ITranslationsProps {
-  filterItems(pointer: string, filter: string): void;
-}
-
-export default Translations;

package/src/modules/Content/HeaderMenus/Types/index.tsx

@@ -1,73 +0,0 @@
-import React, { useState } from "react";
-
-import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
-
-import { areEquals } from "@ax/helpers";
-
-import * as S from "./style";
-
-const Types = ({ filterItems }: ITypesProps) => {
-  const filters = [
-    {
-      name: "all",
-      value: "all",
-      title: "All content",
-    },
-    {
-      name: "unique",
-      value: "unique",
-      title: "Basic templates",
-    },
-    {
-      name: "structuredData",
-      value: "structuredData",
-      title: "Content types",
-    },
-  ];
-
-  const initialState = ["all"];
-  const selectAllOption = "all";
-  const [selectedValue, setSelectedValue] = useState(initialState);
-
-  const setFilterQuery = (selection: any) => {
-    if (!selection.length) {
-      selection = initialState;
-    }
-    setSelectedValue(selection);
-    const queryFilters = selection.join("&");
-    const pointer = "type";
-    filterItems(pointer, queryFilters);
-  };
-
-  const isActive = !areEquals(selectedValue, initialState);
-
-  const Header = () => (
-    <S.Types isActive={isActive}>
-      Types
-      <S.IconsWrapper>
-        <Icon name="Filter" size="16" />
-      </S.IconsWrapper>
-    </S.Types>
-  );
-
-  return (
-    <FloatingMenu Button={Header} position="left" closeOnSelect={true} isCheckGroup={true}>
-      <ListTitle>Filter by types</ListTitle>
-      <S.ChecksWrapper>
-        <CheckGroup
-          options={filters}
-          value={selectedValue}
-          onChange={setFilterQuery}
-          selectAllOption={selectAllOption}
-          multipleSelection={false}
-        />
-      </S.ChecksWrapper>
-    </FloatingMenu>
-  );
-};
-
-interface ITypesProps {
-  filterItems(pointer: string, filter: string): void;
-}
-
-export default Types;