iio/pingvin-share
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Adding more informations on My Shares page (table and modal) (#174)

Browse Source 
* 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 <login@eliasschneider.com>

* Remove string type check

Co-authored-by: Elias Schneider <login@eliasschneider.com>

* Remove string type conversion

Co-authored-by: Elias Schneider <login@eliasschneider.com>

* Variable name changes

Co-authored-by: Elias Schneider <login@eliasschneider.com>

* Remove color

Co-authored-by: Elias Schneider <login@eliasschneider.com>

* Requested changes made

* Ran format

* Adding MediaQuery

---------

Co-authored-by: Elias Schneider <login@eliasschneider.com>
This commit is contained in:
pierrbt
2023-06-26 08:22:15 +02:00
committed by GitHub
parent 348852cfa4
commit 1466240461
5 changed files with 134 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/pages/account/shares.tsx
View File

@@ -4,6 +4,7 @@ import {
Button,
Center,
Group,
MediaQuery,
Space,
Stack,
Table,
@@ -15,7 +16,7 @@ import { useModals } from "@mantine/modals";
import moment from "moment";
import Link from "next/link";
import { useEffect, useState } from "react";
import { TbLink, TbTrash } from "react-icons/tb";
import { TbLink, TbTrash, TbInfoCircle } from "react-icons/tb";
import showShareLinkModal from "../../components/account/showShareLinkModal";
import CenterLoader from "../../components/core/CenterLoader";
import Meta from "../../components/Meta";
@@ -23,6 +24,7 @@ import useConfig from "../../hooks/config.hook";
import shareService from "../../services/share.service";
import { MyShare } from "../../types/share.type";
import toast from "../../utils/toast.util";
import showShareInformationsModal from "../../components/account/showShareInformationsModal";
const MyShares = () => {
const modals = useModals();
@@ -60,6 +62,10 @@ const MyShares = () => {
<thead>
<tr>
<th>Name</th>
<MediaQuery smallerThan="md" styles={{ display: "none" }}>
<th>Description</th>
</MediaQuery>
<th>Visitors</th>
<th>Expires at</th>
<th></th>
@@ -69,6 +75,18 @@ const MyShares = () => {
{shares.map((share) => (
<tr key={share.id}>
<td>{share.id}</td>
<MediaQuery smallerThan="sm" styles={{ display: "none" }}>
<td
style={{
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
maxWidth: "300px",
}}
>
{share.description || ""}
</td>
</MediaQuery>
<td>{share.views}</td>
<td>
{moment(share.expiration).unix() === 0
@@ -77,6 +95,21 @@ const MyShares = () => {
</td>
<td>
<Group position="right">
<ActionIcon
color="blue"
variant="light"
size={25}
onClick={() => {
showShareInformationsModal(
modals,
share,
config.get("general.appUrl"),
parseInt(config.get("share.maxSize"))
);
}}
>
<TbInfoCircle />
</ActionIcon>
<ActionIcon
color="victoria"
variant="light"