2021323
/
Backend
1
0
Fork 0
Code Pull Requests Activity

Merge pull request 'gui: Update add/create Skill,fSS.js, config' (#96) from 2021323/Backend:restfull into restfull 

Reviewed-on: Maradona/Backend#96
pull/1/head
Piotr Jakubiak 2024-11-12 13:04:15 +01:00
parent 90f68a504e a5bb3e5681
commit a875854241
5 changed files with 97 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/resources/config/application.yaml
View File

@ -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

126
src/main/resources/static/js/skills/fetchSecondarySkills.js
View File

@ -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 () {
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)
);
secondarySkillSelect.disabled = true;
return;
}
if (!selectedPrimarySkillId) {
secondarySkillSelect.disabled = true;
return;
secondarySkillSelect.innerHTML = "";
secondarySkillSelect.appendChild(createOption("Loading...", true, true));
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 = "";
secondarySkillSelect.appendChild(createOption("Loading...", true, true));
const responseText = await response.text();
console.log("Response Text:", responseText);
let secondarySkills;
try {
const response = await fetch(
`/api/skills/secondary/${selectedPrimarySkillId}`,
{
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
);
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);
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);

13
src/main/resources/templates/pages/skills/add.html
View File

@ -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

28
src/main/resources/templates/pages/skills/create.html
View File

@ -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>

4
src/main/resources/templates/pages/skills/overview.html
View File

@ -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>