-
-
Notifications
You must be signed in to change notification settings - Fork 206
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Adding more informations on My Shares page (table and modal) (#174
) * Adding an information button to the shares and corrected MyShare interface * Adding other informations and disk usage * Adding description, disk usage * Add case if the expiration is never * Adding file size and better UI * UI changes to Information Modal * Adding description to the My Shares page * Ran format * Remove string type Co-authored-by: Elias Schneider <[email protected]> * Remove string type check Co-authored-by: Elias Schneider <[email protected]> * Remove string type conversion Co-authored-by: Elias Schneider <[email protected]> * Variable name changes Co-authored-by: Elias Schneider <[email protected]> * Remove color Co-authored-by: Elias Schneider <[email protected]> * Requested changes made * Ran format * Adding MediaQuery --------- Co-authored-by: Elias Schneider <[email protected]>
- Loading branch information
1 parent
348852c
commit 1466240
Showing
5 changed files
with
134 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
85 changes: 85 additions & 0 deletions
85
frontend/src/components/account/showShareInformationsModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
import { Text, Divider, Progress, Stack, Group, Flex } from "@mantine/core"; | ||
import { ModalsContextProps } from "@mantine/modals/lib/context"; | ||
import { MyShare } from "../../types/share.type"; | ||
import moment from "moment"; | ||
import { byteToHumanSizeString } from "../../utils/fileSize.util"; | ||
import CopyTextField from "../upload/CopyTextField"; | ||
import { FileMetaData } from "../../types/File.type"; | ||
|
||
const showShareInformationsModal = ( | ||
modals: ModalsContextProps, | ||
share: MyShare, | ||
appUrl: string, | ||
maxShareSize: number | ||
) => { | ||
const link = `${appUrl}/share/${share.id}`; | ||
|
||
let shareSize: number = 0; | ||
for (let file of share.files as FileMetaData[]) | ||
shareSize += parseInt(file.size); | ||
|
||
const formattedShareSize = byteToHumanSizeString(shareSize); | ||
const formattedMaxShareSize = byteToHumanSizeString(maxShareSize); | ||
const shareSizeProgress = (shareSize / maxShareSize) * 100; | ||
|
||
const formattedCreatedAt = moment(share.createdAt).format("LLL"); | ||
const formattedExpiration = | ||
moment(share.expiration).unix() === 0 | ||
? "Never" | ||
: moment(share.expiration).format("LLL"); | ||
|
||
return modals.openModal({ | ||
title: "Share informations", | ||
|
||
children: ( | ||
<Stack align="stretch" spacing="md"> | ||
<Text size="sm" color="lightgray"> | ||
<b>ID:</b> {share.id} | ||
</Text> | ||
|
||
<Text size="sm" color="lightgray"> | ||
<b>Description:</b> {share.description || "No description"} | ||
</Text> | ||
|
||
<Text size="sm" color="lightgray"> | ||
<b>Created at:</b> {formattedCreatedAt} | ||
</Text> | ||
|
||
<Text size="sm" color="lightgray"> | ||
<b>Expires at:</b> {formattedExpiration} | ||
</Text> | ||
|
||
<Divider /> | ||
|
||
<CopyTextField link={link} /> | ||
|
||
<Divider /> | ||
|
||
<Text size="sm" color="lightgray"> | ||
<b>Size:</b> {formattedShareSize} / {formattedMaxShareSize} ( | ||
{shareSizeProgress.toFixed(1)}%) | ||
</Text> | ||
|
||
<Flex align="center" justify="center"> | ||
{shareSize / maxShareSize < 0.1 && ( | ||
<Text size="xs" color="lightgray" style={{ marginRight: "4px" }}> | ||
{formattedShareSize} | ||
</Text> | ||
)} | ||
<Progress | ||
value={shareSizeProgress} | ||
label={shareSize / maxShareSize >= 0.1 ? formattedShareSize : ""} | ||
style={{ width: shareSize / maxShareSize < 0.1 ? "70%" : "80%" }} | ||
size="xl" | ||
radius="xl" | ||
/> | ||
<Text size="xs" color="lightgray" style={{ marginLeft: "4px" }}> | ||
{formattedMaxShareSize} | ||
</Text> | ||
</Flex> | ||
</Stack> | ||
), | ||
}); | ||
}; | ||
|
||
export default showShareInformationsModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters