Skip to content
Snippets Groups Projects
Commit dc7735c3 authored by Bastien DUMONT's avatar Bastien DUMONT :angel:
Browse files

Merge branch 'fix/retours-review' into 'dev' 

fix: better UI for popups on/off

See merge request web-et-numerique/llle_project/backoffice-client!76
parents 0d59de10 3cb7f18f
No related branches found
No related tags found
6 merge requests!96Deploy OpenShift v2,!95MEP fix liens undefined,!91MEP: removed Meilisearch,!79Fix: nginx unprivileged image,!77Back-office SGE before canary release,!76fix: better UI for popups on/off
Pipeline #44092 passed
Stage: quality
Stage: build
Hide whitespace changes
Inline Side-by-side
src/components/Settings/Settings.tsx
+ 128
− 121
View file @ dc7735c3
...@@ -238,142 +238,149 @@ const Settings: React.FC = () => { ...@@ -238,142 +238,149 @@ const Settings: React.FC = () => {
<h1>Création de Pop-up</h1> <h1>Création de Pop-up</h1>
<div className="partnersInfo"> <div className="partnersInfo">
<h2 className="title">Affichage des pop-up de panne</h2> <h2 className="title">Affichage des pop-up de panne</h2>
<p>Services concernés</p> <div className={customPopup.popupEnabled ? 'disabled' : ''}>
<div className="switch_div"> <p>Services concernés</p>
<span>Panne Enedis</span>
<input
type="checkbox"
id="switch_enedis"
onChange={(event) => {
handleCheckboxChange(
event.currentTarget.checked,
CheckboxType.ENEDIS
)
}}
checked={partnersInfo.enedis_failure}
/>
<label htmlFor="switch_enedis"></label>
</div>
<div className="switch_div">
<span>Panne EGL</span>
<input
type="checkbox"
id="switch_egl"
onChange={(event) => {
handleCheckboxChange(
event.currentTarget.checked,
CheckboxType.EGL
)
}}
checked={partnersInfo.egl_failure}
/>
<label htmlFor="switch_egl"></label>
</div>
<div className="switch_div">
<span>Panne GRDF</span>
<input
type="checkbox"
id="switch_grdf"
onChange={(event) => {
handleCheckboxChange(
event.currentTarget.checked,
CheckboxType.GRDF
)
}}
checked={partnersInfo.grdf_failure}
/>
<label htmlFor="switch_grdf"></label>
</div>
</div>
<div className="customPopup">
<h2 className="title">Affichage de pop-up personnalisée</h2>
<div className="currentPopup">
<div className="switch_div"> <div className="switch_div">
<span>Pop-up active</span> <span>Panne Enedis</span>
<input <input
type="checkbox" type="checkbox"
id="switch_popup" id="switch_enedis"
checked={customPopup.popupEnabled} disabled={customPopup.popupEnabled}
checked={partnersInfo.enedis_failure}
onChange={(event) => { onChange={(event) => {
handleCheckboxChange( handleCheckboxChange(
event.currentTarget.checked, event.currentTarget.checked,
CheckboxType.CUSTOM CheckboxType.ENEDIS
) )
}} }}
/> />
<label htmlFor="switch_popup"></label> <label htmlFor="switch_enedis"></label>
</div>
<div className="switch_div">
<span>Panne EGL</span>
<input
type="checkbox"
id="switch_egl"
disabled={customPopup.popupEnabled}
checked={partnersInfo.egl_failure}
onChange={(event) => {
handleCheckboxChange(
event.currentTarget.checked,
CheckboxType.EGL
)
}}
/>
<label htmlFor="switch_egl"></label>
</div>
<div className="switch_div">
<span>Panne GRDF</span>
<input
type="checkbox"
id="switch_grdf"
disabled={customPopup.popupEnabled}
checked={partnersInfo.grdf_failure}
onChange={(event) => {
handleCheckboxChange(
event.currentTarget.checked,
CheckboxType.GRDF
)
}}
/>
<label htmlFor="switch_grdf"></label>
</div> </div>
{customPopup.popupEnabled &&
previousEndDate &&
getRemainingDuration(previousEndDate)}
</div> </div>
{customPopup.popupEnabled && ( </div>
<>
<div className="popupTitle"> <div className="customPopup">
<label htmlFor="title">Titre</label> <h2 className="title">Affichage de pop-up personnalisée</h2>
<div className={isPartnerNotificationOn() ? 'disabled' : ''}>
<div className="currentPopup">
<div className="switch_div">
<span>Pop-up active</span>
<input <input
type="text" type="checkbox"
name="title" id="switch_popup"
id="title" disabled={isPartnerNotificationOn()}
min={1} checked={customPopup.popupEnabled}
placeholder="Titre" onChange={(event) => {
value={customPopup.title} handleCheckboxChange(
onChange={(event) => handlePopupChange(event, 'title')} event.currentTarget.checked,
CheckboxType.CUSTOM
)
}}
/> />
<label htmlFor="switch_popup"></label>
</div> </div>
<div className="popupDescription">
<label htmlFor="description">Description</label> {customPopup.popupEnabled &&
<textarea previousEndDate &&
name="description" getRemainingDuration(previousEndDate)}
id="description" </div>
placeholder="Description"
rows={5} <div className="popupTitle">
maxLength={250} <label htmlFor="title">Titre</label>
value={customPopup.description} <input
onChange={(event) => type="text"
handlePopupChange(event, 'description') name="title"
} id="title"
/> min={1}
<p className="count"> placeholder="Titre"
{customPopup.description.length} / 250 value={customPopup.title}
</p> onChange={(event) => handlePopupChange(event, 'title')}
</div> />
<div className="popupEndDate"> </div>
<label htmlFor="title">Nouvelle Durée</label>
<div className="durationInput"> <div className="popupDescription">
<select <label htmlFor="description">Description</label>
value={popupDuration.type} <textarea
onChange={(event) => handleSelectChange(event)} name="description"
> id="description"
{OPTIONS.map((option) => ( placeholder="Description"
<option rows={5}
key={option.value} maxLength={250}
value={option.value} value={customPopup.description}
selected={popupDuration.type === option.value} onChange={(event) =>
> handlePopupChange(event, 'description')
{option.label} }
</option> />
))} <p className="count">
</select> {customPopup.description.length} / 250
{popupDuration.type !== 'infinite' && ( </p>
<input </div>
type="number"
min="0" <div className="popupEndDate">
value={popupDuration.duration} <label htmlFor="title">Nouvelle Durée</label>
onChange={(e) => <div className="durationInput">
setPopupDuration((prev) => ({ <select
...prev, value={popupDuration.type}
duration: Number(e.target.value), onChange={(event) => handleSelectChange(event)}
})) >
} {OPTIONS.map((option) => (
/> <option
)} key={option.value}
</div> value={option.value}
selected={popupDuration.type === option.value}
>
{option.label}
</option>
))}
</select>
{popupDuration.type !== 'infinite' && (
<input
type="number"
min="0"
value={popupDuration.duration}
onChange={(e) =>
setPopupDuration((prev) => ({
...prev,
duration: Number(e.target.value),
}))
}
/>
)}
</div> </div>
</> </div>
)} </div>
</div> </div>
<div className="buttons"> <div className="buttons">
......
src/components/Settings/settings.scss
+ 4
− 0
View file @ dc7735c3
@import '../../styles/config/colors'; @import '../../styles/config/colors';
.settings { .settings {
.disabled {
opacity: 0.5;
}
.partnersInfo, .partnersInfo,
.customPopup { .customPopup {
h2.title { h2.title {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment