From 625140e27aa494bbae4073a2356df1f3998325fe Mon Sep 17 00:00:00 2001 From: YongJoon Oh Date: Wed, 6 May 2020 12:33:15 -0700 Subject: [PATCH 1/6] Implemented Sorting Functionality --- .../download_list/DownloadListTable.tsx | 220 +++++++++++------- 1 file changed, 131 insertions(+), 89 deletions(-) diff --git a/src/lib/containers/download_list/DownloadListTable.tsx b/src/lib/containers/download_list/DownloadListTable.tsx index fcbc2f3a1f..53775e8fa3 100644 --- a/src/lib/containers/download_list/DownloadListTable.tsx +++ b/src/lib/containers/download_list/DownloadListTable.tsx @@ -68,9 +68,9 @@ export default function DownloadListTable(props: DownloadListTableProps) { // Get owner ids from download list by filtering to items that have a file handle // then map to ownerIds const ownerIds: string[] = requestedFiles - .filter(el => el.fileHandle && el.fileHandle.createdBy) + .filter((el) => el.fileHandle && el.fileHandle.createdBy) // use bang operator because filter function guarentee's that file handle will be defined - .map(el => el.fileHandle!.createdBy!) + .map((el) => el.fileHandle!.createdBy!) const userProfiles = useGetInfoFromIds({ ids: ownerIds, token, @@ -112,14 +112,14 @@ export default function DownloadListTable(props: DownloadListTableProps) { // which can be determined by whether the batchFileResult has a failure code for the // corresponding download list item const referenceCall: Reference[] = filesToDownload - .filter(el => { + .filter((el) => { return ( batchFileResult.requestedFiles.find( - batchFile => batchFile.fileHandleId === el.fileHandleId, + (batchFile) => batchFile.fileHandleId === el.fileHandleId, )!.failureCode !== undefined ) }) - .map(el => { + .map((el) => { return { targetId: el.associateObjectId } }) // entity header is used to get the names of the files that the user @@ -219,92 +219,134 @@ export default function DownloadListTable(props: DownloadListTableProps) { - {filesToDownload.map(item => { - let createdBy = '' - let createdOn = '' - let fileName = '' - let contentSize = undefined - const synId = item.associateObjectId - const fileHandleId = item.fileHandleId - const isCurrentlyBeingDeletedClass = - fileBeingDeleted === fileHandleId ? 'SRC-inactive-bg' : '' - // See if batch file results has this fileHandleId - const fileResult = requestedFiles.find( - fileRes => fileRes.fileHandleId === fileHandleId, - ) - const fileHandle = fileResult ? fileResult.fileHandle : undefined - const canDownload = fileHandle !== undefined - if (fileHandle) { - // fileHandle is defined, this file is downloadable, show its metadata - ;({ createdBy, createdOn, fileName, contentSize } = fileHandle) - createdOn = moment(createdOn).format('L LT') - if ( - getDownloadTypeForFileHandle(fileHandle) === - FileHandleDownloadTypeEnum.Accessible - ) { - numBytes += contentSize - numFiles += 1 + {filesToDownload + .sort((itemA, itemB) => { + let fileNameA = '' + let fileNameB = '' + + { + const fileHandleId = itemA.fileHandleId + // See if batch file results has this fileHandleId + const fileResult = requestedFiles.find( + (fileRes) => fileRes.fileHandleId === fileHandleId, + ) + + const fileHandle = fileResult + ? fileResult.fileHandle + : undefined + if (fileHandle) { + // fileHandle is defined, this file is downloadable, show its metadata + fileNameA = fileHandle.fileName + } } - } else { - // file is not downloadable, only show its name from entity header info - const requestedFile = results.find( - req => req.id === item.associateObjectId, - )! - fileName = requestedFile.name - } - const userProfile = userProfiles.find( - el => el.ownerId === createdBy, - ) - return ( - - - - {fileName} - - - - - - - {userProfile && ( - - )} - {canDownload && !userProfile && } - - {createdOn} - {contentSize && calculateFriendlyFileSize(contentSize)} - - - - - ) - })} + + + {userProfile && ( + + )} + {canDownload && !userProfile && ( + + )} + + {createdOn} + + {contentSize && calculateFriendlyFileSize(contentSize)} + + + + + + ) + })} fetchData(token)} token={token}> From a700cb83cb69128303ddedd4f854004b9583e0d5 Mon Sep 17 00:00:00 2001 From: YongJoon Oh Date: Mon, 11 May 2020 02:35:06 -0700 Subject: [PATCH 2/6] Organized Code --- .../download_list/DownloadListTable.tsx | 254 ++++++++---------- 1 file changed, 116 insertions(+), 138 deletions(-) diff --git a/src/lib/containers/download_list/DownloadListTable.tsx b/src/lib/containers/download_list/DownloadListTable.tsx index 370df61814..f11dc60e7d 100644 --- a/src/lib/containers/download_list/DownloadListTable.tsx +++ b/src/lib/containers/download_list/DownloadListTable.tsx @@ -204,6 +204,30 @@ export default function DownloadListTable(props: DownloadListTableProps) { } } + const sortDownLoadList = ( + itemA: FileHandleAssociation, + itemB: FileHandleAssociation, + ) => { + let fileNameA = '' + let fileNameB = '' + + const fileHandleId = itemA ? itemA.fileHandleId : itemB.fileHandleId + + const fileResult = requestedFiles.find( + fileRes => fileRes.fileHandleId === fileHandleId, + ) + + const fileHandle = fileResult ? fileResult.fileHandle : undefined + + if (fileHandle && itemA) { + fileNameA = fileHandle.fileName + } else if (fileHandle && itemB) { + fileNameB = fileHandle.fileName + } + + return fileNameA.localeCompare(fileNameB) + } + const filesToDownload = downloadList?.filesToDownload ?? [] const results = references?.results ?? [] let numBytes = 0 @@ -237,148 +261,102 @@ export default function DownloadListTable(props: DownloadListTableProps) { - {filesToDownload - .sort((itemA, itemB) => { - let fileNameA = '' - let fileNameB = '' - - { - const fileHandleId = itemA.fileHandleId - // See if batch file results has this fileHandleId - const fileResult = requestedFiles.find( - fileRes => fileRes.fileHandleId === fileHandleId, - ) - - const fileHandle = fileResult - ? fileResult.fileHandle - : undefined - if (fileHandle) { - // fileHandle is defined, this file is downloadable, show its metadata - fileNameA = fileHandle.fileName - } - } - - { - const fileHandleId = itemB.fileHandleId - // See if batch file results has this fileHandleId - const fileResult = requestedFiles.find( - fileRes => fileRes.fileHandleId === fileHandleId, - ) - - const fileHandle = fileResult - ? fileResult.fileHandle - : undefined - if (fileHandle) { - // fileHandle is defined, this file is downloadable, show its metadata - fileNameB = fileHandle.fileName - } + {filesToDownload.sort(sortDownLoadList).map(item => { + let createdBy: string | undefined = '' + let createdOn: string | undefined = '' + let fileName: string | undefined = '' + let contentSize = undefined + const synId = item.associateObjectId + const fileHandleId = item.fileHandleId + const isCurrentlyBeingDeletedClass = + fileBeingDeleted === fileHandleId ? 'SRC-inactive-bg' : '' + // See if batch file results has this fileHandleId + const fileResult = requestedFiles.find( + fileRes => fileRes.fileHandleId === fileHandleId, + ) + const fileHandle = fileResult?.fileHandle + const canDownload = fileHandle !== undefined + if (fileHandle) { + // fileHandle is defined, this file is downloadable, show its metadata + ;({ createdBy, createdOn, fileName, contentSize } = fileHandle) + if ( + getDownloadTypeForFileHandle(fileHandle) === + FileHandleDownloadTypeEnum.Accessible + ) { + numBytes += contentSize + numFiles += 1 } - return fileNameA.localeCompare(fileNameB) - }) - .map(item => { - let createdBy: string | undefined = '' - let createdOn: string | undefined = '' - let fileName: string | undefined = '' - let contentSize = undefined - const synId = item.associateObjectId - const fileHandleId = item.fileHandleId - const isCurrentlyBeingDeletedClass = - fileBeingDeleted === fileHandleId ? 'SRC-inactive-bg' : '' - // See if batch file results has this fileHandleId - const fileResult = requestedFiles.find( - fileRes => fileRes.fileHandleId === fileHandleId, + } else { + // file is not downloadable, only show its name from entity header info + const requestedFile = results.find( + req => req.id === item.associateObjectId, ) - const fileHandle = fileResult?.fileHandle - const canDownload = fileHandle !== undefined - if (fileHandle) { - // fileHandle is defined, this file is downloadable, show its metadata - ;({ - createdBy, - createdOn, - fileName, - contentSize, - } = fileHandle) - if ( - getDownloadTypeForFileHandle(fileHandle) === - FileHandleDownloadTypeEnum.Accessible - ) { - numBytes += contentSize - numFiles += 1 - } - } else { - // file is not downloadable, only show its name from entity header info - const requestedFile = results.find( - req => req.id === item.associateObjectId, - ) - fileName = requestedFile?.name - createdBy = requestedFile?.createdBy - createdOn = requestedFile?.createdOn - } - createdOn = moment(createdOn).format('L LT') - const userProfile = userProfiles.find( - el => el.ownerId === createdBy, - ) - return ( - - - - {fileName} - - - - el.ownerId === createdBy, + ) + return ( + + + + {fileName} + + + + + + + {userProfile && ( + - - - {userProfile && ( - - )} - {canDownload && !userProfile && ( - - )} - - {createdOn} - - {contentSize && calculateFriendlyFileSize(contentSize)} - - - - - - ) - })} + )} + {canDownload && !userProfile && ( + + )} + + {createdOn} + + {contentSize && calculateFriendlyFileSize(contentSize)} + + + + + + ) + })} From d0dafdab5ca5edb23ef8785483dc2a46a6341f78 Mon Sep 17 00:00:00 2001 From: YongJoon Oh Date: Wed, 20 May 2020 08:33:19 -0400 Subject: [PATCH 3/6] Updated Based on PR comments --- .../download_list/DownloadListTable.tsx | 166 ++++++++++++++++-- src/lib/style/components/_download-list.scss | 3 + 2 files changed, 157 insertions(+), 12 deletions(-) diff --git a/src/lib/containers/download_list/DownloadListTable.tsx b/src/lib/containers/download_list/DownloadListTable.tsx index f11dc60e7d..1be27b582c 100644 --- a/src/lib/containers/download_list/DownloadListTable.tsx +++ b/src/lib/containers/download_list/DownloadListTable.tsx @@ -35,6 +35,12 @@ import AccessRequirementList, { AccessRequirementListProps, } from '../access_requirement_list/AccessRequirementList' +import { + faSort, + faSortAmountDown, + faSortAmountUp, +} from '@fortawesome/free-solid-svg-icons' + library.add(faTrash) type DownloadListTableData = { @@ -62,6 +68,13 @@ export default function DownloadListTable(props: DownloadListTableProps) { batchFileResult: undefined, downloadList: undefined, }) + const [columns, setColumns] = useState<{}>({ + file: false, + createdBy: false, + createdOn: false, + size: false, + }) + const [arPropsFromHasAccess, set_arPropsFromHasAccess] = useState< AccessRequirementListProps | undefined >() @@ -189,6 +202,7 @@ export default function DownloadListTable(props: DownloadListTableProps) { }, ] setIsLoading(true) + setFileBeingDeleted(fileHandleId) try { const downloadList = await deleteDownloadListFiles(list, token) @@ -204,28 +218,99 @@ export default function DownloadListTable(props: DownloadListTableProps) { } } + const sortColumn = async (column: string) => { + try { + setIsLoading(true) + + setColumns({ + file: column === 'file' ? !columns[column] : false, + createdBy: column === 'createdBy' ? !columns[column] : false, + createdOn: column === 'createdOn' ? !columns[column] : false, + size: column === 'size' ? !columns[column] : false, + }) + + const filesToDownload = downloadList?.filesToDownload ?? [] + + filesToDownload.sort((itemA, itemB) => { + return sortDownLoadList(itemA, itemB, column) + }) + setData({ + ...data, + downloadList, + }) + listUpdatedCallback?.() + } catch (err) { + console.error(err) + } finally { + setIsLoading(false) + } + } + const sortDownLoadList = ( itemA: FileHandleAssociation, itemB: FileHandleAssociation, + column: string, ) => { - let fileNameA = '' - let fileNameB = '' + let fileName_A: string | undefined = '' + let fileName_B: string | undefined = '' + + let createdBy_A: string | undefined = '' + let createdBy_B: string | undefined = '' + let createdOn_A: string | undefined = '' + let createdOn_B: string | undefined = '' + let contentSize_A: number | undefined = undefined + let contentSize_B: number | undefined = undefined const fileHandleId = itemA ? itemA.fileHandleId : itemB.fileHandleId const fileResult = requestedFiles.find( fileRes => fileRes.fileHandleId === fileHandleId, ) - const fileHandle = fileResult ? fileResult.fileHandle : undefined + // fileHandle is defined, this file is downloadable, show its metadata if (fileHandle && itemA) { - fileNameA = fileHandle.fileName + fileName_A = fileHandle.fileName + createdBy_A = fileHandle.createdBy + createdOn_A = fileHandle.createdOn + contentSize_A = fileHandle.contentSize } else if (fileHandle && itemB) { - fileNameB = fileHandle.fileName + fileName_B = fileHandle.fileName + createdBy_B = fileHandle.createdBy + createdOn_B = fileHandle.createdOn + contentSize_B = fileHandle.contentSize + } else { + // file is not downloadable, only show its name from entity header info + const requestId = itemA + ? itemA.associateObjectId + : itemB.associateObjectId + const requestedFile = results.find(req => req.id === requestId) + + if (itemA) { + fileName_A = requestedFile?.name + createdBy_A = requestedFile?.createdBy + createdOn_A = requestedFile?.createdOn + } else if (itemB) { + fileName_B = requestedFile?.name + createdBy_B = requestedFile?.createdBy + createdOn_B = requestedFile?.createdOn + } } - return fileNameA.localeCompare(fileNameB) + switch (column) { + case 'file': + return fileName_B?.localeCompare(fileName_A!)! + case 'access': + return 1 + case 'createdBy': + return createdBy_B?.localeCompare(createdBy_A!)! + case 'createdOn': + return createdOn_B?.localeCompare(createdOn_A!)! + case 'size': + return contentSize_B! - contentSize_A! + default: + return 1 + } } const filesToDownload = downloadList?.filesToDownload ?? [] @@ -251,17 +336,74 @@ export default function DownloadListTable(props: DownloadListTableProps) { - File Name - Access - Created By - Created On - Size + + File + + + + Access + + + + Created By + + + + Created On + + + + Size + + {/* th below is made for trash can icon but holds no content */} - {filesToDownload.sort(sortDownLoadList).map(item => { + {filesToDownload.map(item => { let createdBy: string | undefined = '' let createdOn: string | undefined = '' let fileName: string | undefined = '' diff --git a/src/lib/style/components/_download-list.scss b/src/lib/style/components/_download-list.scss index 04fc28f33e..8edf266331 100644 --- a/src/lib/style/components/_download-list.scss +++ b/src/lib/style/components/_download-list.scss @@ -40,6 +40,9 @@ } } } +.sort { + padding-left: 5px; +} .create-package-container { display: flex; padding: 8px; From 9cca3a98f6e39c117fd4b00f46117ce9fb3f57e9 Mon Sep 17 00:00:00 2001 From: YongJoon Oh Date: Mon, 1 Jun 2020 12:39:23 -0700 Subject: [PATCH 4/6] Updated based on PR --- .../download_list/DownloadListTable.tsx | 148 ++++++++++-------- 1 file changed, 86 insertions(+), 62 deletions(-) diff --git a/src/lib/containers/download_list/DownloadListTable.tsx b/src/lib/containers/download_list/DownloadListTable.tsx index 1be27b582c..9bc99556b1 100644 --- a/src/lib/containers/download_list/DownloadListTable.tsx +++ b/src/lib/containers/download_list/DownloadListTable.tsx @@ -68,11 +68,15 @@ export default function DownloadListTable(props: DownloadListTableProps) { batchFileResult: undefined, downloadList: undefined, }) - const [columns, setColumns] = useState<{}>({ - file: false, - createdBy: false, - createdOn: false, - size: false, + + type SortedColumn = { + column: string + isDescending: boolean + } + + const [sortedColumn, setSortedColumn] = useState({ + column: '', + isDescending: false, }) const [arPropsFromHasAccess, set_arPropsFromHasAccess] = useState< @@ -222,17 +226,18 @@ export default function DownloadListTable(props: DownloadListTableProps) { try { setIsLoading(true) - setColumns({ - file: column === 'file' ? !columns[column] : false, - createdBy: column === 'createdBy' ? !columns[column] : false, - createdOn: column === 'createdOn' ? !columns[column] : false, - size: column === 'size' ? !columns[column] : false, + const isDescending = + column === sortedColumn.column ? !sortedColumn.isDescending : true + + setSortedColumn({ + column, + isDescending, }) const filesToDownload = downloadList?.filesToDownload ?? [] filesToDownload.sort((itemA, itemB) => { - return sortDownLoadList(itemA, itemB, column) + return sortDownLoadList(itemA, itemB, column, isDescending) }) setData({ ...data, @@ -245,69 +250,68 @@ export default function DownloadListTable(props: DownloadListTableProps) { setIsLoading(false) } } + const getFileHandleInfo = (item: FileHandleAssociation) => { + const fileResult = requestedFiles.find( + fileRes => fileRes.fileHandleId === item.fileHandleId, + ) + const fileHandle = fileResult ? fileResult.fileHandle : undefined + + let fileName: string | undefined = '' + let createdBy: string | undefined = '' + let createdOn: string | undefined = '' + let contentSize: number | undefined = undefined + + if (fileHandle && item) { + fileName = fileHandle.fileName + createdBy = fileHandle.createdBy + createdOn = fileHandle.createdOn + contentSize = fileHandle.contentSize + } else { + const requestedFile = results.find( + req => req.id === item.associateObjectId, + ) + if (requestedFiles) { + fileName = requestedFile?.name + createdBy = requestedFile?.createdBy + createdOn = requestedFile?.createdOn + } + } + return { fileName, createdBy, createdOn, contentSize } + } const sortDownLoadList = ( itemA: FileHandleAssociation, itemB: FileHandleAssociation, column: string, + isDescending: boolean, ) => { - let fileName_A: string | undefined = '' - let fileName_B: string | undefined = '' + const { + fileName: fileName_A, + createdBy: createdBy_A, + createdOn: createdOn_A, + contentSize: contentSize_A, + } = getFileHandleInfo(itemA) - let createdBy_A: string | undefined = '' - let createdBy_B: string | undefined = '' - let createdOn_A: string | undefined = '' - let createdOn_B: string | undefined = '' - let contentSize_A: number | undefined = undefined - let contentSize_B: number | undefined = undefined + const { + fileName: fileName_B, + createdBy: createdBy_B, + createdOn: createdOn_B, + contentSize: contentSize_B, + } = getFileHandleInfo(itemB) - const fileHandleId = itemA ? itemA.fileHandleId : itemB.fileHandleId - - const fileResult = requestedFiles.find( - fileRes => fileRes.fileHandleId === fileHandleId, - ) - const fileHandle = fileResult ? fileResult.fileHandle : undefined - - // fileHandle is defined, this file is downloadable, show its metadata - if (fileHandle && itemA) { - fileName_A = fileHandle.fileName - createdBy_A = fileHandle.createdBy - createdOn_A = fileHandle.createdOn - contentSize_A = fileHandle.contentSize - } else if (fileHandle && itemB) { - fileName_B = fileHandle.fileName - createdBy_B = fileHandle.createdBy - createdOn_B = fileHandle.createdOn - contentSize_B = fileHandle.contentSize - } else { - // file is not downloadable, only show its name from entity header info - const requestId = itemA - ? itemA.associateObjectId - : itemB.associateObjectId - const requestedFile = results.find(req => req.id === requestId) - - if (itemA) { - fileName_A = requestedFile?.name - createdBy_A = requestedFile?.createdBy - createdOn_A = requestedFile?.createdOn - } else if (itemB) { - fileName_B = requestedFile?.name - createdBy_B = requestedFile?.createdBy - createdOn_B = requestedFile?.createdOn - } - } + const direction = isDescending ? 1 : -1 switch (column) { case 'file': - return fileName_B?.localeCompare(fileName_A!)! + return fileName_B?.localeCompare(fileName_A!)! * direction case 'access': return 1 case 'createdBy': - return createdBy_B?.localeCompare(createdBy_A!)! + return createdBy_B?.localeCompare(createdBy_A!)! * direction case 'createdOn': - return createdOn_B?.localeCompare(createdOn_A!)! + return createdOn_B?.localeCompare(createdOn_A!)! * direction case 'size': - return contentSize_B! - contentSize_A! + return (contentSize_B! - contentSize_A!) * direction default: return 1 } @@ -345,7 +349,13 @@ export default function DownloadListTable(props: DownloadListTableProps) { }} > @@ -365,7 +375,11 @@ export default function DownloadListTable(props: DownloadListTableProps) { > @@ -380,7 +394,11 @@ export default function DownloadListTable(props: DownloadListTableProps) { > @@ -394,7 +412,13 @@ export default function DownloadListTable(props: DownloadListTableProps) { }} > From 701fb6d16798c6b9baa80709847e48b390fa834e Mon Sep 17 00:00:00 2001 From: YongJoon Oh Date: Mon, 8 Jun 2020 08:35:12 -0700 Subject: [PATCH 5/6] Updated DownLoadList based on code review --- .../download_list/DownloadListTable.tsx | 44 +++++++++++++------ 1 file changed, 30 insertions(+), 14 deletions(-) diff --git a/src/lib/containers/download_list/DownloadListTable.tsx b/src/lib/containers/download_list/DownloadListTable.tsx index 9bc99556b1..f305ef6539 100644 --- a/src/lib/containers/download_list/DownloadListTable.tsx +++ b/src/lib/containers/download_list/DownloadListTable.tsx @@ -36,7 +36,6 @@ import AccessRequirementList, { } from '../access_requirement_list/AccessRequirementList' import { - faSort, faSortAmountDown, faSortAmountUp, } from '@fortawesome/free-solid-svg-icons' @@ -276,6 +275,8 @@ export default function DownloadListTable(props: DownloadListTableProps) { createdOn = requestedFile?.createdOn } } + createdBy = userProfiles.find(el => el.ownerId === createdBy)?.userName + return { fileName, createdBy, createdOn, contentSize } } @@ -304,14 +305,18 @@ export default function DownloadListTable(props: DownloadListTableProps) { switch (column) { case 'file': return fileName_B?.localeCompare(fileName_A!)! * direction - case 'access': - return 1 case 'createdBy': return createdBy_B?.localeCompare(createdBy_A!)! * direction case 'createdOn': return createdOn_B?.localeCompare(createdOn_A!)! * direction case 'size': - return (contentSize_B! - contentSize_A!) * direction + if (contentSize_A && !contentSize_B) { + return -1 + } else if (contentSize_B && !contentSize_A) { + return 1 + } else { + return (contentSize_B! - contentSize_A!) * direction + } default: return 1 } @@ -343,7 +348,11 @@ export default function DownloadListTable(props: DownloadListTableProps) { File - - Access - - + Access Created By @@ -389,6 +390,7 @@ export default function DownloadListTable(props: DownloadListTableProps) { : faSortAmountUp : faSortAmountDown } + color={sortedColumn.column === 'createdBy' ? 'white' : ''} /> @@ -412,6 +414,7 @@ export default function DownloadListTable(props: DownloadListTableProps) { : faSortAmountUp : faSortAmountDown } + color={sortedColumn.column === 'createdOn' ? 'white' : ''} /> @@ -435,6 +438,7 @@ export default function DownloadListTable(props: DownloadListTableProps) { : faSortAmountUp : faSortAmountDown } + color={sortedColumn.column === 'size' ? 'white' : ''} />