@griddo/ax 10.2.25 → 10.3.0

package/src/modules/FileDrive/style.tsx

@@ -0,0 +1,145 @@
+import styled from "styled-components";
+import { FieldsBehavior } from "@ax/components";
+
+const Wrapper = styled.div`
+  display: flex;
+  border-top: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  height: 100%;
+`;
+
+const FolderPanel = styled.div<{ isOpen: boolean }>`
+  background-color: ${(p) => p.theme.color.uiBackground02};
+  border-right: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  width: ${(p) => (p.isOpen ? "240px" : "0")};
+  overflow: hidden;
+  transition: width 0.8s ease-out;
+  flex-shrink: 0;
+`;
+
+const FolderPanelContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${(p) => p.theme.spacing.m};
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+`;
+
+const ContentWrapper = styled.div`
+  width: 100%;
+  overflow: auto;
+`;
+
+const SectionWrapper = styled.div`
+  width: 100%;
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
+const SectionHeader = styled.div`
+  display: flex;
+  margin-bottom: ${(p) => p.theme.spacing.s};
+  align-items: center;
+  justify-content: flex-end;
+`;
+
+const SectionTitle = styled.div`
+  ${(p) => p.theme.textStyle.headingM};
+  display: flex;
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  margin-right: auto;
+`;
+
+const ButtonWrapper = styled.div`
+  margin-left: ${(p) => p.theme.spacing.m};
+  flex-shrink: 0;
+`;
+
+const EmptyStateWrapper = styled.div`
+  width: 100%;
+`;
+
+const DocumentsWrapper = styled.div`
+  display: flex;
+  width: 100%;
+`;
+
+const GridWrapper = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-rows: repeat(auto-fit, minmax(154px, 154px));
+  gap: ${(p) => p.theme.spacing.s};
+  width: 100%;
+  justify-content: start;
+`;
+
+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}`};
+  border-bottom: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+`;
+
+const DisplayModeWrapper = styled.div`
+  margin-left: auto;
+  button:last-child {
+    margin-left: ${(p) => p.theme.spacing.xxs};
+  }
+`;
+
+const FoldersWrapper = styled.div`
+  width: 100%;
+  display: flex;
+`;
+
+const FoldersGrid = styled.div`
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-rows: repeat(auto-fit, minmax(64px, 64px));
+  gap: ${(p) => p.theme.spacing.s};
+  justify-content: start;
+`;
+
+const FoldersIconWrapper = styled.div`
+  width: 24px;
+  height: 24px;
+  margin-left: ${(p) => p.theme.spacing.xs};
+  cursor: pointer;
+`;
+
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+  p {
+    margin-bottom: ${(p) => p.theme.spacing.m};
+  }
+`;
+
+const NoMarginFieldsBehavior = styled(FieldsBehavior)`
+  margin-bottom: 0;
+`;
+
+const TabsWrapper = styled.div`
+  width: ${p => `calc(${p.theme.spacing.xl} * 3)`};
+`;
+
+export {
+  Wrapper,
+  FolderPanel,
+  FolderPanelContent,
+  ContentWrapper,
+  SectionWrapper,
+  SectionHeader,
+  SectionTitle,
+  ButtonWrapper,
+  DocumentsWrapper,
+  EmptyStateWrapper,
+  GridWrapper,
+  FiltersBar,
+  DisplayModeWrapper,
+  FoldersWrapper,
+  FoldersGrid,
+  FoldersIconWrapper,
+  ModalContent,
+  NoMarginFieldsBehavior,
+  TabsWrapper,
+};

package/src/modules/Sites/SitesList/index.tsx

@@ -36,7 +36,6 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     setListConfig,
     hasAnimation,
     setHasAnimation,
-    isLoading,
   } = props;
 
   const isMount = useIsMount();
@@ -370,7 +369,6 @@ interface ISitesProps {
   error: IError;
   config: ISiteListConfig;
   hasAnimation: boolean;
-  isLoading: boolean;
 }
 
 const mapStateToProps = (state: IRootState) => ({
@@ -381,7 +379,6 @@ const mapStateToProps = (state: IRootState) => ({
   error: state.app.error,
   config: state.sites.config,
   hasAnimation: state.app.hasAnimation,
-  isLoading: state.app.isLoading,
 });
 
 interface IDispatchProps {

package/src/routes/multisite.tsx

@@ -10,6 +10,7 @@ import Editor from "./../modules/GlobalEditor";
 import GlobalSettings from "./../modules/GlobalSettings";
 import AnalyticsSettings from "../modules/Analytics";
 import FramePreview from "../modules/FramePreview";
+import FileDrive from "../modules/FileDrive";
 
 export default [
   {
@@ -43,6 +44,14 @@ export default [
     icon: "Category",
     permission: "global.globalData.accessToTaxonomies",
   },
+  {
+    path: "/files",
+    component: FileDrive,
+    name: "File Drive Manager",
+    showInNav: true,
+    icon: "Photo-library",
+    permission: "global.mediaGallery.accessToGlobalFileDrive",
+  },
   {
     path: "/users",
     component: Users,

package/src/routes/site.tsx

@@ -15,6 +15,7 @@ import UserEdit from "./../modules/Users/UserEdit";
 import Profile from "./../modules/Users/Profile";
 import Integrations from "./../modules/Settings/Integrations";
 import IntegrationForm from "./../modules/Settings/Integrations/IntegrationForm";
+import FileDrive from "./../modules/FileDrive";
 
 const BASE_PATH = "/sites";
 
@@ -87,6 +88,14 @@ export default [
       },
     ],
   },
+  {
+    path: `${BASE_PATH}/files`,
+    component: FileDrive,
+    name: "File Drive Manager",
+    showInNav: true,
+    icon: "Photo-library",
+    permission: "mediaGallery.accessToSiteFileDrive",
+  },
   {
     path: `${BASE_PATH}/users`,
     component: Users,

package/src/types/index.tsx

@@ -12,6 +12,7 @@ import { IDomainsState } from "@ax/containers/Domains/reducer";
 import { IRedirectsState } from "@ax/containers/Redirects/reducer";
 import { IAnalyticsState } from "@ax/containers/Analytics/reducer";
 import { IIntegrationsState } from "@ax/containers/Integrations/reducer";
+import { IFileDriveState } from "@ax/containers/FileDrive/reducer";
 
 export interface IBreadcrumbItem {
   editorID: number;
@@ -226,6 +227,7 @@ export interface IRootState {
   redirects: IRedirectsState;
   analytics: IAnalyticsState;
   integrations: IIntegrationsState;
+  fileDrive: IFileDriveState;
 }
 
 export interface IStyledProps {
@@ -698,6 +700,7 @@ export interface IModal {
   toggleModal: () => void;
   mainModalAction?: { title: string; onClick: () => void };
   secondaryModalAction?: { title: string; onClick: () => void };
+  isChild?: boolean;
 }
 
 export interface IUserEditing {
@@ -889,6 +892,66 @@ export interface IUpdateNavigationParam {
   navigations: { navigationId: number | null; type: "header" | "footer"; pageId: number }[];
 }
 
+export interface IFilesFolder {
+  files: {
+    totalItems: number;
+    items: IFile[];
+  };
+  folders: IFolder[];
+}
+
+export interface IFile {
+  id: number;
+  fileName: string;
+  sizeBytes: number;
+  uploadDate: Date;
+  fileType: string;
+  tags: string[];
+  url: string;
+  alt: string;
+  title: string;
+  site: number | null;
+  folder: number | null;
+}
+
+export interface IFolder {
+  id: number;
+  folderName: string;
+  parentId: number;
+  site: number;
+}
+
+export interface IFolderTree {
+  id: number;
+  name: string;
+  children: IFolderTree[];
+  isExpanded?: boolean;
+}
+
+export interface IGetFolderParams {
+  siteID: number | "global";
+  folderID: number | null;
+  loading?: boolean;
+  search?: string;
+  filter?: string;
+  order?: string;
+}
+
+export interface IActionMenuOption {
+  label: string;
+  action: () => void;
+  icon: string;
+  disabled?: boolean;
+  helpText?: string | null;
+  color?: boolean;
+}
+
+export interface IBulkAction {
+  icon?: string;
+  text: string;
+  action: () => void;
+}
+
 export type Field =
   | "AsyncCheckGroup"
   | "AsyncSelect"

package/src/components/Fields/FileField/FileDragAndDrop/index.tsx

@@ -1,188 +0,0 @@
-import React, { memo, useEffect, useReducer, useRef } from "react";
-
-import { files } from "@ax/api";
-import { isReqOk } from "@ax/helpers";
-import { Icon, DragAndDrop } from "@ax/components";
-import {
-  reducer,
-  initialState,
-  setDropDepth,
-  setInDropZone,
-  setIsUploading,
-  setUploadSuccess,
-  setUploadError,
-  MAX_SIZE,
-} from "./../store";
-
-import * as S from "./style";
-
-const FileDragAndDrop = (props: IProps) => {
-  const { validFormats, addFile } = props;
-
-  const validExtensions = validFormats.map((format) => `.${format}`).join(",");
-
-  const filesInputRef = useRef<any>(null);
-  const filesButtonRef = useRef<any>(null);
-
-  useEffect(() => {
-    if (filesInputRef.current) {
-      filesInputRef.current.addEventListener("change", handleFilesUpload, false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filesInputRef]);
-
-  const [state, dispatch] = useReducer(reducer, initialState);
-
-  const handleDragEnter = () => {
-    dispatch(setDropDepth(state.dropDepth + 1));
-  };
-
-  const handleDragLeave = () => {
-    dispatch(setDropDepth(state.dropDepth - 1));
-    if (state.dropDepth > 1) return;
-    dispatch(setInDropZone(false));
-  };
-
-  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
-    e.dataTransfer.dropEffect = "copy";
-    dispatch(setInDropZone(true));
-  };
-
-  const checkType = (type: string) => {
-    for (const i in validFormats) {
-      if (type.includes(validFormats[i])) return true;
-    }
-    return false;
-  };
-
-  const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
-    const files = Array.from(e.dataTransfer.files);
-    e.dataTransfer.clearData();
-    await handleUploadFile(files);
-    dispatch(setDropDepth(0));
-  };
-
-  const handleFilesUpload = (e: any) => {
-    const files = Array.from(e.currentTarget.files);
-    handleUploadFile(files);
-  };
-
-  const handleUploadFile = async (filesArr: Array<any>) => {
-    if (filesArr[0]) {
-      dispatch(setIsUploading());
-      const fileSize = filesArr[0].size / (1024 * 1024);
-
-      if (!checkType(filesArr[0].type)) {
-        dispatch(setUploadError("Invalid format"));
-      } else if (fileSize > MAX_SIZE) {
-        dispatch(setUploadError("File is too big"));
-      } else {
-        try {
-          const form = new FormData();
-          form.append("file", filesArr[0]);
-          const result = await files.uploadFile(form);
-          if (isReqOk(result.status)) {
-            dispatch(setUploadSuccess());
-            setTimeout(function () {
-              addFile(result.data);
-              dispatch(setInDropZone(false));
-            }, 800);
-          }
-        } catch (e) {
-          dispatch(setUploadError("Error uploading file"));
-        }
-      }
-    }
-  };
-
-  const handleTryAgain = () => {
-    dispatch(setInDropZone(false));
-  };
-
-  const handleFileClick = () => {
-    if (filesInputRef) {
-      filesInputRef.current.click();
-    }
-  };
-
-  const errorWrapper = state.errorMsg ? <S.ErrorMsg>{state.errorMsg}</S.ErrorMsg> : null;
-
-  return (
-    <S.Wrapper data-testid="file-drag-and-drop-wrapper">
-      <S.DragAndDropWrapper
-        inDropZone={state.inDropZone}
-        uploading={state.isUploading}
-        success={state.isSuccess}
-        error={state.isError}
-      >
-        <DragAndDrop
-          onDrop={handleDrop}
-          onDragOver={handleDragOver}
-          onDragEnter={handleDragEnter}
-          onDragLeave={handleDragLeave}
-          validFormats={validFormats}
-        >
-          <S.StatusWrapper>
-            <S.DragStatus>
-              <S.DragIcon>
-                <Icon name="uploadFile" size="48" />
-              </S.DragIcon>
-              <S.DragTitle>Drag your file here</S.DragTitle>
-              <S.DragSubtitle>or</S.DragSubtitle>
-              <S.FilesInput type="file" ref={filesInputRef} multiple accept={validExtensions} />
-              <S.FilesButton ref={filesButtonRef} type="button" buttonStyle="line" onClick={handleFileClick}>
-                Select files
-              </S.FilesButton>
-              <S.DragSubtitle>Valid formats: {validFormats.join(", ")}. Max. size: {MAX_SIZE}MB</S.DragSubtitle>
-            </S.DragStatus>
-            <S.DragOverStatus>
-              <S.DragIcon>
-                <Icon name="success" size="48" />
-              </S.DragIcon>
-              <S.DragTitle>Drop your file</S.DragTitle>
-              <S.DragSubtitle>Valid formats: {validFormats.join(", ")}. Max. size: {MAX_SIZE}MB</S.DragSubtitle>
-            </S.DragOverStatus>
-          </S.StatusWrapper>
-        </DragAndDrop>
-      </S.DragAndDropWrapper>
-      <S.UploadingWrapper
-        inDropZone={state.inDropZone}
-        uploading={state.isUploading}
-        success={state.isSuccess}
-        error={state.isError}
-      >
-        <S.StatusWrapper>
-          <S.UploadingStatus>
-            <S.DragIcon>
-              <Icon name="uploadFile" size="48" />
-            </S.DragIcon>
-            <S.DragTitle>Uploading...</S.DragTitle>
-          </S.UploadingStatus>
-          <S.SuccessStatus>
-            <S.DragIcon>
-              <Icon name="success" size="48" />
-            </S.DragIcon>
-            <S.DragTitle>File loaded!</S.DragTitle>
-          </S.SuccessStatus>
-          <S.ErrorStatus>
-            <S.DragIcon>
-              <Icon name="alert" size="48" />
-            </S.DragIcon>
-            <S.DragTitle>Error uploading file</S.DragTitle>
-            {errorWrapper}
-            <S.StyledButton type="button" buttonStyle="text" onClick={handleTryAgain}>
-              TRY AGAIN
-            </S.StyledButton>
-          </S.ErrorStatus>
-        </S.StatusWrapper>
-      </S.UploadingWrapper>
-    </S.Wrapper>
-  );
-};
-
-interface IProps {
-  validFormats: string[];
-  addFile: (file: any) => void;
-}
-
-export default memo(FileDragAndDrop);

package/src/components/Fields/FileField/store.tsx

@@ -1,61 +0,0 @@
-const SET_DROP_DEPTH = "SET_DROP_DEPTH";
-const SET_IN_DROP_ZONE = "SET_IN_DROP_ZONE";
-const SET_IS_UPLOADING = "SET_IS_UPLOADING";
-const SET_UPLOAD_SUCCESS = "SET_UPLOAD_SUCCESS";
-const SET_UPLOAD_ERROR = "SET_UPLOAD_ERROR";
-export const MAX_SIZE = 50; // MB
-
-export const reducer = (prevState: IGalleryStore, action: any): IGalleryStore => {
-  switch (action.type) {
-    case SET_DROP_DEPTH:
-      return { ...prevState, dropDepth: action.payload.dropDepth };
-    case SET_IN_DROP_ZONE:
-      return { ...prevState, inDropZone: action.payload.inDropZone, isUploading: false, isError: false, isSuccess: false, errorMsg: "" };
-    case SET_IS_UPLOADING:
-      return { ...prevState, inDropZone: false, isUploading: true };
-    case SET_UPLOAD_SUCCESS:
-      return { ...prevState, isUploading: false, isSuccess: true };
-    case SET_UPLOAD_ERROR:
-      return { ...prevState, inDropZone: false, isUploading: false, isError: true, errorMsg: action.payload.msg };
-    default:
-      return prevState;
-  }
-};
-
-export function setDropDepth(dropDepth: number) {
-  return { type: SET_DROP_DEPTH, payload: { dropDepth } };
-}
-
-export function setInDropZone(inDropZone: boolean) {
-  return { type: SET_IN_DROP_ZONE, payload: { inDropZone } };
-}
-
-export function setIsUploading() {
-  return { type: SET_IS_UPLOADING };
-}
-
-export function setUploadSuccess() {
-  return { type: SET_UPLOAD_SUCCESS };
-}
-
-export function setUploadError(errorMsg: string = "") {
-  return { type: SET_UPLOAD_ERROR, payload: { errorMsg } };
-}
-
-export const initialState: IGalleryStore = {
-  dropDepth: 0,
-  inDropZone: false,
-  isUploading: false,
-  isSuccess: false,
-  isError: false,
-  errorMsg: "",
-};
-
-interface IGalleryStore {
-  dropDepth: number;
-  inDropZone: boolean;
-  isUploading: boolean;
-  isSuccess: boolean;
-  isError: boolean;
-  errorMsg: string;
-}