@griddo/ax 10.3.9 → 10.3.11

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

@@ -18,11 +18,13 @@ const FileDragAndDrop = (props: IProps) => {
     inverse = false,
     uploadError,
     uploadFile,
+    handleMultipleUpload,
     handleUpload,
     replaceData,
     replaceFile,
     siteID,
     isAllowedToUpload = true,
+    resetError,
   } = props;
 
   const validExtensions = validFormats.map((format) => `.${format}`).join(",");
@@ -32,10 +34,10 @@ const FileDragAndDrop = (props: IProps) => {
   const [inDropZone, setInDropZone] = useState(false);
   const [dropDepth, setDropDepth] = useState(0);
   const [uploadingState, setUploadingState] = useState({ total: 0, ready: 0 });
+  const [progress, setProgress] = useState(0);
 
   const uploading = isUploading || uploadingState.total > uploadingState.ready;
   const success = isSuccess && uploadingState.total === uploadingState.ready;
-  const uploadPercentage = (uploadingState.ready * 100) / uploadingState.total;
 
   const handleDragEnter = () => {
     setDropDepth((depth) => depth + 1);
@@ -61,14 +63,29 @@ const FileDragAndDrop = (props: IProps) => {
 
   const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
     const files = Array.from(e.dataTransfer.files);
-    e.dataTransfer.clearData();
-    await uploadFiles(files);
+    if (handleMultipleUpload && files.length > 1) {
+      if (!files.every((file) => checkType(file.type))) {
+        uploadError(true, "Invalid format");
+      } else {
+        handleMultipleUpload(files);
+      }
+    } else {
+      await uploadFiles(files);
+    }
     setDropDepth(0);
   };
 
-  const handleFilesUpload = (e: any) => {
+  const handleFilesUpload = async (e: any) => {
     const files: File[] = Array.from(e.currentTarget.files);
-    uploadFiles(files);
+    if (handleMultipleUpload && files.length > 1) {
+      if (!files.every((file) => checkType(file.type))) {
+        uploadError(true, "Invalid format");
+      } else {
+        handleMultipleUpload(files);
+      }
+    } else {
+      await uploadFiles(files);
+    }
   };
 
   const uploadFiles = async (files: File[]) => {
@@ -82,27 +99,29 @@ const FileDragAndDrop = (props: IProps) => {
 
       let result: IFile[] = [];
       if (replaceData) {
-        const fileUploaded = files[0] && (await replaceFile(files[0], replaceData.fileID, replaceData.keepURL, siteID));
+        const fileUploaded =
+          files[0] && (await replaceFile(files[0], replaceData.fileID, replaceData.keepURL, siteID, setProgress));
         if (fileUploaded) {
           result.push(fileUploaded);
+          setUploadingState((state) => ({ total: state.total, ready: state.ready + 1 }));
         }
       } else {
         while (files.length) {
           const file = files.shift();
-          const fileUploaded = file && (await uploadFile(file, folderID, siteID || "global"));
+          const fileUploaded = file && (await uploadFile(file, folderID, siteID || "global", setProgress));
           if (fileUploaded) {
             result.push(fileUploaded);
+            setUploadingState((state) => ({ total: state.total, ready: state.ready + 1 }));
           }
-          setUploadingState((state) => ({ total: state.total, ready: state.ready + 1 }));
         }
       }
 
-      if (result) {
+      if (result.length) {
         setInDropZone(false);
         setUploadingState({ total: 0, ready: 0 });
         setTimeout(() => {
           handleUpload(result);
-        }, 3000)
+        }, 3000);
       }
     } catch (error) {
       console.log(error);
@@ -111,6 +130,8 @@ const FileDragAndDrop = (props: IProps) => {
 
   const handleTryAgain = () => {
     setInDropZone(false);
+    setUploadingState({ total: 0, ready: 0 });
+    resetError();
   };
 
   const handleFileClick = () => {
@@ -149,9 +170,9 @@ const FileDragAndDrop = (props: IProps) => {
           <S.DragSubtitle>Valid formats: {validFormats.join(", ")}. Max. size: 50MB</S.DragSubtitle>
         </S.DragStatus>
         <S.DragOverStatus onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}>
-          <S.DragIcon>
-            <Icon name="success" size="48" />
-          </S.DragIcon>
+          <S.DropIcon>
+            <Icon name="page" size="48" />
+          </S.DropIcon>
           <S.DragTitle>Drop your file</S.DragTitle>
           <S.DragSubtitle>Valid formats: {validFormats.join(", ")}. Max. size: 50MB</S.DragSubtitle>
         </S.DragOverStatus>
@@ -189,17 +210,17 @@ const FileDragAndDrop = (props: IProps) => {
         <S.StatusWrapper>
           <S.UploadingStatus>
             <S.DragIcon>
-              <Icon name="uploadFile" size="48" />
+              <Icon name="page" size="48" />
             </S.DragIcon>
             <S.ProgressBar>
-              <ProgressBar percentage={uploadPercentage} inverse={inverse} />
+              <ProgressBar percentage={progress} inverse={inverse} />
             </S.ProgressBar>
             <S.DragTitle>Uploading...</S.DragTitle>
           </S.UploadingStatus>
           <S.SuccessStatus>
-            <S.DragIcon>
+            <S.SuccessIcon>
               <Icon name="success" size="48" />
-            </S.DragIcon>
+            </S.SuccessIcon>
             <S.DragTitle>File loaded!</S.DragTitle>
           </S.SuccessStatus>
           <S.ErrorStatus>
@@ -228,11 +249,24 @@ interface IProps {
   inverse?: boolean;
   siteID: number | "global";
   isAllowedToUpload?: boolean;
-  uploadError: (error: boolean, msg?: string) => Promise<void>;
-  uploadFile: (docFiles: File | File[], folderID: number | null, siteID: number | "global") => Promise<IFile | null>;
-  handleUpload: (result: IFile[]) => void;
   replaceData?: { fileID: number; keepURL: boolean };
-  replaceFile: (docFile: File, fileID: number, keepUrl: boolean, siteID: number | "global") => Promise<IFile | null>;
+  handleUpload: (result: IFile[]) => void;
+  handleMultipleUpload?: (files: File[]) => void;
+  uploadError: (error: boolean, msg?: string) => Promise<void>;
+  uploadFile: (
+    docFiles: File | File[],
+    folderID: number | null,
+    siteID: number | "global",
+    setProgress?: (progress: number) => void
+  ) => Promise<IFile | null>;
+  replaceFile: (
+    docFile: File,
+    fileID: number,
+    keepUrl: boolean,
+    siteID: number | "global",
+    setProgress?: (progress: number) => void
+  ) => Promise<IFile | null>;
+  resetError: () => void;
 }
 
 const mapStateToProps = (state: IRootState) => ({
@@ -246,6 +280,7 @@ const mapDispatchToProps = {
   uploadError: fileDriveActions.uploadError,
   uploadFile: fileDriveActions.uploadFile,
   replaceFile: fileDriveActions.replaceFile,
+  resetError: fileDriveActions.resetError,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(memo(FileDragAndDrop));

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

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import Button from "@ax/components/Button";
 
-export const Wrapper = styled.div<{ inverse: boolean }>`
+const Wrapper = styled.div<{ inverse: boolean }>`
   background-color: ${(p) => (p.inverse ? p.theme.color.overlay : p.theme.color.uiBarBackground)};
   position: relative;
   transition: opacity 0.1s;
@@ -11,7 +11,7 @@ export const Wrapper = styled.div<{ inverse: boolean }>`
   padding: ${(p) => p.theme.spacing.m};
 `;
 
-export const StatusWrapper = styled.div`
+const StatusWrapper = styled.div`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -19,69 +19,89 @@ export const StatusWrapper = styled.div`
   text-align: center;
 `;
 
-export const DragStatus = styled.div`
+const DragStatus = styled.div`
   transition: opacity 0.1s;
 `;
 
-export const DragTitle = styled.div`
+const DragTitle = styled.div`
   ${(p) => p.theme.textStyle.fieldLabel};
   margin-bottom: ${(p) => p.theme.spacing.xxs};
 `;
 
-export const DragSubtitle = styled.div`
+const DragSubtitle = styled.div`
   ${(p) => p.theme.textStyle.uiXS};
   margin-bottom: ${(p) => p.theme.spacing.xxs};
 `;
 
-export const DragIcon = styled.div`
+const DragIcon = styled.div`
   height: ${(p) => p.theme.spacing.l};
   margin-bottom: ${(p) => p.theme.spacing.s};
 `;
 
-export const DragOverStatus = styled.div`
-  transition: opacity 0.1s;
-  ${DragIcon} {
-    svg {
-      path {
-        fill: #ffffff;
-      }
+const DropIcon = styled.div`
+  height: ${(p) => p.theme.spacing.l};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.interactiveInverse};
     }
   }
 `;
 
-export const UploadingStatus = styled.div`
+const SuccessIcon = styled.div`
+  height: ${(p) => p.theme.spacing.l};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.online};
+    }
+  }
+`;
+
+const UploadingStatus = styled.div`
   transition: opacity 0.1s;
 `;
 
-export const SuccessStatus = styled.div`
+const SuccessStatus = styled.div`
   transition: opacity 0.1s;
-  ${DragIcon as any} {
+  ${DragIcon} {
     svg {
       path {
         fill: ${(p) => p.theme.color.online};
       }
     }
   }
-  ${DragTitle as any} {
+  ${DragTitle} {
     color: ${(p) => p.theme.color.textHighEmphasis};
   }
 `;
 
-export const ErrorStatus = styled.div`
+const ErrorStatus = styled.div`
   transition: opacity 0.1s;
-  ${DragIcon as any} {
+  ${DragIcon} {
     svg {
       path {
         fill: ${(p) => p.theme.color.error};
       }
     }
   }
-  ${DragTitle as any} {
+  ${DragTitle} {
     color: ${(p) => p.theme.color.textHighEmphasis};
   }
 `;
 
-export const DragAndDropWrapper = styled.div<{
+const DragOverStatus = styled.div`
+  transition: opacity 0.1s;
+  ${DragIcon} {
+    svg {
+      path {
+        fill: #ffffff;
+      }
+    }
+  }
+`;
+
+const DragAndDropWrapper = styled.div<{
   inDropZone: boolean;
   uploading: boolean;
   success: boolean;
@@ -127,7 +147,7 @@ export const DragAndDropWrapper = styled.div<{
   }
 `;
 
-export const UploadingWrapper = styled.div<{
+const UploadingWrapper = styled.div<{
   inDropZone: boolean;
   uploading: boolean;
   success: boolean;
@@ -172,22 +192,22 @@ export const UploadingWrapper = styled.div<{
   }
 `;
 
-export const ErrorMsg = styled.div`
+const ErrorMsg = styled.div`
   ${(p) => p.theme.textStyle.uiXS};
   color: ${(p) => p.theme.color.textMediumEmphasis};
   margin-top: ${(p) => p.theme.spacing.xxs};
 `;
 
-export const StyledButton = styled((props) => <Button {...props} />)`
+const StyledButton = styled((props) => <Button {...props} />)`
   margin-top: ${(p) => p.theme.spacing.s};
 `;
 
-export const FilesInput = styled.input<{ ref: any }>`
+const FilesInput = styled.input<{ ref: any }>`
   display: none;
 `;
 
 const _Button: any = React.forwardRef((props: any, ref?: React.Ref<HTMLDivElement>) => <Button {...props} />);
-export const FilesButton = styled(_Button)`
+const FilesButton = styled(_Button)`
   margin-top: ${(p) => p.theme.spacing.xs};
   margin-bottom: ${(p) => p.theme.spacing.xs};
 
@@ -206,6 +226,28 @@ export const FilesButton = styled(_Button)`
   }
 `;
 
-export const ProgressBar = styled.div`
+const ProgressBar = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.xs};
 `;
+
+export {
+  Wrapper,
+  StatusWrapper,
+  DragStatus,
+  DragTitle,
+  DragSubtitle,
+  DragIcon,
+  DropIcon,
+  SuccessIcon,
+  UploadingStatus,
+  SuccessStatus,
+  ErrorStatus,
+  DragOverStatus,
+  DragAndDropWrapper,
+  UploadingWrapper,
+  ErrorMsg,
+  StyledButton,
+  FilesInput,
+  FilesButton,
+  ProgressBar,
+};

package/src/modules/FileDrive/FileModal/DetailPanel/UsageContent/Item/index.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { getFormattedDateWithTimezone } from "@ax/helpers";
+
+import * as S from "./style";
+
+const Item = (props: IItemProps): JSX.Element => {
+  const { title, type, date, onClick } = props;
+
+  const pageType = type || "Page";
+
+  return (
+    <S.ListItem onClick={onClick}>
+      <S.Content>
+        <S.Header>
+          <S.Type>{pageType}</S.Type>
+          <S.Date>{getFormattedDateWithTimezone(date, "d MMM Y")}</S.Date>
+        </S.Header>
+        <S.Title>{title}</S.Title>
+      </S.Content>
+    </S.ListItem>
+  );
+};
+
+interface IItemProps {
+  title: string;
+  type?: string;
+  date: Date;
+  onClick: () => void;
+}
+
+export default Item;

package/src/modules/FileDrive/FileModal/DetailPanel/UsageContent/Item/style.tsx

@@ -0,0 +1,43 @@
+import styled from "styled-components";
+
+const ListItem = styled.li`
+  display: flex;
+  width: 100%;
+  padding: ${(p) => p.theme.spacing.s};
+  background-color: ${(p) => p.theme.color.uiBarBackground};
+  border: 1px solid ${(p) => p.theme.color.uiLine};
+  border-radius: ${(p) => p.theme.radii.s};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  :hover {
+    background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+    cursor: pointer;
+  }
+`;
+
+const Title = styled.div`
+  ${(p) => p.theme.textStyle.fieldContent}
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+`;
+
+const Header = styled.div`
+  display: flex;
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const Type = styled.div`
+  ${(p) => p.theme.textStyle.headingXXS};
+  color: ${(p) => p.theme.colors.textLowEmphasis};
+`;
+
+const Date = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.colors.textLowEmphasis};
+  margin-left: auto;
+`;
+
+
+const Content = styled.div`
+  width: 100%;
+`;
+
+export { ListItem, Title, Header, Type, Date, Content };

package/src/modules/FileDrive/FileModal/DetailPanel/UsageContent/ItemGroup/index.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import { IFileUseItem } from "@ax/types";
+import Item from "../Item";
+
+import * as S from "./style";
+
+const ItemGroup = (props: IItemGroupProps): React.ReactElement => {
+  const { title, items, onClick } = props;
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClick = () => setIsOpen(!isOpen);
+
+  return (
+    <S.Wrapper>
+      <S.Label onClick={handleClick} isOpen={isOpen}>
+        {title}
+      </S.Label>
+      <S.Content isOpen={isOpen}>
+        {items.map((item: any) => {
+          const handleClick = () => onClick(item);
+          return (
+            <Item
+              title={item.title}
+              date={item.published}
+              type={item.structuredDataId || "Page"}
+              key={item.id}
+              onClick={handleClick}
+            />
+          );
+        })}
+      </S.Content>
+    </S.Wrapper>
+  );
+};
+
+interface IItemGroupProps {
+  title: string;
+  items: IFileUseItem[];
+  onClick(item: IFileUseItem): void;
+}
+
+export default ItemGroup;

package/src/modules/FileDrive/FileModal/DetailPanel/UsageContent/ItemGroup/style.tsx

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  margin: ${(p) => `${p.theme.spacing.m} 0 ${p.theme.spacing.m} 0`};
+`;
+
+const Label = styled.div<{ isOpen: boolean }>`
+  position: relative;
+  ${(p) => p.theme.textStyle.headingXXS};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  cursor: pointer;
+  :after {
+    position: absolute;
+    right: 10px;
+    top: ${(p) => (p.isOpen ? `10px` : `6px`)};
+    content: "";
+    border: solid ${(p) => p.theme.color.interactive01};
+    border-width: 0 2px 2px 0;
+    display: inline-block;
+    padding: 3px;
+    transform: ${(p) => (p.isOpen ? `rotate(-135deg)` : `rotate(45deg)`)};
+  }
+`;
+
+const Content = styled.div<{ isOpen: boolean }>`
+  overflow-y: ${(p) => (p.isOpen ? "visible" : "hidden")};
+  max-height: ${(p) => (p.isOpen ? `auto` : 0)};
+  transition: all 0.5s ease-in-out;
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+`;
+
+export { Wrapper, Label, Content };

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

@@ -0,0 +1,138 @@
+import React from "react";
+import { connect } from "react-redux";
+import { appActions } from "@ax/containers/App";
+import { pageEditorActions } from "@ax/containers/PageEditor";
+import { sitesActions } from "@ax/containers/Sites";
+import { structuredDataActions } from "@ax/containers/StructuredData";
+import { ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
+import { IFile, IFileUseItem, IFileUsePages, IRootState } from "@ax/types";
+import Item from "./Item";
+import ItemGroup from "./ItemGroup";
+
+import * as S from "./style";
+
+const UsageContent = (props: IProps) => {
+  const {
+    file,
+    currentSiteID,
+    selectedTab,
+    setHistoryPush,
+    setCurrentPageID,
+    getSite,
+    setCurrentDataID,
+    setSelectedStructuredData,
+  } = props;
+  const {
+    contentInUse: { pages, simpleStructuredData, globalPages },
+  } = file;
+
+  const isSiteView = !!currentSiteID;
+
+  const getPageList = () => {
+    if (isSiteView && selectedTab !== "global") {
+      const pageItems = pages[0] ? pages[0].pages : [];
+      return pageItems.map((item: IFileUseItem) => {
+        const handleClick = () => {
+          setCurrentPageID(item.id);
+          setHistoryPush("pages/editor", true);
+        };
+
+        return <Item title={item.title} date={item.published} key={item.id} onClick={handleClick} />;
+      });
+    } else {
+      return pages.map((item: IFileUsePages) => {
+        const handleClick = async (page: IFileUseItem) => {
+          await getSite(item.siteId);
+          setCurrentPageID(page.id);
+          setHistoryPush("/sites/pages/editor", true);
+        };
+        return <ItemGroup title={item.siteName} items={item.pages} onClick={handleClick} />;
+      });
+    }
+  };
+
+  const getGlobalPageList = () => {
+    if (globalPages.length === 0) {
+      return <></>;
+    } else {
+      const handleClick = (item: IFileUseItem) => {
+        setCurrentPageID(item.id);
+        const path = isSiteView ? "/data/pages/editor" : "data/pages/editor";
+        setHistoryPush(path, true);
+      };
+      return <ItemGroup title="Global Pages" items={globalPages} onClick={handleClick} />;
+    }
+  };
+
+  const getStructuredDataList = () => {
+    if (simpleStructuredData.length === 0) {
+      return <></>;
+    }
+    if (isSiteView && selectedTab !== "global") {
+      return simpleStructuredData.map((item: IFileUseItem) => {
+        const handleClick = () => {
+          item.structuredDataId && setSelectedStructuredData(item.structuredDataId, "site");
+          setCurrentDataID(item.id);
+          setHistoryPush(`data/${item.structuredDataId}/editor`, true);
+        };
+
+        return (
+          <Item
+            title={item.title}
+            date={item.published}
+            key={item.id}
+            type={item.structuredDataId}
+            onClick={handleClick}
+          />
+        );
+      });
+    } else {
+      const handleClick = (item: IFileUseItem) => {
+        item.structuredDataId && setSelectedStructuredData(item.structuredDataId, "global");
+        setCurrentDataID(item.id);
+        setHistoryPush(`/data/${item.structuredDataId}/editor`, true);
+      };
+      return <ItemGroup title="Global Simple Content" items={simpleStructuredData} onClick={handleClick} />;
+    }
+  };
+
+  return (
+    <S.Content>
+      <S.Note>
+        Only documents <strong>selected from the File field</strong> are counted. Documents added via a URL are not
+        displayed in this list.
+      </S.Note>
+      <S.ListWrapper>
+        {getPageList()}
+        {getGlobalPageList()}
+        {getStructuredDataList()}
+      </S.ListWrapper>
+    </S.Content>
+  );
+};
+
+interface IProps {
+  file: IFile;
+  currentSiteID: number | null;
+  selectedTab: "local" | "global";
+  setHistoryPush(page: string, isEditor: boolean): Promise<void>;
+  setCurrentPageID(currentPageID: number | null): ISetCurrentPageIDAction;
+  getSite(siteID: number): Promise<void>;
+  setCurrentDataID(id: number | null): void;
+  setSelectedStructuredData(id: string, scope: string): void;
+}
+
+const mapDispatchToProps = {
+  setHistoryPush: appActions.setHistoryPush,
+  setCurrentPageID: pageEditorActions.setCurrentPageID,
+  getSite: sitesActions.getSite,
+  setCurrentDataID: structuredDataActions.setCurrentDataID,
+  setSelectedStructuredData: structuredDataActions.setSelectedStructuredData,
+};
+
+const mapStateToProps = (state: IRootState) => ({
+  currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
+  selectedTab: state.fileDrive.selectedTab,
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(UsageContent);

package/src/modules/FileDrive/FileModal/DetailPanel/UsageContent/style.tsx

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+const Content = styled.div`
+  padding: ${(p) => p.theme.spacing.s};
+  overflow: auto;
+  height: 100%;
+`;
+
+const Note = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  padding: ${(p) => p.theme.spacing.s};
+  border-radius: ${(p) => p.theme.radii.s};
+`;
+
+const ListWrapper = styled.div`
+  margin-top: ${(p) => p.theme.spacing.xs};
+`;
+
+export { Content, Note, ListWrapper };