wfprev-143 Edit project: UI

client/wfprev-war/src/main/angular/src/app/app.component.ts

@@ -22,7 +22,6 @@ export class AppComponent {
   ) {
   }
 
-
   setActive(menuItem: string): void {
     this.activeRoute = menuItem;
     switch (menuItem) {

client/wfprev-war/src/main/angular/src/app/app.routing.spec.ts

@@ -31,7 +31,7 @@ describe('App Routing Module', () => {
 
   it('should have correct routes defined', () => {
     const routes = router.config;
-    expect(routes.length).toBe(4);
+    expect(routes.length).toBe(6);
   });
 
   it('should define route for LIST path', () => {

client/wfprev-war/src/main/angular/src/app/app.routing.ts

@@ -26,6 +26,12 @@ const PANEL_ROUTES: Routes = [
     component: ErrorPageComponent,
     pathMatch: 'full',
   },
+  {
+    path: ResourcesRoutes.EDIT_PROJECT,
+    loadChildren: () =>
+      import('src/app/components/edit-project.module').then(m => m.EditProjectModule),
+  },
+  { path: '', redirectTo: ResourcesRoutes.MAP, pathMatch: 'full' }, // Default route to map
 
   { path: '', 
     redirectTo: ResourcesRoutes.MAP, 

client/wfprev-war/src/main/angular/src/app/components/edit-project.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { EditProjectComponent } from 'src/app/components/edit-project/edit-project.component';
+
+
+const routes: Routes = [
+  { path: '', component: EditProjectComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes), EditProjectComponent]
+})
+export class EditProjectModule {}

client/wfprev-war/src/main/angular/src/app/components/edit-project/edit-project.component.html

@@ -0,0 +1,34 @@
+<div>
+    <div class="project-title">
+        <span>{{projectName}}</span>
+    </div>
+    <mat-tab-group class="custom-tab-group">
+        <!-- Details Tab -->
+        <mat-tab label="Details">
+            <div class="details-tab">
+                <app-project-details></app-project-details>
+            </div>
+        </mat-tab>
+
+        <!-- Fiscals Tab -->
+        <mat-tab label="Fiscals">
+            <div class="fiscals-tab">
+            <p>Fiscals Section</p>
+            </div>
+        </mat-tab>
+
+        <!-- Documents Tab -->
+        <mat-tab label="Documents">
+            <div class="documents-tab">
+            <p>Documents Section</p>
+            </div>
+        </mat-tab>
+
+        <!-- History Tab -->
+        <mat-tab label="History">
+            <div class="history-tab">
+            <p>History Section</p>
+            </div>
+        </mat-tab>
+    </mat-tab-group>
+</div>

client/wfprev-war/src/main/angular/src/app/components/edit-project/edit-project.component.scss

@@ -0,0 +1,32 @@
+.project-title {
+    color: #000;
+    font-size: 34px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding: 12px 24px;
+  }
+
+  .custom-tab-group {
+    display: flex;
+    justify-content: flex-start;
+
+    // Angular Material tab header overrides
+    ::ng-deep {
+      .mat-mdc-tab-header {
+        width: 50%;
+        padding-left: 30px;
+      }
+
+      .mat-mdc-tab {
+        font-size: 22px;
+        color: #000;
+        font-style: normal;
+        font-weight: 400;
+      }
+
+      .mat-mdc-tab-indicator {
+        background-color: black !important; /* Change the underline color to black */
+      }
+    }
+  }

client/wfprev-war/src/main/angular/src/app/components/edit-project/edit-project.component.spec.ts

@@ -0,0 +1,58 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { EditProjectComponent } from './edit-project.component';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { of } from 'rxjs';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ProjectDetailsComponent } from 'src/app/components/edit-project/project-details/project-details.component';
+
+describe('EditProjectComponent', () => {
+  let component: EditProjectComponent;
+  let fixture: ComponentFixture<EditProjectComponent>;
+  let mockActivatedRoute: Partial<ActivatedRoute>;
+
+  beforeEach(async () => {
+    const mockParamMap: ParamMap = {
+      has: (key: string) => key === 'name',
+      get: (key: string) => (key === 'name' ? 'Test Project' : null),
+      getAll: () => [],
+      keys: [],
+    };
+
+    mockActivatedRoute = {
+      queryParamMap: of(mockParamMap),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [EditProjectComponent, BrowserAnimationsModule],
+      providers: [{ provide: ActivatedRoute, useValue: mockActivatedRoute }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EditProjectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set the projectName from query parameters', () => {
+    expect(component.projectName).toBe('Test Project');
+  });
+
+  it('should display the project name in the title', () => {
+    const projectTitleElement = fixture.debugElement.query(By.css('.project-title span')).nativeElement;
+    expect(projectTitleElement.textContent).toContain('Test Project');
+  });
+
+  it('should render the Details tab', () => {
+    const detailsTab = fixture.debugElement.query(By.css('.details-tab'));
+    expect(detailsTab).toBeTruthy();
+  });
+
+  it('should display ProjectDetailsComponent inside the Details tab', () => {
+    const projectDetailsComponent = fixture.debugElement.query(By.directive(ProjectDetailsComponent));
+    expect(projectDetailsComponent).toBeTruthy();
+  });
+});

client/wfprev-war/src/main/angular/src/app/components/edit-project/edit-project.component.stories.ts

@@ -0,0 +1,53 @@
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { EditProjectComponent } from './edit-project.component';
+import { MatTabsModule } from '@angular/material/tabs';
+import { ProjectDetailsComponent } from 'src/app/components/edit-project/project-details/project-details.component';
+import { ActivatedRoute } from '@angular/router';
+import { of } from 'rxjs';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+const meta: Meta<EditProjectComponent> = {
+  title: 'EditProjectComponent',
+  component: EditProjectComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [EditProjectComponent, MatTabsModule, ProjectDetailsComponent,BrowserAnimationsModule ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            queryParamMap: of({
+              get: (key: string) => (key === 'name' ? 'Sample Project' : null),
+            }),
+          },
+        },
+      ],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<EditProjectComponent>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithCustomProjectName: Story = {
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            queryParamMap: of({
+              get: (key: string) => (key === 'name' ? 'Custom Project' : null),
+            }),
+          },
+        },
+      ],
+    }),
+  ],
+  args: {},
+};

client/wfprev-war/src/main/angular/src/app/components/edit-project/edit-project.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { MatTabsModule } from '@angular/material/tabs';
+import { ActivatedRoute } from '@angular/router';
+import { ProjectDetailsComponent } from 'src/app/components/edit-project/project-details/project-details.component';
+
+@Component({
+  selector: 'app-edit-project',
+  standalone: true,
+  imports: [MatTabsModule, ProjectDetailsComponent],
+  templateUrl: './edit-project.component.html',
+  styleUrl: './edit-project.component.scss'
+})
+export class EditProjectComponent implements OnInit {
+  projectName: string | null = null;
+
+  constructor(private route: ActivatedRoute) {}
+  ngOnInit(): void {
+    this.route.queryParamMap.subscribe((params) => {
+      this.projectName = params.get('name');
+    });
+  }
+
+}