From 0f1c0f0bbd534af82c17292df6623a50c5a240b5 Mon Sep 17 00:00:00 2001 From: subnub Date: Sun, 23 Jun 2024 08:29:58 -0400 Subject: [PATCH] got sort by working, started css fixes for various screen sizes --- backend/services/FileService/index.ts | 3 +- src/components/Dataform/DataForm.jsx | 140 +++++----- src/components/Dataform/index.jsx | 262 ++++++++++--------- src/components/FileItem/index.jsx | 61 +++-- src/components/FolderItem/index.jsx | 9 + src/components/Folders/index.jsx | 123 +++++++++ src/components/Homepage/index.jsx | 1 - src/components/LeftSection/LeftSection.jsx | 2 +- src/components/RightSection/RightSection.jsx | 32 +-- src/hooks/contextMenu.ts | 21 +- src/hooks/files.ts | 5 +- src/styles/components/file_panel.scss | 2 - tailwind.config.js | 14 + 13 files changed, 428 insertions(+), 247 deletions(-) create mode 100644 src/components/Folders/index.jsx diff --git a/backend/services/FileService/index.ts b/backend/services/FileService/index.ts index 0ac11b9..627d71b 100644 --- a/backend/services/FileService/index.ts +++ b/backend/services/FileService/index.ts @@ -121,7 +121,7 @@ class MongoFileService { let searchQuery = query.search || ""; const parent = query.parent || "/"; let limit = query.limit || 50; - let sortBy = query.soryBy || "DEFAULT"; + let sortBy = query.sortBy || "DEFAULT"; const startAt = query.startAt || undefined; const startAtDate = query.startAtDate || "0"; const startAtName = query.startAtName || ""; @@ -129,6 +129,7 @@ class MongoFileService { const folderSearch = query.folder_search || undefined; sortBy = sortBySwitch(sortBy); limit = parseInt(limit); + console.log("sortBy", sortBy, query.sortBy); const s3Enabled = user.s3Enabled ? true : false; diff --git a/src/components/Dataform/DataForm.jsx b/src/components/Dataform/DataForm.jsx index 2f07504..ed2e539 100644 --- a/src/components/Dataform/DataForm.jsx +++ b/src/components/Dataform/DataForm.jsx @@ -2,6 +2,7 @@ import FileItem from "../FileItem"; import FolderItem from "../FolderItem"; import React from "react"; import QuickAccess from "../QuickAccess"; +import Folders from "../Folders"; import ParentBar from "../ParentBar"; import Spinner from "../Spinner"; import SpinnerImage from "../SpinnerImage"; @@ -28,12 +29,7 @@ const DataForm = (props) => { : "file__control--panel folder__view" } > - {!props.loading ? ( - - ) : undefined} + {!props.loading ? : undefined} {/* style={props.folders.length === 0 ? {} : props.parent === "/" ? {marginTop:"50px", display:"block"} : {display:"block"} */} -
-
-

- {folders?.length === 0 ? "No Folders" : "Folders"} -

-
- -
- {folders?.map((folder) => ( - - ))} -
-
+
-
+
{props.parent === "/" ? (

{props.search !== "" ? "Files" : "Home Files"}

-
+
@@ -110,13 +86,13 @@ const DataForm = (props) => {
) : (
-
+ ) : ( - + + + - - - {files?.pages.map((filePage, index) => ( {filePage.map((file) => ( - + ))} ))} diff --git a/src/components/Dataform/index.jsx b/src/components/Dataform/index.jsx index a047551..b3f2d0a 100644 --- a/src/components/Dataform/index.jsx +++ b/src/components/Dataform/index.jsx @@ -1,146 +1,152 @@ import DataForm from "./DataForm"; -import {connect} from "react-redux"; +import { connect } from "react-redux"; import React from "react"; -import { enableListView, disableListView, setSortBy } from "../../actions/filter"; +import { + enableListView, + disableListView, + setSortBy, +} from "../../actions/filter"; import { startSetFiles, startLoadMoreFiles } from "../../actions/files"; import { startSetFolders } from "../../actions/folders"; import { resetItems } from "../../actions/main"; class DataFormContainer extends React.Component { + constructor(props) { + super(props); - constructor(props) { + this.timeout = 0; + } - super(props); + changeListViewMode = () => { + if (!this.props.listView) { + this.props.dispatch(enableListView()); + } else { + this.props.dispatch(disableListView()); + } + }; - this.timeout = 0; + onScrollEvent = () => {}; + + componentDidMount = () => { + document.addEventListener("scroll", this.scrollCheck); + }; + + scrollCheck = (e) => { + const heightValue = app.clientHeight - app.clientHeight / 4; + + if (heightValue < window.scrollY) { + const date = new Date(); + + if ( + this.props.loadMoreItems && + this.timeout < date.getTime() && + !this.props.loadingMoreItems + ) { + this.timeout = date.getTime() + 500; + this.loadMoreItems(); + } else { + } + } + }; + + loadMoreItems = () => { + let limit = window.localStorage.getItem("list-size") || 50; + limit = parseInt(limit); + + if (this.props.files.length >= limit) { + const parent = this.props.parent; + const search = this.props.search; + const sortBy = this.props.sortBy; + const lastFileDate = + this.props.files[this.props.files.length - 1].uploadDate; + const lastFileName = + this.props.files[this.props.files.length - 1].filename; + const lastPageToken = + this.props.files[this.props.files.length - 1].pageToken; + const isGoogle = this.props.isGoogle; + + this.props.dispatch( + startLoadMoreFiles( + parent, + sortBy, + search, + lastFileDate, + lastFileName, + lastPageToken, + isGoogle + ) + ); + } + }; + + componentDidUpdate = () => {}; + + switchSortBy = () => { + let sortByString = this.props.sortBy.includes("date") + ? this.props.sortBy === "date_desc" + ? "date_asc" + : "date_desc" + : this.props.sortBy === "alp_desc" + ? "alp_asc" + : "alp_desc"; + + this.props.dispatch(setSortBy(sortByString)); + }; + + onChangeSelect = (e) => { + const value = e.target.value; + + let sortByString = ""; + + if (value === "date") { + if (this.props.sortBy.includes("asc")) { + sortByString = "date_asc"; + } else { + sortByString = "date_desc"; + } + } else if (value === "name") { + if (this.props.sortBy.includes("asc")) { + sortByString = "alp_asc"; + } else { + sortByString = "alp_desc"; + } } - changeListViewMode = () => { + const parent = this.props.parent; + const search = this.props.search; - if (!this.props.listView) { - this.props.dispatch(enableListView()) - } else { - this.props.dispatch(disableListView()) - } - - } + this.props.dispatch(setSortBy(sortByString)); + this.props.dispatch(startSetFiles(parent, sortByString, search)); + this.props.dispatch(startSetFolders(parent, sortByString, search)); + this.props.dispatch(resetItems()); + }; - onScrollEvent = () => { - } - - - componentDidMount = () => { - - document.addEventListener("scroll", this.scrollCheck) - } - - scrollCheck = (e) => { - - const heightValue = (app.clientHeight - (app.clientHeight / 4)); - - if (heightValue < window.scrollY) { - - const date = new Date(); - - if (this.props.loadMoreItems && this.timeout < date.getTime() && !this.props.loadingMoreItems) { - this.timeout = date.getTime() + 500; - this.loadMoreItems(); - } else { - - } - } - } - - loadMoreItems = () => { - - let limit = window.localStorage.getItem("list-size") || 50 - limit = parseInt(limit) - - if (this.props.files.length >= limit) { - - const parent = this.props.parent; - const search = this.props.search; - const sortBy = this.props.sortBy; - const lastFileDate = this.props.files[this.props.files.length - 1].uploadDate - const lastFileName = this.props.files[this.props.files.length - 1].filename - const lastPageToken = this.props.files[this.props.files.length - 1].pageToken - const isGoogle = this.props.isGoogle; - - this.props.dispatch(startLoadMoreFiles(parent, sortBy, search, lastFileDate, lastFileName, lastPageToken, isGoogle)) - } - } - - componentDidUpdate = () => { - - } - - switchSortBy = () => { - - let sortByString = this.props.sortBy.includes('date') ? - this.props.sortBy === "date_desc" ? 'date_asc' : 'date_desc' : - this.props.sortBy === 'alp_desc' ? 'alp_asc' : 'alp_desc'; - - const parent = this.props.parent; - const search = this.props.search; - - this.props.dispatch(setSortBy(sortByString)) - this.props.dispatch(startSetFiles(parent, sortByString, search)) - this.props.dispatch(startSetFolders(parent, sortByString, search)) - this.props.dispatch(resetItems()) - } - - onChangeSelect = (e) => { - - const value = e.target.value; - - let sortByString = '' - - if (value === "date") { - if (this.props.sortBy.includes("asc")) { - sortByString = 'date_asc'; - } else { - sortByString = 'date_desc'; - } - } else if (value === 'name') { - if (this.props.sortBy.includes('asc')) { - sortByString = 'alp_asc' - } else { - sortByString = 'alp_desc' - } - } - - const parent = this.props.parent; - const search = this.props.search; - - this.props.dispatch(setSortBy(sortByString)) - this.props.dispatch(startSetFiles(parent, sortByString, search)) - this.props.dispatch(startSetFolders(parent, sortByString, search)) - this.props.dispatch(resetItems()) - } - - render() { - return - } + render() { + return ( + + ); + } } const mapStateToProp = (state) => ({ - files: state.files, - folders: state.folders, - selected: state.selectedItem.selected, - resetItems: state.main.resetItems, - parent: state.parent.parent, - listView: state.filter.listView, - sortBy: state.filter.sortBy, - search: state.filter.search, - isGoogle: state.filter.isGoogle, - loadMoreItems: state.main.loadMoreItems, - loading: state.main.loading, - loadingMoreItems: state.main.loadingMoreItems -}) + files: state.files, + folders: state.folders, + selected: state.selectedItem.selected, + resetItems: state.main.resetItems, + parent: state.parent.parent, + listView: state.filter.listView, + sortBy: state.filter.sortBy, + search: state.filter.search, + isGoogle: state.filter.isGoogle, + loadMoreItems: state.main.loadMoreItems, + loading: state.main.loading, + loadingMoreItems: state.main.loadingMoreItems, +}); -export default connect(mapStateToProp)(DataFormContainer); \ No newline at end of file +export default connect(mapStateToProp)(DataFormContainer); diff --git a/src/components/FileItem/index.jsx b/src/components/FileItem/index.jsx index ca524c8..b0540c1 100644 --- a/src/components/FileItem/index.jsx +++ b/src/components/FileItem/index.jsx @@ -10,6 +10,7 @@ import { useThumbnail } from "../../hooks/files"; import { getFileColor, getFileExtension } from "../../utils/files"; import { startSetSelectedItem } from "../../actions/selectedItem"; import { setPopupFile } from "../../actions/popupFile"; +import bytes from "bytes"; const FileItem = (props) => { const { file } = props; @@ -65,7 +66,12 @@ const FileItem = (props) => { if (listView) { return ( { onTouchEnd={onTouchEnd} > {/* */} - - - - diff --git a/src/components/FolderItem/index.jsx b/src/components/FolderItem/index.jsx index 65b782b..c5dcbb4 100644 --- a/src/components/FolderItem/index.jsx +++ b/src/components/FolderItem/index.jsx @@ -6,6 +6,7 @@ import { useDispatch, useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; import { startSetSelectedItem } from "../../actions/selectedItem"; import mobilecheck from "../../utils/mobileCheck"; +import moment from "moment"; const FolderItem = (props) => { const { folder } = props; @@ -99,6 +100,14 @@ const FolderItem = (props) => { >

{props.folder.name}

+

+ Created {moment(folder.createdAt).format("MM/DD/YY hh:mma")} +

); }; diff --git a/src/components/Folders/index.jsx b/src/components/Folders/index.jsx new file mode 100644 index 0000000..0bb2dce --- /dev/null +++ b/src/components/Folders/index.jsx @@ -0,0 +1,123 @@ +import { useDispatch, useSelector } from "react-redux"; +import { useFolders } from "../../hooks/folders"; +import { setSortBy } from "../../actions/filter"; +import FolderItem from "../FolderItem"; + +const Folder = () => { + const { data: folders } = useFolders(); + const sortBy = useSelector((state) => state.filter.sortBy); + const parent = useSelector((state) => state.parent.parent); + const dispatch = useDispatch(); + console.log("sortBy", sortBy); + + const switchOrderSortBy = () => { + let newSortBy = ""; + switch (sortBy) { + case "date_asc": { + newSortBy = "date_desc"; + break; + } + case "date_desc": { + newSortBy = "date_asc"; + break; + } + case "alp_asc": { + newSortBy = "alp_desc"; + break; + } + case "alp_desc": { + newSortBy = "alp_asc"; + break; + } + default: { + newSortBy = "date_desc"; + break; + } + } + console.log("new sortBy", newSortBy); + + dispatch(setSortBy(newSortBy)); + }; + + const switchTypeOrderBy = (e) => { + const value = e.target.value; + + let newSortBy = "date_desc"; + + if (value === "date") { + if (sortBy.includes("asc")) { + newSortBy = "date_asc"; + } else { + newSortBy = "date_desc"; + } + } else if (value === "name") { + if (sortBy.includes("asc")) { + newSortBy = "alp_asc"; + } else { + newSortBy = "alp_desc"; + } + } + + dispatch(setSortBy(newSortBy)); + }; + + return ( +
+
+

+ {folders?.length === 0 ? "No Folders" : "Folders"} +

+
+ + + + + + + + +
+
+ +
+ {folders?.map((folder) => ( + + ))} +
+
+ ); +}; + +export default Folder; diff --git a/src/components/Homepage/index.jsx b/src/components/Homepage/index.jsx index b5ea0d5..33a40ab 100644 --- a/src/components/Homepage/index.jsx +++ b/src/components/Homepage/index.jsx @@ -69,7 +69,6 @@ class HomePageContainer extends React.Component { }; loginCheck = () => { - console.log("props", this.props); const pathname = this.props.location.pathname; if (this.props.isAuthenticated) { diff --git a/src/components/LeftSection/LeftSection.jsx b/src/components/LeftSection/LeftSection.jsx index 91d5809..846adab 100644 --- a/src/components/LeftSection/LeftSection.jsx +++ b/src/components/LeftSection/LeftSection.jsx @@ -14,7 +14,7 @@ class LeftSection extends React.Component { render() { return (
{this.props.selectedItem.name === "" ? ( -
+
filedetailsicon

Select a file or folder to view it’s details

) : ( -
+
-
+
typedetailed1
-
+

{this.props.selectedItem.name}

-
-
+
+
Type {this.props.selectedItem.size @@ -60,7 +62,7 @@ class RightSection extends React.Component {
Size {bytes(this.props.selectedItem.size)}
-
+
Created {moment(this.props.selectedItem.date).format("L")}
-
+
Location {this.props.selectedItem.drive @@ -85,7 +87,7 @@ class RightSection extends React.Component {
-
+
{this.props.selectedItem.file ? "Open File" : "Open Folder"} -
+
diff --git a/src/hooks/contextMenu.ts b/src/hooks/contextMenu.ts index 8807b4f..6cf48fb 100644 --- a/src/hooks/contextMenu.ts +++ b/src/hooks/contextMenu.ts @@ -1,6 +1,7 @@ import { useRef, useState } from "react"; export const useContextMenu = () => { + // 215 X 240 const [contextData, setContextData] = useState({ selected: false, X: 0, @@ -11,11 +12,27 @@ export const useContextMenu = () => { const onContextMenu = (e: React.MouseEvent) => { if (e) e.stopPropagation(); if (e) e.preventDefault(); + + const contextWidth = 245; + const contextHeight = 260; + + const { innerWidth: windowWidth, innerHeight: windowHeight } = window; + let X = e.clientX; + let Y = e.clientY; + + if (X + contextWidth > windowWidth) { + X = windowWidth - contextWidth; + } + + if (Y + contextHeight > windowHeight) { + Y = windowHeight - contextHeight; + } + setContextData({ ...contextData, selected: true, - X: e.clientX, - Y: e.clientY, + X, + Y, }); }; diff --git a/src/hooks/files.ts b/src/hooks/files.ts index 90cb670..adce434 100644 --- a/src/hooks/files.ts +++ b/src/hooks/files.ts @@ -6,16 +6,19 @@ import { getQuickFilesList, } from "../api/filesAPI"; import { useCallback, useEffect, useState } from "react"; +import { useSelector } from "react-redux"; export const useFiles = () => { const params = useParams(); + // TODO: Remove any + const sortBy = useSelector((state: any) => state.filter.sortBy); const filesReactQuery = useInfiniteQuery( [ "files", { parent: params.id || "/", search: "", - sortBy: undefined, + sortBy: sortBy, limit: undefined, }, ], diff --git a/src/styles/components/file_panel.scss b/src/styles/components/file_panel.scss index cf437ad..4c17aea 100644 --- a/src/styles/components/file_panel.scss +++ b/src/styles/components/file_panel.scss @@ -1157,8 +1157,6 @@ } .name__row { - width: 100%; - @media (max-width: 767px) { width: 46%; } diff --git a/tailwind.config.js b/tailwind.config.js index 1a3bfb3..f28e73a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,6 +12,20 @@ module.exports = { quickAccessTwo: "1210px", quickAccessThree: "1420px", quickAccessFour: "1600px", + xxs: "360px", + xs: "480px", + sm: "640px", + md: "768px", + lg: "1024px", + xl: "1280px", + xxl: "1536px", + fileTextXL: "1600px", + fileTextLG: "1400px", + fileTextMD: "1200px", + fileTextSM: "1000px", + fileTextXSM: "900px", + fileListShowDetails: "680px", + mobileMode: "1100px", }, }, plugins: [],
- - - sortarrow + + +

+ Size +

+ 		+

+ Modified +

+ 		+

+ Actions +

LocationModified
-
- +
+
+
- {fileExtension} + + {fileExtension} +
-

{props.file.filename}

+

+ {props.file.filename} +

- {props.file.metadata.drive - ? "Google Drive" - : props.file.metadata.personalFile - ? "Amazon S3" - : "myDrive"} + +

{bytes(props.file.length)}

 - {moment(props.uploadDate).format("L")} + +

+ {moment(props.file.uploadDate).format("L")} +

-
-
+
+
+
{
{/* */} - +