@griddo/ax 11.7.13 → 11.8.0-rc.0

package/src/components/TableFilters/CheckGroupFilter/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
+import { CheckGroup, FloatingMenu, Icon, ListTitle, SearchField } from "@ax/components";
 import { areEquals } from "@ax/helpers";
 import { IFilterValue, IQueryValue } from "@ax/types";
 
@@ -17,15 +17,24 @@ const CheckGroupFilter = (props: ITypeFilterProps): JSX.Element => {
     initialState,
     multipleSelection = true,
     menuPosition = "center",
+    search = false,
   } = props;
 
   const arrayValues = Array.isArray(value) && value.length ? value.map((val) => val.value) : initialState;
   const [selectedValue, setSelectedValue] = useState(arrayValues);
+  const [filteredOptions, setFilteredOptions] = useState(filters);
+  const [hasSearch, setHasSearch] = useState(search && !!filters.length);
 
   useEffect(() => {
     const arrayValues = Array.isArray(value) && value.length ? value.map((val) => val.value) : initialState;
     setSelectedValue(arrayValues);
-  }, [value]);
+  }, [value, initialState]);
+
+  useEffect(() => {
+    setHasSearch(search && !!filters.length);
+    setFilteredOptions(filters);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filters]);
 
   const setFilterQuery = (selection: any) => {
     if (!selection.length) {
@@ -39,6 +48,18 @@ const CheckGroupFilter = (props: ITypeFilterProps): JSX.Element => {
     filterItems(pointer, queryFilters);
   };
 
+  const filterOptions = (query: string) => {
+    const filteredSites =
+      query.trim().length > 0
+        ? filters.filter((value) =>
+            value.title.toLowerCase().replace(" ", "").includes(query.toLowerCase().replace(" ", ""))
+          )
+        : filters;
+    setFilteredOptions(filteredSites);
+  };
+
+  const cleanSearchOnClose = () => filterOptions("");
+
   const isActive = !areEquals(selectedValue, initialState);
 
   const Header = () => (
@@ -50,15 +71,30 @@ const CheckGroupFilter = (props: ITypeFilterProps): JSX.Element => {
     </S.StyledHeader>
   );
 
+  const hasAllOption = filteredOptions.find((opt) => opt.value === "all");
+
   return (
-    <FloatingMenu Button={Header} closeOnSelect={!multipleSelection} isCheckGroup={true} position={menuPosition}>
+    <FloatingMenu
+      Button={Header}
+      closeOnSelect={!multipleSelection}
+      isCheckGroup={true}
+      position={menuPosition}
+      hasMargin={false}
+      fixedWidth={search ? 263 : undefined}
+      actionOnClose={cleanSearchOnClose}
+    >
       <ListTitle>{description}</ListTitle>
+      {hasSearch && (
+        <S.SearchWrapper>
+          <SearchField onChange={filterOptions} size="XXS" searchOnEnter={false} placeholder="Search" />
+        </S.SearchWrapper>
+      )}
       <S.ChecksWrapper>
         <CheckGroup
-          options={filters}
+          options={filteredOptions}
           value={selectedValue}
           onChange={setFilterQuery}
-          selectAllOption={selectAllOption}
+          selectAllOption={hasAllOption ? selectAllOption : undefined}
           multipleSelection={multipleSelection}
         />
       </S.ChecksWrapper>
@@ -77,6 +113,7 @@ interface ITypeFilterProps {
   initialState: string[];
   multipleSelection?: boolean;
   menuPosition?: string;
+  search?: boolean;
 }
 
 export default CheckGroupFilter;

package/src/components/TableFilters/CheckGroupFilter/style.tsx

@@ -35,6 +35,13 @@ const InteractiveArrow = styled.div`
 
 const ChecksWrapper = styled.div`
   padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.s};
+  max-height: calc(${(p) => p.theme.spacing.xl} * 4);
+  overflow-y: scroll;
+  min-width: calc(${(p) => p.theme.spacing.l} * 4);
 `;
 
-export { StyledHeader, IconsWrapper, InteractiveArrow, ChecksWrapper };
+const SearchWrapper = styled.div`
+  padding: ${(p) => p.theme.spacing.xxs} ${(p) => p.theme.spacing.s};
+`;
+
+export { StyledHeader, IconsWrapper, InteractiveArrow, ChecksWrapper, SearchWrapper };

package/src/components/TableFilters/SiteFilter/index.tsx

@@ -1,20 +1,17 @@
-import React, { useEffect, useLayoutEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 
-import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
-import { areEquals, isReqOk } from "@ax/helpers";
+import { CheckGroupFilter } from "@ax/components";
+import { isReqOk } from "@ax/helpers";
 import { selects } from "@ax/api";
 import { IFilterValue, IQueryValue } from "@ax/types";
 
-import * as S from "./style";
-
 const SiteFilter = (props: ISiteFilterProps): JSX.Element => {
   const {
     filterItems,
     value,
     pointer,
-    center = true,
     label = "Site",
-    selectAllOption = "all",
+    addGlobal = false,
     filters = [
       {
         name: "all",
@@ -24,22 +21,15 @@ const SiteFilter = (props: ISiteFilterProps): JSX.Element => {
     ],
   } = props;
 
-  const initialState = [selectAllOption];
-  const parsedValue =
-    Array.isArray(value[pointer]) && value[pointer].length
-      ? value[pointer].map((val: IQueryValue) => val.value)
-      : initialState;
-  const [selectedValue, setSelectedValue] = useState(parsedValue);
   const [options, setOptions] = useState(filters);
 
-  useLayoutEffect(() => {
-    const parsedValue =
-      Array.isArray(value[pointer]) && value[pointer].length
-        ? value[pointer].map((val: IQueryValue) => val.value)
-        : initialState;
-    setSelectedValue(parsedValue);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
+  if (addGlobal) {
+    filters.push({
+      name: "global",
+      value: "global",
+      title: "Global",
+    });
+  }
 
   const getSelectSites = async () => {
     try {
@@ -72,53 +62,32 @@ const SiteFilter = (props: ISiteFilterProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const setQuery = (selection: any) => {
-    if (!selection.length) {
-      selection = initialState;
-    }
-    setSelectedValue(selection);
-    const queryFilters: IQueryValue[] = selection.map((value: string | number) => {
-      const label = options.find((opt: IFilterValue) => opt.value === value);
-      return { value, label: label?.title || "" };
-    });
-    filterItems(pointer, queryFilters);
-  };
-
-  const isActive = !areEquals(selectedValue, initialState);
-
-  const Header = () => (
-    <S.Site isActive={isActive} center={center}>
-      {label}
-      <S.IconsWrapper>
-        {isActive ? <Icon name="Filter" size="16" /> : <Icon name="DownArrow" size="16" />}
-      </S.IconsWrapper>
-    </S.Site>
-  );
-
   return (
-    <FloatingMenu Button={Header} position="left" closeOnSelect={false} isCheckGroup={true}>
-      <ListTitle>Filter by Site</ListTitle>
-      <S.ChecksWrapper>
-        <CheckGroup
-          options={options}
-          value={selectedValue}
-          onChange={setQuery}
-          selectAllOption={selectAllOption}
-          multipleSelection={true}
-        />
-      </S.ChecksWrapper>
-    </FloatingMenu>
+    <CheckGroupFilter
+      filterItems={filterItems}
+      value={value[pointer]}
+      pointer={pointer}
+      label={label}
+      description="Filter by Site"
+      initialState={["all"]}
+      selectAllOption="all"
+      filters={options}
+      menuPosition="left"
+      multipleSelection={true}
+      search={true}
+    />
   );
 };
 
 export interface ISiteFilterProps {
   filterItems(pointer: string, filter: IQueryValue[]): void;
-  value: any;
+  value: Record<string, IQueryValue[]>;
   pointer: string;
   center?: boolean;
   label?: string;
   selectAllOption?: string;
   filters?: IFilterValue[];
+  addGlobal?: boolean;
 }
 
 export default SiteFilter;

package/src/components/Tag/index.tsx

@@ -4,7 +4,7 @@ import { Icon } from "@ax/components";
 import * as S from "./style";
 
 const Tag = (props: ITagProps): JSX.Element => {
-  const { type, text, color, icon, textColor, rounded = true, onDeleteAction, className } = props;
+  const { type, text, color, icon, textColor, rounded = true, onDeleteAction, className, small } = props;
 
   const handleClick = () => {
     if (onDeleteAction) {
@@ -18,6 +18,8 @@ const Tag = (props: ITagProps): JSX.Element => {
     </S.IconWrapper>
   ) : null;
 
+  if (!text) return <></>;
+
   switch (type) {
     case "status":
       return (
@@ -39,7 +41,7 @@ const Tag = (props: ITagProps): JSX.Element => {
       );
     default:
       return (
-        <S.TagFixed color={color} rounded={rounded} className={className} data-testid="tag-fixed">
+        <S.TagFixed color={color} rounded={rounded} small={small} className={className} data-testid="tag-fixed">
           <S.TagText>
             <S.Title data-testid="tag-fixed-title">{text}</S.Title>
             {deleteIcon}
@@ -51,13 +53,14 @@ const Tag = (props: ITagProps): JSX.Element => {
 
 export interface ITagProps {
   type?: "status" | "fixed" | "interactive" | "square" | undefined;
-  text: string;
+  text: string | undefined | null;
   color?: string;
   rounded?: boolean;
   icon?: string;
   textColor?: string;
   onDeleteAction?: () => void;
   className?: string;
+  small?: boolean;
 }
 
 export default Tag;

package/src/components/Tag/style.tsx

@@ -34,8 +34,8 @@ const Bullet = styled.span<{ color?: string }>`
   margin-right: 4px;
 `;
 
-const TagFixed = styled.div<{ color?: string; rounded: boolean }>`
-  ${(p) => p.theme.textStyle.uiS};
+const TagFixed = styled.div<{ color?: string; rounded: boolean; small?: boolean }>`
+  ${(p) => (p.small ? p.theme.textStyle.uiXS : p.theme.textStyle.uiS)};
   background-color: ${(p) => (p.color ? p.color : p.theme.color.interactive02)};
   border-radius: ${(p) => (p.rounded ? p.theme.spacing.s : "0")};
   box-sizing: border-box;

package/src/components/index.tsx

@@ -106,6 +106,7 @@ import Pagination from "./Pagination";
 import ProgressBar from "./ProgressBar";
 import ReorderArrows from "./ReorderArrows";
 import ResizePanel from "./ResizePanel";
+import RestoreModal from "./RestoreModal";
 import { ScheduleModal, CancelScheduleModal } from "./ScheduleModal";
 import SearchField from "./SearchField";
 import SearchTagsBar from "./SearchTagsBar";
@@ -227,6 +228,7 @@ export {
   ProgressBar,
   ReorderArrows,
   ResizePanel,
+  RestoreModal,
   ScheduleModal,
   CancelScheduleModal,
   SearchField,

package/src/containers/ActivityLog/actions.tsx

@@ -0,0 +1,262 @@
+import { Dispatch } from "redux";
+import { format } from "date-fns";
+
+import {
+  LogActivityExportRequest,
+  LogActivityGroupedDayDTO,
+  LogActivityGroupedUserDTO,
+  LogActivityPaginationRequest,
+  LogContentDTO,
+  LogContentTypeDTO,
+  PaginationResponse,
+} from "@griddo/api-types";
+import { logs } from "@ax/api";
+import { appActions } from "@ax/containers/App";
+import { usersActions } from "@ax/containers/Users";
+import { pageEditorActions } from "@ax/containers/PageEditor";
+import { sitesActions } from "@ax/containers/Sites";
+import { integrationsActions } from "@ax/containers/Integrations";
+import { formsActions } from "@ax/containers/Forms";
+import { navigationActions } from "@ax/containers/Navigation";
+import { structuredDataActions } from "@ax/containers/StructuredData";
+import { handleRequest } from "@ax/helpers";
+import { ILogItemsByUser, IRootState } from "@ax/types";
+
+import { SET_ACTIVITY_LOG, SET_LIST_MODE } from "./constants";
+import { ISetActivityLog, ISetListMode } from "./interfaces";
+import { ILogItemsByDay } from "src/types/logs";
+
+function setActivityLog(activityLog: ILogItemsByDay | ILogItemsByUser): ISetActivityLog {
+  return { type: SET_ACTIVITY_LOG, payload: { activityLog } };
+}
+
+function setListMode(listMode: string): ISetListMode {
+  return { type: SET_LIST_MODE, payload: { listMode } };
+}
+
+function getActivityLog(params: LogActivityPaginationRequest): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    try {
+      const callback = async () => logs.getLogActivityTimelineByDay(params);
+
+      const responseActions = {
+        handleSuccess: (response: PaginationResponse<LogActivityGroupedDayDTO>) => {
+          dispatch(setActivityLog(response));
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+}
+
+function getActivityLogByUser(params: LogActivityPaginationRequest): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    try {
+      const callback = async () => logs.getLogActivityTimelineByUser(params);
+
+      const responseActions = {
+        handleSuccess: (response: PaginationResponse<LogActivityGroupedUserDTO<LogActivityGroupedUserDTO[]>>) => {
+          dispatch(setActivityLog(response));
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+}
+
+function downloadActivityLog(data: LogActivityExportRequest): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    try {
+      const responseActions = {
+        handleSuccess: (response: any) => {
+          const dateString = format(new Date(), "yyyy-MM-dd");
+          const url = window.URL.createObjectURL(new Blob([response]));
+          const a = document.createElement("a");
+          a.href = url;
+          a.download = `activity-log-${dateString}.${data.format[0]}`;
+          document.body.appendChild(a);
+          a.click();
+          window.URL.revokeObjectURL(url);
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      const callback = async () => logs.logExport(data);
+
+      await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+}
+
+function goToLogContent(
+  contentType: LogContentTypeDTO | null,
+  content: LogContentDTO | null,
+  site: number | null
+): (dispatch: Dispatch, getState: () => IRootState) => void {
+  return async (dispatch, getState) => {
+    const {
+      app: { lang, globalLangs },
+    } = getState();
+
+    let language = lang;
+
+    if (content) {
+      if (content.language && content.language !== lang.id) {
+        const languageFound = globalLangs.find((lang) => lang.id === content.language);
+        if (languageFound) {
+          language = { locale: languageFound.locale, id: languageFound.id };
+        }
+      }
+
+      switch (content.type) {
+        case "user":
+          usersActions.getUser(content.id)(dispatch, getState);
+          appActions.setHistoryPush("/users/edit")(dispatch);
+          break;
+        case "category":
+          if (site) {
+            await sitesActions.getSite(site)(dispatch, getState);
+            dispatch(appActions.setLanguage(language));
+            appActions.setHistoryPush("/sites/categories")(dispatch);
+          } else {
+            dispatch(appActions.setLanguage(language));
+            appActions.setHistoryPush("/categories")(dispatch);
+          }
+          break;
+        case "site":
+          if (site) {
+            await sitesActions.getSite(site)(dispatch, getState);
+            appActions.setHistoryPush("/sites/pages")(dispatch);
+          }
+          break;
+        case "integrations":
+          if (site) {
+            await sitesActions.getSite(site)(dispatch, getState);
+            integrationsActions.getIntegration(content.id, site)(dispatch);
+            appActions.setHistoryPush("/sites/settings/addons/edit")(dispatch);
+          }
+          break;
+        case "redirects":
+          appActions.setHistoryPush("/settings/redirects")(dispatch);
+          break;
+        case "languages":
+          if (site) {
+            await sitesActions.getSite(site)(dispatch, getState);
+            appActions.setHistoryPush("/sites/settings/languages")(dispatch);
+          }
+          break;
+        case "file":
+          if (site) {
+            await sitesActions.getSite(site)(dispatch, getState);
+            appActions.setHistoryPush("/sites/media-assets/files")(dispatch);
+          } else {
+            appActions.setHistoryPush("/media-assets/files")(dispatch);
+          }
+          break;
+        case "image":
+          if (site) {
+            await sitesActions.getSite(site)(dispatch, getState);
+            appActions.setHistoryPush("/sites/media-assets/gallery")(dispatch);
+          } else {
+            appActions.setHistoryPush("/media-assets/gallery")(dispatch);
+          }
+          break;
+        case "form":
+          if (site) {
+            await sitesActions.getSite(site)(dispatch, getState);
+            dispatch(formsActions.setCurrentFormID(content.id));
+            dispatch(appActions.setLanguage(language));
+            appActions.setHistoryPush("/sites/forms/editor", true)(dispatch);
+          } else {
+            dispatch(formsActions.setCurrentFormID(content.id));
+            dispatch(appActions.setLanguage(language));
+            appActions.setHistoryPush("/forms/editor", true)(dispatch);
+          }
+          break;
+        case "data_pack":
+          if (site) {
+            await sitesActions.getSite(site)(dispatch, getState);
+            appActions.setHistoryPush("/sites/settings/content-types")(dispatch);
+          }
+          break;
+        case "menu":
+          if (site) {
+            await sitesActions.getSite(site)(dispatch, getState);
+            dispatch(appActions.setLanguage(language));
+            appActions.setHistoryPush("/sites/navigations/menus")(dispatch);
+          }
+          break;
+        case "header":
+          if (site) {
+            await sitesActions.getSite(site)(dispatch, getState);
+            dispatch(navigationActions.setSelectedDefault("Headers"));
+            dispatch(navigationActions.setHeader(content.id));
+            dispatch(appActions.setLanguage(language));
+            appActions.setHistoryPush("/sites/navigations/editor", true)(dispatch);
+          }
+          break;
+        case "footer":
+          if (site) {
+            await sitesActions.getSite(site)(dispatch, getState);
+            dispatch(navigationActions.setSelectedDefault("Footers"));
+            dispatch(navigationActions.setFooter(content.id));
+            dispatch(appActions.setLanguage(language));
+            appActions.setHistoryPush("/sites/navigations/editor", true)(dispatch);
+          }
+          break;
+      }
+    }
+
+    if (contentType) {
+      if (contentType.languageId && contentType.languageId !== lang.id) {
+        const languageFound = globalLangs.find((lang) => lang.id === contentType.languageId);
+        if (languageFound) {
+          language = { locale: languageFound.locale, id: languageFound.id };
+        }
+      }
+
+      switch (contentType.type) {
+        case "template":
+          if (site) {
+            await sitesActions.getSite(site)(dispatch, getState);
+            dispatch(pageEditorActions.setCurrentPageID(contentType.id));
+            dispatch(appActions.setLanguage(language));
+            appActions.setHistoryPush("/sites/pages/editor", true)(dispatch);
+          } else {
+            dispatch(pageEditorActions.setCurrentPageID(contentType.id));
+            dispatch(appActions.setLanguage(language));
+            appActions.setHistoryPush("/data/pages/editor", true)(dispatch);
+          }
+          break;
+        case "structuredData":
+          if (contentType.content) {
+            if (site) {
+              await sitesActions.getSite(site)(dispatch, getState);
+              structuredDataActions.setSelectedStructuredData(contentType.content.id, "site")(dispatch, getState);
+              dispatch(structuredDataActions.setCurrentDataID(contentType.id));
+              dispatch(appActions.setLanguage(language));
+              appActions.setHistoryPush(`/sites/data/${contentType.content.id}/editor`, true)(dispatch);
+            } else {
+              structuredDataActions.setSelectedStructuredData(contentType.content.id, "global")(dispatch, getState);
+              dispatch(structuredDataActions.setCurrentDataID(contentType.id));
+              dispatch(appActions.setLanguage(language));
+              appActions.setHistoryPush(`/data/${contentType.content.id}/editor`, true)(dispatch);
+            }
+          }
+          break;
+      }
+    }
+  };
+}
+
+export { getActivityLog, getActivityLogByUser, setListMode, downloadActivityLog, goToLogContent };

package/src/containers/ActivityLog/constants.tsx

@@ -0,0 +1,6 @@
+const NAME = "activityLog";
+
+const SET_ACTIVITY_LOG = `${NAME}/SET_ACTIVITY_LOG`;
+const SET_LIST_MODE = `${NAME}/SET_LIST_MODE`;
+
+export { SET_ACTIVITY_LOG, SET_LIST_MODE };

package/src/containers/ActivityLog/index.tsx

@@ -0,0 +1,4 @@
+import * as activityLogActions from "./actions";
+import { activityLogReducer } from "./reducer";
+
+export { activityLogActions, activityLogReducer };

package/src/containers/ActivityLog/interfaces.tsx

@@ -0,0 +1,12 @@
+import { ILogItemsByDay, ILogItemsByUser } from "@ax/types";
+import { SET_ACTIVITY_LOG, SET_LIST_MODE } from "./constants";
+
+export interface ISetActivityLog {
+  type: typeof SET_ACTIVITY_LOG;
+  payload: { activityLog: ILogItemsByDay | ILogItemsByUser };
+}
+
+export interface ISetListMode {
+  type: typeof SET_LIST_MODE;
+  payload: { listMode: string };
+}

package/src/containers/ActivityLog/reducer.tsx

@@ -0,0 +1,25 @@
+import { ILogItemsByUser } from "@ax/types";
+import { SET_ACTIVITY_LOG, SET_LIST_MODE } from "./constants";
+import { ILogItemsByDay } from "src/types/logs";
+
+export interface IActivityLogState {
+  activityLog: ILogItemsByDay | ILogItemsByUser;
+  listMode: string;
+}
+
+export const initialState: IActivityLogState = {
+  activityLog: { totalItems: 0, items: [] },
+  listMode: "default",
+};
+
+export function reducer(state = initialState, action: any): IActivityLogState {
+  switch (action.type) {
+    case SET_ACTIVITY_LOG:
+    case SET_LIST_MODE:
+      return { ...state, ...action.payload };
+    default:
+      return state;
+  }
+}
+
+export { initialState as activityLogInitialState, reducer as activityLogReducer };

package/src/containers/Navigation/Defaults/actions.tsx

@@ -393,7 +393,7 @@ function deleteNavigation(
 function restoreNavigation(
   navID: number | number[],
   type: string
-): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       const responseActions = {
@@ -411,9 +411,10 @@ function restoreNavigation(
       const callback = async () =>
         Array.isArray(navID) ? navigation.restoreNavigationBulk(navID) : navigation.restoreNavigation(navID);
 
-      await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
+      return await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
     } catch (e) {
-      console.log(e); // TODO: capturar error bien
+      console.log(e);
+      return false;
     }
   };
 }