Skip to content

fix(#200): show createdBy on edit modal and remove from table #212

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
MayankBansal12 wants to merge 1 commit into
base: develop
Choose a base branch
from
+36 −6
Open

fix(#200): show createdBy on edit modal and remove from table #212

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
31 changes: 30 additions & 1 deletion src/components/todos/create-edit-todo-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { cn, isPastDate } from '@/lib/utils'
import { SelectLabels } from '@/modules/dashboard/components/select-labels'
import { zodResolver } from '@hookform/resolvers/zod'
import { useQuery } from '@tanstack/react-query'
import { CalendarIcon, CircleDotIcon, LucideIcon, PlayIcon, TagIcon } from 'lucide-react'
import { CalendarIcon, CircleDotIcon, LucideIcon, PlayIcon, TagIcon, UserIcon } from 'lucide-react'
import { useState } from 'react'
import { Controller, useForm, UseFormWatch } from 'react-hook-form'
import { z } from 'zod'
Expand All @@ -40,6 +40,12 @@ const todoFormSchema = z.object({
},
{ error: 'Assignee is required' },
),
createdBy: z
.object({
label: z.string(),
value: z.string(),
})
.optional(),
})

export type TTodoFormData = z.infer<typeof todoFormSchema>
Expand Down Expand Up @@ -134,6 +140,7 @@ export const CreateEditTodoForm = ({
status: initialData?.status || TASK_STATUS_ENUM.TODO,
labels: initialData?.labels || [],
assignee: initialData?.assignee || undefined,
createdBy: initialData?.createdBy || undefined,
},
})

Expand Down Expand Up @@ -327,6 +334,28 @@ export const CreateEditTodoForm = ({
</FormInput>
)}
/>

{mode === 'edit' && (
<Controller
control={control}
name="createdBy"
render={({ field }) => (
<FormInput
label="Created By"
htmlFor="createdBy"
icon={UserIcon}
errorMessage={errors.createdBy?.message}
>
<Input
{...field}
value={field.value?.label ?? '--'}
readOnly
className="cursor-default border-0 text-gray-700 shadow-none focus:ring-0 focus:outline-none focus-visible:ring-0"
/>
</FormInput>
)}
/>
)}
Comment on lines +338 to +358
Copy link

@coderabbitai coderabbitai bot Sep 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Simplify field props for read-only input.

The {...field} spread on line 350 passes unnecessary handlers (onChange, onBlur, etc.) to a read-only Input. For a read-only field, only name and ref are needed.

Apply this diff to pass only the necessary props:

                <FormInput
                  label="Created By"
                  htmlFor="createdBy"
                  icon={UserIcon}
                  errorMessage={errors.createdBy?.message}
                >
                  <Input
-                    {...field}
+                    name={field.name}
+                    ref={field.ref}
                    value={field.value?.label ?? '--'}
                    readOnly
                    className="cursor-default border-0 text-gray-700 shadow-none focus:ring-0 focus:outline-none focus-visible:ring-0"
                  />
                </FormInput>

Alternatively, if you want to keep accessibility attributes, you can also add aria-readonly="true" for better screen reader support:

                  <Input
-                    {...field}
+                    name={field.name}
+                    ref={field.ref}
                    value={field.value?.label ?? '--'}
                    readOnly
+                    aria-readonly="true"
                    className="cursor-default border-0 text-gray-700 shadow-none focus:ring-0 focus:outline-none focus-visible:ring-0"
                  />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{mode === 'edit' && (
<Controller
control={control}
name="createdBy"
render={({ field }) => (
<FormInput
label="Created By"
htmlFor="createdBy"
icon={UserIcon}
errorMessage={errors.createdBy?.message}
>
<Input
{...field}
value={field.value?.label ?? '--'}
readOnly
className="cursor-default border-0 text-gray-700 shadow-none focus:ring-0 focus:outline-none focus-visible:ring-0"
/>
</FormInput>
)}
/>
)}
{mode === 'edit' && (
<Controller
control={control}
name="createdBy"
render={({ field }) => (
<FormInput
label="Created By"
htmlFor="createdBy"
icon={UserIcon}
errorMessage={errors.createdBy?.message}
>
<Input
name={field.name}
ref={field.ref}
value={field.value?.label ?? '--'}
readOnly
className="cursor-default border-0 text-gray-700 shadow-none focus:ring-0 focus:outline-none focus-visible:ring-0"
/>
</FormInput>
)}
/>
)}
🤖 Prompt for AI Agents 
In src/components/todos/create-edit-todo-form.tsx around lines 338 to 358, the
Controller currently spreads {...field} into a read-only Input which passes
unnecessary event handlers; replace the spread with only the minimal props
required for a read-only field (e.g., name, ref and value) and set readOnly plus
aria-readonly="true" on the Input to preserve accessibility while avoiding
onChange/onBlur handlers being passed.

</div>
</div>

Expand Down
3 changes: 0 additions & 3 deletions src/components/todos/todo-list-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ export const TodoListTableHeader = ({
<TableHead className="text-black">Label</TableHead>
<TableHead className="text-black">Priority</TableHead>
<TableHead className="text-black">Assignee</TableHead>
<TableHead className="text-black">Created By</TableHead>
<TableHead className="text-black">Due Date</TableHead>
{showDeferredColumn && <TableHead className="text-black">Deferred Until</TableHead>}
{showActions && <TableHead className="text-black">Actions</TableHead>}
Expand Down Expand Up @@ -75,8 +74,6 @@ const TodoListTableRow = ({

<TableCell className="whitespace-nowrap">{todo.assignee?.assignee_name ?? '--'}</TableCell>

<TableCell className="whitespace-nowrap">{todo.createdBy?.name ?? '--'}</TableCell>

<TableCell className="whitespace-nowrap">
{todo.dueAt ? new DateUtil(todo.dueAt).format(DateFormats.D_MMM_YYYY) : '--'}
</TableCell>
Expand Down
6 changes: 6 additions & 0 deletions src/lib/todo-util.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,12 @@ export class TodoUtil {
type: todo.assignee.user_type,
}
: undefined,
createdBy: todo.createdBy
? {
label: todo.createdBy.name,
value: todo.createdBy.id,
}
: undefined,
}
}
}
2 changes: 0 additions & 2 deletions src/modules/teams/team-tasks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,6 @@ const TodoListTableRow = ({ todo, team }: TodoListTableRowProps) => {

<TableCell className="whitespace-nowrap">{todo.assignee?.assignee_name ?? '--'}</TableCell>

<TableCell className="whitespace-nowrap">{todo.createdBy?.name ?? '--'}</TableCell>

<TableCell className="whitespace-nowrap">
{todo.dueAt ? new DateUtil(todo.dueAt).format(DateFormats.D_MMM_YYYY) : '--'}
</TableCell>
Expand Down