@griddo/ax 10.4.7 → 10.4.9

package/src/hooks/bulk.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 
 import { areEquals } from "@ax/helpers";
 import { ICheck } from "@ax/types";
@@ -13,6 +13,7 @@ const useBulkSelection = (itemIDs: any[]) => {
 
   const [items, setItems] = useState<any[]>([]);
   const [selectedItems, setSelectedItems] = useState(selectedItemsInitialState);
+  const [isMultiCheck, setIsMultiCheck] = useState(false);
   const [checkState, setCheckState] = useState<Record<string, boolean>>({
     isAllSelected: false,
     indeterminate: false,
@@ -35,19 +36,73 @@ const useBulkSelection = (itemIDs: any[]) => {
     // eslint-disable-next-line
   }, [itemIDs]);
 
+  const onWindowKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.defaultPrevented) {
+      return;
+    }
+
+    if (e.key === "Shift") {
+      setIsMultiCheck(true);
+    }
+  }, []);
+
+  const onWindowKeyUp = useCallback((e: KeyboardEvent) => {
+    if (e.defaultPrevented) {
+      return;
+    }
+
+    if (e.key === "Shift") {
+      setIsMultiCheck(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("keydown", onWindowKeyDown);
+    window.addEventListener("keyup", onWindowKeyUp);
+    return () => {
+      window.removeEventListener("keydown", onWindowKeyDown);
+      window.removeEventListener("keyup", onWindowKeyUp);
+    };
+  }, [onWindowKeyDown, onWindowKeyUp]);
+
   const isSelected = (value: any) => selectedItems.all.includes(value);
+
   const areAllItemsSelected = (itemsAvailable: any) =>
     selectedItems.all.length > 0 && areEquals(itemsAvailable, selectedItems.all);
+
   const areItemsSelected = (itemsAvailable: any) =>
     !!selectedItems.all.find((element: any) => itemsAvailable.includes(element));
+
   const resetBulkSelection = () => setSelectedItems(selectedItemsInitialState);
 
+  const multiSelectTo = (value: any) => {
+    const indexOfNew = items.indexOf(value);
+    const lastSelected = selectedItems.all[selectedItems.all.length - 1];
+    const indexOfLast = items.indexOf(lastSelected);
+
+    const isSelectingForwards = indexOfNew > indexOfLast;
+    const start = isSelectingForwards ? indexOfLast : indexOfNew;
+    const end = isSelectingForwards ? indexOfNew : indexOfLast;
+
+    const inBetween = items.slice(start, end + 1);
+
+    const toAdd = inBetween.filter((id) => !selectedItems.all.includes(id));
+
+    const sorted = isSelectingForwards ? toAdd : [...toAdd].reverse();
+    const combined = [...selectedItems.all, ...sorted];
+    return combined;
+  };
+
   const addToBulkSelection = (item: ICheck, callback?: any) => {
     const { value, isChecked } = item;
 
     let bulkSelection: any = [...selectedItems.all];
 
-    isChecked ? bulkSelection.push(value) : (bulkSelection = bulkSelection.filter((id: any) => id !== value));
+    isChecked && isMultiCheck
+      ? (bulkSelection = multiSelectTo(value))
+      : isChecked
+      ? bulkSelection.push(value)
+      : (bulkSelection = bulkSelection.filter((id: any) => id !== value));
 
     if (callback) {
       const filteredItems = callback(bulkSelection);

package/src/hooks/iframe.ts

@@ -2,11 +2,11 @@ import { useCallback, useEffect } from "react";
 
 const useOnMessageReceivedFromIframe = (actions?: {
   setSelectedContentAction: any;
-  deleteModuleAction(editorID: number): void;
-  duplicateModuleAction(editorID: number): Promise<number>;
+  deleteModuleAction(editorID: number[]): void;
+  duplicateModuleAction(editorID: number[]): number;
 }): void => {
   const onMessageReceivedFromIframe = useCallback(
-    async (ev: MessageEvent<{ type: string; message: string }>) => {
+    (ev: MessageEvent<{ type: string; message: string }>) => {
       if (typeof ev.data !== "object") return;
       if (!ev.data.type) return;
       if (!ev.data.message) return;
@@ -15,10 +15,10 @@ const useOnMessageReceivedFromIframe = (actions?: {
       }
       if (ev.data.type === "module-delete") {
         actions?.setSelectedContentAction(0);
-        actions?.deleteModuleAction(parseInt(ev.data.message));
+        actions?.deleteModuleAction([parseInt(ev.data.message)]);
       }
       if (ev.data.type === "module-duplicate") {
-        const duplicatedEditorID = await actions?.duplicateModuleAction(parseInt(ev.data.message));
+        const duplicatedEditorID = actions?.duplicateModuleAction([parseInt(ev.data.message)]);
         actions?.setSelectedContentAction(duplicatedEditorID);
       }
     },

package/src/modules/Content/index.tsx

@@ -120,6 +120,7 @@ const Content = (props: IProps): JSX.Element => {
     deleteAndRemoveFromSiteBulk,
     checkUserSession,
     getDefaults,
+    getAvailableSiteDataPacks,
     error,
   } = props;
 
@@ -200,6 +201,8 @@ const Content = (props: IProps): JSX.Element => {
   const [pagesSelected, setPagesSelected] = useState<any[]>([]);
   const history = useHistory();
 
+  const [isDeleting, setIsDeleting] = useState<boolean>(false);
+
   const isAllowedToCreatePages = usePermission("content.createPages");
 
   const {
@@ -303,6 +306,7 @@ const Content = (props: IProps): JSX.Element => {
     fetchSitesByLang();
     getIntegrations(currentSiteInfo.id, {}, true);
     getDefaults();
+    getAvailableSiteDataPacks(null, false);
     resetForm();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -447,6 +451,7 @@ const Content = (props: IProps): JSX.Element => {
 
   const bulkDelete = async () => {
     let allPageVersions: number[] = [];
+    setIsDeleting(true);
     if (deleteAllVersions) {
       const selectedPages = currentSitePages.filter((page) => selectedItems.all.includes(page.id));
       const pageLanguages = selectedPages.map((element) => element.pageLanguages);
@@ -471,6 +476,7 @@ const Content = (props: IProps): JSX.Element => {
     const previousPage = page - 1;
     page > 1 && (isLastItem || allPageItemsSelected) ? setPage(previousPage) : getSiteContent();
     unselectAllItems();
+    setIsDeleting(false);
   };
 
   const handleToggleDeleteModal = () => {
@@ -767,8 +773,9 @@ const Content = (props: IProps): JSX.Element => {
   const resetFilter = () => resetFilterQuery();
 
   const mainDeleteModalAction = {
-    title: "Delete pages",
+    title: isDeleting ? "Deleting pages" : "Delete pages",
     onClick: bulkDelete,
+    disabled: isDeleting,
   };
 
   const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
@@ -977,6 +984,7 @@ interface IDispatchProps {
   deleteAndRemoveFromSiteBulk(pageIds: number[], globalPageIds: number[]): Promise<boolean>;
   checkUserSession(): Promise<void>;
   getDefaults(): Promise<void>;
+  getAvailableSiteDataPacks(queryParams: string | null, loading?: boolean): Promise<void>;
 }
 
 const mapDispatchToProps = {
@@ -1014,6 +1022,7 @@ const mapDispatchToProps = {
   deleteAndRemoveFromSiteBulk: sitesActions.deleteAndRemoveFromSiteBulk,
   checkUserSession: appActions.checkUserSession,
   getDefaults: navigationActions.getDefaults,
+  getAvailableSiteDataPacks: dataPacksActions.getAvailableSiteDataPacks,
 };
 
 interface IPagesProps {

package/src/modules/FramePreview/index.tsx

@@ -60,11 +60,11 @@ const FramePreview = (props: IProps) => {
   const deleteModuleSelected = (editorID: number) => {
     window.parent.postMessage({ type: "module-delete", message: editorID }, "*");
     setSelectedContent && setSelectedContent(0);
-    deleteModule(editorID);
+    deleteModule([editorID]);
   };
   const duplicateModuleSelected = (editorID: number) => {
     window.parent.postMessage({ type: "module-duplicate", message: editorID }, "*");
-    duplicateModule(editorID);
+    duplicateModule([editorID]);
   };
   const moduleActions = {
     deleteModuleAction: deleteModuleSelected,
@@ -105,8 +105,8 @@ interface IProps {
   isLoading: boolean;
   setSelectedContent(editorID: number): void;
   setEditorContent(editorContent: Record<string, unknown>): void;
-  deleteModule(editorID: number): void;
-  duplicateModule(editorID: number): void;
+  deleteModule(editorID: number[]): void;
+  duplicateModule(editorID: number[]): number;
 }
 
 const mapStateToProps = (state: IRootState) => ({

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

@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { ConfigPanel, ResizePanel } from "@ax/components";
-import { IBreadcrumbItem, INotification, IRootState, ISchema, IUserEditing } from "@ax/types";
+import { IBreadcrumbItem, IModule, INotification, IRootState, ISchema, IUserEditing } from "@ax/types";
 import PageBrowser from "../PageBrowser";
 
 const Editor = (props: IProps) => {
@@ -88,15 +88,15 @@ interface IEditorStateProps {
 interface IPageBrowserDispatchProps {
   setSelectedContent(editorID: number): void;
   setSelectedTab(tab: string): void;
-  deleteModule(editorID: number, key?: string): void;
-  duplicateModule(editorID: number, key?: string): Promise<number>;
+  deleteModule(editorID: number[], key?: string): void;
+  duplicateModule(editorID: number[], key?: string): number;
   addComponent: (componentType: any, key: string) => void;
   addModule: (moduleType: string, key: string, selectedID: number, isComponentModule?: boolean) => void;
-  moveElement(moduleID: number, selectedContent: any, newIndex: number, key: string): void;
+  moveElement(moduleID: number[], selectedContent: any, newIndex: number, key: string): void;
   replaceModule(module: any, parent: any, objKey: string): void;
   replaceElementsInCollection(newValue: string, reference: string): void;
-  copyModule(editorID: number): boolean;
-  pasteModule(editorID: number, key: string): Promise<{ error?: INotification }>;
+  copyModule(editorID: number[]): boolean;
+  pasteModule(editorID: number, key: string, modulesToPaste: IModule[]): Promise<{ error?: INotification }>;
   setNotification: (notification: INotification) => void;
   isGlobal: boolean;
   isEditable: boolean;

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

@@ -65,8 +65,8 @@ interface IPageBrowserDispatchProps {
   isReadOnly: boolean;
   isPreview?: boolean;
   browserRef?: any;
-  deleteModule(editorID: number): void;
-  duplicateModule(editorID: number): Promise<number>;
+  deleteModule(editorID: number[]): void;
+  duplicateModule(editorID: number[]): number;
 }
 
 type IProps = IPageBrowserStateProps & IPageBrowserDispatchProps;

package/src/modules/Navigation/Defaults/DefaultsEditor/Editor/index.tsx

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { navigationActions } from "@ax/containers/Navigation/Defaults";
 
 import { ResizePanel, ConfigPanel } from "@ax/components";
-import { IBreadcrumbItem, INotification, IRootState, ISchema, ISite } from "@ax/types";
+import { IBreadcrumbItem, IModule, INotification, IRootState, ISchema, ISite } from "@ax/types";
 import DefaultsBrowser from "./DefaultsBrowser";
 
 const Editor = (props: IProps) => {
@@ -85,15 +85,15 @@ interface IEditorStateProps {
 interface IPageBrowserDispatchProps {
   setSelectedContent(editorID: number): void;
   setSelectedTab(tab: string): void;
-  deleteModule(editorID: number, key?: string): void;
-  duplicateModule(editorID: number, key?: string): Promise<number>;
+  deleteModule(editorID: number[], key?: string): void;
+  duplicateModule(editorID: number[], key?: string): number;
   addComponent(componentType: any, key: string): void;
   addModule(type: string, key: string, selectedID: number, isComponentModule?: boolean): void;
   replaceModule(module: any, parent: any, objKey: string): void;
   replaceElementsInCollection(newValue: string, reference: string): void;
-  moveModule(moduleID: number, selectedContent: any, newIndex: number, key: string): void;
-  copyModule(editorID: number): boolean;
-  pasteModule(editorID: number, key: string): Promise<{ error?: INotification }>;
+  moveModule(moduleID: number[], selectedContent: any, newIndex: number, key: string): void;
+  copyModule(editorID: number[]): boolean;
+  pasteModule(editorID: number, key: string, modulesToPaste: IModule[]): Promise<{ error?: INotification }>;
   setNotification: (notification: INotification) => void;
   browserRef?: React.RefObject<HTMLDivElement>;
 }

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

@@ -5,7 +5,7 @@ import { pageEditorActions } from "@ax/containers/PageEditor";
 import { sitesActions } from "@ax/containers/Sites";
 import { appActions } from "@ax/containers/App";
 import { ConfigPanel, ResizePanel } from "@ax/components";
-import { IBreadcrumbItem, INotification, IRootState, ISchema, ISite, IUserEditing } from "@ax/types";
+import { IBreadcrumbItem, IModule, INotification, IRootState, ISchema, ISite, IUserEditing } from "@ax/types";
 import PageBrowser from "../PageBrowser";
 
 const Editor = (props: IProps) => {
@@ -123,18 +123,18 @@ interface IEditorStateProps {
 interface IPageBrowserDispatchProps {
   setSelectedContent(editorID: number): void;
   setSelectedTab(tab: string): void;
-  deleteModule(editorID: number, key?: string): void;
-  duplicateModule(editorID: number, key?: string): Promise<number>;
+  deleteModule(editorID: number[], key?: string): void;
+  duplicateModule(editorID: number[], key?: string): number;
   addComponent: (componentType: any, key: string) => void;
   addModule: (moduleType: string, key: string, selectedID: number, isComponentModule?: boolean) => void;
-  moveElement(moduleID: number, selectedContent: any, newIndex: number, key: string): void;
+  moveElement(moduleID: number[], selectedContent: any, newIndex: number, key: string): void;
   replaceModule(module: any, parent: any, objKey: string): void;
-  replaceElementsInCollection(newValue: string, reference: string): void;
+  replaceElementsInCollection(newValue: string, reference?: string): void;
   setHistoryPush(path: string, isEditor: boolean): void;
   getGlobalFromLocalPage(): void;
   saveCurrentSiteInfo(): void;
-  copyModule(editorID: number): boolean;
-  pasteModule(editorID: number, key: string): Promise<{ error?: INotification }>;
+  copyModule(editorID: number[]): boolean;
+  pasteModule(editorID: number, key: string, modulesToPaste: IModule[]): Promise<{ error?: INotification }>;
   setNotification: (notification: INotification) => void;
   restorePageNavigation: (key: string) => void;
   isTemplateActivated: boolean;

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

@@ -75,8 +75,8 @@ interface IPageBrowserDispatchProps {
   isReadOnly: boolean;
   isPreview?: boolean;
   browserRef?: any;
-  deleteModule(editorID: number): void;
-  duplicateModule(editorID: number): Promise<number>;
+  deleteModule(editorID: number[]): void;
+  duplicateModule(editorID: number[]): number;
 }
 
 type IProps = IPageBrowserStateProps & IPageBrowserDispatchProps;

package/src/modules/Users/UserForm/index.tsx

@@ -290,42 +290,60 @@ const UserForm = (props: IProps) => {
           disabled={isEditDisabled}
         />
         {isSiteView ? (
-          <>
-            <S.SettingsWrapper>
-              <S.HeadingWrapper>
-                <S.Heading>Roles Assigned</S.Heading>
-                {(!siteSelectedRoles || siteSelectedRoles.roles.length === 0) && (
-                  <Button type="button" buttonStyle="text" onClick={toggleRoleModal} icon="addCircle">
-                    Add Role
+          isSuperAdmin ? (
+            <>
+              <S.SettingsWrapper>
+                <S.Heading>Roles assigned</S.Heading>
+                <S.SettingContent>
+                  <OptionItem
+                    name="superadmin"
+                    title="Super admin"
+                    description="You can manage all aspects of your site, including inviting people and managing their permissions."
+                    onChange={toggleSuperAdmin}
+                    value={isSuperAdmin}
+                    readOnly={readOnlySites}
+                  />
+                </S.SettingContent>
+              </S.SettingsWrapper>
+            </>
+          ) : (
+            <>
+              <S.SettingsWrapper>
+                <S.HeadingWrapper>
+                  <S.Heading>Roles Assigned</S.Heading>
+                  {(!siteSelectedRoles || siteSelectedRoles.roles.length === 0) && (
+                    <Button type="button" buttonStyle="text" onClick={toggleRoleModal} icon="addCircle">
+                      Add Role
+                    </Button>
+                  )}
+                </S.HeadingWrapper>
+                <S.SettingContent>
+                  <S.SettingText>You can add a one or more roles to this user.</S.SettingText>
+                </S.SettingContent>
+              </S.SettingsWrapper>
+              <S.RoleList>
+                {siteSelectedRoles &&
+                  siteSelectedRoles.roles.map((siteRoleId: number) => {
+                    const role = roles.find((role: IRole) => role.id === siteRoleId);
+                    return role && <RoleItem key={role.name} role={role} isReadOnly={true} />;
+                  })}
+                {siteSelectedRoles && siteSelectedRoles.roles.length > 0 && (
+                  <Button type="button" buttonStyle="line" onClick={toggleRoleModal}>
+                    Manage user roles
                   </Button>
                 )}
-              </S.HeadingWrapper>
-              <S.SettingContent>
-                <S.SettingText>You can add a one or more roles to this user.</S.SettingText>
-              </S.SettingContent>
-            </S.SettingsWrapper>
-            <S.RoleList>
-              {siteSelectedRoles &&
-                siteSelectedRoles.roles.map((siteRoleId: number) => {
-                  const role = roles.find((role: IRole) => role.id === siteRoleId);
-                  return role && <RoleItem key={role.name} role={role} isReadOnly={true} />;
-                })}
-              {siteSelectedRoles && siteSelectedRoles.roles.length > 0 && (
-                <Button type="button" buttonStyle="line" onClick={toggleRoleModal}>
-                  Manage user roles
-                </Button>
-              )}
-            </S.RoleList>
-            <RolesModal
-              isOpen={isOpenRoleModal}
-              toggleModal={toggleRoleModal}
-              roles={roles}
-              addRoles={handleAddSiteRoles}
-              selectedRoles={siteSelectedRoles ? siteSelectedRoles.roles : []}
-              allSites={siteSelectedRoles && siteSelectedRoles.siteId === "all"}
-              isGlobal={false}
-            />
-          </>
+              </S.RoleList>
+              <RolesModal
+                isOpen={isOpenRoleModal}
+                toggleModal={toggleRoleModal}
+                roles={roles}
+                addRoles={handleAddSiteRoles}
+                selectedRoles={siteSelectedRoles ? siteSelectedRoles.roles : []}
+                allSites={siteSelectedRoles && siteSelectedRoles.siteId === "all"}
+                isGlobal={false}
+              />
+            </>
+          )
         ) : (
           <>
             {!readOnlySites && (

package/src/types/index.tsx

@@ -624,6 +624,7 @@ export interface IComponent {
   component: string;
   editorID: number;
   parentEditorID: number;
+  [key: string]: any;
 }
 
 export interface IErrorItem {