From cecf7c18f819e56c3b7775829ae8d0cdfd72bf1e Mon Sep 17 00:00:00 2001
From: c2065864 <barnards3@cardiff.ac.uk>
Date: Thu, 9 Dec 2021 15:18:57 +0000
Subject: [PATCH] Added validation to staff member input
---
src/main/resources/static/js/manageStaff.js | 50 +++++++++++++------
.../templates/fragments/manageStaff.html | 3 +-
2 files changed, 37 insertions(+), 16 deletions(-)
diff --git a/src/main/resources/static/js/manageStaff.js b/src/main/resources/static/js/manageStaff.js
index 2a77b99..2d51943 100644
--- a/src/main/resources/static/js/manageStaff.js
+++ b/src/main/resources/static/js/manageStaff.js
@@ -3,25 +3,25 @@ function submit(shopId, email={"value":""}){
if(email.parentElement.children[0].classList.contains("subtitle")){
emailValue = email.parentElement.children[0].innerHTML
- email.parentElement.parentElement.remove()
}else{
emailValue = email.parentElement.children[0].value
- document.getElementById("staffManagement").innerHTML+=
- `<div id="staffManagement">
- <div class="staffManagementContainer">
- <p class="subtitle is-6" style="width:50%; margin-bottom: 0">${emailValue}</p>
- <button class="button is-danger is-outlined" style="border-bottom: 1px solid black"
- onclick="submit(${document.getElementById("shopId").value},this);">
- <span class="icon is-small">
- <i class="fas fa-times is-danger"></i>
- </span>
- </button>
- </div>
- <p id="blackLine" class="subtitle is-6" style="border-bottom: 1px solid #00b89c; margin-bottom:1%; width:50%"></p>
- </div>`
+ emailArray = []
+
+ document.getElementsByName("staffEmail").forEach(x => emailArray.push(x.innerHTML))
+
+ if(emailArray.includes(emailValue)){
+ document.getElementById("emailErrorField").innerHTML = "User already added"
+ return
+ }
+ }
+
+ if(emailValue == ""){
+ document.getElementById("emailErrorField").innerHTML = "Field blank"
+ return
}
+
let params = "shopId="+ shopId
if(emailValue=="") {
params += "&email=" + document.getElementById("emailAddress").value
@@ -33,7 +33,27 @@ function submit(shopId, email={"value":""}){
xhttp.onload = function() {
if (xhttp.readyState === 4 && xhttp.status === 200) {
var response = xhttp.responseText
- if (response == "success"){
+ if (response == "OK" || response == "USER REMOVED"){
+
+ if(email.parentElement.children[0].classList.contains("subtitle")){
+ email.parentElement.parentElement.remove()
+
+ }else{
+ document.getElementById("staffManagement").innerHTML+=
+ `<div id="staffManagement">
+ <div class="staffManagementContainer">
+ <p class="subtitle is-6" style="width:50%; margin-bottom: 0">${emailValue}</p>
+ <button class="button is-danger is-outlined" style="border-bottom: 1px solid"
+ onclick="submit(${document.getElementById("shopId").value},this);">
+ <span class="icon is-small">
+ <i class="fas fa-times is-danger"></i>
+ </span>
+ </button>
+ </div>
+ <p id="blackLine" class="subtitle is-6" style="border-bottom: 1px solid #00b89c; margin-bottom:1%; width:50%"></p>
+ </div>`
+ }
+
}else{
}
} else {
diff --git a/src/main/resources/templates/fragments/manageStaff.html b/src/main/resources/templates/fragments/manageStaff.html
index 0599fb1..4342cee 100644
--- a/src/main/resources/templates/fragments/manageStaff.html
+++ b/src/main/resources/templates/fragments/manageStaff.html
@@ -17,11 +17,12 @@
</span>
</button>
</div>
+ <p class="help is-danger" id="emailErrorField"></p>
<p><br>Current Admins</p>
<div id="staffManagement"></div>
<div id="staffManagement" th:each="user : ${staffMembers}">
<div class="staffManagementContainer">
- <p class="subtitle is-6" th:text="${user.userEmail}" style="width:50%; margin-bottom: 0"></p>
+ <p class="subtitle is-6" name="staffEmail" th:text="${user.userEmail}" style="width:50%; margin-bottom: 0"></p>
<button class="button is-danger is-outlined" style="border-bottom: 1px solid black" th:onclick="'submit('+${shop.shopId}+',this);'">
<span class="icon is-small">
<i class="fas fa-times is-danger"></i>
--
GitLab