@griddo/ax 10.1.96 → 10.2.0

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

@@ -0,0 +1,81 @@
+import React, { useRef } from "react";
+import { createPortal } from "react-dom";
+
+import { Icon } from "@ax/components";
+import { IPermissions } from "@ax/types";
+
+import * as S from "./style";
+
+const SideModal = (props: ISideModalProps): JSX.Element | null => {
+  const {
+    name,
+    description,
+    permissions: { totalPermissions, sitePermissions, globalPermissions },
+    isOpen,
+    closeModal,
+  } = props;
+
+  const node = useRef<HTMLDivElement>(null);
+
+  return isOpen
+    ? createPortal(
+        <S.Wrapper ref={node} data-testid="role-side-modal">
+          <S.Header>
+            <S.Title data-testid="role-side-modal-title">{name} Permissions</S.Title>
+            <S.CloseIconWrapper onClick={closeModal}>
+              <Icon name="close" />
+            </S.CloseIconWrapper>
+          </S.Header>
+          <S.ColumnsWrapper>
+            <S.RoleInfo>
+              <S.RoleTitle>
+                <S.RoleName>{name}</S.RoleName> role
+              </S.RoleTitle>
+              <S.RoleDescription>{description}</S.RoleDescription>
+            </S.RoleInfo>
+            <S.ListTitleWrapper>
+              <S.ListTitle>Role permissions</S.ListTitle>
+              <S.TotalPermissions data-testid="role-side-modal-total-permissions">
+                {totalPermissions}
+              </S.TotalPermissions>
+            </S.ListTitleWrapper>
+            <S.RolePermissionsList>
+              <S.PermissionGroupTitle>Global Permissions</S.PermissionGroupTitle>
+              <S.PermissionGroup first={true}>
+              {globalPermissions.map((permission: { name: string; key: string }) => (
+                <S.Permission key={permission.key} data-testid="role-permission">
+                  <S.IconWrapper data-testid="success-icon">
+                    <Icon name="done" size={"16"} />
+                  </S.IconWrapper>
+                  {permission.name}
+                </S.Permission>
+              ))}
+              </S.PermissionGroup>
+              <S.PermissionGroupTitle>Site Permissions</S.PermissionGroupTitle>
+              <S.PermissionGroup>
+              {sitePermissions.map((permission: { name: string; key: string }) => (
+                <S.Permission key={permission.key} data-testid="role-permission">
+                  <S.IconWrapper data-testid="success-icon">
+                    <Icon name="done" size={"16"} />
+                  </S.IconWrapper>
+                  {permission.name}
+                </S.Permission>
+              ))}
+              </S.PermissionGroup>
+            </S.RolePermissionsList>
+          </S.ColumnsWrapper>
+        </S.Wrapper>,
+        document.body
+      )
+    : null;
+};
+
+interface ISideModalProps {
+  name: string;
+  description: string;
+  permissions: IPermissions;
+  isOpen: boolean;
+  closeModal: () => void;
+}
+
+export default SideModal;

package/src/modules/Users/Roles/SideModal/style.tsx

@@ -0,0 +1,132 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div<{ optionsType?: string }>`
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 1000;
+  width: 384px;
+  height: 100vh;
+  background: ${(p) => p.theme.colors.uiBackground01};
+  box-shadow: ${(p) => p.theme.shadow.rightPanel};
+`;
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: ${(p) => p.theme.spacing.xl};
+  width: 100%;
+  padding: 0 ${(p) => p.theme.spacing.m};
+  background-color: ${(p) => p.theme.colors.uiBackground02};
+  border-bottom: 1px solid ${(p) => p.theme.colors.uiLine};
+  h6 {
+    ${(p) => p.theme.textStyle.headingM}
+    color: ${(p) => p.theme.colors.textHighEmphasis};
+    text-transform: capitalize;
+  }
+`;
+
+const Title = styled.h6``;
+
+const IconWrapper = styled.span`
+  padding-right: ${(p) => p.theme.spacing.xs};
+  height: 16px;
+`;
+
+const CloseIconWrapper = styled(IconWrapper)`
+  cursor: pointer;
+`;
+
+const ColumnsWrapper = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
+const RoleInfo = styled.div`
+  width: 336px;
+  background-color: ${(p) => p.theme.colors.uiBackground03};
+  padding: 16px;
+  border-radius: 4px;
+  margin-bottom: 33px;
+`;
+
+const RoleTitle = styled.div`
+  ${(p) => p.theme.textStyle.headingXS}
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  text-transform: lowercase;
+`;
+
+const RoleName = styled.span`
+  text-transform: capitalize;
+`;
+
+const RoleDescription = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+`;
+
+const ListTitleWrapper = styled.div`
+  display: flex;
+  margin-bottom: 10px;
+`;
+
+const ListTitle = styled.div`
+  ${(p) => p.theme.textStyle.headingXS};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const TotalPermissions = styled.div`
+  ${(p) => p.theme.textStyle.headingXS};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  padding-left: ${(p) => p.theme.spacing.xs};
+`;
+
+const RolePermissionsList = styled.div`
+  overflow: auto;
+  height: ${(p) => `calc(100vh - 250px)`};
+`;
+
+const RolePermissionsListTitle = styled.div``;
+
+const Permission = styled.div`
+  display: flex;
+  margin-bottom: ${(p) => p.theme.spacing.s};
+  font-size: 16px;
+  &:last-child{
+    margin-bottom: 0;
+  }
+`;
+
+const PermissionGroupTitle = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const PermissionGroup = styled.div<{ first?: boolean }>`
+  padding-bottom: ${(p) => p.theme.spacing.s};
+  border-bottom: ${(p) => p.first ? `1px solid ${p.theme.color.uiLine}` : "none"};
+  margin-bottom: ${(p) => p.first ? p.theme.spacing.s : 0};
+`;
+
+
+export {
+  Wrapper,
+  IconWrapper,
+  CloseIconWrapper,
+  Header,
+  Title,
+  ColumnsWrapper,
+  RoleInfo,
+  RoleTitle,
+  RoleName,
+  RoleDescription,
+  ListTitleWrapper,
+  ListTitle,
+  TotalPermissions,
+  RolePermissionsList,
+  RolePermissionsListTitle,
+  Permission,
+  PermissionGroup,
+  PermissionGroupTitle,
+};

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

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import { IRolesQueryValues } from "@ax/types";
+
+const useSortedListStatus = (): any => {
+  const sortedInitialState: {
+    isAscending: boolean;
+    sortedByTitle: boolean;
+    sortedByUsers: boolean;
+    sortedByPermissions: boolean;
+  } = {
+    isAscending: false,
+    sortedByTitle: false,
+    sortedByUsers: false,
+    sortedByPermissions: false,
+  };
+
+  const [sortedListStatus, setSortedListStatus] = useState(sortedInitialState);
+
+  return {
+    sortedListStatus,
+    setSortedListStatus,
+  };
+};
+
+const useFilterQuery = (): IRolesFilterQuery => {
+  const initialQueryValues = {
+    order: "",
+  };
+
+  const [query, setQuery] = useState(initialQueryValues);
+
+  const setFilterQuery = (filterValues: IRolesQueryValues) => {
+    const { order } = filterValues;
+    let filterQuery = "";
+
+    const currentQuery = (pointer: string, values: string) => {
+      return filterQuery ? filterQuery.concat(`&${pointer}=${values}`) : `?${pointer}=${values}`;
+    };
+
+    const isNotInitialValue = (pointer: keyof IRolesQueryValues) => {
+      return filterValues[pointer] && initialQueryValues[pointer] !== filterValues[pointer];
+    };
+
+    if (isNotInitialValue("order")) filterQuery = currentQuery("order", order);
+
+    return filterQuery;
+  };
+
+  const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
+    const { order } = query;
+    const orderMethod = isAscendent ? "asc" : "desc";
+    const filterValues = {
+      order: pointer === "order" ? `${filter}-${orderMethod}` : order,
+    };
+
+    setQuery(filterValues);
+
+    return filterValues;
+  };
+
+  const resetFilterQuery = () => setQuery(initialQueryValues);
+
+  return {
+    setFiltersSelection,
+    setFilterQuery,
+    resetFilterQuery,
+    filterValues: query,
+  };
+};
+
+interface IRolesFilterQuery {
+  setFiltersSelection(pointer: string, filter: string, isAscendent?: boolean): IRolesQueryValues;
+  setFilterQuery(filterValues: IRolesQueryValues): string;
+  resetFilterQuery(): void;
+  filterValues: IRolesQueryValues;
+}
+
+export { useSortedListStatus, useFilterQuery };

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

@@ -0,0 +1,256 @@
+import React, { useEffect, useRef, useState } from "react";
+import { connect } from "react-redux";
+
+import { IRootState, IRole, IGetRoles, IActivateRole, ISite } from "@ax/types";
+import { useBulkSelection, useToast } from "@ax/hooks";
+import { appActions } from "@ax/containers/App";
+import { usersActions } from "@ax/containers/Users";
+
+import { MainWrapper, TableList, ErrorToast, EmptyState, Nav, Toast } from "@ax/components";
+
+import BulkHeader from "./BulkHeader";
+import RoleItem from "./RoleItem";
+import { useFilterQuery, useSortedListStatus } from "./hooks";
+import { getSortedListStatus } from "./utils";
+import SideModal from "./SideModal";
+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 [page, setPage] = useState(1);
+  const [isScrolling, setIsScrolling] = useState(false);
+  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
+  const [activatedItems, setActivatedItems] = useState<number[]>([]);
+  const [undoToastActionValue, setUndoToastActionValue] = useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedRole, setSelectedRole] = useState<IRole | null>(null);
+
+  const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
+  const { setFiltersSelection, setFilterQuery, filterValues } = useFilterQuery();
+
+  const tableRef = useRef<HTMLDivElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const isSiteView = !!currentSiteInfo;
+  const siteId = isSiteView ? currentSiteInfo.id : "global";
+  const { isVisible, toggleToast, setIsVisible } = useToast();
+
+  const rolesIds = roles?.map((role: IRole) => role.id);
+
+  const {
+    resetBulkSelection,
+    isSelected,
+    areItemsSelected,
+    checkState,
+    addToBulkSelection,
+    selectAllItems,
+    selectedItems,
+  } = useBulkSelection(rolesIds);
+
+  useEffect(() => {
+    const { order } = filterValues;
+    const handleGetRoles = async () => await getRoles({ siteId, order });
+    handleGetRoles();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentFilterQuery]);
+
+  useEffect(() => {
+    if (wrapperRef.current) {
+      wrapperRef.current.scrollIntoView({ block: "start", behavior: "smooth" });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [roles]);
+
+  const handleMenuClick = (path: string) => setHistoryPush(path);
+
+  const unselectAllItems = () => resetBulkSelection();
+
+  const selectItems = () => (checkState.isAllSelected ? unselectAllItems() : handleSelectAll());
+
+  const handleSelectAll = () => selectAllItems();
+
+  const onScroll = (e: any) => setIsScrolling(e.target.scrollTop > 0);
+
+  const totalItems = roles?.length;
+
+  const firstPageUser = (page - 1) * itemsPerPage;
+  const pageRoles = roles?.slice(firstPageUser, firstPageUser + itemsPerPage);
+  const isEmpty = roles && roles?.length === 0;
+  const pagination = {
+    setPage,
+    itemsPerPage,
+    totalItems,
+    currPage: page,
+  };
+
+  const sortItems = async (orderPointer: string, isAscending: boolean) => {
+    setPage(firstPage);
+    const sortedState = getSortedListStatus(orderPointer, isAscending);
+    setSortedListStatus(sortedState);
+    const filtersSelection = setFiltersSelection("order", orderPointer, isAscending);
+    const filterQuery = setFilterQuery(filtersSelection);
+    setCurrentFilterQuery(filterQuery);
+  };
+
+  const filterItems = async (filterPointer: string, filtersSelected: string) => {
+    setPage(firstPage);
+    const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
+    const filterQuery = setFilterQuery(filtersSelection);
+    setCurrentFilterQuery(filterQuery);
+  };
+
+  const activateCurrentRoles = (active: boolean) => {
+    const allEditableRoles = roles.filter((role: IRole) => role.editable).map((role: IRole) => role.id);
+    const selectedEditableRoles = selectedItems.all.filter((role: number) => allEditableRoles.includes(role));
+    handleActivateRoles(selectedEditableRoles, active);
+  };
+
+  const handleActivateRoles = async (roleIds: number[], active: boolean) => {
+    const params = {
+      id: roleIds,
+      siteId,
+      active,
+    };
+    setUndoToastActionValue(!active);
+    const activated = await activateRoles(params);
+    if (activated) {
+      setActivatedItems(roleIds);
+      toggleToast();
+    }
+  };
+
+  const restorePreviousRoleStatus = async () => {
+    const params = { id: activatedItems, siteId, active: undoToastActionValue };
+    await activateRoles(params);
+  };
+
+  const undoAction = () => {
+    if (activatedItems) {
+      restorePreviousRoleStatus();
+    }
+    setIsVisible(false);
+  };
+
+  const activateText = undoToastActionValue ? "Deactivated" : "Activated";
+
+  const toastProps = {
+    action: () => undoAction(),
+    setIsVisible,
+    message: activatedItems.length > 1 ? `${activatedItems.length} Roles ${activateText}` : `1 Role ${activateText}`,
+  };
+
+  const TableHeader = (
+    <BulkHeader
+      filterValues={filterValues}
+      showBulk={areItemsSelected(rolesIds)}
+      activateRoles={activateCurrentRoles}
+      selectAllItems={handleSelectAll}
+      totalItems={totalItems}
+      selectItems={selectItems}
+      checkState={checkState}
+      isScrolling={isScrolling}
+      sortItems={sortItems}
+      filterItems={filterItems}
+      sortedListStatus={sortedListStatus}
+      isSiteView={isSiteView}
+      roles={roles}
+      selectedRoles={selectedItems.all}
+    />
+  );
+
+  const openSideModal = (role: IRole) => {
+    setIsOpen(true);
+    setSelectedRole(role);
+  };
+
+  const closeSideModal = () => {
+    setIsOpen(false);
+    setSelectedRole(null);
+  };
+
+  return (
+    <MainWrapper title="Users & Roles">
+      <S.UsersWrapper data-testid="users-wrapper" ref={wrapperRef}>
+        <Nav current={currentNavItem} items={navItems} onClick={handleMenuClick} />
+        <S.TableListWrapper data-testid="roles-table-list-wrapper">
+          <ErrorToast />
+          <TableList
+            tableHeader={TableHeader}
+            pagination={pagination}
+            onScroll={onScroll}
+            hasFixedHeader={true}
+            tableRef={tableRef}
+          >
+            {isEmpty ? (
+              <S.EmptyWrapper data-testid="empty-wrapper">
+                <EmptyState message="No roles found" />
+              </S.EmptyWrapper>
+            ) : (
+              pageRoles &&
+              pageRoles.map((role: IRole) => {
+                const isItemSelected = isSelected(role.id);
+                const handleActivateRole = async (value: boolean) => handleActivateRoles([role.id], value);
+
+                return (
+                  <RoleItem
+                    key={role.id}
+                    role={role}
+                    isSelected={isItemSelected}
+                    onChange={addToBulkSelection}
+                    onClick={() => openSideModal(role)}
+                    siteId={siteId}
+                    activateRole={handleActivateRole}
+                  />
+                );
+              })
+            )}
+          </TableList>
+        </S.TableListWrapper>
+      </S.UsersWrapper>
+      {isVisible && <Toast {...toastProps} />}
+      {selectedRole && (
+        <SideModal
+          name={selectedRole?.name}
+          description={selectedRole?.description}
+          permissions={selectedRole?.permissions}
+          isOpen={isOpen}
+          closeModal={() => closeSideModal()}
+        />
+      )}
+    </MainWrapper>
+  );
+};
+
+const mapStateToProps = (state: IRootState) => ({
+  roles: state.users.roles,
+  users: state.users.users,
+  currentSiteInfo: state.sites.currentSiteInfo,
+});
+
+const mapDispatchToProps = {
+  getRoles: usersActions.getRoles,
+  activateRoles: usersActions.activateRoles,
+  resetUserData: usersActions.resetUserData,
+  setHistoryPush: appActions.setHistoryPush,
+};
+
+interface IDispatchProps {
+  getRoles(params?: IGetRoles): Promise<void>;
+  resetUserData(): void;
+  setHistoryPush(route: string): void;
+  activateRoles(params: IActivateRole): Promise<boolean>;
+}
+
+interface IProps {
+  navItems: any[];
+  currentNavItem: any;
+  roles: IRole[];
+  currentSiteInfo: ISite | null;
+}
+
+export type IRolesProps = IProps & IDispatchProps;
+
+export default connect(mapStateToProps, mapDispatchToProps)(Roles);

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

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+
+const UsersWrapper = styled.div`
+  display: flex;
+  min-height: 100%;
+`;
+
+const TableListWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+  height: calc(100vh - ${(p) => p.theme.spacing.xl});
+  overflow: auto;
+`;
+
+const EmptyWrapper = styled.div`
+  height: ${(p) => `calc(100vh - (${p.theme.spacing.xl} * 3))`};
+  display: flex;
+  align-items: center;
+`;
+
+export { UsersWrapper, TableListWrapper, EmptyWrapper };

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

@@ -0,0 +1,12 @@
+const getSortedListStatus = (orderPointer: string, isAscending: boolean) => {
+  const sortedListStatus = {
+    isAscending,
+    sortedByTitle: orderPointer === "name",
+    sortedByUsers: orderPointer === "users",
+    sortedByPermissions: orderPointer === "permissions",
+  };
+
+  return sortedListStatus;
+};
+
+export { getSortedListStatus };

package/src/modules/Users/UserCreate/OptionItem/index.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+import { RadioField } from "@ax/components";
+
+import * as S from "./style";
+
+const OptionItem = (props: IOptionItemProps): JSX.Element => {
+  const { name, title, description, value, onChange, readOnly = false } = props;
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (readOnly) return;
+    e.preventDefault();
+    e.stopPropagation();
+    onChange(name);
+  };
+
+  const handleChange = () => onChange(name);
+
+  return (
+    <>
+      <S.OptionItem role="rowgroup" data-testid="user-option-item" readOnly={readOnly} selected={!readOnly && value}>
+        {!readOnly && (
+          <S.RadioCell role="cell" onClick={handleClick} data-testid="radio-cell">
+            <RadioField name={name} value={name} checked={value} onChange={handleChange} />
+          </S.RadioCell>
+        )}
+        <S.WrapperCell role="cell" data-testid="wrapper-cell-option">
+          <S.Name onClick={handleClick}>{title}</S.Name>
+          <S.Description onClick={handleClick}>{description}</S.Description>
+        </S.WrapperCell>
+      </S.OptionItem>
+    </>
+  );
+};
+
+export interface IOptionItemProps {
+  name: string;
+  title: string;
+  description: string;
+  onChange: (value: string) => void;
+  value: boolean;
+  readOnly?: boolean;
+}
+
+export default OptionItem;

package/src/modules/Users/UserCreate/OptionItem/style.tsx

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+import { Cell, Row } from "@ax/components/TableList/TableItem/style";
+
+const RadioCell = styled(Cell)`
+  padding: ${(p) => p.theme.spacing.s};
+  width: 32px;
+  justify-content: flex-start;
+  label {
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+const OptionItem = styled(Row)<{ selected: boolean; readOnly?: boolean }>`
+  border: ${(p) => (p.selected ? `2px solid ${p.theme.color.interactive01}` : `1px solid ${p.theme.color.uiLine}`)};
+  :before {
+    background-color: transparent;
+  }
+  &:hover {
+    cursor: ${(p) => (p.readOnly ? "default" : "pointer")};
+    background-color: ${(p) =>
+      p.readOnly
+        ? p.theme.color.uiBackground02
+        : p.selected
+        ? p.theme.color.overlayPressedPrimary
+        : p.theme.color.overlayHoverPrimary};
+    &:before {
+      background-color: ${(p) => (p.readOnly ? "transparent" : p.theme.color.overlayHoverPrimary)};
+    }
+  }
+`;
+
+const WrapperCell = styled(Cell)`
+  width: 100%;
+`;
+
+const Name = styled.div`
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const Description = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+export { RadioCell, OptionItem, WrapperCell, Name, Description };