W tabeli kontraktów po naciśnięciu odpowiedniego przycisku kasowania wiersza w tabeli zostaje aktywowana funkcja deleteContract, która jako parametr przyjmuje wartość id kontraktu tzn.:
<td>
<FaTrashAlt onClick={() => deleteContract(cursor[keyName].id)} />
</td>
Funkcja deleteContract filtruje dane zawarte w zmiennej cursor w taki sposób, że odrzucany jest wiersz, który chcemy usunąć. Następnie wywoływana jest zapytanie do backendu, gdzie w metodzie POST przesyłana jest wartość id kontraktu oraz token. Gdy usunięcie rekordu będzie zakończone sukcesem, to z API zostaje przesłana informacja w zmiennej message (w podanym przykładzie wartość tej zmiennej jest wyświetlana w konsoli).
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));
}
Backend we Flask-RESTful z wykorzystaniem SQLAlchemy:
class DeleteContract(Resource):
def post(self):
req = request.json
contract_id = req['id']
token = req['token'].strip('"')
user = User.query.filter_by(token=token).first()
if user.role == 'Customer':
contract = Contract.query.filter_by(customer=user.username).filter_by(id=contract_id).first()
if contract:
contract.status ='cancelled'
db.session.commit()
return {"message": "Row deleted"}
Przesłane za pomocą metody POST wartości id i token przypisuję do odpowiednich zmiennych contract_id oraz token. Następnie znajduję użytkownika w bazie danych na podstawie przesłanego tokena. Jeśli użytkownik należy do grupy Customer, to dokonywane jest wyszukiwanie kontraktu na podstawie nazwy użytkownika i numeru id kontraktu. Jeśli kontrakt ten istnieje to zamiast go usuwać z bazy, zmieniam jego status na cancelled.
Uaktualniłem również metodę post() klasy AllContracts(Resource), aby utworzony obiekt kursora nie zawierał rekordów ze statusem cancelled tzn.:
class AllContracts(Resource):
def get(self, token):
token = token.strip('"')
user = User.query.filter_by(token=token).first()
if user.role == 'Customer':
contracts = Contract.query.filter(
Contract.status!='cancelled').
filter_by(customer=user.username).
order_by(Contract.id.desc()).all()
elif user.role == 'Contractor':
contracts = Contract.query.
filter(Contract.status!='cancelled').
filter_by(contractor=user.username).
order_by(Contract.id.desc()).all()
cursor = {}
for i, contract in enumerate(contracts):
cursor[i] = contract.serialize()
return cursor
Hook useEffect() do wczytania kontraktów po wyborze opcji Contracts z menu wygląda następująco:
useEffect(
() => {
const token = sessionStorage.getItem('token')
fetch('/api/contract/' + token)
.then(res => res.json()).then(data => setCursor(data)).catch((err) => console.log(err))
}, [token, setCursor],
);