@griddo/ax 10.2.25 → 10.3.0

package/src/containers/FileDrive/reducer.tsx

@@ -0,0 +1,57 @@
+import { IFilesFolder, 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 IFileDriveState {
+  currentFolderContent: IFilesFolder | null;
+  currentFolderID: number | null;
+  breadcrumb: IFolderTree[];
+  foldersTree: IFolderTree[];
+  isUploading: boolean;
+  isSuccess: boolean;
+  isError: boolean;
+  errorMsg: string;
+  displayMode: "grid" | "list";
+  selectedTab: "local" | "global";
+}
+
+export const initialState: IFileDriveState = {
+  currentFolderContent: null,
+  currentFolderID: null,
+  breadcrumb: [],
+  foldersTree: [],
+  isUploading: false,
+  isSuccess: false,
+  isError: false,
+  errorMsg: "",
+  displayMode: "grid",
+  selectedTab: "local",
+};
+
+export function reducer(state = initialState, action: any): IFileDriveState {
+  switch (action.type) {
+    case SET_CURRENT_FOLDER_CONTENT:
+    case SET_CURRENT_FOLDER:
+    case SET_FOLDERS_TREE:
+    case SET_BREADCRUMB:
+    case SET_IS_UPLOADING:
+    case SET_UPLOAD_SUCCESS:
+    case SET_UPLOAD_ERROR:
+    case SET_DISPLAY_MODE:
+    case SET_SELECTED_TAB:
+      return { ...state, ...action.payload };
+    default:
+      return state;
+  }
+}
+
+export { initialState as fileDriveInitialState, reducer as fileDriveReducer };

package/src/containers/FileDrive/utils.tsx

@@ -0,0 +1,37 @@
+import { IFolderTree } from "@ax/types";
+
+const getPath = (tree: IFolderTree[], targetID: number): IFolderTree[] | undefined => {
+  for(const element of tree){
+    if (element.id === targetID) {
+        return [element];
+    }
+    if (element.children.length) {
+        const result = getPath(element.children, targetID);
+        if (result) {
+            result.unshift(element);
+            return result;
+        }
+    }
+  }
+};
+
+const getNewBreadcrumb = (tree: IFolderTree[], target: number | null) => {
+  if(!target) return [];
+
+  return getPath(tree, target) || [];
+}
+
+const updatePropertyById = (id: number, data: IFolderTree[], property: string, value: any) => {
+    for (let i = 0; i < data.length; i++) {
+      if (data[i].id === id) {
+        data[i] = { ...data[i], [property]: value };
+      }
+      if (data[i].children !== undefined && data[i].children.length > 0) {
+        data[i].children = updatePropertyById(id, data[i].children, property, value);
+      }
+    }
+
+    return data;
+}
+
+export { getNewBreadcrumb, updatePropertyById };

package/src/containers/Gallery/actions.tsx

@@ -48,7 +48,7 @@ function setUploadSuccess(isSuccess: boolean): ISetUploadSuccess {
 }
 
 function setUploadError(isError: boolean, errorMsg = ""): ISetUploadError {
-  return { type: SET_UPLOAD_ERROR, payload: { inDropZone: false, isUploading: false, isError, errorMsg } };
+  return { type: SET_UPLOAD_ERROR, payload: { isUploading: false, isError, errorMsg } };
 }
 
 function getSiteImages(props: IGetSiteImages): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {

package/src/containers/Gallery/interfaces.tsx

@@ -35,7 +35,7 @@ export interface ISetUploadSuccess {
 
 export interface ISetUploadError {
   type: typeof SET_UPLOAD_ERROR;
-  payload: { inDropZone: boolean, isUploading: boolean, isError: boolean, errorMsg: string };
+  payload: { isUploading: boolean, isError: boolean, errorMsg: string };
 }
 
 export type GalleryActionsCreators = ISetData & ISetIsLoading & ISetIsSaving & ISetIsUploading & ISetUploadSuccess & ISetUploadError;

package/src/helpers/index.tsx

@@ -37,6 +37,7 @@ import {
   removeEditorIds,
   trimObject,
   hasProps,
+  encodeData,
 } from "./objects";
 
 import {
@@ -187,4 +188,5 @@ export {
   areEqual,
   parseTheme,
   stripHtml,
+  encodeData,
 };

package/src/helpers/objects.tsx

@@ -110,6 +110,11 @@ const hasProps = (obj: Record<string, unknown>, props: string[]): boolean => {
   );
 };
 
+const encodeData = (data: Record<string, string | number | boolean>): string =>
+  Object.entries(data)
+    .map((pair) => pair.map(encodeURIComponent).join("="))
+    .join("&");
+
 export {
   isEmptyObj,
   deepClone,
@@ -123,4 +128,5 @@ export {
   removeEditorIds,
   trimObject,
   hasProps,
+  encodeData,
 };

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { IFolderTree } from "@ax/types";
+
+import * as S from "./style";
+
+const Breadcrumb = (props: IBreadcrumbProps): JSX.Element => {
+  const { breadcrumb, onClick } = props;
+
+  const handleRootClick = () => onClick(null);
+
+  return (
+    <S.BreadcrumbGroup data-testid="file-breadcrumb">
+      <React.Fragment key="root">
+        <S.BreadcrumbItem onClick={handleRootClick} isLastItem={false}>
+          All Documents
+        </S.BreadcrumbItem>
+        {"/"}
+      </React.Fragment>
+      {breadcrumb.slice(0).map((item: IFolderTree, index: number, arr: any) => {
+        const { id, name } = item;
+        const isLastItem = breadcrumb.length === index + 1;
+        const handleClick = () => onClick(id);
+
+        return (
+          <React.Fragment key={`${id}${index}`}>
+            <S.BreadcrumbItem onClick={handleClick} isLastItem={isLastItem}>
+              {name}
+            </S.BreadcrumbItem>
+            {index <= arr.length - 2 && "/"}
+          </React.Fragment>
+        );
+      })}
+    </S.BreadcrumbGroup>
+  );
+};
+
+export interface IBreadcrumbProps {
+  breadcrumb: IFolderTree[];
+  onClick(folderID: number | null): void;
+}
+
+export default Breadcrumb;

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

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+const BreadcrumbGroup = styled.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: ${p => `${p.theme.spacing.s} ${p.theme.spacing.m} 0 ${p.theme.spacing.m}`};
+`;
+
+const BreadcrumbItem = styled.div<{isLastItem: boolean}>`
+  ${p => p.theme.textStyle.uiM};
+  color: ${p => p.isLastItem ? p.theme.color.textMediumEmphasis : p.theme.color.interactive01};
+  padding: 0 ${p => p.theme.spacing.xxs};
+  cursor: ${p => p.isLastItem ? "default" : "pointer"};
+  font-weight: 600;
+`;
+
+export { BreadcrumbGroup, BreadcrumbItem }

package/src/modules/FileDrive/BulkGridHeader/GridHeader/index.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+import { CheckField, TableCounter } from "@ax/components";
+
+import * as S from "./style";
+
+const GridHeader = (props: IProps): JSX.Element => {
+  const { selectAllItems, checkState, totalItems } = props;
+
+  return (
+    <S.Header>
+      <S.CheckWrapper>
+        <CheckField
+          key="selectAll"
+          name="selectAll"
+          value="selectAll"
+          onChange={selectAllItems}
+          checked={checkState.isAllSelected}
+          disabled={false}
+          error={false}
+          title="Select all documents"
+        />
+      </S.CheckWrapper>
+      <S.CounterWrapper>
+        <TableCounter totalItems={totalItems} />
+      </S.CounterWrapper>
+    </S.Header>
+  );
+};
+
+interface IProps {
+  totalItems: number;
+  selectAllItems: () => void;
+  checkState: Record<string, boolean>;
+}
+
+export default GridHeader;

package/src/modules/FileDrive/BulkGridHeader/GridHeader/style.tsx

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+const Header = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-left: ${(p) => p.theme.spacing.m};
+`;
+
+const CheckWrapper = styled.div`
+  label {
+    margin-bottom: 0;
+  }
+`;
+
+const CounterWrapper = styled.div``;
+
+export { Header, CheckWrapper, CounterWrapper };

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

@@ -0,0 +1,35 @@
+import React from "react";
+import { IBulkAction } from "@ax/types";
+
+import GridHeader from "./GridHeader";
+
+import * as S from "./style";
+
+const BulkGridHeader = (props: IBulkHeaderProps): JSX.Element => {
+  const { showBulk, checkState, selectItems, selectAllItems, totalItems, bulkActions } = props;
+
+  return showBulk ? (
+    <S.BulkWrapper>
+      <S.StyledBulkSelectionOptions
+        isScrolling={false}
+        checkState={checkState}
+        actions={bulkActions}
+        selectItems={selectItems}
+        totalItems={totalItems}
+      />
+    </S.BulkWrapper>
+  ) : (
+    <GridHeader selectAllItems={selectAllItems} checkState={checkState} totalItems={totalItems} />
+  );
+};
+
+export interface IBulkHeaderProps {
+  showBulk: boolean;
+  checkState: any;
+  selectItems: () => void;
+  selectAllItems: () => void;
+  totalItems: number;
+  bulkActions: IBulkAction[];
+}
+
+export default BulkGridHeader;

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

@@ -0,0 +1,17 @@
+import React from "react";
+import styled from "styled-components";
+import { BulkSelectionOptions } from "@ax/components";
+
+const BulkWrapper = styled.div`
+  width: 100%;
+  span {
+    margin-left: ${(p) => p.theme.spacing.xs};
+  }
+`;
+
+const StyledBulkSelectionOptions = styled(BulkSelectionOptions)`
+  padding: ${(p) => `0 0 0 ${p.theme.spacing.xs}`};
+  height: ${(p) => p.theme.spacing.s};
+`;
+
+export { BulkWrapper, StyledBulkSelectionOptions }

package/src/modules/FileDrive/BulkListHeader/TableHeader/index.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+import { CheckField, TableCounter } from "@ax/components";
+
+import * as S from "./style";
+
+const TableHeader = (props: IProps): JSX.Element => {
+  const { isScrolling, selectAllItems, checkState, totalItems } = props;
+
+  return (
+    <S.TableHeader isScrolling={isScrolling}>
+      <S.CheckHeader>
+        <CheckField
+          key="selectAll"
+          name="selectAll"
+          value="selectAll"
+          onChange={selectAllItems}
+          checked={checkState.isAllSelected}
+          disabled={false}
+          error={false}
+        />
+      </S.CheckHeader>
+      <S.NameHeader>Name</S.NameHeader>
+      <S.TypeHeader>Type</S.TypeHeader>
+      <S.SizeHeader>Size</S.SizeHeader>
+      <S.UpdatedHeader>Updated</S.UpdatedHeader>
+      <S.TagsHeader>Tags</S.TagsHeader>
+      <S.CounterHeader>
+        <TableCounter totalItems={totalItems} />
+      </S.CounterHeader>
+    </S.TableHeader>
+  );
+};
+
+interface IProps {
+  isScrolling: boolean;
+  totalItems: number;
+  selectAllItems: () => void;
+  checkState: Record<string, boolean>;
+}
+
+export default TableHeader;

package/src/modules/FileDrive/BulkListHeader/TableHeader/style.tsx

@@ -0,0 +1,53 @@
+import styled from "styled-components";
+
+import { Header } from "@ax/components/TableList/style";
+
+const TableHeader = styled.div<{ isScrolling?: boolean }>`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  padding-bottom: ${(p) => p.theme.spacing.m};
+  border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
+`;
+
+const CheckHeader = styled(Header)`
+  padding-right: 0;
+  width: 40px;
+  label {
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
+  > div {
+    width: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+const NameHeader = styled(Header)`
+  flex-grow: 1;
+`;
+
+const TypeHeader = styled(Header)`
+  flex: 0 0 80px;
+  justify-content: center;
+`;
+
+const SizeHeader = styled(Header)`
+  flex: 0 0 80px;
+  justify-content: center;
+`;
+
+const UpdatedHeader = styled(Header)`
+  flex: 0 0 120px;
+  justify-content: center;
+`;
+
+const TagsHeader = styled(Header)`
+  flex: 0 0 300px;
+`;
+
+const CounterHeader = styled(Header)`
+  flex: 0 0 70px;
+  justify-content: flex-end;
+  padding 0;
+`;
+
+export { TableHeader, CheckHeader, NameHeader, TypeHeader, SizeHeader, UpdatedHeader, TagsHeader, CounterHeader };

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

@@ -0,0 +1,35 @@
+import React from "react";
+import { IBulkAction } from "@ax/types";
+
+import TableHeader from "./TableHeader";
+
+import * as S from "./style";
+
+const BulkListHeader = (props: IBulkHeaderProps): JSX.Element => {
+  const { showBulk, checkState, selectItems, selectAllItems, totalItems, bulkActions } = props;
+
+  return showBulk ? (
+    <S.BulkWrapper>
+      <S.StyledBulkSelectionOptions
+        isScrolling={false}
+        checkState={checkState}
+        actions={bulkActions}
+        selectItems={selectItems}
+        totalItems={totalItems}
+      />
+    </S.BulkWrapper>
+  ) : (
+    <TableHeader isScrolling={false} selectAllItems={selectAllItems} checkState={checkState} totalItems={totalItems} />
+  );
+};
+
+export interface IBulkHeaderProps {
+  showBulk: boolean;
+  checkState: any;
+  selectItems: () => void;
+  selectAllItems: () => void;
+  totalItems: number;
+  bulkActions: IBulkAction[];
+}
+
+export default BulkListHeader;

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

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+import { BulkSelectionOptions } from "@ax/components";
+
+const BulkWrapper = styled.div`
+  width: 100%;
+  span {
+    margin-left: ${(p) => p.theme.spacing.xs};
+  }
+`;
+
+const StyledBulkSelectionOptions = styled(BulkSelectionOptions)`
+  padding: ${(p) => `0 0 ${p.theme.spacing.m} 0`};
+  margin-top: ${(p) => `-${p.theme.spacing.xs}`};
+  margin-bottom: ${(p) => `-${p.theme.spacing.xs}`};
+`;
+
+export { BulkWrapper, StyledBulkSelectionOptions }