Skip to content

Commit f4c6734

Browse files
andrewhong04andrewhong04
committed
feat!: bring back cards
1 parent 92b3c23 commit f4c6734

File tree

5 files changed

+206
-360
lines changed

5 files changed

+206
-360
lines changed

‎backend/shrunk/static/data/release_notes.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,22 @@
11
[
2+
{
3+
"major": 3,
4+
"minor": 0,
5+
"patch": 3,
6+
"projectDirector": "ah1371",
7+
"date": "TODO",
8+
"description": "Adding back the card-based dashboard.",
9+
"categories": {
10+
"features": [
11+
{
12+
"text": "Add back the card-based design for the dashboard",
13+
"contributors": ["ah1371"]
14+
}
15+
],
16+
"improvements": [],
17+
"fixes": []
18+
}
19+
},
220
{
321
"major": 3,
422
"minor": 0,

‎frontend/src/components/LinkCard.tsx

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
import {
2+
Button,
3+
Card,
4+
Col,
5+
Descriptions,
6+
Typography,
7+
Row,
8+
Space,
9+
Tooltip,
10+
} from 'antd/lib';
11+
import React from 'react';
12+
import {
13+
CopyOutlined,
14+
DeleteOutlined,
15+
EditOutlined,
16+
EyeOutlined,
17+
QrcodeOutlined,
18+
TeamOutlined,
19+
} from '@ant-design/icons';
20+
import dayjs from 'dayjs';
21+
import { LinkInfo } from './LinkInfo';
22+
23+
export default function LinkCard({ linkInfo }: { linkInfo: LinkInfo }) {
24+
const onCopyOriginalLink = () => {
25+
navigator.clipboard.writeText(linkInfo.long_url);
26+
};
27+
28+
return (
29+
<Card
30+
title={linkInfo.title}
31+
extra={
32+
<Space>
33+
<Tooltip title="View link details">
34+
<Button
35+
icon={<EyeOutlined />}
36+
type="text"
37+
href={`/app/links/${linkInfo.id}`}
38+
target="_blank"
39+
/>
40+
</Tooltip>
41+
<Tooltip title="Edit link">
42+
<Button
43+
icon={<EditOutlined />}
44+
type="text"
45+
href={`/app/links/${linkInfo.id}?mode=edit`}
46+
target="_blank"
47+
/>
48+
</Tooltip>
49+
<Tooltip title="Share link permissions">
50+
<Button
51+
icon={<TeamOutlined />}
52+
type="text"
53+
href={`/app/links/${linkInfo.id}?mode=collaborate`}
54+
target="_blank"
55+
/>
56+
</Tooltip>
57+
<Tooltip title="Access qr code">
58+
<Button
59+
icon={<QrcodeOutlined />}
60+
type="text"
61+
href={`/app/links/${linkInfo.id}?mode=qrcode`}
62+
target="_blank"
63+
/>
64+
</Tooltip>
65+
<Tooltip title="Delete link">
66+
<Button
67+
icon={<DeleteOutlined />}
68+
type="text"
69+
danger
70+
disabled={linkInfo.deletion_info !== null}
71+
href={`/app/links/${linkInfo.id}?mode=edit`}
72+
target="_blank"
73+
/>
74+
</Tooltip>
75+
</Space>
76+
}
77+
>
78+
<Card.Grid style={{ width: '100%' }} hoverable={false}>
79+
<Descriptions
80+
column={5}
81+
colon={false}
82+
items={[
83+
{
84+
key: 'created_by',
85+
label: 'Owner',
86+
children: linkInfo.owner,
87+
},
88+
{
89+
key: 'unique_visits',
90+
label: 'Unique Visits',
91+
children: linkInfo.unique_visits,
92+
},
93+
{
94+
key: 'total_visits',
95+
label: 'Total Visits',
96+
children: linkInfo.visits,
97+
},
98+
{
99+
key: 'date_created',
100+
label: 'Date Created',
101+
children: dayjs(linkInfo.created_time).format(
102+
'MMM D, YYYY - h:mm A',
103+
),
104+
},
105+
{
106+
key: 'date_expires',
107+
label: 'Date Expires',
108+
children:
109+
linkInfo.expiration_time === null
110+
? 'N/A'
111+
: dayjs(linkInfo.expiration_time).format(
112+
'MMM D, YYYY - h:mm A',
113+
),
114+
},
115+
]}
116+
/>
117+
</Card.Grid>
118+
<Card.Grid style={{ width: '100%' }} hoverable={false}>
119+
<Row gutter={16} justify="space-between" align="middle">
120+
<Col>
121+
<Row gutter={[16, 16]}>
122+
{linkInfo.aliases.map((alias) => (
123+
<Col span={24}>
124+
<Tooltip title="Copy to clipboard">
125+
<Button
126+
icon={<CopyOutlined />}
127+
type="dashed"
128+
onClick={() => {
129+
navigator.clipboard.writeText(
130+
`${document.location.host}/${alias.alias}`,
131+
);
132+
}}
133+
>
134+
{document.location.host}/{alias.alias}
135+
</Button>
136+
</Tooltip>
137+
</Col>
138+
))}
139+
</Row>
140+
</Col>
141+
<Col>
142+
<Tooltip title="Copy to clipboard">
143+
<Button
144+
className="tw-max-w-96"
145+
icon={<CopyOutlined />}
146+
type="dashed"
147+
onClick={onCopyOriginalLink}
148+
>
149+
<Typography.Text ellipsis>{linkInfo.long_url}</Typography.Text>
150+
</Button>
151+
</Tooltip>
152+
</Col>
153+
</Row>
154+
</Card.Grid>
155+
</Card>
156+
);
157+
}

‎frontend/src/components/LinkInfo.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@ export interface SharingInfo {
5454
* @interface
5555
*/
5656
export interface LinkInfo {
57-
_id: string;
57+
id?: string; // TODO: Make this consistently return _id
58+
_id?: string; // TODO: Make this consistently return _id
5859
title: string;
5960
long_url: string;
6061
domain: string;

‎frontend/src/drawers/CreateLinkDrawer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -314,7 +314,7 @@ export class CreateLinkDrawer extends React.Component<Props, State> {
314314
name="title"
315315
rules={[{ required: true, message: 'Please input a title.' }]}
316316
>
317-
<Input />
317+
<Input placeholder="Event Marketing Video" />
318318
</Form.Item>
319319

320320
{!this.state.tracking_pixel_enabled && (
@@ -327,7 +327,7 @@ export class CreateLinkDrawer extends React.Component<Props, State> {
327327
{ validator: serverValidateLongUrl },
328328
]}
329329
>
330-
<Input />
330+
<Input placeholder="https://rutgers.edu/..." />
331331
</Form.Item>
332332
)}
333333
</Col>

0 commit comments

Comments
 (0)