We wpisie opiszę, jak uaktywnić komponent modal z frameworka Bulma, aby po wciśnięciu przycisku kasowania wiersza-kontraktu w tabeli kontraktów możliwe było potwierdzenie lub anulowanie usunięcia kontraktu.
<tbody>
{cursor && Object.keys(cursor).map(
(keyName, keyIndex) =>
<tr className="has-text-centered is-size-7"
key={keyIndex}>
<td>{keyIndex+1}</td>
<td>{(cursor[keyName].status)}</td>
<td>{(cursor[keyName].contract_number)}</td>
<td>{(cursor[keyName].contractor)}</td>
<td>{(cursor[keyName].customer)}</td>
<td>{(cursor[keyName].date_of_order)}</td>
<td>{(cursor[keyName].date_of_delivery)}</td>
<td>{(cursor[keyName].pallets_position)}</td>
<td>{(cursor[keyName].pallets_planned)}</td>
<td>{(cursor[keyName].pallets_actual)}</td>
<td>{(cursor[keyName].warehouse)}</td>
<td>
<FaEdit />
<FaTrashAlt onClick={() =>
showModal(cursor[keyName].id)}
title={`Delete contract ${keyIndex+1}`} />
</td>
</tr>)}
</tbody>

Zamiast bezpośrednio wywołać funkcję deleteContract() zostaje wywołana funkcja showModal() pobierająca jako parametr id wybranego kontraktu.
Funkcja showModal() ustawia odpowiednio zmienne id oraz modal tzn.
const [modal, setModal] = useState(false)
const [id, setId] = useState()
const showModal = (id) => {
setId(id)
setModal(!modal)
}
Zmienna id przechowuje numer id wybranego kontraktu, natomiast zmienna modal przechowuje wartość boolean określającą stan okna modalnego (wyświetlony lub niewidoczny-domyślnie). Wywołanie funkcji setModal() zmienia wartość domyślną – false zmiennej modal na true.
Kod okna modalnego wyświetlającego potwierdzenie kasowania kontraktu wygląda następująco:
<div class={`modal ${modal && 'is-active'}`}>
<div class="modal-background"></div>
<div class="modal-card column is-one-quarter">
<header class="modal-card-head">
<p class="modal-card-title has-text-danger">
Delete Contract?
</p>
</header>
<section class="modal-card-foot">
<button class="button is-danger"
onClick={() => deleteContract(id)}>Delete
</button>
<button class="button"
onClick={() => setModal(!modal)}>Cancel
</button>
</section>
</div>
</div>
Wybranie przycisku Cancel powoduje, że okno modalne staje się niewidoczne. Wybranie przycisku Delete aktywuje właściwą funkcję kasowania wiersza tzn.
const deleteContract = (id) => {
setCursor(Object.values(cursor)
.filter((row) => row.id !== id))
fetch('/api/contract/delete', {
method: 'POST',
headers: {
'Content-type': 'application/json',
},
body: JSON.stringify({'id': id, 'token': token})
})
.then(res => res.json())
.then(data => console.log(data))
.catch((err) => console.log(err));
setModal(!modal)
}
Funkcja setCursor pobiera wartości obiektu cursor i filtruje je w taki sposób, że odrzucany jest wybrany kontrakt. Następnie następuje wywołanie api we Flasku, oprócz id kontraktu przesyłany jest również token użytkownika. Wynik pomyślnego kasowania wiersz wyświetlany jest w konsoli.
Jak wygląda API we Flasku opisałem w poprzednim wpisie.
W ostatnim wierszu funkcji deleteContract() usuwam okno modalne.