@griddo/ax 10.3.7 → 10.3.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.3.7",
+  "version": "10.3.8",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -230,5 +230,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5052758b2c3b8837eb2cc70506ed58026254ae18"
+  "gitHead": "7e355ae2bd1b87bc210353cb2c891bd6aecb123c"
 }

package/src/__tests__/components/Fields/ReferenceField/ReferenceField.test.tsx

@@ -26,8 +26,8 @@ afterEach(() => {
 });
 
 const defaultProps = mock<IReferenceFieldProps>();
-defaultProps.value = { source: ["ARTICLES"] };
-defaultProps.source = ["ARTICLES"];
+defaultProps.value = { sources: [{ structuredData: "ARTICLES" }] };
+defaultProps.sources = [{ structuredData: "ARTICLES" }];
 
 const initialStore = {
   structuredData: structuredDataMock,
@@ -134,7 +134,7 @@ describe("ReferenceField component rendering", () => {
   });
 
   test("should render the component ReferenceField with fixed is empty", async () => {
-    defaultProps.source = ["ARTICLES"];
+    defaultProps.sources = [{ structuredData: "ARTICLES" }];
     defaultProps.value = {
       mode: "manual",
       fixed: [],
@@ -175,19 +175,23 @@ describe("ReferenceField component rendering", () => {
 
 describe("onChange events", () => {
   test("should apply change in AutoPanel", async () => {
-    defaultProps.source = ["STORIES"];
+    defaultProps.sources = [{ structuredData: "STORIES" }];
     defaultProps.value = {
-      source: ["STORIES"],
-      filter: [
-        {
-          id: 4418,
-          label: "Story Type 1",
-          source: "STORIES",
-        },
+      sources: [
         {
-          id: 4419,
-          label: "Story Type 2",
-          source: "STORIES",
+          structuredData: "STORIES",
+          filters: [
+            {
+              id: 4418,
+              label: "Story Type 1",
+            },
+            {
+              id: 4419,
+              label: "Story Type 2",
+            },
+          ],
+          globalOperator: "AND",
+          filterOperator: "ANY",
         },
       ],
       quantity: 1,
@@ -257,7 +261,7 @@ describe("onChange events", () => {
   });
 
   test("should add item in manual mode", async () => {
-    defaultProps.source = ["ARTICLES"];
+    defaultProps.sources = [{ structuredData: "ARTICLES" }];
     defaultProps.value = {
       mode: "manual",
       fixed: [4492, 4493],
@@ -309,7 +313,7 @@ describe("onChange events", () => {
   });
 
   test("should remove item in manual mode", async () => {
-    defaultProps.source = ["ARTICLES"];
+    defaultProps.sources = [{ structuredData: "ARTICLES" }];
     defaultProps.value = {
       mode: "manual",
       fixed: [4492, 4493],
@@ -363,19 +367,23 @@ describe("onChange events", () => {
   });
 
   test("should delete filter tags", async () => {
-    defaultProps.source = ["STORIES"];
+    defaultProps.sources = [{ structuredData: "STORIES" }];
     defaultProps.value = {
-      source: ["STORIES"],
-      filter: [
-        {
-          id: 4418,
-          label: "Story Type 1",
-          source: "STORIES",
-        },
+      sources: [
         {
-          id: 4419,
-          label: "Story Type 2",
-          source: "STORIES",
+          structuredData: "STORIES",
+          filters: [
+            {
+              id: 4418,
+              label: "Story Type 1",
+            },
+            {
+              id: 4419,
+              label: "Story Type 2",
+            },
+          ],
+          globalOperator: "AND",
+          filterOperator: "ANY",
         },
       ],
     };

package/src/components/Button/index.tsx

@@ -8,6 +8,7 @@ enum buttonStyles {
   TEXT = "text",
   LINE = "line",
   INVERSE = "lineInverse",
+  MINIMAL = "minimal",
 }
 
 const Button = (props: IButtonProps): JSX.Element => {
@@ -60,6 +61,18 @@ const Button = (props: IButtonProps): JSX.Element => {
           {buttonContent}
         </S.LineButton>
       );
+    case buttonStyles.MINIMAL:
+      return (
+        <S.MinimalButton
+          data-testid="button-minimal"
+          className={className}
+          type={type}
+          disabled={disabled}
+          onClick={handleOnClick}
+        >
+          {buttonContent}
+        </S.MinimalButton>
+      );
     default:
       return (
         <S.Button
@@ -77,12 +90,12 @@ const Button = (props: IButtonProps): JSX.Element => {
 
 export interface IButtonProps {
   children: JSX.Element | string;
-  type: "button" | "submit" | "reset" | undefined;
+  type?: "button" | "submit" | "reset";
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   icon?: string;
   loader?: string;
   disabled?: boolean;
-  buttonStyle?: "solid" | "text" | "line" | "lineInverse" | undefined; // TODO: investigar si podemos hacer esto más elegante y aprovechar el enum buttonStyles
+  buttonStyle?: "solid" | "text" | "line" | "lineInverse" | "minimal";
   className?: string;
   backIcon?: string;
 }

package/src/components/Button/style.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-export const Button = styled.button`
+const Button = styled.button`
   ${(p) => p.theme.textStyle.uiButton};
   background-color: ${(p) => p.theme.color.interactive01};
   border-radius: 4px;
@@ -63,7 +63,7 @@ export const Button = styled.button`
   }
 `;
 
-export const TextButton = styled((props) => <Button {...props} />)`
+const TextButton = styled((props) => <Button {...props} />)`
   background-color: transparent;
   color: ${(p) => p.theme.color.interactive01};
   padding: 0 ${(p) => p.theme.spacing.xs};
@@ -92,7 +92,7 @@ export const TextButton = styled((props) => <Button {...props} />)`
   }
 `;
 
-export const LineButton = styled((props) => <Button {...props} />)<{ isInverse: boolean | undefined }>`
+const LineButton = styled((props) => <Button {...props} />)<{ isInverse: boolean | undefined }>`
   background-color: ${(p) => (p.isInverse ? p.theme.color.uiMainMenuBackground : p.theme.color.interactiveBackground)};
   border: 1px solid ${(p) => (p.isInverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
   color: ${(p) => (p.isInverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
@@ -123,7 +123,15 @@ export const LineButton = styled((props) => <Button {...props} />)<{ isInverse:
   }
 `;
 
-export const Label = styled.span<{ icon?: string; backIcon?: string }>`
+const MinimalButton = styled.button`
+  ${(p) => p.theme.textStyle.uiButton};
+  background-color: transparent;
+  color: ${(p) => p.theme.color.interactive01};
+  border: none;
+  cursor: pointer;
+`;
+
+const Label = styled.span<{ icon?: string; backIcon?: string }>`
   outline: none;
   position: relative;
   z-index: 1;
@@ -133,3 +141,5 @@ export const Label = styled.span<{ icon?: string; backIcon?: string }>`
   }
   padding-right: ${(p) => (p.backIcon ? p.theme.spacing.s : `0`)};
 `;
+
+export { Button, TextButton, LineButton, MinimalButton, Label }

package/src/components/Fields/ReferenceField/AutoPanel/AutoItem/index.tsx

@@ -1,64 +1,58 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
-import { structuredData } from "@ax/api";
+import { structuredData, selects } from "@ax/api";
 import { isReqOk } from "@ax/helpers";
 import { IGetStructuredDataParams, IDataSource, ISite, IStructuredData } from "@ax/types";
-import { Button, CheckField, FieldsBehavior, FloatingMenu, Icon, IconAction, SearchField, Tag } from "@ax/components";
-import { IFilter } from "../../Context";
+import { Button, CheckField, FieldsBehavior, IconAction, Select, SearchField, Tag, Tooltip } from "@ax/components";
+import { useCategoryColors } from "@ax/hooks";
+
+import { ISource, IFilter } from "../../Context";
 
 import * as S from "./style";
 
-const AutoItem = (props: IProps) => {
-  const { source, canDelete, filter, handleDelete, addFilter, currentSite, structuredDataSite, siteID } = props;
+const AutoItem = (props: IProps): JSX.Element => {
+  const {
+    source,
+    canDelete,
+    filter,
+    handleDelete,
+    addFilter,
+    currentSite,
+    structuredDataSite,
+    filterOperator,
+    globalOperator,
+    siteID,
+  } = props;
 
   const initState: IState = {
     selected: "",
     options: [],
-    filter,
     isOpen: false,
+    isAdvancedOpen: false,
+    categories: [],
+    selectedCategories: [],
     filteredOptions: [],
   };
 
   const [state, setState] = useState(initState);
 
-  const removeItem = (item: string) => {
-    handleDelete(item);
-  };
+  const catIDs = state.categories.map((cat: ICategory) => cat.label);
+  const { categoryColors } = useCategoryColors(catIDs);
 
-  const MoreInfoButton = () => (
-    <S.IconActionWrapper>
-      <IconAction icon="more" />
-    </S.IconActionWrapper>
-  );
+  useEffect(() => {
+    getCategories();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  const actionMenuItem = (item: any, source: string) => {
-    const handleClick = () => item.action(source);
-    return (
-      <S.ActionItem key={item.icon} onClick={handleClick} data-testid="auto-item-action-item">
-        <Icon name={item.icon} />
-        <S.ActionText>{item.label}</S.ActionText>
-      </S.ActionItem>
-    );
-  };
+  const removeItem = () => handleDelete(source.id);
 
-  const editMenu = {
-    options: [
-      {
-        label: "delete",
-        icon: "delete",
-        action: removeItem,
-      },
-    ],
-  };
-
-  const ActionMenu = (props: any) => {
-    const { source } = props;
-    return (
-      <FloatingMenu Button={MoreInfoButton}>
-        <S.ActionMenu>{editMenu.options.map((item: any, i: number) => actionMenuItem(item, source))}</S.ActionMenu>
-      </FloatingMenu>
-    );
-  };
+  const menuOptions = [
+    {
+      label: "delete",
+      icon: "delete",
+      action: removeItem,
+    },
+  ];
 
   const getIsGlobal = (id: string): boolean => {
     const data = structuredDataSite && structuredDataSite.find((elem: any) => elem.id === id);
@@ -89,6 +83,32 @@ const AutoItem = (props: IProps) => {
     return false;
   };
 
+  const getCategories = async (): Promise<boolean> => {
+    try {
+      const result = await selects.getSelectItems("categories", source.id);
+      if (isReqOk(result.status)) {
+        const selectedCategories = getFiltersCategories(filter, result.data);
+        setState({ ...state, categories: result.data, selectedCategories });
+        return true;
+      }
+    } catch (e) {
+      console.log(e);
+    }
+    return false;
+  };
+
+  const getFiltersCategories = (filters: any[], categories: ICategory[]) => {
+    let filterCategories: ICategory[] = [];
+    filters.forEach((filter: any) => {
+      const filterCategory = categories.find((cat: ICategory) => cat.label === filter.category);
+      filterCategories =
+        filterCategory && !filterCategories.includes(filterCategory)
+          ? [...filterCategories, filterCategory]
+          : filterCategories;
+    });
+    return filterCategories;
+  };
+
   const handleSelectOnChange = (newValue: string | null) => {
     if (newValue) {
       getCategoryContent(newValue);
@@ -99,35 +119,92 @@ const AutoItem = (props: IProps) => {
 
   const handleCheckChange = (checkValue: any) => {
     if (checkValue.isChecked) {
-      const newFilter: any = state.options.filter((f: any) => checkValue.value === f.id);
-      setState({
-        ...state,
-        filter: [...state.filter, { id: newFilter[0].id, label: newFilter[0].content.title, source: source.id }],
-      });
+      const newFilter: any = state.options.find((f: any) => checkValue.value === f.id);
+      if (newFilter) {
+        const filterCategory = state.categories.find((cat: ICategory) => cat.value === newFilter.structuredData);
+        const selectedCategories =
+          filterCategory && !state.selectedCategories.includes(filterCategory)
+            ? [...state.selectedCategories, filterCategory]
+            : state.selectedCategories;
+
+        setState({
+          ...state,
+          selectedCategories,
+        });
+
+        const updatedSource: ISource = {
+          structuredData: source.id,
+          filters: [
+            ...filter,
+            {
+              id: newFilter.id,
+              label: newFilter.content.title,
+              category: filterCategory?.label || "",
+              color: categoryColors[filterCategory?.label || ""],
+            },
+          ],
+          globalOperator: globalOperator,
+          filterOperator: filterOperator,
+        };
+
+        addFilter(updatedSource);
+      }
     } else {
-      const newFilters = state.filter.filter((e) => e.id !== checkValue.value);
-      setState({ ...state, filter: newFilters });
-    }
-  };
+      const newFilters = filter.filter((e) => e.id !== checkValue.value);
+      const selectedCategories = getFiltersCategories(newFilters, state.categories);
+      setState({ ...state, selectedCategories });
 
-  const handleButtonClick = () => {
-    addFilter(state.filter, source.id);
-    setState({ ...state, isOpen: false });
+      const updatedSource: ISource = {
+        structuredData: source.id,
+        filters: newFilters,
+        globalOperator: globalOperator,
+        filterOperator: filterOperator,
+      };
+
+      addFilter(updatedSource);
+    }
   };
 
   const isChecked = (id: number) => {
-    const ids = state.filter.map((a) => a.id);
+    const ids = filter.map((a) => a.id);
     return ids.includes(id);
   };
 
-  const toggleFilters = () => {
-    setState({ ...state, isOpen: !state.isOpen });
-  };
+  const toggleFilters = () => setState({ ...state, isOpen: !state.isOpen });
+
+  const toggleAdvanced = () => setState({ ...state, isAdvancedOpen: !state.isAdvancedOpen });
 
   const handleDeleteTag = (id: number) => {
-    const newFilters = state.filter.filter((e) => e.id !== id);
-    setState({ ...state, filter: newFilters });
-    addFilter(newFilters, source.id);
+    const newFilters = filter.filter((e) => e.id !== id);
+    const selectedCategories = getFiltersCategories(newFilters, state.categories);
+    setState({ ...state, selectedCategories });
+    const updatedSource: ISource = {
+      structuredData: source.id,
+      filters: newFilters,
+      globalOperator: globalOperator,
+      filterOperator: filterOperator,
+    };
+    addFilter(updatedSource);
+  };
+
+  const handleFilterOperator = (value: string) => {
+    const updatedSource: ISource = {
+      structuredData: source.id,
+      filters: filter,
+      globalOperator: globalOperator,
+      filterOperator: value,
+    };
+    addFilter(updatedSource);
+  };
+
+  const handleGlobalOperator = (value: string) => {
+    const updatedSource: ISource = {
+      structuredData: source.id,
+      filters: filter,
+      globalOperator: value,
+      filterOperator: filterOperator,
+    };
+    addFilter(updatedSource);
   };
 
   const handleSearchChange = (query: string) => {
@@ -137,33 +214,104 @@ const AutoItem = (props: IProps) => {
     setState({ ...state, filteredOptions });
   };
 
+  const handleClearFilters = () => {
+    setState({ ...state, selectedCategories: [] });
+    const updatedSource: ISource = {
+      structuredData: source.id,
+      filters: [],
+    };
+    addFilter(updatedSource);
+  };
+
+  const operatorOptions = [
+    { value: "OR", label: "OR" },
+    { value: "AND", label: "AND" },
+  ];
+
   return (
     <S.TypeContainer key={source.id}>
-      <S.TypeWrapper>
+      <S.TypeWrapper data-testid="item-type-wrapper">
         <S.TypeLabel>Type</S.TypeLabel>
         <S.TypeName>{source.title}</S.TypeName>
-        {canDelete && <ActionMenu source={source.id} />}
-        <S.IconWrapper>
-          <IconAction icon="filter" onClick={toggleFilters} />
-        </S.IconWrapper>
+        <S.ActionsWrapper>
+          <S.IconWrapper>
+            <Tooltip content="Filters">
+              <IconAction icon="filter" onClick={toggleFilters} active={state.isOpen} />
+            </Tooltip>
+          </S.IconWrapper>
+          <S.IconWrapper>
+            <Tooltip content="Advanced settings">
+              <IconAction icon="settings" onClick={toggleAdvanced} active={state.isAdvancedOpen} />
+            </Tooltip>
+          </S.IconWrapper>
+          {canDelete && <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Options" />}
+        </S.ActionsWrapper>
       </S.TypeWrapper>
-      <S.FiltersWrapper>
+      <S.FiltersWrapper isActive={state.isAdvancedOpen} isEmpty={filter.length === 0}>
         {filter &&
-          filter.map((e: any) => {
-            const handleClick = () => {
-              handleDeleteTag(e.id);
-            };
-            return <Tag key={e.label} text={e.label} onDeleteAction={handleClick} />;
+          filter.map((e: IFilter) => {
+            const handleClick = () => handleDeleteTag(e.id);
+            return (
+              <Tag
+                key={e.label}
+                text={`${e.category}: ${e.label}`}
+                onDeleteAction={handleClick}
+                color={e.color || categoryColors[e.category || ""]}
+              />
+            );
           })}
+        {state.isAdvancedOpen && (
+          <S.OptionsBlock>
+            Relation between filters{" "}
+            <S.SelectWrapper>
+              <Select
+                name="filterOperator"
+                options={operatorOptions}
+                onChange={handleFilterOperator}
+                value={filterOperator || "OR"}
+                type="inline"
+                mandatory={true}
+              />
+            </S.SelectWrapper>
+          </S.OptionsBlock>
+        )}
       </S.FiltersWrapper>
+      {state.isAdvancedOpen && (
+        <S.FiltersWrapper isActive={state.isAdvancedOpen} isEmpty={state.selectedCategories.length === 0}>
+          {state.selectedCategories.map((e: ICategory) => {
+            return <Tag key={e.label} text={e.label} color={categoryColors[e.label]} rounded={false} />;
+          })}
+          <S.OptionsBlock>
+            Relation between categories{" "}
+            <S.SelectWrapper>
+              <Select
+                name="globalOperator"
+                options={operatorOptions}
+                onChange={handleGlobalOperator}
+                value={globalOperator || "AND"}
+                type="inline"
+                mandatory={true}
+              />
+            </S.SelectWrapper>
+          </S.OptionsBlock>
+        </S.FiltersWrapper>
+      )}
+      {filter.length > 0 && (
+        <S.ClearWrapper>
+          <Button type="button" buttonStyle="minimal" onClick={handleClearFilters}>
+            Clear All Filters
+          </Button>
+        </S.ClearWrapper>
+      )}
       <S.ActionsFilterWrapper isOpen={state.isOpen}>
         <FieldsBehavior
           title="Create filter by"
           name="categorySelect"
-          fieldType="AsyncSelect"
+          fieldType="Select"
           value={state.selected}
-          entity="categories"
           onChange={handleSelectOnChange}
+          options={state.categories}
+          placeholder="Select..."
           entityId={source.id}
           site={currentSite}
         />
@@ -185,13 +333,6 @@ const AutoItem = (props: IProps) => {
               />
             ))}
         </S.ChecksWrapper>
-        {state.options.length > 0 && (
-          <S.ButtonWrapper>
-            <Button type="button" buttonStyle="line" onClick={handleButtonClick}>
-              Add filter
-            </Button>
-          </S.ButtonWrapper>
-        )}
       </S.ActionsFilterWrapper>
     </S.TypeContainer>
   );
@@ -200,19 +341,28 @@ const AutoItem = (props: IProps) => {
 interface IState {
   selected: string;
   options: any[];
-  filter: any[];
   isOpen: boolean;
+  isAdvancedOpen: boolean;
+  categories: ICategory[];
+  selectedCategories: ICategory[];
   filteredOptions: any[];
 }
 
+interface ICategory {
+  value: string;
+  label: string;
+}
+
 interface IProps {
   source: IDataSource;
   canDelete: boolean;
   filter: IFilter[];
   currentSite: ISite | null;
   structuredDataSite: IStructuredData[];
+  filterOperator?: string;
+  globalOperator?: string;
   handleDelete: (value: string) => void;
-  addFilter: (value: any[], source: string) => void;
+  addFilter: (source: ISource) => void;
   siteID?: number | null;
 }