Skip to content

Commit 560e6c6

Browse files
Math-RMath-R
committed
front: add asu support in lmr's help module
Signed-off-by: Math_R_ <mathieu.richard747@gmail.com>
1 parent a8ddccf commit 560e6c6

File tree

5 files changed

+109
-43
lines changed

5 files changed

+109
-43
lines changed

‎front/public/locales/fr/stdcm-help-section.json

+19
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,25 @@
11
{
22
"help": "Aide",
33
"backToIndex": "Retour à l'index",
4+
"asu": [
5+
{
6+
"title": "Nom de l'application",
7+
"value": "OSRD"
8+
},
9+
{
10+
"title": "Assistance",
11+
"value": "Support applicatif ASU"
12+
},
13+
{
14+
"title": "Téléphone",
15+
"value": "70 70 70 (ou 09 72 72 12 70)"
16+
},
17+
{
18+
"title": "Code Application (AVAYA)",
19+
"value": "176"
20+
}
21+
],
22+
"asuLink": "Lien vers le support ASU",
423
"sections": {
524
"application": {
625
"title": "L'application",

‎front/src/applications/stdcm/components/StdcmHelpModule/HelpSection.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { ArrowLeft } from '@osrd-project/ui-icons';
22
import cx from 'classnames';
33
import { useTranslation } from 'react-i18next';
44

5-
import type { Section } from './types';
65
import SectionContentManager from './SectionContentManager';
6+
import type { Section } from './types';
77

88
type HelpSectionProps = {
99
section: string;
@@ -37,7 +37,7 @@ const HelpSection = ({ section, isActive, closeHelpSection }: HelpSectionProps)
3737
currentSection.content.map((content, index) => (
3838
<SectionContentManager key={index} content={content} />
3939
))}
40-
{currentSection.subSections?.map((subSection, index) => (
40+
{currentSection.subSections?.map((subSection) => (
4141
<>
4242
<h2 className="stdcm__help-section__subtitle">{subSection.title}</h2>
4343
{subSection.content?.map((content, idx) => (

‎front/src/applications/stdcm/components/StdcmHelpModule/StdcmHelpModule.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const StdcmHelpModule = ({ toggleHelpModule, showHelpModule }: StdcmHelpSectionP
2121
toggleHelpModule();
2222
};
2323
const closeHelpSection = () => setActiveSection(null);
24+
const support = t('asu', { returnObjects: true }) as Array<any>;
2425
const sections = Object.keys(t('sections', { returnObjects: true }));
2526
return (
2627
<div className={cx('stdcm__help-module', { active: showHelpModule })}>
@@ -48,6 +49,23 @@ const StdcmHelpModule = ({ toggleHelpModule, showHelpModule }: StdcmHelpSectionP
4849
))}
4950
</div>
5051
</div>
52+
<footer>
53+
{Array.isArray(support) &&
54+
support.map((item, index) => (
55+
<>
56+
<div className="support-info">
57+
<div className="support-info__title">{item.title}</div>
58+
<div className="support-info__content">{item.value}</div>
59+
</div>
60+
{index !== support.length - 1 && <hr />}
61+
</>
62+
))}
63+
<div className="support-asu__link">
64+
<a href="https://asu.osrd.fr/" target="_blank" rel="noreferrer">
65+
{t('asuLink')}
66+
</a>
67+
</div>
68+
</footer>
5169
{sections.map((section, index) => (
5270
<HelpSection
5371
section={section}

‎front/src/applications/stdcm/components/StdcmHelpModule/types.ts

+16-20
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,38 @@
11
export type Section = {
2-
id: string; // Identifiant unique de la section
3-
title: string; // Titre de la section
4-
content?: Content[]; // Tableau des contenus de la section,
5-
subSections?: Omit<Section, 'subSection'>[]; // Tableau des sous-sections
2+
id: string;
3+
title: string;
4+
content?: Content[];
5+
subSections?: Omit<Section, 'subSection'>[];
66
};
77

8-
// Définition des différents types de contenu qu'une section peut avoir
98
export type Content = ListContent | TextContent | FAQContent | GlossaryContent;
109

11-
// Contenu sous forme de liste
1210
export type ListContent = {
13-
type: 'list'; // Indique qu'il s'agit d'une liste
14-
items: Record<string, string>[]; // Tableau des éléments de la liste
11+
type: 'list';
12+
items: Record<string, string>[];
1513
};
1614

17-
// Contenu sous forme de texte
1815
export type TextContent = {
19-
type: 'text'; // Indique qu'il s'agit d'un texte
20-
value: string; // Texte contenant éventuellement du HTML
16+
type: 'text';
17+
value: string;
2118
};
2219

2320
export type FAQItem = {
24-
question: string; // La question
25-
answer: string; // La réponse
21+
question: string;
22+
answer: string;
2623
};
2724

2825
export type FAQContent = {
29-
type: 'faq'; // Indique qu'il s'agit d'une FAQ
30-
questions: FAQItem[]; // La question
26+
type: 'faq';
27+
questions: FAQItem[];
3128
};
3229

33-
// Contenu sous forme de glossaire (clé/valeur)
3430
export type GlossaryContent = {
35-
type: 'definitions'; // Indique qu'il s'agit d'un glossaire
36-
definitions: GlossaryItem[]; // Dictionnaire terme -> définition
31+
type: 'definitions';
32+
definitions: GlossaryItem[];
3733
};
3834

3935
export type GlossaryItem = {
40-
term: string; // Terme du glossaire
41-
definition: string; // Définition du terme
36+
term: string;
37+
definition: string;
4238
};

‎front/src/styles/scss/applications/stdcm/_helpModule.scss

+54-21
Original file line numberDiff line numberDiff line change
@@ -61,24 +61,24 @@
6161
right: 0;
6262
}
6363
&__header {
64-
margin-bottom: 75px;
64+
margin-bottom: 75px;
6565
}
66-
&__back-button{
67-
color: var(--grey50);
68-
font-size: 18px;
69-
font-weight: 600;
66+
&__back-button {
67+
color: var(--grey50);
68+
font-size: 18px;
69+
font-weight: 600;
7070
}
7171
&__title {
72-
font-size:32px;
73-
height: 40px;
74-
font-weight: 600;
75-
margin-bottom: 46px;
76-
color: var(--black100);
72+
font-size: 32px;
73+
height: 40px;
74+
font-weight: 600;
75+
margin-bottom: 46px;
76+
color: var(--black100);
7777
}
7878
&__subtitle {
79-
font-size: 24px;
80-
font-weight: 600;
81-
height: 32px;
79+
font-size: 24px;
80+
font-weight: 600;
81+
height: 32px;
8282
}
8383
&__content {
8484
padding-right: 56px;
@@ -87,17 +87,50 @@
8787
height: calc(100% - 40px);
8888
.section__content {
8989
ul {
90-
list-style-type: disc;
91-
list-style-position: outside;
92-
padding-left: 15px;
90+
list-style-type: disc;
91+
list-style-position: outside;
92+
padding-left: 15px;
9393
}
94-
code{
95-
padding-left: 2px;
96-
padding-right: 2px;
97-
background-color: var(--grey10);
98-
color: var(--grey60);
94+
code {
95+
padding-left: 2px;
96+
padding-right: 2px;
97+
background-color: var(--grey10);
98+
color: var(--grey60);
9999
}
100100
}
101101
}
102102
}
103+
footer {
104+
margin-top: auto;
105+
106+
.support-info {
107+
width: inherit;
108+
display: flex;
109+
justify-content: space-between;
110+
&__title {
111+
font-size: 16px;
112+
font-weight: 600;
113+
line-height: 24px;
114+
color: var(--black100);
115+
}
116+
&__content {
117+
font-size: 16px;
118+
font-weight: 400;
119+
line-height: 24px;
120+
color: var(--black100);
121+
}
122+
}
123+
hr {
124+
opacity: 1;
125+
background-color: rgba(211, 209, 207, 1);
126+
margin: 2px 0px;
127+
}
128+
.support-asu__link {
129+
margin-top: 31px;
130+
text-align: right;
131+
color: var(--primary60);
132+
font-size: 18px;
133+
font-weight: 600;
134+
}
135+
}
103136
}

0 commit comments

Comments
 (0)