@griddo/ax 11.7.13 → 11.8.0-rc.1

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

@@ -0,0 +1,167 @@
+import React, { useState } from "react";
+import { connect } from "react-redux";
+
+import { LogActivityDTO, LogContentDTO, LogContentTypeDTO } from "@griddo/api-types";
+import { Avatar, Tag, RestoreModal } from "@ax/components";
+import { useModal } from "@ax/hooks";
+import { pageEditorActions } from "@ax/containers/PageEditor";
+import { activityLogActions } from "@ax/containers/ActivityLog";
+import { navigationActions } from "@ax/containers/Navigation";
+import { structuredDataActions } from "@ax/containers/StructuredData";
+import { IRootState } from "@ax/types";
+
+import DetailModal from "../../DetailModal";
+import { eventKey } from "../../constants";
+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 || ""}{" "}
+          <div
+            onClick={!isDeleteEvent ? handleClick : undefined}
+            role="button"
+            tabIndex={0}
+            onKeyDown={!isDeleteEvent ? handleKeyDown : undefined}
+          >
+            {content?.title || contentType?.title || ""}
+          </div>
+        </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;
+}
+
+const mapStateToProps = (state: IRootState) => ({
+  schemaVersion: state.structuredData.schemaVersion,
+});
+
+const mapDispatchToProps = {
+  restorePage: pageEditorActions.restorePage,
+  restoreNavigation: navigationActions.restoreNavigation,
+  restoreStructuredData: structuredDataActions.restoreStructuredDataContent,
+  goToLogContent: activityLogActions.goToLogContent,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(EventItem);

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

@@ -0,0 +1,79 @@
+import styled from "styled-components";
+
+const Item = styled.div`
+  display: flex;
+  background-color: ${(p) => p.theme.color.uiBackground02};
+  border: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  height: ${(p) => p.theme.spacing.l};
+  cursor: pointer;
+  position: relative;
+  :before {
+    content: "";
+    background-color: transparent;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+  &:hover {
+    &:before {
+      background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+    }
+  }
+`;
+
+const User = styled.div`
+  display: flex;
+  align-items: center;
+  width: 24%;
+  padding-left: ${(p) => p.theme.spacing.s};
+`;
+
+const Name = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+`;
+
+const AvatarWrapper = styled.div`
+  margin-right: ${(p) => p.theme.spacing.s};
+`;
+
+const Time = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  width: 8%;
+`;
+
+const Site = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 15%;
+`;
+
+const ContentType = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 15%;
+`;
+
+const Event = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  display: flex;
+  align-items: center;
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  width: 38%;
+  padding-right: ${(p) => p.theme.spacing.s};
+  div {
+    margin-left: ${(p) => p.theme.spacing.xxs};
+    color: ${(p) => p.theme.colors.interactive01};
+  }
+`;
+
+export { Item, User, Name, AvatarWrapper, Time, Site, ContentType, Event };

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { LogActivityGroupedDayDTO } from "@griddo/api-types";
+import ItemGroup from "../ItemGroup";
+import EventItem from "./EventItem";
+
+const ItemLog = (props: IItemLogProps) => {
+  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>
+  );
+};
+
+interface IItemLogProps {
+  items: LogActivityGroupedDayDTO;
+  getLog(): void;
+}
+
+export default ItemLog;

package/src/modules/ActivityLog/ItemLogUser/UserItem/EventItem/index.tsx

@@ -0,0 +1,170 @@
+import React, { useState } from "react";
+import { connect } from "react-redux";
+
+import { LogActivityDTO, LogContentDTO, LogContentTypeDTO } from "@griddo/api-types";
+import { useModal } from "@ax/hooks";
+import { pageEditorActions } from "@ax/containers/PageEditor";
+import { activityLogActions } from "@ax/containers/ActivityLog";
+import { navigationActions } from "@ax/containers/Navigation";
+import { structuredDataActions } from "@ax/containers/StructuredData";
+import { IRootState } from "@ax/types";
+import { RestoreModal } from "@ax/components";
+
+import DetailModal from "./../../../DetailModal";
+import { eventKey } from "./../../../constants";
+import { getContentTypeSchemaVersion, getPageSchemaVersion } from "./../../../utils";
+
+import * as S from "./style";
+
+const EventItem = (props: IEventItemProps) => {
+  const { item, schemaVersion, restorePage, restoreNavigation, restoreStructuredData, goToLogContent, getLog } = props;
+
+  const { 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.ActivityItem onClick={toggleDetailModal}>
+        <S.EventWrapper>
+          <S.Time>{created.hour}</S.Time>
+          <S.Event>
+            {eventType?.name || ""}{" "}
+            <div
+              onClick={!isDeleteEvent ? handleClick : undefined}
+              role="button"
+              tabIndex={0}
+              onKeyDown={!isDeleteEvent ? handleKeyDown : undefined}
+            >
+              {content?.title || contentType?.title || ""}
+            </div>
+          </S.Event>
+        </S.EventWrapper>
+        <S.Site>
+          <S.Label>Site</S.Label>
+          <S.StyledTag
+            text={site ? site.name : "Global"}
+            type="square"
+            color={site ? undefined : "#C3F4FF"}
+            textColor="rgba(32, 34, 76, 0.6)"
+          />
+        </S.Site>
+        <S.ContentType>
+          {!!contentType && (
+            <>
+              <S.Label>Content type</S.Label>
+              <S.StyledTag text={contentType.content?.title || ""} color="#E6E7F8" small={true} />
+            </>
+          )}
+        </S.ContentType>
+      </S.ActivityItem>
+      <DetailModal
+        isOpen={isDetailOpen}
+        toggleModal={toggleDetailModal}
+        itemLog={item}
+        restorePage={handleDetailRestorePage}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+      />
+      {isRestoreOpen && (
+        <RestoreModal
+          isOpen={isRestoreOpen}
+          toggleModal={toggleRestoreModal}
+          isChild={true}
+          restorePage={handleRestore}
+          hasIssues={schemaChange}
+        />
+      )}
+    </>
+  );
+};
+
+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;
+}
+
+const mapStateToProps = (state: IRootState) => ({
+  schemaVersion: state.structuredData.schemaVersion,
+});
+
+const mapDispatchToProps = {
+  restorePage: pageEditorActions.restorePage,
+  restoreNavigation: navigationActions.restoreNavigation,
+  restoreStructuredData: structuredDataActions.restoreStructuredDataContent,
+  goToLogContent: activityLogActions.goToLogContent,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(EventItem);

package/src/modules/ActivityLog/ItemLogUser/UserItem/EventItem/style.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import styled from "styled-components";
+import { Tag } from "@ax/components";
+
+const ActivityItem = styled.div`
+  display: flex;
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+  position: relative;
+  cursor: pointer;
+  &:last-child {
+    margin-bottom: ${(p) => p.theme.spacing.xs};
+  }
+  :before {
+    content: "";
+    background-color: transparent;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+  &:hover {
+    &:before {
+      background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+    }
+  }
+`;
+
+const EventWrapper = styled.div`
+  display: flex;
+  width: 50%;
+`;
+
+const Time = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  width: 56px;
+  flex-shrink: 0;
+`;
+
+const Site = styled.div`
+  display: flex;
+  align-items: center;
+  width: 25%;
+`;
+
+const ContentType = styled.div`
+  display: flex;
+  align-items: center;
+  width: 25%;
+`;
+
+const Event = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  display: flex;
+  align-items: center;
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  flex-grow: 1;
+  div {
+    margin-left: ${(p) => p.theme.spacing.xxs};
+    color: ${(p) => p.theme.colors.interactive01};
+  }
+`;
+
+const Label = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  margin-right: ${(p) => p.theme.spacing.xs};
+`;
+
+const StyledTag = styled((props) => <Tag {...props} />)`
+  margin-bottom: 0;
+`;
+
+export { ActivityItem, EventWrapper, Time, Site, ContentType, Event, Label, StyledTag };

package/src/modules/ActivityLog/ItemLogUser/UserItem/index.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import { Avatar } from "@ax/components";
+import EventItem from "./EventItem";
+
+import * as S from "./style";
+
+const UserItem = (props: IUserItemProps) => {
+  const { user, getLog } = props;
+  const { logActivity, ...userProps } = user;
+  const { image, name } = userProps;
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleToggle = () => setIsOpen((state) => !state);
+
+  const buttonText = isOpen ? "Hide events" : "Show events";
+
+  return (
+    <S.Item>
+      <S.User>
+        <S.AvatarWrapper>
+          <Avatar image={image} name={name || ""} size="s" />
+        </S.AvatarWrapper>
+        <S.Name>{name}</S.Name>
+        {!isOpen && <S.CounterWrapper>{logActivity.length} events created</S.CounterWrapper>}
+        <S.ToggleWrapper>
+          <S.Toggle onClick={handleToggle} isOpen={isOpen}>
+            {buttonText}
+          </S.Toggle>
+        </S.ToggleWrapper>
+      </S.User>
+      <S.EventList isOpen={isOpen}>
+        {logActivity.map((item: any, index: number) => (
+          <EventItem key={index} item={{ ...item, user: userProps }} getLog={getLog} />
+        ))}
+      </S.EventList>
+    </S.Item>
+  );
+};
+
+interface IUserItemProps {
+  user: any;
+  getLog(): void;
+}
+
+export default UserItem;

package/src/modules/ActivityLog/ItemLogUser/UserItem/style.tsx

@@ -0,0 +1,60 @@
+import styled from "styled-components";
+
+const Item = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(p) => p.theme.color.uiBackground02};
+  border: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  min-height: ${(p) => p.theme.spacing.l};
+`;
+
+const User = styled.div`
+  display: flex;
+  align-items: center;
+  padding: ${(p) => `11px ${p.theme.spacing.s} ${p.theme.spacing.xs} ${p.theme.spacing.s}`};
+`;
+
+const Name = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  width: 25%;
+`;
+
+const AvatarWrapper = styled.div`
+  margin-right: ${(p) => p.theme.spacing.s};
+`;
+
+const CounterWrapper = styled.div`
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+`;
+
+const ToggleWrapper = styled.div`
+  margin-left: auto;
+`;
+
+const EventList = styled.div<{ isOpen: boolean }>`
+  display: flex;
+  flex-direction: column;
+  height: ${(p) => (p.isOpen ? "auto" : "0px")};
+  overflow: hidden;
+`;
+
+const Toggle = styled.button<{ isOpen: boolean }>`
+  ${(p) => p.theme.textStyle.uiS};
+  position: relative;
+  padding-right: ${(p) => p.theme.spacing.s};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  &:after {
+    position: absolute;
+    top: 6px;
+    right: 0;
+    content: "";
+    border: solid ${(p) => p.theme.color.interactive01};
+    border-width: 0 2px 2px 0;
+    padding: 3px;
+    transform: ${(p) => (p.isOpen ? `rotate(-135deg) translate(-3px, 0)` : `rotate(45deg) translate(0, -3px)`)};
+  }
+`;
+
+export { Item, User, Name, AvatarWrapper, EventList, CounterWrapper, ToggleWrapper, Toggle };

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

@@ -0,0 +1,25 @@
+import React from "react";
+import ItemGroup from "../ItemGroup";
+import UserItem from "./UserItem";
+
+const ItemLogUser = (props: IItemLogUserProps) => {
+  const { items, getLog } = props;
+  const { date, user: users } = items;
+
+  const count = users.reduce((total: number, user: any) => total + user.logActivity.length, 0);
+
+  return (
+    <ItemGroup date={date} count={count}>
+      {users.map((user: any) => (
+        <UserItem key={user.id} user={user} getLog={getLog} />
+      ))}
+    </ItemGroup>
+  );
+};
+
+interface IItemLogUserProps {
+  items: any;
+  getLog(): void;
+}
+
+export default ItemLogUser;