@griddo/ax 10.2.25 → 10.3.0

package/src/modules/FileDrive/FolderTree/utils.tsx

@@ -0,0 +1,91 @@
+import { ItemId, TreeData, TreeItem } from "@atlaskit/tree";
+import { IFolderTree } from "@ax/types";
+import { isEmptyObj } from "@ax/helpers";
+
+const normalizeTree = (folders: IFolderTree[], tree: TreeData, hidden: number[]) => {
+  const normalized: TreeData = {
+    rootId: "root",
+    items: {
+      root: {
+        id: "root",
+        children: [],
+        hasChildren: true,
+        isExpanded: true,
+        isChildrenLoading: false,
+      },
+    },
+  };
+
+  const previousFolder: IFolderTree[] = [];
+  if (!isEmptyObj(tree.items)) {
+    previousFolder.push(...formatMenu(tree));
+  }
+
+  const isItemExpanded = (item: IFolderTree) => {
+    if (!item) return true;
+    return item.isExpanded;
+  };
+
+  const getElement = (item: IFolderTree, previousItem: IFolderTree) => {
+    normalized.items[item.id] = {
+      ...item,
+      children: [],
+      isExpanded: isItemExpanded(previousItem),
+    };
+    if (item.children && item.children.length > 0) {
+      item.children.forEach((child: IFolderTree, index: number) => {
+        normalized.items[item.id].children.push(child.id);
+        getElement(child, previousItem?.children[index]);
+      });
+    }
+  };
+
+  folders.forEach((item: IFolderTree, index: number) => {
+    const isHiddenItem = hidden.includes(item.id);
+    if (!isHiddenItem) {
+      normalized.items.root.children.push(item.id);
+      getElement(item, previousFolder[index]);
+    }
+  });
+
+  return normalized;
+};
+
+const getElementsFromTree = (tree: TreeData): TreeItem[] => {
+  const { items } = tree;
+  const elements: TreeItem[] = [];
+  for (const item of Object.values(items)) {
+    elements.push(item);
+  }
+  return elements;
+};
+
+const getChild = (child: ItemId, elements: any[]): IFolderTree => {
+  const element = elements.find((element: IFolderTree) => element.id === child);
+  const children = element?.children.map((child: ItemId) => getChild(child, elements));
+  return { ...element, children };
+};
+
+const formatMenu = (tree: TreeData) => {
+  const elements: TreeItem[] = getElementsFromTree(tree);
+
+  const root: any = elements.find((element: TreeItem) => element.id === "root");
+  const formattedMenu = root.children.map((child: ItemId) => {
+    return getChild(child, elements);
+  });
+
+  return formattedMenu;
+};
+
+const formatItem = (item: any, tree: TreeData) => {
+  const elements = getElementsFromTree(tree);
+
+  const formattedItem: IFolderTree = {
+    ...item,
+    children: item.children.map((child: ItemId) => getChild(child, elements)),
+  };
+
+  return formattedItem;
+};
+
+export { normalizeTree, formatMenu, formatItem };

package/src/modules/FileDrive/GridItem/index.tsx

@@ -0,0 +1,167 @@
+import React, { useState } from "react";
+import { CheckField, Tooltip } from "@ax/components";
+import { IActionMenuOption, ICheck, IFile } from "@ax/types";
+import { formatBytes, getFormattedDateWithTimezone, trimText } from "@ax/helpers";
+import { useModal } from "@ax/hooks";
+
+import { getFileIcon } from "../helpers";
+import { DeleteFileModal, MoveItemModal } from "../atoms";
+
+import * as S from "./style";
+
+const GridItem = (props: IProps) => {
+  const {
+    file,
+    isSelected,
+    currentFolderID,
+    isAllowedToDelete,
+    isAllowedToEdit,
+    isAllowedToMove,
+    onChange,
+    onClick,
+    onDelete,
+    onMove,
+  } = props;
+  const { id, fileName, fileType, sizeBytes, uploadDate, folder } = file;
+
+  const [selectedFolder, setSelectedFolder] = useState<number>(currentFolderID || 0);
+  const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
+  const { isOpen: isMoveOpen, toggleModal: toggleMoveModal } = useModal();
+
+  const handleChange = (value: ICheck) => onChange(value);
+  const handleClick = () => onClick(file);
+  const handleCheckClick = (e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation();
+
+  let menuOptions: IActionMenuOption[] = [];
+
+  if (isAllowedToEdit) {
+    menuOptions = [
+      {
+        label: "Edit",
+        icon: "edit",
+        action: () => onClick(file),
+      },
+    ];
+
+    if (isAllowedToMove) {
+      menuOptions = [
+        ...menuOptions,
+        {
+          label: "Move to...",
+          icon: "change",
+          action: () => toggleMoveModal(),
+        },
+      ];
+    }
+  }
+
+  if (isAllowedToDelete) {
+    menuOptions = [
+      ...menuOptions,
+      {
+        label: "Delete",
+        icon: "delete",
+        action: () => toggleDeleteModal(),
+      },
+    ];
+  }
+
+  const iconUrl = `/img/icons/${getFileIcon(fileType)}`;
+
+  const handleDeleteFile = () => {
+    onDelete(id);
+    isDeleteOpen && toggleDeleteModal();
+  };
+
+  const handleMoveFile = () => {
+    if(folder !== selectedFolder) {
+      onMove(id, selectedFolder);
+      isMoveOpen && toggleMoveModal();
+      setSelectedFolder(0);
+    }
+  };
+
+  const handleModalClose = () => {
+    setSelectedFolder(0);
+    isMoveOpen && toggleMoveModal();
+  };
+
+  const mainDeleteModalAction = {
+    title: "Delete document",
+    onClick: () => handleDeleteFile(),
+  };
+
+  const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
+
+  const mainMoveModalAction = {
+    title: "Move",
+    onClick: () => handleMoveFile(),
+  };
+
+  const secondaryMoveModalAction = { title: "Cancel", onClick: handleModalClose };
+
+  const FileTitle = () =>
+    fileName.length > 40 ? (
+      <Tooltip content={fileName}>
+        <S.Name>{trimText(fileName, 40)}</S.Name>
+      </Tooltip>
+    ) : (
+      <S.Name>{fileName}</S.Name>
+    );
+
+  return (
+    <>
+      <S.Wrapper onClick={handleClick}>
+        <S.Header>
+          <S.CheckWrapper onClick={handleCheckClick}>
+            <CheckField name="check" value={id} checked={isSelected} onChange={handleChange} />
+          </S.CheckWrapper>
+          <S.IconWrapper>
+            <img src={iconUrl} alt={`${fileType} Icon`} />
+          </S.IconWrapper>
+          <S.StyledActionMenu icon="more" options={menuOptions} tooltip="File actions" />
+        </S.Header>
+        <FileTitle />
+        <S.Info>
+          <S.Tag>{getFormattedDateWithTimezone(uploadDate, "d MMM Y")}</S.Tag>
+          <S.Tag>{formatBytes(sizeBytes)}</S.Tag>
+        </S.Info>
+      </S.Wrapper>
+      {isDeleteOpen && (
+        <DeleteFileModal
+          isOpen={isDeleteOpen}
+          toggleModal={toggleDeleteModal}
+          mainModalAction={mainDeleteModalAction}
+          secondaryModalAction={secondaryDeleteModalAction}
+          title={fileName}
+        />
+      )}
+      {isMoveOpen && (
+        <MoveItemModal
+          isOpen={isMoveOpen}
+          toggleModal={handleModalClose}
+          mainModalAction={mainMoveModalAction}
+          secondaryModalAction={secondaryMoveModalAction}
+          folder={selectedFolder}
+          setFolder={setSelectedFolder}
+          hideRoot={!folder}
+        />
+      )}
+    </>
+  );
+};
+
+interface IProps {
+  file: IFile;
+  isSelected: boolean;
+  currentFolderID: number | null;
+  isAllowedToEdit: boolean;
+  isAllowedToDelete: boolean;
+  isAllowedToMove: boolean;
+  onChange(e: ICheck): void;
+  onClick(file: IFile): void;
+  onDelete(fileID: number): void;
+  onMove(fileID: number, folderID: number): void;
+}
+
+export default GridItem;

package/src/modules/FileDrive/GridItem/style.tsx

@@ -0,0 +1,76 @@
+import styled from "styled-components";
+import { ActionMenu } from "@ax/components";
+
+const StyledActionMenu = styled(ActionMenu)`
+  opacity: 0;
+  width: 32px;
+  display: flex;
+  position: absolute;
+  right: ${(p) => p.theme.spacing.xxs};
+  top: ${(p) => p.theme.spacing.xs};
+`;
+
+const Wrapper = styled.div`
+  position: relative;
+  background-color: ${(p) => p.theme.color.uiBackground02};
+  border: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  border-radius: ${p => p.theme.radii.s};
+  display: flex;
+  flex-direction: column;
+  padding: ${(p) => p.theme.spacing.s};
+  width: 100%;
+  min-width: 220px;
+  max-width: 280px;
+  height: 154px;
+  margin-right: ${(p) => p.theme.spacing.s};
+  cursor: pointer;
+  &:hover {
+    background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+    ${StyledActionMenu} {
+      opacity: 1;
+    }
+  }
+`;
+
+const Header = styled.div`
+  display: flex;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const CheckWrapper = styled.div`
+  margin-right: ${(p) => p.theme.spacing.xs};
+  & > div {
+    width: ${(p) => p.theme.spacing.s};
+  }
+  label {
+    margin-bottom: 0;
+  }
+`;
+
+const IconWrapper = styled.div`
+  width: 42px;
+  height: 40px;
+`;
+
+const Name = styled.div`
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  word-break: break-word;
+`;
+
+const Info = styled.div`
+  display: flex;
+  margin-top: auto;
+`;
+
+const Tag = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  border: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  border-radius: 20px;
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  padding: 2px 8px;
+  margin-right: ${(p) => p.theme.spacing.xxs};
+`;
+
+export { Wrapper, Header, Name, Info, CheckWrapper, IconWrapper, StyledActionMenu, Tag };

package/src/modules/FileDrive/ListItem/index.tsx

@@ -0,0 +1,180 @@
+import React, { useState } from "react";
+import { CheckField, ElementsTooltip, Tooltip } from "@ax/components";
+import { IActionMenuOption, ICheck, IFile } from "@ax/types";
+import { formatBytes, getFormattedDateWithTimezone, trimText } from "@ax/helpers";
+import { useModal, usePermission } from "@ax/hooks";
+
+import { getFileIcon } from "../helpers";
+import { DeleteFileModal, MoveItemModal } from "../atoms";
+
+import * as S from "./style";
+
+const ListItem = (props: IProps) => {
+  const {
+    file,
+    isSelected,
+    currentFolderID,
+    isAllowedToDelete,
+    isAllowedToEdit,
+    isAllowedToMove,
+    onChange,
+    onClick,
+    onDelete,
+    onMove,
+  } = props;
+  const { id, fileName, fileType, sizeBytes, uploadDate, tags, folder } = file;
+
+  const [selectedFolder, setSelectedFolder] = useState<number>(currentFolderID || 0);
+  const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
+  const { isOpen: isMoveOpen, toggleModal: toggleMoveModal } = useModal();
+
+  const handleChange = (value: ICheck) => onChange(value);
+  const handleClick = () => onClick(file);
+
+  let menuOptions: IActionMenuOption[] = [];
+
+  if (isAllowedToEdit) {
+    menuOptions = [
+      {
+        label: "Edit",
+        icon: "edit",
+        action: () => onClick(file),
+      },
+    ];
+
+    if (isAllowedToMove) {
+      menuOptions = [
+        ...menuOptions,
+        {
+          label: "Move to...",
+          icon: "change",
+          action: () => toggleMoveModal(),
+        },
+      ];
+    }
+  }
+
+  if (isAllowedToDelete) {
+    menuOptions = [
+      ...menuOptions,
+      {
+        label: "Delete",
+        icon: "delete",
+        action: () => toggleDeleteModal(),
+      },
+    ];
+  }
+
+  const iconUrl = `/img/icons/${getFileIcon(fileType)}`;
+
+  const handleDeleteFile = () => {
+    onDelete(id);
+    isDeleteOpen && toggleDeleteModal();
+  };
+
+  const handleMoveFile = () => {
+    if(folder !== selectedFolder) {
+      onMove(id, selectedFolder);
+      isMoveOpen && toggleMoveModal();
+      setSelectedFolder(0);
+    }
+  };
+
+  const handleModalClose = () => {
+    setSelectedFolder(0);
+    isMoveOpen && toggleMoveModal();
+  };
+
+  const mainDeleteModalAction = {
+    title: "Delete document",
+    onClick: () => handleDeleteFile(),
+  };
+
+  const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
+
+  const mainMoveModalAction = {
+    title: "Move",
+    onClick: () => handleMoveFile(),
+  };
+
+  const secondaryMoveModalAction = { title: "Cancel", onClick: handleModalClose };
+
+  const FileTitle = () =>
+    fileName.length > 50 ? <Tooltip content={fileName}>{trimText(fileName, 50)}</Tooltip> : <>{fileName}</>;
+
+  return (
+    <>
+      <S.ItemRow role="rowgroup" selected={isSelected}>
+        <S.CheckCell role="cell">
+          <CheckField name="check" value={id} checked={isSelected} onChange={handleChange} />
+        </S.CheckCell>
+        <S.IconCell role="cell" onClick={handleClick}>
+          <img src={iconUrl} alt={`${fileType} Icon`} />
+        </S.IconCell>
+        <S.NameCell role="cell" onClick={handleClick}>
+          <FileTitle />
+        </S.NameCell>
+        <S.TypeCell role="cell" onClick={handleClick}>
+          <S.FileType>{fileType}</S.FileType>
+        </S.TypeCell>
+        <S.SizeCell role="cell" onClick={handleClick}>
+          {formatBytes(sizeBytes)}
+        </S.SizeCell>
+        <S.UpdatedCell role="cell" onClick={handleClick}>
+          {getFormattedDateWithTimezone(uploadDate, "d MMM Y")}
+        </S.UpdatedCell>
+        <S.TagsCell role="cell" onClick={handleClick}>
+          {tags.length > 0 && (
+            <ElementsTooltip
+              elements={file.tags}
+              elementsPerRow={3}
+              defaultElements={3}
+              rounded={true}
+              defaultColor="#FFBB37"
+              prefix="#"
+              size="M"
+            />
+          )}
+        </S.TagsCell>
+        <S.ActionsCell role="cell">
+          <S.StyledActionMenu icon="more" options={menuOptions} tooltip="File actions" />
+        </S.ActionsCell>
+      </S.ItemRow>
+      {isDeleteOpen && (
+        <DeleteFileModal
+          isOpen={isDeleteOpen}
+          toggleModal={toggleDeleteModal}
+          mainModalAction={mainDeleteModalAction}
+          secondaryModalAction={secondaryDeleteModalAction}
+          title={fileName}
+        />
+      )}
+      {isMoveOpen && (
+        <MoveItemModal
+          isOpen={isMoveOpen}
+          toggleModal={handleModalClose}
+          mainModalAction={mainMoveModalAction}
+          secondaryModalAction={secondaryMoveModalAction}
+          folder={selectedFolder}
+          setFolder={setSelectedFolder}
+          hideRoot={!folder}
+        />
+      )}
+    </>
+  );
+};
+
+interface IProps {
+  file: IFile;
+  isSelected: boolean;
+  currentFolderID: number | null;
+  isAllowedToEdit: boolean;
+  isAllowedToDelete: boolean;
+  isAllowedToMove: boolean;
+  onChange(e: ICheck): void;
+  onClick(file: IFile): void;
+  onDelete(fileID: number): void;
+  onMove(fileID: number, folderID: number): void;
+}
+
+export default ListItem;

package/src/modules/FileDrive/ListItem/style.tsx

@@ -0,0 +1,88 @@
+import styled from "styled-components";
+import { ActionMenu } from "@ax/components";
+import { Cell, Row } from "@ax/components/TableList/TableItem/style";
+
+const StyledActionMenu = styled(ActionMenu)`
+  opacity: 0;
+`;
+
+const ItemRow = styled(Row)<{ global?: boolean }>`
+  &:hover {
+    ${StyledActionMenu} {
+      opacity: 1;
+    }
+  }
+`;
+
+const CheckCell = styled(Cell)`
+  label {
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
+  > div {
+    width: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+const IconCell = styled(Cell)`
+  padding: 8px 0;
+  img {
+    width: 34px;
+  }
+`;
+
+const NameCell = styled(Cell)`
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  flex-grow: 1;
+`;
+
+const TypeCell = styled(Cell)`
+  flex: 0 0 80px;
+  align-items: center;
+  text-transform: uppercase;
+`;
+
+const FileType = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  border: ${(p) => `1px solid ${p.theme.color.textMediumEmphasis}`};
+  border-radius: ${p => p.theme.radii.s};
+  padding: ${(p) => `0 ${p.theme.spacing.xxs}`};
+`;
+
+const SizeCell = styled(Cell)`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  flex: 0 0 80px;
+  align-items: center;
+`;
+
+const UpdatedCell = styled(Cell)`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  flex: 0 0 120px;
+  align-items: center;
+`;
+
+const TagsCell = styled(Cell)`
+  flex: 0 0 300px;
+`;
+
+const ActionsCell = styled(Cell)`
+  flex: 0 0 70px;
+  text-align: center;
+`;
+
+export {
+  ItemRow,
+  StyledActionMenu,
+  CheckCell,
+  IconCell,
+  NameCell,
+  TypeCell,
+  FileType,
+  SizeCell,
+  UpdatedCell,
+  TagsCell,
+  ActionsCell,
+};