task details

src/app/modules/task-management/components/task/task.component.html

@@ -1,4 +1,4 @@
-<section class="task-item">
+<section class="task-item" (click)="onOpenTaskDetail()">
   <h1>Home Page Design</h1>
   <p>Designing a home page containing meetings, messages, tasks and calendar</p>
 

src/app/modules/task-management/components/task/task.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'app-task',
@@ -6,5 +7,13 @@ import { Component, Input } from '@angular/core';
   styleUrls: ['./task.component.scss'],
 })
 export class TaskComponent {
+  constructor(
+    private readonly router: Router,
+    private readonly route: ActivatedRoute
+  ) {}
   @Input() value: number = 0;
+
+  onOpenTaskDetail(): void {
+    this.router.navigate(['./details'], { relativeTo: this.route });
+  }
 }

src/app/modules/task-management/task-details/task-details.component.html

@@ -0,0 +1,33 @@
+<section class="task-details">
+  <main>
+    <div>
+      <h1>
+        <img
+          src="../../../../assets/images/arrow.svg"
+          alt=""
+          title=""
+          class="ptr"
+          (click)="onBack()"
+        />
+        <span class="bold">Details</span>
+      </h1>
+      <p class="bold">Home Page Design</p>
+      <span class="sub-title"
+        >Designing a home page containing meetings, messages, tasks and
+        calendar</span
+      >
+    </div>
+    <!-- <div
+      class="task-managament__dashboard"
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="50"
+    >
+      <p>Dashboard Project</p>
+      <app-progess
+        [color]="'white'"
+        [showSpan]="true"
+        [value]="10"
+      ></app-progess>
+    </div> -->
+  </main>
+</section>

src/app/modules/task-management/task-details/task-details.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TaskDetailsComponent } from './task-details.component';
+
+describe('TaskDetailsComponent', () => {
+  let component: TaskDetailsComponent;
+  let fixture: ComponentFixture<TaskDetailsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TaskDetailsComponent]
+    });
+    fixture = TestBed.createComponent(TaskDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/task-management/task-details/task-details.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-task-details',
+  templateUrl: './task-details.component.html',
+  styleUrls: ['./task-details.component.scss'],
+})
+export class TaskDetailsComponent {
+  constructor(
+    private readonly router: Router,
+    private readonly route: ActivatedRoute
+  ) {}
+
+  onBack(): void {
+    this.router.navigate(['../'], { relativeTo: this.route });
+  }
+}

src/app/modules/task-management/task-management-routing.module.ts

@@ -2,12 +2,16 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { TaskManagementMainComponent } from './task-management-main/task-management-main.component';
 import { TaskManagementComponent } from './task-management.component';
+import { TaskDetailsComponent } from './task-details/task-details.component';
 
 const routes: Routes = [
   {
     path: '',
     component: TaskManagementComponent,
-    children: [{ path: '', component: TaskManagementMainComponent }],
+    children: [
+      { path: '', component: TaskManagementMainComponent },
+      { path: 'details', component: TaskDetailsComponent },
+    ],
   },
 ];
 

src/app/modules/task-management/task-management.module.ts

@@ -9,6 +9,7 @@ import { TeamsMemberComponent } from './components/teams-member/teams-member.com
 import { ProjecctsComponent } from './components/projeccts/projeccts.component';
 import { TaskComponent } from './components/task/task.component';
 import { ProgessComponent } from './components/progess/progess.component';
+import { TaskDetailsComponent } from './task-details/task-details.component';
 
 @NgModule({
   declarations: [
@@ -18,6 +19,7 @@ import { ProgessComponent } from './components/progess/progess.component';
     ProjecctsComponent,
     TaskComponent,
     ProgessComponent,
+    TaskDetailsComponent,
   ],
   imports: [CommonModule, TaskManagementRoutingModule, SharedModule],
 })

src/app/modules/task-management/task-managemnt-theme.scss

@@ -207,5 +207,36 @@
         font-weight: bold;
       }
     }
+
+    .task-details {
+      background-color: $off-white;
+      padding: 20px;
+      margin: 20px 0;
+      border-radius: 20px;
+
+      main {
+        div {
+          h1 {
+            span {
+              color: $main-color;
+              margin: 0 10px;
+            }
+          }
+
+          p {
+            color: $main-color;
+            font-size: 20px;
+            margin-top: 1rem;
+          }
+
+          .sub-title {
+            display: block;
+            margin-top: 0.5rem;
+            color: $span-color;
+            font-size: 15px;
+          }
+        }
+      }
+    }
   }
 }