@griddo/ax 10.2.10 → 10.2.12

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

@@ -1,19 +1,51 @@
 import React, { useState } from "react";
+import { connect } from "react-redux";
 
-import { IDataSource, ISite, IStructuredData } from "@ax/types";
-import { Button, FloatingMenu, IconAction, RadioGroup, Select, FieldsBehavior, UniqueCheck } from "@ax/components";
+import { IDataSource, ILanguage, IRootState, ISite, IStructuredData } from "@ax/types";
+import {
+  Button,
+  FloatingMenu,
+  IconAction,
+  RadioGroup,
+  Select,
+  FieldsBehavior,
+  AsyncSelect,
+  ToggleField,
+  UniqueCheck,
+} from "@ax/components";
 
 import { IReferenceState, useReference } from "../Context";
 import AutoItem from "./AutoItem";
+
 import * as S from "./style";
 
 const AutoPanel = (props: IProps): JSX.Element => {
-  const { onChange, site, structuredData, validators, categories } = props;
+  const { onChange, site, structuredData, validators, categories, globalLangs, lang } = props;
 
   const { state, setState } = useReference();
 
   const init = state.quantity ? "number" : "all";
   const [allItems, setAllItems] = useState<string | boolean>(init);
+  const initConfig = {
+    isConfigOpen: false,
+    isLanguageOpen: true,
+    isDataOpen: true,
+    isAllLangOpen: true,
+    isCustomLangOpen: true,
+  };
+  const [configState, setConfigState] = useState<IConfigState>(initConfig);
+  const initToggle = {
+    isSiteActive: state.site ? true : false,
+    isLangActive: state.lang ? true : false,
+    errorSite: false,
+    errorLang: false,
+    errorMsg: "",
+  };
+  const [toggleState, setToggleState] = useState<IToggleState>(initToggle);
+
+  const langOptions = globalLangs
+    .filter((language) => lang.id !== language.id)
+    .map((language) => ({ label: language.label, value: language.id.toString() }));
 
   const structuredDataValues: any[] = [];
   for (const [, dataType] of Object.entries(structuredData) as any[]) {
@@ -92,20 +124,43 @@ const AutoPanel = (props: IProps): JSX.Element => {
     minValue: validators && validators.minValue ? validators.minValue : undefined,
   };
 
+  const checkErrors = (): boolean => {
+    let errorSite = false;
+    let errorLang = false;
+    let errorMsg = "";
+    if (toggleState.isSiteActive && !state.site) {
+      errorSite = true;
+      errorMsg = "You need to select site before apply.";
+    }
+    if (toggleState.isLangActive && !state.lang) {
+      errorLang = true;
+      errorMsg = "You need to select language before apply.";
+    }
+    if (errorLang && errorSite) {
+      errorMsg = "You need to define some settings before apply.";
+    }
+    setToggleState({ ...toggleState, errorLang, errorSite, errorMsg });
+    return errorSite || errorLang;
+  };
+
   const handleApply = () => {
-    const order = state.order.concat("-", state.orderDirection);
-    const newValue = {
-      mode: "auto",
-      quantity: state.quantity,
-      order,
-      source: state.source,
-      filter: state.filter,
-      fullRelations: state.fullRelations,
-      allLanguages: state.allLanguages,
-      preferenceLanguage: state.preferenceLanguage,
-    };
+    if (!checkErrors()) {
+      const order = state.order.concat("-", state.orderDirection);
+      const newValue = {
+        mode: "auto",
+        quantity: state.quantity,
+        order,
+        source: state.source,
+        filter: state.filter,
+        fullRelations: state.fullRelations,
+        allLanguages: state.allLanguages,
+        preferenceLanguage: state.preferenceLanguage,
+        lang: state.lang,
+        site: state.site,
+      };
 
-    onChange(newValue);
+      onChange(newValue);
+    }
   };
 
   const handleAddSource = (value: string) => {
@@ -172,12 +227,45 @@ const AutoPanel = (props: IProps): JSX.Element => {
     }
   };
 
-  const handleAllLanguagesChange = (value: any) =>
-    setState((state: IReferenceState) => ({ ...state, allLanguages: value }));
+  const handleAllLanguagesChange = (value: any) => {
+    const preferenceLanguage = value ? state.preferenceLanguage : false;
+    setState((state: IReferenceState) => ({ ...state, allLanguages: value, preferenceLanguage }));
+  };
 
   const handlePreferenceLanguageChange = (value: any) =>
     setState((state: IReferenceState) => ({ ...state, preferenceLanguage: value }));
 
+  const toggleConfig = (value: keyof IConfigState) => setConfigState({ ...configState, [value]: !configState[value] });
+
+  const handleSiteChange = (value: string | number | null) => {
+    setState((state: IReferenceState) => ({ ...state, site: value || undefined }));
+    if (value) {
+      setToggleState({ ...toggleState, isSiteActive: true, errorSite: false, errorMsg: "" });
+    }
+  };
+
+  const handleLangChange = (value: string) => {
+    const lang = value.length ? parseInt(value) : undefined;
+    setState((state: IReferenceState) => ({ ...state, lang }));
+    if (value) {
+      setToggleState({ ...toggleState, isLangActive: true, errorLang: false, errorMsg: "" });
+    }
+  };
+
+  const handleLangToggleChange = (value: boolean) => {
+    setToggleState({ ...toggleState, isLangActive: value });
+    if (!value) {
+      setState((state: IReferenceState) => ({ ...state, lang: undefined }));
+    }
+  };
+
+  const handleSiteToggleChange = (value: boolean) => {
+    setToggleState({ ...toggleState, isSiteActive: value });
+    if (!value) {
+      setState((state: IReferenceState) => ({ ...state, site: undefined }));
+    }
+  };
+
   return (
     <S.Wrapper data-testid="auto-panel-wrapper">
       <S.FormWrapper>
@@ -186,7 +274,8 @@ const AutoPanel = (props: IProps): JSX.Element => {
           <S.SourceActions>
             {state.source && `${state.source.length} items`} {addSource}
           </S.SourceActions>
-          {state.source && state.source.length > 0 &&
+          {state.source &&
+            state.source.length > 0 &&
             state.source.map((singleSource: string) => {
               const sourceFilters = state.filter.filter((f: any) => f.source === singleSource);
               const source = state.sourceTitles.find((el: IDataSource) => el.id === singleSource);
@@ -201,27 +290,11 @@ const AutoPanel = (props: IProps): JSX.Element => {
                   site={site}
                   structuredDataSite={[...structuredData.site, ...categories.site]}
                 />
-              ) : <></>;
+              ) : (
+                <></>
+              );
             })}
         </S.SourcesWrapper>
-        <S.AllLanguagesWrapper>
-          <S.AllLanguagesText>
-            The content is displayed in the language of the page, but if the content you want is not available in that
-            language, you have the option to include content in another language.
-          </S.AllLanguagesText>
-          <UniqueCheck
-            name="allLanguagesCheck"
-            options={[{ value: false, name: "allLanguages", title: "Include content in another language" }]}
-            value={state.allLanguages}
-            onChange={handleAllLanguagesChange}
-          />
-          {state.allLanguages && <UniqueCheck
-            name="preferenceLanguageCheck"
-            options={[{ value: false, name: "preferenceLanguage", title: "Language page first" }]}
-            value={state.preferenceLanguage}
-            onChange={handlePreferenceLanguageChange}
-          />}
-        </S.AllLanguagesWrapper>
         <S.RadioWrapper>
           <S.FieldLabel>Sort</S.FieldLabel>
           <RadioGroup {...radioGroupProps} />
@@ -229,8 +302,148 @@ const AutoPanel = (props: IProps): JSX.Element => {
         <S.FieldLabel>Number of items</S.FieldLabel>
         <RadioGroup name="quantityGroup" options={quantityOptions} value={allItems} onChange={handleItemsChange} />
         {allItems !== "all" && <FieldsBehavior {...numberFieldProps} />}
+
+        <S.AdvancedWrapper>
+          <S.ConfigLabel
+            onClick={() => toggleConfig("isConfigOpen")}
+            isOpen={configState.isConfigOpen}
+            data-testid="advanced-config-label"
+          >
+            Advanced Settings
+          </S.ConfigLabel>
+          <S.ConfigWrapper isOpen={configState.isConfigOpen}>
+            <S.OptionLabel
+              onClick={() => toggleConfig("isLanguageOpen")}
+              isOpen={configState.isLanguageOpen}
+              data-testid="advanced-config-label"
+            >
+              <S.LabelContent>
+                <S.OptionText>Language options</S.OptionText>
+              </S.LabelContent>
+            </S.OptionLabel>
+
+            <S.ConfigWrapper isOpen={configState.isLanguageOpen}>
+              <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
+                      onClick={() => toggleConfig("isCustomLangOpen")}
+                      isOpen={configState.isCustomLangOpen}
+                      data-testid="advanced-config-label"
+                    >
+                      <S.LabelContent>
+                        <S.SubOptionText>Specify different language</S.SubOptionText>
+                        <ToggleField
+                          name="customLang"
+                          value={toggleState.isLangActive}
+                          onChange={handleLangToggleChange}
+                          size="s"
+                        />
+                      </S.LabelContent>
+                    </S.OptionLabel>
+
+                    <S.ConfigWrapper>
+                      <S.SubConfigContent>
+                        <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.
+                        </S.OptionDescription>
+                        {toggleState.isLangActive && (
+                          <Select
+                            name="select"
+                            options={langOptions}
+                            onChange={handleLangChange}
+                            value={state.lang?.toString() || ""}
+                            type="inline"
+                            placeholder="Select language"
+                            error={toggleState.errorLang}
+                          />
+                        )}
+                      </S.SubConfigContent>
+                    </S.ConfigWrapper>
+                  </>
+                ) : (
+                  <></>
+                )}
+              </S.ConfigContent>
+            </S.ConfigWrapper>
+
+            <S.OptionLabel
+              onClick={() => toggleConfig("isDataOpen")}
+              isOpen={configState.isDataOpen}
+              data-testid="advanced-config-label"
+            >
+              <S.LabelContent>
+                <S.OptionText>Data from specific site</S.OptionText>
+                <ToggleField
+                  name="site-toggle"
+                  value={toggleState.isSiteActive}
+                  onChange={handleSiteToggleChange}
+                  size="s"
+                />
+              </S.LabelContent>
+            </S.OptionLabel>
+
+            <S.ConfigWrapper>
+              <S.ConfigContent smallMargin={toggleState.isSiteActive} isLast={true}>
+                <S.OptionDescription isOpen={configState.isDataOpen}>
+                  The content is displayed in the language of the page, but{" "}
+                  <strong>if the content you want is not available in that language</strong>, you have the option to
+                  include content in another language.
+                </S.OptionDescription>
+                {toggleState.isSiteActive && (
+                  <AsyncSelect
+                    name="select"
+                    entity="sites"
+                    onChange={handleSiteChange}
+                    value={state.site || null}
+                    type="inline"
+                    placeholder="Select site"
+                    error={toggleState.errorSite}
+                  />
+                )}
+              </S.ConfigContent>
+            </S.ConfigWrapper>
+          </S.ConfigWrapper>
+        </S.AdvancedWrapper>
       </S.FormWrapper>
       <S.ActionsWrapper>
+        <S.ErrorWrapper>{toggleState.errorMsg.length > 0 && toggleState.errorMsg}</S.ErrorWrapper>
         <Button type="button" onClick={handleApply}>
           Apply
         </Button>
@@ -245,6 +458,29 @@ interface IProps {
   onChange: (value: any) => void;
   site: ISite;
   validators?: Record<string, unknown>;
+  globalLangs: ILanguage[];
+  lang: { locale: string; id: number };
 }
 
-export default AutoPanel;
+interface IConfigState {
+  isConfigOpen: boolean;
+  isLanguageOpen: boolean;
+  isDataOpen: boolean;
+  isAllLangOpen: boolean;
+  isCustomLangOpen: boolean;
+}
+
+interface IToggleState {
+  isSiteActive: boolean;
+  isLangActive: boolean;
+  errorSite: boolean;
+  errorLang: boolean;
+  errorMsg: string;
+}
+
+const mapStateToProps = (state: IRootState) => ({
+  globalLangs: state.app.globalLangs,
+  lang: state.app.lang,
+});
+
+export default connect(mapStateToProps)(AutoPanel);

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

@@ -6,11 +6,15 @@ const Wrapper = styled.div`
   justify-content: space-between;
   position: relative;
   height: 100%;
-  overflow: auto;
   padding-bottom: ${(p) => `calc(${p.theme.spacing.l} + ${p.theme.spacing.s})`};
 `;
 
-const FormWrapper = styled.div``;
+const FormWrapper = styled.div`
+  position: relative;
+  padding: ${(p) => p.theme.spacing.m};
+  height: 100%;
+  overflow: auto;
+`;
 
 const SourcesWrapper = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.m};
@@ -45,7 +49,7 @@ const RadioWrapper = styled.div`
 
 const SelectWrapper = styled.div`
   position: absolute;
-  right: 0;
+  right: ${(p) => p.theme.spacing.m};
   margin-top: ${(p) => `-${p.theme.spacing.xs}`};
   div {
     right: 0;
@@ -53,8 +57,11 @@ const SelectWrapper = styled.div`
 `;
 
 const ActionsWrapper = styled.div`
+  display: flex;
   text-align: right;
-  padding-top: ${(p) => p.theme.spacing.m};
+  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
+  border-top: 1px solid ${(p) => p.theme.color.uiLine};
+  align-items: center;
 `;
 
 const IconWrapper = styled.div`
@@ -75,19 +82,99 @@ const SourceItem = styled.li`
   }
 `;
 
-const AllLanguagesWrapper = styled.div`
+const AdvancedWrapper = styled.div``;
+
+const ConfigLabel = styled.div<{ isOpen: boolean }>`
+  position: relative;
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.colors.interactive01};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  cursor: pointer;
+  :after {
+    content: "";
+    border: solid ${(p) => p.theme.color.interactive01};
+    margin-left: ${(p) => p.theme.spacing.xs};
+    border-width: 0 2px 2px 0;
+    display: inline-block;
+    padding: 3px;
+    transform: ${(p) => (p.isOpen ? `rotate(-135deg) translate(-2px, 0)` : `rotate(45deg) translate(0, -2px)`)};
+  }
+`;
+
+const ConfigWrapper = styled.div<{ isOpen?: boolean }>`
+  overflow-y: ${(p) => (p.isOpen === false ? "hidden" : "visible")};
+  height: ${(p) => (p.isOpen === false ? 0 : "auto")};
+  transition: height 0.5s ease-in-out;
+`;
+
+const ConfigContent = styled.div<{ smallMargin: boolean; isLast?: boolean }>`
+  margin-bottom: ${(p) => p.theme.spacing.m};
+  padding: ${(p) =>
+    p.smallMargin ? `0 0 ${p.theme.spacing.xs} ${p.theme.spacing.m}` : `0 0 ${p.theme.spacing.m} ${p.theme.spacing.m}`};
+  border-bottom: ${(p) => (p.isLast ? "none" : `1px solid ${p.theme.color.uiLine}`)};
+`;
+
+const SubConfigContent = styled.div<{ hasMargin?: boolean }>`
+  padding-left: ${(p) => p.theme.spacing.m};
+  margin-bottom: ${(p) => (p.hasMargin ? p.theme.spacing.s : "0")};
+`;
+
+const OptionLabel = styled.div<{ isOpen: boolean }>`
+  position: relative;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  padding-left: ${(p) => p.theme.spacing.xxs};
+  cursor: pointer;
+  :before {
+    position: absolute;
+    top: 6px;
+    content: "";
+    border: solid ${(p) => p.theme.color.interactive01};
+    margin-right: 12px;
+    border-width: 0 2px 2px 0;
+    padding: 3px;
+    transform: ${(p) => (p.isOpen ? `rotate(45deg) translate(-3px, 0)` : `rotate(-45deg) translate(0, -3px)`)};
+  }
+`;
+
+const OptionText = styled.div`
   ${(p) => p.theme.textStyle.fieldContent};
-  color: ${(p) => p.theme.color.textHighEmphasis};
-  background-color: ${(p) => p.theme.color.uiBackground03};
-  padding: ${(p) => p.theme.spacing.s};
-  border-radius: ${(p) => p.theme.radii.s};
-  margin-bottom: ${(p) => p.theme.spacing.s};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
 `;
 
-const AllLanguagesText = styled.div`
+const SubOptionText = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+`;
+
+const LabelContent = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 20px;
+`;
+
+const OptionDescription = styled.div<{ isOpen?: boolean }>`
   ${(p) => p.theme.textStyle.uiXS};
-  color: ${(p) => p.theme.color.textMediumEmphasis};
-  margin-bottom: ${(p) => p.theme.spacing.xs};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  padding-right: ${(p) => p.theme.spacing.s};
+  overflow-y: ${(p) => (p.isOpen === false ? "hidden" : "visible")};
+  height: ${(p) => (p.isOpen === false ? 0 : "auto")};
+  transition: height 0.5s ease-in-out;
+`;
+
+const CheckWrapper = styled.div`
+  margin-top: ${(p) => p.theme.spacing.xs};
+  label {
+    margin-bottom: 0;
+    color: ${(p) => p.theme.colors.textHighEmphasis};
+  }
+`;
+
+const ErrorWrapper = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.colors.error};
+  width: 100%;
+  padding-right: ${(p) => p.theme.spacing.s};
 `;
 
 export {
@@ -103,6 +190,16 @@ export {
   SourceMenu,
   SourceItem,
   SelectWrapper,
-  AllLanguagesWrapper,
-  AllLanguagesText,
+  AdvancedWrapper,
+  ConfigLabel,
+  ConfigWrapper,
+  ConfigContent,
+  SubConfigContent,
+  OptionLabel,
+  LabelContent,
+  OptionDescription,
+  OptionText,
+  SubOptionText,
+  CheckWrapper,
+  ErrorWrapper,
 };

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

@@ -1,9 +1,9 @@
 import React, { createContext, useState, useCallback, useContext, ReactElement } from "react";
 import { moveElement } from "@ax/forms";
 import { moveArrayElement } from "@ax/helpers";
-import { IStructuredDataContent } from "@ax/types";
+import { IDataSource, IStructuredDataContent } from "@ax/types";
 
-const initState = {
+const initState: IReferenceState = {
   mode: "auto",
   order: "recent",
   orderDirection: "ASC",
@@ -53,8 +53,8 @@ const useReferenceProvider = (modes?: string[]) => {
     const { selectedItems, fixed, fullRelations = false } = state;
     const newItems = moveElement(item.id, selectedItems, newIndex, "id");
     const originalItemId = item.relatedPage?.originalStructuredDataId;
-    const itemId = state.fixed.includes(originalItemId) ? originalItemId : item.id;
-    const newFixed = moveArrayElement(itemId, fixed, newIndex);
+    const itemId = originalItemId && state.fixed.includes(originalItemId) ? originalItemId : item.id;
+    const newFixed: number[] = moveArrayElement(itemId, fixed, newIndex);
     const newState: IReferenceState = {
       ...state,
       selectedItems: newItems,
@@ -77,17 +77,25 @@ export interface IReferenceState {
   order: string;
   orderDirection: string;
   quantity: number;
-  items: any;
-  selectedItems: any;
-  fixed: any;
+  items: IStructuredDataContent[];
+  selectedItems: IStructuredDataContent[];
+  fixed: number[];
   search: string;
   showSelected: boolean;
-  source: any;
-  filter: any;
-  sourceTitles: any;
+  source: string[];
+  filter: IFilter[];
+  sourceTitles: IDataSource[];
   fullRelations: boolean;
   allLanguages: boolean;
   preferenceLanguage: boolean;
+  lang?: number;
+  site?: number;
+}
+
+interface IFilter {
+  id: number;
+  label: string;
+  source: string;
 }
 
 export { ReferenceProvider, useReference };

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

@@ -4,7 +4,7 @@ import { DraggableProvided } from "react-beautiful-dnd";
 import { IDataSource, IStructuredDataContent } from "@ax/types";
 import { getFormattedDateWithTimezone } from "@ax/helpers";
 
-import { FloatingMenu, Icon, IconAction } from "@ax/components";
+import { Icon } from "@ax/components";
 
 import * as S from "./style";
 
@@ -15,34 +15,13 @@ const Item = (props: IProps) => {
     handleDelete(item);
   };
 
-  const MoreInfoButton = () => (
-    <S.IconActionWrapper>
-      <IconAction icon="more" />
-    </S.IconActionWrapper>
-  );
-
-  const actionMenuItem = (item: any) => (
-    <S.ActionItem key={item.icon} onClick={item.action} data-testid="action-menu-item">
-      <Icon name={item.icon} />
-      <S.ActionText>{item.label}</S.ActionText>
-    </S.ActionItem>
-  );
-
-  const editMenu = {
-    options: [
-      {
-        label: "delete",
-        icon: "delete",
-        action: removeItem,
-      },
-    ],
-  };
-
-  const ActionMenu = () => (
-    <FloatingMenu Button={MoreInfoButton}>
-      <S.ActionMenu>{editMenu.options.map((item: any, i: number) => actionMenuItem(item))}</S.ActionMenu>
-    </FloatingMenu>
-  );
+  const menuOptions = [
+    {
+      label: "delete",
+      icon: "delete",
+      action: removeItem,
+    },
+  ];
 
   return (
     <S.Item ref={innerRef} data-testid="reference-field-item" {...provided?.draggableProps}>
@@ -58,7 +37,7 @@ const Item = (props: IProps) => {
         </S.Header>
         <S.Title>{item.content.title}</S.Title>
       </S.TextWrapper>
-      <ActionMenu />
+      <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
     </S.Item>
   );
 };