feat: add create project page

Author: Diogo-Ferraz

src/app/app.config.ts

@@ -4,11 +4,13 @@ import { provideHttpClient } from '@angular/common/http';
 
 import { routes } from './app.routes';
 import { provideAnimations } from '@angular/platform-browser/animations';
+import { MessageService } from 'primeng/api';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
     provideHttpClient(),
-    provideAnimations()]
+    provideAnimations(),
+    MessageService]
 };

src/app/app.routes.ts

@@ -5,11 +5,13 @@ import { DashboardComponent } from './features/dashboard/components/dashboard/da
 import { ProjectKanbanComponent } from './features/projects/components/project-kanban/project-kanban.component';
 import { TaskItemListComponent } from './features/task-item/components/task-item-list/task-item-list.component';
 import { UserTaskItemsComponent } from './features/task-item/components/user-task-items/user-task-items.component';
+import { ProjectCreateComponent } from './features/projects/components/project-create/project-create.component';
 
 export const routes: Routes = [
   { path: '', component: DashboardComponent },
   { path: 'projects', component: ProjectListComponent },
   { path: 'projects/kanban', component: ProjectKanbanComponent },
+  { path: 'projects/create', component: ProjectCreateComponent },
   { path: 'tasks', component: TaskItemListComponent },
   { path: 'tasks/my-tasks', component: UserTaskItemsComponent },
   { path: 'login', component: HomeLoginComponent },

src/app/features/projects/components/project-create/project-create.component.html

@@ -0,0 +1,36 @@
+<p-toast />
+<p-card header="Create New Project">
+    <form [formGroup]="projectForm" (ngSubmit)="onSubmit()">
+        
+        <div class="field mb-4">
+            <label for="name" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Project Name</label>
+            <input id="name" type="text" pInputText formControlName="name" class="w-full" [ngClass]="{'ng-invalid ng-dirty': isInvalid('name')}" />
+            <small *ngIf="isInvalid('name')" class="p-error block mt-1">
+                Project name is required.
+            </small>
+        </div>
+
+        <div class="field mb-4">
+            <label for="description" class="block text-surface-900 dark:text-surface-0 font-medium mb-2">Description</label>
+            <textarea id="description" pInputTextarea formControlName="description" class="w-full" [rows]="5"></textarea>
+        </div>
+
+        <div class="flex justify-content-end gap-2">
+            <p-button 
+                label="Cancel" 
+                icon="pi pi-times" 
+                styleClass="p-button-secondary" 
+                (click)="cancel()"
+                [disabled]="isLoading">
+            </p-button>
+            <p-button 
+                type="submit" 
+                label="Create Project" 
+                icon="pi pi-check"
+                [loading]="isLoading"
+                [disabled]="!projectForm.valid || isLoading">
+            </p-button>
+        </div>
+
+    </form>
+</p-card>

src/app/features/projects/components/project-create/project-create.component.scss

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectCreateComponent } from './project-create.component';
+
+describe('ProjectCreateComponent', () => {
+  let component: ProjectCreateComponent;
+  let fixture: ComponentFixture<ProjectCreateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProjectCreateComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProjectCreateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/projects/components/project-create/project-create.component.spec.ts

@@ -0,0 +1,75 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { SharedModule } from '../../../../shared/shared.module';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Subject, takeUntil } from 'rxjs';
+import { Router } from '@angular/router';
+import { MessageService } from 'primeng/api';
+import { ProjectService } from '../../services/project.service';
+
+@Component({
+  selector: 'app-project-create',
+  standalone: true,
+  imports: [SharedModule, ReactiveFormsModule],
+  templateUrl: './project-create.component.html',
+  styleUrl: './project-create.component.scss'
+})
+export class ProjectCreateComponent implements OnInit, OnDestroy {
+
+  projectForm!: FormGroup;
+  isLoading = false;
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    private fb: FormBuilder,
+    private projectService: ProjectService,
+    private router: Router,
+    private messageService: MessageService
+  ) { }
+
+  ngOnInit(): void {
+    this.projectForm = this.fb.group({
+      name: ['', Validators.required],
+      description: ['']
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  isInvalid(controlName: string): boolean {
+    const control = this.projectForm.get(controlName);
+    return !!control && control.invalid && (control.dirty || control.touched);
+  }
+
+  onSubmit(): void {
+    if (this.projectForm.invalid) {
+      this.projectForm.markAllAsTouched();
+      this.messageService.add({ severity: 'warn', summary: 'Validation Error', detail: 'Please fill in all required fields.' });
+      return;
+    }
+
+    this.isLoading = true;
+    const projectData = this.projectForm.value;
+
+    this.projectService.createProject(projectData)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (createdProject) => {
+          this.isLoading = false;
+          this.messageService.add({ severity: 'success', summary: 'Success', detail: `Project "${createdProject.name}" created successfully!` });
+          this.router.navigate(['/projects']);
+        },
+        error: (err) => {
+          this.isLoading = false;
+          console.error('Error creating project:', err);
+          this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Could not create project. Please try again.' });
+        }
+      });
+  }
+
+  cancel(): void {
+    this.router.navigate(['/projects']);
+  }
+}

src/app/features/projects/components/project-create/project-create.component.ts

@@ -24,6 +24,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import { RippleModule } from 'primeng/ripple';
 import { SkeletonModule } from 'primeng/skeleton';
+import { ToastModule } from 'primeng/toast';
 
 @NgModule({
   exports: [
@@ -56,7 +57,8 @@ import { SkeletonModule } from 'primeng/skeleton';
     TooltipModule,
     ProgressSpinnerModule,
     RippleModule,
-    SkeletonModule
+    SkeletonModule,
+    ToastModule
   ],
 })
 export class SharedModule {}