add complete track component

src/app/tracks/components/modals/complete-track-modal/complete-track-modal.component.html

+<div class="modal-header">
+  <h5 class="modal-title" id="moveToplanModalLabel">اكمال المتابعة</h5>
+  <button
+    type="button"
+    class="ml-4 mr-4 btn-close"
+    (click)="onClose()"
+  ></button>
+</div>
+<div class="modal-body">
+  <form (ngSubmit)="onSubmit()" #projectForm="ngForm">
+    <div *ngIf="!canComplete" class="row text-primary">
+      عذراَ, لاتتسطيع أكمال عملية متابعة هي بالأصل مكتملة
+    </div>
+
+    <div *ngIf="canComplete">
+      <p>اكمال متابعة هل أنت حقا متأكد من أنك تابعت كل العاميلن ,</p>
+    </div>
+    <div class="row">
+      <button
+        type="submit"
+        [disabled]="projectForm.invalid || !canComplete"
+        class="col m-4 btn btn-primary"
+      >
+        اكمال المتابعة
+      </button>
+      <button class="col m-4 btn btn-seondary" (click)="onClose()">
+        إغلاق
+      </button>
+    </div>
+  </form>
+</div>

src/app/tracks/components/modals/complete-track-modal/complete-track-modal.component.ts

+import { Component, Input } from '@angular/core';
+import { Track } from '../../../models/responses/track';
+import { CompleteTrackRequest } from '../../../models/requests/completeTrakRequest';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastrService } from 'ngx-toastr';
+import { TrackService } from '../../../services/track.service';
+
+@Component({
+  selector: 'complete-track-modal',
+  templateUrl: './complete-track-modal.component.html',
+  styleUrl: './complete-track-modal.component.css'
+})
+export class CompleteTrackModalComponent {
+  @Input() track : Track 
+
+  request = new CompleteTrackRequest();
+
+  canComplete : boolean
+
+  constructor(
+    private trackServie : TrackService ,
+    private toastr : ToastrService,
+    private activeModal :NgbActiveModal
+  ){}
+
+  ngOnInit(): void {
+    
+
+    this._setCanMove();
+
+  }
+
+  onClose() {
+  
+    this.activeModal.close();
+  }
+  
+  onSubmit(){
+
+    this
+    .request
+    .trackId= this.track.id;
+
+    this
+    .request
+    .completionDate= new Date();
+  
+    this
+    .request
+    .projectId=this.track.projectId
+
+    this
+    .trackServie
+    .completeTrack(this.request)
+    .subscribe({
+      next : (data)=>{
+        this
+        .toastr
+        .success('تم اكمال المتابعة بنجاح');
+      
+      },
+      error:(err)=>{
+        this
+        .toastr
+        .error('تعذر اكمال المتابعة');
+      }
+    });
+
+  }
+
+
+  private _setCanMove(){
+
+    this
+    .canComplete = this
+    .track
+    .trackInfo
+    .isCompleted
+
+  } 
+
+}

src/app/tracks/models/requests/completeTrakRequest.ts

 
 export class CompleteTrackRequest{
     trackId :number 
-    completionDate :number 
+    completionDate : Date 
     projectId : number 
 }

src/app/tracks/pages/track-details/track-details.component.ts

@@ -13,6 +13,8 @@ import { forkJoin } from 'rxjs';
 import { AddEmployeeTrackRequest } from '../../models/requests/AddEmployeeTrackRequest';
 import { ProjectService } from '../../../projects/services/project.service';
 import { EmployeeParticipate } from '../../../employees/models/responses/employeeParticipate';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { CompleteTrackModalComponent } from '../../components/modals/complete-track-modal/complete-track-modal.component';
 
 @Component({
   selector: 'track-details',
@@ -34,6 +36,7 @@ export class TrackDetailsComponent implements OnInit {
     private route :ActivatedRoute,
     private trackService : TrackService,
     private stepService : StepService ,
+    private modalService  : NgbModal,
     private projectService :ProjectService 
   ){}
 
@@ -46,6 +49,7 @@ export class TrackDetailsComponent implements OnInit {
 
   loadTrack(){
   
+
     forkJoin({
       track: this.trackService.getByTrackById(this.trackId),
       stepTracks: this.trackService.getStepsTrackById(this.trackId),
@@ -74,6 +78,28 @@ export class TrackDetailsComponent implements OnInit {
 
     });
   }
+  openTrackComplete(){
+    
+    const modalRef = this.modalService.open(CompleteTrackModalComponent);
+    modalRef.componentInstance.track = this.track;
+
+    modalRef.result.then((result) => {
+ 
+      if (result) {
+ 
+        // Add the new project to the list
+ 
+        this.loadTrack();
+        
+      }
+      
+    }, (reason) => {
+     
+    
+    });
+  
+  }
+
   loadSteps(){
     this.stepService
     .getStepsByProject(this.track.projectId)
@@ -116,7 +142,6 @@ export class TrackDetailsComponent implements OnInit {
 
   handleAddStepTrack(stepTrackRequest: AddStepTrackRequest): void {
 
-   debugger
     this.trackService.addStepTrack(stepTrackRequest).subscribe({
 
       next : (data)=>{

src/app/tracks/tracks.module.ts

@@ -27,6 +27,7 @@ import { StepHistoryItemComponent } from './components/history/step-history-item
 import { EmployeeHistoryItemComponent } from './components/history/employee-history-item/employee-history-item.component';
 import { StateTranslatePipe } from '../shared/pipes/stateTranslate/state-translate.pipe';
 import { TracksUncompleteComponent } from './pages/tracks-uncomplete/tracks-uncomplete.component';
+import { CompleteTrackModalComponent } from './components/modals/complete-track-modal/complete-track-modal.component';
 
 
 @NgModule({
@@ -44,7 +45,8 @@ import { TracksUncompleteComponent } from './pages/tracks-uncomplete/tracks-unco
     TrackItemComponent,
     StepHistoryItemComponent,
     EmployeeHistoryItemComponent,
-    TracksUncompleteComponent
+    TracksUncompleteComponent,
+    CompleteTrackModalComponent
   ],
   imports: [
     CommonModule,