@griddo/ax 10.3.2 → 10.3.4

package/src/modules/FileDrive/index.tsx

@@ -15,9 +15,10 @@ import {
   Modal,
   Tabs,
   BackFolder,
+  SearchField,
 } from "@ax/components";
 import { IBulkAction, IFile, IFilesFolder, IFolder, IFolderTree, IGetFolderParams, IRootState } from "@ax/types";
-import { useBulkSelection, useModal, usePermission, useToast } from "@ax/hooks";
+import { useBulkSelection, useIsDirty, useModal, usePermission, useResizable, useToast } from "@ax/hooks";
 import { fileDriveActions } from "@ax/containers/FileDrive";
 
 import GridItem from "./GridItem";
@@ -29,7 +30,12 @@ import FolderTree from "./FolderTree";
 import FileDragAndDrop from "./FileDragAndDrop";
 import FileModal from "./FileModal";
 import BulkGridHeader from "./BulkGridHeader";
-import { DeleteFileModal, MoveItemModal, NewFolderModal } from "./atoms";
+import { DeleteFileModal, MoveItemModal, NewFolderModal, NotSavedModal } from "./atoms";
+import { useFilterQuery, useSortedListStatus } from "./hooks";
+import { getSortedListStatus } from "./utils";
+import Type from "./FileFilters/Type";
+import SortBy from "./FileFilters/SortBy";
+import Usage from "./FileFilters/Usage";
 
 import * as S from "./style";
 
@@ -47,6 +53,7 @@ const FileDrive = (props: IProps) => {
     moveFile,
     updateDisplayMode,
     updateTab,
+    downloadFiles,
     breadcrumb,
     isLoading,
     isSaving,
@@ -71,6 +78,7 @@ const FileDrive = (props: IProps) => {
   const { isOpen: isUploadOpen, toggleModal: toggleUploadModal } = useModal();
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
   const { isOpen: isMoveOpen, toggleModal: toggleMoveModal } = useModal();
+  const { isOpen: isSaveOpen, toggleModal: toggleSaveModal } = useModal();
   const { isOpen, toggleModal } = useModal();
   const { isVisible, toggleToast, setIsVisible } = useToast();
   const { isVisible: isNewVisible, toggleToast: toggleNewToast, setIsVisible: setIsNewVisible } = useToast();
@@ -82,8 +90,19 @@ const FileDrive = (props: IProps) => {
     setIsVisible: setIsMoveFolderVisible,
   } = useToast();
 
-  const initState = { name: "", folderID: currentFolderID };
-  const [folderForm, setFolderForm] = useState<IFormState>(initState);
+  const [ref] = useResizable();
+
+  const initFolderState = { name: "", folderID: currentFolderID };
+  const [folderForm, setFolderForm] = useState<IFolderFormState>(initFolderState);
+  const { setFiltersSelection, setFilterQuery, filterValues } = useFilterQuery();
+  const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
+  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const isSearching = searchQuery.length > 0;
+
+  const initFileState: IFileFormState = { title: "", alt: "", tags: [] };
+  const [fileForm, setFileForm] = useState(initFileState);
+  const { isDirty, resetDirty } = useIsDirty(fileForm);
 
   const isSiteView = !!currentSiteID;
   const isTabGlobal = selectedTab === "global";
@@ -91,7 +110,7 @@ const FileDrive = (props: IProps) => {
   const hasFolders = !!folders.length;
   const isRoot = !breadcrumb.length;
   const isGrid = displayMode === "grid";
-  const validFormats = ["pdf", "doc", "docx", "xls", "xlsx", "zip"];
+  const validFormats = ["pdf", "doc", "docx", "xls", "xlsx", "zip", "csv"];
 
   const allowedToAccessGlobalFromSite = usePermission("mediaGallery.accessToGlobalFileDriveFromSite");
 
@@ -126,10 +145,12 @@ const FileDrive = (props: IProps) => {
     const params = {
       siteID,
       folderID: currentFolderID,
+      search: searchQuery,
+      query: currentFilterQuery,
     };
 
     return params;
-  }, [currentFolderID, selectedTab]);
+  }, [currentFolderID, selectedTab, searchQuery, currentFilterQuery]);
 
   useLayoutEffect(() => {
     return () => {
@@ -171,13 +192,14 @@ const FileDrive = (props: IProps) => {
 
   const handleSelectedTab = (tab: "local" | "global") => {
     if (tab !== selectedTab) {
+      setSearchQuery("");
       updateCurrentFolder(null);
       updateTab(tab);
     }
   };
 
   const handleNewFolder = () => {
-    setFolderForm(initState);
+    setFolderForm(initFolderState);
     !isNewOpen && toggleNewModal();
   };
 
@@ -233,11 +255,20 @@ const FileDrive = (props: IProps) => {
   };
 
   const handleCloseModal = () => {
+    if(isDirty){
+      toggleSaveModal();
+    } else {
+      resetFileModal();
+    }
+  };
+
+  const resetFileModal = () => {
     setFileSelected(null);
     setGalleryItems(filesIds);
     setGalleryDelete(true);
+    resetDirty();
     toggleModal();
-  };
+  }
 
   const handleDeleteFile = async (fileID: number) => {
     const isDeleted = await deleteFile(fileID, siteID);
@@ -298,6 +329,33 @@ const FileDrive = (props: IProps) => {
     }
   };
 
+  const handleDownloadBulk = async () => {
+    await downloadFiles(selectedItems.all, true);
+    resetBulkSelection();
+  };
+
+  const handleUpdateCurrentFolder = (folderID: number | null) => {
+    setSearchQuery("");
+    updateCurrentFolder(folderID);
+  };
+
+  const handleDownload = async (fileID: number, fileName: string) => await downloadFiles(fileID, false, fileName);
+
+  const sortItems = async (orderPointer: string, isAscending: boolean) => {
+    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) => {
+    const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
+    const filterQuery = setFilterQuery(filtersSelection);
+    setCurrentFilterQuery(filterQuery);
+  };
+
   let bulkActions: IBulkAction[] = [];
 
   if (allowedToEditFile) {
@@ -315,6 +373,15 @@ const FileDrive = (props: IProps) => {
     ];
   }
 
+  bulkActions = [
+    ...bulkActions,
+    {
+      icon: "download",
+      text: "download",
+      action: handleDownloadBulk,
+    },
+  ];
+
   if (allowedToDeleteFile) {
     bulkActions = [
       ...bulkActions,
@@ -334,11 +401,12 @@ const FileDrive = (props: IProps) => {
       totalItems={totalItems}
       selectItems={selectItems}
       bulkActions={bulkActions}
+      isSearching={isSearching}
     />
   );
 
   const GridList = () => (
-    <S.GridWrapper>
+    <S.GridWrapper isSearching={isSearching}>
       {items.map((file: IFile, i: number) => {
         const isItemSelected = isSelected(file.id);
         return (
@@ -346,14 +414,15 @@ const FileDrive = (props: IProps) => {
             file={file}
             isSelected={isItemSelected}
             onChange={addToBulkSelection}
-            key={file.fileName}
+            key={`${file.fileName}${file.id}`}
             onClick={handleClick}
             onDelete={handleDeleteFile}
             onMove={handleMoveFile}
             currentFolderID={currentFolderID}
             isAllowedToDelete={allowedToDeleteFile}
             isAllowedToEdit={allowedToEditFile}
-            isAllowedToMove={!isRoot || (isRoot && folders.length > 0)}
+            isAllowedToMove={!isRoot || (isRoot && (folders.length > 0 || isSearching))}
+            isSearching={isSearching}
           />
         );
       })}
@@ -369,14 +438,15 @@ const FileDrive = (props: IProps) => {
             file={file}
             isSelected={isItemSelected}
             onChange={addToBulkSelection}
-            key={file.fileName}
+            key={`${file.fileName}${file.id}`}
             onClick={handleClick}
             onDelete={handleDeleteFile}
             onMove={handleMoveFile}
             currentFolderID={currentFolderID}
             isAllowedToDelete={allowedToDeleteFile}
             isAllowedToEdit={allowedToEditFile}
-            isAllowedToMove={!isRoot || (isRoot && folders.length > 0)}
+            isAllowedToMove={!isRoot || (isRoot && (folders.length > 0 || isSearching))}
+            isSearching={isSearching}
           />
         );
       })}
@@ -421,6 +491,12 @@ const FileDrive = (props: IProps) => {
     action: () => toggleUploadModal(),
   };
 
+  const emptySearchStateProps = {
+    icon: "search",
+    title: "Oh! No Results Found",
+    message: "We couldn’t find what you are looking for. Please, try another search.",
+  };
+
   const mainNewModalAction = {
     title: isSaving ? "Saving..." : "Create New Folder",
     onClick: () => handleCreateNewFolder(),
@@ -443,6 +519,18 @@ const FileDrive = (props: IProps) => {
 
   const secondaryMoveModalAction = { title: "Cancel", onClick: handleModalClose };
 
+  const handleMainAction = () => {
+    toggleSaveModal();
+    resetFileModal();
+  }
+
+  const mainSaveModalAction = {
+    title: "Yes, discard changes",
+    onClick: () => handleMainAction(),
+  };
+
+  const secondarySaveModalAction = { title: "Cancel", onClick: toggleSaveModal };
+
   const foldersIcon = isPanelOpen ? <Icon name="closePanel" size="24" /> : <Icon name="openPanel" size="24" />;
 
   const tabs = ["local", "global"];
@@ -458,19 +546,27 @@ const FileDrive = (props: IProps) => {
       <></>
     );
 
+  const Filters = () => (
+    <S.Filters>
+      <Type filterItems={filterItems} value={filterValues["filterType"]} />
+      <SortBy sortItems={sortItems} sortedState={sortedListStatus} />
+      <Usage filterItems={filterItems} value={filterValues["filterUsage"]} />
+    </S.Filters>
+  );
+
   return (
     <MainWrapper backLink={false} title="File Drive Manager" rightButton={rightButtonProps}>
       <S.Wrapper>
-        <S.FolderPanel isOpen={isPanelOpen}>
+        <S.FolderPanel isOpen={isPanelOpen} ref={ref} style={{ width: isPanelOpen ? "240px" : "0" }}>
           <S.FolderPanelContent>
             <FolderTree
               folderID={currentFolderID || 0}
-              onClick={updateCurrentFolder}
+              onClick={handleUpdateCurrentFolder}
               title="Folders"
               createAction={allowedToAddFile ? handleNewFolder : undefined}
-              trimNames={true}
             />
           </S.FolderPanelContent>
+          <S.ResizeHandle className="resizer" />
         </S.FolderPanel>
         <S.ContentWrapper>
           <ErrorToast />
@@ -484,6 +580,7 @@ const FileDrive = (props: IProps) => {
                     <Tabs tabs={tabs} active={selectedTab} setSelectedTab={handleSelectedTab} noMargins />
                   </S.TabsWrapper>
                 )}
+                {!isSiteView && <Filters />}
                 <S.DisplayModeWrapper>
                   <IconAction icon="Grid2" onClick={() => changeDisplayMode("grid")} active={displayMode === "grid"} />
                   <IconAction
@@ -493,7 +590,11 @@ const FileDrive = (props: IProps) => {
                   />
                 </S.DisplayModeWrapper>
               </S.FiltersBar>
-              {!isRoot && <Breadcrumb breadcrumb={breadcrumb} onClick={updateCurrentFolder} />}
+              <S.FiltersBar isSite={false}>
+                {isSiteView && <Filters />}
+                <SearchField onChange={setSearchQuery} placeholder="Search" value={searchQuery} autoFocus={false} />
+              </S.FiltersBar>
+              {!isRoot && <Breadcrumb breadcrumb={breadcrumb} onClick={handleUpdateCurrentFolder} />}
               {(hasFolders || !isRoot) && (
                 <S.SectionWrapper>
                   <S.SectionHeader>
@@ -511,13 +612,13 @@ const FileDrive = (props: IProps) => {
                       {folders.map((folder: IFolder) => (
                         <FolderItem
                           folder={folder}
-                          onClick={updateCurrentFolder}
+                          onClick={handleUpdateCurrentFolder}
                           onDelete={handleDeleteFolder}
-                          key={folder.folderName}
+                          key={`${folder.folderName}${folder.id}`}
                           toggleToast={toggleMoveFolderToast}
                           isAllowedToDelete={allowedToDeleteFile}
                           isAllowedToEdit={allowedToEditFile}
-                          isAllowedToMove={!isRoot || (isRoot && folders.length > 1)}
+                          isAllowedToMove={!isRoot || (isRoot && (folders.length > 1 || isSearching))}
                         />
                       ))}
                     </S.FoldersGrid>
@@ -537,7 +638,7 @@ const FileDrive = (props: IProps) => {
                       bulkActions={bulkActions}
                     />
                   )}
-                  {!hasFolders && isRoot && <NewFolderButton />}
+                  {!hasFolders && isRoot && !isSearching && <NewFolderButton />}
                 </S.SectionHeader>
                 <S.DocumentsWrapper>
                   {items.length > 0 ? (
@@ -548,7 +649,7 @@ const FileDrive = (props: IProps) => {
                     )
                   ) : (
                     <S.EmptyStateWrapper data-testid="empty-state">
-                      <EmptyState {...emptyProps} />
+                      {isSearching ? <EmptyState {...emptySearchStateProps} /> : <EmptyState {...emptyProps} />}
                     </S.EmptyStateWrapper>
                   )}
                 </S.DocumentsWrapper>
@@ -588,6 +689,11 @@ const FileDrive = (props: IProps) => {
             activeDelete={galleryDelete && allowedToDeleteFile}
             setFileSelected={setFileSelected}
             isAllowedToEdit={allowedToEditFile}
+            handleDownload={handleDownload}
+            form={fileForm}
+            setForm={setFileForm}
+            isDirty={isDirty}
+            resetDirty={resetDirty}
           />
         )}
       </Modal>
@@ -610,6 +716,14 @@ const FileDrive = (props: IProps) => {
           setFolder={setSelectedFolder}
         />
       )}
+      {isSaveOpen && (
+        <NotSavedModal
+          isOpen={isSaveOpen}
+          toggleModal={toggleSaveModal}
+          mainModalAction={mainSaveModalAction}
+          secondaryModalAction={secondarySaveModalAction}
+        />
+      )}
       {isVisible && <Toast {...toastDeleteFolderProps} />}
       {isDeleteVisible && <Toast {...toastDeleteFileProps} />}
       {isNewVisible && <Toast {...toastNewProps} />}
@@ -637,13 +751,20 @@ interface IProps {
   moveFile(fileID: number | number[], folderID: number, siteID: number | "global"): Promise<boolean>;
   updateDisplayMode(displayMode: "grid" | "list"): Promise<void>;
   updateTab(tab: "local" | "global"): Promise<void>;
+  downloadFiles(fileID: number | number[], zip: boolean, fileName?: string): Promise<void>;
 }
 
-export interface IFormState {
+export interface IFolderFormState {
   name: string;
   folderID: number | null;
 }
 
+export interface IFileFormState {
+  title: string;
+  alt: string;
+  tags: string[];
+}
+
 const mapDispatchToProps = {
   getFolderContent: fileDriveActions.getFolderContent,
   getFoldersTree: fileDriveActions.getFoldersTree,
@@ -654,6 +775,7 @@ const mapDispatchToProps = {
   moveFile: fileDriveActions.moveFile,
   updateDisplayMode: fileDriveActions.updateDisplayMode,
   updateTab: fileDriveActions.updateTab,
+  downloadFiles: fileDriveActions.downloadFiles,
 };
 
 const mapStateToProps = (state: IRootState) => ({

package/src/modules/FileDrive/style.tsx

@@ -8,11 +8,13 @@ const Wrapper = styled.div`
 `;
 
 const FolderPanel = styled.div<{ isOpen: boolean }>`
+  position: relative;
   background-color: ${(p) => p.theme.color.uiBackground02};
   border-right: ${(p) => `1px solid ${p.theme.color.uiLine}`};
   width: ${(p) => (p.isOpen ? "240px" : "0")};
+  min-width: ${(p) => (p.isOpen ? "240px" : "0")};
+  max-width: ${(p) => (p.isOpen ? "50%" : "0")};
   overflow: hidden;
-  transition: width 0.8s ease-out;
   flex-shrink: 0;
 `;
 
@@ -64,24 +66,29 @@ const DocumentsWrapper = styled.div`
   width: 100%;
 `;
 
-const GridWrapper = styled.div`
+const GridWrapper = styled.div<{ isSearching: boolean }>`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  grid-template-rows: repeat(auto-fit, minmax(154px, 154px));
+  grid-template-rows: ${(p) =>
+    p.isSearching ? "repeat(auto-fit, minmax(180px, 180px))" : "repeat(auto-fit, minmax(154px, 154px))"};
   gap: ${(p) => p.theme.spacing.s};
   width: 100%;
   justify-content: start;
 `;
 
-const FiltersBar = styled.div<{isSite: boolean}>`
+const FiltersBar = styled.div<{ isSite: boolean }>`
   display: flex;
   background-color: ${(p) => p.theme.color.uiBackground02};
-  padding: ${(p) => p.isSite ? `${p.theme.spacing.s} ${p.theme.spacing.m} 0 ${p.theme.spacing.m}` : `${p.theme.spacing.s} ${p.theme.spacing.m}`};
+  padding: ${(p) =>
+    p.isSite
+      ? `${p.theme.spacing.s} ${p.theme.spacing.m} 0 ${p.theme.spacing.m}`
+      : `${p.theme.spacing.s} ${p.theme.spacing.m}`};
   border-bottom: ${(p) => `1px solid ${p.theme.color.uiLine}`};
 `;
 
 const DisplayModeWrapper = styled.div`
   margin-left: auto;
+  flex-shrink: 0;
   button:last-child {
     margin-left: ${(p) => p.theme.spacing.xxs};
   }
@@ -120,7 +127,32 @@ const NoMarginFieldsBehavior = styled(FieldsBehavior)`
 `;
 
 const TabsWrapper = styled.div`
-  width: ${p => `calc(${p.theme.spacing.xl} * 3)`};
+  width: ${(p) => `calc(${p.theme.spacing.xl} * 3)`};
+`;
+
+const Filters = styled.div`
+  display: flex;
+  align-items: center;
+  width: 50%;
+  flex-shrink: 0;
+  & > * {
+    &:not(:last-child) {
+      margin-right: ${p => p.theme.spacing.m};
+    }
+  }
+`;
+
+const ResizeHandle = styled.div`
+  position: absolute;
+  width: 2px;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  cursor: col-resize;
+
+  &:hover {
+    background-color: ${(p) => p.theme.color.interactive01};
+  }
 `;
 
 export {
@@ -143,4 +175,6 @@ export {
   ModalContent,
   NoMarginFieldsBehavior,
   TabsWrapper,
+  ResizeHandle,
+  Filters,
 };

package/src/modules/FileDrive/utils.tsx

@@ -0,0 +1,19 @@
+const getSortedListStatus = (orderPointer: string, isAscending: boolean): ISortedListStatus => {
+  const sortedListStatus = {
+    isAscending,
+    sortedByName: orderPointer === "name",
+    sortedByDate: orderPointer === "date",
+    sortedBySize: orderPointer === "size",
+  };
+
+  return sortedListStatus;
+};
+
+export { getSortedListStatus };
+
+interface ISortedListStatus {
+  isAscending: boolean;
+  sortedByName: boolean;
+  sortedByDate: boolean;
+  sortedBySize: boolean;
+}

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/index.tsx

@@ -398,7 +398,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
         )}
         {!isAllPages && activeColumns.includes("site") && (
           <S.SiteCell role="cell">
-            <ElementsTooltip elements={availableSiteNames} elementsPerRow={3} />
+            <ElementsTooltip elements={availableSiteNames} elementsPerRow={3} maxChar={30} />
           </S.SiteCell>
         )}
         {activeColumns.includes("live") && (

package/src/types/index.tsx

@@ -911,7 +911,7 @@ export interface IFile {
   alt: string;
   title: string;
   site: number | null;
-  folder: number | null;
+  folder: { folderId: number; folderName: string } | null;
 }
 
 export interface IFolder {
@@ -933,8 +933,7 @@ export interface IGetFolderParams {
   folderID: number | null;
   loading?: boolean;
   search?: string;
-  filter?: string;
-  order?: string;
+  query?: string;
 }
 
 export interface IActionMenuOption {