@griddo/ax 10.2.11 → 10.2.13

package/src/components/Fields/ReferenceField/ItemList/Item/style.tsx

@@ -1,20 +1,13 @@
+import React from "react";
 import styled from "styled-components";
+import { ActionMenu } from "@ax/components";
 
-const IconActionWrapper = styled.div`
-  opacity: 0;
+const StyledActionMenu = styled((props) => <ActionMenu {...props} />)`
   position: absolute;
   top: ${(p) => p.theme.spacing.xs};
-  right: 0;
-  width: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: ${(p) => p.theme.spacing.xs};
-
-  &:active {
-    border-radius: 50%;
-    background-color: ${(p) => p.theme.color.overlayPressedPrimary};
-  }
+  right: ${(p) => p.theme.spacing.xs};
+  width: 32px;
+  opacity: 0;
 `;
 
 const Item = styled.li`
@@ -29,13 +22,13 @@ const Item = styled.li`
   cursor: pointer;
   &:hover {
     background-color: ${(p) => p.theme.color.overlayHoverPrimary};
-    ${IconActionWrapper} {
+    ${StyledActionMenu} {
       opacity: 1;
     }
   }
   :focus {
     background-color: ${(p) => p.theme.color.overlayFocusPrimary};
-    ${IconActionWrapper} {
+    ${StyledActionMenu} {
       opacity: 1;
     }
   }
@@ -69,38 +62,6 @@ const Title = 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 ButtonsWrapper = styled.span`
   display: flex;
   position: absolute;
@@ -125,17 +86,14 @@ const IconHandleWrapper = styled.div`
 `;
 
 export {
-  IconActionWrapper,
   Item,
   TextWrapper,
   Header,
   Date,
   Type,
   Title,
-  ActionMenu,
-  ActionText,
-  ActionItem,
   ButtonsWrapper,
   HandleWrapper,
   IconHandleWrapper,
+  StyledActionMenu,
 };

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

@@ -11,25 +11,26 @@ import { IReferenceState, useReference } from "../Context";
 import * as S from "./style";
 
 const ItemList = (props: IProps) => {
-  const { items, currentSite, handleListDelete, handleChange } = props;
+  const { items, currentSite, handleListDelete } = props;
 
   const { state, setState, setReorderElements } = useReference();
-  const { fixed, mode, selectedItems, sourceTitles, fullRelations } = state;
+  const { fixed, selectedItems, sourceTitles, fullRelations, site } = state;
 
   useEffect(() => {
     const params = {
       mode: "manual",
       fixed: items,
       fullRelations,
+      site,
     };
 
     const getItems = async () => {
       const siteID = currentSite ? currentSite : "global";
       const response = await structuredData.getDistributorContent(siteID, params);
-      if (isReqOk(response.status)) {
+      if (isReqOk(response?.status)) {
         setState((state: IReferenceState) => ({ ...state, selectedItems: response.data }));
         if (fixed.length !== response.data.length) {
-          const itemsID = response.data.reduce((previous: any, current: any) => [...previous, current.id], []);
+          const itemsID = response.data.map((item: IStructuredDataContent) => item.id);
           setState((state: IReferenceState) => ({ ...state, fixed: itemsID }));
         }
       } else {
@@ -40,20 +41,16 @@ const ItemList = (props: IProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [items]);
 
-  useEffect(() => {
-    if (fixed) {
-      const newValue = { mode, fixed };
-      handleChange(newValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fixed]);
-
   const handleDelete = (item: IStructuredDataContent) => {
-    const originalItemId = item.relatedPage?.originalStructuredDataId;
-    const itemId = state.fixed.includes(originalItemId) ? originalItemId : item.id;
-    if (fixed.includes(itemId)) {
-      const newSelIds = fixed.filter((a: any) => a !== itemId);
-      const selItems = selectedItems.filter((b: any) => b.id !== itemId);
+    const langItem = item.dataLanguages?.length
+      ? item.dataLanguages.find((lang) => fixed.includes(lang.id))
+      : fixed.includes(item.id)
+      ? item
+      : null;
+
+    if (langItem) {
+      const newSelIds = fixed.filter((id: number) => id !== langItem.id);
+      const selItems = selectedItems.filter((item: IStructuredDataContent) => item.id !== langItem.id);
       setState((state: IReferenceState) => ({ ...state, fixed: newSelIds, selectedItems: selItems }));
       handleListDelete(newSelIds);
     }
@@ -114,7 +111,6 @@ interface IProps {
   items: number[];
   currentSite: number | null;
   handleListDelete(value: string[]): void;
-  handleChange(newValue: any): void;
 }
 
 const mapStateToProps = (state: IRootState) => ({

package/src/components/Fields/ReferenceField/ManualPanel/Item/index.tsx

@@ -16,7 +16,7 @@ const Item = (props: IProps): JSX.Element => {
 
   return (
     <Tooltip content={tooltip} bottom>
-      <S.Item onClick={handleItemClick} data-testid="manual-panel-item">
+      <S.Item onClick={handleItemClick} data-testid="manual-panel-item" disabled={disabled}>
         <CheckField name="check" value={item.id} checked={isChecked} disabled={disabled} />
         <S.TextWrapper>
           <S.Header>

package/src/components/Fields/ReferenceField/ManualPanel/Item/style.tsx

@@ -1,19 +1,40 @@
 import styled from "styled-components";
 
-const Item = styled.li`
+const Date = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+`;
+
+const Type = styled.div`
+  ${(p) => p.theme.textStyle.headingXSS};
+`;
+
+const Title = styled.div`
+  ${(p) => p.theme.textStyle.fieldContent};
+`;
+
+const Item = styled.li<{ disabled: boolean }>`
   display: flex;
   background-color: ${(p) => p.theme.color.uiBarBackground};
   border: ${(p) => `1px solid ${p.theme.color.uiLine}`};
   border-radius: ${(p) => p.theme.radii.s};
   padding: ${(p) => p.theme.spacing.s};
   margin-bottom: ${(p) => p.theme.spacing.xs};
-  cursor: pointer;
+  cursor: ${(p) => (p.disabled ? "default" : "pointer")};
   :hover {
-    background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+    background-color: ${(p) => (p.disabled ? p.theme.color.uiBarBackground : p.theme.color.overlayHoverPrimary)};
   }
   :focus {
     background-color: ${(p) => p.theme.color.overlayFocusPrimary};
   }
+  ${Date} {
+    color: ${(p) => (p.disabled ? p.theme.color.uiLine : p.theme.color.textMediumEmphasis)};
+  }
+  ${Type} {
+    color: ${(p) => (p.disabled ? p.theme.color.uiLine : p.theme.color.textLowEmphasis)};
+  }
+  ${Title} {
+    color: ${(p) => (p.disabled ? p.theme.color.uiLine : p.theme.color.textHighEmphasis)};
+  }
 `;
 
 const TextWrapper = styled.div`
@@ -26,26 +47,4 @@ const Header = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.xxs};
 `;
 
-const Date = styled.div`
-  ${(p) => p.theme.textStyle.uiXS};
-  color: ${(p) => p.theme.color.textMediumEmphasis};
-`;
-
-const Type = styled.div`
-  ${(p) => p.theme.textStyle.headingXSS};
-  color: ${(p) => p.theme.color.textLowEmphasis};
-`;
-
-const Title = styled.div`
-  ${(p) => p.theme.textStyle.fieldContent};
-  color: ${(p) => p.theme.color.textHighEmphasis};
-`;
-
-export {
-  Item,
-  TextWrapper,
-  Header,
-  Date,
-  Type,
-  Title
-};
+export { Item, TextWrapper, Header, Date, Type, Title };

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

@@ -11,7 +11,7 @@ import {
 } from "@ax/types";
 import { isReqOk } from "@ax/helpers";
 import { structuredData } from "@ax/api";
-import { Button, Loader, Select, TextField } from "@ax/components";
+import { AsyncSelect, Button, Loader, Select, TextField } from "@ax/components";
 import { useDebounce } from "@ax/hooks";
 import { IReferenceState, useReference } from "../Context";
 import Item from "./Item";
@@ -19,38 +19,43 @@ import Item from "./Item";
 import * as S from "./style";
 
 const ManualPanel = (props: IProps) => {
-  const { onChange, currentSite, hasMaxItems, handleValidation, validators, lang, siteLangs, globalLangs } = props;
+  const { onChange, currentSite, hasMaxItems, handleValidation, validators, lang, globalLangs } = props;
 
   const { state, setState } = useReference();
 
   const [isLoading, setIsLoading] = useState(false);
-  const [selectedSource, setSelectedSource] = useState(state.sourceTitles[0]?.id);
-  const [selectedLang, setSelectedLang] = useState(lang.id);
+  const initForm: IFormState = {
+    source: state.sourceTitles[0]?.id,
+    lang: lang.id,
+    site: state.site || currentSite,
+  };
+  const [form, setForm] = useState(initForm);
+  const [itemSite, setItemSite] = useState<number | null>(state.site || currentSite);
   const debouncedSearch = useDebounce(state.search);
 
-  const availableLangs = currentSite ? siteLangs : globalLangs;
-  const langOptions = availableLangs.map((lang) => ({ label: lang.label, value: lang.id.toString() }));
+  const langOptions = globalLangs.map((lang) => ({ label: lang.label, value: lang.id.toString() }));
 
   useEffect(() => {
     let isMounted = true;
     const params: IGetStructuredDataParams = {
-      dataID: selectedSource,
+      dataID: form.source,
       page: 1,
       itemsPerPage: 50,
       pagination: true,
       deleted: false,
       include_draft: false,
       query: debouncedSearch,
-      lang: selectedLang,
+      lang: form.lang,
     };
 
     const getAndSetItems = async () => {
       if (!isMounted) return;
 
       setIsLoading(true);
+      const siteID = form.site ? form.site : currentSite;
       const response: { status: number; data: { totalItems: number; items: any } } =
-        await structuredData.getDataContents(params, currentSite);
-      if (isReqOk(response.status)) {
+        await structuredData.getDataContents(params, siteID);
+      if (isReqOk(response?.status)) {
         const { items } = response.data;
         setState((state: IReferenceState) => ({ ...state, items }));
       } else {
@@ -58,25 +63,33 @@ const ManualPanel = (props: IProps) => {
       }
       setIsLoading(false);
     };
-    selectedSource && getAndSetItems();
+    form.source && getAndSetItems();
 
     return function cleanup() {
       isMounted = false;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentSite, selectedSource, debouncedSearch, state.mode, selectedLang]);
+  }, [form.site, form.source, debouncedSearch, state.mode, form.lang]);
 
   const handleOnClick = (item: IStructuredDataContent) => {
     let newSelIds: number[];
     let selItems: number[];
-    const itemSelected = item.dataLanguages.find((dataLang: IDataLanguage) => state.fixed.includes(dataLang.id));
+    const itemSelectedID = item.dataLanguages?.length
+      ? item.dataLanguages.find((dataLang: IDataLanguage) => state.fixed.includes(dataLang.id))?.id
+      : state.fixed.includes(item.id)
+      ? item.id
+      : undefined;
 
-    if (itemSelected) {
-      newSelIds = state.fixed.filter((a: number) => a !== itemSelected.id);
-      selItems = state.selectedItems.filter((b: IStructuredDataContent) => b.id !== itemSelected.id);
+    if (itemSelectedID) {
+      newSelIds = state.fixed.filter((a: number) => a !== itemSelectedID);
+      selItems = state.selectedItems.filter((b: IStructuredDataContent) => b.id !== itemSelectedID);
+      if(selItems.length === 0) {
+        setItemSite(form.site);
+      }
     } else {
       newSelIds = [...state.fixed, item.id];
       selItems = [...state.selectedItems, item];
+      setItemSite(form.site);
     }
     const showSelected = state.showSelected && newSelIds.length === 0 ? false : state.showSelected;
     setState((state: IReferenceState) => ({ ...state, fixed: newSelIds, selectedItems: selItems, showSelected }));
@@ -86,8 +99,8 @@ const ManualPanel = (props: IProps) => {
     setState((state: IReferenceState) => ({ ...state, showSelected: !state.showSelected }));
 
   const handleAdd = () => {
-    const { mode, fixed, fullRelations } = state;
-    const newValue = { mode, fixed, fullRelations };
+    const { mode, fixed, fullRelations, site } = state;
+    const newValue = { mode, fixed, fullRelations, site };
     onChange(newValue);
     handleValidation && handleValidation(state.fixed, validators);
   };
@@ -108,9 +121,17 @@ const ManualPanel = (props: IProps) => {
     return { label: singleSource.title, value: singleSource.id };
   });
 
-  const handleSource = (newSource: string) => setSelectedSource(newSource);
+  const handleSource = (newSource: string) => setForm({ ...form, source: newSource });
+
+  const handleLang = (newLang: string) => setForm({ ...form, lang: parseInt(newLang) });
+
+  const handleSite = (newSite: string | number | null) => {
+    (typeof newSite === "number" || newSite === null) && setForm({ ...form, site: newSite });
+    const siteID = newSite !== currentSite && newSite !== null ? newSite : undefined;
+    setState((state: IReferenceState) => ({ ...state, site: siteID }));
+  };
 
-  const handleLang = (newLang: string) => setSelectedLang(parseInt(newLang));
+  const hasContentFromOtherSite = state.fixed.length > 0 && form.site !== itemSite && !state.showSelected;
 
   return (
     <S.Wrapper>
@@ -124,13 +145,26 @@ const ManualPanel = (props: IProps) => {
       {!state.showSelected && (
         <>
           <S.SelectsWrapper>
-            {availableLangs.length > 1 && (
+            {globalLangs.length > 1 && (
               <Select
                 name="selectLang"
                 options={langOptions}
                 onChange={handleLang}
-                value={selectedLang.toString()}
+                value={form.lang.toString()}
                 type="inline"
+                mandatory={true}
+              />
+            )}
+            {currentSite && (
+              <AsyncSelect
+                name="select"
+                entity="sites"
+                onChange={handleSite}
+                value={form.site}
+                type="inline"
+                placeholder="Select"
+                maxWidth={130}
+                mandatory={true}
               />
             )}
             {state.sourceTitles.length > 1 && (
@@ -138,8 +172,10 @@ const ManualPanel = (props: IProps) => {
                 name="selectSource"
                 options={options}
                 onChange={handleSource}
-                value={selectedSource}
+                value={form.source}
                 type="inline"
+                mandatory={true}
+                maxWidth={70}
               />
             )}
           </S.SelectsWrapper>
@@ -154,6 +190,18 @@ const ManualPanel = (props: IProps) => {
         </S.LoadingWrapper>
       ) : (
         <S.ListWrapper>
+          <S.Order>Most recent</S.Order>
+          {state.site && !hasContentFromOtherSite && !state.showSelected && (
+            <S.Note>
+              You can only select content <strong>from 1 site</strong>.
+            </S.Note>
+          )}
+          {hasContentFromOtherSite && (
+            <S.Note>
+              Select content from one site at a time. <strong>Remove previous selection</strong> to choose from other
+              site.
+            </S.Note>
+          )}
           <S.ItemList>
             {showedItems &&
               showedItems.map((item: IStructuredDataContent) => {
@@ -162,20 +210,23 @@ const ManualPanel = (props: IProps) => {
                   (dataLang: IDataLanguage) => dataLang.language === lang.id && item.language !== lang.id
                 );
                 const isSelectedOtherLanguage = item.dataLanguages.find(
-                  (dataLang: IDataLanguage) => state.fixed.includes(dataLang.id) && dataLang.language !== selectedLang
+                  (dataLang: IDataLanguage) => state.fixed.includes(dataLang.id) && dataLang.language !== form.lang
                 );
                 const source = state.sourceTitles.find((el: IDataSource) => el.id === item.structuredData);
-                const disabled = (hasMaxItems && !isChecked) || !!hasVersionInPageLanguage;
+                const disabled = (hasMaxItems && !isChecked) || !!hasVersionInPageLanguage || hasContentFromOtherSite;
                 return (
-                  <>{source && <Item
-                    key={`${item.content.title}-${item.id}`}
-                    isChecked={isChecked || !!isSelectedOtherLanguage}
-                    handleOnClick={handleOnClick}
-                    item={item}
-                    source={source}
-                    disabled={disabled}
-                    tooltip={hasVersionInPageLanguage ? "Content has version in page language" : ""}
-                  />}</>
+                  <React.Fragment key={`${item.content.title}-${item.id}`}>
+                    {source && (
+                      <Item
+                        isChecked={isChecked || !!isSelectedOtherLanguage}
+                        handleOnClick={handleOnClick}
+                        item={item}
+                        source={source}
+                        disabled={disabled}
+                        tooltip={hasVersionInPageLanguage ? "Content has version in page language" : ""}
+                      />
+                    )}
+                  </React.Fragment>
                 );
               })}
           </S.ItemList>
@@ -199,14 +250,18 @@ interface IProps {
   handleValidation?: (value: string, validators?: Record<string, unknown>) => void;
   validators?: Record<string, unknown>;
   lang: { locale: string; id: number };
-  siteLangs: ILanguage[];
   globalLangs: ILanguage[];
 }
 
+interface IFormState {
+  source: string | undefined;
+  lang: number;
+  site: number | null;
+}
+
 const mapStateToProps = (state: IRootState) => ({
   lang: state.app.lang,
   currentSite: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
-  siteLangs: state.sites.currentSiteLanguages,
   globalLangs: state.app.globalLangs,
 });
 

package/src/components/Fields/ReferenceField/ManualPanel/style.tsx

@@ -2,6 +2,7 @@ import styled from "styled-components";
 
 const Wrapper = styled.div`
   height: 100%;
+  padding: ${(p) => p.theme.spacing.m};
   padding-bottom: ${(p) => p.theme.spacing.xl};
   display: flex;
   flex-flow: column nowrap;
@@ -38,6 +39,7 @@ const ButtonWrapper = styled.div`
 const ActionsWrapper = styled.div`
   text-align: right;
   padding-top: ${(p) => p.theme.spacing.s};
+  padding-bottom: ${(p) => p.theme.spacing.m};
 `;
 
 const SelectsWrapper = styled.div`
@@ -47,4 +49,30 @@ const SelectsWrapper = styled.div`
   }
 `;
 
-export { Wrapper, LoadingWrapper, ListWrapper, ItemList, SearchWrapper, ButtonWrapper, ActionsWrapper, SelectsWrapper };
+const Note = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  padding: ${(p) => p.theme.spacing.s};
+  border-radius: ${(p) => p.theme.radii.s};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+`;
+
+const Order = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+export {
+  Wrapper,
+  LoadingWrapper,
+  ListWrapper,
+  ItemList,
+  SearchWrapper,
+  ButtonWrapper,
+  ActionsWrapper,
+  SelectsWrapper,
+  Note,
+  Order,
+};

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

@@ -82,7 +82,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
   useEffect(() => {
     const getSourcesTitles = async () => {
       const response = await structuredData.getDataTitles(source);
-      if (isReqOk(response.status)) {
+      if (isReqOk(response?.status)) {
         return response.data;
       } else {
         console.log("Error en getSourcesTitles");
@@ -138,13 +138,15 @@ const ReferenceField = (props: IReferenceFieldProps) => {
     alpha: "Alphabetical order",
     recent: "Most recent",
   };
+
   const getOrderLabel = () => {
     const stateOrder = splitCamelCase(state.order).toLowerCase();
     const orderLabel = defaultOrders[state.order] || capitalize(stateOrder);
     const directionLabel = state.orderDirection === "ASC" ? "(ascendent)" : "(descendent)";
     return `${orderLabel} ${directionLabel}`;
   };
-  const autoData = (
+
+  const AutoData = () => (
     <S.DataWrapper data-testid="auto-data-wrapper">
       <S.SourcesWrapper>
         {value &&
@@ -171,7 +173,13 @@ const ReferenceField = (props: IReferenceFieldProps) => {
 
   const getPanel = () =>
     isAuto ? (
-      <AutoPanel structuredData={structuredDataValues} categories={categories} onChange={handleOnChange} site={site} validators={validators} />
+      <AutoPanel
+        structuredData={structuredDataValues}
+        categories={categories}
+        onChange={handleOnChange}
+        site={site}
+        validators={validators}
+      />
     ) : (
       <ManualPanel
         onChange={handleOnChange}
@@ -183,7 +191,9 @@ const ReferenceField = (props: IReferenceFieldProps) => {
 
   const manualItems = !isAuto && value && Array.isArray(value.fixed) ? value.fixed.length : 0;
 
-  const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
+  const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : <></>);
+
+  const dataBlock = isAuto ? <AutoData /> : <ItemList items={value ? value.fixed : []} handleListDelete={handleListDelete} />;
 
   return (
     <S.Wrapper data-testid="reference-field-wrapper">
@@ -200,6 +210,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
             value={mode}
             type="inline"
             disabled={disabled}
+            mandatory={true}
           />
         )}
         {singleMode && !isAuto && value && <S.SingleModeText>{manualItems} items</S.SingleModeText>}
@@ -210,11 +221,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
           </S.ActionWrapper>
         )}
       </S.ModeWrapper>
-      {isAuto ? (
-        autoData
-      ) : (
-        <ItemList items={value ? value.fixed : []} handleListDelete={handleListDelete} handleChange={onChange} />
-      )}
+      {dataBlock}
       <FloatingPanel title="Configure elements" toggleModal={toggleModal} isOpen={isOpen}>
         {isOpen && getPanel()}
       </FloatingPanel>
@@ -224,10 +231,10 @@ const ReferenceField = (props: IReferenceFieldProps) => {
 
 export interface IReferenceFieldProps {
   source: string[];
-  value: any;
+  value?: any;
   onChange: (value: any) => void;
   disabled?: boolean;
-  site: ISite;
+  site: ISite | null;
   selectionType?: string[];
   structuredDataValues: { global: IStructuredData[]; site: IStructuredData[] };
   categories: { global: IStructuredData[]; site: IStructuredData[] };