Scribd
Upload
8 views3 pages

Sidebar

The document is an HTML code for a Task Manager interface that includes a dropdown for selecting assignees, input fields for task details, and a submission button. It features JavaScript functions to load assignees, toggle the dropdown, update selected assignees, clear the form, and submit the task. The form requires fields such as task name, assigned to, status, assigned by, timeline, and approval requirement.

Uploaded by

apoorv
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
8 views3 pages

Sidebar

The document is an HTML code for a Task Manager interface that includes a dropdown for selecting assignees, input fields for task details, and a submission button. It features JavaScript functions to load assignees, toggle the dropdown, update selected assignees, clear the form, and submit the task. The form requires fields such as task name, assigned to, status, assigned by, timeline, and approval requirement.

Uploaded by

apoorv
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
.dropdown-container {
position: relative;
display: inline-block;
width: 100%;
}

.dropdown-btn {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
background: white;
text-align: left;
cursor: pointer;
}

.dropdown-list {
display: none;
position: absolute;
width: 100%;
border: 1px solid #ccc;
background: white;
max-height: 150px;
overflow-y: auto;
z-index: 1000;
}

.dropdown-list label {
display: block;
padding: 5px;
cursor: pointer;
}

.dropdown-list label:hover {
background: #f0f0f0;
}
</style>

<script>
function loadAssignees() {
google.script.run.withSuccessHandler(function(names) {
let dropdownList = document.getElementById("dropdown-list");
dropdownList.innerHTML = ""; // Clear existing options

names.forEach(name => {
let label = document.createElement("label");
let checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.value = name;
checkbox.onclick = updateSelectedAssignees;

label.appendChild(checkbox);
label.appendChild(document.createTextNode(" " + name));
dropdownList.appendChild(label);
});
}).getAssignees();
}

function toggleDropdown() {
let dropdown = document.getElementById("dropdown-list");
dropdown.style.display = dropdown.style.display === "block" ? "none" :
"block";
}

function updateSelectedAssignees() {
let checkboxes = document.querySelectorAll("#dropdown-list
input[type=checkbox]:checked");
let selectedNames = Array.from(checkboxes).map(cb => cb.value);
document.getElementById("assignedTo").value = selectedNames.join(", ");
}

function clearForm() {
document.getElementById("taskName").value = "";
document.getElementById("assignedTo").value = "";
document.querySelectorAll("#dropdown-list input[type=checkbox]").forEach(cb
=> cb.checked = false);
document.getElementById("status").value = "Pending";
document.getElementById("assignedBy").value = "";
document.getElementById("timeline").value = "";
document.getElementById("approvalReq").value = "No";
}

function submitTask() {
let taskName = document.getElementById("taskName").value;

let assignedTo = Array.from(document.querySelectorAll("#dropdown-list


input[type=checkbox]:checked"))
.map(cb => cb.value);

let status = document.getElementById("status").value;


let assignedBy = document.getElementById("assignedBy").value;
let timeline = document.getElementById("timeline").value;
let approvalReq = document.getElementById("approvalReq").value;

if (!taskName || assignedTo.length === 0 || !assignedBy || !timeline) {


alert("Please fill all required fields.");
return;
}

google.script.run.addTaskToSheet(taskName, assignedTo, status, assignedBy,


timeline, approvalReq);

// Clear the form after submission


clearForm();
}

window.onload = loadAssignees;
</script>
</head>
<body>
<h2>Task Manager</h2>

<label for="taskName">Task Name:</label>


<input type="text" id="taskName" required><br><br>
<label for="assignedTo">Assigned To:</label>
<div class="dropdown-container">
<input type="text" id="assignedTo" class="dropdown-btn" readonly
onclick="toggleDropdown()" placeholder="Select assignees">
<div id="dropdown-list" class="dropdown-list"></div>
</div>
<br><br>

<label for="status">Status:</label>
<select id="status">
<option value="Pending">Pending</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
</select><br><br>

<label for="assignedBy">Assigned By:</label>


<input type="text" id="assignedBy" required><br><br>

<label for="timeline">Timeline:</label>
<input type="date" id="timeline" required><br><br>

<label for="approvalReq">Approval Required:</label>


<select id="approvalReq">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select><br><br>

<button onclick="submitTask()">Add Task</button>


</body>
</html>

You might also like