@griddo/ax 11.10.41 → 11.10.42

package/src/modules/Sites/SitesList/index.tsx

@@ -35,9 +35,10 @@ import BulkHeader from "./ListView/BulkHeader";
 import ListSiteItem from "./ListView/ListSiteItem";
 import RecentSiteItem from "./RecentSiteItem";
 import SiteModal from "./SiteModal";
-import * as S from "./style";
 import { filterByStatus, getSortedListStatus } from "./utils";
 
+import * as S from "./style";
+
 const SitesList = (props: ISitesListProps): JSX.Element => {
 	const {
 		token,
@@ -79,6 +80,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 	);
 	const [displayMode, setDisplayMode] = useState<string | "list" | "grid">(currentConfig.mode);
 	const [searchQuery, setSearchQuery] = useState<string>("");
+	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const tableRef = useRef<HTMLDivElement>(null);
 	const errorRef = useRef<HTMLDivElement>(null);
 
@@ -147,7 +149,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 	}, [page, searchQuery, filterValues]);
 
 	useEffect(() => {
-		const errorCode = (error && error.code) || undefined;
+		const errorCode = error?.code;
 		if (errorCode === 400 && errorRef.current) {
 			errorRef.current.scrollIntoView();
 		}
@@ -271,6 +273,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 	const selectItems = () => (checkState.isAllSelected ? unselectAllItems() : handleSelectAll());
 
 	const bulkPublishAction = async (isPublish: boolean) => {
+		setIsBulkLoading(true);
 		const { notPublished, published } = selectedItems;
 		const params = getParams();
 
@@ -281,6 +284,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 			await unpublishSitesBulk(published, params);
 		}
 		unselectAllItems();
+		setIsBulkLoading(false);
 	};
 
 	const bulkPublish = () => bulkPublishAction(true);
@@ -301,6 +305,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 			filterValues={currentConfig.filterValues}
 			setHoverCheck={setHoverCheck}
 			selectedItems={selectedItems}
+			isLoading={isBulkLoading}
 		/>
 	);
 

package/src/modules/StructuredData/Form/index.tsx

@@ -364,6 +364,7 @@ const Form = (props: IProps) => {
 				currentPageID={form?.id}
 				errors={errors}
 				scheduledPublication={form?.publicationScheduled}
+				isSaving={isSaving}
 			>
 				{disabledDatapack && (
 					<S.NotificationWrapper>

package/src/modules/StructuredData/StructuredDataList/BulkHeader/index.tsx

@@ -1,4 +1,5 @@
 import { BulkSelectionOptions } from "@ax/components";
+import { itemLabel } from "@ax/constants";
 import type { IBulkSelectedItems } from "@ax/hooks";
 import { usePermission } from "@ax/hooks";
 import type { IColumn, IQueryValue, ISchemaField, IStructuredDataSortedInitialState } from "@ax/types";
@@ -30,6 +31,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
 		exportAction,
 		setHoverCheck,
 		selectedItems,
+		isLoading,
 	} = props;
 
 	const isAllowedToPublishPages = usePermission("global.globalData.publishUnpublishAllGlobalData");
@@ -67,6 +69,8 @@ const BulkHeader = (props: IProps): JSX.Element => {
 			totalItems={totalItems}
 			exportAction={exportAction}
 			selectedItems={selectedItems}
+			isLoading={isLoading}
+			itemLabel={isFromPage ? itemLabel.PAGE_CONTENT_TYPE : itemLabel.SIMPLE_CONTENT_TYPE}
 		/>
 	) : (
 		<TableHeader
@@ -113,6 +117,7 @@ interface IProps {
 	exportAction?(formats: (number | string)[]): void;
 	setHoverCheck: (state: boolean) => void;
 	selectedItems: IBulkSelectedItems;
+	isLoading: boolean;
 }
 
 export default BulkHeader;

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/atoms.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { IModal } from "@ax/types";
-import { Modal, FieldsBehavior } from "@ax/components";
+import type { IModal } from "@ax/types";
+import { Modal, FieldsBehavior, ErrorToast } from "@ax/components";
 import { slugify } from "@ax/helpers";
 
 import * as S from "./style";
@@ -87,6 +87,7 @@ const DuplicateModal = (props: IDuplicateModal): JSX.Element => {
 			mainAction={mainModalAction}
 			size="M"
 		>
+			<ErrorToast />
 			<S.ModalContent>
 				<FieldsBehavior
 					fieldType="TextField"

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/index.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useState } from "react";
 import { connect } from "react-redux";
 import { useTheme } from "styled-components";
 
-import {
+import type {
 	ICheck,
 	IAvailableSites,
 	ISavePageParams,
@@ -15,7 +15,7 @@ import {
 } from "@ax/types";
 import { getHumanLastModifiedDate, getScheduleFormatDate, getStructuredDataTitle, trimText } from "@ax/helpers";
 import { appActions } from "@ax/containers/App";
-import { pageStatus, ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
+import { pageStatus, type ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
 import {
 	CheckField,
 	FloatingMenu,
@@ -204,9 +204,11 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 	};
 
 	const handleDuplicatePage = async () => {
-		await duplicatePage(globalPage.id, duplicateModalState);
-		toggleDuplicateModal();
-		setHistoryPush("data/pages/editor", true);
+		const isDuplicated = await duplicatePage(globalPage.id, duplicateModalState);
+		if (isDuplicated) {
+			toggleDuplicateModal();
+			setHistoryPush("data/pages/editor", true);
+		}
 	};
 
 	let menuOptions = [];
@@ -286,12 +288,18 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 
 	menuOptions = globalPage.liveStatus?.status === pageStatus.PUBLISHED ? [viewOption, ...menuOptions] : menuOptions;
 
+	const handleCloseDuplicate = () => {
+		toggleDuplicateModal();
+		setDuplicateModalState({ title: "", slug: "" });
+	};
+
 	const mainDuplicateModalAction = {
 		title: "Duplicate",
 		onClick: handleDuplicatePage,
 		disabled: !duplicateModalState.title.trim() || !duplicateModalState.slug.trim() || isSaving,
 	};
-	const secondaryDuplicateModalAction = { title: "Cancel", onClick: toggleDuplicateModal };
+
+	const secondaryDuplicateModalAction = { title: "Cancel", onClick: handleCloseDuplicate };
 
 	const isTranslated = globalPage.pageLanguages.length > 1;
 
@@ -331,9 +339,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 
 		const selectedPageLanguage = getSelectedPageLanguage(language);
 
-		selectedPageLanguage
-			? setCurrentPageID(selectedPageLanguage.pageId)
-			: languageActions.createNewTranslation && languageActions.createNewTranslation(true);
+		selectedPageLanguage ? setCurrentPageID(selectedPageLanguage.pageId) : languageActions.createNewTranslation?.(true);
 
 		setHistoryPush("data/pages/editor", true);
 	};
@@ -362,7 +368,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 		"Not translatable"
 	);
 
-	const availableSiteNames = availableSites && availableSites.map((site: IAvailableSites) => site.name);
+	const availableSiteNames = availableSites?.map((site: IAvailableSites) => site.name);
 
 	const getLiveStatus = () => (isScheduledPub ? "scheduled" : haveDraftPage ? "modified" : liveStatus.status);
 
@@ -373,7 +379,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 			return <React.Fragment key={col.key} />;
 		}
 
-		const type: any = structuredDataContent && structuredDataContent[col.key];
+		const type: any = structuredDataContent?.[col.key];
 
 		if (typeof type !== "object") {
 			return (

package/src/modules/StructuredData/StructuredDataList/index.tsx

@@ -128,6 +128,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 	const [structuredDataType, setStructuredDataType] = useState("all");
 
 	const [isScrolling, setIsScrolling] = useState(false);
+	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [deletedItem, setDeletedItem] = useState<number | number[] | null>(null);
 	const { isVisible: isDataToast, toggleToast: toggleDataToast, setIsVisible: setIsDataToast } = useToast();
 	const { isVisible: isPageToast, toggleToast: togglePageToast, setIsVisible: setIsPageToast } = useToast();
@@ -392,6 +393,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 	};
 
 	const bulkPublishPage = async (isPublish: boolean) => {
+		setIsBulkLoading(true);
 		const { notPublished, published, drafts } = selectedItems;
 
 		if (drafts && drafts.length > 0) {
@@ -420,11 +422,14 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 
 		handleGetGlobalPages();
 		unselectAllItems();
+		setIsBulkLoading(false);
 	};
 
 	const bulkPublishData = (status: string) => {
+		setIsBulkLoading(true);
 		setDataStatus(selectedItems.all, status);
 		unselectAllItems();
+		setIsBulkLoading(false);
 	};
 
 	const bulkFilter = (bulkSelection: number[]) => filterByStatus(bulkSelection, currentSitePages);
@@ -496,6 +501,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 			checkState={checkState}
 			isScrolling={isScrolling}
 			isEditable={isDataEditable}
+			isLoading={isBulkLoading}
 			isFromPage={isStructuredDataFromPage}
 			sortItems={sortItems}
 			sortedListStatus={sortedListStatus}

package/src/modules/Users/Roles/BulkHeader/index.tsx

@@ -1,4 +1,5 @@
 import { BulkSelectionOptions } from "@ax/components";
+import { itemLabel } from "@ax/constants";
 import type { IBulkSelectedItems } from "@ax/hooks";
 import type { IQueryValue, IRole } from "@ax/types";
 
@@ -21,6 +22,7 @@ const BulkHeader = (props: IBulkHeaderProps): JSX.Element => {
 		selectedRoles,
 		setHoverCheck,
 		selectedItems,
+		isLoading,
 	} = props;
 
 	const deactivatedSelectedRoles = roles.filter((role: IRole) => selectedRoles.includes(role.id) && !role.active);
@@ -42,6 +44,8 @@ const BulkHeader = (props: IBulkHeaderProps): JSX.Element => {
 			selectItems={selectItems}
 			totalItems={totalItems}
 			selectedItems={selectedItems}
+			isLoading={isLoading}
+			itemLabel={itemLabel.ROL}
 		/>
 	) : (
 		<TableHeader
@@ -74,6 +78,7 @@ export interface IBulkHeaderProps {
 	selectedRoles: number[];
 	setHoverCheck: (state: boolean) => void;
 	selectedItems: IBulkSelectedItems;
+	isLoading: boolean;
 }
 
 export default BulkHeader;

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

@@ -11,15 +11,17 @@ import BulkHeader from "./BulkHeader";
 import { useFilterQuery, useSortedListStatus } from "./hooks";
 import RoleItem from "./RoleItem";
 import SideModal from "./SideModal";
-import * as S from "./style";
 import { getSortedListStatus } from "./utils";
 
+import * as S from "./style";
+
 const Roles = (props: IRolesProps): JSX.Element => {
 	const { currentSiteInfo, roles, getRoles, navItems, currentNavItem, setHistoryPush, activateRoles } = props;
 
 	const itemsPerPage = 50;
 	const firstPage = 1;
 
+	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [page, setPage] = useState(1);
 	const [isScrolling, setIsScrolling] = useState(false);
 	const [activatedItems, setActivatedItems] = useState<number[]>([]);
@@ -106,6 +108,7 @@ const Roles = (props: IRolesProps): JSX.Element => {
 	};
 
 	const handleActivateRoles = async (roleIds: number[], active: boolean) => {
+		setIsBulkLoading(true);
 		const params = {
 			id: roleIds,
 			siteId,
@@ -117,6 +120,7 @@ const Roles = (props: IRolesProps): JSX.Element => {
 			setActivatedItems(roleIds);
 			toggleToast();
 		}
+		setIsBulkLoading(false);
 	};
 
 	const restorePreviousRoleStatus = async () => {
@@ -156,6 +160,7 @@ const Roles = (props: IRolesProps): JSX.Element => {
 			selectedRoles={selectedItems.all}
 			setHoverCheck={setHoverCheck}
 			selectedItems={selectedItems}
+			isLoading={isBulkLoading}
 		/>
 	);
 

package/src/modules/Users/UserList/BulkHeader/index.tsx

@@ -1,4 +1,5 @@
 import { BulkSelectionOptions } from "@ax/components";
+import { itemLabel } from "@ax/constants";
 import type { IBulkSelectedItems } from "@ax/hooks";
 import { usePermission } from "@ax/hooks";
 import type { IQueryValue, IRole } from "@ax/types";
@@ -22,6 +23,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
 		roles,
 		setHoverCheck,
 		selectedItems,
+		isLoading,
 	} = props;
 
 	const isAllowedToRemoveUsers = usePermission("usersRoles.removeUsers");
@@ -43,6 +45,8 @@ const BulkHeader = (props: IProps): JSX.Element => {
 			selectItems={selectItems}
 			totalItems={totalItems}
 			selectedItems={selectedItems}
+			isLoading={isLoading}
+			itemLabel={itemLabel.USER}
 		/>
 	) : (
 		<TableHeader
@@ -77,6 +81,7 @@ interface IProps {
 	roles: IRole[];
 	setHoverCheck: (state: boolean) => void;
 	selectedItems: IBulkSelectedItems;
+	isLoading: boolean;
 }
 
 export default BulkHeader;

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

@@ -20,10 +20,11 @@ import type { IGetRoles, IGetSitesParams, IQueryValue, IRole, IRootState, ISite,
 
 import BulkHeader from "./BulkHeader";
 import { useFilterQuery, useSortedListStatus } from "./hooks";
-import * as S from "./style";
 import UserItem from "./UserItem";
 import { getSortedListStatus } from "./utils";
 
+import * as S from "./style";
+
 const UserList = (props: IUserListProps): JSX.Element => {
 	const {
 		currentSiteInfo,
@@ -44,6 +45,7 @@ const UserList = (props: IUserListProps): JSX.Element => {
 	const itemsPerPage = 50;
 	const firstPage = 1;
 
+	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [page, setPage] = useState(1);
 	const [isScrolling, setIsScrolling] = useState(false);
 	const [searchQuery, setSearchQuery] = useState<string>("");
@@ -140,16 +142,19 @@ const UserList = (props: IUserListProps): JSX.Element => {
 		currPage: page,
 	};
 
-	const bulkDelete = () => {
+	const bulkDelete = async () => {
+		setIsBulkLoading(true);
 		if (isSiteView) {
 			const siteId = currentSiteInfo.id;
-			removeUsersBulk(siteId, selectedItems.all);
+			await removeUsersBulk(siteId, selectedItems.all);
 		} else {
-			deleteUser(selectedItems.all);
+			await deleteUser(selectedItems.all);
 		}
 		setUSersDeleted(selectedItems.all.length);
 		toggleModal();
 		toggleToast();
+		resetBulkSelection();
+		setIsBulkLoading(false);
 	};
 
 	const rightButtonProps = allowedToCreateUsers
@@ -200,6 +205,7 @@ const UserList = (props: IUserListProps): JSX.Element => {
 			roles={roles}
 			setHoverCheck={setHoverCheck}
 			selectedItems={selectedItems}
+			isLoading={isBulkLoading}
 		/>
 	);
 
@@ -256,8 +262,7 @@ const UserList = (props: IUserListProps): JSX.Element => {
 									<EmptyState message="No users found" />
 								</S.EmptyWrapper>
 							) : (
-								pageUsers &&
-								pageUsers.map((user) => {
+								pageUsers?.map((user) => {
 									const isItemSelected = isSelected(user.id);
 									return (
 										<UserItem
@@ -329,7 +334,7 @@ interface IDispatchProps {
 	getUser(id: number): Promise<void>;
 	setHistoryPush(route: string): void;
 	deleteUser(id: number[]): Promise<boolean>;
-	removeUsersBulk(siteId: number, users: number[]): void;
+	removeUsersBulk(siteId: number, users: number[]): Promise<void>;
 	getRoles(params: IGetRoles, token?: string, hasLoading?: boolean): Promise<void>;
 	getSites(params: IGetSitesParams): Promise<void>;
 }

package/tsconfig.paths.json

@@ -10,6 +10,7 @@
 			"@ax/forms": ["src/forms"],
 			"@ax/guards": ["src/guards"],
 			"@ax/helpers": ["src/helpers"],
+			"@ax/helpers/*": ["src/helpers/*"],
 			"@ax/hooks": ["src/hooks"],
 			"@ax/locales": ["src/locales"],
 			"@ax/modules": ["src/modules"],
@@ -18,7 +19,9 @@
 			"@ax/types": ["src/types"],
 			"@ax/schemas": ["src/schemas"],
 			"@ax/services": ["src/services"],
-			"@ax/themes/*": ["src/themes/*"]
+			"@ax/themes/*": ["src/themes/*"],
+			"@ax/constants": ["src/constants"],
+			"@ax/constants/*": ["src/constants/*"]
 		}
 	}
 }