Thibaut/ffsaf-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

feat: add club contact tooltip

Browse Source
This commit is contained in:
Thibaut Valentin 2025-07-05 13:42:16 +02:00
parent 520d00adc7
commit 1e260caddb
1 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/main/webapp/src/components/Club/ContactEditor.jsx
View File

@ -1,12 +1,21 @@
import {useEffect, useReducer, useState} from "react"; import {useEffect, useReducer, useState} from "react";
import {SimpleReducer} from "../../utils/SimpleReducer.jsx"; import {SimpleReducer} from "../../utils/SimpleReducer.jsx";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faAdd, faTrashCan} from "@fortawesome/free-solid-svg-icons"; import {faAdd, faCircleQuestion, faTrashCan} from "@fortawesome/free-solid-svg-icons";
export function ContactEditor({data}) { export function ContactEditor({data}) {
const [state, dispatch] = useReducer(SimpleReducer, []) const [state, dispatch] = useReducer(SimpleReducer, [])
const [out_data, setOutData] = useState({}) const [out_data, setOutData] = useState({})
const tooltipText = {
SITE: "Site web du club avec ou sans le 'https://'</br>Exemple: ffsaf.fr</br>Ou https://ffsaf.fr",
FACEBOOK: "Page Facebook du club débutant par 'https://www.facebook.com/'</br>Exemple: https://www.facebook.com/ffmsf",
TELEPHONE: "Numéro de téléphone du club<br>Exemple: 06 12 13 78 55",
INSTAGRAM: "Compte Instagram du club débutant par 'https://www.instagram.com/'</br>Exemple: https://www.instagram.com/ff_msf",
COURRIEL: "Adresse e-mail du club<br>Exemple: contact@ffsaf.fr",
AUTRE: "Autre contact du club",
}
useEffect(() => { useEffect(() => {
let i = 0; let i = 0;
for (const key in data.contact) { for (const key in data.contact) {
@ -22,6 +31,9 @@ export function ContactEditor({data}) {
out_data2[d.data.type] = d.data.value out_data2[d.data.type] = d.data.value
}) })
setOutData(out_data2) setOutData(out_data2)
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
}, [state]); }, [state]);
return <div className="row mb-3"> return <div className="row mb-3">
@ -49,6 +61,10 @@ export function ContactEditor({data}) {
onChange={(e) => { onChange={(e) => {
dispatch({type: 'UPDATE_OR_ADD', payload: {id: d.id, data: {type: d.data.type, value: e.target.value}}}) dispatch({type: 'UPDATE_OR_ADD', payload: {id: d.id, data: {type: d.data.type, value: e.target.value}}})
}}/> }}/>
<button type="button" className="btn btn-outline-info" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title={tooltipText[d.data.type]} data-bs-html="true">
<FontAwesomeIcon icon={faCircleQuestion}/>
</button>
<button className="btn btn-danger" type="button" <button className="btn btn-danger" type="button"
onClick={() => dispatch({type: 'REMOVE', payload: d.id})}><FontAwesomeIcon onClick={() => dispatch({type: 'REMOVE', payload: d.id})}><FontAwesomeIcon
icon={faTrashCan}/> icon={faTrashCan}/>
@ -83,4 +99,4 @@ export function ContactEditor({data}) {
</div> </div>
</ul> </ul>
</div> </div>
} }