Skip to content

Commit cc99deb

Browse files
adamrefaeyadamrefaey
authored
Merge pull request #122 from ModusCreateOrg/ADE-200
ADE-200 Updates to the UI
2 parents 17d85a6 + 1e1771c commit cc99deb

File tree

10 files changed

+174
-17
lines changed

10 files changed

+174
-17
lines changed

‎frontend/src/common/utils/i18n/resources/en/report.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,10 @@
4949
"filterBookmarked": "Bookmarked",
5050
"noBookmarksTitle": "No Bookmarked Reports",
5151
"noBookmarksMessage": "Bookmark reports to find them quickly here",
52-
"noMatchesTitle": "No Matching Reports",
53-
"noMatchesMessage": "No reports match your current filters. Try changing or clearing your filters.",
52+
"noMatchesTitle": "No matching reports found",
53+
"noMatchesMessage": "Try clearing or adjusting your filters to see available results.",
5454
"clearFilters": "Clear Filters",
55+
"changeFilters": "Change Filters",
5556
"sortButton": "Sort reports",
5657
"filterButton": "Filter reports"
5758
},

‎frontend/src/common/utils/i18n/resources/es/report.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,10 @@
4949
"filterBookmarked": "Guardados",
5050
"noBookmarksTitle": "No Hay Informes Guardados",
5151
"noBookmarksMessage": "Guarda informes como favoritos para encontrarlos rápidamente aquí",
52-
"noMatchesTitle": "No Hay Informes Coincidentes",
53-
"noMatchesMessage": "Ningún informe coincide con los filtros actuales. Intenta cambiar o eliminar los filtros.",
52+
"noMatchesTitle": "No se encontraron informes coincidentes",
53+
"noMatchesMessage": "Intente borrar o ajustar sus filtros para ver los resultados disponibles.",
5454
"clearFilters": "Eliminar Filtros",
55+
"changeFilters": "Cambiar Filtros",
5556
"sortButton": "Ordenar informes",
5657
"filterButton": "Filtrar informes"
5758
},

‎frontend/src/common/utils/i18n/resources/fr/report.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,10 @@
4949
"filterBookmarked": "Favoris",
5050
"noBookmarksTitle": "Aucun Rapport en Favoris",
5151
"noBookmarksMessage": "Marquez des rapports comme favoris pour les trouver rapidement ici",
52-
"noMatchesTitle": "Aucun Rapport Correspondant",
53-
"noMatchesMessage": "Aucun rapport ne correspond à vos filtres actuels. Essayez de modifier ou de supprimer vos filtres.",
52+
"noMatchesTitle": "Aucun rapport correspondant trouvé",
53+
"noMatchesMessage": "Essayez de supprimer ou d'ajuster vos filtres pour voir les résultats disponibles.",
5454
"clearFilters": "Effacer les Filtres",
55+
"changeFilters": "Modifier les Filtres",
5556
"sortButton": "Trier les rapports",
5657
"filterButton": "Filtrer les rapports"
5758
},

‎frontend/src/pages/Reports/ReportsListPage.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import sortSvg from 'assets/icons/sort.svg';
2828
import filterOutlineIcon from 'assets/icons/filter-outline.svg';
2929
import FilterPanel, { CategoryOption } from './components/FilterPanel/FilterPanel';
3030
import CategoryTag from './components/CategoryTag/CategoryTag';
31+
import ReportsFilterEmpty from './components/ReportsFilterEmpty/ReportsFilterEmpty';
3132

3233
import './ReportsListPage.scss';
3334

@@ -225,13 +226,11 @@ const ReportsListPage: React.FC = () => {
225226
<p>{t('list.noBookmarksMessage', { ns: 'report' })}</p>
226227
</div>
227228
) : selectedCategories.length > 0 ? (
228-
<div className="reports-list-page__no-matches">
229-
<h3>{t('list.noMatchesTitle', { ns: 'report' })}</h3>
230-
<p>{t('list.noMatchesMessage', { ns: 'report' })}</p>
231-
<IonButton onClick={handleClearAllCategories}>
232-
{t('list.clearFilters', { ns: 'report' })}
233-
</IonButton>
234-
</div>
229+
<ReportsFilterEmpty
230+
onChangeFilters={handleFilterClick}
231+
onClearFilters={handleClearAllCategories}
232+
hasSelectedFilters={selectedCategories.length > 0}
233+
/>
235234
) : (
236235
<NoReportsMessage onUpload={handleUpload} onRetry={handleRetry} />
237236
)}
@@ -331,8 +330,8 @@ const ReportsListPage: React.FC = () => {
331330
isOpen={showFilterModal}
332331
onDidDismiss={() => setShowFilterModal(false)}
333332
className="reports-list-page__filter-modal"
334-
initialBreakpoint={0.9}
335-
breakpoints={[0, 0.9]}
333+
initialBreakpoint={1}
334+
breakpoints={[0, 0.25, 0.5, 0.75, 1]}
336335
>
337336
<FilterPanel
338337
categories={categories}

‎frontend/src/pages/Reports/components/FilterPanel/FilterPanel.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
}
5454

5555
&__apply-button {
56-
--background: #4355B9;
56+
--background: #435FF0;
5757
--color: white;
5858
height: 48px;
5959
font-weight: 600;

‎frontend/src/pages/Reports/components/ReportsFilterEmpty/ReportsFilterEmpty.scss‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
.reports-filter-empty {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
justify-content: center;
6+
text-align: center;
7+
padding: 2rem;
8+
height: 100%;
9+
max-width: 400px;
10+
margin: 0 auto;
11+
12+
&__icon-container {
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
width: 80px;
17+
height: 80px;
18+
border-radius: 50%;
19+
background-color: #EFF2F9;
20+
margin-bottom: 1.5rem;
21+
}
22+
23+
&__icon {
24+
font-size: 36px;
25+
color: #9BA7BF;
26+
}
27+
28+
&__title {
29+
font-size: 1.25rem;
30+
font-weight: 600;
31+
margin-bottom: 0.75rem;
32+
color: var(--ion-color-dark);
33+
}
34+
35+
&__message {
36+
margin-bottom: 2rem;
37+
color: var(--ion-color-medium);
38+
line-height: 1.5;
39+
font-size: 1rem;
40+
}
41+
42+
&__buttons {
43+
width: 100%;
44+
max-width: 300px;
45+
margin-top: 1rem;
46+
}
47+
48+
&__button {
49+
margin-bottom: 0.75rem;
50+
--border-radius: 8px;
51+
font-weight: 500;
52+
font-size: 1rem;
53+
54+
&--primary {
55+
--background: var(--ion-color-primary);
56+
--color: var(--ion-color-primary-contrast);
57+
}
58+
59+
&--secondary {
60+
--background: transparent;
61+
--color: var(--ion-color-primary);
62+
--border-color: var(--ion-color-primary);
63+
}
64+
}
65+
}

‎frontend/src/pages/Reports/components/ReportsFilterEmpty/ReportsFilterEmpty.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from 'react';
2+
import { IonButton, IonIcon } from '@ionic/react';
3+
import { useTranslation } from 'react-i18next';
4+
import { searchOutline } from 'ionicons/icons';
5+
import './ReportsFilterEmpty.scss';
6+
7+
interface ReportsFilterEmptyProps {
8+
onChangeFilters: () => void;
9+
onClearFilters: () => void;
10+
showClearButton?: boolean;
11+
hasSelectedFilters?: boolean;
12+
}
13+
14+
/**
15+
* Component to display when no reports match the current filter criteria
16+
*/
17+
const ReportsFilterEmpty: React.FC<ReportsFilterEmptyProps> = ({
18+
onChangeFilters,
19+
onClearFilters,
20+
showClearButton = true,
21+
hasSelectedFilters = true,
22+
}) => {
23+
const { t } = useTranslation(['report', 'common']);
24+
25+
return (
26+
<div className="reports-filter-empty">
27+
<div className="reports-filter-empty__icon-container">
28+
<IonIcon icon={searchOutline} className="reports-filter-empty__icon" />
29+
</div>
30+
31+
<h3 className="reports-filter-empty__title">
32+
{t('list.noMatchesTitle', { ns: 'report' })}
33+
</h3>
34+
35+
<p className="reports-filter-empty__message">
36+
{t('list.noMatchesMessage', { ns: 'report' })}
37+
</p>
38+
39+
<div className="reports-filter-empty__buttons">
40+
<IonButton
41+
expand="block"
42+
className="reports-filter-empty__button reports-filter-empty__button--primary"
43+
onClick={onChangeFilters}
44+
>
45+
{t('list.changeFilters', { ns: 'report' })}
46+
</IonButton>
47+
48+
{showClearButton && hasSelectedFilters && (
49+
<IonButton
50+
expand="block"
51+
fill="outline"
52+
className="reports-filter-empty__button reports-filter-empty__button--secondary"
53+
onClick={onClearFilters}
54+
>
55+
{t('list.clearFilters', { ns: 'report' })}
56+
</IonButton>
57+
)}
58+
</div>
59+
</div>
60+
);
61+
};
62+
63+
export default ReportsFilterEmpty;

‎frontend/src/pages/Reports/components/ReportsFilterEmpty/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './ReportsFilterEmpty';

‎frontend/src/types/custom.d.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
declare module '*.svg' {
2+
import * as React from 'react';
3+
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
4+
const src: string;
5+
export default src;
6+
}
7+
8+
declare module '*.png' {
9+
const content: string;
10+
export default content;
11+
}
12+
13+
declare module '*.jpg' {
14+
const content: string;
15+
export default content;
16+
}
17+
18+
declare module '*.jpeg' {
19+
const content: string;
20+
export default content;
21+
}
22+
23+
declare module '*.gif' {
24+
const content: string;
25+
export default content;
26+
}

‎frontend/tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,6 @@
2525
"test/*": ["./src/test/*"]
2626
}
2727
},
28-
"include": ["src"],
28+
"include": ["src", "src/types"],
2929
"references": [{ "path": "./tsconfig.node.json" }]
3030
}

0 commit comments

Comments
 (0)