@griddo/ax 10.3.2 → 10.3.4

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

@@ -1,20 +1,39 @@
 import React, { useState } from "react";
 import { IFile } from "@ax/types";
 import { Button, FloatingMenu, IconAction, Toast, Tooltip } from "@ax/components";
-import { useToast } from "@ax/hooks";
+import { useModal, useToast } from "@ax/hooks";
 import FileDragAndDrop from "../FileDragAndDrop";
 import { getFileIcon } from "../helpers";
+import { NotSavedModal } from "../atoms";
 import DetailPanel from "./DetailPanel";
+import { IFileFormState } from "..";
 
 import * as S from "./style";
 
 const FileModal = (props: IProps) => {
-  const { file, items, activeDelete, isAllowedToEdit, setFile, toggleModal, onDelete, setFileSelected } = props;
+  const {
+    file,
+    items,
+    activeDelete,
+    isAllowedToEdit,
+    setFile,
+    toggleModal,
+    onDelete,
+    setFileSelected,
+    handleDownload,
+    form,
+    setForm,
+    isDirty,
+    resetDirty,
+  } = props;
+
   const { fileType, fileName, id, site } = file;
 
   const [replaceType, setReplaceType] = useState<"full" | "partial" | null>(null);
   const [isDNDVisible, setDNDVisible] = useState(false);
+  const [isArrowPrev, setIsArrowPrev] = useState(false);
   const { isVisible, toggleToast, setIsVisible } = useToast();
+  const { isOpen: isSaveOpen, toggleModal: toggleSaveModal } = useModal();
 
   const iconUrl = `/img/icons/${getFileIcon(fileType)}`;
   const index = items.indexOf(file.id);
@@ -22,6 +41,16 @@ const FileModal = (props: IProps) => {
   const validFormats = ["pdf", "doc", "docx", "xls", "xlsx", "zip"];
 
   const handleArrowClick = (isPrev: boolean) => () => {
+    if (isDirty) {
+      setIsArrowPrev(isPrev);
+      toggleSaveModal();
+    } else {
+      resetDirty();
+      changeFile(isPrev);
+    }
+  };
+
+  const changeFile = (isPrev: boolean) => {
     isPrev ? setFile(items[index - 1]) : setFile(items[index + 1]);
     setDNDVisible(false);
     setReplaceType(null);
@@ -54,11 +83,26 @@ const FileModal = (props: IProps) => {
     toggleToast();
   };
 
+  const handleFileDownload = () => handleDownload(id, fileName);
+
   const toastProps = {
     setIsVisible,
     message: "1 file replaced",
   };
 
+  const handleMainAction = () => {
+    toggleSaveModal();
+    resetDirty();
+    changeFile(isArrowPrev);
+  }
+
+  const mainModalAction = {
+    title: "Yes, discard changes",
+    onClick: () => handleMainAction(),
+  };
+
+  const secondaryModalAction = { title: "Cancel", onClick: toggleSaveModal };
+
   return (
     <>
       <S.Wrapper>
@@ -67,21 +111,23 @@ const FileModal = (props: IProps) => {
           <S.FilePreview>
             <S.ImageWrapper>
               <S.IconWrapper>
-                <div><img src={iconUrl} alt={`${fileType} Icon`} /></div>
+                <div>
+                  <img src={iconUrl} alt={`${fileType} Icon`} />
+                </div>
                 {isDNDVisible && (
-                <S.DragAndDropWrapper>
-                  <FileDragAndDrop
-                    validFormats={validFormats}
-                    handleUpload={handleUpload}
-                    inverse={true}
-                    replaceData={{ fileID: id, keepURL: replaceType === "full" ? false : true }}
-                    siteID={site || "global"}
-                  />
-                </S.DragAndDropWrapper>
-              )}
+                  <S.DragAndDropWrapper>
+                    <FileDragAndDrop
+                      validFormats={validFormats}
+                      handleUpload={handleUpload}
+                      inverse={true}
+                      replaceData={{ fileID: id, keepURL: replaceType === "full" ? false : true }}
+                      siteID={site || "global"}
+                    />
+                  </S.DragAndDropWrapper>
+                )}
               </S.IconWrapper>
             </S.ImageWrapper>
-            <S.FileName>{fileName}</S.FileName>
+            <S.FileName data-testid="file-name">{fileName}</S.FileName>
             <S.FileActions>
               {isAllowedToEdit ? (
                 <S.ReplaceWrapper>
@@ -98,6 +144,9 @@ const FileModal = (props: IProps) => {
               ) : (
                 <></>
               )}
+              <Button type="button" buttonStyle="text" icon="download" onClick={handleFileDownload}>
+                Download
+              </Button>
             </S.FileActions>
           </S.FilePreview>
           <IconAction icon="rightArrow" onClick={handleArrowClick(false)} disabled={index === items.length - 1} />
@@ -108,9 +157,21 @@ const FileModal = (props: IProps) => {
           onDelete={onDelete}
           activeDelete={activeDelete}
           isAllowedToEdit={isAllowedToEdit}
+          form={form}
+          setForm={setForm}
+          isDirty={isDirty}
+          resetDirty={resetDirty}
         />
       </S.Wrapper>
       {isVisible && <Toast {...toastProps} />}
+      {isSaveOpen && (
+        <NotSavedModal
+          isOpen={isSaveOpen}
+          toggleModal={toggleSaveModal}
+          mainModalAction={mainModalAction}
+          secondaryModalAction={secondaryModalAction}
+        />
+      )}
     </>
   );
 };
@@ -120,10 +181,15 @@ interface IProps {
   toggleModal(): void;
   onDelete(fileID: number): void;
   items: number[];
-  setFile: (id: number) => void;
+  setFile(id: number): void;
   setFileSelected: (file: IFile) => void;
   activeDelete: boolean;
   isAllowedToEdit: boolean;
+  handleDownload(fileID: number, fileName: string): void;
+  form: IFileFormState;
+  setForm(form: IFileFormState): void;
+  isDirty: boolean;
+  resetDirty(): void;
 }
 
 export default FileModal;

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { CheckField, Tooltip } from "@ax/components";
+import { CheckField, Tag, Tooltip } from "@ax/components";
 import { IActionMenuOption, ICheck, IFile } from "@ax/types";
 import { formatBytes, getFormattedDateWithTimezone, trimText } from "@ax/helpers";
 import { useModal } from "@ax/hooks";
@@ -17,11 +17,13 @@ const GridItem = (props: IProps) => {
     isAllowedToDelete,
     isAllowedToEdit,
     isAllowedToMove,
+    isSearching,
     onChange,
     onClick,
     onDelete,
     onMove,
   } = props;
+
   const { id, fileName, fileType, sizeBytes, uploadDate, folder } = file;
 
   const [selectedFolder, setSelectedFolder] = useState<number>(currentFolderID || 0);
@@ -74,7 +76,7 @@ const GridItem = (props: IProps) => {
   };
 
   const handleMoveFile = () => {
-    if(folder !== selectedFolder) {
+    if (folder?.folderId !== selectedFolder) {
       onMove(id, selectedFolder);
       isMoveOpen && toggleMoveModal();
       setSelectedFolder(0);
@@ -103,15 +105,26 @@ const GridItem = (props: IProps) => {
   const FileTitle = () =>
     fileName.length > 40 ? (
       <Tooltip content={fileName}>
-        <S.Name>{trimText(fileName, 40)}</S.Name>
+        <S.Name data-testid="file-name">{trimText(fileName, 40)}</S.Name>
+      </Tooltip>
+    ) : (
+      <S.Name data-testid="file-name">{fileName}</S.Name>
+    );
+
+  const FolderTag = () =>{
+    if(!folder) return <></>;
+    return folder.folderName.length > 20 ? (
+      <Tooltip content={folder.folderName}>
+        <Tag type="square" text={trimText(folder.folderName, 25)} icon="project" />
       </Tooltip>
     ) : (
-      <S.Name>{fileName}</S.Name>
+      <Tag type="square" text={folder.folderName} icon="project" />
     );
+  }
 
   return (
     <>
-      <S.Wrapper onClick={handleClick}>
+      <S.Wrapper onClick={handleClick} isTall={isSearching}>
         <S.Header>
           <S.CheckWrapper onClick={handleCheckClick}>
             <CheckField name="check" value={id} checked={isSelected} onChange={handleChange} />
@@ -126,6 +139,11 @@ const GridItem = (props: IProps) => {
           <S.Tag>{getFormattedDateWithTimezone(uploadDate, "d MMM Y")}</S.Tag>
           <S.Tag>{formatBytes(sizeBytes)}</S.Tag>
         </S.Info>
+        {isSearching && folder && (
+          <S.TagWrapper>
+            <FolderTag />
+          </S.TagWrapper>
+        )}
       </S.Wrapper>
       {isDeleteOpen && (
         <DeleteFileModal
@@ -158,6 +176,7 @@ interface IProps {
   isAllowedToEdit: boolean;
   isAllowedToDelete: boolean;
   isAllowedToMove: boolean;
+  isSearching: boolean;
   onChange(e: ICheck): void;
   onClick(file: IFile): void;
   onDelete(fileID: number): void;

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

@@ -10,18 +10,18 @@ const StyledActionMenu = styled(ActionMenu)`
   top: ${(p) => p.theme.spacing.xs};
 `;
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{ isTall: boolean }>`
   position: relative;
   background-color: ${(p) => p.theme.color.uiBackground02};
   border: ${(p) => `1px solid ${p.theme.color.uiLine}`};
-  border-radius: ${p => p.theme.radii.s};
+  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;
+  height: ${(p) => (p.isTall ? "180px" : "154px")};
   margin-right: ${(p) => p.theme.spacing.s};
   cursor: pointer;
   &:hover {
@@ -73,4 +73,9 @@ const Tag = styled.div`
   margin-right: ${(p) => p.theme.spacing.xxs};
 `;
 
-export { Wrapper, Header, Name, Info, CheckWrapper, IconWrapper, StyledActionMenu, Tag };
+const TagWrapper = styled.div`
+  display: flex;
+  margin-top: ${(p) => p.theme.spacing.xs};
+`;
+
+export { Wrapper, Header, Name, Info, CheckWrapper, IconWrapper, StyledActionMenu, Tag, TagWrapper };

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

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import { CheckField, ElementsTooltip, Tooltip } from "@ax/components";
+import { CheckField, ElementsTooltip, Tag, 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 { useModal } from "@ax/hooks";
 
 import { getFileIcon } from "../helpers";
 import { DeleteFileModal, MoveItemModal } from "../atoms";
@@ -17,6 +17,7 @@ const ListItem = (props: IProps) => {
     isAllowedToDelete,
     isAllowedToEdit,
     isAllowedToMove,
+    isSearching,
     onChange,
     onClick,
     onDelete,
@@ -73,7 +74,7 @@ const ListItem = (props: IProps) => {
   };
 
   const handleMoveFile = () => {
-    if(folder !== selectedFolder) {
+    if (folder?.folderId !== selectedFolder) {
       onMove(id, selectedFolder);
       isMoveOpen && toggleMoveModal();
       setSelectedFolder(0);
@@ -102,6 +103,17 @@ const ListItem = (props: IProps) => {
   const FileTitle = () =>
     fileName.length > 50 ? <Tooltip content={fileName}>{trimText(fileName, 50)}</Tooltip> : <>{fileName}</>;
 
+  const FolderTag = () => {
+    if (!folder) return <></>;
+    return folder.folderName.length > 20 ? (
+      <Tooltip content={folder.folderName}>
+        <Tag type="square" text={trimText(folder.folderName,20)} icon="project" />
+      </Tooltip>
+    ) : (
+      <Tag type="square" text={folder.folderName} icon="project" />
+    );
+  };
+
   return (
     <>
       <S.ItemRow role="rowgroup" selected={isSelected}>
@@ -111,7 +123,7 @@ const ListItem = (props: IProps) => {
         <S.IconCell role="cell" onClick={handleClick}>
           <img src={iconUrl} alt={`${fileType} Icon`} />
         </S.IconCell>
-        <S.NameCell role="cell" onClick={handleClick}>
+        <S.NameCell role="cell" onClick={handleClick} data-testid="file-name-cell">
           <FileTitle />
         </S.NameCell>
         <S.TypeCell role="cell" onClick={handleClick}>
@@ -136,6 +148,11 @@ const ListItem = (props: IProps) => {
             />
           )}
         </S.TagsCell>
+        {isSearching && (
+          <S.FolderCell role="cell">
+            <FolderTag />
+          </S.FolderCell>
+        )}
         <S.ActionsCell role="cell">
           <S.StyledActionMenu icon="more" options={menuOptions} tooltip="File actions" />
         </S.ActionsCell>
@@ -171,6 +188,7 @@ interface IProps {
   isAllowedToEdit: boolean;
   isAllowedToDelete: boolean;
   isAllowedToMove: boolean;
+  isSearching: boolean;
   onChange(e: ICheck): void;
   onClick(file: IFile): void;
   onDelete(fileID: number): void;

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

@@ -53,7 +53,7 @@ const FileType = styled.div`
 const SizeCell = styled(Cell)`
   ${(p) => p.theme.textStyle.uiXS};
   color: ${(p) => p.theme.colors.textMediumEmphasis};
-  flex: 0 0 80px;
+  flex: 0 0 85px;
   align-items: center;
 `;
 
@@ -68,6 +68,11 @@ const TagsCell = styled(Cell)`
   flex: 0 0 300px;
 `;
 
+const FolderCell = styled(Cell)`
+  flex: 0 0 200px;
+  align-content: flex-start;
+`;
+
 const ActionsCell = styled(Cell)`
   flex: 0 0 70px;
   text-align: center;
@@ -85,4 +90,5 @@ export {
   UpdatedCell,
   TagsCell,
   ActionsCell,
+  FolderCell,
 };

package/src/modules/FileDrive/atoms.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { IModal } from "@ax/types";
 import { Modal, FieldsBehavior } from "@ax/components";
 import FolderTree from "./FolderTree";
-import { IFormState } from ".";
+import { IFolderFormState } from ".";
 
 import * as S from "./style";
 
@@ -149,9 +149,32 @@ const MoveItemModal = (props: IMoveModalProps): JSX.Element => {
   );
 };
 
+const NotSavedModal = (props: IModal): JSX.Element => {
+  const { isOpen, toggleModal, mainModalAction, secondaryModalAction } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      hide={toggleModal}
+      size="S"
+      title="Unsaved changes"
+      mainAction={mainModalAction}
+      secondaryAction={secondaryModalAction}
+      isChild={true}
+    >
+      {
+        <S.ModalContent>
+          Some content is not saved on this file. If you exit without saving it, it will be lost. Do you want to discard
+          your changes?
+        </S.ModalContent>
+      }
+    </Modal>
+  );
+};
+
 interface INewModalProps extends IModal {
-  form: IFormState;
-  setForm(form: IFormState): void;
+  form: IFolderFormState;
+  setForm(form: IFolderFormState): void;
 }
 
 interface IRenameModalProps extends IModal {
@@ -170,4 +193,4 @@ interface IMoveModalProps extends IModal {
   hideRoot?: boolean;
 }
 
-export { NewFolderModal, DeleteFolderModal, DeleteFileModal, MoveItemModal, RenameFolderModal };
+export { NewFolderModal, DeleteFolderModal, DeleteFileModal, MoveItemModal, RenameFolderModal, NotSavedModal };

package/src/modules/FileDrive/helpers.tsx

@@ -1,19 +1,19 @@
 const getFileIcon = (type: string) => {
-    switch (type) {
-      case "pdf":
-        return "pdf.png";
-      case "doc":
-      case "docx":
-        return "word.png";
-      case "xls":
-      case "xlsx":
-      case "csv":
-        return "excel.png";
-      case "zip":
-        return "zip.png";
-      default:
-        return "zip.png";
-    }
-  };
+  switch (type) {
+    case "pdf":
+      return "pdf.png";
+    case "doc":
+    case "docx":
+      return "word.png";
+    case "xls":
+    case "xlsx":
+    case "csv":
+      return "excel.png";
+    case "zip":
+      return "zip.png";
+    default:
+      return "zip.png";
+  }
+};
 
-  export { getFileIcon }
+export { getFileIcon };

package/src/modules/FileDrive/hooks.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+
+const useSortedListStatus = () => {
+  const sortedInitialState: {
+    isAscending: boolean;
+    sortedByName: boolean;
+    sortedByDate: boolean;
+    sortedBySize: boolean;
+  } = {
+    isAscending: false,
+    sortedByName: false,
+    sortedByDate: false,
+    sortedBySize: false,
+  };
+
+  const [sortedListStatus, setSortedListStatus] = useState(sortedInitialState);
+
+  return {
+    sortedListStatus,
+    setSortedListStatus,
+  };
+};
+
+const useFilterQuery = () => {
+  const initialQueryValues = {
+    order: "",
+    filterType: "all",
+    filterUsage: "",
+  };
+
+  const [query, setQuery] = useState(initialQueryValues);
+
+  const setFilterQuery = (filterValues: any) => {
+    const { order, filterType, filterUsage } = filterValues;
+    let filterQuery = "";
+
+    const currentQuery = (pointer: string, values: string) => {
+      return filterQuery ? filterQuery.concat(`&${pointer}=${values}`) : `${pointer}=${values}`;
+    };
+
+    if (order) {
+      filterQuery = currentQuery("order", order);
+    }
+
+    if (filterType) {
+      filterQuery = currentQuery("filterType", filterType);
+    }
+
+    if (filterUsage) {
+      filterQuery = currentQuery("filterUsage", filterUsage);
+    }
+
+    return filterQuery;
+  };
+
+  const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
+    const { order, filterType, filterUsage } = query;
+    const orderMethod = isAscendent ? "asc" : "desc";
+    const filterValues = {
+      order: pointer === "order" ? `${filter}-${orderMethod}` : order,
+      filterType: pointer === "filterType" ? filter : filterType,
+      filterUsage: pointer === "filterUsage" ? filter : filterUsage,
+    };
+
+    setQuery(filterValues);
+
+    return filterValues;
+  };
+
+  return {
+    setFiltersSelection,
+    setFilterQuery,
+    filterValues: query,
+  };
+};
+
+export { useSortedListStatus, useFilterQuery };