Merge pull request 'feat : Clickable level stars' (#31) from 3002833/Backend:main into main

Reviewed-on: Maradona/Backend#31

src/main/java/com/maradona/backend/controllers/SkillsController.java

@@ -142,4 +142,23 @@ public class SkillsController {
     }
     return "redirect:/skills";
   }
+
+  // Update skill level
+  @PostMapping("/update-level")
+  public String updateLevel(@RequestParam Long skillId, @RequestParam Integer level) {
+    var employee = employeeService.getEmployeeById(user).orElseThrow(() -> new RuntimeException("Employee not found"));
+    var secondarySkill = secondarySkillService.getSecondarySkillById(skillId)
+        .orElseThrow(() -> new RuntimeException("Secondary Skill not found"));
+
+    for (EmployeeSecondarySkill ess : employee.getSecondarySkills()) {
+      if (ess.getSecondarySkill().getSsid().equals(skillId)) {
+        ess.setLevel(level);
+        break;
+      }
+    }
+
+    employeeService.saveEmployee(employee);
+
+    return "redirect:/skills";
+  }
 }

src/main/resources/static/projects.css

@@ -2,29 +2,14 @@
   background-color: var(--cosmic-dark-dark);
   color: var(--starlight-white-lighter);
   border: 1px solid var(--cosmic-dark-medium);
-  border-radius: 8px;
-  padding: 20px;
+  border-radius: 5px;
+  padding: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  transition: transform 0.2s;
-}
-
-.project-card:hover {
-  transform: translateY(-5px);
 }
 
 .project-card .card-title {
   color: var(--starlight-white-lighter);
-  margin-bottom: 15px;
-}
-
-.project-card .card-details {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.project-card .card-text {
-  margin-bottom: 0;
+  margin-bottom: 10px;
 }
 
 .btn-create-project {
@@ -38,7 +23,7 @@
   background-color: var(--aurora-yellowgreen-lighter);
   border: none;
   border-radius: 4px;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 }
 
 .btn-create-project:hover {

src/main/resources/static/skills.css

@@ -2,14 +2,8 @@
   background-color: var(--cosmic-dark-dark);
   color: var(--starlight-white-lighter);
   border: 1px solid var(--cosmic-dark-medium);
-  border-radius: 8px;
-  padding: 10px;
+  border-radius: 5px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  transition: transform 0.2s;
-}
-
-.project-card:hover {
-  transform: translateY(-5px);
 }
 
 .project-card .card-title {
@@ -17,19 +11,14 @@
   margin-bottom: 15px;
 }
 
-.project-card .card-details {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
 .project-card .card-text {
   margin-bottom: 0;
 }
 
 .project-card .card-text .star {
-  color: var(--aurora-yellowgreen-lighter);
-  margin-right: 5px;
+  background-color: transparent;
+  border: none;
+  font-size: 25px;
 }
 
 .btn-create-project {
@@ -52,7 +41,7 @@
 
 .btn-delete {
   display: inline-block;
-  padding: 10px 20px;
+  padding: 3px 10px;
   font-size: 16px;
   cursor: pointer;
   text-align: center;
@@ -68,7 +57,7 @@
 }
 
 .form-control {
-  background-color: var(--cosmic-dark-light);
+  background-color: var(--starlight-white-lighter);
   color: var(--starlight-white-lighter);
   border: 1px solid var(--cosmic-dark-medium);
   border-radius: 4px;
@@ -85,5 +74,5 @@
 }
 
 .star-empty {
-  color: var(--cosmic-dark-light);
+  color: var(--cosmic-dark-light) !important;
 }

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

@@ -11,7 +11,12 @@
       <div th:replace="~{_header :: header(activePage=${skills})}"></div>
       <div class="content container mt-4">
         <h2 class="mb-4">Add Skill</h2>
-        <form th:action="@{/skills/add}" th:object="${skillForm}" method="post">
+        <form
+          th:action="@{/skills/add}"
+          th:object="${skillForm}"
+          method="post"
+          class="project-card"
+        >
           <div class="form-group">
             <label for="primarySkill">Primary Skill</label>
             <select
@@ -55,7 +60,7 @@
               ></option>
             </select>
           </div>
-          <button type="submit" class="btn btn-primary">Add Skill</button>
+          <button type="submit" class="btn-create-project">Add Skill</button>
         </form>
       </div>
       <div th:replace="~{_footer :: footer}"></div>

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

@@ -3,7 +3,7 @@
   <head>
     <div th:replace="~{_metadata :: metadata}"></div>
     <title>Create Skill</title>
-    <link rel="stylesheet" href="/projects.css" />
+    <link rel="stylesheet" href="/skills.css" />
   </head>
   <body>
     <div class="wrapper">

src/main/resources/templates/skills.html

@@ -49,11 +49,30 @@
                           >Secondary Skill</span
                         >
                         <span class="stars">
-                          <span
-                            th:each="i : ${#numbers.sequence(1, 5)}"
-                            th:classappend="${i <= pair.second} ? 'star-filled' : 'star-empty'"
-                          >
-                            &#9733;
+                          <span th:each="i : ${#numbers.sequence(1, 5)}">
+                            <form
+                              th:action="@{/skills/update-level}"
+                              method="post"
+                              class="d-inline"
+                            >
+                              <input
+                                type="hidden"
+                                name="skillId"
+                                th:value="${pair.first.ssid}"
+                              />
+                              <input
+                                type="hidden"
+                                name="level"
+                                th:value="${i}"
+                              />
+                              <button
+                                type="submit"
+                                th:classappend="${i <= pair.second} ? 'star-filled' : 'star-empty'"
+                                class="star"
+                              >
+                                &#9733;
+                              </button>
+                            </form>
                           </span>
                         </span>
                         <form