@griddo/ax 10.3.9 → 10.3.11

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

@@ -1,12 +1,13 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 
 import { formatBytes, getFormattedDateWithTimezone } from "@ax/helpers";
-import { Button, FieldsBehavior, IconAction } from "@ax/components";
+import { Button, FieldsBehavior, IconAction, Tabs } from "@ax/components";
 import { IFile, IRootState } from "@ax/types";
 import { fileDriveActions } from "@ax/containers/FileDrive";
 import { useModal } from "@ax/hooks";
 import { DeleteFileModal } from "../../atoms";
+import UsageContent from "./UsageContent";
 
 import * as S from "./style";
 
@@ -26,6 +27,7 @@ const DetailPanel = (props: IProps) => {
   } = props;
   const { title, alt, tags, site } = file;
 
+  const [selectedTab, setSelectedTab] = useState("details");
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
 
   useEffect(() => {
@@ -59,6 +61,12 @@ const DetailPanel = (props: IProps) => {
     toggleModal();
   };
 
+  const handleSelectedTab = (tab: "details" | "in use") => {
+    if (tab !== selectedTab) {
+      setSelectedTab(tab);
+    }
+  };
+
   const mainNewModalAction = {
     title: "Delete document",
     onClick: () => handleDeleteFile(),
@@ -66,78 +74,88 @@ const DetailPanel = (props: IProps) => {
 
   const secondaryNewModalAction = { title: "Cancel", onClick: toggleDeleteModal };
 
+  const tabs = ["details", "in use"];
+
   return (
     <>
       <S.Wrapper>
-        <S.Header>DETAILS</S.Header>
-        <S.Content>
-          <S.FileInfo>
-            <S.FileName>{file.fileName}</S.FileName>
-            <S.InfoLine>
-              <strong>Uploaded:</strong> {getFormattedDateWithTimezone(file.uploadDate, "d MMM Y")}
-            </S.InfoLine>
-            <S.InfoLine>
-              <strong>Type:</strong> {file.fileType}
-            </S.InfoLine>
-            <S.InfoLine>
-              <strong>Size:</strong> {formatBytes(file.sizeBytes)}
-            </S.InfoLine>
-            <S.FileActions>
-              <Button type="button" onClick={handleCopyUrl} buttonStyle="line">
-                Copy URL
-              </Button>
-              <IconAction icon="OpenOutside" size="m" onClick={handleOpenUrl} />
-            </S.FileActions>
-          </S.FileInfo>
-          <S.FileForm>
-            {isAllowedToEdit ? (
-              <>
+        <S.Header>
+          <Tabs tabs={tabs} active={selectedTab} setSelectedTab={handleSelectedTab} noMargins />
+        </S.Header>
+        {selectedTab === "in use" ? (
+          <UsageContent file={file} />
+        ) : (
+          <>
+            <S.Content>
+              <S.FileInfo>
+                <S.FileName>{file.fileName}</S.FileName>
+                <S.InfoLine>
+                  <strong>Uploaded:</strong> {getFormattedDateWithTimezone(file.uploadDate, "d MMM Y")}
+                </S.InfoLine>
+                <S.InfoLine>
+                  <strong>Type:</strong> {file.fileType}
+                </S.InfoLine>
+                <S.InfoLine>
+                  <strong>Size:</strong> {formatBytes(file.sizeBytes)}
+                </S.InfoLine>
+                <S.FileActions>
+                  <Button type="button" onClick={handleCopyUrl} buttonStyle="line">
+                    Copy URL
+                  </Button>
+                  <IconAction icon="OpenOutside" size="m" onClick={handleOpenUrl} />
+                </S.FileActions>
+              </S.FileInfo>
+              <S.FileForm>
+                {isAllowedToEdit ? (
+                  <>
+                    <FieldsBehavior
+                      title="Title"
+                      name="title"
+                      value={form.title}
+                      fieldType="TextField"
+                      onChange={handleTitle}
+                    />
+                    <FieldsBehavior
+                      title="Alternative text"
+                      name="alt"
+                      value={form.alt}
+                      fieldType="TextField"
+                      onChange={handleAlt}
+                    />
+                  </>
+                ) : (
+                  <>
+                    <S.Label>Title</S.Label>
+                    <S.FieldText>{form.title}</S.FieldText>
+                    <S.Label>Alternative text</S.Label>
+                    <S.FieldText>{form.alt}</S.FieldText>
+                  </>
+                )}
                 <FieldsBehavior
-                  title="Title"
-                  name="title"
-                  value={form.title}
-                  fieldType="TextField"
-                  onChange={handleTitle}
+                  title="Tags"
+                  value={form.tags}
+                  fieldType="TagsField"
+                  onChange={handleTags}
+                  disabled={!isAllowedToEdit}
+                  helptext="Type a tag and press enter to create it"
                 />
-                <FieldsBehavior
-                  title="Alternative text"
-                  name="alt"
-                  value={form.alt}
-                  fieldType="TextField"
-                  onChange={handleAlt}
-                />
-              </>
-            ) : (
-              <>
-                <S.Label>Title</S.Label>
-                <S.FieldText>{form.title}</S.FieldText>
-                <S.Label>Alternative text</S.Label>
-                <S.FieldText>{form.alt}</S.FieldText>
-              </>
-            )}
-            <FieldsBehavior
-              title="Tags"
-              value={form.tags}
-              fieldType="TagsField"
-              onChange={handleTags}
-              disabled={!isAllowedToEdit}
-              helptext="Type a tag and press enter to create it"
-            />
-          </S.FileForm>
-        </S.Content>
-        {(isAllowedToEdit || activeDelete) && (
-          <S.Footer>
-            {activeDelete && (
-              <Button type="button" buttonStyle="text" onClick={toggleDeleteModal}>
-                Delete
-              </Button>
-            )}
-            {isAllowedToEdit && (
-              <Button type="button" onClick={handleSave} disabled={isSaving || !isDirty}>
-                {isSaving ? "Saving" : "Save"}
-              </Button>
+              </S.FileForm>
+            </S.Content>
+            {(isAllowedToEdit || activeDelete) && (
+              <S.Footer>
+                {activeDelete && (
+                  <Button type="button" buttonStyle="text" onClick={toggleDeleteModal}>
+                    Delete
+                  </Button>
+                )}
+                {isAllowedToEdit && (
+                  <Button type="button" onClick={handleSave} disabled={isSaving || !isDirty}>
+                    {isSaving ? "Saving" : "Save"}
+                  </Button>
+                )}
+              </S.Footer>
             )}
-          </S.Footer>
+          </>
         )}
       </S.Wrapper>
       {isDeleteOpen && (

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

@@ -14,7 +14,7 @@ const Wrapper = styled.div`
 
 const Header = styled.div`
   ${(p) => p.theme.textStyle.headingXS};
-  padding: ${(p) => p.theme.spacing.s};
+  padding-top: ${(p) => p.theme.spacing.xs};
   text-align: center;
   border-bottom: ${(p) => `1px solid ${p.theme.color.uiLine}`};
 `;

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { CheckField, Icon, ProgressBar } from "@ax/components";
+
+import * as S from "./style";
+
+const UploadItem = (props: IProps) => {
+  const { uploadPercentage, grid } = props;
+
+  return (
+    <S.Wrapper grid={grid}>
+      {!grid && (
+        <S.CheckWrapper role="cell">
+          <CheckField name="check" value={0} checked={false} />
+        </S.CheckWrapper>
+      )}
+      <S.IconWrapper>
+        <Icon name="page" size="32" />
+      </S.IconWrapper>
+      <S.BarWrapper>
+        <ProgressBar percentage={uploadPercentage} />
+      </S.BarWrapper>
+      <S.Text>Uploading...</S.Text>
+    </S.Wrapper>
+  );
+};
+
+interface IProps {
+  uploadPercentage: number;
+  grid: boolean;
+}
+
+export default UploadItem;

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

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+import { Cell } from "@ax/components/TableList/TableItem/style";
+
+const BarWrapper = styled.div``;
+
+const Wrapper = styled.div<{ grid: boolean }>`
+  display: flex;
+  flex-direction: ${(p) => (p.grid ? "column" : "row")};
+  border: ${(p) => `1px dashed ${p.theme.color.interactive01}`};
+  border-radius: ${(p) => p.theme.radii.s};
+  align-items: center;
+  padding: ${(p) => (p.grid ? p.theme.spacing.m : `${p.theme.spacing.xs} ${p.theme.spacing.xs} ${p.theme.spacing.xs} 0`)};
+  margin-bottom: ${(p) => (p.grid ? "0" : p.theme.spacing.xs)};
+
+  ${BarWrapper} {
+    width: ${(p) => (p.grid ? "150px" : "250px")};
+    margin: ${(p) => (p.grid ? `${p.theme.spacing.s} 0`: `0 ${p.theme.spacing.m}`)};
+  }
+`;
+
+const IconWrapper = styled.div`
+  width: 32px;
+  height: 32px;
+`;
+
+const Text = styled.div`
+  ${(p) => p.theme.textStyle.fieldLabel};
+  color: ${(p) => p.theme.colors.interactive01};
+`;
+
+const CheckWrapper = styled(Cell)`
+  label {
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
+  > div {
+    width: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+export { Wrapper, IconWrapper, BarWrapper, Text, CheckWrapper };

package/src/modules/FileDrive/index.tsx

@@ -36,6 +36,7 @@ import { getSortedListStatus } from "./utils";
 import Type from "./FileFilters/Type";
 import SortBy from "./FileFilters/SortBy";
 import Usage from "./FileFilters/Usage";
+import UploadItem from "./UploadItem";
 
 import * as S from "./style";
 
@@ -54,6 +55,7 @@ const FileDrive = (props: IProps) => {
     updateDisplayMode,
     updateTab,
     downloadFiles,
+    uploadFile,
     breadcrumb,
     isLoading,
     isSaving,
@@ -73,6 +75,7 @@ const FileDrive = (props: IProps) => {
   const [galleryItems, setGalleryItems] = useState<number[]>(filesIds);
   const [galleryDelete, setGalleryDelete] = useState(true);
   const [numDocs, setNumDocs] = useState(1);
+  const [progressItems, setProgressItems] = useState<number[]>([]);
   const tableRef = useRef<HTMLDivElement>(null);
   const { isOpen: isNewOpen, toggleModal: toggleNewModal } = useModal();
   const { isOpen: isUploadOpen, toggleModal: toggleUploadModal } = useModal();
@@ -147,6 +150,7 @@ const FileDrive = (props: IProps) => {
       folderID: currentFolderID,
       search: searchQuery,
       query: currentFilterQuery,
+      loading: true,
     };
 
     return params;
@@ -238,24 +242,46 @@ const FileDrive = (props: IProps) => {
     toggleModal();
   };
 
-  /*const handleSingleUpload = async (file: IFile) => {
-    setFileSelected(file);
+  const handleUpload = async (files: IFile[]) => {
+    setFileSelected(files[0]);
     isUploadOpen && toggleUploadModal();
     toggleModal();
     const params = getParams();
     await getFolderContent(params);
-  };*/
+  };
 
-  const handleMultipleUpload = async (files: IFile[]) => {
-    setFileSelected(files[0]);
+  const uploadMultipleFiles = async (files: File[], progressArray: number[]) => {
+    try {
+      let index = 0;
+      while (files.length) {
+        const handleProgress = (progress: number) => {
+          setProgressItems((prevState) => [...prevState.slice(0, index), progress, ...prevState.slice(index + 1)]);
+        };
+
+        const file = files.shift();
+        file && (await uploadFile(file, currentFolderID, siteID || "global", handleProgress));
+        index = index + 1;
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const handleMultipleUpload = async (files: File[]) => {
     isUploadOpen && toggleUploadModal();
-    toggleModal();
+
+    const initialProgress = files.map(() => 0);
+    setProgressItems(initialProgress);
+
+    await uploadMultipleFiles(files, initialProgress);
+
+    setProgressItems([]);
     const params = getParams();
     await getFolderContent(params);
   };
 
   const handleCloseModal = () => {
-    if(isDirty){
+    if (isDirty) {
       toggleSaveModal();
     } else {
       resetFileModal();
@@ -268,7 +294,7 @@ const FileDrive = (props: IProps) => {
     setGalleryDelete(true);
     resetDirty();
     toggleModal();
-  }
+  };
 
   const handleDeleteFile = async (fileID: number) => {
     const isDeleted = await deleteFile(fileID, siteID);
@@ -407,6 +433,9 @@ const FileDrive = (props: IProps) => {
 
   const GridList = () => (
     <S.GridWrapper isSearching={isSearching}>
+      {progressItems.map((progress: number, index: number) => (
+        <UploadItem uploadPercentage={progress} grid={true} key={index} />
+      ))}
       {items.map((file: IFile, i: number) => {
         const isItemSelected = isSelected(file.id);
         return (
@@ -431,25 +460,30 @@ const FileDrive = (props: IProps) => {
 
   const ListTable = () => (
     <TableList tableHeader={Header} hasFixedHeader={true} tableRef={tableRef} className="no-padding">
-      {items.map((file: IFile, i: number) => {
-        const isItemSelected = isSelected(file.id);
-        return (
-          <ListItem
-            file={file}
-            isSelected={isItemSelected}
-            onChange={addToBulkSelection}
-            key={`${file.fileName}${file.id}`}
-            onClick={handleClick}
-            onDelete={handleDeleteFile}
-            onMove={handleMoveFile}
-            currentFolderID={currentFolderID}
-            isAllowedToDelete={allowedToDeleteFile}
-            isAllowedToEdit={allowedToEditFile}
-            isAllowedToMove={!isRoot || (isRoot && (folders.length > 0 || isSearching))}
-            isSearching={isSearching}
-          />
-        );
-      })}
+      <>
+        {progressItems.map((progress: number, index: number) => (
+          <UploadItem uploadPercentage={progress} grid={false} key={index} />
+        ))}
+        {items.map((file: IFile, i: number) => {
+          const isItemSelected = isSelected(file.id);
+          return (
+            <ListItem
+              file={file}
+              isSelected={isItemSelected}
+              onChange={addToBulkSelection}
+              key={`${file.fileName}${file.id}`}
+              onClick={handleClick}
+              onDelete={handleDeleteFile}
+              onMove={handleMoveFile}
+              currentFolderID={currentFolderID}
+              isAllowedToDelete={allowedToDeleteFile}
+              isAllowedToEdit={allowedToEditFile}
+              isAllowedToMove={!isRoot || (isRoot && (folders.length > 0 || isSearching))}
+              isSearching={isSearching}
+            />
+          );
+        })}
+      </>
     </TableList>
   );
 
@@ -522,7 +556,7 @@ const FileDrive = (props: IProps) => {
   const handleMainAction = () => {
     toggleSaveModal();
     resetFileModal();
-  }
+  };
 
   const mainSaveModalAction = {
     title: "Yes, discard changes",
@@ -550,7 +584,6 @@ const FileDrive = (props: IProps) => {
     <S.Filters>
       <Type filterItems={filterItems} value={filterValues["filterType"]} />
       <SortBy sortItems={sortItems} sortedState={sortedListStatus} />
-      <Usage filterItems={filterItems} value={filterValues["filterUsage"]} />
     </S.Filters>
   );
 
@@ -673,7 +706,8 @@ const FileDrive = (props: IProps) => {
           <FileDragAndDrop
             validFormats={validFormats}
             folderID={currentFolderID}
-            handleUpload={handleMultipleUpload}
+            handleUpload={handleUpload}
+            handleMultipleUpload={handleMultipleUpload}
             siteID={siteID}
           />
         )}
@@ -752,6 +786,12 @@ interface IProps {
   updateDisplayMode(displayMode: "grid" | "list"): Promise<void>;
   updateTab(tab: "local" | "global"): Promise<void>;
   downloadFiles(fileID: number | number[], zip: boolean, fileName?: string): Promise<void>;
+  uploadFile: (
+    docFiles: File | File[],
+    folderID: number | null,
+    siteID: number | "global",
+    setProgress?: (progress: number) => void
+  ) => Promise<IFile | null>;
 }
 
 export interface IFolderFormState {
@@ -776,6 +816,7 @@ const mapDispatchToProps = {
   updateDisplayMode: fileDriveActions.updateDisplayMode,
   updateTab: fileDriveActions.updateTab,
   downloadFiles: fileDriveActions.downloadFiles,
+  uploadFile: fileDriveActions.uploadFile,
 };
 
 const mapStateToProps = (state: IRootState) => ({

package/src/types/index.tsx

@@ -912,6 +912,24 @@ export interface IFile {
   title: string;
   site: number | null;
   folder: { folderId: number; folderName: string } | null;
+  contentInUse: {
+    pages: IFileUsePages[];
+    simpleStructuredData: IFileUseItem[];
+    globalPages: IFileUseItem[];
+  };
+}
+
+export interface IFileUsePages {
+  siteId: number;
+  siteName: string;
+  pages: IFileUseItem[];
+}
+
+export interface IFileUseItem {
+  id: number;
+  title: string;
+  structuredDataId?: string;
+  published: Date;
 }
 
 export interface IFolder {