Hey guys, I need some help with a problem I'm facing in my current scenario. I am working on a feature to lock bookings for other admins, and I have created a field in the bookings table to store the admin's ID when they access the booking. However, if the user closes the tab, the booking remains locked for other admins as well.
I've tried various methods in vueJs like using the beforeunload method, Xhr requests, and axios calls, but none have been successful in resolving this issue. Can anyone suggest what else I can do to fix this problem?
removeUser () {
var params = JSON.stringify({ locked_by: '' });
let xhr = new XMLHttpRequest()
xhr.open('PUT',Url, true)
xhr.setRequestHeader("Authorization", 'Bearer ' + localStorage.getItem('app_access_token'))
xhr.setRequestHeader("Content-length", params.length);
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8")
xhr.responseType = 'arraybuffer'
xhr.onreadystatechange = function() {//Call a function when the state changes.
if(xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
}
xhr.send(params);
mounted() {
window.addEventListener('beforeunload', this.removeUser)
I also attempted an axios call on the beforeunload event:
removeUser (id) {
let payload = {
locked_by: '',
id: id
}
this.updateIsLockedField(payload).then(() => {
console.log('updated')
return 'something'
})
},
If you have any suggestions or advice on how to trigger an API call when the user closes the tab, it would be greatly appreciated!