add comtroll modals

src/app/projects/components/project-controll/track-controll/track-controll.component.html

@@ -18,7 +18,7 @@
           </div> <!-- .card-body -->
         </div> <!-- .card -->
       </div> 
-      <div class="col-md-6 col-lg-4" >
+      <div class="col-md-6 col-lg-4"  (click)="onComplete()" >
         <div class="card shadow mb-4">
           <div class="card-body file-list">
             <div class="d-flex align-items-center">
@@ -32,7 +32,7 @@
           </div> <!-- .card-body -->
         </div> <!-- .card -->
       </div>
-      <div class="col-md-6 col-lg-4" [routerLink]="['/projects/',project.id,'/steps']">
+      <div class="col-md-6 col-lg-4" (click)="onReplan()">
         <div class="card shadow mb-4">
           <div class="card-body file-list">
             <div class="d-flex align-items-center">

src/app/projects/components/project-controll/track-controll/track-controll.component.ts

-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { Project } from '../../../models/responses/project';
 
 @Component({
@@ -9,4 +9,16 @@ import { Project } from '../../../models/responses/project';
 export class TrackControllComponent {
 
   @Input() project : Project
+  @Output() complete = new EventEmitter();
+  @Output() replan = new EventEmitter();
+  
+
+  onComplete(){
+    this.complete.emit();
+  }
+  onReplan(){
+    
+    this.replan.emit();
+
+  }
 }

src/app/projects/components/projectModals/project-complete-modal/project-complete-modal.component.html

-<p>project-complete-modal works!</p>
+
+<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">
+        للأسف , لاتستطيع الانتقال إلى مرحلة الانجاز لأن مجموع نسب الانجاز للمراحل ليس مئة,قم بمتابعةالمشروع ومن ثم أعد المحاولة
+    </div>
+  <div  *ngIf="canComplete">
+
+    <div class="row">
+
+        <p>
+            استمارة انجاز مشروع 
+        </p>
+        <div class="mb-3 col-8  offset-1">
+          <label for="stepName" class="form-label">ملاحظات الجهة الطارحة</label>
+          <textarea [cols]="4" type="text" name="stepName" id="stepName" class="form-control" [(ngModel)]="request.customerNotes" required>
+        </textarea>
+        </div>
+        
+        <div class="mb-3 col-3 offset-1 ">
+          <label for="start" class="form-label">تاريخ الاكمال</label>
+          <input type="date" id="start" class="form-control" [(ngModel)]="request.completionDate" name="start" required>
+        </div>
+  
+      <div class="mb-3 col-3">
+        <label for="worker" class="form-label">تقييم الجهة الطارحة </label>
+        <input  id="worker" class="form-control" [(ngModel)]="request.customerRate" name="worker" required>
+      </div>
+      
+      </div>
+      
+  </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/projects/components/projectModals/project-complete-modal/project-complete-modal.component.ts

-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastrService } from 'ngx-toastr';
+import { Project } from '../../../models/responses/project';
+import { ProjectService } from '../../../services/project.service';
+import { CompleteProjectRequest } from '../../../models/requests/project-requests/completeProjectRequest';
 
 @Component({
   selector: 'project-complete-modal',
@@ -6,5 +11,61 @@ import { Component } from '@angular/core';
   styleUrl: './project-complete-modal.component.css'
 })
 export class ProjectCompleteModalComponent {
+  @Input() project : Project 
 
+  request = new CompleteProjectRequest();
+
+  canComplete : boolean
+  constructor(
+    private projectServie : ProjectService ,
+    private toastr : ToastrService,
+    private activeModal :NgbActiveModal
+  ){}
+
+  ngOnInit(): void {
+    
+
+    this._setCanMove();
+
+    
+    
+  }
+  onClose() {
+    this.activeModal.close();
+  }
+  
+  onSubmit(){
+
+    this
+    .request
+    .projectId= this.project.id;
+
+    this
+    .projectServie
+    .completeProject(this.request)
+    .subscribe({
+      next : (data)=>{
+        this
+        .toastr
+        .success('تم انجاز المشروع بنجاح');
+      
+      },
+      error:(err)=>{
+        this
+        .toastr
+        .error('تعذر الانتقال إلى مرحلة الانجاز');
+      }
+    });
+
+  }
+  private _setCanMove(){
+
+    this.canComplete =true ;
+    this
+    .project
+    .steps
+    .forEach(e =>e.currentCompletionRatio !=100 ? this.canComplete =false : '' )
+
+    
+  } 
 }

src/app/projects/components/projectModals/project-replan-modal/project-replan-modal.component.html

-<p>project-replan-modal works!</p>
+
+<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">
+       <div *ngIf="!canRePlan">
+        للاسف لاتستطيع الانتقال إلى مرحلة التخطيط وأنت في مرحلة {{project.currentState | stateTranslate}}
+    </div>
+  <div  *ngIf="canRePlan">
+      <p>هل أنت متأكد من أنك تريد الانتقال إلى مرحلة التخطيط </p>
+   </div>
+ 
+  </div>    
+       <div class="modal-footer">
+    <button type="button" class="btn btn-secondary" (click)="onClose()" >إلغاء</button>
+    <button type="button" [disabled]="!canRePlan" class="btn btn-danger" (click)="onSubmit()">الانتقال</button>
+  </div>

src/app/projects/components/projectModals/project-replan-modal/project-replan-modal.component.ts

-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastrService } from 'ngx-toastr';
+import { CompleteProjectRequest } from '../../../models/requests/project-requests/completeProjectRequest';
+import { Project } from '../../../models/responses/project';
+import { ProjectService } from '../../../services/project.service';
+import { RePlanProjectRequest } from '../../../models/requests/project-requests/RePlanProjectRequest';
 
 @Component({
   selector: 'project-replan-modal',
@@ -6,5 +12,58 @@ import { Component } from '@angular/core';
   styleUrl: './project-replan-modal.component.css'
 })
 export class ProjectReplanModalComponent {
+  @Input() project : Project 
+
+  canRePlan : boolean
+
+  request :RePlanProjectRequest ;
+
+  constructor(
+    private projectServie : ProjectService ,
+    private toastr : ToastrService,
+    private activeModal :NgbActiveModal
+  ){}
+
+  ngOnInit(): void {
+   
+    this
+    ._setCanMove()
+    
+  }
+
+  onClose() {
+    this.activeModal.close();
+  }
+  
+  onSubmit(){
+
+    this
+    .request = {
+      projectId: this.project.id,
+      
+    }
+    this
+    .projectServie
+    .rePlanProject(this.request)
+    .subscribe({
+      next : (data)=>{
+        this
+        .toastr
+        .success('تمت العودة إلى التخطيط بنجاح');
+      
+      },
+      error:(err)=>{
+        this
+        .toastr
+        .error('تعذر الانتقال إلى مرحلة التخطيط');
+      }
+    });
+
+  }
+  private _setCanMove(){
+
+    
+    this.project.currentState.toLowerCase() =="inprogress" ? true : false ; 
+  } 
 
 }

src/app/projects/components/projectModals/project-toprogress-modal/project-toprogress-modal.component.html

@@ -4,15 +4,15 @@
       <button type="button" class="ml-4 mr-4 btn-close" (click)="onClose()" ></button>
     </div>
     <div class="modal-body">
-         <div *ngIf="canMoveToProgress">
+         <div *ngIf="!canMoveToProgress">
         للأسف , لاتستطيع الانتقال إلى مرحلة التخطيط لأن مجموع الاوزان للمراحل ليس مئة,قم بالتعديل ومن ثم أعد المحاولة
     </div>
-    <div  *ngIf="!canMoveToProgress">
+    <div  *ngIf="canMoveToProgress">
         <p>هل أنت متأكد من أنك تريد الانتقال إلى مرحلة التنفيذ </p>
      </div>
    
     </div>    
          <div class="modal-footer">
       <button type="button" class="btn btn-secondary" (click)="onClose()" >إلغاء</button>
-      <button type="button" class="btn btn-danger" (click)="onSubmit()">الانتقال</button>
+      <button [disabled]="!canMoveToProgress" type="button" class="btn btn-danger" (click)="onSubmit()">الانتقال</button>
     </div>

src/app/projects/pages/project-details/project-details.component.html

@@ -78,6 +78,8 @@
 
           <track-controll
             [project]="project"
+            (complete)="openProjectComplete()"
+            (replan)="openRepan()"
           >
           </track-controll>
       

src/app/projects/pages/project-details/project-details.component.ts

@@ -7,6 +7,8 @@ import { ProjectService } from '../../services/project.service';
 import { ProjectToprogressModalComponent } from '../../components/projectModals/project-toprogress-modal/project-toprogress-modal.component';
 import { NgModel } from '@angular/forms';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ProjectCompleteModalComponent } from '../../components/projectModals/project-complete-modal/project-complete-modal.component';
+import { ProjectReplanModalComponent } from '../../components/projectModals/project-replan-modal/project-replan-modal.component';
 
 
 @Component({
@@ -55,6 +57,50 @@ export class ProjectDetailsComponent implements OnInit {
     });
   
   }
+  openRepan() {
+    const modalRef = this.modalService.open(ProjectReplanModalComponent);
+    modalRef.componentInstance.project = this.project;
+
+    modalRef.result.then((result) => {
+ 
+      if (result) {
+ 
+        // Add the new project to the list
+ 
+        this.loadProject();
+        
+      }
+      
+    }, (reason) => {
+     
+    
+    });
+
+  }
+    
+  
+  openProjectComplete(){
+    
+    const modalRef = this.modalService.open(ProjectCompleteModalComponent);
+    modalRef.componentInstance.project = this.project;
+
+    modalRef.result.then((result) => {
+ 
+      if (result) {
+ 
+        // Add the new project to the list
+ 
+        this.loadProject();
+        
+      }
+      
+    }, (reason) => {
+     
+    
+    });
+  
+  }
+
   public downloadAsPdf(): void {
     this.pdfDownloader.downloadAsPdf('pdfContent');
   }