gui: Update add/create Skill,fSS.js, config

src/main/resources/config/application.yaml

@@ -20,7 +20,7 @@ spring:
     show-sql: true
     properties:
       hibernate:
-        dialect: org.hibernate.dialect.H2Dialect
+    open-in-view: true # Enable/Disable OpenEntityManagerInViewInterceptor
 
   thymeleaf:
     prefix: "classpath:/templates/" # Path where Thymeleaf templates are stored

src/main/resources/static/js/skills/fetchSecondarySkills.js

@@ -1,6 +1,6 @@
 /**
  * @fileoverview Handles the dynamic population of secondary skills dropdown based on primary skill selection
- * @version 4.1.0
+ * @version 4.2.0
  */
 
 /**
@@ -59,7 +59,7 @@ function showTemporaryMessage(message, type, duration = 5000, container) {
  * @param {HTMLSelectElement} selectElement - The secondary skills select element
  */
 function updateSecondarySkillsDropdown(secondarySkills, selectElement) {
-  selectElement.innerHTML = ""; // Clear existing options
+  selectElement.innerHTML = "";
 
   if (!secondarySkills || secondarySkills.length === 0) {
     selectElement.appendChild(
@@ -103,73 +103,83 @@ function initializeSkillsDropdowns() {
   }
 
   secondarySkillSelect.disabled = true;
+}
 
-  primarySkillSelect.addEventListener("change", async function () {
+async function fetchSecondarySkills() {
-    const selectedPrimarySkillId = this.value;
+  const primarySkillSelect = document.getElementById("primarySkill");
+  const secondarySkillSelect = document.getElementById("secondarySkill");
+  const selectedPrimarySkillId = primarySkillSelect.value;
+
+  if (!selectedPrimarySkillId) {
     secondarySkillSelect.innerHTML = "";
     secondarySkillSelect.appendChild(
       createOption("Select a secondary skill", true, true)
     );
+    secondarySkillSelect.disabled = true;
+    return;
+  }
 
-    if (!selectedPrimarySkillId) {
+  secondarySkillSelect.innerHTML = "";
-      secondarySkillSelect.disabled = true;
+  secondarySkillSelect.appendChild(createOption("Loading...", true, true));
-      return;
+
+  try {
+    const response = await fetch(
+      `/api/secondary-skill/from-primary-skill?psid=${selectedPrimarySkillId}`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+      }
+    );
+
+    if (!response.ok) {
+      const errorMessage = `Server returned ${response.status}: ${response.statusText}`;
+      throw new Error(errorMessage);
     }
 
-    secondarySkillSelect.innerHTML = "";
+    const responseText = await response.text();
-    secondarySkillSelect.appendChild(createOption("Loading...", true, true));
+    console.log("Response Text:", responseText);
 
+    let secondarySkills;
     try {
-      const response = await fetch(
+      secondarySkills = JSON.parse(responseText);
-        `/api/skills/secondary/${selectedPrimarySkillId}`,
+    } catch (jsonError) {
-        {
+      throw new Error(`Failed to parse JSON: ${jsonError.message}`);
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        }
-      );
-
-      if (!response.ok) {
-        const errorMessage = `Server returned ${response.status}: ${response.statusText}`;
-        throw new Error(errorMessage);
-      }
-
-      const secondarySkills = await response.json();
-      updateSecondarySkillsDropdown(secondarySkills, secondarySkillSelect);
-    } catch (error) {
-      console.error("Error fetching secondary skills:", error);
-      secondarySkillSelect.innerHTML = "";
-      secondarySkillSelect.appendChild(
-        createOption("Error loading secondary skills", true, true)
-      );
-      secondarySkillSelect.disabled = true;
-
-      let userMessage = "";
-      if (error.name === "TypeError" && !window.navigator.onLine) {
-        userMessage =
-          "No internet connection. Please check your network and try again.";
-      } else if (error.message.includes("Server returned 404")) {
-        userMessage =
-          "The selected primary skill was not found. Please refresh and try again.";
-      } else if (error.message.includes("Server returned 500")) {
-        userMessage =
-          "Server error occurred. Please try again in a few minutes.";
-      } else if (error.message.includes("Server returned 403")) {
-        userMessage =
-          "You don't have permission to access these skills. Please contact support.";
-      } else {
-        userMessage = `Failed to load secondary skills: ${error.message}`;
-      }
-
-      showTemporaryMessage(
-        userMessage,
-        "error",
-        5000,
-        secondarySkillSelect.parentNode
-      );
     }
-  });
+
+    updateSecondarySkillsDropdown(secondarySkills, secondarySkillSelect);
+  } catch (error) {
+    console.error("Error fetching secondary skills:", error);
+    secondarySkillSelect.innerHTML = "";
+    secondarySkillSelect.appendChild(
+      createOption("Error loading secondary skills", true, true)
+    );
+    secondarySkillSelect.disabled = true;
+
+    let userMessage = "";
+    if (error.name === "TypeError" && !window.navigator.onLine) {
+      userMessage =
+        "No internet connection. Please check your network and try again.";
+    } else if (error.message.includes("Server returned 404")) {
+      userMessage =
+        "The selected primary skill was not found. Please refresh and try again.";
+    } else if (error.message.includes("Server returned 500")) {
+      userMessage = "Server error occurred. Please try again in a few minutes.";
+    } else if (error.message.includes("Server returned 403")) {
+      userMessage =
+        "You don't have permission to access these skills. Please contact support.";
+    } else {
+      userMessage = `Failed to load secondary skills: ${error.message}`;
+    }
+    showTemporaryMessage(
+      userMessage,
+      "error",
+      5000,
+      secondarySkillSelect.parentNode
+    );
+  }
 }
 
 document.addEventListener("DOMContentLoaded", initializeSkillsDropdowns);

src/main/resources/templates/pages/skills/add.html

@@ -20,8 +20,8 @@
       <div class="content container mt-4">
         <h2 class="mb-4">Add Skill</h2>
         <form
-          th:action="@{/skills/add}"
+          th:action="@{/api/employee/skill/prototype}"
-          th:object="${skillProtoype}"
+          th:object="${skillPrototype}"
           method="post"
           class="project-card"
         >
@@ -31,9 +31,10 @@
               <label for="primarySkill">Primary Skill</label>
               <select
                 id="primarySkill"
-                name="primarySkillId"
+                name="psid"
                 class="form-control"
-                th:field="*{primarySkillId}"
+                th:field="*{psid}"
+                onchange="fetchSecondarySkills()"
               >
                 <option value="" disabled selected>
                   Select a primary skill
@@ -50,9 +51,9 @@
               <label for="secondarySkill">Secondary Skill</label>
               <select
                 id="secondarySkill"
-                name="secondarySkillId"
+                name="ssid"
                 class="form-control"
-                th:field="*{secondarySkillId}"
+                th:field="*{ssid}"
               >
                 <option value="" disabled selected>
                   Select a secondary skill

src/main/resources/templates/pages/skills/create.html

@@ -10,43 +10,53 @@
   </head>
   <body>
     <div class="wrapper">
-      <div
+      <div th:replace="~{/core/_header :: header(activePage='createSkill')}"></div>
-        th:replace="~{/core/_header :: header(activePage=${createSkill})}"
-      ></div>
       <div class="content container mt-4">
         <h2 class="mb-4">Create Skill</h2>
         <form
           th:action="@{/skills/save}"
-          th:object="${secondarySkill}"
+          th:object="${skillPrototype}"
           method="post"
           class="project-card"
         >
           <div class="card-body">
+            <!-- Primary Skill Input -->
             <div class="form-group">
               <label for="primarySkill">Primary Skill:</label>
               <input
                 type="text"
                 id="primarySkill"
-                th:field="*{primarySkill.description}"
+                th:field="*{psid}"
                 class="form-control"
                 required
               />
             </div>
+            <!-- Secondary Skill Input -->
             <div class="form-group">
               <label for="secondarySkill">Secondary Skill:</label>
               <input
                 type="text"
                 id="secondarySkill"
-                th:field="*{description}"
+                th:field="*{ssid}"
                 class="form-control"
                 required
               />
             </div>
+            <!-- Skill Level Input -->
             <div class="form-group">
-              <button type="submit" class="btn-create-project">
+              <label for="level">Skill Level:</label>
-                Save Skill
+              <input
-              </button>
+                type="number"
+                id="level"
+                th:field="*{level}"
+                class="form-control"
+                min="1"
+                max="5"
+                required
+              />
             </div>
+            <!-- Submit Button -->
+            <button type="submit" class="btn-create-project">Create Skill</button>
           </div>
         </form>
       </div>

src/main/resources/templates/pages/skills/overview.html

@@ -10,9 +10,9 @@
   </head>
   <body>
     <div class="wrapper">
-      <div th:replace="~{/core/_header :: header(activePage=${skills})}"></div>
+      <div th:replace="~{/core/_header :: header(activePage='skills')}"></div>
       <div class="content container mt-4">
-        <h2 class="mb-4">Profil</h2>
+        <h2 class="mb-4">Profile</h2>
         <div class="project-card mb-4">
           <div class="card-body">
             <p>