Ad edit task#6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
amazon-q-developer wants to merge 1 commit into
base:main
Choose a base branch
from
Open

Ad edit task #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,10 +5,13 @@ A simple task management application with a Java Spring Boot backend and React f
## Features

- Create, read, update, and delete tasks
- **Enhanced Edit Task Functionality** with visual indicators and user feedback
- Mark tasks as completed
- Filter tasks by status (all, active, completed)
- Set task priority (low, medium, high)
- Set due dates for tasks
- Real-time visual feedback for edit operations
- Intuitive edit mode with distinct styling and notifications


## Tech Stack
Expand DownExpand Up@@ -101,3 +104,35 @@ task-manager/
- `PUT /api/tasks/{id}` - Update a task
- `PATCH /api/tasks/{id}/toggle` - Toggle task completion status
- `DELETE /api/tasks/{id}` - Delete a task

## Edit Task Feature

The application includes a comprehensive edit task functionality with the following enhancements:

### How to Edit a Task

1. **Click the Edit Button**: Each task has an orange "Edit" button (✏️ Edit) in the task actions area
2. **Visual Feedback**: When editing:
- The task form switches to "Edit Mode" with orange styling and an edit icon
- The task being edited is highlighted with an orange border and "Currently editing" indicator
- A notification shows which task you're editing
3. **Make Changes**: Modify any task fields (title, description, priority, due date)
4. **Save or Cancel**:
- Click "💾 Update Task" to save changes
- Click "❌ Cancel" to exit edit mode without saving
5. **Success Confirmation**: A green success message confirms when the task is updated

### Edit Mode Visual Indicators

- **Form Styling**: Orange background and border when in edit mode
- **Task Highlighting**: The task being edited has a distinct orange highlight
- **Button States**: Edit buttons are disabled for the task currently being edited
- **Icons and Emojis**: Visual cues throughout the interface (✏️, 💾, ❌, ✅)
- **Success Messages**: Clear feedback when operations complete successfully

### Technical Implementation

- **Backend**: RESTful PUT endpoint at `/api/tasks/{id}` handles task updates
- **Frontend**: React state management with visual feedback and form validation
- **Real-time Updates**: Immediate UI updates without page refresh
- **Error Handling**: Comprehensive error messages and recovery options
9 changes: 9 additions & 0 deletions frontend/src/App.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,7 @@ function App() {
const [error, setError] = useState(null);
const [filter, setFilter] = useState('all');
const [editingTask, setEditingTask] = useState(null);
const [successMessage, setSuccessMessage] = useState(null);

useEffect(() => {
fetchTasks();
Expand All@@ -33,6 +34,8 @@ function App() {
try {
const newTask = await createTask(taskData);
setTasks([newTask, ...tasks]);
setSuccessMessage('Task created successfully!');
setTimeout(() => setSuccessMessage(null), 3000);
} catch (err) {
setError('Failed to create task. Please try again.');
console.error('Error creating task:', err);
Expand All@@ -44,6 +47,8 @@ function App() {
const updatedTask = await updateTask(id, taskData);
setTasks(tasks.map(task => task.id === id ? updatedTask : task));
setEditingTask(null);
setSuccessMessage(`Task "${updatedTask.title}" updated successfully!`);
setTimeout(() => setSuccessMessage(null), 3000);
} catch (err) {
setError('Failed to update task. Please try again.');
console.error('Error updating task:', err);
Expand DownExpand Up@@ -72,6 +77,8 @@ function App() {

const handleEditTask = (task) => {
setEditingTask(task);
setSuccessMessage(null); // Clear any existing success messages
setError(null); // Clear any existing error messages
};

const filteredTasks = tasks.filter(task => {
Expand All@@ -88,6 +95,7 @@ function App() {
</div>

{error && <div className="error-message">{error}</div>}
{successMessage && <div className="success-message">{successMessage}</div>}

<TaskForm
onSubmit={editingTask ? (taskData) => handleUpdateTask(editingTask.id, taskData) : handleCreateTask}
Expand All@@ -105,6 +113,7 @@ function App() {
onDelete={handleDeleteTask}
onToggleCompletion={handleToggleCompletion}
onEdit={handleEditTask}
editingTaskId={editingTask?.id}
/>
)}
</div>
Expand Down
19 changes: 16 additions & 3 deletions frontend/src/components/TaskForm.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -37,8 +37,21 @@ const TaskForm = ({ onSubmit, initialData, onCancel }) => {
};

return (
<div className="task-form">
<div className={`task-form ${initialData ? 'edit-mode' : ''}`}>
<h2>{initialData ? 'Edit Task' : 'Add New Task'}</h2>
{initialData && (
<div style={{
backgroundColor: '#e65100',
color: 'white',
padding: '8px 12px',
borderRadius: '4px',
marginBottom: '15px',
fontSize: '14px',
fontWeight: '600'
}}>
📝 You are currently editing: "{initialData.title}"
</div>
)}
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="title">Title</label>
Expand DownExpand Up@@ -84,14 +97,14 @@ const TaskForm = ({ onSubmit, initialData, onCancel }) => {
</div>

<div className="form-actions">
<button type="submit" className="btn btn-primary">
<button type="submit" className={`btn ${initialData ? 'btn-update' : 'btn-primary'}`}>
{initialData ? 'Update Task' : 'Add Task'}
</button>

{onCancel && (
<button
type="button"
className="btn btn-secondary"
className="btn btn-cancel"
onClick={onCancel}
style={{ marginLeft: '10px' }}
>
Expand Down
9 changes: 5 additions & 4 deletions frontend/src/components/TaskItem.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import React from 'react';

const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit, isEditing }) => {
const formatDate = (dateString) => {
if (!dateString) return '';
const date = new Date(dateString);
Expand All@@ -21,7 +21,7 @@ const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
};

return (
<li className={`task-item ${task.completed ? 'completed' : ''} ${getPriorityClass()}`}>
<li className={`task-item ${task.completed ? 'completed' : ''} ${getPriorityClass()} ${isEditing ? 'editing' : ''}`}>
<div className="task-content">
<h3 className="task-title">{task.title}</h3>
{task.description && <p className="task-description">{task.description}</p>}
Expand All@@ -43,8 +43,9 @@ const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
</button>
<button
onClick={() => onEdit(task)}
className="btn"
style={{ backgroundColor: '#ff9800', color: 'white' }}
className="btn btn-edit"
disabled={isEditing}
title={isEditing ? "Currently editing this task" : "Edit this task"}
>
Edit
</button>
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/TaskList.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import React from 'react';
import TaskItem from './TaskItem';

const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit }) => {
const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit, editingTaskId }) => {
if (tasks.length === 0) {
return <p>No tasks found. Add a new task to get started!</p>;
}
Expand All@@ -15,6 +15,7 @@ const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit }) => {
onDelete={onDelete}
onToggleCompletion={onToggleCompletion}
onEdit={onEdit}
isEditing={editingTaskId === task.id}
/>
))}
</ul>
Expand Down
120 changes: 120 additions & 0 deletions frontend/src/index.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,25 @@ code {
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
transition: all 0.3s ease;
}

.task-form.edit-mode {
background-color: #fff3e0;
border: 2px solid #ff9800;
box-shadow: 0 4px 8px rgba(255, 152, 0, 0.2);
}

.task-form.edit-mode h2 {
color: #e65100;
display: flex;
align-items: center;
gap: 8px;
}

.task-form.edit-mode h2::before {
content: "✏️";
font-size: 1.2em;
}

.form-group {
Expand DownExpand Up@@ -64,6 +83,59 @@ code {
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: all 0.2s ease;
}

.btn-edit {
background-color: #ff9800;
color: white;
display: flex;
align-items: center;
gap: 5px;
}

.btn-edit:hover {
background-color: #f57c00;
transform: translateY(-1px);
}

.btn-edit::before {
content: "✏️";
font-size: 0.9em;
}

.btn-update {
background-color: #ff9800;
color: white;
display: flex;
align-items: center;
gap: 5px;
}

.btn-update:hover {
background-color: #f57c00;
}

.btn-update::before {
content: "💾";
font-size: 0.9em;
}

.btn-cancel {
background-color: #757575;
color: white;
display: flex;
align-items: center;
gap: 5px;
}

.btn-cancel:hover {
background-color: #616161;
}

.btn-cancel::before {
content: "❌";
font-size: 0.8em;
}

.btn-primary {
Expand All@@ -89,6 +161,26 @@ code {
padding: 0;
}

.task-item.editing {
background-color: #fff3e0;
border: 2px solid #ff9800;
box-shadow: 0 4px 8px rgba(255, 152, 0, 0.2);
transform: scale(1.02);
}

.task-item.editing::before {
content: "Currently editing this task";
position: absolute;
top: -10px;
left: 10px;
background-color: #ff9800;
color: white;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
}

.task-item {
background-color: white;
padding: 15px;
Expand All@@ -98,6 +190,8 @@ code {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
transition: all 0.3s ease;
}

.task-item.completed {
Expand DownExpand Up@@ -161,3 +255,29 @@ code {
.priority-low {
border-left: 4px solid #4caf50;
}

.error-message {
background-color: #ffebee;
color: #c62828;
padding: 12px;
border-radius: 4px;
margin-bottom: 20px;
border-left: 4px solid #f44336;
}

.success-message {
background-color: #e8f5e8;
color: #2e7d32;
padding: 12px;
border-radius: 4px;
margin-bottom: 20px;
border-left: 4px solid #4caf50;
display: flex;
align-items: center;
gap: 8px;
}

.success-message::before {
content: "✅";
font-size: 1.1em;
}
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Ad edit task#6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

amazon-q-developer
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


Ad edit task
#6
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


35 changes: 35 additions & 0 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,10 +5,13 @@ A simple task management application with a Java Spring Boot backend and React f
## Features

- Create, read, update, and delete tasks
- **Enhanced Edit Task Functionality** with visual indicators and user feedback
- Mark tasks as completed
- Filter tasks by status (all, active, completed)
- Set task priority (low, medium, high)
- Set due dates for tasks
- Real-time visual feedback for edit operations
- Intuitive edit mode with distinct styling and notifications


## Tech Stack
Expand DownExpand Up@@ -101,3 +104,35 @@ task-manager/
- `PUT /api/tasks/{id}` - Update a task
- `PATCH /api/tasks/{id}/toggle` - Toggle task completion status
- `DELETE /api/tasks/{id}` - Delete a task

## Edit Task Feature

The application includes a comprehensive edit task functionality with the following enhancements:

### How to Edit a Task

1. **Click the Edit Button**: Each task has an orange "Edit" button (✏️ Edit) in the task actions area
2. **Visual Feedback**: When editing:
 - The task form switches to "Edit Mode" with orange styling and an edit icon
 - The task being edited is highlighted with an orange border and "Currently editing" indicator
 - A notification shows which task you're editing
3. **Make Changes**: Modify any task fields (title, description, priority, due date)
4. **Save or Cancel**: 
 - Click "💾 Update Task" to save changes
 - Click "❌ Cancel" to exit edit mode without saving
5. **Success Confirmation**: A green success message confirms when the task is updated

### Edit Mode Visual Indicators

- **Form Styling**: Orange background and border when in edit mode
- **Task Highlighting**: The task being edited has a distinct orange highlight
- **Button States**: Edit buttons are disabled for the task currently being edited
- **Icons and Emojis**: Visual cues throughout the interface (✏️, 💾, ❌, ✅)
- **Success Messages**: Clear feedback when operations complete successfully

### Technical Implementation

- **Backend**: RESTful PUT endpoint at `/api/tasks/{id}` handles task updates
- **Frontend**: React state management with visual feedback and form validation
- **Real-time Updates**: Immediate UI updates without page refresh
- **Error Handling**: Comprehensive error messages and recovery options

9 changes: 9 additions & 0 deletions
frontend/src/App.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,7 @@ function App() {
 const [error, setError] = useState(null);
 const [filter, setFilter] = useState('all');
 const [editingTask, setEditingTask] = useState(null);
 const [successMessage, setSuccessMessage] = useState(null);

 useEffect(() => {
 fetchTasks();
Expand All@@ -33,6 +34,8 @@ function App() {
 try {
 const newTask = await createTask(taskData);
 setTasks([newTask, ...tasks]);
 setSuccessMessage('Task created successfully!');
 setTimeout(() => setSuccessMessage(null), 3000);
 } catch (err) {
 setError('Failed to create task. Please try again.');
 console.error('Error creating task:', err);
Expand All@@ -44,6 +47,8 @@ function App() {
 const updatedTask = await updateTask(id, taskData);
 setTasks(tasks.map(task => task.id === id ? updatedTask : task));
 setEditingTask(null);
 setSuccessMessage(`Task "${updatedTask.title}" updated successfully!`);
 setTimeout(() => setSuccessMessage(null), 3000);
 } catch (err) {
 setError('Failed to update task. Please try again.');
 console.error('Error updating task:', err);
Expand DownExpand Up@@ -72,6 +77,8 @@ function App() {

 const handleEditTask = (task) => {
 setEditingTask(task);
 setSuccessMessage(null); // Clear any existing success messages
 setError(null); // Clear any existing error messages
 };

 const filteredTasks = tasks.filter(task => {
Expand All@@ -88,6 +95,7 @@ function App() {
 </div>

 {error && <div className="error-message">{error}</div>}
 {successMessage && <div className="success-message">{successMessage}</div>}

 <TaskForm 
 onSubmit={editingTask ? (taskData) => handleUpdateTask(editingTask.id, taskData) : handleCreateTask} 
Expand All@@ -105,6 +113,7 @@ function App() {
 onDelete={handleDeleteTask} 
 onToggleCompletion={handleToggleCompletion}
 onEdit={handleEditTask}
 editingTaskId={editingTask?.id}
 />
 )}
 </div>
Expand Down

19 changes: 16 additions & 3 deletions
frontend/src/components/TaskForm.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -37,8 +37,21 @@ const TaskForm = ({ onSubmit, initialData, onCancel }) => {
 };

 return (
 <div className="task-form">
 <div className={`task-form ${initialData ? 'edit-mode' : ''}`}>
 <h2>{initialData ? 'Edit Task' : 'Add New Task'}</h2>
 {initialData && (
 <div style={{ 
 backgroundColor: '#e65100', 
 color: 'white', 
 padding: '8px 12px', 
 borderRadius: '4px', 
 marginBottom: '15px',
 fontSize: '14px',
 fontWeight: '600'
 }}>
 📝 You are currently editing: "{initialData.title}"
 </div>
 )}
 <form onSubmit={handleSubmit}>
 <div className="form-group">
 <label htmlFor="title">Title</label>
Expand DownExpand Up@@ -84,14 +97,14 @@ const TaskForm = ({ onSubmit, initialData, onCancel }) => {
 </div>

 <div className="form-actions">
 <button type="submit" className="btn btn-primary">
 <button type="submit" className={`btn ${initialData ? 'btn-update' : 'btn-primary'}`}>
 {initialData ? 'Update Task' : 'Add Task'}
 </button>

 {onCancel && (
 <button 
 type="button" 
 className="btn btn-secondary" 
 className="btn btn-cancel" 
 onClick={onCancel}
 style={{ marginLeft: '10px' }}
 >
Expand Down

9 changes: 5 additions & 4 deletions
frontend/src/components/TaskItem.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import React from 'react';

const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit, isEditing }) => {
 const formatDate = (dateString) => {
 if (!dateString) return '';
 const date = new Date(dateString);
Expand All@@ -21,7 +21,7 @@ const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
 };

 return (
 <li className={`task-item ${task.completed ? 'completed' : ''} ${getPriorityClass()}`}>
 <li className={`task-item ${task.completed ? 'completed' : ''} ${getPriorityClass()} ${isEditing ? 'editing' : ''}`}>
 <div className="task-content">
 <h3 className="task-title">{task.title}</h3>
 {task.description && <p className="task-description">{task.description}</p>}
Expand All@@ -43,8 +43,9 @@ const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
 </button>
 <button 
 onClick={() => onEdit(task)}
 className="btn"
 style={{ backgroundColor: '#ff9800', color: 'white' }}
 className="btn btn-edit"
 disabled={isEditing}
 title={isEditing ? "Currently editing this task" : "Edit this task"}
 >
 Edit
 </button>
Expand Down

3 changes: 2 additions & 1 deletion
frontend/src/components/TaskList.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import React from 'react';
import TaskItem from './TaskItem';

const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit }) => {
const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit, editingTaskId }) => {
 if (tasks.length === 0) {
 return <p>No tasks found. Add a new task to get started!</p>;
 }
Expand All@@ -15,6 +15,7 @@ const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit }) => {
 onDelete={onDelete}
 onToggleCompletion={onToggleCompletion}
 onEdit={onEdit}
 isEditing={editingTaskId === task.id}
 />
 ))}
 </ul>
Expand Down

120 changes: 120 additions & 0 deletions
frontend/src/index.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,25 @@ code {
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 margin-bottom: 20px;
 transition: all 0.3s ease;
}

.task-form.edit-mode {
 background-color: #fff3e0;
 border: 2px solid #ff9800;
 box-shadow: 0 4px 8px rgba(255, 152, 0, 0.2);
}

.task-form.edit-mode h2 {
 color: #e65100;
 display: flex;
 align-items: center;
 gap: 8px;
}

.task-form.edit-mode h2::before {
 content: "✏️";
 font-size: 1.2em;
}

.form-group {
Expand DownExpand Up@@ -64,6 +83,59 @@ code {
 cursor: pointer;
 font-size: 16px;
 font-weight: 600;
 transition: all 0.2s ease;
}

.btn-edit {
 background-color: #ff9800;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-edit:hover {
 background-color: #f57c00;
 transform: translateY(-1px);
}

.btn-edit::before {
 content: "✏️";
 font-size: 0.9em;
}

.btn-update {
 background-color: #ff9800;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-update:hover {
 background-color: #f57c00;
}

.btn-update::before {
 content: "💾";
 font-size: 0.9em;
}

.btn-cancel {
 background-color: #757575;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-cancel:hover {
 background-color: #616161;
}

.btn-cancel::before {
 content: "❌";
 font-size: 0.8em;
}

.btn-primary {
Expand All@@ -89,6 +161,26 @@ code {
 padding: 0;
}

.task-item.editing {
 background-color: #fff3e0;
 border: 2px solid #ff9800;
 box-shadow: 0 4px 8px rgba(255, 152, 0, 0.2);
 transform: scale(1.02);
}

.task-item.editing::before {
 content: "Currently editing this task";
 position: absolute;
 top: -10px;
 left: 10px;
 background-color: #ff9800;
 color: white;
 padding: 2px 8px;
 border-radius: 4px;
 font-size: 12px;
 font-weight: 600;
}

.task-item {
 background-color: white;
 padding: 15px;
Expand All@@ -98,6 +190,8 @@ code {
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: relative;
 transition: all 0.3s ease;
}

.task-item.completed {
Expand DownExpand Up@@ -161,3 +255,29 @@ code {
.priority-low {
 border-left: 4px solid #4caf50;
}

.error-message {
 background-color: #ffebee;
 color: #c62828;
 padding: 12px;
 border-radius: 4px;
 margin-bottom: 20px;
 border-left: 4px solid #f44336;
}

.success-message {
 background-color: #e8f5e8;
 color: #2e7d32;
 padding: 12px;
 border-radius: 4px;
 margin-bottom: 20px;
 border-left: 4px solid #4caf50;
 display: flex;
 align-items: center;
 gap: 8px;
}

.success-message::before {
 content: "✅";
 font-size: 1.1em;
}

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Ad edit task#6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

amazon-q-developer
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


Ad edit task
#6
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


35 changes: 35 additions & 0 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,10 +5,13 @@ A simple task management application with a Java Spring Boot backend and React f
## Features

- Create, read, update, and delete tasks
- **Enhanced Edit Task Functionality** with visual indicators and user feedback
- Mark tasks as completed
- Filter tasks by status (all, active, completed)
- Set task priority (low, medium, high)
- Set due dates for tasks
- Real-time visual feedback for edit operations
- Intuitive edit mode with distinct styling and notifications


## Tech Stack
Expand DownExpand Up@@ -101,3 +104,35 @@ task-manager/
- `PUT /api/tasks/{id}` - Update a task
- `PATCH /api/tasks/{id}/toggle` - Toggle task completion status
- `DELETE /api/tasks/{id}` - Delete a task

## Edit Task Feature

The application includes a comprehensive edit task functionality with the following enhancements:

### How to Edit a Task

1. **Click the Edit Button**: Each task has an orange "Edit" button (✏️ Edit) in the task actions area
2. **Visual Feedback**: When editing:
 - The task form switches to "Edit Mode" with orange styling and an edit icon
 - The task being edited is highlighted with an orange border and "Currently editing" indicator
 - A notification shows which task you're editing
3. **Make Changes**: Modify any task fields (title, description, priority, due date)
4. **Save or Cancel**: 
 - Click "💾 Update Task" to save changes
 - Click "❌ Cancel" to exit edit mode without saving
5. **Success Confirmation**: A green success message confirms when the task is updated

### Edit Mode Visual Indicators

- **Form Styling**: Orange background and border when in edit mode
- **Task Highlighting**: The task being edited has a distinct orange highlight
- **Button States**: Edit buttons are disabled for the task currently being edited
- **Icons and Emojis**: Visual cues throughout the interface (✏️, 💾, ❌, ✅)
- **Success Messages**: Clear feedback when operations complete successfully

### Technical Implementation

- **Backend**: RESTful PUT endpoint at `/api/tasks/{id}` handles task updates
- **Frontend**: React state management with visual feedback and form validation
- **Real-time Updates**: Immediate UI updates without page refresh
- **Error Handling**: Comprehensive error messages and recovery options

9 changes: 9 additions & 0 deletions
frontend/src/App.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,7 @@ function App() {
 const [error, setError] = useState(null);
 const [filter, setFilter] = useState('all');
 const [editingTask, setEditingTask] = useState(null);
 const [successMessage, setSuccessMessage] = useState(null);

 useEffect(() => {
 fetchTasks();
Expand All@@ -33,6 +34,8 @@ function App() {
 try {
 const newTask = await createTask(taskData);
 setTasks([newTask, ...tasks]);
 setSuccessMessage('Task created successfully!');
 setTimeout(() => setSuccessMessage(null), 3000);
 } catch (err) {
 setError('Failed to create task. Please try again.');
 console.error('Error creating task:', err);
Expand All@@ -44,6 +47,8 @@ function App() {
 const updatedTask = await updateTask(id, taskData);
 setTasks(tasks.map(task => task.id === id ? updatedTask : task));
 setEditingTask(null);
 setSuccessMessage(`Task "${updatedTask.title}" updated successfully!`);
 setTimeout(() => setSuccessMessage(null), 3000);
 } catch (err) {
 setError('Failed to update task. Please try again.');
 console.error('Error updating task:', err);
Expand DownExpand Up@@ -72,6 +77,8 @@ function App() {

 const handleEditTask = (task) => {
 setEditingTask(task);
 setSuccessMessage(null); // Clear any existing success messages
 setError(null); // Clear any existing error messages
 };

 const filteredTasks = tasks.filter(task => {
Expand All@@ -88,6 +95,7 @@ function App() {
 </div>

 {error && <div className="error-message">{error}</div>}
 {successMessage && <div className="success-message">{successMessage}</div>}

 <TaskForm 
 onSubmit={editingTask ? (taskData) => handleUpdateTask(editingTask.id, taskData) : handleCreateTask} 
Expand All@@ -105,6 +113,7 @@ function App() {
 onDelete={handleDeleteTask} 
 onToggleCompletion={handleToggleCompletion}
 onEdit={handleEditTask}
 editingTaskId={editingTask?.id}
 />
 )}
 </div>
Expand Down

19 changes: 16 additions & 3 deletions
frontend/src/components/TaskForm.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -37,8 +37,21 @@ const TaskForm = ({ onSubmit, initialData, onCancel }) => {
 };

 return (
 <div className="task-form">
 <div className={`task-form ${initialData ? 'edit-mode' : ''}`}>
 <h2>{initialData ? 'Edit Task' : 'Add New Task'}</h2>
 {initialData && (
 <div style={{ 
 backgroundColor: '#e65100', 
 color: 'white', 
 padding: '8px 12px', 
 borderRadius: '4px', 
 marginBottom: '15px',
 fontSize: '14px',
 fontWeight: '600'
 }}>
 📝 You are currently editing: "{initialData.title}"
 </div>
 )}
 <form onSubmit={handleSubmit}>
 <div className="form-group">
 <label htmlFor="title">Title</label>
Expand DownExpand Up@@ -84,14 +97,14 @@ const TaskForm = ({ onSubmit, initialData, onCancel }) => {
 </div>

 <div className="form-actions">
 <button type="submit" className="btn btn-primary">
 <button type="submit" className={`btn ${initialData ? 'btn-update' : 'btn-primary'}`}>
 {initialData ? 'Update Task' : 'Add Task'}
 </button>

 {onCancel && (
 <button 
 type="button" 
 className="btn btn-secondary" 
 className="btn btn-cancel" 
 onClick={onCancel}
 style={{ marginLeft: '10px' }}
 >
Expand Down

9 changes: 5 additions & 4 deletions
frontend/src/components/TaskItem.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import React from 'react';

const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit, isEditing }) => {
 const formatDate = (dateString) => {
 if (!dateString) return '';
 const date = new Date(dateString);
Expand All@@ -21,7 +21,7 @@ const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
 };

 return (
 <li className={`task-item ${task.completed ? 'completed' : ''} ${getPriorityClass()}`}>
 <li className={`task-item ${task.completed ? 'completed' : ''} ${getPriorityClass()} ${isEditing ? 'editing' : ''}`}>
 <div className="task-content">
 <h3 className="task-title">{task.title}</h3>
 {task.description && <p className="task-description">{task.description}</p>}
Expand All@@ -43,8 +43,9 @@ const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
 </button>
 <button 
 onClick={() => onEdit(task)}
 className="btn"
 style={{ backgroundColor: '#ff9800', color: 'white' }}
 className="btn btn-edit"
 disabled={isEditing}
 title={isEditing ? "Currently editing this task" : "Edit this task"}
 >
 Edit
 </button>
Expand Down

3 changes: 2 additions & 1 deletion
frontend/src/components/TaskList.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import React from 'react';
import TaskItem from './TaskItem';

const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit }) => {
const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit, editingTaskId }) => {
 if (tasks.length === 0) {
 return <p>No tasks found. Add a new task to get started!</p>;
 }
Expand All@@ -15,6 +15,7 @@ const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit }) => {
 onDelete={onDelete}
 onToggleCompletion={onToggleCompletion}
 onEdit={onEdit}
 isEditing={editingTaskId === task.id}
 />
 ))}
 </ul>
Expand Down

120 changes: 120 additions & 0 deletions
frontend/src/index.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,25 @@ code {
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 margin-bottom: 20px;
 transition: all 0.3s ease;
}

.task-form.edit-mode {
 background-color: #fff3e0;
 border: 2px solid #ff9800;
 box-shadow: 0 4px 8px rgba(255, 152, 0, 0.2);
}

.task-form.edit-mode h2 {
 color: #e65100;
 display: flex;
 align-items: center;
 gap: 8px;
}

.task-form.edit-mode h2::before {
 content: "✏️";
 font-size: 1.2em;
}

.form-group {
Expand DownExpand Up@@ -64,6 +83,59 @@ code {
 cursor: pointer;
 font-size: 16px;
 font-weight: 600;
 transition: all 0.2s ease;
}

.btn-edit {
 background-color: #ff9800;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-edit:hover {
 background-color: #f57c00;
 transform: translateY(-1px);
}

.btn-edit::before {
 content: "✏️";
 font-size: 0.9em;
}

.btn-update {
 background-color: #ff9800;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-update:hover {
 background-color: #f57c00;
}

.btn-update::before {
 content: "💾";
 font-size: 0.9em;
}

.btn-cancel {
 background-color: #757575;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-cancel:hover {
 background-color: #616161;
}

.btn-cancel::before {
 content: "❌";
 font-size: 0.8em;
}

.btn-primary {
Expand All@@ -89,6 +161,26 @@ code {
 padding: 0;
}

.task-item.editing {
 background-color: #fff3e0;
 border: 2px solid #ff9800;
 box-shadow: 0 4px 8px rgba(255, 152, 0, 0.2);
 transform: scale(1.02);
}

.task-item.editing::before {
 content: "Currently editing this task";
 position: absolute;
 top: -10px;
 left: 10px;
 background-color: #ff9800;
 color: white;
 padding: 2px 8px;
 border-radius: 4px;
 font-size: 12px;
 font-weight: 600;
}

.task-item {
 background-color: white;
 padding: 15px;
Expand All@@ -98,6 +190,8 @@ code {
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: relative;
 transition: all 0.3s ease;
}

.task-item.completed {
Expand DownExpand Up@@ -161,3 +255,29 @@ code {
.priority-low {
 border-left: 4px solid #4caf50;
}

.error-message {
 background-color: #ffebee;
 color: #c62828;
 padding: 12px;
 border-radius: 4px;
 margin-bottom: 20px;
 border-left: 4px solid #f44336;
}

.success-message {
 background-color: #e8f5e8;
 color: #2e7d32;
 padding: 12px;
 border-radius: 4px;
 margin-bottom: 20px;
 border-left: 4px solid #4caf50;
 display: flex;
 align-items: center;
 gap: 8px;
}

.success-message::before {
 content: "✅";
 font-size: 1.1em;
}

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Ad edit task#6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

amazon-q-developer
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


Ad edit task
#6
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


35 changes: 35 additions & 0 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,10 +5,13 @@ A simple task management application with a Java Spring Boot backend and React f
## Features

- Create, read, update, and delete tasks
- **Enhanced Edit Task Functionality** with visual indicators and user feedback
- Mark tasks as completed
- Filter tasks by status (all, active, completed)
- Set task priority (low, medium, high)
- Set due dates for tasks
- Real-time visual feedback for edit operations
- Intuitive edit mode with distinct styling and notifications


## Tech Stack
Expand DownExpand Up@@ -101,3 +104,35 @@ task-manager/
- `PUT /api/tasks/{id}` - Update a task
- `PATCH /api/tasks/{id}/toggle` - Toggle task completion status
- `DELETE /api/tasks/{id}` - Delete a task

## Edit Task Feature

The application includes a comprehensive edit task functionality with the following enhancements:

### How to Edit a Task

1. **Click the Edit Button**: Each task has an orange "Edit" button (✏️ Edit) in the task actions area
2. **Visual Feedback**: When editing:
 - The task form switches to "Edit Mode" with orange styling and an edit icon
 - The task being edited is highlighted with an orange border and "Currently editing" indicator
 - A notification shows which task you're editing
3. **Make Changes**: Modify any task fields (title, description, priority, due date)
4. **Save or Cancel**: 
 - Click "💾 Update Task" to save changes
 - Click "❌ Cancel" to exit edit mode without saving
5. **Success Confirmation**: A green success message confirms when the task is updated

### Edit Mode Visual Indicators

- **Form Styling**: Orange background and border when in edit mode
- **Task Highlighting**: The task being edited has a distinct orange highlight
- **Button States**: Edit buttons are disabled for the task currently being edited
- **Icons and Emojis**: Visual cues throughout the interface (✏️, 💾, ❌, ✅)
- **Success Messages**: Clear feedback when operations complete successfully

### Technical Implementation

- **Backend**: RESTful PUT endpoint at `/api/tasks/{id}` handles task updates
- **Frontend**: React state management with visual feedback and form validation
- **Real-time Updates**: Immediate UI updates without page refresh
- **Error Handling**: Comprehensive error messages and recovery options

9 changes: 9 additions & 0 deletions
frontend/src/App.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,7 @@ function App() {
 const [error, setError] = useState(null);
 const [filter, setFilter] = useState('all');
 const [editingTask, setEditingTask] = useState(null);
 const [successMessage, setSuccessMessage] = useState(null);

 useEffect(() => {
 fetchTasks();
Expand All@@ -33,6 +34,8 @@ function App() {
 try {
 const newTask = await createTask(taskData);
 setTasks([newTask, ...tasks]);
 setSuccessMessage('Task created successfully!');
 setTimeout(() => setSuccessMessage(null), 3000);
 } catch (err) {
 setError('Failed to create task. Please try again.');
 console.error('Error creating task:', err);
Expand All@@ -44,6 +47,8 @@ function App() {
 const updatedTask = await updateTask(id, taskData);
 setTasks(tasks.map(task => task.id === id ? updatedTask : task));
 setEditingTask(null);
 setSuccessMessage(`Task "${updatedTask.title}" updated successfully!`);
 setTimeout(() => setSuccessMessage(null), 3000);
 } catch (err) {
 setError('Failed to update task. Please try again.');
 console.error('Error updating task:', err);
Expand DownExpand Up@@ -72,6 +77,8 @@ function App() {

 const handleEditTask = (task) => {
 setEditingTask(task);
 setSuccessMessage(null); // Clear any existing success messages
 setError(null); // Clear any existing error messages
 };

 const filteredTasks = tasks.filter(task => {
Expand All@@ -88,6 +95,7 @@ function App() {
 </div>

 {error && <div className="error-message">{error}</div>}
 {successMessage && <div className="success-message">{successMessage}</div>}

 <TaskForm 
 onSubmit={editingTask ? (taskData) => handleUpdateTask(editingTask.id, taskData) : handleCreateTask} 
Expand All@@ -105,6 +113,7 @@ function App() {
 onDelete={handleDeleteTask} 
 onToggleCompletion={handleToggleCompletion}
 onEdit={handleEditTask}
 editingTaskId={editingTask?.id}
 />
 )}
 </div>
Expand Down

19 changes: 16 additions & 3 deletions
frontend/src/components/TaskForm.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -37,8 +37,21 @@ const TaskForm = ({ onSubmit, initialData, onCancel }) => {
 };

 return (
 <div className="task-form">
 <div className={`task-form ${initialData ? 'edit-mode' : ''}`}>
 <h2>{initialData ? 'Edit Task' : 'Add New Task'}</h2>
 {initialData && (
 <div style={{ 
 backgroundColor: '#e65100', 
 color: 'white', 
 padding: '8px 12px', 
 borderRadius: '4px', 
 marginBottom: '15px',
 fontSize: '14px',
 fontWeight: '600'
 }}>
 📝 You are currently editing: "{initialData.title}"
 </div>
 )}
 <form onSubmit={handleSubmit}>
 <div className="form-group">
 <label htmlFor="title">Title</label>
Expand DownExpand Up@@ -84,14 +97,14 @@ const TaskForm = ({ onSubmit, initialData, onCancel }) => {
 </div>

 <div className="form-actions">
 <button type="submit" className="btn btn-primary">
 <button type="submit" className={`btn ${initialData ? 'btn-update' : 'btn-primary'}`}>
 {initialData ? 'Update Task' : 'Add Task'}
 </button>

 {onCancel && (
 <button 
 type="button" 
 className="btn btn-secondary" 
 className="btn btn-cancel" 
 onClick={onCancel}
 style={{ marginLeft: '10px' }}
 >
Expand Down

9 changes: 5 additions & 4 deletions
frontend/src/components/TaskItem.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import React from 'react';

const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit, isEditing }) => {
 const formatDate = (dateString) => {
 if (!dateString) return '';
 const date = new Date(dateString);
Expand All@@ -21,7 +21,7 @@ const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
 };

 return (
 <li className={`task-item ${task.completed ? 'completed' : ''} ${getPriorityClass()}`}>
 <li className={`task-item ${task.completed ? 'completed' : ''} ${getPriorityClass()} ${isEditing ? 'editing' : ''}`}>
 <div className="task-content">
 <h3 className="task-title">{task.title}</h3>
 {task.description && <p className="task-description">{task.description}</p>}
Expand All@@ -43,8 +43,9 @@ const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
 </button>
 <button 
 onClick={() => onEdit(task)}
 className="btn"
 style={{ backgroundColor: '#ff9800', color: 'white' }}
 className="btn btn-edit"
 disabled={isEditing}
 title={isEditing ? "Currently editing this task" : "Edit this task"}
 >
 Edit
 </button>
Expand Down

3 changes: 2 additions & 1 deletion
frontend/src/components/TaskList.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import React from 'react';
import TaskItem from './TaskItem';

const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit }) => {
const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit, editingTaskId }) => {
 if (tasks.length === 0) {
 return <p>No tasks found. Add a new task to get started!</p>;
 }
Expand All@@ -15,6 +15,7 @@ const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit }) => {
 onDelete={onDelete}
 onToggleCompletion={onToggleCompletion}
 onEdit={onEdit}
 isEditing={editingTaskId === task.id}
 />
 ))}
 </ul>
Expand Down

120 changes: 120 additions & 0 deletions
frontend/src/index.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,25 @@ code {
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 margin-bottom: 20px;
 transition: all 0.3s ease;
}

.task-form.edit-mode {
 background-color: #fff3e0;
 border: 2px solid #ff9800;
 box-shadow: 0 4px 8px rgba(255, 152, 0, 0.2);
}

.task-form.edit-mode h2 {
 color: #e65100;
 display: flex;
 align-items: center;
 gap: 8px;
}

.task-form.edit-mode h2::before {
 content: "✏️";
 font-size: 1.2em;
}

.form-group {
Expand DownExpand Up@@ -64,6 +83,59 @@ code {
 cursor: pointer;
 font-size: 16px;
 font-weight: 600;
 transition: all 0.2s ease;
}

.btn-edit {
 background-color: #ff9800;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-edit:hover {
 background-color: #f57c00;
 transform: translateY(-1px);
}

.btn-edit::before {
 content: "✏️";
 font-size: 0.9em;
}

.btn-update {
 background-color: #ff9800;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-update:hover {
 background-color: #f57c00;
}

.btn-update::before {
 content: "💾";
 font-size: 0.9em;
}

.btn-cancel {
 background-color: #757575;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-cancel:hover {
 background-color: #616161;
}

.btn-cancel::before {
 content: "❌";
 font-size: 0.8em;
}

.btn-primary {
Expand All@@ -89,6 +161,26 @@ code {
 padding: 0;
}

.task-item.editing {
 background-color: #fff3e0;
 border: 2px solid #ff9800;
 box-shadow: 0 4px 8px rgba(255, 152, 0, 0.2);
 transform: scale(1.02);
}

.task-item.editing::before {
 content: "Currently editing this task";
 position: absolute;
 top: -10px;
 left: 10px;
 background-color: #ff9800;
 color: white;
 padding: 2px 8px;
 border-radius: 4px;
 font-size: 12px;
 font-weight: 600;
}

.task-item {
 background-color: white;
 padding: 15px;
Expand All@@ -98,6 +190,8 @@ code {
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: relative;
 transition: all 0.3s ease;
}

.task-item.completed {
Expand DownExpand Up@@ -161,3 +255,29 @@ code {
.priority-low {
 border-left: 4px solid #4caf50;
}

.error-message {
 background-color: #ffebee;
 color: #c62828;
 padding: 12px;
 border-radius: 4px;
 margin-bottom: 20px;
 border-left: 4px solid #f44336;
}

.success-message {
 background-color: #e8f5e8;
 color: #2e7d32;
 padding: 12px;
 border-radius: 4px;
 margin-bottom: 20px;
 border-left: 4px solid #4caf50;
 display: flex;
 align-items: center;
 gap: 8px;
}

.success-message::before {
 content: "✅";
 font-size: 1.1em;
}

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Ad edit task#6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

amazon-q-developer
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


Ad edit task
#6
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


35 changes: 35 additions & 0 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,10 +5,13 @@ A simple task management application with a Java Spring Boot backend and React f
## Features

- Create, read, update, and delete tasks
- **Enhanced Edit Task Functionality** with visual indicators and user feedback
- Mark tasks as completed
- Filter tasks by status (all, active, completed)
- Set task priority (low, medium, high)
- Set due dates for tasks
- Real-time visual feedback for edit operations
- Intuitive edit mode with distinct styling and notifications


## Tech Stack
Expand DownExpand Up@@ -101,3 +104,35 @@ task-manager/
- `PUT /api/tasks/{id}` - Update a task
- `PATCH /api/tasks/{id}/toggle` - Toggle task completion status
- `DELETE /api/tasks/{id}` - Delete a task

## Edit Task Feature

The application includes a comprehensive edit task functionality with the following enhancements:

### How to Edit a Task

1. **Click the Edit Button**: Each task has an orange "Edit" button (✏️ Edit) in the task actions area
2. **Visual Feedback**: When editing:
 - The task form switches to "Edit Mode" with orange styling and an edit icon
 - The task being edited is highlighted with an orange border and "Currently editing" indicator
 - A notification shows which task you're editing
3. **Make Changes**: Modify any task fields (title, description, priority, due date)
4. **Save or Cancel**: 
 - Click "💾 Update Task" to save changes
 - Click "❌ Cancel" to exit edit mode without saving
5. **Success Confirmation**: A green success message confirms when the task is updated

### Edit Mode Visual Indicators

- **Form Styling**: Orange background and border when in edit mode
- **Task Highlighting**: The task being edited has a distinct orange highlight
- **Button States**: Edit buttons are disabled for the task currently being edited
- **Icons and Emojis**: Visual cues throughout the interface (✏️, 💾, ❌, ✅)
- **Success Messages**: Clear feedback when operations complete successfully

### Technical Implementation

- **Backend**: RESTful PUT endpoint at `/api/tasks/{id}` handles task updates
- **Frontend**: React state management with visual feedback and form validation
- **Real-time Updates**: Immediate UI updates without page refresh
- **Error Handling**: Comprehensive error messages and recovery options

9 changes: 9 additions & 0 deletions
frontend/src/App.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,7 @@ function App() {
 const [error, setError] = useState(null);
 const [filter, setFilter] = useState('all');
 const [editingTask, setEditingTask] = useState(null);
 const [successMessage, setSuccessMessage] = useState(null);

 useEffect(() => {
 fetchTasks();
Expand All@@ -33,6 +34,8 @@ function App() {
 try {
 const newTask = await createTask(taskData);
 setTasks([newTask, ...tasks]);
 setSuccessMessage('Task created successfully!');
 setTimeout(() => setSuccessMessage(null), 3000);
 } catch (err) {
 setError('Failed to create task. Please try again.');
 console.error('Error creating task:', err);
Expand All@@ -44,6 +47,8 @@ function App() {
 const updatedTask = await updateTask(id, taskData);
 setTasks(tasks.map(task => task.id === id ? updatedTask : task));
 setEditingTask(null);
 setSuccessMessage(`Task "${updatedTask.title}" updated successfully!`);
 setTimeout(() => setSuccessMessage(null), 3000);
 } catch (err) {
 setError('Failed to update task. Please try again.');
 console.error('Error updating task:', err);
Expand DownExpand Up@@ -72,6 +77,8 @@ function App() {

 const handleEditTask = (task) => {
 setEditingTask(task);
 setSuccessMessage(null); // Clear any existing success messages
 setError(null); // Clear any existing error messages
 };

 const filteredTasks = tasks.filter(task => {
Expand All@@ -88,6 +95,7 @@ function App() {
 </div>

 {error && <div className="error-message">{error}</div>}
 {successMessage && <div className="success-message">{successMessage}</div>}

 <TaskForm 
 onSubmit={editingTask ? (taskData) => handleUpdateTask(editingTask.id, taskData) : handleCreateTask} 
Expand All@@ -105,6 +113,7 @@ function App() {
 onDelete={handleDeleteTask} 
 onToggleCompletion={handleToggleCompletion}
 onEdit={handleEditTask}
 editingTaskId={editingTask?.id}
 />
 )}
 </div>
Expand Down

19 changes: 16 additions & 3 deletions
frontend/src/components/TaskForm.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -37,8 +37,21 @@ const TaskForm = ({ onSubmit, initialData, onCancel }) => {
 };

 return (
 <div className="task-form">
 <div className={`task-form ${initialData ? 'edit-mode' : ''}`}>
 <h2>{initialData ? 'Edit Task' : 'Add New Task'}</h2>
 {initialData && (
 <div style={{ 
 backgroundColor: '#e65100', 
 color: 'white', 
 padding: '8px 12px', 
 borderRadius: '4px', 
 marginBottom: '15px',
 fontSize: '14px',
 fontWeight: '600'
 }}>
 📝 You are currently editing: "{initialData.title}"
 </div>
 )}
 <form onSubmit={handleSubmit}>
 <div className="form-group">
 <label htmlFor="title">Title</label>
Expand DownExpand Up@@ -84,14 +97,14 @@ const TaskForm = ({ onSubmit, initialData, onCancel }) => {
 </div>

 <div className="form-actions">
 <button type="submit" className="btn btn-primary">
 <button type="submit" className={`btn ${initialData ? 'btn-update' : 'btn-primary'}`}>
 {initialData ? 'Update Task' : 'Add Task'}
 </button>

 {onCancel && (
 <button 
 type="button" 
 className="btn btn-secondary" 
 className="btn btn-cancel" 
 onClick={onCancel}
 style={{ marginLeft: '10px' }}
 >
Expand Down

9 changes: 5 additions & 4 deletions
frontend/src/components/TaskItem.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import React from 'react';

const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit, isEditing }) => {
 const formatDate = (dateString) => {
 if (!dateString) return '';
 const date = new Date(dateString);
Expand All@@ -21,7 +21,7 @@ const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
 };

 return (
 <li className={`task-item ${task.completed ? 'completed' : ''} ${getPriorityClass()}`}>
 <li className={`task-item ${task.completed ? 'completed' : ''} ${getPriorityClass()} ${isEditing ? 'editing' : ''}`}>
 <div className="task-content">
 <h3 className="task-title">{task.title}</h3>
 {task.description && <p className="task-description">{task.description}</p>}
Expand All@@ -43,8 +43,9 @@ const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
 </button>
 <button 
 onClick={() => onEdit(task)}
 className="btn"
 style={{ backgroundColor: '#ff9800', color: 'white' }}
 className="btn btn-edit"
 disabled={isEditing}
 title={isEditing ? "Currently editing this task" : "Edit this task"}
 >
 Edit
 </button>
Expand Down

3 changes: 2 additions & 1 deletion
frontend/src/components/TaskList.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import React from 'react';
import TaskItem from './TaskItem';

const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit }) => {
const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit, editingTaskId }) => {
 if (tasks.length === 0) {
 return <p>No tasks found. Add a new task to get started!</p>;
 }
Expand All@@ -15,6 +15,7 @@ const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit }) => {
 onDelete={onDelete}
 onToggleCompletion={onToggleCompletion}
 onEdit={onEdit}
 isEditing={editingTaskId === task.id}
 />
 ))}
 </ul>
Expand Down

120 changes: 120 additions & 0 deletions
frontend/src/index.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,25 @@ code {
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 margin-bottom: 20px;
 transition: all 0.3s ease;
}

.task-form.edit-mode {
 background-color: #fff3e0;
 border: 2px solid #ff9800;
 box-shadow: 0 4px 8px rgba(255, 152, 0, 0.2);
}

.task-form.edit-mode h2 {
 color: #e65100;
 display: flex;
 align-items: center;
 gap: 8px;
}

.task-form.edit-mode h2::before {
 content: "✏️";
 font-size: 1.2em;
}

.form-group {
Expand DownExpand Up@@ -64,6 +83,59 @@ code {
 cursor: pointer;
 font-size: 16px;
 font-weight: 600;
 transition: all 0.2s ease;
}

.btn-edit {
 background-color: #ff9800;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-edit:hover {
 background-color: #f57c00;
 transform: translateY(-1px);
}

.btn-edit::before {
 content: "✏️";
 font-size: 0.9em;
}

.btn-update {
 background-color: #ff9800;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-update:hover {
 background-color: #f57c00;
}

.btn-update::before {
 content: "💾";
 font-size: 0.9em;
}

.btn-cancel {
 background-color: #757575;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-cancel:hover {
 background-color: #616161;
}

.btn-cancel::before {
 content: "❌";
 font-size: 0.8em;
}

.btn-primary {
Expand All@@ -89,6 +161,26 @@ code {
 padding: 0;
}

.task-item.editing {
 background-color: #fff3e0;
 border: 2px solid #ff9800;
 box-shadow: 0 4px 8px rgba(255, 152, 0, 0.2);
 transform: scale(1.02);
}

.task-item.editing::before {
 content: "Currently editing this task";
 position: absolute;
 top: -10px;
 left: 10px;
 background-color: #ff9800;
 color: white;
 padding: 2px 8px;
 border-radius: 4px;
 font-size: 12px;
 font-weight: 600;
}

.task-item {
 background-color: white;
 padding: 15px;
Expand All@@ -98,6 +190,8 @@ code {
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: relative;
 transition: all 0.3s ease;
}

.task-item.completed {
Expand DownExpand Up@@ -161,3 +255,29 @@ code {
.priority-low {
 border-left: 4px solid #4caf50;
}

.error-message {
 background-color: #ffebee;
 color: #c62828;
 padding: 12px;
 border-radius: 4px;
 margin-bottom: 20px;
 border-left: 4px solid #f44336;
}

.success-message {
 background-color: #e8f5e8;
 color: #2e7d32;
 padding: 12px;
 border-radius: 4px;
 margin-bottom: 20px;
 border-left: 4px solid #4caf50;
 display: flex;
 align-items: center;
 gap: 8px;
}

.success-message::before {
 content: "✅";
 font-size: 1.1em;
}

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Ad edit task#6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

amazon-q-developer
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


Ad edit task
#6
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


35 changes: 35 additions & 0 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,10 +5,13 @@ A simple task management application with a Java Spring Boot backend and React f
## Features

- Create, read, update, and delete tasks
- **Enhanced Edit Task Functionality** with visual indicators and user feedback
- Mark tasks as completed
- Filter tasks by status (all, active, completed)
- Set task priority (low, medium, high)
- Set due dates for tasks
- Real-time visual feedback for edit operations
- Intuitive edit mode with distinct styling and notifications


## Tech Stack
Expand DownExpand Up@@ -101,3 +104,35 @@ task-manager/
- `PUT /api/tasks/{id}` - Update a task
- `PATCH /api/tasks/{id}/toggle` - Toggle task completion status
- `DELETE /api/tasks/{id}` - Delete a task

## Edit Task Feature

The application includes a comprehensive edit task functionality with the following enhancements:

### How to Edit a Task

1. **Click the Edit Button**: Each task has an orange "Edit" button (✏️ Edit) in the task actions area
2. **Visual Feedback**: When editing:
 - The task form switches to "Edit Mode" with orange styling and an edit icon
 - The task being edited is highlighted with an orange border and "Currently editing" indicator
 - A notification shows which task you're editing
3. **Make Changes**: Modify any task fields (title, description, priority, due date)
4. **Save or Cancel**: 
 - Click "💾 Update Task" to save changes
 - Click "❌ Cancel" to exit edit mode without saving
5. **Success Confirmation**: A green success message confirms when the task is updated

### Edit Mode Visual Indicators

- **Form Styling**: Orange background and border when in edit mode
- **Task Highlighting**: The task being edited has a distinct orange highlight
- **Button States**: Edit buttons are disabled for the task currently being edited
- **Icons and Emojis**: Visual cues throughout the interface (✏️, 💾, ❌, ✅)
- **Success Messages**: Clear feedback when operations complete successfully

### Technical Implementation

- **Backend**: RESTful PUT endpoint at `/api/tasks/{id}` handles task updates
- **Frontend**: React state management with visual feedback and form validation
- **Real-time Updates**: Immediate UI updates without page refresh
- **Error Handling**: Comprehensive error messages and recovery options

9 changes: 9 additions & 0 deletions
frontend/src/App.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,7 @@ function App() {
 const [error, setError] = useState(null);
 const [filter, setFilter] = useState('all');
 const [editingTask, setEditingTask] = useState(null);
 const [successMessage, setSuccessMessage] = useState(null);

 useEffect(() => {
 fetchTasks();
Expand All@@ -33,6 +34,8 @@ function App() {
 try {
 const newTask = await createTask(taskData);
 setTasks([newTask, ...tasks]);
 setSuccessMessage('Task created successfully!');
 setTimeout(() => setSuccessMessage(null), 3000);
 } catch (err) {
 setError('Failed to create task. Please try again.');
 console.error('Error creating task:', err);
Expand All@@ -44,6 +47,8 @@ function App() {
 const updatedTask = await updateTask(id, taskData);
 setTasks(tasks.map(task => task.id === id ? updatedTask : task));
 setEditingTask(null);
 setSuccessMessage(`Task "${updatedTask.title}" updated successfully!`);
 setTimeout(() => setSuccessMessage(null), 3000);
 } catch (err) {
 setError('Failed to update task. Please try again.');
 console.error('Error updating task:', err);
Expand DownExpand Up@@ -72,6 +77,8 @@ function App() {

 const handleEditTask = (task) => {
 setEditingTask(task);
 setSuccessMessage(null); // Clear any existing success messages
 setError(null); // Clear any existing error messages
 };

 const filteredTasks = tasks.filter(task => {
Expand All@@ -88,6 +95,7 @@ function App() {
 </div>

 {error && <div className="error-message">{error}</div>}
 {successMessage && <div className="success-message">{successMessage}</div>}

 <TaskForm 
 onSubmit={editingTask ? (taskData) => handleUpdateTask(editingTask.id, taskData) : handleCreateTask} 
Expand All@@ -105,6 +113,7 @@ function App() {
 onDelete={handleDeleteTask} 
 onToggleCompletion={handleToggleCompletion}
 onEdit={handleEditTask}
 editingTaskId={editingTask?.id}
 />
 )}
 </div>
Expand Down

19 changes: 16 additions & 3 deletions
frontend/src/components/TaskForm.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -37,8 +37,21 @@ const TaskForm = ({ onSubmit, initialData, onCancel }) => {
 };

 return (
 <div className="task-form">
 <div className={`task-form ${initialData ? 'edit-mode' : ''}`}>
 <h2>{initialData ? 'Edit Task' : 'Add New Task'}</h2>
 {initialData && (
 <div style={{ 
 backgroundColor: '#e65100', 
 color: 'white', 
 padding: '8px 12px', 
 borderRadius: '4px', 
 marginBottom: '15px',
 fontSize: '14px',
 fontWeight: '600'
 }}>
 📝 You are currently editing: "{initialData.title}"
 </div>
 )}
 <form onSubmit={handleSubmit}>
 <div className="form-group">
 <label htmlFor="title">Title</label>
Expand DownExpand Up@@ -84,14 +97,14 @@ const TaskForm = ({ onSubmit, initialData, onCancel }) => {
 </div>

 <div className="form-actions">
 <button type="submit" className="btn btn-primary">
 <button type="submit" className={`btn ${initialData ? 'btn-update' : 'btn-primary'}`}>
 {initialData ? 'Update Task' : 'Add Task'}
 </button>

 {onCancel && (
 <button 
 type="button" 
 className="btn btn-secondary" 
 className="btn btn-cancel" 
 onClick={onCancel}
 style={{ marginLeft: '10px' }}
 >
Expand Down

9 changes: 5 additions & 4 deletions
frontend/src/components/TaskItem.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import React from 'react';

const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit, isEditing }) => {
 const formatDate = (dateString) => {
 if (!dateString) return '';
 const date = new Date(dateString);
Expand All@@ -21,7 +21,7 @@ const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
 };

 return (
 <li className={`task-item ${task.completed ? 'completed' : ''} ${getPriorityClass()}`}>
 <li className={`task-item ${task.completed ? 'completed' : ''} ${getPriorityClass()} ${isEditing ? 'editing' : ''}`}>
 <div className="task-content">
 <h3 className="task-title">{task.title}</h3>
 {task.description && <p className="task-description">{task.description}</p>}
Expand All@@ -43,8 +43,9 @@ const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
 </button>
 <button 
 onClick={() => onEdit(task)}
 className="btn"
 style={{ backgroundColor: '#ff9800', color: 'white' }}
 className="btn btn-edit"
 disabled={isEditing}
 title={isEditing ? "Currently editing this task" : "Edit this task"}
 >
 Edit
 </button>
Expand Down

3 changes: 2 additions & 1 deletion
frontend/src/components/TaskList.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import React from 'react';
import TaskItem from './TaskItem';

const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit }) => {
const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit, editingTaskId }) => {
 if (tasks.length === 0) {
 return <p>No tasks found. Add a new task to get started!</p>;
 }
Expand All@@ -15,6 +15,7 @@ const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit }) => {
 onDelete={onDelete}
 onToggleCompletion={onToggleCompletion}
 onEdit={onEdit}
 isEditing={editingTaskId === task.id}
 />
 ))}
 </ul>
Expand Down

120 changes: 120 additions & 0 deletions
frontend/src/index.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,25 @@ code {
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 margin-bottom: 20px;
 transition: all 0.3s ease;
}

.task-form.edit-mode {
 background-color: #fff3e0;
 border: 2px solid #ff9800;
 box-shadow: 0 4px 8px rgba(255, 152, 0, 0.2);
}

.task-form.edit-mode h2 {
 color: #e65100;
 display: flex;
 align-items: center;
 gap: 8px;
}

.task-form.edit-mode h2::before {
 content: "✏️";
 font-size: 1.2em;
}

.form-group {
Expand DownExpand Up@@ -64,6 +83,59 @@ code {
 cursor: pointer;
 font-size: 16px;
 font-weight: 600;
 transition: all 0.2s ease;
}

.btn-edit {
 background-color: #ff9800;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-edit:hover {
 background-color: #f57c00;
 transform: translateY(-1px);
}

.btn-edit::before {
 content: "✏️";
 font-size: 0.9em;
}

.btn-update {
 background-color: #ff9800;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-update:hover {
 background-color: #f57c00;
}

.btn-update::before {
 content: "💾";
 font-size: 0.9em;
}

.btn-cancel {
 background-color: #757575;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-cancel:hover {
 background-color: #616161;
}

.btn-cancel::before {
 content: "❌";
 font-size: 0.8em;
}

.btn-primary {
Expand All@@ -89,6 +161,26 @@ code {
 padding: 0;
}

.task-item.editing {
 background-color: #fff3e0;
 border: 2px solid #ff9800;
 box-shadow: 0 4px 8px rgba(255, 152, 0, 0.2);
 transform: scale(1.02);
}

.task-item.editing::before {
 content: "Currently editing this task";
 position: absolute;
 top: -10px;
 left: 10px;
 background-color: #ff9800;
 color: white;
 padding: 2px 8px;
 border-radius: 4px;
 font-size: 12px;
 font-weight: 600;
}

.task-item {
 background-color: white;
 padding: 15px;
Expand All@@ -98,6 +190,8 @@ code {
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: relative;
 transition: all 0.3s ease;
}

.task-item.completed {
Expand DownExpand Up@@ -161,3 +255,29 @@ code {
.priority-low {
 border-left: 4px solid #4caf50;
}

.error-message {
 background-color: #ffebee;
 color: #c62828;
 padding: 12px;
 border-radius: 4px;
 margin-bottom: 20px;
 border-left: 4px solid #f44336;
}

.success-message {
 background-color: #e8f5e8;
 color: #2e7d32;
 padding: 12px;
 border-radius: 4px;
 margin-bottom: 20px;
 border-left: 4px solid #4caf50;
 display: flex;
 align-items: center;
 gap: 8px;
}

.success-message::before {
 content: "✅";
 font-size: 1.1em;
}

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Ad edit task#6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

amazon-q-developer
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


Ad edit task
#6
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


35 changes: 35 additions & 0 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,10 +5,13 @@ A simple task management application with a Java Spring Boot backend and React f
## Features

- Create, read, update, and delete tasks
- **Enhanced Edit Task Functionality** with visual indicators and user feedback
- Mark tasks as completed
- Filter tasks by status (all, active, completed)
- Set task priority (low, medium, high)
- Set due dates for tasks
- Real-time visual feedback for edit operations
- Intuitive edit mode with distinct styling and notifications


## Tech Stack
Expand DownExpand Up@@ -101,3 +104,35 @@ task-manager/
- `PUT /api/tasks/{id}` - Update a task
- `PATCH /api/tasks/{id}/toggle` - Toggle task completion status
- `DELETE /api/tasks/{id}` - Delete a task

## Edit Task Feature

The application includes a comprehensive edit task functionality with the following enhancements:

### How to Edit a Task

1. **Click the Edit Button**: Each task has an orange "Edit" button (✏️ Edit) in the task actions area
2. **Visual Feedback**: When editing:
 - The task form switches to "Edit Mode" with orange styling and an edit icon
 - The task being edited is highlighted with an orange border and "Currently editing" indicator
 - A notification shows which task you're editing
3. **Make Changes**: Modify any task fields (title, description, priority, due date)
4. **Save or Cancel**: 
 - Click "💾 Update Task" to save changes
 - Click "❌ Cancel" to exit edit mode without saving
5. **Success Confirmation**: A green success message confirms when the task is updated

### Edit Mode Visual Indicators

- **Form Styling**: Orange background and border when in edit mode
- **Task Highlighting**: The task being edited has a distinct orange highlight
- **Button States**: Edit buttons are disabled for the task currently being edited
- **Icons and Emojis**: Visual cues throughout the interface (✏️, 💾, ❌, ✅)
- **Success Messages**: Clear feedback when operations complete successfully

### Technical Implementation

- **Backend**: RESTful PUT endpoint at `/api/tasks/{id}` handles task updates
- **Frontend**: React state management with visual feedback and form validation
- **Real-time Updates**: Immediate UI updates without page refresh
- **Error Handling**: Comprehensive error messages and recovery options

9 changes: 9 additions & 0 deletions
frontend/src/App.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,7 @@ function App() {
 const [error, setError] = useState(null);
 const [filter, setFilter] = useState('all');
 const [editingTask, setEditingTask] = useState(null);
 const [successMessage, setSuccessMessage] = useState(null);

 useEffect(() => {
 fetchTasks();
Expand All@@ -33,6 +34,8 @@ function App() {
 try {
 const newTask = await createTask(taskData);
 setTasks([newTask, ...tasks]);
 setSuccessMessage('Task created successfully!');
 setTimeout(() => setSuccessMessage(null), 3000);
 } catch (err) {
 setError('Failed to create task. Please try again.');
 console.error('Error creating task:', err);
Expand All@@ -44,6 +47,8 @@ function App() {
 const updatedTask = await updateTask(id, taskData);
 setTasks(tasks.map(task => task.id === id ? updatedTask : task));
 setEditingTask(null);
 setSuccessMessage(`Task "${updatedTask.title}" updated successfully!`);
 setTimeout(() => setSuccessMessage(null), 3000);
 } catch (err) {
 setError('Failed to update task. Please try again.');
 console.error('Error updating task:', err);
Expand DownExpand Up@@ -72,6 +77,8 @@ function App() {

 const handleEditTask = (task) => {
 setEditingTask(task);
 setSuccessMessage(null); // Clear any existing success messages
 setError(null); // Clear any existing error messages
 };

 const filteredTasks = tasks.filter(task => {
Expand All@@ -88,6 +95,7 @@ function App() {
 </div>

 {error && <div className="error-message">{error}</div>}
 {successMessage && <div className="success-message">{successMessage}</div>}

 <TaskForm 
 onSubmit={editingTask ? (taskData) => handleUpdateTask(editingTask.id, taskData) : handleCreateTask} 
Expand All@@ -105,6 +113,7 @@ function App() {
 onDelete={handleDeleteTask} 
 onToggleCompletion={handleToggleCompletion}
 onEdit={handleEditTask}
 editingTaskId={editingTask?.id}
 />
 )}
 </div>
Expand Down

19 changes: 16 additions & 3 deletions
frontend/src/components/TaskForm.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -37,8 +37,21 @@ const TaskForm = ({ onSubmit, initialData, onCancel }) => {
 };

 return (
 <div className="task-form">
 <div className={`task-form ${initialData ? 'edit-mode' : ''}`}>
 <h2>{initialData ? 'Edit Task' : 'Add New Task'}</h2>
 {initialData && (
 <div style={{ 
 backgroundColor: '#e65100', 
 color: 'white', 
 padding: '8px 12px', 
 borderRadius: '4px', 
 marginBottom: '15px',
 fontSize: '14px',
 fontWeight: '600'
 }}>
 📝 You are currently editing: "{initialData.title}"
 </div>
 )}
 <form onSubmit={handleSubmit}>
 <div className="form-group">
 <label htmlFor="title">Title</label>
Expand DownExpand Up@@ -84,14 +97,14 @@ const TaskForm = ({ onSubmit, initialData, onCancel }) => {
 </div>

 <div className="form-actions">
 <button type="submit" className="btn btn-primary">
 <button type="submit" className={`btn ${initialData ? 'btn-update' : 'btn-primary'}`}>
 {initialData ? 'Update Task' : 'Add Task'}
 </button>

 {onCancel && (
 <button 
 type="button" 
 className="btn btn-secondary" 
 className="btn btn-cancel" 
 onClick={onCancel}
 style={{ marginLeft: '10px' }}
 >
Expand Down

9 changes: 5 additions & 4 deletions
frontend/src/components/TaskItem.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import React from 'react';

const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit, isEditing }) => {
 const formatDate = (dateString) => {
 if (!dateString) return '';
 const date = new Date(dateString);
Expand All@@ -21,7 +21,7 @@ const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
 };

 return (
 <li className={`task-item ${task.completed ? 'completed' : ''} ${getPriorityClass()}`}>
 <li className={`task-item ${task.completed ? 'completed' : ''} ${getPriorityClass()} ${isEditing ? 'editing' : ''}`}>
 <div className="task-content">
 <h3 className="task-title">{task.title}</h3>
 {task.description && <p className="task-description">{task.description}</p>}
Expand All@@ -43,8 +43,9 @@ const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
 </button>
 <button 
 onClick={() => onEdit(task)}
 className="btn"
 style={{ backgroundColor: '#ff9800', color: 'white' }}
 className="btn btn-edit"
 disabled={isEditing}
 title={isEditing ? "Currently editing this task" : "Edit this task"}
 >
 Edit
 </button>
Expand Down

3 changes: 2 additions & 1 deletion
frontend/src/components/TaskList.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import React from 'react';
import TaskItem from './TaskItem';

const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit }) => {
const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit, editingTaskId }) => {
 if (tasks.length === 0) {
 return <p>No tasks found. Add a new task to get started!</p>;
 }
Expand All@@ -15,6 +15,7 @@ const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit }) => {
 onDelete={onDelete}
 onToggleCompletion={onToggleCompletion}
 onEdit={onEdit}
 isEditing={editingTaskId === task.id}
 />
 ))}
 </ul>
Expand Down

120 changes: 120 additions & 0 deletions
frontend/src/index.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,25 @@ code {
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 margin-bottom: 20px;
 transition: all 0.3s ease;
}

.task-form.edit-mode {
 background-color: #fff3e0;
 border: 2px solid #ff9800;
 box-shadow: 0 4px 8px rgba(255, 152, 0, 0.2);
}

.task-form.edit-mode h2 {
 color: #e65100;
 display: flex;
 align-items: center;
 gap: 8px;
}

.task-form.edit-mode h2::before {
 content: "✏️";
 font-size: 1.2em;
}

.form-group {
Expand DownExpand Up@@ -64,6 +83,59 @@ code {
 cursor: pointer;
 font-size: 16px;
 font-weight: 600;
 transition: all 0.2s ease;
}

.btn-edit {
 background-color: #ff9800;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-edit:hover {
 background-color: #f57c00;
 transform: translateY(-1px);
}

.btn-edit::before {
 content: "✏️";
 font-size: 0.9em;
}

.btn-update {
 background-color: #ff9800;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-update:hover {
 background-color: #f57c00;
}

.btn-update::before {
 content: "💾";
 font-size: 0.9em;
}

.btn-cancel {
 background-color: #757575;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-cancel:hover {
 background-color: #616161;
}

.btn-cancel::before {
 content: "❌";
 font-size: 0.8em;
}

.btn-primary {
Expand All@@ -89,6 +161,26 @@ code {
 padding: 0;
}

.task-item.editing {
 background-color: #fff3e0;
 border: 2px solid #ff9800;
 box-shadow: 0 4px 8px rgba(255, 152, 0, 0.2);
 transform: scale(1.02);
}

.task-item.editing::before {
 content: "Currently editing this task";
 position: absolute;
 top: -10px;
 left: 10px;
 background-color: #ff9800;
 color: white;
 padding: 2px 8px;
 border-radius: 4px;
 font-size: 12px;
 font-weight: 600;
}

.task-item {
 background-color: white;
 padding: 15px;
Expand All@@ -98,6 +190,8 @@ code {
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: relative;
 transition: all 0.3s ease;
}

.task-item.completed {
Expand DownExpand Up@@ -161,3 +255,29 @@ code {
.priority-low {
 border-left: 4px solid #4caf50;
}

.error-message {
 background-color: #ffebee;
 color: #c62828;
 padding: 12px;
 border-radius: 4px;
 margin-bottom: 20px;
 border-left: 4px solid #f44336;
}

.success-message {
 background-color: #e8f5e8;
 color: #2e7d32;
 padding: 12px;
 border-radius: 4px;
 margin-bottom: 20px;
 border-left: 4px solid #4caf50;
 display: flex;
 align-items: center;
 gap: 8px;
}

.success-message::before {
 content: "✅";
 font-size: 1.1em;
}

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Ad edit task#6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

amazon-q-developer
wants to merge
1
commit into

base:main
Choose a base branch

from

 Open


Ad edit task
#6
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


35 changes: 35 additions & 0 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -5,10 +5,13 @@ A simple task management application with a Java Spring Boot backend and React f
## Features

- Create, read, update, and delete tasks
- **Enhanced Edit Task Functionality** with visual indicators and user feedback
- Mark tasks as completed
- Filter tasks by status (all, active, completed)
- Set task priority (low, medium, high)
- Set due dates for tasks
- Real-time visual feedback for edit operations
- Intuitive edit mode with distinct styling and notifications


## Tech Stack
Expand DownExpand Up@@ -101,3 +104,35 @@ task-manager/
- `PUT /api/tasks/{id}` - Update a task
- `PATCH /api/tasks/{id}/toggle` - Toggle task completion status
- `DELETE /api/tasks/{id}` - Delete a task

## Edit Task Feature

The application includes a comprehensive edit task functionality with the following enhancements:

### How to Edit a Task

1. **Click the Edit Button**: Each task has an orange "Edit" button (✏️ Edit) in the task actions area
2. **Visual Feedback**: When editing:
 - The task form switches to "Edit Mode" with orange styling and an edit icon
 - The task being edited is highlighted with an orange border and "Currently editing" indicator
 - A notification shows which task you're editing
3. **Make Changes**: Modify any task fields (title, description, priority, due date)
4. **Save or Cancel**: 
 - Click "💾 Update Task" to save changes
 - Click "❌ Cancel" to exit edit mode without saving
5. **Success Confirmation**: A green success message confirms when the task is updated

### Edit Mode Visual Indicators

- **Form Styling**: Orange background and border when in edit mode
- **Task Highlighting**: The task being edited has a distinct orange highlight
- **Button States**: Edit buttons are disabled for the task currently being edited
- **Icons and Emojis**: Visual cues throughout the interface (✏️, 💾, ❌, ✅)
- **Success Messages**: Clear feedback when operations complete successfully

### Technical Implementation

- **Backend**: RESTful PUT endpoint at `/api/tasks/{id}` handles task updates
- **Frontend**: React state management with visual feedback and form validation
- **Real-time Updates**: Immediate UI updates without page refresh
- **Error Handling**: Comprehensive error messages and recovery options

9 changes: 9 additions & 0 deletions
frontend/src/App.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,7 @@ function App() {
 const [error, setError] = useState(null);
 const [filter, setFilter] = useState('all');
 const [editingTask, setEditingTask] = useState(null);
 const [successMessage, setSuccessMessage] = useState(null);

 useEffect(() => {
 fetchTasks();
Expand All@@ -33,6 +34,8 @@ function App() {
 try {
 const newTask = await createTask(taskData);
 setTasks([newTask, ...tasks]);
 setSuccessMessage('Task created successfully!');
 setTimeout(() => setSuccessMessage(null), 3000);
 } catch (err) {
 setError('Failed to create task. Please try again.');
 console.error('Error creating task:', err);
Expand All@@ -44,6 +47,8 @@ function App() {
 const updatedTask = await updateTask(id, taskData);
 setTasks(tasks.map(task => task.id === id ? updatedTask : task));
 setEditingTask(null);
 setSuccessMessage(`Task "${updatedTask.title}" updated successfully!`);
 setTimeout(() => setSuccessMessage(null), 3000);
 } catch (err) {
 setError('Failed to update task. Please try again.');
 console.error('Error updating task:', err);
Expand DownExpand Up@@ -72,6 +77,8 @@ function App() {

 const handleEditTask = (task) => {
 setEditingTask(task);
 setSuccessMessage(null); // Clear any existing success messages
 setError(null); // Clear any existing error messages
 };

 const filteredTasks = tasks.filter(task => {
Expand All@@ -88,6 +95,7 @@ function App() {
 </div>

 {error && <div className="error-message">{error}</div>}
 {successMessage && <div className="success-message">{successMessage}</div>}

 <TaskForm 
 onSubmit={editingTask ? (taskData) => handleUpdateTask(editingTask.id, taskData) : handleCreateTask} 
Expand All@@ -105,6 +113,7 @@ function App() {
 onDelete={handleDeleteTask} 
 onToggleCompletion={handleToggleCompletion}
 onEdit={handleEditTask}
 editingTaskId={editingTask?.id}
 />
 )}
 </div>
Expand Down

19 changes: 16 additions & 3 deletions
frontend/src/components/TaskForm.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -37,8 +37,21 @@ const TaskForm = ({ onSubmit, initialData, onCancel }) => {
 };

 return (
 <div className="task-form">
 <div className={`task-form ${initialData ? 'edit-mode' : ''}`}>
 <h2>{initialData ? 'Edit Task' : 'Add New Task'}</h2>
 {initialData && (
 <div style={{ 
 backgroundColor: '#e65100', 
 color: 'white', 
 padding: '8px 12px', 
 borderRadius: '4px', 
 marginBottom: '15px',
 fontSize: '14px',
 fontWeight: '600'
 }}>
 📝 You are currently editing: "{initialData.title}"
 </div>
 )}
 <form onSubmit={handleSubmit}>
 <div className="form-group">
 <label htmlFor="title">Title</label>
Expand DownExpand Up@@ -84,14 +97,14 @@ const TaskForm = ({ onSubmit, initialData, onCancel }) => {
 </div>

 <div className="form-actions">
 <button type="submit" className="btn btn-primary">
 <button type="submit" className={`btn ${initialData ? 'btn-update' : 'btn-primary'}`}>
 {initialData ? 'Update Task' : 'Add Task'}
 </button>

 {onCancel && (
 <button 
 type="button" 
 className="btn btn-secondary" 
 className="btn btn-cancel" 
 onClick={onCancel}
 style={{ marginLeft: '10px' }}
 >
Expand Down

9 changes: 5 additions & 4 deletions
frontend/src/components/TaskItem.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import React from 'react';

const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit, isEditing }) => {
 const formatDate = (dateString) => {
 if (!dateString) return '';
 const date = new Date(dateString);
Expand All@@ -21,7 +21,7 @@ const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
 };

 return (
 <li className={`task-item ${task.completed ? 'completed' : ''} ${getPriorityClass()}`}>
 <li className={`task-item ${task.completed ? 'completed' : ''} ${getPriorityClass()} ${isEditing ? 'editing' : ''}`}>
 <div className="task-content">
 <h3 className="task-title">{task.title}</h3>
 {task.description && <p className="task-description">{task.description}</p>}
Expand All@@ -43,8 +43,9 @@ const TaskItem = ({ task, onDelete, onToggleCompletion, onEdit }) => {
 </button>
 <button 
 onClick={() => onEdit(task)}
 className="btn"
 style={{ backgroundColor: '#ff9800', color: 'white' }}
 className="btn btn-edit"
 disabled={isEditing}
 title={isEditing ? "Currently editing this task" : "Edit this task"}
 >
 Edit
 </button>
Expand Down

3 changes: 2 additions & 1 deletion
frontend/src/components/TaskList.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import React from 'react';
import TaskItem from './TaskItem';

const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit }) => {
const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit, editingTaskId }) => {
 if (tasks.length === 0) {
 return <p>No tasks found. Add a new task to get started!</p>;
 }
Expand All@@ -15,6 +15,7 @@ const TaskList = ({ tasks, onDelete, onToggleCompletion, onEdit }) => {
 onDelete={onDelete}
 onToggleCompletion={onToggleCompletion}
 onEdit={onEdit}
 isEditing={editingTaskId === task.id}
 />
 ))}
 </ul>
Expand Down

120 changes: 120 additions & 0 deletions
frontend/src/index.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -30,6 +30,25 @@ code {
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 margin-bottom: 20px;
 transition: all 0.3s ease;
}

.task-form.edit-mode {
 background-color: #fff3e0;
 border: 2px solid #ff9800;
 box-shadow: 0 4px 8px rgba(255, 152, 0, 0.2);
}

.task-form.edit-mode h2 {
 color: #e65100;
 display: flex;
 align-items: center;
 gap: 8px;
}

.task-form.edit-mode h2::before {
 content: "✏️";
 font-size: 1.2em;
}

.form-group {
Expand DownExpand Up@@ -64,6 +83,59 @@ code {
 cursor: pointer;
 font-size: 16px;
 font-weight: 600;
 transition: all 0.2s ease;
}

.btn-edit {
 background-color: #ff9800;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-edit:hover {
 background-color: #f57c00;
 transform: translateY(-1px);
}

.btn-edit::before {
 content: "✏️";
 font-size: 0.9em;
}

.btn-update {
 background-color: #ff9800;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-update:hover {
 background-color: #f57c00;
}

.btn-update::before {
 content: "💾";
 font-size: 0.9em;
}

.btn-cancel {
 background-color: #757575;
 color: white;
 display: flex;
 align-items: center;
 gap: 5px;
}

.btn-cancel:hover {
 background-color: #616161;
}

.btn-cancel::before {
 content: "❌";
 font-size: 0.8em;
}

.btn-primary {
Expand All@@ -89,6 +161,26 @@ code {
 padding: 0;
}

.task-item.editing {
 background-color: #fff3e0;
 border: 2px solid #ff9800;
 box-shadow: 0 4px 8px rgba(255, 152, 0, 0.2);
 transform: scale(1.02);
}

.task-item.editing::before {
 content: "Currently editing this task";
 position: absolute;
 top: -10px;
 left: 10px;
 background-color: #ff9800;
 color: white;
 padding: 2px 8px;
 border-radius: 4px;
 font-size: 12px;
 font-weight: 600;
}

.task-item {
 background-color: white;
 padding: 15px;
Expand All@@ -98,6 +190,8 @@ code {
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: relative;
 transition: all 0.3s ease;
}

.task-item.completed {
Expand DownExpand Up@@ -161,3 +255,29 @@ code {
.priority-low {
 border-left: 4px solid #4caf50;
}

.error-message {
 background-color: #ffebee;
 color: #c62828;
 padding: 12px;
 border-radius: 4px;
 margin-bottom: 20px;
 border-left: 4px solid #f44336;
}

.success-message {
 background-color: #e8f5e8;
 color: #2e7d32;
 padding: 12px;
 border-radius: 4px;
 margin-bottom: 20px;
 border-left: 4px solid #4caf50;
 display: flex;
 align-items: center;
 gap: 8px;
}

.success-message::before {
 content: "✅";
 font-size: 1.1em;
}