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,15 +103,18 @@ function initializeSkillsDropdowns() {
   }
 
   secondarySkillSelect.disabled = true;
+}
 
-  primarySkillSelect.addEventListener("change", async function () {
-    const selectedPrimarySkillId = this.value;
+async function fetchSecondarySkills() {
+  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)
     );
-
-    if (!selectedPrimarySkillId) {
     secondarySkillSelect.disabled = true;
     return;
   }
@@ -121,11 +124,12 @@ function initializeSkillsDropdowns() {
 
   try {
     const response = await fetch(
-        `/api/skills/secondary/${selectedPrimarySkillId}`,
+      `/api/secondary-skill/from-primary-skill?psid=${selectedPrimarySkillId}`,
       {
         method: "GET",
         headers: {
           "Content-Type": "application/json",
+          Accept: "application/json",
         },
       }
     );
@@ -135,7 +139,16 @@ function initializeSkillsDropdowns() {
       throw new Error(errorMessage);
     }
 
-      const secondarySkills = await response.json();
+    const responseText = await response.text();
+    console.log("Response Text:", responseText);
+
+    let secondarySkills;
+    try {
+      secondarySkills = JSON.parse(responseText);
+    } catch (jsonError) {
+      throw new Error(`Failed to parse JSON: ${jsonError.message}`);
+    }
+
     updateSecondarySkillsDropdown(secondarySkills, secondarySkillSelect);
   } catch (error) {
     console.error("Error fetching secondary skills:", error);
@@ -153,15 +166,13 @@ function initializeSkillsDropdowns() {
       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.";
+      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",
@@ -169,7 +180,6 @@ function initializeSkillsDropdowns() {
       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:object="${skillProtoype}"
+          th:action="@{/api/employee/skill/prototype}"
+          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
-        th:replace="~{/core/_header :: header(activePage=${createSkill})}"
-      ></div>
+      <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">
-                Save Skill
-              </button>
+              <label for="level">Skill Level:</label>
+              <input
+                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>