Skip to content

Commit 884191b

Browse files
Neeraj-gagatNeeraj-gagat
authored
Feat:add project picker for task dialog (#332)
* feat:add project picker for taskdialog * feat:add project picker for taskdialog
1 parent 0ad188f commit 884191b

4 files changed

Lines changed: 107 additions & 32 deletions

File tree

‎frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx‎

Lines changed: 98 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,9 @@ export const TaskDialog = ({
4747
editState,
4848
onUpdateState,
4949
allTasks,
50+
isCreatingNewProject,
51+
setIsCreatingNewProject,
52+
uniqueProjects,
5053
onSaveDescription,
5154
onSaveTags,
5255
onSavePriority,
@@ -839,41 +842,104 @@ export const TaskDialog = ({
839842
<TableCell>
840843
{editState.isEditingProject ? (
841844
<>
842-
<div className="flex items-center">
843-
<Input
844-
id={`project-${task.id}`}
845-
name={`project-${task.id}`}
846-
type="text"
847-
value={editState.editedProject}
848-
onChange={(e) =>
849-
onUpdateState({
850-
editedProject: e.target.value,
851-
})
845+
<div className="col-span-3 space-y-2 w-[300px]">
846+
<Select
847+
value={
848+
isCreatingNewProject
849+
? '__CREATE_NEW__'
850+
: editState.editedProject
852851
}
853-
className="flex-grow mr-2"
854-
/>
855-
<Button
856-
variant="ghost"
857-
size="icon"
858-
onClick={() => {
859-
onSaveProject(task, editState.editedProject);
860-
onUpdateState({ isEditingProject: false });
852+
onValueChange={(value) => {
853+
if (value === '__CREATE_NEW__') {
854+
setIsCreatingNewProject(true);
855+
onUpdateState({ editedProject: '' });
856+
} else {
857+
const project =
858+
value === '__NONE__' ? '' : value;
859+
setIsCreatingNewProject(false);
860+
onUpdateState({ editedProject: project });
861+
onSaveProject(task, project);
862+
}
861863
}}
862864
>
863-
<CheckIcon className="h-4 w-4 text-green-500" />
864-
</Button>
865-
<Button
866-
variant="ghost"
867-
size="icon"
868-
onClick={() =>
869-
onUpdateState({
870-
editedProject: task.project,
871-
isEditingProject: false,
872-
})
873-
}
874-
>
875-
<XIcon className="h-4 w-4 text-red-500" />
876-
</Button>
865+
<SelectTrigger
866+
id="project"
867+
data-testid="project-select"
868+
>
869+
<SelectValue
870+
placeholder={
871+
uniqueProjects.length
872+
? 'Select a project'
873+
: 'No projects yet'
874+
}
875+
>
876+
{isCreatingNewProject
877+
? editState.editedProject
878+
? `New: ${editState.editedProject}`
879+
: '+ Create new project…'
880+
: undefined}
881+
</SelectValue>
882+
</SelectTrigger>
883+
<SelectContent
884+
onWheel={(e) => e.stopPropagation()}
885+
className="max-h-60 overflow-y-auto"
886+
>
887+
<SelectItem value="__CREATE_NEW__">
888+
+ Create new project…
889+
</SelectItem>
890+
<SelectItem value="__NONE__">
891+
No project
892+
</SelectItem>
893+
{uniqueProjects.map((project: string) => (
894+
<SelectItem key={project} value={project}>
895+
{project}
896+
</SelectItem>
897+
))}
898+
</SelectContent>
899+
</Select>
900+
901+
{isCreatingNewProject && (
902+
<div className="flex gap-4 justify-center items-center">
903+
<Input
904+
id="project-name"
905+
placeholder="New project name"
906+
value={editState.editedProject}
907+
autoFocus
908+
onChange={(e) =>
909+
onUpdateState({
910+
editedProject: e.target.value,
911+
})
912+
}
913+
/>
914+
<div className="flex justify-center items-center">
915+
<Button
916+
variant="ghost"
917+
size="icon"
918+
onClick={() => {
919+
onSaveProject(
920+
task,
921+
editState.editedProject
922+
);
923+
onUpdateState({ isEditingProject: false });
924+
}}
925+
>
926+
<CheckIcon className="h-4 w-4 text-green-500" />
927+
</Button>
928+
<Button
929+
variant="ghost"
930+
size="icon"
931+
onClick={() =>
932+
onUpdateState({
933+
editedProject: task.project,
934+
isEditingProject: false,
935+
})
936+
}
937+
>
938+
<XIcon className="h-4 w-4 text-red-500" />
939+
</Button>
940+
</div>
941+
</div>
942+
)}
877943
</div>
878944
</>
879945
) : (

‎frontend/src/components/HomeComponents/Tasks/Tasks.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1168,6 +1168,9 @@ export const Tasks = (
11681168
editState={editState}
11691169
onUpdateState={updateEditState}
11701170
allTasks={tasks}
1171+
uniqueProjects={uniqueProjects}
1172+
isCreatingNewProject={isCreatingNewProject}
1173+
setIsCreatingNewProject={setIsCreatingNewProject}
11711174
onSaveDescription={handleSaveDescription}
11721175
onSaveTags={handleSaveTags}
11731176
onSavePriority={handleSavePriority}

‎frontend/src/components/HomeComponents/Tasks/__tests__/TaskDialog.test.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,9 @@ describe('TaskDialog Component', () => {
8787
editState: mockEditState,
8888
onUpdateState: jest.fn(),
8989
allTasks: mockAllTasks,
90+
uniqueProjects: [],
91+
isCreatingNewProject: false,
92+
setIsCreatingNewProject: jest.fn(),
9093
onSaveDescription: jest.fn(),
9194
onSaveTags: jest.fn(),
9295
onSavePriority: jest.fn(),

‎frontend/src/components/utils/types.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,9 @@ export interface EditTaskDialogProps {
138138
editState: EditTaskState;
139139
onUpdateState: (updates: Partial<EditTaskState>) => void;
140140
allTasks: Task[];
141+
uniqueProjects: string[];
142+
isCreatingNewProject: boolean;
143+
setIsCreatingNewProject: (value: boolean) => void;
141144
onSaveDescription: (task: Task, description: string) => void;
142145
onSaveTags: (task: Task, tags: string[]) => void;
143146
onSavePriority: (task: Task, priority: string) => void;

0 commit comments

Comments
 (0)