Skip to content

Commit 3d5b4a5

Browse files
PrecipiceePrecipicee
authored
Merge branch 'use_uv' into issue-7-Allow_CRUD_Operations_on_Tasks
2 parents 1d59eba + 3cb9997 commit 3d5b4a5

23 files changed

Lines changed: 617 additions & 357 deletions

‎client/src/components/task_form.tsx‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -104,34 +104,39 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
104104
return (
105105
<form
106106
onSubmit={handleSubmit}
107-
className="mx-auto h-[79vh] w-full max-w-md space-y-4 overflow-y-auto rounded-xl bg-zinc-700 p-4"
107+
className="task-form flex h-full w-full flex-col items-center justify-between gap-2 rounded-lg bg-slate-400 p-4 text-slate-200"
108108
>
109109
<input
110+
className="title-input w-full rounded-lg bg-slate-400 px-3 py-1 text-3xl font-bold text-slate-100 brightness-90 placeholder:text-slate-300 hover:brightness-110"
110111
type="text"
111112
value={taskName}
112113
onChange={(e) => setTaskName(e.target.value)}
113-
placeholder="Task Name"
114-
className="w-full rounded border-2 bg-zinc-700 p-2 text-zinc-200"
114+
placeholder="Task name"
115115
required
116116
/>
117-
<textarea
118-
value={description}
119-
onChange={(e) => setDescription(e.target.value)}
120-
placeholder="Description"
121-
className="h-32 w-full resize-none rounded border-2 bg-zinc-700 p-2 text-zinc-200"
122-
/>
123-
<TimeInput times={times} setTimes={setTimes} />
117+
<div className="description-wrapper flex w-full flex-col items-center">
118+
<h1 className="description-input-title text-xl hover:brightness-110">
119+
Description
120+
</h1>
121+
<textarea
122+
className="description-input w-full rounded-lg bg-slate-400 p-2 brightness-90 placeholder:text-slate-300 hover:brightness-110"
123+
value={description}
124+
onChange={(e) => setDescription(e.target.value)}
125+
rows={7}
126+
placeholder="Add description here..."
127+
/>
128+
</div>
124129
<TopicInput
125130
availableTopics={availableTopics}
126131
topics={topics}
127132
setTopics={setTopics}
128133
/>
129-
134+
<TimeInput times={times} setTimes={setTimes} />
130135
<button
136+
className="w-fit rounded-lg border border-slate-300 bg-slate-400 px-3 py-1 text-xl brightness-110 hover:brightness-125"
131137
type="submit"
132-
className="rounded border-2 border-zinc-200 bg-blue-600 px-4 py-2 text-zinc-200 hover:bg-blue-700"
133138
>
134-
Add Task
139+
Save
135140
</button>
136141
</form>
137142
);

‎client/src/components/task_item.tsx‎

Lines changed: 84 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import { useState } from "react";
2+
import { FaRegEdit } from "react-icons/fa";
3+
import { FaRegTrashCan } from "react-icons/fa6";
24

35
import { TimeInput } from "@/components/time_input";
6+
import TimeTag, { DayTag } from "@/components/time_tag";
47
import { TopicInput } from "@/components/topic_input";
8+
import { TopicTagAlt } from "@/components/topic_tag";
59

610
interface Time {
711
id: number;
@@ -130,52 +134,61 @@ export function TaskItem({
130134
/* Item Display */
131135
}
132136
return (
133-
<div className="m-1 flex w-96 flex-col rounded-md border-2 border-zinc-200 bg-zinc-700 p-2">
134-
<div className="flex items-center justify-between">
137+
<div className="task flex h-fit w-full max-w-[48rem] flex-col gap-3 rounded-lg bg-slate-400 p-5 text-slate-200 shadow-xl">
138+
<div className="task-title-container flex w-full flex-row items-center justify-start gap-2 text-3xl font-bold text-slate-100 hover:text-slate-100">
135139
{/* Task Name and Completion */}
136-
<div className="flex items-center space-x-2">
140+
<input
141+
className="task-completion mr-3 accent-slate-300"
142+
type="checkbox"
143+
checked={item.completed}
144+
onChange={() => onToggle?.(item.id)}
145+
/>
146+
{isEditing ? (
137147
<input
138-
type="checkbox"
139-
checked={item.completed}
140-
onChange={() => onToggle?.(item.id)}
141-
className="w-xl h-xl accent-zinc-600"
148+
className="task-title-edit w-full rounded-lg bg-slate-400 px-3 py-1 brightness-90 hover:brightness-110"
149+
value={draftName}
150+
onChange={(e) => setDraftName(e.target.value)}
142151
/>
143-
{isEditing ? (
144-
<input
145-
value={draftName}
146-
onChange={(e) => setDraftName(e.target.value)}
147-
className="rounded border-2 bg-zinc-600 p-1 text-zinc-200"
148-
/>
149-
) : (
152+
) : (
153+
<>
150154
<span
151155
className={
152-
item.completed ? "text-zinc-400 line-through" : "text-zinc-300"
156+
"task-title w-full" + (item.completed ? " line-through" : "")
153157
}
154158
>
155159
{item.name}
156160
</span>
157-
)}
158-
</div>
161+
<button className="hover:brightness-110" onClick={startEdit}>
162+
<FaRegEdit className="h-5 w-5" />
163+
</button>
164+
<button onClick={() => onDelete(item.id)}>
165+
<FaRegTrashCan className="h-5 w-5 hover:text-red-600" />
166+
</button>
167+
</>
168+
)}
169+
</div>
159170

160-
{/* Task Times */}
161-
<div className="flex flex-col items-end text-sm text-zinc-300">
162-
{isEditing ? (
163-
<TimeInput times={draftTimes} setTimes={setDraftTimes} />
164-
) : item.times?.length > 0 ? (
165-
item.times.map((t) => (
166-
<span key={t.id}>
167-
{formatDay(t.day)} {t.start_time.slice(0, 5)} -{" "}
168-
{t.end_time.slice(0, 5)}
169-
</span>
170-
))
171-
) : (
172-
"No time set"
173-
)}
174-
</div>
171+
{/* Task Times */}
172+
<div className="task-times-container flex flex-row flex-wrap items-start justify-start gap-y-1">
173+
{isEditing ? (
174+
<TimeInput times={draftTimes} setTimes={setDraftTimes} />
175+
) : item.times?.length > 0 ? (
176+
item.times.map((time) => (
177+
<div
178+
key={time.id}
179+
className="day-time-tags flex w-fit flex-row gap-3 rounded-full bg-slate-400 px-3 py-1 hover:brightness-110"
180+
>
181+
<DayTag day={formatDay(time.day)} />
182+
<TimeTag start_time={time.start_time} end_time={time.end_time} />
183+
</div>
184+
))
185+
) : (
186+
"No time set"
187+
)}
175188
</div>
176189

177190
{/* Task Topics */}
178-
<div className="flex flex-wrap gap-1 text-sm text-zinc-300">
191+
<div className="task-topic-tags flex flex-row flex-wrap gap-1 text-slate-200">
179192
{isEditing ? (
180193
<TopicInput
181194
availableTopics={availableTopics}
@@ -184,73 +197,69 @@ export function TaskItem({
184197
/>
185198
) : item.topics.length > 0 ? (
186199
item.topics.map((topic) => (
187-
<span
200+
<TopicTagAlt
188201
key={topic.id}
189-
className="flex items-center gap-1 rounded-lg border-2 border-zinc-500 px-2 py-0.5 text-zinc-100"
190-
>
191-
<span
192-
className="h-2 w-2 rounded-full"
193-
style={{
194-
backgroundColor: `#${topic.color_hex
195-
.toString(16)
196-
.padStart(6, "0")}`,
197-
}}
198-
/>
199-
{topic.name}
200-
</span>
202+
name={topic.name}
203+
color_hex={topic.color_hex}
204+
/>
201205
))
202206
) : (
203207
"No topics"
204208
)}
205209
</div>
206210

207211
{/* Task Description */}
208-
<div>
212+
<div
213+
className="task-description overflow-auto text-justify text-slate-200"
214+
style={!isEditing ? { maxHeight: "12rem", scrollbarWidth: "thin" } : {}}
215+
>
209216
{isEditing ? (
210-
<textarea
211-
value={draftDescription}
212-
onChange={(e) => setDraftDescription(e.target.value)}
213-
className="mt-2 w-full rounded border-2 bg-zinc-600 p-1 text-zinc-200"
214-
/>
215-
) : item.description ? (
216-
<span className="mt-2 block text-zinc-300">{item.description}</span>
217+
<div className="task-description-input-container flex flex-col items-center gap-2">
218+
<h1 className="description-input-title text-xl hover:brightness-110">
219+
Description
220+
</h1>
221+
<textarea
222+
className="w-full rounded-lg bg-slate-400 p-1 brightness-90 hover:brightness-110"
223+
value={draftDescription}
224+
rows={7}
225+
onChange={(e) => setDraftDescription(e.target.value)}
226+
/>
227+
</div>
217228
) : (
218-
<span className="mt-2 block italic text-zinc-500">
219-
No description.
229+
<span className="block hover:brightness-110">
230+
{item.description ? item.description : "No Description"}
220231
</span>
221232
)}
222233
</div>
223234

224235
{/* Edit Button */}
225-
<div className="mt-2 flex gap-2">
236+
237+
<div className="task-edit flex gap-2">
226238
{isEditing ? (
227-
<>
228-
<button onClick={saveEdit} disabled={saving}>
239+
<div className="flex w-full flex-row justify-center text-lg">
240+
<button
241+
className="rounded-full bg-slate-400 px-3 py-1 hover:brightness-110"
242+
onClick={saveEdit}
243+
disabled={saving}
244+
>
229245
Save
230246
</button>
231-
<button onClick={cancelEdit}>Cancel</button>
232-
</>
247+
<button
248+
className="rounded-full bg-slate-400 px-3 py-1 hover:brightness-110"
249+
onClick={cancelEdit}
250+
>
251+
Cancel
252+
</button>
253+
</div>
233254
) : (
234-
<button onClick={startEdit}>Edit</button>
235-
)}
236-
</div>
237-
238-
{/* Delete Button */}
239-
<div>
240-
{!isEditing && (
241-
<button
242-
onClick={() => onDelete(item.id)}
243-
className="mt-2 text-red-500"
244-
>
245-
Delete Task
246-
</button>
255+
<></>
247256
)}
248257
</div>
249258
</div>
250259
);
251260
}
252261

253-
function formatDay(day: number): string {
262+
export function formatDay(day: number): string {
254263
const days = [
255264
"Monday",
256265
"Tuesday",

‎client/src/components/task_list.tsx‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -41,25 +41,23 @@ export function TaskList({
4141
if (items.length === 0) {
4242
return (
4343
<div>
44-
<p className="text-center text-zinc-300">No tasks available.</p>
44+
<p className="text-center text-slate-300">No tasks available.</p>
4545
</div>
4646
);
4747
}
4848
return (
49-
<div className="mx-auto h-[79vh] w-full max-w-md overflow-y-auto p-2">
50-
<ul className="space-y-2">
51-
{items.map((item) => (
52-
<li key={item.id}>
53-
<TaskItem
54-
item={item}
55-
onToggle={onToggleTask}
56-
onUpdate={onUpdate}
57-
onDelete={onDelete}
58-
availableTopics={availableTopics}
59-
/>
60-
</li>
61-
))}
62-
</ul>
63-
</div>
49+
<ul className="task-list h-fit space-y-3">
50+
{items.map((item) => (
51+
<li key={item.id}>
52+
<TaskItem
53+
item={item}
54+
onToggle={onToggleTask}
55+
onUpdate={onUpdate}
56+
onDelete={onDelete}
57+
availableTopics={availableTopics}
58+
/>
59+
</li>
60+
))}
61+
</ul>
6462
);
6563
}

0 commit comments

Comments
 (0)