diff --git a/src/components/molecules/CurrentDirectoryRow/index.tsx b/src/components/molecules/CurrentDirectoryRow/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c5ee5b682b40db60ea5b9c97bd4edacebff4dc05
--- /dev/null
+++ b/src/components/molecules/CurrentDirectoryRow/index.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+
+import Row from "react-bootstrap/esm/Row";
+import Col from "react-bootstrap/esm/Col";
+import FileCard from "components/atoms/FileCard";
+import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
+import {
+ faFileAlt,
+ IconDefinition,
+ faFilePdf,
+ faFileVideo,
+} from "@fortawesome/free-solid-svg-icons";
+import { SelectionProps } from "components/molecules/SelectionView";
+
+const CurrentDirectoryRow: React.FC<{ select: SelectionProps }> = ({
+ select,
+}) => {
+ return (
+ <Row
+ style={{ marginTop: "10px", marginLeft: "-10px", marginRight: "-10px" }}
+ >
+ {select.selectionItems.map(({ title, type, tags, id }) => {
+ let normalIcon: IconDefinition;
+ if (type === undefined || tags === undefined) return;
+ switch (type) {
+ case "pdf":
+ normalIcon = faFilePdf;
+ break;
+ case "video":
+ normalIcon = faFileVideo;
+ break;
+ default:
+ normalIcon = faFileAlt;
+ break;
+ }
+ return (
+ <Col
+ xs={6}
+ sm={6}
+ md={6}
+ lg={4}
+ xl={3}
+ key={id}
+ style={{
+ marginBottom: ".5rem",
+ marginTop: ".5rem",
+ paddingLeft: "10px",
+ paddingRight: "10px",
+ }}
+ >
+ <FileCard
+ title={title}
+ type={type}
+ tags={tags}
+ icon={
+ select.isAnySelected() || select.state.isHoveringOver[id]
+ ? select.state.isSelected[id]
+ ? faCheckSquare
+ : faSquare
+ : normalIcon
+ }
+ onClick={() => select.handleCardClick(id)}
+ onIconClick={(e) => {
+ e.stopPropagation();
+ select.handleIconClick(id);
+ }}
+ onMouseOver={() => select.handleMouseOver(id)}
+ onMouseOut={() => select.handleMouseOut(id)}
+ />
+ </Col>
+ );
+ })}
+ </Row>
+ );
+};
+
+export default CurrentDirectoryRow;
diff --git a/src/components/molecules/FoldersRow/index.tsx b/src/components/molecules/FoldersRow/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4ad41a9b4b4b4e5448ebcd680c3a74bc8386ada8
--- /dev/null
+++ b/src/components/molecules/FoldersRow/index.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import Row from "react-bootstrap/esm/Row";
+import Col from "react-bootstrap/esm/Col";
+import FolderCard from "components/atoms/FolderCard";
+import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
+import { faFolder } from "@fortawesome/free-solid-svg-icons";
+import { SelectionProps } from "../SelectionView";
+
+const FoldersRow: React.FC<{ select: SelectionProps }> = ({
+ select,
+}) => {
+ return (
+ <Row style={{ marginTop: "10px", marginRight: "-10px", marginLeft: "-10px" }}>
+ {select.selectionItems.map(({ title, id }) => (
+ <Col xs={6} sm={6} md={3} key={id} style={{ paddingLeft: "10px", paddingRight: "10px" }}>
+ <FolderCard
+ title={title}
+ icon={
+ select.isAnySelected() || select.state.isHoveringOver[id]
+ ? select.state.isSelected[id]
+ ? faCheckSquare
+ : faSquare
+ : faFolder
+ }
+ onIconClick={(e) => {
+ e.stopPropagation();
+ select.handleIconClick(id);
+ }}
+ onClick={() => select.handleCardClick(id)}
+ onMouseOver={() => select.handleMouseOver(id)}
+ onMouseOut={() => select.handleMouseOut(id)}
+ />
+ </Col>
+ ))}
+ </Row>
+ );
+ }
+
+export default FoldersRow;
diff --git a/src/components/molecules/FoldersRow/style.module.scss b/src/components/molecules/FoldersRow/style.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..90ea856afd314ce5f5fcb15385a193cded7090ca
--- /dev/null
+++ b/src/components/molecules/FoldersRow/style.module.scss
@@ -0,0 +1 @@
+@import "assets/scss/custom";
\ No newline at end of file
diff --git a/src/components/molecules/NewQuickAccessView/index.tsx b/src/components/molecules/NewQuickAccessView/index.tsx
deleted file mode 100644
index 1903c5e602a9a11eb0b1ee0537d8c6105bffb35f..0000000000000000000000000000000000000000
--- a/src/components/molecules/NewQuickAccessView/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from "react";
-import styles from "./style.module.scss";
-
-import classNames from "classnames";
-import Row from "react-bootstrap/esm/Row";
-import Col from "react-bootstrap/esm/Col";
-import FileCard from "components/atoms/FileCard";
-import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
-import {
- faFileAlt,
- IconDefinition,
- faFilePdf,
- faFileVideo,
-} from "@fortawesome/free-solid-svg-icons";
-import { SelectionProps } from "components/molecules/SelectionView";
-
-const NewQuickAccessView: React.FC<{ select: SelectionProps }> = ({
- select,
-}) => {
- return (
- <>
- <Row
- className={classNames(
- "d-flex",
- "flex-row",
- "flex-nowrap",
- styles.quickAccessRow
- )}
- >
- {select.quickAccessItems.map(({ title, type, tags, id }) => {
- let normalIcon: IconDefinition;
- switch (type) {
- case "pdf":
- normalIcon = faFilePdf;
- break;
- case "video":
- normalIcon = faFileVideo;
- break;
- default:
- normalIcon = faFileAlt;
- break;
- }
- return (
- <Col
- xs={7}
- sm={5}
- md={5}
- lg={4}
- xl={3}
- key={id}
- style={{
- marginBottom: ".5rem",
- marginTop: ".5rem",
- paddingLeft: "10px",
- paddingRight: "10px",
- }}
- >
- <FileCard
- title={title}
- type={type}
- tags={tags}
- icon={
- select.isAnySelected() || select.state.isHoveringOver[id]
- ? select.state.isSelected[id]
- ? faCheckSquare
- : faSquare
- : normalIcon
- }
- onClick={() => select.handleCardClick(id)}
- onIconClick={(e) => {
- e.stopPropagation();
- select.handleIconClick(id);
- }}
- onMouseOver={() => select.handleMouseOver(id)}
- onMouseOut={() => select.handleMouseOut(id)}
- />
- </Col>
- );
- })}
- </Row>
- </>
- );
-};
-
-export default NewQuickAccessView;
diff --git a/src/components/molecules/QuickAccessRow/index.tsx b/src/components/molecules/QuickAccessRow/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..126eeb7b46dc0d36d40170938f4f539b602b411e
--- /dev/null
+++ b/src/components/molecules/QuickAccessRow/index.tsx
@@ -0,0 +1,84 @@
+import React from "react";
+import styles from "./style.module.scss";
+
+import classNames from "classnames";
+import Row from "react-bootstrap/esm/Row";
+import Col from "react-bootstrap/esm/Col";
+import FileCard from "components/atoms/FileCard";
+import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
+import {
+ faFileAlt,
+ IconDefinition,
+ faFilePdf,
+ faFileVideo,
+} from "@fortawesome/free-solid-svg-icons";
+import { SelectionProps } from "components/molecules/SelectionView";
+
+const QuickAccessRow: React.FC<{ select: SelectionProps }> = ({
+ select,
+}) => {
+ return (
+ <Row
+ className={classNames(
+ "d-flex",
+ "flex-row",
+ "flex-nowrap",
+ styles.quickAccessRow
+ )}
+ >
+ {select.selectionItems.map(({ title, type, tags, id }) => {
+ let normalIcon: IconDefinition;
+ if (type === undefined || tags === undefined) return;
+ switch (type) {
+ case "pdf":
+ normalIcon = faFilePdf;
+ break;
+ case "video":
+ normalIcon = faFileVideo;
+ break;
+ default:
+ normalIcon = faFileAlt;
+ break;
+ }
+ return (
+ <Col
+ xs={7}
+ sm={5}
+ md={5}
+ lg={4}
+ xl={3}
+ key={id}
+ style={{
+ marginBottom: ".5rem",
+ marginTop: ".5rem",
+ paddingLeft: "10px",
+ paddingRight: "10px",
+ }}
+ >
+ <FileCard
+ title={title}
+ type={type}
+ tags={tags}
+ icon={
+ select.isAnySelected() || select.state.isHoveringOver[id]
+ ? select.state.isSelected[id]
+ ? faCheckSquare
+ : faSquare
+ : normalIcon
+ }
+ onClick={() => select.handleCardClick(id)}
+ onIconClick={(e) => {
+ e.stopPropagation();
+ select.handleIconClick(id);
+ }}
+ onMouseOver={() => select.handleMouseOver(id)}
+ onMouseOut={() => select.handleMouseOut(id)}
+ />
+ </Col>
+ );
+ })}
+ </Row>
+ );
+};
+
+export default QuickAccessRow;
diff --git a/src/components/molecules/NewQuickAccessView/style.module.scss b/src/components/molecules/QuickAccessRow/style.module.scss
similarity index 100%
rename from src/components/molecules/NewQuickAccessView/style.module.scss
rename to src/components/molecules/QuickAccessRow/style.module.scss
diff --git a/src/components/molecules/SelectionView/index.tsx b/src/components/molecules/SelectionView/index.tsx
index 3cdffc8e199360c5de234400a2f14588eec8cc6e..b41bc74f8e5a1937f7a50827021dda97acc0dec5 100644
--- a/src/components/molecules/SelectionView/index.tsx
+++ b/src/components/molecules/SelectionView/index.tsx
@@ -5,13 +5,17 @@ import { request } from "../../../utils/api";
import ResourceSectionHeader from "../ResourceSectionHeader";
import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
+interface SelectionItem {
+ title: string;
+ id: number;
+ type?: string;
+ tags?: string[];
+}
+
+type idBooleanMap = { [key: number]: boolean };
+
export interface SelectionProps {
- quickAccessItems: {
- title: string;
- type: string;
- tags: string[];
- id: number;
- }[];
+ selectionItems: SelectionItem[];
state: MyState;
isAnySelected: () => boolean;
handleCardClick: (id: number) => void;
@@ -21,18 +25,12 @@ export interface SelectionProps {
}
export interface MyProps {
- quickAccessItems: {
- title: string;
- type: string;
- tags: string[];
- id: number;
- }[];
+ selectionItems: SelectionItem[];
moduleCode?: string;
- render: (selection: SelectionProps) => any;
+ render: (selection: SelectionProps) => any;
+ heading: string;
}
-type idBooleanMap = { [key: number]: boolean };
-
interface MyState {
isSelected: idBooleanMap;
isHoveringOver: idBooleanMap;
@@ -47,7 +45,7 @@ class SelectionView extends React.Component<MyProps, MyState> {
componentDidMount() {
let isSelected: idBooleanMap = [];
let isHoveringOver: idBooleanMap = [];
- this.props.quickAccessItems.forEach(({ id }: { id: number }) => {
+ this.props.selectionItems.forEach(({ id }: { id: number }) => {
isSelected[id] = false;
isHoveringOver[id] = false;
});
@@ -55,7 +53,7 @@ class SelectionView extends React.Component<MyProps, MyState> {
}
isAnySelected(): boolean {
- let items = this.props.quickAccessItems;
+ let items = this.props.selectionItems;
let isSelected = this.state.isSelected;
for (let item in items) {
if (isSelected[items[item].id]) {
@@ -66,7 +64,7 @@ class SelectionView extends React.Component<MyProps, MyState> {
}
isAllSelected(): boolean {
- let items = this.props.quickAccessItems;
+ let items = this.props.selectionItems;
let isSelected = this.state.isSelected;
for (let item in items) {
if (!isSelected[items[item].id]) {
@@ -87,7 +85,7 @@ class SelectionView extends React.Component<MyProps, MyState> {
handleDownloadClick() {}
handleSelectAllClick() {
- let items = this.props.quickAccessItems;
+ let items = this.props.selectionItems;
let isSelected = JSON.parse(JSON.stringify(this.state.isSelected));
let setValue = !this.isAllSelected();
for (let item in items) {
@@ -117,7 +115,7 @@ class SelectionView extends React.Component<MyProps, MyState> {
render() {
let selection: SelectionProps = {
- quickAccessItems: this.props.quickAccessItems,
+ selectionItems: this.props.selectionItems,
state: this.state,
isAnySelected: () => this.isAnySelected(),
handleCardClick: (id: number) => this.handleCardClick(id),
@@ -129,7 +127,7 @@ class SelectionView extends React.Component<MyProps, MyState> {
return (
<>
<ResourceSectionHeader
- heading="Quick Access"
+ heading={this.props.heading}
onDownloadClick={() => this.handleDownloadClick()}
showDownload={this.isAnySelected()}
onSelectAllClick={() => this.handleSelectAllClick()}
diff --git a/src/components/molecules/SelectionView/style.module.scss b/src/components/molecules/SelectionView/style.module.scss
deleted file mode 100644
index be0bbee19659e8ce8dd9d229878297f64b141ca8..0000000000000000000000000000000000000000
--- a/src/components/molecules/SelectionView/style.module.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@import "assets/scss/custom";
-
-.quickAccessRow {
- scrollbar-width: thin;
- scrollbar-color: $white $white;
- margin-top: 10px;
- overflow-y: visible;
- overflow-x: auto;
- margin-right: -10px;
- margin-left: -10px;
- // margin-left: 0; // leave space before card
-}
-
-.quickAccessRow::-webkit-scrollbar {
- width: 1rem;
- height: 0.5rem;
-}
-.quickAccessRow::-webkit-scrollbar-track {
- background: $white;
- margin-left: 10px;
- margin-right: 10px;
-}
-.quickAccessRow::-webkit-scrollbar-thumb {
- background-color: $white;
- border-radius: .5rem;
-}
-
-.quickAccessRow:hover {
- scrollbar-color: $gray-400 $white;
-}
-
-.quickAccessRow:hover::-webkit-scrollbar-thumb {
- background-color: $gray-400;
-}
diff --git a/src/components/pages/ModuleResources/index.tsx b/src/components/pages/ModuleResources/index.tsx
index 5943f9048cd693192fb79dde67f8250202853420..3d07f8d01dd730a90c2dda5ca2952045ed4145c9 100644
--- a/src/components/pages/ModuleResources/index.tsx
+++ b/src/components/pages/ModuleResources/index.tsx
@@ -4,10 +4,15 @@ import { request } from "../../../utils/api";
import { api, methods } from "../../../constants/routes";
import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
-import QuickAccessView from "components/molecules/QuickAccessView";
+import QuickAccessRow from "components/molecules/QuickAccessRow";
import ResourcesFolderView from "components/molecules/ResourcesFolderView";
import CurrentDirectoryView from "components/molecules/CurrentDirectoryView";
import SearchBox from "components/molecules/SearchBox";
+import SelectionView, {
+ SelectionProps,
+} from "components/molecules/SelectionView";
+import CurrentDirectoryRow from "components/molecules/CurrentDirectoryRow";
+import FoldersRow from "components/molecules/FoldersRow";
interface Resource {
title: string;
@@ -116,8 +121,16 @@ class ModuleResources extends React.Component<ResourcesProps, ResourceState> {
id: id,
}));
- if (this.state.searchText === "" && scope === "" && folders.length > 0) {
- return <ResourcesFolderView folderItems={folders} />;
+ if (this.state.searchText === "" && scope === "" && folders.length > 0) {
+ return (
+ <SelectionView
+ heading="Folders"
+ selectionItems={folders}
+ render={(select: SelectionProps) => (
+ <FoldersRow select={select} />
+ )}
+ />
+ );
}
}
@@ -134,9 +147,12 @@ class ModuleResources extends React.Component<ResourcesProps, ResourceState> {
if (scope !== "" || this.state.searchText !== "") {
return (
- <CurrentDirectoryView
- documentItems={filesContent}
- moduleCode={this.moduleCode}
+ <SelectionView
+ heading="Files"
+ selectionItems={filesContent}
+ render={(select: SelectionProps) => (
+ <CurrentDirectoryRow select={select} />
+ )}
/>
);
}
@@ -154,9 +170,12 @@ class ModuleResources extends React.Component<ResourcesProps, ResourceState> {
quickAccessItems.length > 0
) {
return (
- <QuickAccessView
- quickAccessItems={quickAccessItems}
- moduleCode={this.moduleCode}
+ <SelectionView
+ heading="Quick Access"
+ selectionItems={quickAccessItems}
+ render={(select: SelectionProps) => (
+ <QuickAccessRow select={select} />
+ )}
/>
);
}