Skip to content

Commit

Permalink
Minor improvements to the function
Browse files Browse the repository at this point in the history
  • Loading branch information
@BruhSusBruh
BruhSusBruh committed Jan 9, 2024
1 parent 76a6d11 commit 77cb49d
Show file tree
Hide file tree
Showing 2 changed files with 173 additions and 83 deletions.
218 changes: 154 additions & 64 deletions public/scripts/bug/bugDetail.js
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,67 @@
document.addEventListener("DOMContentLoaded", function () {
const bugId = getBugIdFromURL();
fetchAndDisplayBugDetails(bugId);

// Event listener to open the popup
document
.getElementById("assignDeveloperButton")
.addEventListener("click", showPopup);
});

function fetchAndDisplayBugDetails(bugId) {
axiosInstance
.get(`/api/bugs/${bugId}`)
.then(function (response) {
const bug = response.data;
updateBugUI(bug);
fetchAndDisplayDevelopers(bug.projectId);
console.log(bug.projectId);
const bugNameElement = document.querySelector("#name");
const saveStatusButton = document.querySelector("#saveStatus");
const descriptionElement = document.querySelector("#text");
const statusDropdown = document.querySelector("#status"); // Use this for dropdown
const currentStatus = document.querySelector("#status-level");
const reporterElement = document.querySelector("#reporter-name");
const assigneeElement = document.querySelector("#assignee-name");
const dateReportedElement = document.querySelector("#date");
const stepsElement = document.querySelector("#steps");
const deadlineElement = document.querySelector("#deadline");
const priorityElement = document.querySelector("#priority");
const severityElement = document.querySelector("#severity");

bugNameElement.textContent = bug.name;
descriptionElement.textContent = bug.description;
setStatusDropdown(statusDropdown, bug.status); // Set the current status in the dropdown
currentStatus.textContent = bug.status;
console.log(bug.status);
reporterElement.textContent = bug.reportedBy; // Replace with reporter's name if available
assigneeElement.textContent = bug.assignedTo; // Replace with assignee's name if available
dateReportedElement.textContent = new Date(
bug.reportTime
).toLocaleDateString();
stepsElement.textContent = bug.stepsToReproduce;
deadlineElement.textContent = new Date(bug.deadline).toLocaleDateString();
priorityElement.textContent = bug.priority;
severityElement.textContent = bug.severity;

// Event listener for the save button
saveStatusButton.addEventListener("click", function () {
const selectedStatus = statusDropdown.value;
const bugId = getBugIdFromURL(); // Assuming you have this function from your previous code
updateBugStatus(bugId, selectedStatus);
});

if (bug.resolvedTime) {
const resolvedElement = document.querySelector("#resolved");
resolvedElement.textContent = new Date(
bug.resolvedTime
).toLocaleDateString();
}
})
.catch(function (error) {
console.error("Error fetching bug details:", error);
// Optionally update the UI to inform the user
});
});
}

function updateBugUI(bug) {
const bugNameElement = document.querySelector("#name");
const saveStatusButton = document.querySelector("#saveStatus");
const descriptionElement = document.querySelector("#text");
const statusDropdown = document.querySelector("#status");
const currentStatus = document.querySelector("#status-level");
const reporterName = fetchUserName(bug.reportedBy);
const assigneeName = fetchUserName(bug.assignedTo);
const dateReportedElement = document.querySelector("#date");
const stepsElement = document.querySelector("#steps");
const deadlineElement = document.querySelector("#deadline");
const priorityElement = document.querySelector("#priority");
const severityElement = document.querySelector("#severity");

bugNameElement.textContent = bug.name;
descriptionElement.textContent = bug.description;
setStatusDropdown(statusDropdown, bug.status);
currentStatus.textContent = bug.status;
reporterElement.textContent = bug.reportedBy;
assigneeElement.textContent = bug.assignedTo;
dateReportedElement.textContent = new Date(
bug.reportTime
).toLocaleDateString();
stepsElement.textContent = bug.stepsToReproduce;
deadlineElement.textContent = new Date(bug.deadline).toLocaleDateString();
priorityElement.textContent = bug.priority;
severityElement.textContent = bug.severity;

if (bug.resolvedTime) {
const resolvedElement = document.querySelector("#resolved");
resolvedElement.textContent = new Date(
bug.resolvedTime
).toLocaleDateString();
}

saveStatusButton.addEventListener("click", function () {
const selectedStatus = statusDropdown.value;
updateBugStatus(bug._id, selectedStatus);
});
}

function setStatusDropdown(dropdown, currentStatus) {
const options = dropdown.options;
Expand Down Expand Up @@ -97,40 +105,122 @@ function showPopup() {
}

// Function to close the popup
document.getElementById("closePopup").addEventListener("click", function () {
function closePopup() {
document.getElementById("developerPopup").classList.add("hidden");
});
}

document.getElementById("closePopup").addEventListener("click", function () {});

let selectedDeveloperId = null; // Variable to store the selected developer's ID
let selectedDeveloperName = null;

// Function to fetch and display developers in the popup
async function fetchAndDisplayDevelopers(projectId) {
try {
const response = await axiosInstance.get(`/api/projects/dev/${projectId}`); // Adjust the API endpoint as needed
const response = await axiosInstance.get(`/api/projects/dev/${projectId}`);
const developers = response.data;
console.log(response.data);
const developerListElement = document.getElementById("developerList");
developerListElement.innerHTML = ""; // Clear existing list
developerListElement.innerHTML = "";

developers.forEach((developer) => {
const developerItem = document.createElement("div");
developerItem.className = "p-2 hover:bg-gray-100 cursor-pointer";
developerItem.textContent = developer.name; // Adjust according to your developer object structure
developerItem.onclick = () => assignDeveloper(developer._id); // Function to assign developer
developerListElement.appendChild(developerItem);
// Create radio button
const radioInput = document.createElement("input");
radioInput.type = "radio";
radioInput.id = developer._id;
radioInput.name = "developer";
radioInput.value = developer._id;
radioInput.classList.add("hidden", "peer");

// Create label
const developerLabel = document.createElement("label");
developerLabel.setAttribute("for", developer._id);
developerLabel.classList.add(
"inline-flex",
"items-center",
"justify-between",
"w-full",
"h-full",
"p-2",
"text-gray-500",
"bg-white",
"border-2",
"border-gray-200",
"rounded-lg",
"cursor-pointer",
"hover:text-gray-600",
"peer-checked:border-blue-600",
"peer-checked:text-gray-600",
"hover:bg-gray-50"
);

// Create content container
const contentDiv = document.createElement("div");
contentDiv.classList.add("block");

// Create name element
const nameElement = document.createElement("div");
nameElement.classList.add("w-full", "text-lg", "font-semibold");
nameElement.textContent = developer.name;

// Add elements to content container and label
contentDiv.appendChild(nameElement);
developerLabel.appendChild(contentDiv);
const labelDiv = document.createElement("div");
labelDiv.classList.add("w-full", "flex", "items-center", "h-full");
labelDiv.appendChild(radioInput);
labelDiv.appendChild(developerLabel);

// Add event listener for radio selection
radioInput.addEventListener("change", () => {
selectedDeveloperId = developer._id;
selectedDeveloperName = developer.name;
});

developerListElement.appendChild(labelDiv);
});
} catch (error) {
console.error("Error fetching developers:", error);
// Handle error
}
}

// Function to assign a developer to the bug
function assignDeveloper(developerId) {
const bugId = getBugIdFromURL(); // Function to get the current bug ID
document
.getElementById("confirmAssign")
.addEventListener("click", async () => {
if (!selectedDeveloperId) {
alert("Please select a developer first.");
return;
} else {
assignDeveloper(selectedDeveloperId, selectedDeveloperName);
}
});

async function assignDeveloper(developerId, developerName) {
const bugId = getBugIdFromURL(); // Function to get the current bug ID
try {
const response = await axiosInstance.patch(`/api/bugs/update/${bugId}`, {
assignedTo: developerId,
});
console.log("Developer assigned successfully!", response);
// Update the UI to reflect the new assignment
fetchAndDisplayDevelopers(bugId);
closePopup();
updateDevName(developerName);
} catch (error) {
console.error("Error assigning developer:", error);
// Handle error
}
}
}

// Event listener to open the popup
document
.getElementById("assignDeveloperButton")
.addEventListener("click", showPopup);
async function fetchUserName(userId) {
try {
const response = await axiosInstance.get(`/api/users/${userId}`);
return response.data.name; // Assuming the user object has a 'name' field
} catch (error) {
console.error("Error fetching user details:", error);
return "Unknown"; // Fallback name
}
}

// Add more functions as needed for assigning developers to the bug
function updateDevName(devName) {
const assigneeElement = document.querySelector("#assignee-name");
assigneeElement.textContent = devName;
}
38 changes: 19 additions & 19 deletions views/bugs/bugDetail.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,26 +68,26 @@
</button>
</div>

<!-- Popup Modal Content -->
<div id="developerPopup" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
<div class="mt-3 text-center">
<span id="closePopup" class="float-right cursor-pointer text-xl font-bold">&times;</span>
<h3 id="popupTitle" class="text-lg leading-6 font-medium text-gray-900">Assign Developer</h3>
<div class="mt-2 px-7 py-3">
<p id="popupBody" class="text-sm text-gray-500">Developers List:</p>
<div id="developerList" class="text-lg text-center">
<!-- Developer list will be populated here -->
</div>
</div>
<div class="items-center px-4 py-3">
<button id="confirmAssign" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300">
Assign
</button>
</div>
</div>
<!-- Popup Modal Content -->
<div id="developerPopup" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
<div class="mt-3 text-center">
<span id="closePopup" class="float-right cursor-pointer text-xl font-bold">&times;</span>
<h3 id="popupTitle" class="text-lg leading-6 font-medium text-gray-900">Assign Developer</h3>
<div class="mt-2 px-7 py-3">
<p id="popupBody" class="text-sm text-gray-500">Developers List:</p>
<div id="developerList" class="text-lg text-center">
<!-- Developer list will be populated here -->
</div>
</div>
<div class="items-center px-4 py-3">
<button id="confirmAssign" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300">
Assign
</button>
</div>
</div>
</div>
</div>
</div>

<div class="flex pb-5">
<h1 class="w-1/2">Priority</h1>
Expand Down

0 comments on commit 77cb49d

Please sign in to comment.