Skip to content

Commit dcb0f85

Browse files
cannarockscannarocks
authored
Merge pull request #243 from AppQuality/campaign-reports-loading
feat(campaign-reports): add loader + page improvements
2 parents cc1a98e + c8849c0 commit dcb0f85

File tree

4 files changed

+303
-175
lines changed

4 files changed

+303
-175
lines changed

‎src/pages/Campaign/ReportRow.tsx‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
import {
2+
Col,
3+
Row,
4+
SpecialCard,
5+
Button,
6+
theme,
7+
XL,
8+
Paragraph,
9+
} from '@appquality/unguess-design-system';
10+
import { ReactComponent as ArchiveIcon } from 'src/assets/icons/file-icon-archive.svg';
11+
import { ReactComponent as BoardIcon } from 'src/assets/icons/file-icon-board.svg';
12+
import { ReactComponent as DocumentIcon } from 'src/assets/icons/file-icon-document.svg';
13+
import { ReactComponent as DriveIcon } from 'src/assets/icons/file-icon-drive.svg';
14+
import { ReactComponent as ExcelIcon } from 'src/assets/icons/file-icon-excel.svg';
15+
import { ReactComponent as LinkIcon } from 'src/assets/icons/file-icon-link.svg';
16+
import { ReactComponent as PdfIcon } from 'src/assets/icons/file-icon-pdf.svg';
17+
import { ReactComponent as PresentationIcon } from 'src/assets/icons/file-icon-presentation.svg';
18+
import { ReactComponent as DownloadIcon } from 'src/assets/icons/download-stroke.svg';
19+
import { ReactComponent as OpenLinkIcon } from 'src/assets/icons/new-window-stroke.svg';
20+
import { ReactComponent as EmptyReportsImage } from 'src/assets/emptyReports.svg';
21+
import { Report } from 'src/features/api';
22+
import { format } from 'date-fns';
23+
import { t } from 'i18next';
24+
import styled from 'styled-components';
25+
26+
const CenteredContent = styled.div`
27+
display: flex;
28+
justify-content: center;
29+
align-items: center;
30+
flex-direction: column;
31+
height: 100%;
32+
width: 100%;
33+
`;
34+
35+
const getFileTypeName = (type: string, url: string) => {
36+
const urlHostname = new URL(url).hostname;
37+
38+
switch (type) {
39+
case 'spreadsheet':
40+
return t('__CAMPAIGN_PAGE_REPORTS_FILE_TYPE_EXCEL');
41+
case 'pdf':
42+
return t('__CAMPAIGN_PAGE_REPORTS_FILE_TYPE_PDF');
43+
case 'text':
44+
case 'document':
45+
return t('__CAMPAIGN_PAGE_REPORTS_FILE_TYPE_DOCUMENT');
46+
case 'presentation':
47+
return t('__CAMPAIGN_PAGE_REPORTS_FILE_TYPE_PRESENTATION');
48+
case 'archive':
49+
return t('__CAMPAIGN_PAGE_REPORTS_FILE_TYPE_ARCHIVE');
50+
case 'link':
51+
// Check url to see if is a recognized domain
52+
if (urlHostname.includes('miro.com'))
53+
return t('__CAMPAIGN_PAGE_REPORTS_FILE_TYPE_BOARD');
54+
if (urlHostname.includes('drive.google.com'))
55+
return t('__CAMPAIGN_PAGE_REPORTS_FILE_TYPE_DRIVE');
56+
return t('__CAMPAIGN_PAGE_REPORTS_FILE_TYPE_LINK');
57+
default:
58+
return t('__CAMPAIGN_PAGE_REPORTS_FILE_TYPE_LINK');
59+
}
60+
};
61+
62+
const getFileTypeIcon = (type: string, url: string) => {
63+
const urlHostname = new URL(url).hostname;
64+
65+
switch (type) {
66+
case 'spreadsheet':
67+
return <ExcelIcon />;
68+
case 'pdf':
69+
return <PdfIcon />;
70+
case 'text':
71+
case 'document':
72+
return <DocumentIcon />;
73+
case 'presentation':
74+
return <PresentationIcon />;
75+
case 'archive':
76+
return <ArchiveIcon />;
77+
case 'link':
78+
// Check url to see if is a recognized domain
79+
if (urlHostname.includes('miro.com')) return <BoardIcon />;
80+
if (urlHostname.includes('drive.google.com')) return <DriveIcon />;
81+
return <LinkIcon />;
82+
default:
83+
return <LinkIcon />;
84+
}
85+
};
86+
87+
export const ReportRow = ({ reports }: { reports?: Report[] }) => (
88+
<Row>
89+
{reports && reports.length ? (
90+
reports.map((report) => (
91+
<Col xs={12} md={4} lg={3}>
92+
<SpecialCard>
93+
<SpecialCard.Meta
94+
justifyContent="start"
95+
style={{ fontSize: theme.fontSizes.sm }}
96+
>
97+
{report.update_date ? (
98+
<>
99+
{t('__CAMPAIGN_PAGE_REPORTS_CARDS_UPDATED_ON_LABEL')}{' '}
100+
{format(new Date(report.update_date), 'dd/MM/yyyy')}
101+
</>
102+
) : (
103+
<>
104+
{t('__CAMPAIGN_PAGE_REPORTS_CARDS_UPLOADED_ON_LABEL')}{' '}
105+
{format(new Date(report.creation_date ?? ''), 'dd/MM/yyyy')}
106+
</>
107+
)}
108+
</SpecialCard.Meta>
109+
110+
<SpecialCard.Thumb>
111+
{getFileTypeIcon(report.file_type?.type ?? '', report.url)}
112+
</SpecialCard.Thumb>
113+
114+
<SpecialCard.Header>
115+
<SpecialCard.Header.Label>
116+
{getFileTypeName(report.file_type?.type ?? '', report.url)}
117+
</SpecialCard.Header.Label>
118+
<SpecialCard.Header.Title>
119+
{report.title}
120+
</SpecialCard.Header.Title>
121+
</SpecialCard.Header>
122+
123+
<SpecialCard.Footer direction="column" justifyContent="center">
124+
<Button
125+
isPill
126+
isStretched
127+
onClick={() => {
128+
// eslint-disable-next-line security/detect-non-literal-fs-filename
129+
window.open(report.url || '', '_blank');
130+
}}
131+
>
132+
<Button.StartIcon>
133+
{report.file_type?.type === 'link' ? (
134+
<OpenLinkIcon />
135+
) : (
136+
<DownloadIcon />
137+
)}
138+
</Button.StartIcon>
139+
{report.file_type?.type === 'link'
140+
? t('__CAMPAIGN_PAGE_REPORTS_CARDS_OPEN_LINK_LABEL')
141+
: t('__CAMPAIGN_PAGE_REPORTS_CARDS_DOWNLOAD_LABEL')}
142+
</Button>
143+
</SpecialCard.Footer>
144+
</SpecialCard>
145+
</Col>
146+
))
147+
) : (
148+
<CenteredContent>
149+
<EmptyReportsImage />
150+
<XL
151+
style={{
152+
fontWeight: theme.fontWeights.medium,
153+
marginBottom: theme.space.sm,
154+
}}
155+
>
156+
{t('__CAMPAIGN_PAGE_REPORTS_EMPTY_REPORTS_TITLE')}
157+
</XL>
158+
<Paragraph style={{ textAlign: 'center' }}>
159+
{t('__CAMPAIGN_PAGE_REPORTS_EMPTY_REPORTS_TEXT')}
160+
</Paragraph>
161+
</CenteredContent>
162+
)}
163+
</Row>
164+
);

‎src/pages/Campaign/ReportRowLoading.tsx‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import {
2+
Col,
3+
Row,
4+
Skeleton,
5+
SpecialCard,
6+
theme,
7+
} from '@appquality/unguess-design-system';
8+
9+
export const ReportRowLoading = () => (
10+
<Row>
11+
<Col xs={12} md={6} lg={3}>
12+
<SpecialCard>
13+
<SpecialCard.Meta
14+
justifyContent="start"
15+
style={{ fontSize: theme.fontSizes.sm }}
16+
>
17+
<Skeleton width="50%" height="12px" />
18+
</SpecialCard.Meta>
19+
20+
<SpecialCard.Thumb>
21+
<Skeleton width="60px" height="60px" />
22+
</SpecialCard.Thumb>
23+
24+
<SpecialCard.Header>
25+
<SpecialCard.Header.Title style={{ width: '100%' }}>
26+
<Skeleton width="75%" height="20px" />
27+
</SpecialCard.Header.Title>
28+
</SpecialCard.Header>
29+
30+
<SpecialCard.Footer direction="column" justifyContent="center">
31+
<Skeleton width="100%" height="30px" />
32+
</SpecialCard.Footer>
33+
</SpecialCard>
34+
</Col>
35+
<Col xs={12} md={6} lg={3}>
36+
<SpecialCard>
37+
<SpecialCard.Meta
38+
justifyContent="start"
39+
style={{ fontSize: theme.fontSizes.sm }}
40+
>
41+
<Skeleton width="50%" height="12px" />
42+
</SpecialCard.Meta>
43+
44+
<SpecialCard.Thumb>
45+
<Skeleton width="60px" height="60px" />
46+
</SpecialCard.Thumb>
47+
48+
<SpecialCard.Header>
49+
<SpecialCard.Header.Title style={{ width: '100%' }}>
50+
<Skeleton width="75%" height="20px" />
51+
</SpecialCard.Header.Title>
52+
</SpecialCard.Header>
53+
54+
<SpecialCard.Footer direction="column" justifyContent="center">
55+
<Skeleton width="100%" height="30px" />
56+
</SpecialCard.Footer>
57+
</SpecialCard>
58+
</Col>
59+
<Col xs={12} md={6} lg={3}>
60+
<SpecialCard>
61+
<SpecialCard.Meta
62+
justifyContent="start"
63+
style={{ fontSize: theme.fontSizes.sm }}
64+
>
65+
<Skeleton width="50%" height="12px" />
66+
</SpecialCard.Meta>
67+
68+
<SpecialCard.Thumb>
69+
<Skeleton width="60px" height="60px" />
70+
</SpecialCard.Thumb>
71+
72+
<SpecialCard.Header>
73+
<SpecialCard.Header.Title style={{ width: '100%' }}>
74+
<Skeleton width="75%" height="20px" />
75+
</SpecialCard.Header.Title>
76+
</SpecialCard.Header>
77+
78+
<SpecialCard.Footer direction="column" justifyContent="center">
79+
<Skeleton width="100%" height="30px" />
80+
</SpecialCard.Footer>
81+
</SpecialCard>
82+
</Col>
83+
<Col xs={12} md={6} lg={3}>
84+
<SpecialCard>
85+
<SpecialCard.Meta
86+
justifyContent="start"
87+
style={{ fontSize: theme.fontSizes.sm }}
88+
>
89+
<Skeleton width="50%" height="12px" />
90+
</SpecialCard.Meta>
91+
92+
<SpecialCard.Thumb>
93+
<Skeleton width="60px" height="60px" />
94+
</SpecialCard.Thumb>
95+
96+
<SpecialCard.Header>
97+
<SpecialCard.Header.Title style={{ width: '100%' }}>
98+
<Skeleton width="75%" height="20px" />
99+
</SpecialCard.Header.Title>
100+
</SpecialCard.Header>
101+
102+
<SpecialCard.Footer direction="column" justifyContent="center">
103+
<Skeleton width="100%" height="30px" />
104+
</SpecialCard.Footer>
105+
</SpecialCard>
106+
</Col>
107+
</Row>
108+
);

0 commit comments

Comments
 (0)