Skip to content

Commit e49f914

Browse files
spencerfrostspencerfrost
committed
feat: Implement category management with CRUD operations and update task model
1 parent 00e910a commit e49f914

10 files changed

+360
-36
lines changed

‎client/src/components/CategoryManager.tsx

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import { Button } from 'components/ui/button';
2+
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from 'components/ui/dialog';
3+
import { Input } from 'components/ui/input';
4+
import { Label } from 'components/ui/label';
5+
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from 'components/ui/select';
6+
import { useToast } from 'components/ui/use-toast';
7+
import React, { useEffect, useState } from 'react';
8+
import { createCategory, getCategories } from 'services/api';
9+
import { Category } from 'services/types';
10+
11+
interface CategoryManagerProps {
12+
onCategorySelect: (categoryId: number) => void;
13+
selectedCategoryId?: number;
14+
}
15+
16+
const COLORS = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#FFA500', '#800080', '#008000', '#FFC0CB'];
17+
18+
const CategoryManager: React.FC<CategoryManagerProps> = ({ onCategorySelect, selectedCategoryId }) => {
19+
const [categories, setCategories] = useState<Category[]>([]);
20+
const [isDialogOpen, setIsDialogOpen] = useState(false);
21+
const [newCategoryName, setNewCategoryName] = useState('');
22+
const [newCategoryColor, setNewCategoryColor] = useState(COLORS[0]);
23+
const { toast } = useToast();
24+
25+
useEffect(() => {
26+
fetchCategories();
27+
}, []);
28+
29+
const fetchCategories = async () => {
30+
try {
31+
const fetchedCategories = await getCategories();
32+
setCategories(fetchedCategories);
33+
} catch (error) {
34+
console.error('Error fetching categories:', error);
35+
toast({
36+
title: 'Error',
37+
description: 'Failed to fetch categories',
38+
variant: 'destructive',
39+
});
40+
}
41+
};
42+
43+
const handleCreateCategory = async () => {
44+
try {
45+
const newCategory = await createCategory({
46+
name: newCategoryName,
47+
color: newCategoryColor,
48+
});
49+
await fetchCategories();
50+
setIsDialogOpen(false);
51+
setNewCategoryName('');
52+
setNewCategoryColor(COLORS[0]);
53+
toast({
54+
title: 'Success',
55+
description: 'Category created successfully',
56+
});
57+
onCategorySelect(newCategory.id);
58+
} catch (error) {
59+
console.error('Error creating category:', error);
60+
toast({
61+
title: 'Error',
62+
description: 'Failed to create category',
63+
variant: 'destructive',
64+
});
65+
}
66+
};
67+
68+
const handleSelectChange = (value: string) => {
69+
if (value === 'create') {
70+
setIsDialogOpen(true);
71+
} else {
72+
onCategorySelect(Number(value));
73+
}
74+
};
75+
76+
return (
77+
<>
78+
<Select onValueChange={handleSelectChange} value={selectedCategoryId?.toString()}>
79+
<SelectTrigger>
80+
<SelectValue placeholder="Select a category" />
81+
</SelectTrigger>
82+
<SelectContent>
83+
{categories.map((category) => (
84+
<SelectItem key={category.id} value={category.id.toString()}>
85+
<span style={{ color: category.color }}>{category.name}</span>
86+
</SelectItem>
87+
))}
88+
<SelectItem value="create">Create Category</SelectItem>
89+
</SelectContent>
90+
</Select>
91+
92+
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
93+
<DialogContent>
94+
<DialogHeader>
95+
<DialogTitle>Create Category</DialogTitle>
96+
</DialogHeader>
97+
<div className="space-y-4">
98+
<div>
99+
<Label htmlFor="categoryName">Name</Label>
100+
<Input
101+
id="categoryName"
102+
value={newCategoryName}
103+
onChange={(e) => setNewCategoryName(e.target.value)}
104+
/>
105+
</div>
106+
<div>
107+
<Label htmlFor="categoryColor">Color</Label>
108+
<Select onValueChange={setNewCategoryColor} value={newCategoryColor}>
109+
<SelectTrigger>
110+
<SelectValue placeholder="Select a color" />
111+
</SelectTrigger>
112+
<SelectContent>
113+
{COLORS.map((color) => (
114+
<SelectItem key={color} value={color}>
115+
<div className="flex items-center">
116+
<div className="w-4 h-4 mr-2 rounded-full" style={{ backgroundColor: color }}></div>
117+
{color}
118+
</div>
119+
</SelectItem>
120+
))}
121+
</SelectContent>
122+
</Select>
123+
</div>
124+
</div>
125+
<DialogFooter>
126+
<Button onClick={() => setIsDialogOpen(false)}>Cancel</Button>
127+
<Button onClick={handleCreateCategory}>Create</Button>
128+
</DialogFooter>
129+
</DialogContent>
130+
</Dialog>
131+
</>
132+
);
133+
};
134+
135+
export default CategoryManager;

‎client/src/components/TaskForm.tsx

+29-20
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
import { Trash2 } from "lucide-react";
2-
import React, { useEffect, useState } from "react";
3-
41
import { Button } from "components/ui/button";
52
import {
63
Dialog,
@@ -20,6 +17,10 @@ import {
2017
SelectValue,
2118
} from "components/ui/select";
2219

20+
import CategoryManager from "components/CategoryManager";
21+
22+
import { Trash2 } from "lucide-react";
23+
import React, { useEffect, useState } from "react";
2324
import { createTask, updateTask } from "services/api";
2425
import { Task } from "services/types";
2526

@@ -41,12 +42,14 @@ const TaskForm: React.FC<TaskFormProps> = ({
4142

4243
useEffect(() => {
4344
setEditedTask(
44-
task ?? { id: 0, title: "", description: "", completed: false } as Task
45+
task ?? ({ id: 0, title: "", description: "", completed: false } as Task)
4546
);
4647
}, [task]);
4748

4849
const handleInputChange = (
49-
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
50+
e:
51+
| React.ChangeEvent<HTMLInputElement>
52+
| React.ChangeEvent<HTMLSelectElement>
5053
) => {
5154
const { name, value } = e.target;
5255
setEditedTask((prev) => (prev ? { ...prev, [name]: value } : null));
@@ -63,11 +66,16 @@ const TaskForm: React.FC<TaskFormProps> = ({
6366
return;
6467
}
6568
try {
69+
// Create a new object without category_name and category_color
70+
const { category_name, category_color, ...taskToSubmit } = editedTask;
71+
6672
let updatedTask: Task;
6773
if (editedTask.id === 0) {
68-
updatedTask = await createTask(editedTask);
74+
// Create new task
75+
updatedTask = await createTask(taskToSubmit);
6976
} else {
70-
updatedTask = await updateTask(editedTask.id, editedTask);
77+
// Update existing task
78+
updatedTask = await updateTask(editedTask.id, taskToSubmit);
7179
}
7280
onTaskUpdated(updatedTask);
7381
onClose();
@@ -76,6 +84,7 @@ const TaskForm: React.FC<TaskFormProps> = ({
7684
}
7785
}
7886
};
87+
7988

8089
const handleKeyDown = (e: React.KeyboardEvent) => {
8190
if (e.key === "Enter" && !e.shiftKey) {
@@ -88,7 +97,10 @@ const TaskForm: React.FC<TaskFormProps> = ({
8897

8998
return (
9099
<Dialog open={!!task} onOpenChange={onClose}>
91-
<DialogContent className="sm:max-w-[425px]" data-testid="task-form-dialog">
100+
<DialogContent
101+
className="sm:max-w-[425px]"
102+
data-testid="task-form-dialog"
103+
>
92104
<DialogHeader>
93105
<DialogTitle>
94106
{editedTask.id === 0 ? "Create Task" : "Edit Task"}
@@ -111,9 +123,7 @@ const TaskForm: React.FC<TaskFormProps> = ({
111123
data-testid="task-title-input"
112124
className={titleError ? "border-red-500" : ""}
113125
/>
114-
{titleError && (
115-
<p className="text-red-500 text-sm">{titleError}</p>
116-
)}
126+
{titleError && <p className="text-red-500 text-sm">{titleError}</p>}
117127
</div>
118128
<div className="space-y-2">
119129
<Label htmlFor="description">Description</Label>
@@ -173,14 +183,13 @@ const TaskForm: React.FC<TaskFormProps> = ({
173183
</div>
174184
<div className="space-y-2">
175185
<Label htmlFor="category">Category</Label>
176-
<Input
177-
id="category"
178-
type="text"
179-
name="category"
180-
value={editedTask.category ?? ""}
181-
onChange={handleInputChange}
182-
onKeyDown={handleKeyDown}
183-
placeholder="Category"
186+
<CategoryManager
187+
onCategorySelect={(categoryId) =>
188+
setEditedTask((prev) =>
189+
prev ? { ...prev, category_id: categoryId } : null
190+
)
191+
}
192+
selectedCategoryId={editedTask.category_id}
184193
/>
185194
</div>
186195
<div className="space-y-2">
@@ -237,4 +246,4 @@ const TaskForm: React.FC<TaskFormProps> = ({
237246
);
238247
};
239248

240-
export default TaskForm;
249+
export default TaskForm;

‎client/src/services/api.ts

+26-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import axios from "axios";
2-
import { Task, UserSettings } from "services/types";
2+
import { Category, Task, UserSettings } from "services/types";
33

44
const API_URL = process.env.NODE_ENV === "production" ? "https://taskmaster.mrspinn.ca/api" : "http://localhost:5000/api";
55

@@ -20,6 +20,7 @@ axiosInstance.interceptors.request.use(
2020
}
2121
);
2222

23+
// Existing task-related API calls
2324
export const getTasks = async (): Promise<Task[]> => {
2425
const response = await axiosInstance.get("/tasks");
2526
return response.data;
@@ -42,7 +43,30 @@ export const deleteTask = async (id: number): Promise<void> => {
4243
await axiosInstance.delete(`/tasks/${id}`);
4344
};
4445

45-
// Settings-related API calls
46+
// New category-related API calls
47+
export const getCategories = async (): Promise<Category[]> => {
48+
const response = await axiosInstance.get("/categories");
49+
return response.data;
50+
};
51+
52+
export const createCategory = async (category: Omit<Category, "id" | "user_id">): Promise<Category> => {
53+
const response = await axiosInstance.post("/categories", category);
54+
return response.data;
55+
};
56+
57+
export const updateCategory = async (
58+
id: number,
59+
category: Partial<Category>
60+
): Promise<Category> => {
61+
const response = await axiosInstance.put(`/categories/${id}`, category);
62+
return response.data;
63+
};
64+
65+
export const deleteCategory = async (id: number): Promise<void> => {
66+
await axiosInstance.delete(`/categories/${id}`);
67+
};
68+
69+
// Existing settings-related API calls
4670
export const getSettings = async (): Promise<UserSettings> => {
4771
const response = await axiosInstance.get("/settings");
4872
return response.data;

‎client/src/services/types.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,17 @@ export interface Task {
1616
priority?: "Low" | "Medium" | "High";
1717
estimated_time?: number;
1818
due_date?: string;
19-
category?: string;
19+
category_id?: number;
2020
location?: string;
2121
energy_level?: "Low" | "Medium" | "High";
2222
completed: boolean;
2323
created_at: string;
24+
category_name?: string;
25+
category_color?: string;
26+
}
27+
28+
export interface Category {
29+
id: number;
30+
name: string;
31+
color?: string;
2432
}

‎server/jest.config.js

-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,4 @@ module.exports = {
77
moduleNameMapper: {
88
'^@/(.*)$': '<rootDir>/src/$1',
99
},
10-
scripts: {
11-
"test": "cross-env NODE_ENV=test jest --detectOpenHandles"
12-
},
1310
};

‎server/migrations/20240927204226_create_categories_table.ts

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Knex } from "knex";
2+
3+
export async function up(knex: Knex): Promise<void> {
4+
// Create categories table
5+
await knex.schema.createTable("categories", (table) => {
6+
table.increments("id").primary();
7+
table.integer("user_id").unsigned().notNullable();
8+
table.foreign("user_id").references("users.id").onDelete("CASCADE");
9+
table.string("name").notNullable();
10+
table.string("color").nullable();
11+
table.timestamps(true, true);
12+
});
13+
14+
// Remove category column and add category_id to tasks table
15+
await knex.schema.alterTable("tasks", (table) => {
16+
table.dropColumn("category");
17+
table.integer("category_id").unsigned().nullable();
18+
table.foreign("category_id").references("categories.id").onDelete("SET NULL");
19+
});
20+
}
21+
22+
export async function down(knex: Knex): Promise<void> {
23+
// Add category and remove category_id from tasks table
24+
await knex.schema.alterTable("tasks", (table) => {
25+
table.string("category").nullable();
26+
table.dropForeign(["category_id"]);
27+
table.dropColumn("category_id");
28+
});
29+
30+
// Drop categories table
31+
await knex.schema.dropTable("categories");
32+
}

0 commit comments

Comments
 (0)