@griddo/ax 10.3.6 → 10.3.8

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

@@ -1,33 +1,20 @@
+import React from "react";
 import styled from "styled-components";
+import { ActionMenu } from "@ax/components";
 
-const IconActionWrapper = styled.div`
-  opacity: 0;
+const ActionsWrapper = styled.div`
   position: absolute;
-  top: 50%;
   right: 0;
-  width: 30px;
+  top: 0;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: ${(p) => p.theme.spacing.xs};
-  transform: translateY(-50%);
-
-  &:active {
-    border-radius: 50%;
-    background-color: ${(p) => p.theme.color.overlayPressedPrimary};
-  }
 `;
 
 const IconWrapper = styled.div`
-  position: absolute;
-  top: 50%;
-  right: ${(p) => `calc((${p.theme.spacing.s} * 2) + ${p.theme.spacing.xxs})`};
-  width: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: ${(p) => p.theme.spacing.xs};
-  transform: translateY(-50%);
+  width: 32px;
+`;
+
+const StyledActionMenu = styled((props) => <ActionMenu {...props} />)`
+  width: 32px;
 `;
 
 const TypeContainer = styled.div`
@@ -39,16 +26,6 @@ const TypeContainer = styled.div`
   background: ${(p) => p.theme.color.uiBackground02};
   text-transform: capitalize;
   margin-bottom: ${(p) => p.theme.spacing.xs};
-  &:hover {
-    ${IconActionWrapper}, ${IconWrapper} {
-      opacity: 1;
-    }
-  }
-  :focus {
-    ${IconActionWrapper}, ${IconWrapper} {
-      opacity: 1;
-    }
-  }
 `;
 
 const TypeWrapper = styled.div`
@@ -67,40 +44,14 @@ const TypeName = styled.div`
   color: ${(p) => p.theme.color.textHighEmphasis};
 `;
 
-const ActionMenu = styled.ul`
-  padding: 0;
-`;
-
-const ActionText = styled.span`
-  padding-left: ${(p) => p.theme.spacing.xs};
-  margin-left: ${(p) => p.theme.spacing.xxs};
-  text-transform: capitalize;
-`;
-
-const ActionItem = styled.li`
-  display: flex;
-  align-items: center;
-  ${(p) => p.theme.textStyle.uiM};
-  color: ${(p) => p.theme.color.textMediumEmphasis};
-  padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.s};
-  height: ${(p) => p.theme.spacing.l};
-  &:focus {
-    background: ${(p) => p.theme.color.overlayFocusPrimary};
-  }
-
-  &:hover {
-    background: ${(p) => p.theme.color.overlayHoverPrimary};
-  }
-
-  svg {
-    path {
-      fill: ${(p) => p.theme.color.iconMediumEmphasis};
-    }
-  }
-`;
-
-const FiltersWrapper = styled.div`
+const FiltersWrapper = styled.div<{ isActive: boolean; isEmpty: boolean }>`
   margin-top: ${(p) => p.theme.spacing.xs};
+  border: ${(p) => (p.isActive ? `1px solid ${p.theme.color.uiLine}` : "none")};
+  border-radius: ${(p) => p.theme.radii.s};
+  padding: ${(p) =>
+    p.isEmpty
+      ? `0 ${p.theme.spacing.xs} 0 ${p.theme.spacing.xs}`
+      : `${p.theme.spacing.xs} ${p.theme.spacing.xs} 0 ${p.theme.spacing.xs}`};
 `;
 
 const ActionsFilterWrapper = styled.div<{ isOpen: boolean }>`
@@ -110,35 +61,44 @@ const ActionsFilterWrapper = styled.div<{ isOpen: boolean }>`
   border-top: 1px solid ${(p) => p.theme.color.uiLine};
 `;
 
-const ButtonWrapper = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  padding-top: ${(p) => p.theme.spacing.m};
-`;
-
 const ChecksWrapper = styled.div`
   max-height: ${(p) => `calc(${p.theme.spacing.l} * 4)`};
   overflow: auto;
 `;
 
+const OptionsBlock = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  display: flex;
+  align-items: baseline;
+`;
+
+const SelectWrapper = styled.span`
+  margin-left: ${(p) => p.theme.spacing.xs};
+`;
+
 const SearchWrapper = styled.div`
   margin-top: ${(p) => `-${p.theme.spacing.s}`};
   margin-bottom: ${(p) => p.theme.spacing.xs};
 `;
 
+const ClearWrapper = styled.div`
+  margin-top: ${(p) => p.theme.spacing.xs};
+`;
+
 export {
-  IconActionWrapper,
   IconWrapper,
   TypeContainer,
   TypeWrapper,
   TypeLabel,
   TypeName,
-  ActionItem,
-  ActionMenu,
-  ActionText,
   ActionsFilterWrapper,
   FiltersWrapper,
-  ButtonWrapper,
   ChecksWrapper,
+  OptionsBlock,
+  SelectWrapper,
+  StyledActionMenu,
+  ActionsWrapper,
   SearchWrapper,
+  ClearWrapper,
 };

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

@@ -14,7 +14,7 @@ import {
   UniqueCheck,
 } from "@ax/components";
 
-import { IFilter, IReferenceState, useReference } from "../Context";
+import { IReferenceState, ISource, useReference } from "../Context";
 import AutoItem from "./AutoItem";
 
 import * as S from "./style";
@@ -28,7 +28,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
   const [allItems, setAllItems] = useState<string | boolean>(init);
   const initConfig = {
     isConfigOpen: false,
-    isLanguageOpen: true,
+    isContentOpen: true,
     isDataOpen: true,
     isAllLangOpen: true,
     isCustomLangOpen: true,
@@ -47,6 +47,8 @@ const AutoPanel = (props: IProps): JSX.Element => {
     .filter((language) => lang.id !== language.id)
     .map((language) => ({ label: language.label, value: language.id.toString() }));
 
+  const currentLang = globalLangs.find((language) => lang.id === language.id)?.language;
+
   const structuredDataValues: any[] = [];
   for (const [, dataType] of Object.entries(structuredData) as any[]) {
     structuredDataValues.push(...dataType);
@@ -65,8 +67,8 @@ const AutoPanel = (props: IProps): JSX.Element => {
     },
   ];
 
-  const sourcesFields = state.source.map((source: any) => {
-    const foundData = structuredDataValues.find((value) => value.id === source);
+  const sourcesFields = state.sources.map((source: ISource) => {
+    const foundData = structuredDataValues.find((value) => value.id === source.structuredData);
     const indexableFields = foundData.schema.fields.filter((field: any) => field.indexable);
     return indexableFields;
   });
@@ -150,8 +152,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
         mode: "auto",
         quantity: state.quantity,
         order,
-        source: state.source,
-        filter: state.filter,
+        sources: state.sources,
         fullRelations: state.fullRelations,
         allLanguages: state.allLanguages,
         preferenceLanguage: state.preferenceLanguage,
@@ -164,10 +165,10 @@ const AutoPanel = (props: IProps): JSX.Element => {
   };
 
   const handleAddSource = (value: string) => {
-    if (!state.source.includes(value)) {
-      const newSources = state.source;
-      newSources.push(value);
-      setState((state: IReferenceState) => ({ ...state, source: newSources }));
+    if (!state.sources.find((source: ISource) => source.structuredData === value)) {
+      const newSource: ISource = { structuredData: value, filters: [], filterOperator: "OR", globalOperator: "AND" };
+      const updatedSources = [...state.sources, newSource];
+      setState((state: IReferenceState) => ({ ...state, sources: updatedSources }));
     }
   };
 
@@ -196,15 +197,18 @@ const AutoPanel = (props: IProps): JSX.Element => {
     ) : null;
 
   const removeItem = (item: string) => {
-    if (state.source.includes(item)) {
-      const newSources = state.source.filter((e: string) => e !== item);
-      setState((state: IReferenceState) => ({ ...state, source: newSources }));
-    }
+    const newSources = state.sources.filter((e: ISource) => e.structuredData !== item);
+    setState((state: IReferenceState) => ({ ...state, sources: newSources }));
   };
 
-  const handleAddFilter = (newFilters: any[], source: string) => {
-    const oldFilters = state.filter.filter((f: any) => f.source !== source);
-    setState((state: IReferenceState) => ({ ...state, filter: [...oldFilters, ...newFilters] }));
+  const handleAddFilter = (source: ISource) => {
+    const updatedSources = [...state.sources];
+    updatedSources.forEach((s: ISource, index: number) => {
+      if (s.structuredData === source.structuredData) {
+        updatedSources[index] = source;
+      }
+    });
+    setState((state: IReferenceState) => ({ ...state, sources: updatedSources }));
   };
 
   const quantityOptions = [
@@ -272,23 +276,25 @@ const AutoPanel = (props: IProps): JSX.Element => {
         <S.DataLabel>Data source</S.DataLabel>
         <S.SourcesWrapper>
           <S.SourceActions>
-            {state.source && `${state.source.length} items`} {addSource}
+            {state.sources && `${state.sources.length} items`} {addSource}
           </S.SourceActions>
-          {state.source &&
-            state.source.length > 0 &&
-            state.source.map((singleSource: string) => {
-              const sourceFilters = state.filter.filter((f: IFilter) => f.source === singleSource);
-              const source = state.sourceTitles.find((el: IDataSource) => el.id === singleSource);
+          {state.sources &&
+            state.sources.length > 0 &&
+            state.sources.map((singleSource: ISource) => {
+              const source = state.sourceTitles.find((el: IDataSource) => el.id === singleSource.structuredData);
+              const { filters = [], filterOperator, globalOperator } = singleSource;
               return source ? (
                 <AutoItem
-                  key={singleSource}
+                  key={singleSource.structuredData}
                   source={source}
                   canDelete={state.sourceTitles.length > 1}
                   handleDelete={removeItem}
-                  filter={sourceFilters}
+                  filter={filters}
                   addFilter={handleAddFilter}
                   currentSite={site}
                   structuredDataSite={[...structuredData.site, ...categories.site]}
+                  filterOperator={filterOperator}
+                  globalOperator={globalOperator}
                   siteID={state.site || site?.id}
                 />
               ) : (
@@ -312,54 +318,20 @@ const AutoPanel = (props: IProps): JSX.Element => {
           >
             Advanced Settings
           </S.ConfigLabel>
+
           <S.ConfigWrapper isOpen={configState.isConfigOpen}>
             <S.OptionLabel
-              onClick={() => toggleConfig("isLanguageOpen")}
-              isOpen={configState.isLanguageOpen}
+              onClick={() => toggleConfig("isContentOpen")}
+              isOpen={configState.isContentOpen}
               data-testid="advanced-config-label"
             >
               <S.LabelContent>
-                <S.OptionText>Language options</S.OptionText>
+                <S.OptionText>Content options</S.OptionText>
               </S.LabelContent>
             </S.OptionLabel>
 
-            <S.ConfigWrapper isOpen={configState.isLanguageOpen}>
+            <S.ConfigWrapper isOpen={configState.isContentOpen}>
               <S.ConfigContent smallMargin={toggleState.isLangActive}>
-                <S.OptionLabel
-                  onClick={() => toggleConfig("isAllLangOpen")}
-                  isOpen={configState.isAllLangOpen}
-                  data-testid="advanced-config-label"
-                >
-                  <S.LabelContent>
-                    <S.SubOptionText>Include content in any language</S.SubOptionText>
-                    <ToggleField
-                      name="allLanguages"
-                      value={state.allLanguages}
-                      onChange={handleAllLanguagesChange}
-                      size="s"
-                    />
-                  </S.LabelContent>
-                </S.OptionLabel>
-
-                <S.ConfigWrapper isOpen={configState.isAllLangOpen}>
-                  <S.SubConfigContent hasMargin={true}>
-                    <S.OptionDescription>
-                      By default, data is displayed in the page's language. Enable this option if you want the content
-                      to <strong>include data in any available language</strong>.
-                    </S.OptionDescription>
-                    {state.allLanguages && (
-                      <S.CheckWrapper>
-                        <UniqueCheck
-                          name="preferenceLanguageCheck"
-                          options={[{ value: false, name: "preferenceLanguage", title: "Language page first" }]}
-                          value={state.preferenceLanguage}
-                          onChange={handlePreferenceLanguageChange}
-                        />
-                      </S.CheckWrapper>
-                    )}
-                  </S.SubConfigContent>
-                </S.ConfigWrapper>
-
                 {langOptions.length > 0 ? (
                   <>
                     <S.OptionLabel
@@ -368,7 +340,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
                       data-testid="advanced-config-label"
                     >
                       <S.LabelContent>
-                        <S.SubOptionText>Specify different language</S.SubOptionText>
+                        <S.SubOptionText>Change distributor language</S.SubOptionText>
                         <ToggleField
                           name="customLang"
                           value={toggleState.isLangActive}
@@ -379,10 +351,11 @@ const AutoPanel = (props: IProps): JSX.Element => {
                     </S.OptionLabel>
 
                     <S.ConfigWrapper>
-                      <S.SubConfigContent>
+                      <S.SubConfigContent hasMargin={true}>
                         <S.OptionDescription isOpen={configState.isCustomLangOpen}>
-                          By default, data is displayed in the page's language. Enable this option if you wish to{" "}
-                          <strong>specify a different language</strong> for the content of this distributor.
+                          By default, content is shown in the page's language. Activate this option to{" "}
+                          <strong>specifically set a different language</strong> for the content shown in this
+                          distributor.
                         </S.OptionDescription>
                         {toggleState.isLangActive && (
                           <Select
@@ -401,20 +374,57 @@ const AutoPanel = (props: IProps): JSX.Element => {
                 ) : (
                   <></>
                 )}
+
+                <S.OptionLabel
+                  onClick={() => toggleConfig("isDataOpen")}
+                  isOpen={configState.isDataOpen}
+                  data-testid="advanced-config-label"
+                >
+                  <S.LabelContent>
+                    <S.SubOptionText>Data from a different site</S.SubOptionText>
+                    <ToggleField
+                      name="site-toggle"
+                      value={toggleState.isSiteActive}
+                      onChange={handleSiteToggleChange}
+                      size="s"
+                    />
+                  </S.LabelContent>
+                </S.OptionLabel>
+
+                <S.ConfigWrapper>
+                  <S.SubConfigContent hasMargin={toggleState.isLangActive}>
+                    <S.OptionDescription isOpen={configState.isDataOpen}>
+                      Data is retrieved from the site you are on.{" "}
+                      <strong>If you prefer to display content from another site,</strong>
+                      enable this option to select the specific site.
+                    </S.OptionDescription>
+                    {toggleState.isSiteActive && (
+                      <AsyncSelect
+                        name="select"
+                        entity="sites"
+                        onChange={handleSiteChange}
+                        value={state.site || null}
+                        type="inline"
+                        placeholder="Select site"
+                        error={toggleState.errorSite}
+                      />
+                    )}
+                  </S.SubConfigContent>
+                </S.ConfigWrapper>
               </S.ConfigContent>
             </S.ConfigWrapper>
 
             <S.OptionLabel
-              onClick={() => toggleConfig("isDataOpen")}
-              isOpen={configState.isDataOpen}
+              onClick={() => toggleConfig("isAllLangOpen")}
+              isOpen={configState.isAllLangOpen}
               data-testid="advanced-config-label"
             >
               <S.LabelContent>
-                <S.OptionText>Data from specific site</S.OptionText>
+                <S.OptionText>Include content in multiple languages</S.OptionText>
                 <ToggleField
-                  name="site-toggle"
-                  value={toggleState.isSiteActive}
-                  onChange={handleSiteToggleChange}
+                  name="allLanguages"
+                  value={state.allLanguages}
+                  onChange={handleAllLanguagesChange}
                   size="s"
                 />
               </S.LabelContent>
@@ -422,21 +432,22 @@ const AutoPanel = (props: IProps): JSX.Element => {
 
             <S.ConfigWrapper>
               <S.ConfigContent smallMargin={toggleState.isSiteActive} isLast={true}>
-                <S.OptionDescription isOpen={configState.isDataOpen}>
-                  Data is retrieved from the site you are on.{" "}
-                  <strong>If you prefer to display content from another site</strong>, configure this option to select
-                  the specific site.
+                <S.OptionDescription isOpen={configState.isAllLangOpen}>
+                  By default, the imported data in this distributor is ONLY in the{" "}
+                  <strong>distributor’s language</strong>. Enable this option to{" "}
+                  <strong>import data in ALL languages available.</strong>
                 </S.OptionDescription>
-                {toggleState.isSiteActive && (
-                  <AsyncSelect
-                    name="select"
-                    entity="sites"
-                    onChange={handleSiteChange}
-                    value={state.site || null}
-                    type="inline"
-                    placeholder="Select site"
-                    error={toggleState.errorSite}
-                  />
+                {state.allLanguages && (
+                  <S.CheckWrapper>
+                    <UniqueCheck
+                      name="preferenceLanguageCheck"
+                      options={[
+                        { value: false, name: "preferenceLanguage", title: `${currentLang} content shown first` },
+                      ]}
+                      value={state.preferenceLanguage}
+                      onChange={handlePreferenceLanguageChange}
+                    />
+                  </S.CheckWrapper>
                 )}
               </S.ConfigContent>
             </S.ConfigWrapper>
@@ -465,7 +476,7 @@ interface IProps {
 
 interface IConfigState {
   isConfigOpen: boolean;
-  isLanguageOpen: boolean;
+  isContentOpen: boolean;
   isDataOpen: boolean;
   isAllLangOpen: boolean;
   isCustomLangOpen: boolean;

package/src/components/Fields/ReferenceField/Context/index.tsx

@@ -13,8 +13,7 @@ const initState: IReferenceState = {
   fixed: [],
   search: "",
   showSelected: false,
-  source: [],
-  filter: [],
+  sources: [],
   sourceTitles: [],
   fullRelations: false,
   allLanguages: false,
@@ -38,18 +37,18 @@ const useReferenceProvider = (modes?: string[]) => {
   const [state, setState] = useState<IReferenceState>({ ...initState, mode });
 
   const setModeAndSource = useCallback(
-    (mode: string, source: string[]) => {
+    (mode: string, sources: ISource[]) => {
       const defaultState = {
         ...state,
         mode,
-        source,
+        sources,
       };
       setState(defaultState);
     },
     [setState, state]
   );
 
-  const setReorderElements = (item: IStructuredDataContent, newIndex: number) => {
+  const setReorderElements = (item: IStructuredDataContent, newIndex: number): number[] => {
     const { selectedItems, fixed, fullRelations = false } = state;
     const newItems = moveElement(item.id, selectedItems, newIndex, "id");
     const originalItemId = item.relatedPage?.originalStructuredDataId;
@@ -62,6 +61,7 @@ const useReferenceProvider = (modes?: string[]) => {
       fullRelations,
     };
     setState(newState);
+    return newFixed;
   };
 
   return {
@@ -72,6 +72,13 @@ const useReferenceProvider = (modes?: string[]) => {
   };
 };
 
+export interface ISource {
+  structuredData: string;
+  filters?: IFilter[];
+  globalOperator?: string;
+  filterOperator?: string;
+}
+
 export interface IReferenceState {
   mode: string;
   order: string;
@@ -82,8 +89,7 @@ export interface IReferenceState {
   fixed: number[];
   search: string;
   showSelected: boolean;
-  source: string[];
-  filter: IFilter[];
+  sources: ISource[];
   sourceTitles: IDataSource[];
   fullRelations: boolean;
   allLanguages: boolean;
@@ -92,10 +98,24 @@ export interface IReferenceState {
   site?: number;
 }
 
+export interface IRefField {
+  mode?: string;
+	order?: string;
+	fixed?: number[];
+	sources?: ISource[];
+	quantity?: number;
+	fullRelations?: boolean;
+	allLanguages?: boolean;
+	preferenceLanguage?: boolean;
+	lang?: number;
+	site?: number;
+}
+
 export interface IFilter {
   id: number;
   label: string;
-  source: string;
+  color?: string;
+  category?: string;
 }
 
 export { ReferenceProvider, useReference };

package/src/components/Fields/ReferenceField/ItemList/index.tsx

@@ -11,7 +11,7 @@ import { IReferenceState, useReference } from "../Context";
 import * as S from "./style";
 
 const ItemList = (props: IProps) => {
-  const { items, currentSite, handleListDelete, site } = props;
+  const { items, currentSite, handleListDelete, handleListMove, site } = props;
 
   const { state, setState, setReorderElements } = useReference();
   const { fixed, selectedItems, sourceTitles, fullRelations } = state;
@@ -54,8 +54,8 @@ const ItemList = (props: IProps) => {
       : null;
 
     if (langItem) {
-      const newSelIds = fixed.filter((id: number) => id !== langItem.id);
-      const selItems = selectedItems.filter((item: IStructuredDataContent) => item.id !== langItem.id);
+      const newSelIds: number[] = fixed.filter((id: number) => id !== langItem.id);
+      const selItems: IStructuredDataContent[] = selectedItems.filter((item: IStructuredDataContent) => item.id !== langItem.id);
       setState((state: IReferenceState) => ({ ...state, fixed: newSelIds, selectedItems: selItems }));
       handleListDelete(newSelIds);
     }
@@ -71,7 +71,8 @@ const ItemList = (props: IProps) => {
     }
 
     const item = selectedItems.find((elem: IStructuredDataContent) => elem.id === parseInt(result.draggableId));
-    setReorderElements(item, result.destination.index);
+    const newFixed = setReorderElements(item, result.destination.index);
+    handleListMove(newFixed);
   };
 
   const ComponentList = React.memo(function ComponentList({ components }: any) {
@@ -115,7 +116,8 @@ const ItemList = (props: IProps) => {
 interface IProps {
   items: number[];
   currentSite: number | null;
-  handleListDelete(value: string[]): void;
+  handleListDelete(value: number[]): void;
+  handleListMove(value: number[]): void;
   site?: number;
 }