Skip to content

Commit ed176c8

Browse files
BekhechiWahibBekhechiWahib
committed
commit-email-template-done
1 parent f1dabee commit ed176c8

File tree

4 files changed

+233
-37
lines changed

4 files changed

+233
-37
lines changed

‎Gestion_PFE_Frontend_React/src/index.css

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ textarea:hover {
209209
justify-content: space-between;
210210
align-items: flex-start;
211211
padding: 20px;
212-
background: #ffffff; /* Couleur de fond par défaut */
212+
background: #e9efff;
213213
border-radius: 15px;
214214
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
215215
width: 300px;
@@ -244,7 +244,10 @@ textarea:hover {
244244

245245
/* Styles lorsque la carte est active */
246246
#my-card-container.active-template {
247-
background: linear-gradient(65deg, #00604d, #15af90); /* Fond dégradé */
247+
/* background: linear-gradient(65deg, #2c3e50, #3b5a79); best */
248+
background: linear-gradient(65deg, #15af90, #2c3e50);
249+
/*background: linear-gradient(65deg, #2c3e50, #1abc9c);*/
250+
/* background: linear-gradient(65deg, #00604d, #15af90); */
248251
color: #fcfcfc; /* Texte en couleur claire lorsque la carte est active */
249252
}
250253

‎Gestion_PFE_Frontend_React/src/views/dashboard admin/pages/page_envoi_config_email.jsx

Lines changed: 95 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11

22

33
import React, { useState, useEffect } from 'react';
4+
5+
import { MdOutlineEmail, MdArrowForwardIos, MdOutlineArrowDropDown } from 'react-icons/md';
46
import MyCardTemplate from '../../../components/card_template';
57
import '../styles/page_envoi_config_email.css';
68
const EvoieConfigEmail = () => {
79
const [emails, setEmails] = useState([]); // Liste des e-mails
810
const [selectedEmail, setSelectedEmail] = useState(null); // E-mail sélectionné pour modification
911
const [updatedContent, setUpdatedContent] = useState(""); // Contenu mis à jour
10-
12+
const [updatedNom, setUpdatedNom] = useState("");
13+
const [updatedDescription, setUpdatedDescription] = useState("");
1114
// Fonction pour récupérer les e-mails
1215
const fetchEmails = async () => {
1316
try {
@@ -26,9 +29,12 @@ const EvoieConfigEmail = () => {
2629

2730
// Fonction pour sélectionner un e-mail
2831
const handleSelectEmail = (email) => {
32+
2933
setSelectedEmail(email);
3034
setUpdatedContent(email.contenue); // Pré-remplit le formulaire avec le contenu existant
31-
};
35+
setUpdatedNom(email.nom_email);
36+
setUpdatedDescription(email.description_email);
37+
};
3238

3339
// Fonction pour enregistrer les modifications
3440
const handleSave = async () => {
@@ -37,6 +43,8 @@ const EvoieConfigEmail = () => {
3743
const updatedEmail = {
3844
id: selectedEmail.id,
3945
contenue: updatedContent,
46+
nom_email: updatedNom,
47+
description_email: updatedDescription,
4048
};
4149

4250
try {
@@ -60,46 +68,104 @@ const EvoieConfigEmail = () => {
6068
}
6169
};
6270

71+
72+
73+
74+
75+
76+
77+
78+
79+
80+
81+
82+
83+
84+
6385
return (
6486
<>
6587
<div className="page-email-main">
66-
<h1>Gestion des e-mails</h1>
67-
68-
<div className="cards-container">
69-
{emails.map((email) => {
70-
console.log(selectedEmail?.id === email.id); // Affiche dans la console si l'email est sélectionné
71-
return (
72-
<MyCardTemplate
73-
key={email.id}
74-
titre={email.nom_email}
75-
description={email.description_email}
76-
onClick={() => handleSelectEmail(email)} // La fonction qui gère la sélection
77-
isSelected={selectedEmail?.id === email.id} // Passer un prop pour indiquer si cet email est sélectionné
78-
/>
79-
);
80-
})}
81-
<MyCardTemplate titre={'titre card'} description={'contenue card'}/>
82-
<MyCardTemplate titre={'titre card'} description={'contenue card'}/>
83-
<MyCardTemplate titre={'titre card'} description={'contenue card'}/>
84-
<MyCardTemplate titre={'titre card'} description={'contenue card'}/>
85-
88+
<div
89+
className={
90+
selectedEmail
91+
? "container-emails-left-min"
92+
: "container-emails-left-max"
93+
}
94+
>
95+
<div>
96+
<h1 className="page-title">
97+
<MdOutlineEmail style={{ marginRight: "10px" }} /> Gestion des
98+
Templates
99+
</h1>
100+
</div>
101+
<div className="cards-container">
102+
{emails.map((email) => {
103+
console.log(selectedEmail?.id === email.id); // Affiche dans la console si l'email est sélectionné
104+
return (
105+
<MyCardTemplate
106+
key={email.id}
107+
titre={email.nom_email}
108+
description={email.description_email}
109+
onClick={() => handleSelectEmail(email)} // La fonction qui gère la sélection
110+
isSelected={selectedEmail?.id === email.id} // Passer un prop pour indiquer si cet email est sélectionné
111+
/>
112+
);
113+
})}
114+
</div>
86115
</div>
87116

88-
89117
{/* Formulaire de modification */}
90-
{selectedEmail && (
91-
<div className='modifier-template'>
92-
<h2>Modifier l'e-mail</h2>
118+
{selectedEmail ? (
119+
<div className="modifier-template-right-max">
120+
<button id="arrow-close" onClick={() => setSelectedEmail(null)}>
121+
<MdArrowForwardIos />
122+
</button>
123+
<h2>Modifier le template</h2>
124+
125+
<p>Nom Template :</p>
126+
<input
127+
type="text"
128+
value={updatedNom || "Chargement..."}
129+
onChange={(e) => setUpdatedNom(e.target.value)}
130+
/>
131+
132+
<p>Description :</p>
133+
<textarea
134+
className="auto-expand"
135+
rows={1} // Hauteur initiale : 1 ligne
136+
maxLength={150} // Limite du nombre total de caractères (optionnel)
137+
value={updatedDescription || "Chargement..."}
138+
onChange={(e) => setUpdatedDescription(e.target.value)}
139+
/>
140+
141+
<p>Contenue :</p>
93142
<textarea
94-
value={updatedContent}
143+
className="email-area"
144+
value={updatedContent || "Chargement..."}
95145
onChange={(e) => setUpdatedContent(e.target.value)}
96146
rows={5}
97147
style={{ width: "100%" }}
98148
></textarea>
99149
<br />
100-
<button onClick={handleSave}>Enregistrer</button>
101-
<button onClick={() => setSelectedEmail(null)}>Annuler</button>
150+
<div id="action-area">
151+
<button onClick={() => setSelectedEmail(null)}>Annuler</button>
152+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
153+
{selectedEmail.contenue !== updatedContent ||
154+
selectedEmail.nom_email !== updatedNom ||
155+
selectedEmail.description_email !== updatedDescription ? (
156+
<button onClick={handleSave}>Enregistrer</button>
157+
) : (
158+
<button
159+
style={{ pointerEvents: "none", opacity: 0.5 }}
160+
disabled
161+
>
162+
Enregistrer
163+
</button>
164+
)}
165+
</div>
102166
</div>
167+
) : (
168+
<div className="modifier-template-right-min"></div>
103169
)}
104170
</div>
105171
</>

‎Gestion_PFE_Frontend_React/src/views/dashboard admin/styles/dashboard_admin_main.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
background-color: #1abc9c;
4343
color: white;
4444
border: none;
45+
margin: 0;
4546
padding: 10px 10px;
4647
border-radius: 0;
4748
cursor: pointer;

‎Gestion_PFE_Frontend_React/src/views/dashboard admin/styles/page_envoi_config_email.css

Lines changed: 132 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -192,13 +192,36 @@
192192
.page-email-main{
193193
position: relative;
194194
width: 100%;
195-
min-height: 100%;
195+
height: 100vh; /* Important pour que les enfants héritent de la hauteur */
196+
overflow: hidden;
196197
display: flex;
197-
justify-content: space-between;
198+
justify-content: flex-start;
198199
align-items: center;
199-
flex-direction: column;
200+
flex-direction: row;
201+
}
202+
.page-title {
203+
display: flex;
204+
justify-content: center;
205+
align-items: center;
206+
font-size: 2.5rem; /* Taille de police */
207+
font-weight: bold; /* Mettre en gras */
208+
color: #ffffff; /* Texte en blanc pour contraster avec le dégradé */
209+
text-align: center; /* Centré sur la page */
210+
padding: 10px 0;
211+
margin-bottom: 20px;
212+
213+
text-transform: uppercase; /* Mettre le texte en majuscule */
214+
letter-spacing: 2px; /* Espacement entre les lettres */
215+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Légère ombre portée */
216+
background: linear-gradient(90deg, #15af90, #2c3e50); /* Dégradé personnalisé */
217+
218+
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation fluide */
200219
}
201220

221+
.page-title:hover {
222+
transform: translateY(-5px); /* Effet d'élévation au survol */
223+
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3); /* Accentuation de l'ombre */
224+
}
202225

203226

204227
.cards-container {
@@ -211,13 +234,116 @@ justify-items: center;
211234
align-items: center;
212235
gap: 20px;
213236
padding: 20px;
214-
background-color: #f8f9fa;
237+
background-color: #ffffff;
238+
}
239+
240+
241+
.container-emails-left-min{
242+
width: 100%;
243+
min-width: 30%;
244+
height: 100%;
245+
overflow-y: auto;
246+
}
247+
.container-emails-left-max{
248+
width: 100%;
249+
height: 100%;
250+
251+
overflow-y: auto;
215252
}
216253

217-
.modifier-template{
218-
background-color: #007bff;
254+
255+
256+
257+
258+
.modifier-template-right-max {
259+
position: relative;
260+
width: clamp(500px, 75%, 100%); /* Entre 500px (min) et 75% (max) */
261+
height: 100%; /* Hauteur limitée à la fenêtre */
262+
background-color: #f3f3f3;
263+
box-shadow: -5px 0 5px #e4e4e4;
264+
padding-left: 10px;
265+
padding-bottom: 20px;
266+
z-index: 1;
267+
opacity: 1; /* Complètement visible */
268+
transition: width 0.5s ease, opacity 1s ease;
269+
overflow-y: auto; /* Active le défilement vertical */
270+
overflow-x: auto; /* Désactive le défilement horizontal */
219271
}
220272

221273

274+
.modifier-template-right-max input {
275+
margin: 10px;
276+
margin-bottom: 20px;
277+
width: 80%;
278+
}
279+
280+
281+
.modifier-template-right-min {
282+
width: 0; /* Caché à l'état initial */
283+
min-height: 100%;
284+
opacity: 0; /* Transparent */
285+
overflow: hidden; /* Évite les débordements */
286+
background-color: #ededed;
287+
transition: width 0.5s ease, opacity 0.5s ease;
288+
}
289+
290+
291+
292+
#arrow-close {
293+
padding: 0;
294+
background-color: #15af90; /* Couleur de fond */
295+
border: none;
296+
border-radius: 50%; /* Forme ronde */
297+
width: 30px;
298+
height: 30px;
299+
display: flex;
300+
align-items: center;
301+
justify-content: center;
302+
cursor: pointer;
303+
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
304+
transition: transform 0.3s ease, background-color 0.3s ease;
305+
}
306+
307+
#arrow-close:hover {
308+
transform: scale(1.1); /* Légère mise en avant au survol */
309+
}
310+
311+
#arrow-close:active {
312+
transform: scale(0.9); /* Réduction à l'appui */
313+
}
314+
315+
316+
.modifier-template-right-max .auto-expand {
317+
resize: none; /* Empêche le redimensionnement manuel */
318+
width: 90%;
319+
margin: 10px;
320+
}
321+
322+
323+
324+
.email-area {
325+
max-width: 90%;
326+
height: 200px;
327+
margin: 10px;
328+
border: 1px solid #ddd;
329+
border-radius: 5px;
330+
padding: 10px;
331+
font-size: 16px;
332+
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
333+
outline: none;
334+
transition: border-color 0.3s;
335+
}
336+
337+
.email-area:focus {
338+
border-color: #15af90;
339+
box-shadow: 0 0 5px #00866c;
340+
}
341+
342+
#action-area{
343+
display: flex;
344+
justify-content: flex-end;
345+
padding: 20px;
346+
}
347+
222348

223349

0 commit comments

Comments
 (0)