Ajax user save

This commit is contained in:
Eden Kirin
2023-10-26 21:58:15 +02:00
parent 50187f5a34
commit 3290837555
8 changed files with 195 additions and 84 deletions

View File

@ -2,38 +2,93 @@
{{ import "/components/table_component.jet" }}
{{ block mainContent() }}
<h3>Edit user</h3>
<h3>Edit user</h3>
<div class="row">
<form class="mb-5 col-4 ms-auto me-auto" method="post" action="{{ .currentPath }}">
<div class="mb-3">
<label class="form-label">First name</label>
<input type="text" name="first-name" class="form-control" value="{{ user.FirstName }}" required>
</div>
<div class="mb-3">
<label class="form-label">Last name</label>
<input type="text" name="last-name" class="form-control" value="{{ user.LastName }}" required>
</div>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" name="email" class="form-control" value="{{ user.Email }}" required>
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="text" name="password" class="form-control">
</div>
<div class="row">
<form class="mb-5 col-4 ms-auto me-auto user-edit" method="post" action="{{ .currentPath }}">
<div class="mb-3">
<label class="form-label">First name</label>
<input type="text" name="first-name" class="form-control" value="{{ .user.FirstName }}" required>
</div>
<div class="mb-3">
<label class="form-label">Last name</label>
<input type="text" name="last-name" class="form-control" value="{{ .user.LastName }}" required>
</div>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" name="email" class="form-control" value="{{ .user.Email }}" required>
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="text" name="password" class="form-control">
</div>
<div class="d-flex">
<a href="/users" class="btn btn-outline-secondary ms-auto me-2">
Cancel
</a>
<button type="submit" class="btn btn-success">
Save
</button>
</div>
</form>
</div>
<div class="d-flex">
<a href="{{ .backlink }}" class="btn btn-outline-secondary ms-auto me-2">
Cancel
</a>
<button type="submit" class="btn btn-success">
Save
</button>
</div>
</form>
</div>
{{ end }}
{{ block jsBlock() }}
<script>
document.querySelector("form.user-edit").addEventListener("submit", (e) => {
e.preventDefault();
const form = e.currentTarget;
const formData = new FormData(form);
const postData = Object.fromEntries(formData.entries());
const url = "{{ .currentPath }}";
const backlink = "{{ .backlink }}";
console.log(postData)
fetch(url, {
method: "POST",
mode: "cors",
cache: "no-cache",
credentials: "same-origin",
headers: {
"Content-Type": "application/json",
},
redirect: "follow",
referrerPolicy: "no-referrer",
body: JSON.stringify(postData),
}).then(response => {
if (![200, 201, 400].includes(response.status)) {
throw new Error(response.statusText);
}
return response.json()
}).then(jsonData => {
console.log("response:", jsonData)
if (jsonData.success) {
window.location = backlink;
} else {
/*
if (jsonData.validationErrors) {
displayValidationErrors(jsonData.validationErrors);
doSpinner(this.btnSave, false);
} else {
throw new Error(jsonData.error);
}
*/
}
}).catch(err => {
console.error(err);
});
});
</script>
{{ end }}