@griddo/ax 10.2.25 → 10.3.0

package/src/components/Modal/style.tsx

@@ -26,11 +26,11 @@ const getHeight = (size: string | undefined) => {
   }
 };
 
-export const ModalOverlay = styled.div`
+export const ModalOverlay = styled.div<{ isChild?: boolean }>`
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1250;
+  z-index: ${(p) => (p.isChild ? "1260" : "1240")};
   width: 100vw;
   height: 100vh;
   background: ${(p) => p.theme.color.overlay};
@@ -39,11 +39,11 @@ export const ModalOverlay = styled.div`
   }
 `;
 
-export const ModalWrapper = styled.div`
+export const ModalWrapper = styled.div<{ isChild?: boolean }>`
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1250;
+  z-index: ${(p) => (p.isChild ? "1270" : "1250")};
   width: 100%;
   height: 100%;
   overflow-x: hidden;
@@ -51,7 +51,7 @@ export const ModalWrapper = styled.div`
   outline: 0;
 `;
 
-export const Modal = styled.div<{ size: string | undefined }>`
+export const Modal = styled.div<{ size?: string; height?: number }>`
   z-index: 100;
   display: flex;
   flex-flow: column nowrap;
@@ -60,7 +60,7 @@ export const Modal = styled.div<{ size: string | undefined }>`
   margin: auto;
   border-radius: 4px;
   width: ${(p) => getWidth(p.size)};
-  height: ${(p) => getHeight(p.size)};
+  height: ${(p) => (p.height ? `${p.height}px` : getHeight(p.size))};
   box-shadow: ${(p) => p.theme.shadow.shadowXL};
   top: 50%;
   transform: translateY(-50%);

package/src/components/ProgressBar/index.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import * as S from "./style";
 
 const ProgressBar = (props: IProgressBarProps): JSX.Element => {
-  const { percentage } = props;
+  const { percentage, inverse = false } = props;
 
   const percentageLimits = (min: number, value: number, max: number) => {
     return Math.min(Math.max(min, value), max);
@@ -11,13 +11,14 @@ const ProgressBar = (props: IProgressBarProps): JSX.Element => {
 
   return (
     <S.Tracker data-testid="progressbar-tracker">
-      <S.ProgressInTracker percentage={percentageLimits(0, percentage, 100)} />
+      <S.ProgressInTracker percentage={percentageLimits(0, percentage, 100)} inverse={inverse} />
     </S.Tracker>
   );
 };
 
 export interface IProgressBarProps {
   percentage: number;
+  inverse?: boolean;
 }
 
 export default ProgressBar;

package/src/components/ProgressBar/style.tsx

@@ -1,15 +1,17 @@
 import styled from "styled-components";
 
-export const Tracker = styled.div`
+const Tracker = styled.div`
   height: ${p => p.theme.spacing.xxs};
   width: 100%;
   border-radius: 2px;
   background-color: #e6e7f8;
 `;
 
-export const ProgressInTracker = styled.div<{ percentage: number }>`
-  background-color: ${p => p.theme.color.interactive01};
+const ProgressInTracker = styled.div<{ percentage: number; inverse: boolean }>`
+  background-color: ${p => p.inverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01};
   border-radius: 2px;
   height: 100%;
   width: ${p => p.percentage}%;
 `;
+
+export { Tracker, ProgressInTracker }

package/src/components/TableList/index.tsx

@@ -6,7 +6,7 @@ import { Loading, Pagination } from "@ax/components";
 import * as S from "./style";
 
 const TableList = (props: ITableListProps): JSX.Element => {
-  const { tableHeader, children, pagination, isLoading, onScroll, hasFixedHeader, tableRef } = props;
+  const { tableHeader, children, pagination, isLoading, onScroll, hasFixedHeader, tableRef, className } = props;
 
   const showPagination = pagination && pagination.totalItems > pagination.itemsPerPage;
 
@@ -17,7 +17,7 @@ const TableList = (props: ITableListProps): JSX.Element => {
           <S.TableHeader hasFixedHeader={hasFixedHeader} data-testid="table-list-header">
             {tableHeader}
           </S.TableHeader>
-          {isLoading ? <Loading /> : <S.TableBody data-testid="table-body">{children}</S.TableBody>}
+          {isLoading ? <Loading /> : <S.TableBody data-testid="table-body" className={className}>{children}</S.TableBody>}
         </>
       </S.Table>
       <S.PaginationWrapper>
@@ -46,6 +46,7 @@ export interface ITableListProps {
   onScroll?: any;
   hasFixedHeader?: boolean;
   tableRef?: any;
+  className?: string;
 }
 
 export default connect(mapStateToProps, null)(TableList);

package/src/components/TableList/style.tsx

@@ -35,6 +35,10 @@ const Header = styled.div<{isActive?: boolean}>`
 
 const TableBody = styled.div`
   padding: 0 ${(p) => p.theme.spacing.m};
+
+  &.no-padding {
+    padding: 0;
+  }
 `;
 
 const CheckHeader = styled(Header)`

package/src/components/Toast/style.tsx

@@ -9,7 +9,7 @@ const Wrapper = styled.div<{ isEditor: boolean }>`
   align-items: center;
   border-radius: 4px;
   position: fixed;
-  z-index: 1100;
+  z-index: 2000;
   bottom: ${(p) => p.theme.spacing.m};
   left: ${(p) => (p.isEditor ? `calc(${p.theme.spacing.m} * 1)` : `calc(${p.theme.spacing.m} * 4)`)};
   padding-left: ${(p) => p.theme.spacing.m};
@@ -68,4 +68,4 @@ const Buttons = styled.div`
    align-items: center;
 `;
 
-export { Wrapper, Text, ButtonWrapper, Buttons }
+export { Wrapper, Text, ButtonWrapper, Buttons }

package/src/components/index.tsx

@@ -55,6 +55,7 @@ import {
 
 import ActionMenu from "./ActionMenu";
 import Avatar from "./Avatar";
+import BackFolder from "./BackFolder";
 import Breadcrumb from "./Breadcrumb";
 import Browser from "./Browser";
 import BrowserContent from "./BrowserContent";
@@ -69,6 +70,7 @@ import ErrorCenter from "./ErrorCenter";
 import ErrorToast from "./ErrorToast";
 import FieldContainer from "./FieldContainer";
 import FieldsBehavior from "./FieldsBehavior";
+import FileGallery from "./FileGallery";
 import Flag from "./Flag";
 import FloatingMenu from "./FloatingMenu";
 import FloatingPanel from "./FloatingPanel";
@@ -160,6 +162,7 @@ export {
   // Components
   ActionMenu,
   Avatar,
+  BackFolder,
   Breadcrumb,
   Browser,
   BrowserContent,
@@ -174,6 +177,7 @@ export {
   ErrorToast,
   FieldContainer,
   FieldsBehavior,
+  FileGallery,
   Flag,
   FloatingMenu,
   FloatingPanel,

package/src/containers/FileDrive/actions.tsx

@@ -0,0 +1,386 @@
+import { Dispatch } from "redux";
+import { IFile, IFilesFolder, IFolder, IFolderTree, IGetFolderParams } from "@ax/types";
+import { files } from "@ax/api";
+import { handleRequest, isReqOk } from "@ax/helpers";
+import { appActions } from "@ax/containers/App";
+import {
+  SET_BREADCRUMB,
+  SET_CURRENT_FOLDER,
+  SET_CURRENT_FOLDER_CONTENT,
+  SET_DISPLAY_MODE,
+  SET_FOLDERS_TREE,
+  SET_IS_UPLOADING,
+  SET_SELECTED_TAB,
+  SET_UPLOAD_ERROR,
+  SET_UPLOAD_SUCCESS,
+} from "./constants";
+import {
+  ISetBreadcrumb,
+  ISetCurrentFolder,
+  ISetCurrentFolderContent,
+  ISetDisplayMode,
+  ISetFoldersTree,
+  ISetIsUploading,
+  ISetSelectedTab,
+  ISetUploadError,
+  ISetUploadSuccess,
+} from "./interfaces";
+import { getNewBreadcrumb } from "./utils";
+
+function setCurrentFolderContent(currentFolderContent: IFilesFolder | null): ISetCurrentFolderContent {
+  return { type: SET_CURRENT_FOLDER_CONTENT, payload: { currentFolderContent } };
+}
+
+function setCurrentFolder(currentFolderID: number | null): ISetCurrentFolder {
+  return { type: SET_CURRENT_FOLDER, payload: { currentFolderID } };
+}
+
+function setBreadcrumb(breadcrumb: IFolderTree[]): ISetBreadcrumb {
+  return { type: SET_BREADCRUMB, payload: { breadcrumb } };
+}
+
+function setFoldersTree(foldersTree: IFolderTree[]): ISetFoldersTree {
+  return { type: SET_FOLDERS_TREE, payload: { foldersTree } };
+}
+
+function setIsUploading(isUploading: boolean): ISetIsUploading {
+  return { type: SET_IS_UPLOADING, payload: { isUploading } };
+}
+
+function setUploadSuccess(isSuccess: boolean): ISetUploadSuccess {
+  return { type: SET_UPLOAD_SUCCESS, payload: { isUploading: false, isSuccess } };
+}
+
+function setUploadError(isError: boolean, errorMsg = ""): ISetUploadError {
+  return { type: SET_UPLOAD_ERROR, payload: { isUploading: false, isError, errorMsg } };
+}
+
+function setDisplayMode(displayMode: "grid" | "list"): ISetDisplayMode {
+  return { type: SET_DISPLAY_MODE, payload: { displayMode } };
+}
+
+function setSelectedTab(selectedTab: "local" | "global"): ISetSelectedTab {
+  return { type: SET_SELECTED_TAB, payload: { selectedTab } };
+}
+
+function getFolderContent(params: IGetFolderParams): (dispatch: Dispatch, getState: any) => Promise<void> {
+  return async (dispatch, getState) => {
+    try {
+      const { folderID, loading } = params;
+      const responseActions = {
+        handleSuccess: (data: IFilesFolder) => {
+          dispatch(setCurrentFolderContent(data));
+          updateBreadcrumb(folderID)(dispatch, getState);
+          dispatch(setUploadSuccess(false));
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+      const callback = async () => files.getFolderContent(params);
+
+      const setLoading = loading ? [appActions.setIsLoading] : [];
+
+      await handleRequest(callback, responseActions, setLoading)(dispatch);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+}
+
+function getFoldersTree(siteID: number | "global"): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    try {
+      const responseActions = {
+        handleSuccess: (data: IFolderTree[]) => dispatch(setFoldersTree(data)),
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+      const callback = async () => files.getFoldersTree(siteID);
+
+      await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+}
+
+function updateCurrentFolder(currentFolderID: number | null): (dispatch: Dispatch) => void {
+  return async (dispatch) => {
+    try {
+      dispatch(setCurrentFolder(currentFolderID));
+    } catch (e) {
+      console.log("Error", e);
+    }
+  };
+}
+
+function updateBreadcrumb(folderID: number | null): (dispatch: Dispatch, getState: any) => void {
+  return (dispatch, getState) => {
+    const {
+      fileDrive: { foldersTree },
+    } = getState();
+
+    const newBreadcrumb = getNewBreadcrumb(foldersTree, folderID);
+    dispatch(setBreadcrumb(newBreadcrumb));
+  };
+}
+
+function createNewFolder(data: {
+  folderName: string;
+  site: number | "global";
+  parentId?: number;
+}): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+  return async (dispatch, getState) => {
+    try {
+      const responseActions = {
+        handleSuccess: async () => {
+          await getFoldersTree(data.site)(dispatch);
+          await getFolderContent({ siteID: data.site, folderID: data.parentId || null })(dispatch, getState);
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+      const callback = async () => files.createFolder(data);
+
+      return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+function updateFolder(
+  folderID: number,
+  data: { parentId: number; folderName: string },
+  siteID: number | "global"
+): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+  return async (dispatch, getState) => {
+    try {
+      const {
+        fileDrive: { currentFolderID },
+      } = getState();
+
+      const responseActions = {
+        handleSuccess: async () => {
+          await getFolderContent({ siteID, folderID: currentFolderID })(dispatch, getState);
+          await getFoldersTree(siteID)(dispatch);
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+      const callback = async () => files.updateFolder(folderID, data);
+
+      return await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+function deleteFolder(folder: IFolder): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+  return async (dispatch, getState) => {
+    try {
+      const responseActions = {
+        handleSuccess: async () => {
+          await getFoldersTree(folder.site || "global")(dispatch);
+          await getFolderContent({ siteID: folder.site || "global", folderID: folder.parentId })(dispatch, getState);
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+      const callback = async () => files.deleteFolder(folder.id);
+
+      return await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+function uploadFile(
+  docFiles: File | File[],
+  folderID: number | null,
+  siteID: number | "global"
+): (dispatch: Dispatch) => Promise<IFile | null> {
+  return async (dispatch) => {
+    try {
+      dispatch(setIsUploading(true));
+
+      const filesArr = Array.isArray(docFiles) ? docFiles : [docFiles];
+      const uploadPromises = filesArr.map(async (file: File) => {
+        const form = new FormData();
+        form.append("file", file);
+        form.append("site", JSON.stringify(siteID));
+        folderID && form.append("folder", JSON.stringify(folderID));
+        const uploadedFile = await files.uploadFile(form);
+        return { ...uploadedFile, file };
+      });
+      const results = await Promise.all(uploadPromises);
+      const lastUploadedFile = results.reduce((lastResult, result) =>
+        result.data.id > lastResult.data.id ? result : lastResult
+      );
+
+      if (isReqOk(lastUploadedFile?.status)) {
+        dispatch(setIsUploading(false));
+        dispatch(setUploadSuccess(true));
+        return lastUploadedFile.data;
+      } else {
+        dispatch(setUploadError(true, "Error uploading file"));
+        return null;
+      }
+    } catch (e) {
+      console.log(e);
+      return null;
+    }
+  };
+}
+
+function uploadError(error: boolean, msg?: string): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    dispatch(setUploadError(error, msg));
+  };
+}
+
+function updateFile(
+  fileID: number,
+  data: { title: string; alt: string; tags: string[] },
+  siteID: number | "global",
+  loading = true
+): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+  return async (dispatch, getState) => {
+    try {
+      const {
+        fileDrive: { currentFolderID },
+      } = getState();
+
+      const responseActions = {
+        handleSuccess: async () => {
+          await getFolderContent({ siteID, folderID: currentFolderID, loading })(dispatch, getState);
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+      const callback = async () => files.updateFile(fileID, data);
+
+      return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+function deleteFile(
+  fileID: number | number[],
+  siteID: number | "global"
+): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+  return async (dispatch, getState) => {
+    try {
+      const {
+        fileDrive: { currentFolderID },
+      } = getState();
+
+      const responseActions = {
+        handleSuccess: async () => {
+          await getFolderContent({ siteID, folderID: currentFolderID })(dispatch, getState);
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+      const callback = async () => (Array.isArray(fileID) ? files.deleteFilesBulk(fileID) : files.deleteFile(fileID));
+
+      return await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+function moveFile(
+  fileID: number | number[],
+  folderID: number,
+  siteID: number | "global"
+): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+  return async (dispatch, getState) => {
+    try {
+      const {
+        fileDrive: { currentFolderID },
+      } = getState();
+
+      const responseActions = {
+        handleSuccess: async () => {
+          await getFolderContent({ siteID, folderID: currentFolderID })(dispatch, getState);
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+      const callback = async () =>
+        Array.isArray(fileID) ? files.moveFilesBulk(fileID, folderID) : files.moveFile(fileID, folderID);
+
+      return await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+function updateDisplayMode(displayMode: "grid" | "list"): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    dispatch(setDisplayMode(displayMode));
+  };
+}
+
+function updateTab(tab: "local" | "global"): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    dispatch(setSelectedTab(tab));
+  };
+}
+
+function replaceFile(
+  docFile: File,
+  fileID: number,
+  keepUrl: boolean,
+  siteID: number | "global"
+): (dispatch: Dispatch, getState: any) => Promise<IFile | null> {
+  return async (dispatch, getState) => {
+    try {
+      dispatch(setIsUploading(true));
+
+      const {
+        fileDrive: { currentFolderID },
+      } = getState();
+
+      const form = new FormData();
+      form.append("file", docFile);
+
+      const result = await files.replaceFile(form, fileID, keepUrl);
+      if (isReqOk(result.status)) {
+        dispatch(setIsUploading(false));
+        dispatch(setUploadSuccess(true));
+        await getFolderContent({ siteID, folderID: currentFolderID })(dispatch, getState);
+        return result.data;
+      } else {
+        dispatch(setUploadError(true, "Error uploading file"));
+        return null;
+      }
+    } catch (e) {
+      console.log(e);
+      return null;
+    }
+  };
+}
+
+export {
+  getFolderContent,
+  updateCurrentFolder,
+  getFoldersTree,
+  updateBreadcrumb,
+  createNewFolder,
+  updateFolder,
+  deleteFolder,
+  uploadFile,
+  uploadError,
+  updateFile,
+  deleteFile,
+  moveFile,
+  updateDisplayMode,
+  updateTab,
+  replaceFile,
+};

package/src/containers/FileDrive/constants.tsx

@@ -0,0 +1,24 @@
+const NAME = "fileDrive";
+
+const SET_CURRENT_FOLDER_CONTENT = `${NAME}/SET_CURRENT_FOLDER_CONTENT`;
+const SET_CURRENT_FOLDER = `${NAME}/SET_CURRENT_FOLDER`;
+const SET_BREADCRUMB = `${NAME}/SET_BREADCRUMB`;
+const SET_FOLDERS_TREE = `${NAME}/SET_FOLDERS_TREE`;
+const SET_IS_UPLOADING = `${NAME}/SET_IS_UPLOADING`;
+const SET_UPLOAD_SUCCESS = `${NAME}/SET_UPLOAD_SUCCESS`;
+const SET_UPLOAD_ERROR = `${NAME}/SET_UPLOAD_ERROR`;
+const SET_DISPLAY_MODE = `${NAME}/SET_DISPLAY_MODE`;
+const SET_SELECTED_TAB = `${NAME}/SET_SELECTED_TAB`;
+
+export {
+  NAME,
+  SET_CURRENT_FOLDER_CONTENT,
+  SET_CURRENT_FOLDER,
+  SET_BREADCRUMB,
+  SET_FOLDERS_TREE,
+  SET_IS_UPLOADING,
+  SET_UPLOAD_ERROR,
+  SET_UPLOAD_SUCCESS,
+  SET_DISPLAY_MODE,
+  SET_SELECTED_TAB,
+};

package/src/containers/FileDrive/index.tsx

@@ -0,0 +1,7 @@
+import * as fileDriveActions from "./actions";
+import { fileDriveReducer } from "./reducer";
+
+export {
+  fileDriveActions,
+  fileDriveReducer
+};

package/src/containers/FileDrive/interfaces.tsx

@@ -0,0 +1,59 @@
+import { IFilesFolder, IFolder, IFolderTree } from "@ax/types";
+import {
+  SET_BREADCRUMB,
+  SET_CURRENT_FOLDER,
+  SET_CURRENT_FOLDER_CONTENT,
+  SET_DISPLAY_MODE,
+  SET_FOLDERS_TREE,
+  SET_IS_UPLOADING,
+  SET_SELECTED_TAB,
+  SET_UPLOAD_ERROR,
+  SET_UPLOAD_SUCCESS,
+} from "./constants";
+
+export interface ISetCurrentFolderContent {
+  type: typeof SET_CURRENT_FOLDER_CONTENT;
+  payload: { currentFolderContent: IFilesFolder | null };
+}
+
+export interface ISetCurrentFolder {
+  type: typeof SET_CURRENT_FOLDER;
+  payload: { currentFolderID: number | null };
+}
+
+export interface ISetBreadcrumb {
+  type: typeof SET_BREADCRUMB;
+  payload: { breadcrumb: IFolderTree[] };
+}
+
+export interface ISetFoldersTree {
+  type: typeof SET_FOLDERS_TREE;
+  payload: { foldersTree: IFolderTree[] };
+}
+
+export interface ISetIsUploading {
+  type: typeof SET_IS_UPLOADING;
+  payload: { isUploading: boolean };
+}
+
+export interface ISetUploadSuccess {
+  type: typeof SET_UPLOAD_SUCCESS;
+  payload: { isUploading: boolean; isSuccess: boolean };
+}
+
+export interface ISetUploadError {
+  type: typeof SET_UPLOAD_ERROR;
+  payload: { isUploading: boolean; isError: boolean; errorMsg: string };
+}
+
+export interface ISetDisplayMode {
+  type: typeof SET_DISPLAY_MODE;
+  payload: { displayMode: "grid" | "list"  };
+}
+
+export interface ISetSelectedTab {
+  type: typeof SET_SELECTED_TAB;
+  payload: { selectedTab: "local" | "global"  };
+}
+
+export type FileDriveActionsCreators = ISetCurrentFolderContent;