@griddo/ax 11.10.11-rc.0 → 11.10.11

package/src/modules/ActivityLog/DownloadModal/index.tsx

@@ -7,98 +7,98 @@ import { IDownloadFormState } from "..";
 import * as S from "./style";
 
 const DownloadModal = (props: IDownloadModalProps) => {
-  const { isOpen, toggleModal, mainModalAction, form, setForm } = props;
+	const { isOpen, toggleModal, mainModalAction, form, setForm } = props;
 
-  const setDateRange = (dateRange: string) => setForm((state) => ({ ...state, dateRange }));
-  const setStartDate = (startDate: string) => setForm((state) => ({ ...state, startDate }));
-  const setEndDate = (endDate: string) => setForm((state) => ({ ...state, endDate }));
-  const setStartTime = (startTime: string) => setForm((state) => ({ ...state, startTime }));
-  const setMaxEvents = (maxEvents: number) => setForm((state) => ({ ...state, maxEvents }));
-  const setFormat = (format: string) => setForm((state) => ({ ...state, format }));
+	const setDateRange = (dateRange: string) => setForm((state) => ({ ...state, dateRange }));
+	const setStartDate = (startDate: string) => setForm((state) => ({ ...state, startDate }));
+	const setEndDate = (endDate: string) => setForm((state) => ({ ...state, endDate }));
+	const setStartTime = (startTime: string) => setForm((state) => ({ ...state, startTime }));
+	const setMaxEvents = (maxEvents: number) => setForm((state) => ({ ...state, maxEvents }));
+	const setFormat = (format: string) => setForm((state) => ({ ...state, format }));
 
-  const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
 
-  const rangeOptions = [
-    { name: "7days", value: "7", title: "Last 7 days" },
-    { name: "30days", value: "30", title: "Last 30 days" },
-    { name: "custom", value: "custom", title: "Custom date" },
-  ];
+	const rangeOptions = [
+		{ name: "7days", value: "7", title: "Last 7 days" },
+		{ name: "30days", value: "30", title: "Last 30 days" },
+		{ name: "custom", value: "custom", title: "Custom date" },
+	];
 
-  const formatOptions = [
-    { name: "csv", value: "csv", title: ".csv" },
-    { name: "xlsx", value: "xlsx", title: ".xlsx" },
-  ];
+	const formatOptions = [
+		{ name: "csv", value: "csv", title: ".csv" },
+		{ name: "xlsx", value: "xlsx", title: ".xlsx" },
+	];
 
-  return (
-    <Modal
-      isOpen={isOpen}
-      hide={toggleModal}
-      title="Download User activity log"
-      secondaryAction={secondaryModalAction}
-      mainAction={mainModalAction}
-      size="S"
-      height={573}
-    >
-      <S.ModalContent>
-        <FieldsBehavior
-          title="Range"
-          name="dateRange"
-          fieldType="RadioGroup"
-          options={rangeOptions}
-          value={form.dateRange}
-          onChange={setDateRange}
-        />
-        {form.dateRange === "custom" && (
-          <S.CustomDateWrapper>
-            <FieldsBehavior
-              title="Start date"
-              name="startDate"
-              fieldType="DateField"
-              value={form.startDate}
-              onChange={setStartDate}
-              pastDate={true}
-            />
-            <FieldsBehavior
-              title="End date"
-              name="endDate"
-              fieldType="DateField"
-              value={form.endDate}
-              onChange={setEndDate}
-              pastDate={true}
-            />
-          </S.CustomDateWrapper>
-        )}
-        <FieldsBehavior
-          title="Start time"
-          name="startTime"
-          fieldType="TimeField"
-          value={form.startTime}
-          onChange={setStartTime}
-          helptext="12 hour time format"
-        />
-        <FieldsBehavior
-          title="Max Events number"
-          name="maxEvents"
-          fieldType="NumberField"
-          value={form.maxEvents}
-          onChange={setMaxEvents}
-        />
-        <FieldsBehavior
-          title="Format"
-          name="format"
-          fieldType="RadioGroup"
-          options={formatOptions}
-          value={form.format}
-          onChange={setFormat}
-        />
-      </S.ModalContent>
-    </Modal>
-  );
+	return (
+		<Modal
+			isOpen={isOpen}
+			hide={toggleModal}
+			title="Download User activity log"
+			secondaryAction={secondaryModalAction}
+			mainAction={mainModalAction}
+			size="S"
+			height={573}
+		>
+			<S.ModalContent>
+				<FieldsBehavior
+					title="Range"
+					name="dateRange"
+					fieldType="RadioGroup"
+					options={rangeOptions}
+					value={form.dateRange}
+					onChange={setDateRange}
+				/>
+				{form.dateRange === "custom" && (
+					<S.CustomDateWrapper>
+						<FieldsBehavior
+							title="Start date"
+							name="startDate"
+							fieldType="DateField"
+							value={form.startDate}
+							onChange={setStartDate}
+							pastDate={true}
+						/>
+						<FieldsBehavior
+							title="End date"
+							name="endDate"
+							fieldType="DateField"
+							value={form.endDate}
+							onChange={setEndDate}
+							pastDate={true}
+						/>
+					</S.CustomDateWrapper>
+				)}
+				<FieldsBehavior
+					title="Start time"
+					name="startTime"
+					fieldType="TimeField"
+					value={form.startTime}
+					onChange={setStartTime}
+					helptext="12 hour time format"
+				/>
+				<FieldsBehavior
+					title="Max Events number"
+					name="maxEvents"
+					fieldType="NumberField"
+					value={form.maxEvents}
+					onChange={setMaxEvents}
+				/>
+				<FieldsBehavior
+					title="Format"
+					name="format"
+					fieldType="RadioGroup"
+					options={formatOptions}
+					value={form.format}
+					onChange={setFormat}
+				/>
+			</S.ModalContent>
+		</Modal>
+	);
 };
 
 interface IDownloadModalProps extends IModal {
-  form: IDownloadFormState;
-  setForm: React.Dispatch<React.SetStateAction<IDownloadFormState>>;
+	form: IDownloadFormState;
+	setForm: React.Dispatch<React.SetStateAction<IDownloadFormState>>;
 }
 
 export default DownloadModal;

package/src/modules/ActivityLog/ItemGroup/index.tsx

@@ -4,24 +4,24 @@ import { dateToString } from "@ax/helpers";
 import * as S from "./style";
 
 const ItemGroup = (props: IItemGroupProps) => {
-  const { date, children, count } = props;
-  const dateTitle = dateToString(new Date(date), "MMM d yyyy");
+	const { date, children, count } = props;
+	const dateTitle = dateToString(new Date(date), "MMM d yyyy");
 
-  return (
-    <S.Wrapper>
-      <S.Header>
-        <S.DateWrapper>{dateTitle}</S.DateWrapper>
-        <S.CounterWrapper>{count} events</S.CounterWrapper>
-      </S.Header>
-      <S.ItemList>{children}</S.ItemList>
-    </S.Wrapper>
-  );
+	return (
+		<S.Wrapper>
+			<S.Header>
+				<S.DateWrapper>{dateTitle}</S.DateWrapper>
+				<S.CounterWrapper>{count} events</S.CounterWrapper>
+			</S.Header>
+			<S.ItemList>{children}</S.ItemList>
+		</S.Wrapper>
+	);
 };
 
 interface IItemGroupProps {
-  children: JSX.Element[];
-  date: string;
-  count: number;
+	children: JSX.Element[];
+	date: string;
+	count: number;
 }
 
 export default ItemGroup;

package/src/modules/ActivityLog/ItemLog/EventItem/index.tsx

@@ -17,151 +17,151 @@ import { getContentTypeSchemaVersion, getPageSchemaVersion } from "../../utils";
 import * as S from "./style";
 
 const EventItem = (props: IEventItemProps) => {
-  const { item, schemaVersion, restorePage, restoreNavigation, restoreStructuredData, goToLogContent, getLog } = props;
-  const { user, created, site, contentType, content, eventType } = item;
-
-  const { isOpen: isDetailOpen, toggleModal: toggleDetailModal } = useModal();
-  const { isOpen: isRestoreOpen, toggleModal: toggleRestoreModal } = useModal();
-  const [schemaChange, setSchemaChange] = useState(false);
-
-  const isDeleteEvent = eventType?.internal_key ? eventType.internal_key.includes("DELETED") : false;
-
-  const restoreByContent = async (type: string, id: number) => {
-    switch (type) {
-      case eventKey.DELETED_PAGE:
-      case eventKey.DELETED_CONTENT_TYPE_PAGE:
-        return await restorePage(id);
-      case eventKey.DELETED_HEADER:
-        return await restoreNavigation(id, "header");
-      case eventKey.DELETED_FOOTER:
-        return await restoreNavigation(id, "footer");
-      case eventKey.DELETED_CATEGORY:
-      case eventKey.DELETED_CONTENT_TYPE:
-        return await restoreStructuredData(id);
-      default:
-        return false;
-    }
-  };
-
-  const handleRestore = async () => {
-    const contentID = contentType?.id || content?.id;
-    if (contentID && eventType?.internal_key) {
-      const isRestored = await restoreByContent(eventType.internal_key, contentID);
-      if (isRestored) {
-        getLog();
-        isRestoreOpen && toggleRestoreModal();
-        isDetailOpen && toggleDetailModal();
-      }
-    }
-  };
-
-  const handleDetailRestorePage = async () => {
-    const contentID = contentType?.id || content?.id || null;
-    const hasSchemaVersion = [
-      eventKey.DELETED_PAGE,
-      eventKey.DELETED_CONTENT_TYPE_PAGE,
-      eventKey.DELETED_CONTENT_TYPE,
-    ].includes(eventType?.internal_key || "");
-
-    if (contentID && hasSchemaVersion) {
-      const pageSchemaVersion =
-        eventType?.internal_key === eventKey.DELETED_CONTENT_TYPE
-          ? await getContentTypeSchemaVersion(contentID)
-          : await getPageSchemaVersion(contentID);
-      if (schemaVersion !== pageSchemaVersion) {
-        setSchemaChange(true);
-      } else {
-        setSchemaChange(false);
-      }
-    }
-
-    toggleRestoreModal();
-  };
-
-  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
-    const siteID = site?.id || null;
-    goToLogContent(contentType, content, siteID);
-  };
-
-  const handleKeyDown = () => {
-    const siteID = site?.id || null;
-    goToLogContent(contentType, content, siteID);
-  };
-
-  return (
-    <>
-      <S.Item onClick={toggleDetailModal}>
-        <S.User>
-          <S.AvatarWrapper>
-            <Avatar image={user.image} name={user.name || ""} />
-          </S.AvatarWrapper>
-          <S.Name>{user.name}</S.Name>
-        </S.User>
-        <S.Time>{created.hour}</S.Time>
-        <S.Site>
-          <Tag
-            text={site && site.name ? site.name : "Global"}
-            type="square"
-            color={site ? undefined : "#C3F4FF"}
-            textColor="rgba(32, 34, 76, 0.6)"
-          />
-        </S.Site>
-        <S.ContentType>
-          {!!contentType && <Tag text={contentType.content?.title || ""} color="#E6E7F8" small={true} />}
-        </S.ContentType>
-        <S.Event>
-          {eventType?.name || ""}{" "}
-          <span
-            onClick={!isDeleteEvent ? handleClick : undefined}
-            role="button"
-            tabIndex={0}
-            onKeyDown={!isDeleteEvent ? handleKeyDown : undefined}
-          >
-            {content?.title || contentType?.title || ""}
-          </span>
-        </S.Event>
-      </S.Item>
-      <DetailModal
-        isOpen={isDetailOpen}
-        toggleModal={toggleDetailModal}
-        itemLog={item}
-        restorePage={handleDetailRestorePage}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-      />
-      {isRestoreOpen && (
-        <RestoreModal
-          isOpen={isRestoreOpen}
-          toggleModal={toggleRestoreModal}
-          isChild={true}
-          hasIssues={schemaChange}
-          restorePage={handleRestore}
-        />
-      )}
-    </>
-  );
+	const { item, schemaVersion, restorePage, restoreNavigation, restoreStructuredData, goToLogContent, getLog } = props;
+	const { user, created, site, contentType, content, eventType } = item;
+
+	const { isOpen: isDetailOpen, toggleModal: toggleDetailModal } = useModal();
+	const { isOpen: isRestoreOpen, toggleModal: toggleRestoreModal } = useModal();
+	const [schemaChange, setSchemaChange] = useState(false);
+
+	const isDeleteEvent = eventType?.internal_key ? eventType.internal_key.includes("DELETED") : false;
+
+	const restoreByContent = async (type: string, id: number) => {
+		switch (type) {
+			case eventKey.DELETED_PAGE:
+			case eventKey.DELETED_CONTENT_TYPE_PAGE:
+				return await restorePage(id);
+			case eventKey.DELETED_HEADER:
+				return await restoreNavigation(id, "header");
+			case eventKey.DELETED_FOOTER:
+				return await restoreNavigation(id, "footer");
+			case eventKey.DELETED_CATEGORY:
+			case eventKey.DELETED_CONTENT_TYPE:
+				return await restoreStructuredData(id);
+			default:
+				return false;
+		}
+	};
+
+	const handleRestore = async () => {
+		const contentID = contentType?.id || content?.id;
+		if (contentID && eventType?.internal_key) {
+			const isRestored = await restoreByContent(eventType.internal_key, contentID);
+			if (isRestored) {
+				getLog();
+				isRestoreOpen && toggleRestoreModal();
+				isDetailOpen && toggleDetailModal();
+			}
+		}
+	};
+
+	const handleDetailRestorePage = async () => {
+		const contentID = contentType?.id || content?.id || null;
+		const hasSchemaVersion = [
+			eventKey.DELETED_PAGE,
+			eventKey.DELETED_CONTENT_TYPE_PAGE,
+			eventKey.DELETED_CONTENT_TYPE,
+		].includes(eventType?.internal_key || "");
+
+		if (contentID && hasSchemaVersion) {
+			const pageSchemaVersion =
+				eventType?.internal_key === eventKey.DELETED_CONTENT_TYPE
+					? await getContentTypeSchemaVersion(contentID)
+					: await getPageSchemaVersion(contentID);
+			if (schemaVersion !== pageSchemaVersion) {
+				setSchemaChange(true);
+			} else {
+				setSchemaChange(false);
+			}
+		}
+
+		toggleRestoreModal();
+	};
+
+	const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+		e.stopPropagation();
+		const siteID = site?.id || null;
+		goToLogContent(contentType, content, siteID);
+	};
+
+	const handleKeyDown = () => {
+		const siteID = site?.id || null;
+		goToLogContent(contentType, content, siteID);
+	};
+
+	return (
+		<>
+			<S.Item onClick={toggleDetailModal}>
+				<S.User>
+					<S.AvatarWrapper>
+						<Avatar image={user.image} name={user.name || ""} />
+					</S.AvatarWrapper>
+					<S.Name>{user.name}</S.Name>
+				</S.User>
+				<S.Time>{created.hour}</S.Time>
+				<S.Site>
+					<Tag
+						text={site && site.name ? site.name : "Global"}
+						type="square"
+						color={site ? undefined : "#C3F4FF"}
+						textColor="rgba(32, 34, 76, 0.6)"
+					/>
+				</S.Site>
+				<S.ContentType>
+					{!!contentType && <Tag text={contentType.content?.title || ""} color="#E6E7F8" small={true} />}
+				</S.ContentType>
+				<S.Event>
+					{eventType?.name || ""}{" "}
+					<span
+						onClick={!isDeleteEvent ? handleClick : undefined}
+						role="button"
+						tabIndex={0}
+						onKeyDown={!isDeleteEvent ? handleKeyDown : undefined}
+					>
+						{content?.title || contentType?.title || ""}
+					</span>
+				</S.Event>
+			</S.Item>
+			<DetailModal
+				isOpen={isDetailOpen}
+				toggleModal={toggleDetailModal}
+				itemLog={item}
+				restorePage={handleDetailRestorePage}
+				onClick={handleClick}
+				onKeyDown={handleKeyDown}
+			/>
+			{isRestoreOpen && (
+				<RestoreModal
+					isOpen={isRestoreOpen}
+					toggleModal={toggleRestoreModal}
+					isChild={true}
+					hasIssues={schemaChange}
+					restorePage={handleRestore}
+				/>
+			)}
+		</>
+	);
 };
 
 interface IEventItemProps {
-  item: LogActivityDTO;
-  schemaVersion: string;
-  restorePage(id: number): Promise<boolean>;
-  restoreNavigation(navID: number, type: string): Promise<boolean>;
-  restoreStructuredData(dataID: number): Promise<boolean>;
-  goToLogContent(contentType: LogContentTypeDTO | null, content: LogContentDTO | null, site: number | null): void;
-  getLog(): void;
+	item: LogActivityDTO;
+	schemaVersion: string;
+	restorePage(id: number): Promise<boolean>;
+	restoreNavigation(navID: number, type: string): Promise<boolean>;
+	restoreStructuredData(dataID: number): Promise<boolean>;
+	goToLogContent(contentType: LogContentTypeDTO | null, content: LogContentDTO | null, site: number | null): void;
+	getLog(): void;
 }
 
 const mapStateToProps = (state: IRootState) => ({
-  schemaVersion: state.structuredData.schemaVersion,
+	schemaVersion: state.structuredData.schemaVersion,
 });
 
 const mapDispatchToProps = {
-  restorePage: pageEditorActions.restorePage,
-  restoreNavigation: navigationActions.restoreNavigation,
-  restoreStructuredData: structuredDataActions.restoreStructuredDataContent,
-  goToLogContent: activityLogActions.goToLogContent,
+	restorePage: pageEditorActions.restorePage,
+	restoreNavigation: navigationActions.restoreNavigation,
+	restoreStructuredData: structuredDataActions.restoreStructuredDataContent,
+	goToLogContent: activityLogActions.goToLogContent,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(EventItem);

package/src/modules/ActivityLog/ItemLog/index.tsx

@@ -4,21 +4,21 @@ import ItemGroup from "../ItemGroup";
 import EventItem from "./EventItem";
 
 const ItemLog = (props: IItemLogProps) => {
-  const { items, getLog } = props;
-  const { date, items: dayItems, totalItems } = items;
+	const { items, getLog } = props;
+	const { date, items: dayItems, totalItems } = items;
 
-  return (
-    <ItemGroup date={date} count={totalItems}>
-      {dayItems.map((item) => (
-        <EventItem key={item.id} item={item} getLog={getLog} />
-      ))}
-    </ItemGroup>
-  );
+	return (
+		<ItemGroup date={date} count={totalItems}>
+			{dayItems.map((item) => (
+				<EventItem key={item.id} item={item} getLog={getLog} />
+			))}
+		</ItemGroup>
+	);
 };
 
 interface IItemLogProps {
-  items: LogActivityGroupedDayDTO;
-  getLog(): void;
+	items: LogActivityGroupedDayDTO;
+	getLog(): void;
 }
 
 export default ItemLog;