@griddo/ax 1.66.1 → 1.66.4

package/src/modules/Content/atoms.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { IModal } from "@ax/types";
-import { Modal, FieldsBehavior, Button } from "@ax/components";
+import { IModal, ISite } from "@ax/types";
+import { Modal, FieldsBehavior, Select, Button } from "@ax/components";
 
 import * as S from "./style";
 
@@ -68,6 +68,38 @@ const DeleteModal = (props: IDeleteModal): JSX.Element => {
   );
 };
 
+const CopyModal = (props: ICopyModal): JSX.Element => {
+  const { isOpen, toggleModal, mainModalAction, secondaryModalAction, setSite, sites, site } = props;
+  const sitesOptions = sites.map((site: ISite) => ({ label: site.name, value: site.id.toString() }));
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      hide={toggleModal}
+      size="S"
+      title="Copy page in another site"
+      mainAction={mainModalAction}
+      secondaryAction={secondaryModalAction}
+    >
+      <S.ModalContent>
+        <p>
+          <strong>Select a site to copy this page. </strong>
+          <br></br>
+          You can only select sites with the same language as this page.
+        </p>
+        <S.SelectWrapper>
+          <Select
+            name="select"
+            options={sitesOptions}
+            onChange={(value: string) => setSite(value)}
+            value={site?.toString() || ""}
+            mandatory={true}
+          />
+        </S.SelectWrapper>
+      </S.ModalContent>
+    </Modal>
+  );
+};
 const MainActionButton = (props: IActionButton): JSX.Element => (
   <Button type="button" onClick={props.onClick}>
     {props.title}
@@ -87,9 +119,15 @@ interface IDeleteModal extends IModal {
   title?: string;
 }
 
+interface ICopyModal extends IModal {
+  setSite: React.Dispatch<React.SetStateAction<any>>;
+  sites: ISite[];
+  site: string | null;
+}
+
 interface IActionButton {
   onClick: () => void;
   title: string;
 }
 
-export { DeleteModal, MainActionButton, SecondaryActionButton };
+export { DeleteModal, CopyModal, MainActionButton, SecondaryActionButton };

package/src/modules/Content/index.tsx

@@ -15,6 +15,7 @@ import {
   IGetSitePagesParams,
   IColumn,
   ISite,
+  IUser,
 } from "@ax/types";
 import { MainWrapper, Modal, TableList, ErrorToast, Toast, EmptyState, Notification } from "@ax/components";
 import { getFilteredStructuredData, isGlobalStructuredData, isStructuredDataFromPage } from "@ax/helpers";
@@ -83,9 +84,14 @@ const Content = (props: IProps): JSX.Element => {
     resetPageEditor,
     removePageFromSite,
     importPageFromGlobal,
-    restorePage,
     getDataPack,
+    getSitesByLang,
     dataPacks,
+    restorePage,
+    getAvailableDataPacks,
+    sitesByLang,
+    user,
+    setCurrentDataID,
   } = props;
 
   const itemsPerPage = 50;
@@ -106,10 +112,12 @@ const Content = (props: IProps): JSX.Element => {
   const isDataEditable = !isStructuredData || (currentStructuredData && currentStructuredData.editable);
 
   const pagesIds = currentSitePages && currentSitePages.map((page: any) => page.id);
+  const currentSitePagesTemplatesIds = currentSitePages && currentSitePages.map((page: any) => page.templateId);
   const dataIds = currentDataContent && currentDataContent.map((data: any) => data.id);
   const contentIds = isStructuredData ? dataIds : pagesIds;
-  const currentSitePagesTemplatesIds = currentSitePages && currentSitePages.map((page: any) => page.templateId);
-
+  const currentSitesByLang = sitesByLang?.filter(
+    (site) => user?.sites?.includes("all") || user.sites.includes(site.id)
+  );
   const categoryColumns =
     currentStructuredData && currentStructuredData.schema
       ? currentStructuredData.schema.fields.filter((field: any) => field.showList)
@@ -147,6 +155,7 @@ const Content = (props: IProps): JSX.Element => {
   const [deleteAllVersions, setDeleteAllVersions] = useState(false);
   const [arePagesTranslated, setArePagesTranslated] = useState(false);
   const [templateInstanceError, setTemplateInstanceError] = useState({ error: false, templateName: "" });
+  const [pagesTemplatesIds, setPagesTemplatesIds] = useState<any[]>([]);
 
   const {
     resetBulkSelection,
@@ -170,6 +179,12 @@ const Content = (props: IProps): JSX.Element => {
     setIsVisible: setIsVisibleDeletedToast,
   } = useToast();
 
+  const {
+    isVisible: isVisibleCopiedToast,
+    toggleToast: toggleCopiedToast,
+    setIsVisible: setIsVisibleCopiedToast,
+  } = useToast();
+
   const { categoryColors, addCategoryColors } = useCategoryColors();
 
   const getParams = useCallback(() => {
@@ -231,11 +246,16 @@ const Content = (props: IProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filter]);
 
+  const fetchSitesByLang = async () => await getSitesByLang(lang.id);
+
   useEffect(() => {
     if (!locationState || locationState.isFromEditor !== true) {
       setFilter("unique-pages");
     }
     resetPageEditor();
+    fetchSitesByLang();
+    setCurrentDataID(null);
+    getAvailableDataPacks(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -262,6 +282,12 @@ const Content = (props: IProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoading, currentSitePages]);
 
+  useEffect(() => {
+    if (pagesTemplatesIds?.length === 0) {
+      setPagesTemplatesIds(currentSitePagesTemplatesIds);
+    }
+  }, [currentSitePagesTemplatesIds]);
+
   const bulkFilter = (bulkSelection: number[]) => filterByStatus(bulkSelection, currentSitePages);
 
   const handleAddToBulk = (item: ICheck) => addToBulkSelection(item, bulkFilter);
@@ -530,13 +556,15 @@ const Content = (props: IProps): JSX.Element => {
         duplicatePage,
         removePageFromSite,
         languageActions: pageLanguageActions,
-        deleteBulk: deleteCurrentPageBulk,
         getDataPack: getDataPack,
         setTemplateInstanceError,
+        deleteBulk: deleteCurrentPageBulk,
+        toggleCopiedToast,
       };
 
       return (
         <PageItem
+          sites={currentSitesByLang}
           item={item}
           key={pageItem.id}
           functions={pageItemFunctions}
@@ -650,6 +678,11 @@ const Content = (props: IProps): JSX.Element => {
     message: "Page deleted.",
   };
 
+  const copiedToastProps = {
+    setIsVisible: setIsVisibleCopiedToast,
+    message: "1 Page copied to another Site",
+  };
+
   const addNewAction = filter === "unique-pages" || isGlobalPages ? toggleNewModal : addNewData;
 
   return (
@@ -661,70 +694,74 @@ const Content = (props: IProps): JSX.Element => {
       rightButton={{ label: "New", action: addNewAction }}
       searchAction={setSearchQuery}
     >
-      <S.ContentListWrapper>
-        <ContentFilters current={filter} dynamicValues={structuredData} resetFilter={resetFilter} />
-        <S.TableWrapper>
-          <ErrorToast />
-          {templateInstanceError.error && (
-            <Notification
-              type="error"
-              text={`There can be only one ${templateInstanceError.templateName} page and you already have it.`}
-            />
-          )}
-          <TableList
-            tableHeader={Header}
-            pagination={pagination}
-            onScroll={onScroll}
-            hasFixedHeader={true}
-            tableRef={tableRef}
-          >
-            {!isEmpty ? (
-              content
-            ) : (
-              <S.EmptyWrapper>
-                <EmptyState {...emptyStateProps} />
-              </S.EmptyWrapper>
+      <>
+        <S.ContentListWrapper>
+          <ContentFilters current={filter} dynamicValues={structuredData} resetFilter={resetFilter} />
+          <S.TableWrapper>
+            <ErrorToast />
+            {templateInstanceError.error && (
+              <Notification
+                type="error"
+                text={`There can be only one ${templateInstanceError.templateName} page and you already have it.`}
+              />
             )}
-          </TableList>
-        </S.TableWrapper>
-      </S.ContentListWrapper>
-      <Modal isOpen={isNewOpen} hide={toggleNewModal} size="M" title="New content">
-        <OptionTable
-          selectPage={addTemplate}
-          selectData={addNewStructuredData}
-          filters={options.filters}
-          values={options.values}
-          selectedValue={selectedOption}
-          theme={currentSiteInfo.theme}
-          mainAction={createContentAction}
-          secondaryAction={{ title: "Cancel", onClick: toggleNewModal }}
+            <TableList
+              tableHeader={Header}
+              pagination={pagination}
+              onScroll={onScroll}
+              hasFixedHeader={true}
+              tableRef={tableRef}
+            >
+              {!isEmpty ? (
+                content
+              ) : (
+                <S.EmptyWrapper>
+                  <EmptyState {...emptyStateProps} />
+                </S.EmptyWrapper>
+              )}
+            </TableList>
+          </S.TableWrapper>
+        </S.ContentListWrapper>
+        <Modal isOpen={isNewOpen} hide={toggleNewModal} size="M" title="New content">
+          <OptionTable
+            selectPage={addTemplate}
+            selectData={addNewStructuredData}
+            filters={options.filters}
+            values={options.values}
+            selectedValue={selectedOption}
+            theme={currentSiteInfo.theme}
+            mainAction={createContentAction}
+            secondaryAction={{ title: "Cancel", onClick: toggleNewModal }}
+          />
+        </Modal>
+        <Modal
+          isOpen={isImporterOpen}
+          hide={toggleImporterModal}
+          size="M"
+          title="New content"
+          mainAction={{ title: "Add Pages", onClick: importPage }}
+          secondaryAction={{ title: "Cancel", onClick: toggleImporterModal }}
+        >
+          <PageImporter structuredData={selectedOptionType} {...{ setPagesToImport }} />
+        </Modal>
+        <DeleteModal
+          isOpen={isDeleteOpen}
+          toggleModal={toggleDeleteModal}
+          mainModalAction={mainDeleteModalAction}
+          secondaryModalAction={secondaryDeleteModalAction}
+          {...{ isTranslated: arePagesTranslated, deleteAllVersions, setDeleteAllVersions }}
         />
-      </Modal>
-      <Modal
-        isOpen={isImporterOpen}
-        hide={toggleImporterModal}
-        size="M"
-        title="New content"
-        mainAction={{ title: "Add Pages", onClick: importPage }}
-        secondaryAction={{ title: "Cancel", onClick: toggleImporterModal }}
-      >
-        <PageImporter structuredData={selectedOptionType} {...{ setPagesToImport }} />
-      </Modal>
-      <DeleteModal
-        isOpen={isDeleteOpen}
-        toggleModal={toggleDeleteModal}
-        mainModalAction={mainDeleteModalAction}
-        secondaryModalAction={secondaryDeleteModalAction}
-        {...{ isTranslated: arePagesTranslated, deleteAllVersions, setDeleteAllVersions }}
-      />
-      {isVisible && <Toast {...toastProps} />}
-      {isVisibleRemovedToast && <Toast {...removedToastProps} />}
-      {isVisibleDeletedToast && <Toast {...deletedToastProps} />}
+        {isVisible && <Toast {...toastProps} />}
+        {isVisibleRemovedToast && <Toast {...removedToastProps} />}
+        {isVisibleDeletedToast && <Toast {...deletedToastProps} />}
+        {isVisibleCopiedToast && <Toast {...copiedToastProps} />}
+      </>
     </MainWrapper>
   );
 };
 
 const mapStateToProps = (state: IRootState) => ({
+  sitesByLang: state.sites.sitesByLang,
   currentSiteInfo: state.sites.currentSiteInfo,
   currentSitePages: state.sites.currentSitePages,
   filter: state.sites.currentFilter,
@@ -741,6 +778,7 @@ const mapStateToProps = (state: IRootState) => ({
   activatedTemplates: state.dataPacks.templates,
   isLoading: state.app.isLoading,
   dataPacks: state.dataPacks.activated,
+  user: state.users.currentUser,
 });
 
 interface IDispatchProps {
@@ -760,7 +798,7 @@ interface IDispatchProps {
   getStructuredDataContents(params: any, siteID: number): Promise<void>;
   resetForm(): void;
   deleteBulk(ids: any): Promise<boolean>;
-  duplicatePage(pageID: number, data: any): Promise<void>;
+  duplicatePage(pageID: number, data?: any, siteID?: number): Promise<boolean>;
   deleteDataContent(dataID: number[]): Promise<boolean>;
   restoreDataContent(catID: number | number[]): void;
   setFilter(value: string): void;
@@ -768,14 +806,18 @@ interface IDispatchProps {
   resetPageEditor(): Promise<void>;
   removePageFromSite(pageID: number | number[], refresh?: boolean): Promise<boolean>;
   importPageFromGlobal(pageID: number | number[]): Promise<boolean>;
-  restorePage(id: number | number[]): Promise<boolean>;
   getDataPack: (id: string) => Promise<void>;
+  restorePage(id: number | number[]): Promise<boolean>;
+  getAvailableDataPacks: (queryParams: string | null) => void;
+  getSitesByLang(language: number): Promise<void>;
+  setCurrentDataID(id: number | null): void;
 }
 
 const mapDispatchToProps = {
   setHistoryPush: appActions.setHistoryPush,
   setLanguage: appActions.setLanguage,
   getSitePages: sitesActions.getSitePages,
+  getSitesByLang: sitesActions.getSitesByLang,
   setCurrentPageID: pageEditorActions.setCurrentPageID,
   setCurrentPageStatus: pageEditorActions.setCurrentPageStatus,
   setCurrentPageName: pageEditorActions.setCurrentPageName,
@@ -796,8 +838,10 @@ const mapDispatchToProps = {
   resetPageEditor: pageEditorActions.resetPageEditor,
   removePageFromSite: sitesActions.removePageFromSite,
   importPageFromGlobal: sitesActions.importPageFromGlobal,
-  restorePage: pageEditorActions.restorePage,
   getDataPack: dataPacksActions.getSiteDataPack,
+  restorePage: pageEditorActions.restorePage,
+  getAvailableDataPacks: dataPacksActions.getAvailableSiteDataPacks,
+  setCurrentDataID: structuredDataActions.setCurrentDataID,
 };
 
 interface IPagesProps {
@@ -819,6 +863,9 @@ interface IPagesProps {
   activatedTemplates: any[];
   isLoading: boolean;
   dataPacks: IDataPack[];
+  sites: ISite[];
+  sitesByLang: ISite[];
+  user: IUser;
 }
 
 type IProps = IPagesProps & IDispatchProps;

package/src/modules/Content/style.tsx

@@ -35,4 +35,11 @@ const ModalContent = styled.div`
   }
 `;
 
-export { ContentListWrapper, TableWrapper, PaginationWrapper, EmptyWrapper, ModalContent };
+const SelectWrapper = styled.div`
+  & .react-select__control,
+  .react-select__menu {
+    min-width: 100%;
+  }
+`;
+
+export { ContentListWrapper, TableWrapper, PaginationWrapper, EmptyWrapper, ModalContent, SelectWrapper };

package/src/modules/GlobalEditor/Editor/index.tsx

@@ -29,6 +29,7 @@ const Editor = (props: IProps) => {
     copyModule,
     pasteModule,
     theme,
+    browserRef,
     setNotification,
   } = props;
 
@@ -47,7 +48,7 @@ const Editor = (props: IProps) => {
 
   return (
     <ResizePanel
-      leftPanel={<PageBrowser isReadOnly={isReadOnly} theme={theme} />}
+      leftPanel={<PageBrowser isReadOnly={isReadOnly} theme={theme} browserRef={browserRef} />}
       rightPanel={
         <ConfigPanel
           schema={schema}
@@ -99,6 +100,7 @@ interface IPageBrowserDispatchProps {
   isEditable: boolean;
   isReadOnly: boolean;
   theme: string;
+  browserRef: any;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;

package/src/modules/GlobalEditor/PageBrowser/index.tsx

@@ -18,6 +18,7 @@ const PageBrowser = (props: IProps) => {
     theme,
     isReadOnly,
     isPreview,
+    browserRef,
   } = props;
 
   const slugWithSlash = slug ? (slug.startsWith("/") ? slug : `/${slug}`) : "";
@@ -38,6 +39,7 @@ const PageBrowser = (props: IProps) => {
       disabled={isReadOnly}
       siteID={canonicalSite}
       isPreview={isPreview}
+      browserRef={browserRef}
     />
   );
 };
@@ -60,6 +62,7 @@ interface IPageBrowserDispatchProps {
   theme: string;
   isReadOnly: boolean;
   isPreview?: boolean;
+  browserRef?: any;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;

package/src/modules/GlobalEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { connect } from "react-redux";
 import { RouteComponentProps } from "react-router-dom";
 
@@ -50,6 +50,7 @@ const GlobalEditor = (props: IProps) => {
   const [selectedTab, setSelectedTab] = useState("edit");
   const [notification, setNotification] = useState<INotification | null>(null);
   const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent.editorContent, isNewTranslation);
+  const browserRef = useRef<HTMLDivElement>(null);
 
   const isPublished = props.pageStatus === pageStatus.PUBLISHED || props.pageStatus === pageStatus.UPLOAD_PENDING;
   const isDraft = props.pageStatus === pageStatus.MODIFIED;
@@ -114,7 +115,7 @@ const GlobalEditor = (props: IProps) => {
   const publishPage = async () => {
     const { updatePageStatus, savePage, pageID, validatePage } = props;
 
-    const validated = await validatePage(true);
+    const validated = await validatePage(true, browserRef);
 
     if (validated) {
       const publishPage = {
@@ -134,7 +135,7 @@ const GlobalEditor = (props: IProps) => {
   const publishChanges = async () => {
     const { savePage, validatePage } = props;
 
-    const validated = await validatePage(true);
+    const validated = await validatePage(true, browserRef);
 
     if (validated) {
       const publishPage = {
@@ -163,13 +164,13 @@ const GlobalEditor = (props: IProps) => {
 
   const reviewPage = () => {
     const { validatePage } = props;
-    validatePage();
+    validatePage(false, browserRef);
   };
 
   const handlePublishDraft = async () => {
     const { savePage, validatePage } = props;
 
-    const validated = await validatePage(true);
+    const validated = await validatePage(true, browserRef);
 
     if (validated) {
       const isSaved = await savePage(false, null, true);
@@ -462,6 +463,7 @@ const GlobalEditor = (props: IProps) => {
               isEditable={isEditable}
               isReadOnly={isReadOnly}
               theme={theme}
+              browserRef={browserRef}
               setNotification={setNotification}
             />
           </S.Content>
@@ -567,7 +569,7 @@ interface IPageEditorDispatchProps {
   getPage(pageID?: number, global?: boolean): Promise<void>;
   savePage(createDraft: boolean, publishPage?: any, publishDraft?: boolean): Promise<boolean>;
   deletePage(params?: ISavePageParams): Promise<boolean>;
-  validatePage(publish?: boolean): Promise<boolean>;
+  validatePage(publish?: boolean, browserRef?: any): Promise<boolean>;
   updatePageStatus(id: number[], status: string): Promise<boolean>;
   setHistoryPush(path: string, isEditor: boolean): void;
   setLanguage?(lang: { locale: string; id: number | null }): void;

package/src/modules/Navigation/Menus/List/Table/SidePanel/Form/index.tsx

@@ -79,6 +79,14 @@ const Form = (props: IProps): JSX.Element => {
             handlePanel={toggleSecondaryPanel}
             inFloatingPanel={true}
           />
+          <FieldsBehavior
+            title="Image"
+            name="image"
+            fieldType="ImageField"
+            value={itemImage || null}
+            onChange={setImageValue}
+            setIsGalleryOpened={setIsGalleryOpened}
+          />
         </>
       )}
     </>

package/src/modules/PageEditor/Editor/index.tsx

@@ -35,10 +35,11 @@ const Editor = (props: IProps) => {
     isReadOnly,
     userEditing,
     site,
-    lastElementAddedId,
     copyModule,
     pasteModule,
     setNotification,
+    lastElementAddedId,
+    browserRef,
   } = props;
 
   const actions = {
@@ -58,7 +59,9 @@ const Editor = (props: IProps) => {
 
   return (
     <ResizePanel
-      leftPanel={<PageBrowser isTemplateActivated={isTemplateActivated} isReadOnly={isReadOnly} />}
+      leftPanel={
+        <PageBrowser isTemplateActivated={isTemplateActivated} isReadOnly={isReadOnly} browserRef={browserRef} />
+      }
       rightPanel={
         <ConfigPanel
           schema={schema}
@@ -119,6 +122,7 @@ interface IPageBrowserDispatchProps {
   isEditable: boolean;
   pageTitle: string;
   isReadOnly: boolean;
+  browserRef: any;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;

package/src/modules/PageEditor/PageBrowser/index.tsx

@@ -21,6 +21,7 @@ const PageBrowser = (props: IProps) => {
     isTemplateActivated,
     isReadOnly,
     isPreview,
+    browserRef,
   } = props;
 
   const slugWithSlash = slug ? (slug.startsWith("/") ? slug : `/${slug}`) : "";
@@ -44,6 +45,7 @@ const PageBrowser = (props: IProps) => {
       disabled={disabled}
       siteID={siteID}
       isPreview={isPreview}
+      browserRef={browserRef}
     />
   );
 };
@@ -67,6 +69,7 @@ interface IPageBrowserDispatchProps {
   isTemplateActivated: boolean;
   isReadOnly: boolean;
   isPreview?: boolean;
+  browserRef?: any;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;