@griddo/ax 11.7.13 → 11.8.0-rc.0

package/src/modules/ActivityLog/LogFilters/ContentFilter/index.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from "react";
+
+import { CheckGroupFilter } from "@ax/components";
+import { IQueryValue } from "@ax/types";
+import { isReqOk } from "@ax/helpers";
+import { schemas } from "@ax/api";
+
+const ContentFilter = (props: IContentFilterProps): JSX.Element => {
+  const { filterItems, value } = props;
+
+  const filters = [
+    {
+      name: "all",
+      value: "all",
+      title: "ALL",
+    },
+    {
+      name: "none",
+      value: "none",
+      title: "None",
+    },
+  ];
+
+  const [options, setOptions] = useState(filters);
+
+  const getEvents = async () => {
+    try {
+      const items = await schemas.getSchemasSelectAll();
+      if (items && isReqOk(items.status)) {
+        return items.data;
+      }
+    } catch (e) {
+      console.log(e);
+    }
+    return false;
+  };
+
+  useEffect(() => {
+    getEvents()
+      .then((items: { id: string; title: string }[]) => {
+        items &&
+          items.forEach((item) => {
+            const newFilter = {
+              name: item.id,
+              value: item.id,
+              title: item.title,
+            };
+            filters.push(newFilter);
+          });
+
+        setOptions(filters);
+      })
+      .catch((apiError) => console.log(apiError));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <CheckGroupFilter
+      filterItems={filterItems}
+      value={value}
+      pointer="contentTypes"
+      label="Content Type"
+      description="Filter by Content Type"
+      initialState={["all"]}
+      selectAllOption="all"
+      filters={options}
+      menuPosition="center"
+      multipleSelection={true}
+      search={true}
+    />
+  );
+};
+
+export interface IContentFilterProps {
+  filterItems(pointer: string, filter: IQueryValue[]): void;
+  value: IQueryValue[];
+}
+
+export default ContentFilter;

package/src/modules/ActivityLog/LogFilters/DateFilter/index.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from "react";
+import DatePicker, { registerLocale } from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import en from "date-fns/locale/en-GB";
+
+import { IQueryValue } from "@ax/types";
+import { Button, FloatingMenu, Icon } from "@ax/components";
+import { dateToString, stringToDate } from "@ax/helpers";
+
+import * as S from "./style";
+
+const ContentFilter = (props: IContentFilterProps): JSX.Element => {
+  const { filterItems, value } = props;
+
+  const initialState = value?.length ? value[0].label.split("-") : null;
+  const startInitial = initialState ? stringToDate(initialState[0]) : null;
+  const endInitial = initialState ? stringToDate(initialState[1]) : null;
+
+  registerLocale("en", en);
+
+  const [startDate, setStartDate] = useState<Date | null>(startInitial);
+  const [endDate, setEndDate] = useState<Date | null>(endInitial);
+
+  useEffect(() => {
+    if (!value.length) {
+      setStartDate(null);
+      setEndDate(null);
+    }
+  }, [value]);
+
+  const handleChange = (dates: [Date | null, Date | null]) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  const handleClick = () => {
+    if (startDate) {
+      const startString = dateToString(startDate, "yyyy/MM/dd");
+      const startHuman = dateToString(startDate, "MMM d yyyy");
+      const endString = endDate ? dateToString(endDate, "yyyy/MM/dd") : startString;
+      const endHuman = endDate ? dateToString(endDate, "MMM d yyyy") : startHuman;
+      const selectedDate = `${startString}-${endString}`;
+      const label = startHuman !== endHuman ? `${startHuman} - ${endHuman}` : startHuman;
+      filterItems("date", [{ label, value: selectedDate }]);
+    }
+  };
+
+  const isActive = false;
+
+  const Header = () => (
+    <S.StyledHeader isActive={isActive}>
+      Date
+      <S.IconsWrapper>
+        {isActive ? <Icon name="Filter" size="16" /> : <Icon name="DownArrow" size="16" />}
+      </S.IconsWrapper>
+    </S.StyledHeader>
+  );
+
+  return (
+    <FloatingMenu Button={Header} position="left" closeOnSelect={false}>
+      <S.DatePickerWrapper data-testid="dateWrapper">
+        <DatePicker
+          locale={"en"}
+          selected={startDate}
+          onChange={handleChange}
+          startDate={startDate}
+          endDate={endDate}
+          maxDate={new Date()}
+          selectsRange
+          inline
+          disabledKeyboardNavigation
+        />
+      </S.DatePickerWrapper>
+      {!!startDate && (
+        <S.ButtonWrapper>
+          <Button type="button" onClick={handleClick} buttonStyle="minimal">
+            Apply
+          </Button>
+        </S.ButtonWrapper>
+      )}
+    </FloatingMenu>
+  );
+};
+
+export interface IContentFilterProps {
+  filterItems(pointer: string, filter: IQueryValue[]): void;
+  value: IQueryValue[];
+}
+
+export default ContentFilter;

package/src/modules/ActivityLog/LogFilters/DateFilter/style.tsx

@@ -0,0 +1,208 @@
+import styled from "styled-components";
+
+const StyledHeader = styled.div<{ isActive: boolean }>`
+  ${(p) => p.theme.textStyle.uiS};
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column wrap;
+  flex-direction: row;
+  color: ${(p) => (p.isActive ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};
+  width: 100%;
+  justify-content: center;
+  position: relative;
+  &:hover {
+    color: ${(p) => p.theme.color.interactive01};
+  }
+`;
+
+const IconsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  svg {
+    margin-left: 4px;
+  }
+`;
+
+const DatePickerWrapper = styled.div`
+  .react-datepicker-popper,
+  .react-datepicker-popper[data-placement^="bottom"],
+  .react-datepicker-popper[data-placement^="bottom-start"] {
+    margin-top: 0;
+    z-index: 2;
+  }
+
+  .react-datepicker__triangle {
+    display: none;
+  }
+
+  .react-datepicker-wrapper {
+    width: 100%;
+  }
+
+  .react-datepicker {
+    font-family: Source Sans Pro;
+    border: none;
+    min-width: 240px;
+  }
+
+  .react-datepicker__header {
+    background-color: white;
+    border-bottom: 0;
+    padding-top: ${(p) => p.theme.spacing.xs};
+  }
+
+  .react-datepicker__current-month {
+    ${(p) => p.theme.textStyle.headingXS};
+    margin: 0 0 ${(p) => p.theme.spacing.xs} 0;
+  }
+
+  .react-datepicker__navigation {
+    width: ${(p) => p.theme.spacing.m};
+    height: ${(p) => p.theme.spacing.m};
+    border: none;
+    margin-bottom: ${(p) => p.theme.spacing.xs};
+    &:hover {
+      border-radius: 50%;
+      background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+    }
+    &:focus,
+    &:active {
+      outline: 0;
+      -moz-outline-style: none;
+      border: none;
+    }
+
+    .react-datepicker__navigation-icon {
+      display: none;
+    }
+
+    &.react-datepicker__navigation--next {
+      background-image: url(/img/icons/Right-arrow.svg);
+      margin-right: ${(p) => p.theme.spacing.s};
+      margin-top: ${(p) => p.theme.spacing.xxs};
+    }
+
+    &.react-datepicker__navigation--previous {
+      background-image: url(/img/icons/Left-arrow.svg);
+      margin-left: ${(p) => p.theme.spacing.s};
+      margin-top: ${(p) => p.theme.spacing.xxs};
+    }
+  }
+
+  .react-datepicker__day-names {
+    min-width: 240px;
+    .react-datepicker__day-name {
+      line-height: 15px;
+      color: ${(p) => p.theme.color.textMediumEmphasis};
+    }
+  }
+
+  .react-datepicker__month-container {
+    min-width: 240px;
+
+  .react-datepicker__day {
+    font-size: 15px;
+    box-sizing: content-box;
+    border-radius: 50%;
+    :hover :not(.react-datepicker__day--selected) {
+      background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+    }
+    :focus,
+    :active {
+      outline: 0;
+      border-radius: 50%;
+    }
+  }
+
+  .react-datepicker__month {
+    min-width: 240px;
+    margin: ${(p) => p.theme.spacing.xxs} 0 0 0;
+  }
+
+  .react-datepicker__week {
+    margin-bottom: ${(p) => p.theme.spacing.xxs};
+  }
+
+  .react-datepicker__day-name,
+  .react-datepicker__day,
+  .react-datepicker__time-name {
+    margin: 0 ${(p) => p.theme.spacing.xxs};
+  }
+
+  .react-datepicker__day--today {
+    :not(.react-datepicker__day--selected) {
+      color: ${(p) => p.theme.color.interactive01};
+    }
+  }
+
+  .react-datepicker__day--in-range:not(.react-datepicker__day--selected) {
+    background-color:${(p) => p.theme.color.interactive01};
+    border-radius: 0;
+    color: white;
+    &:not(.react-datepicker__day--range-end) {
+      margin: 0;
+      padding: 0 4px;
+    }
+  }
+
+  .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--selected){
+    background-color: #FFF;
+    color: #000;
+  }
+
+  .react-datepicker__day--selected.react-datepicker__day--range-start:not(.react-datepicker__day--range-end){
+    background-color: ${(p) => p.theme.color.interactive01};
+    border-radius: 50% 0 0 50%;
+    margin-right: 0;
+    padding: 0 4px 0 0;
+  }
+
+  .react-datepicker__day--in-range.react-datepicker__day--range-end:not(.react-datepicker__day--range-start) {
+    border-radius: 0 50% 50% 0;
+    margin-left: 0;
+    padding: 0 0 0 4px;
+  }
+
+  .react-datepicker__day--selected {
+    background-color: ${(p) => p.theme.color.interactive01};
+    border-radius: 50%;
+  }
+
+  .react-datepicker__week .react-datepicker__day--in-range:last-of-type,
+  .react-datepicker__week .react-datepicker__day--in-selecting-range:last-of-type {
+    padding-right: 0;
+    margin-right: 4px;
+  }
+
+  .react-datepicker__week .react-datepicker__day--in-range:first-of-type,
+  .react-datepicker__week .react-datepicker__day--in-selecting-range:first-of-type {
+    padding-left: 0;
+    margin-left: 4px;
+  }
+
+  .react-datepicker__day--selected,
+  .react-datepicker__day--in-range.react-datepicker__day--range-end {
+    font-weight: ${(p) => p.theme.fontWeight.semibold}
+    background-color: ${(p) => p.theme.color.interactive01};
+    color: white;
+    :hover {
+      background-color: ${(p) => p.theme.color.interactive01};
+    }
+  }
+
+  .react-datepicker__day--outside-month {
+    color: ${(p) => p.theme.color.textLowEmphasis};
+    &.react-datepicker__day--in-range {
+      color:  ${(p) => p.theme.color.textLowEmphasisInverse};
+    }
+  }
+`;
+
+const ButtonWrapper = styled.div`
+  border-top: 1px solid ${(p) => p.theme.color.uiLine};
+  text-align: center;
+  padding-top: ${(p) => p.theme.spacing.xs};
+`;
+
+export { StyledHeader, IconsWrapper, DatePickerWrapper, ButtonWrapper };

package/src/modules/ActivityLog/LogFilters/EventFilter/index.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from "react";
+
+import { CheckGroupFilter } from "@ax/components";
+import { isReqOk } from "@ax/helpers";
+import { logs } from "@ax/api";
+import { IQueryValue } from "@ax/types";
+
+const EventFilter = (props: IEventFilterProps): JSX.Element => {
+  const { filterItems, value } = props;
+
+  const filters = [
+    {
+      name: "all",
+      value: "all",
+      title: "ALL",
+    },
+  ];
+
+  const [options, setOptions] = useState(filters);
+
+  const getEvents = async () => {
+    try {
+      const items = await logs.getLogActivityEventTypes();
+      if (items && isReqOk(items.status)) {
+        return items.data;
+      }
+    } catch (e) {
+      console.log(e);
+    }
+    return false;
+  };
+
+  useEffect(() => {
+    getEvents()
+      .then((items: IEventType[]) => {
+        items &&
+          items.forEach((item) => {
+            const newFilter = {
+              name: item.id.toString(),
+              value: item.id.toString(),
+              title: item.title,
+            };
+            filters.push(newFilter);
+          });
+
+        setOptions(filters);
+      })
+      .catch((apiError) => console.log(apiError));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <CheckGroupFilter
+      filterItems={filterItems}
+      value={value}
+      pointer="eventTypes"
+      label="Event"
+      description="Filter by Event"
+      initialState={["all"]}
+      selectAllOption="all"
+      filters={options}
+      menuPosition="center"
+      multipleSelection={true}
+      search={true}
+    />
+  );
+};
+
+interface IEventType {
+  id: number;
+  title: string;
+  description: string;
+}
+
+export interface IEventFilterProps {
+  filterItems(pointer: string, filter: IQueryValue[]): void;
+  value: IQueryValue[];
+}
+
+export default EventFilter;

package/src/modules/ActivityLog/LogFilters/OrderFilter/index.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
+
+import * as S from "./style";
+
+const OrderFilter = (props: IStatusFilterProps) => {
+  const { sortItems, isAscending } = props;
+
+  const sortOldest = () => sortItems(true);
+  const sortMostRecent = () => sortItems(false);
+
+  const SortedStateArrow = () =>
+    isAscending ? <Icon name="FullArrowUp" size="16" /> : <Icon name="FullArrowDown" size="16" />;
+
+  const Header = () => (
+    <S.Status data-testid="status-filter-header">
+      Time
+      <S.IconsWrapper>
+        {isAscending ? (
+          <SortedStateArrow />
+        ) : (
+          <S.InteractiveArrow data-testid="status-filter-interactive-arrow">
+            <Icon name="DownArrow" size="16" />
+          </S.InteractiveArrow>
+        )}
+      </S.IconsWrapper>
+    </S.Status>
+  );
+
+  return (
+    <FloatingMenu Button={Header} position="center">
+      <ListTitle>Sort by time</ListTitle>
+      <ListItem isSelected={!isAscending} onClick={sortMostRecent}>
+        Most recent
+      </ListItem>
+      <ListItem isSelected={isAscending} onClick={sortOldest}>
+        Oldest
+      </ListItem>
+    </FloatingMenu>
+  );
+};
+
+export interface IStatusFilterProps {
+  isAscending: boolean;
+  sortItems(isAscendent: boolean): void;
+}
+
+export default OrderFilter;

package/src/modules/ActivityLog/LogFilters/OrderFilter/style.tsx

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+const Status = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column wrap;
+  flex-direction: row;
+  justify-content: center;
+  width: 100%;
+  position: relative;
+  &:hover {
+    color: ${(p) => p.theme.color.interactive01};
+  }
+`;
+
+const IconsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  svg {
+    margin-left: 4px;
+  }
+`;
+
+const InteractiveArrow = styled.div`
+  display: flex;
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.interactive01};
+    }
+  }
+`;
+
+export { Status, IconsWrapper, InteractiveArrow };

package/src/modules/ActivityLog/LogFilters/UserFilter/index.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from "react";
+
+import { CheckGroupFilter } from "@ax/components";
+import { isReqOk } from "@ax/helpers";
+import { users } from "@ax/api";
+import { IQueryValue, IUser } from "@ax/types";
+
+const UserFilter = (props: IUserFilterProps): JSX.Element => {
+  const { filterItems, value } = props;
+
+  const filters = [
+    {
+      name: "all",
+      value: "all",
+      title: "All users (bot not included)",
+    },
+    {
+      name: "bot",
+      value: "bot",
+      title: "View bot events",
+    },
+  ];
+
+  const [options, setOptions] = useState(filters);
+
+  const getUsers = async () => {
+    try {
+      const items = await users.getUsers({ filterQuery: "?order=name-asc" });
+      if (items && isReqOk(items.status)) {
+        return items.data;
+      }
+    } catch (e) {
+      console.log(e);
+    }
+    return false;
+  };
+
+  useEffect(() => {
+    getUsers()
+      .then((items: IUser[]) => {
+        items &&
+          items.forEach((item) => {
+            const newFilter = {
+              name: item.id?.toString() || "",
+              value: item.id?.toString() || "",
+              title: item.name,
+            };
+            filters.push(newFilter);
+          });
+
+        setOptions(filters);
+      })
+      .catch((apiError) => console.log(apiError));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <CheckGroupFilter
+      filterItems={filterItems}
+      value={value}
+      pointer="users"
+      label="User"
+      description="Filter by User"
+      initialState={["all"]}
+      selectAllOption="all"
+      filters={options}
+      menuPosition="center"
+      multipleSelection={true}
+      search={true}
+    />
+  );
+};
+
+export interface IUserFilterProps {
+  filterItems(pointer: string, filter: IQueryValue[]): void;
+  value: IQueryValue[];
+}
+
+export default UserFilter;

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

@@ -0,0 +1,72 @@
+import React from "react";
+import { SiteFilter } from "@ax/components";
+import { IQueryValue } from "@ax/types";
+
+import UserFilter from "../LogFilters/UserFilter";
+import EventFilter from "../LogFilters/EventFilter";
+import ContentFilter from "../LogFilters/ContentFilter";
+import DateFilter from "../LogFilters/DateFilter";
+import OrderFilter from "../LogFilters/OrderFilter";
+
+import * as S from "./style";
+
+const TableHeader = (props: IProps): JSX.Element => {
+  const { isScrolling, filterValues, filterItems, sortItems, isSortAscending, isModeUser } = props;
+
+  return (
+    <S.TableHeader isScrolling={isScrolling}>
+      {isModeUser ? (
+        <>
+          <S.FiltersHeader>
+            <DateFilter filterItems={filterItems} value={filterValues["date"]} />
+            <UserFilter filterItems={filterItems} value={filterValues["users"]} />
+            <EventFilter filterItems={filterItems} value={filterValues["eventTypes"]} />
+            <OrderFilter sortItems={sortItems} isAscending={isSortAscending} />
+          </S.FiltersHeader>
+          <S.SiteUserHeader>
+            <SiteFilter
+              filterItems={filterItems}
+              value={filterValues}
+              pointer="sites"
+              addGlobal={true}
+              center={false}
+            />
+          </S.SiteUserHeader>
+          <S.ContentUserHeader>
+            <ContentFilter filterItems={filterItems} value={filterValues["contentTypes"]} />
+          </S.ContentUserHeader>
+        </>
+      ) : (
+        <>
+          <S.UserHeader>
+            <DateFilter filterItems={filterItems} value={filterValues["date"]} />
+            <UserFilter filterItems={filterItems} value={filterValues["users"]} />
+          </S.UserHeader>
+          <S.TimeHeader>
+            <OrderFilter sortItems={sortItems} isAscending={isSortAscending} />
+          </S.TimeHeader>
+          <S.SiteHeader>
+            <SiteFilter filterItems={filterItems} value={filterValues} pointer="sites" addGlobal={true} />
+          </S.SiteHeader>
+          <S.ContentHeader>
+            <ContentFilter filterItems={filterItems} value={filterValues["contentTypes"]} />
+          </S.ContentHeader>
+          <S.EventHeader>
+            <EventFilter filterItems={filterItems} value={filterValues["eventTypes"]} />
+          </S.EventHeader>
+        </>
+      )}
+    </S.TableHeader>
+  );
+};
+
+interface IProps {
+  isScrolling: boolean;
+  filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
+  sortItems: (isAscending: boolean) => void;
+  isSortAscending: boolean;
+  filterValues: Record<string, IQueryValue[]>;
+  isModeUser: boolean;
+}
+
+export default TableHeader;