Skip to content

Commit 35dcdf1

Browse files
BOSS294BOSS294
committed
# Commit: Add Dynamic Task Management to "Manage Tasks" Page
## Summary Implemented functionality to dynamically fetch, render, and manage tasks on the "Manage Tasks" page using real-time interactions with the backend. ## Features ### 1. Fetch and Render Tasks - Created an `async fetchTasks` function to fetch tasks from the database using a GET request. - Rendered tasks dynamically with a `renderTasks` function, displaying: - Task Priority - Task Information (ID, Name, Assigned To, Status, Due Date) - Action Buttons (View Details, Update Status, Remove Task). ### 2. Button Actions #### **View Details** - Added a fetch request to retrieve task details by Task ID. - Placeholder functionality for displaying details in a popup/modal. #### **Update Status** - Added a PATCH request to update task statuses: - Status transitions: `Active → Currently Working → Closed` or `Due → Currently Working → Closed`. - Dynamically updated status without page reloads. #### **Remove Task** - Added a DELETE request to remove a task by Task ID. - Automatically refreshes the page on successful deletion. ### 3. Dynamic Event Binding - Created an `attachButtonEvents` function to dynamically bind event listeners to: - "View Details" buttons. - "Update Status" buttons. - "Remove Task" buttons. ### 4. Dynamic Styling - Added class-based styling for: - Priority Labels: `low-priority`, `medium-priority`, `high-priority`. - Status Labels: `active`, `currently-working`, `closed`. - Designed visually appealing task cards for better user experience. ## Notes - Improved modularity by isolating reusable functions and separating data fetching from rendering. - Ensured real-time interaction with backend for all task operations. - Prepared for future UI enhancements, such as modal-based task details. ## Impact This update enables efficient task management by allowing dynamic interactions, improving the user experience, and ensuring scalability. # Commit: Update API for Task Management with Enhanced Features ## Summary Enhanced the task management API to handle fetching, deleting, and updating task statuses efficiently. The updates ensure better error handling, improved performance, and flexibility for frontend integrations. --- ## Updates and Features ### 1. **GET Request: Fetch Tasks** - **Endpoint**: `/add-get-tasks.php?action=fetch` - **Functionality**: Retrieves all tasks from the `Tasks` table, ordered by the `CreatedAt` field in descending order. - **Response**: - Success: Returns all tasks as an array. - Failure: Returns an error message if no tasks are found or a database error occurs. --- ### 2. **DELETE Request: Remove Tasks** - **Endpoint**: `/add-get-tasks.php?action=delete` - **Functionality**: - Deletes a specific task identified by its `TID`. - Sanitized `TID` input with `htmlspecialchars` to enhance security. - **Response**: - Success: Confirms task deletion with a success message. - Failure: Returns a descriptive error message for invalid `TID` or database errors. --- ### 3. **Task Status Update (PATCH/DELETE)** - **Endpoint**: `/add-get-tasks.php?action=update_status` - **Functionality**: - Fetches the current `TaskStatus` for the task identified by its `TID`. - Updates the status to the next logical step: - `Active → Currently Working` - `Currently Working → Closed` - `Due → Currently Working` - `Closed` remains unchanged. - Handles invalid statuses gracefully. - **Response**: - Success: Confirms the update and returns the new status. - Failure: Provides error details if the task is not found or a database error occurs. --- ### 4. **Error Handling** - Added robust error handling for: - Database connection issues. - Missing or invalid `TID`. - Unsupported actions or HTTP methods. - Returns clear, actionable error messages in JSON format. --- ### 5. **Code Improvements** - Ensured input sanitization using `htmlspecialchars` to prevent XSS vulnerabilities. - Optimized queries with parameterized bindings to prevent SQL injection. - Used PHP's `match` expression for concise status updates. --- ## Impact - Improved security by validating and sanitizing inputs. - Enhanced the API’s flexibility, making it easier for the frontend to integrate dynamic task management features. - Ensured scalability by implementing logical status transitions and error-proof task deletions.
1 parent 64959ff commit 35dcdf1

4 files changed

Lines changed: 259 additions & 81 deletions

File tree

‎Assets/Contents/Pages/DM-AMT004.php‎

Lines changed: 126 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -394,28 +394,7 @@
394394
<button class="check-tasks">Remove Task</button>
395395
</div>
396396
</div>
397-
<div class="task-card">
398-
<div class="priority-label medium-priority">medium</div>
399-
<div class="task-info">
400-
<div>
401-
<h3 class="doc-id">DOC#122</h3>
402-
<p>
403-
Task: <span class="task-name">Task 1</span>
404-
</p>
405-
<p>For Client: Client Name</p>
406-
<p>
407-
Status:
408-
<span class="status-label working">Working</span>
409-
</p>
410-
<p>Due Date: 01/01/2025</p>
411-
</div>
412-
</div>
413-
<div class="task-buttons">
414-
<button class="view-details">Task Details</button>
415-
<button class="update-task">Update Status</button>
416-
<button class="check-tasks">Remove Task</button>
417-
</div>
418-
</div>
397+
419398
420399
</div>
421400
@@ -562,5 +541,130 @@ function displayError(message) {
562541
}
563542
564543
fetchClients();
544+
// Function to fetch tasks from the backend
545+
async function fetchTasks() {
546+
try {
547+
const response = await fetch('https://vanshthakur.online/Assets/Processors/add-get-tasks.php?action=fetch');
548+
const data = await response.json();
549+
550+
if (data.success) {
551+
renderTasks(data.data);
552+
} else {
553+
console.error(data.message);
554+
}
555+
} catch (error) {
556+
console.error('Error fetching tasks:', error);
557+
}
558+
}
559+
560+
561+
function renderTasks(tasks) {
562+
const wrapper = document.querySelector('.task-cards-wrapper');
563+
wrapper.innerHTML = '';
564+
565+
tasks.forEach(task => {
566+
const card = document.createElement('div');
567+
card.className = 'task-card';
568+
569+
card.innerHTML = `
570+
<div class="priority-label ${task.Priority.toLowerCase()}-priority">${task.Priority}</div>
571+
<div class="task-info">
572+
<div>
573+
<h3 class="doc-id">${task.TID}</h3>
574+
<p>
575+
Task: <span class="task-name">${task.TaskName}</span>
576+
</p>
577+
<p>For Client: ${task.AssignTo}</p>
578+
<p>
579+
Status:
580+
<span class="status-label ${task.TaskStatus.toLowerCase().replace(' ', '-')}"">${task.TaskStatus}</span>
581+
</p>
582+
<p>Due Date: ${task.DueDate || 'N/A'}</p>
583+
</div>
584+
</div>
585+
<div class="task-buttons">
586+
<button class="view-details" data-tid="${task.TID}">Task Details</button>
587+
<button class="update-task" data-tid="${task.TID}">Update Status</button>
588+
<button class="check-tasks" data-tid="${task.TID}">Remove Task</button>
589+
</div>
590+
`;
591+
592+
wrapper.appendChild(card);
593+
});
594+
595+
attachButtonEvents(); // Attach event listeners to the buttons
596+
}
597+
598+
// Function to handle button actions
599+
function attachButtonEvents() {
600+
document.querySelectorAll('.view-details').forEach(button => {
601+
button.addEventListener('click', () => {
602+
const tid = button.getAttribute('data-tid');
603+
console.log('View details for:', tid);
604+
// Fetch and display the task details using the TID
605+
fetch(`https://vanshthakur.online/Assets/Processors/add-get-tasks.php?tid=${tid}&action=view`)
606+
.then(response => response.json())
607+
.then(data => {
608+
if (data.success) {
609+
console.log('Task Details:', data.data);
610+
// Add functionality to display task details in a popup/modal
611+
} else {
612+
console.error('Error fetching task details:', data.message);
613+
}
614+
})
615+
.catch(error => console.error('Error:', error));
616+
});
617+
});
618+
619+
document.querySelectorAll('.update-task').forEach(button => {
620+
button.addEventListener('click', () => {
621+
const tid = button.getAttribute('data-tid');
622+
console.log('Update task for:', tid);
623+
fetch('https://vanshthakur.online/Assets/Processors/add-get-tasks.php', {
624+
method: 'PATCH',
625+
headers: { 'Content-Type': 'application/json' },
626+
body: JSON.stringify({ tid, action: 'updateStatus' }),
627+
})
628+
.then(response => response.json())
629+
.then(data => {
630+
if (data.success) {
631+
console.log('Task status updated:', data.message);
632+
attachButtonEvents();
633+
} else {
634+
console.error('Error updating task:', data.message);
635+
}
636+
})
637+
.catch(error => console.error('Error:', error));
638+
});
639+
});
640+
641+
document.querySelectorAll('.check-tasks').forEach(button => {
642+
button.addEventListener('click', () => {
643+
const tid = button.getAttribute('data-tid');
644+
console.log('Remove task for:', tid);
645+
fetch('https://vanshthakur.online/Assets/Processors/add-get-tasks.php', {
646+
method: 'DELETE',
647+
headers: { 'Content-Type': 'application/json' },
648+
body: JSON.stringify({ tid }),
649+
})
650+
.then(response => response.json())
651+
.then(data => {
652+
if (data.success) {
653+
console.log('Task removed successfully:', data.message);
654+
// Refresh the page after successful deletion
655+
location.reload();
656+
} else {
657+
console.error('Error removing task:', data.message);
658+
}
659+
})
660+
.catch(error => console.error('Error:', error));
661+
});
662+
});
663+
664+
}
665+
666+
667+
document.addEventListener('DOMContentLoaded', fetchTasks);
668+
565669
</script>
566670
</body>

‎Assets/Contents/Pages/DM-CMG002.php‎

Lines changed: 50 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -95,61 +95,76 @@
9595
color: #b0b0b0;
9696
}
9797
98-
.client-card .client-buttons button {
99-
padding: 8px;
100-
font-size: 0.8rem;
98+
.client-card .task-buttons {
99+
display: flex;
100+
gap: 12px;
101+
margin-top: 15px;
102+
}
103+
104+
.client-card .task-buttons button {
105+
flex: 1;
106+
padding: 9px 9px;
107+
font-size: 0.6rem;
108+
font-weight: bolder;
101109
color: #fff;
102110
border: none;
103-
border-radius: 5px;
111+
border-radius: 8px;
104112
cursor: pointer;
105-
transition: background-color 0.3s ease, transform 0.1s ease;
113+
transition: all 0.3s ease;
114+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
115+
text-transform: uppercase;
116+
letter-spacing: 0.5px;
106117
}
107118
108-
.client-card .client-buttons button.view-details {
109-
background-color: #28a745;
119+
.client-card .task-buttons button.view-details {
120+
background-color: #2d6a4f;
110121
}
111122
112-
.client-card .client-buttons button.update-balance {
113-
background-color: #ffc107;
123+
.client-card .task-buttons button.update-task {
124+
background-color: #b35c00;
114125
}
115126
116-
.client-card .client-buttons button.check-tasks {
117-
background-color: #dc3545;
127+
.client-card .task-buttons button.check-tasks {
128+
background-color: #8b0000;
118129
}
119130
120-
.client-card .client-buttons button:hover {
121-
transform: scale(1.05);
131+
.client-card .task-buttons button:hover {
132+
transform: translateY(-3px);
133+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
122134
}
123135
124-
.client-card .client-buttons button:active {
136+
.client-card .task-buttons button:active {
125137
transform: scale(0.95);
138+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
139+
filter: brightness(0.9);
126140
}
127141
128-
.client-card .client-buttons button.view-details:hover {
129-
background-color: #218838;
142+
.client-card .task-buttons button.view-details:hover {
143+
background-color: #1b4332;
130144
}
131145
132-
.client-card .client-buttons button.update-balance:hover {
133-
background-color: #e0a800;
146+
.client-card .task-buttons button.update-task:hover {
147+
background-color: #924800;
134148
}
135149
136-
.client-card .client-buttons button.check-tasks:hover {
137-
background-color: #c82333;
150+
.client-card .task-buttons button.check-tasks:hover {
151+
background-color: #610000;
138152
}
139153
140-
.client-card .client-buttons button.view-details:active {
141-
background-color: #1e7e34;
154+
.client-card .task-buttons button.view-details:active {
155+
background-color: #144025;
142156
}
143157
144-
.client-card .client-buttons button.update-balance:active {
145-
background-color: #d39e00;
158+
.client-card .task-buttons button.update-task:active {
159+
background-color: #723600;
146160
}
147161
148-
.client-card .client-buttons button.check-tasks:active {
149-
background-color: #bd2130;
162+
.client-card .task-buttons button.check-tasks:active {
163+
background-color: #4b0000;
150164
}
151165
152166
167+
153168
@media (max-width: 768px) {
154169
.client-management {
155170
max-width: 100%;
@@ -201,11 +216,10 @@
201216
<p>Total Tasks Completed: Loading...</p>
202217
</div>
203218
</div>
204-
<div class="client-buttons">
205-
<button class="view-details">Loading...</button>
206-
<button class="update-balance">Loading...</button>
207-
<button class="check-tasks">Loading...</button>
208-
219+
<div class="task-buttons">
220+
<button class="view-details">View/Update</button>
221+
<button class="update-task">Update Status</button>
222+
<button class="check-tasks">Remove Client</button>
209223
</div>
210224
</div>
211225
@@ -238,11 +252,11 @@
238252
</div>
239253
240254
</div>
241-
<div class="client-buttons">
242-
<button class="view-details">View Details</button>
243-
<button class="update-balance">Update Balance</button>
244-
<button class="check-tasks">Check Tasks</button>
245-
</div>
255+
<div class="task-buttons">
256+
<button class="view-details">View/Update</button>
257+
<button class="update-task">Update Status</button>
258+
<button class="check-tasks">Remove</button>
259+
</div>
246260
`;
247261
clientCardsWrapper.appendChild(clientCard);
248262
});

0 commit comments

Comments
 (0)