Added validation to tags field, no longer causes error due to blank input

src/main/java/com/example/clientproject/web/controllers/BusinessDetails.java

@@ -6,6 +6,7 @@ import com.example.clientproject.data.socials.Socials;
 import com.example.clientproject.data.socials.SocialsRepo;
 import com.example.clientproject.data.stampBoards.StampBoards;
 import com.example.clientproject.data.stampBoards.StampBoardsRepo;
+import com.example.clientproject.data.tags.Tags;
 import com.example.clientproject.data.userStampBoards.UserStampBoards;
 import com.example.clientproject.data.userStampBoards.UserStampBoardsRepo;
 import com.example.clientproject.data.users.Users;
@@ -90,9 +91,18 @@ public class BusinessDetails {
         UserStampPosOBJ.add(UserStampPos);
         model.addAttribute("UserStampPos", UserStampPosOBJ);
 
+        String tags = "Tags: ";
+        for(int i=0; i<shop.getShopTags().size(); i++){
+            if(i != shop.getShopTags().size()-1){
+                tags+=shop.getShopTags().get(i).getTagName() + ", ";
+            }else{
+                tags += shop.getShopTags().get(i).getTagName();
+            }
+        }
 
         //model.addAttribute("stampBoard", stampBoard);
         model.addAttribute("loggedInUser", user.get());
+        model.addAttribute("tags", tags);
         model.addAttribute("shop", shop);
         model.addAttribute("stampBoard", stampBoard);
         return "shopDetails.html";

src/main/resources/static/js/manageStaff.js

@@ -23,6 +23,8 @@ function submit(shopId, email={"value":""}){
         return
     }
 
+    document.getElementById("emailErrorField").innerHTML = ""
+
 
     let params = "shopId="+ shopId
     if(emailValue=="") {

src/main/resources/static/js/registerbusiness.js

@@ -214,6 +214,13 @@ function addTag(e){
     if(e.data=="," && tags.length != 20){
         let inputField = document.forms["businessForm"]["businessTagsInput"]
         let text = inputField.value.slice(0,-1);
+        if(text == ""){
+            document.getElementById("tagsHelp").innerHTML = "Tag cannot be blank"
+            document.getElementById("businessTagsInput").value = ""
+            return
+        }else{
+            document.getElementById("tagsHelp").innerHTML = ""
+        }
         document.getElementById("bulmaTags").innerHTML += `
         <div>
             <div class="control mr-3 mb-2">

src/main/resources/templates/registerbusiness.html

@@ -75,10 +75,16 @@
                             </div>
                         </div>
                         <h5 class="title is-5 mt-2" style="text-align:center; margin-bottom: 2%">Add tags that describe your business</h5>
-                        <div class="is-flex is-justify-content-center" style="width:100%;">
+                        <p class="subtitle is-6 mt-1" style="text-align: center">Press comma after typing the tag</p>
+                        <div class="is-flex is-justify-content-center">
                             <!-- Need to fix this, shouldn't be full width of modal -->
-                            <input id="businessTagsInput" maxlength="50" style="width:75%;" class="input" oninput="addTag(event)"></input>
+                            <div class="is-flex is-flex-direction-column is-justify-content-center is-align-content-center"
+                            style="width:75%">
+                                <input id="businessTagsInput" maxlength="50" class="input" oninput="addTag(event)"></input>
+                                <p class="help is-danger" style="text-align: center" id="tagsHelp"></p>
+                            </div>
                             <input hidden name="businessTags" id="businessTags"/>
+
                         </div>
                         <div class = "field is-grouped is-grouped-multiline p-4" id="bulmaTags">
                             <div id="tagCount" style="display: none" class="mr-3">

src/main/resources/templates/shopDetails.html

@@ -119,6 +119,7 @@
               </div>
             </div>
           <div class="content" style="margin-left: 1rem" th:text="${shop.shopDescription}"></div>
+          <div style="margin-left: 1rem" th:text="${tags}"></div>
           <footer class="card-footer">
             <a th:href="${shop.shopWebsite}"><p class="card-footer-item websiteLinkText">Click for website<a></a>
           </footer>