add state transition modals

src/app/projects/components/modals/remove-attachment-modal/remove-attachment-modal.component.ts

@@ -16,7 +16,7 @@ export class RemoveAttachmentModalComponent {
 
   onConfirmRemove() {
 
-
+  
 
   }
 

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

@@ -57,7 +57,7 @@
       
       </div> <!-- .row -->
 
-      <div class="col-md-6 col-lg-4" [routerLink]="['/projects/',project.id,'/steps']">
+      <div class="col-md-6 col-lg-4" (click)="onMoveToProgress()">
         <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/plan-controll/plan-controll.component.ts

-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { Project } from '../../../models/responses/project';
 
 @Component({
@@ -7,6 +7,11 @@ import { Project } from '../../../models/responses/project';
   styleUrl: './plan-controll.component.css'
 })
 export class PlanControllComponent {
-
   @Input() project : Project 
+  @Output() toProgress = new EventEmitter<void>()
+
+  onMoveToProgress() {
+
+    this.toProgress.emit();
+  }
 }

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

+<p>project-complete-modal works!</p>

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

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'project-complete-modal',
+  templateUrl: './project-complete-modal.component.html',
+  styleUrl: './project-complete-modal.component.css'
+})
+export class ProjectCompleteModalComponent {
+
+}

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

+<p>project-replan-modal works!</p>

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

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'project-replan-modal',
+  templateUrl: './project-replan-modal.component.html',
+  styleUrl: './project-replan-modal.component.css'
+})
+export class ProjectReplanModalComponent {
+
+}

src/app/projects/components/projectModals/project-toprogress-modal/project-toprogress-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">
+         <div *ngIf="canMoveToProgress">
+        للأسف , لاتستطيع الانتقال إلى مرحلة التخطيط لأن مجموع الاوزان للمراحل ليس مئة,قم بالتعديل ومن ثم أعد المحاولة
+    </div>
+    <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>
+    </div>

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

+import { Component, Input, OnInit } from '@angular/core';
+import { Project } from '../../../models/responses/project';
+import { ProjectService } from '../../../services/project.service';
+import { ToastrService } from 'ngx-toastr';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'project-toprogress-modal',
+  templateUrl: './project-toprogress-modal.component.html',
+  styleUrl: './project-toprogress-modal.component.css'
+})
+export class ProjectToprogressModalComponent implements OnInit {
+
+  @Input() project : Project 
+
+  canMoveToProgress : boolean
+  constructor(
+    private projectServie : ProjectService ,
+    private toastr : ToastrService,
+    private activeModal :NgbActiveModal
+  ){}
+
+  ngOnInit(): void {
+    
+
+    this._setCanMove();
+
+    
+  }
+  onClose() {
+    this.activeModal.close();
+  }
+  
+  onSubmit(){
+
+    this
+    .projectServie
+    .approveProject(this.project.id)
+    .subscribe({
+      next : (data)=>{
+        this
+        .toastr
+        .success('تم الانتقال إلى مرحلة التنفيذ');
+      
+      },
+      error:(err)=>{
+        this
+        .toastr
+        .error('تعذر الانتقال إلى مرحلة التخطيط');
+      }
+    });
+
+  }
+  private _setCanMove(){
+
+    let total =0 
+    
+    this
+    .project
+    .steps
+    .forEach(e => total+=e.weight)
+    
+    this
+    .canMoveToProgress = total == 100 ?  true : false 
+  
+  } 
+
+}

src/app/projects/components/steps/edit-step-modal/edit-step-modal.component.html

+<!-- edit-participant-modal.component.html
+<div class="modal fade" id="editParticipantModal" tabindex="-1" aria-labelledby="editParticipantModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="editParticipantModalLabel">تعديل معلومات مشاركة </h5>
+          <button type="button" class=" ml-4 mr-4 btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <form [formGroup]="editParticipantForm" (ngSubmit)="onSubmit()">
+            <div class="mb-3">
+              <label for="role" class="form-label">صفة المساهمة</label>
+              <input type="text" id="role" formControlName="role" class="form-control" required>
+            </div>
+            <div class="mb-3">
+              <label for="partialTimeRatio" class="form-label">نسبة التفرغ</label>
+              <input type="number" id="partialTimeRatio" formControlName="partialTimeRatio" class="form-control" required>
+            </div>
+
+            <button type="submit" class="col-4 offset-2 btn btn-primary" [disabled]="!editParticipantForm.valid">حفظ</button>
+            <button type="button" class="col-4 offset-2 btn btn-secondary" data-bs-dismiss="modal">إزالة</button>
+        
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+   -->
\ No newline at end of file

src/app/projects/components/steps/edit-step-modal/edit-step-modal.component.ts

+// import { Component, EventEmitter, Input, Output } from '@angular/core';
+// import { Step } from '../../../models/responses/Step';
+// import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+// import { ChangeEmployeeParticipationRequest } from '../../../models/requests/project-requests/ChangeEmployeeParticipationRequest';
+// import { ProjectService } from '../../../services/project.service';
+
+// @Component({
+//   selector: 'edit-step-modal',
+//   templateUrl: './edit-step-modal.component.html',
+//   styleUrl: './edit-step-modal.component.css'
+// })
+// export class EditStepModalComponent {
+//   @Input() step: Step;
+//   @Output() stepEdited = new EventEmitter<void>();
+
+//   editStepForm: FormGroup;
+
+//   constructor(private fb: FormBuilder, private projectService: ProjectService) {
+//     this.editStepForm = this.fb.group({
+//       role: ['', Validators.required],
+//       partialTimeRatio: [0, [Validators.required, Validators.min(0)]],
+//     });
+//   }
+
+//   ngOnChanges() {
+//     if (this.step) {
+//       this.editStepForm.patchValue(this.step);
+//     }
+//   }
+
+//   onSubmit() {
+//     if (this.editStepForm.valid) {
+      
+//       let request : ChangeEmployeeParticipationRequest ={
+//         role: this.editStepForm.value.role ,
+//         partialTimeRation: this.editStepForm.value.partialTimeRatio,
+//         stepId: this.step.employee.id ,
+//         projectId:this.step.projectId
+
+//       }
+//       debugger;
+//       this
+//       .projectService
+//       .changeParticipation(request)
+//       .subscribe(() => {
+//         this.stepEdited.emit();
+//         this.closeModal();
+//       });
+//     }
+//   }
+
+//   closeModal() {
+//     const modal = document.getElementById('editstepModal');
+//     if (modal) {
+//       (modal as any).modal('hide');
+//     }
+//   }
+
+// }

src/app/projects/components/steps/remove-step-modal/remove-step-modal.component.html

+<p>remove-step-modal works!</p>

src/app/projects/components/steps/remove-step-modal/remove-step-modal.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Step } from '../../../models/responses/Step';
+import { ProjectService } from '../../../services/project.service';
+import { StepService } from '../../../services/step.service';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'remove-step-modal',
+  templateUrl: './remove-step-modal.component.html',
+  styleUrl: './remove-step-modal.component.css'
+})
+export class RemoveStepModalComponent {
+  @Input() step: Step;
+  @Output() stepRemoved = new EventEmitter<void>();
+
+  constructor(
+    private stepService: StepService,
+    private toastr : ToastrService) {}
+
+  onConfirmRemove() {
+
+    this
+    .stepService
+    .deleteSep(this.step.id)
+    .subscribe({
+      next: ()=>{
+
+        this.stepRemoved.emit();
+
+      },
+      error: (err)=>{
+        this
+        .toastr
+        .error('تعذر حذف المرحلة')
+
+      }
+
+    });
+
+
+  }
+}

src/app/projects/components/step-row-item/step-row-item.component.ts → src/app/projects/components/steps/step-row-item/step-row-item.component.ts

 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Step } from '../../models/responses/Step';
+import { Step } from '../../../models/responses/Step';
 
 @Component({
   selector: 'step-row-item',

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

@@ -69,6 +69,7 @@
 
           <plan-controll 
             [project]="project"
+            (toProgress)="openMoveToProgressModal()"
           >
 
           </plan-controll>

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

@@ -4,6 +4,9 @@ import { ToastrService } from 'ngx-toastr';
 import { Project } from '../../models/responses/project';
 import { PdfDownloaderService } from '../../../core/services/pdfDownloader/pdf-downloader.service';
 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';
 
 
 @Component({
@@ -14,20 +17,52 @@ import { ProjectService } from '../../services/project.service';
 export class ProjectDetailsComponent implements OnInit {
   project : Project
 
+  projectId : number 
   constructor(
     public router : Router,
     private route: ActivatedRoute,
     private projectService: ProjectService,
     private toastr: ToastrService,
+    private modalService :NgbModal ,
     private pdfDownloader : PdfDownloaderService
     ) {}
 
     ngOnInit(): void {
-    const id = Number(this.route.snapshot.paramMap.get('id'));
+    this.projectId= Number(this.route.snapshot.paramMap.get('id'));
 
+    this.loadProject()
+  
+  }
+
+  openMoveToProgressModal(){
+    
+    const modalRef = this.modalService.open(ProjectToprogressModalComponent);
+    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');
+  }
+ 
+  loadProject(){
     this
     .projectService
-    .getProjectById(id)
+    .getProjectById(this.projectId)
     .subscribe({
       next :(data) => {
         
@@ -41,10 +76,4 @@ export class ProjectDetailsComponent implements OnInit {
     });
 
   }
-
-  
-  public downloadAsPdf(): void {
-    this.pdfDownloader.downloadAsPdf('pdfContent');
-  }
- 
 }

src/app/projects/pages/step-list/step-list.component.ts

@@ -7,6 +7,7 @@ import { StepService } from '../../services/step.service';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { AddStepModalComponent } from '../../components/modals/add-step-modal/add-step-modal.component';
 import { Modal } from 'bootstrap';
+import { RemoveStepModalComponent } from '../../components/steps/remove-step-modal/remove-step-modal.component';
 @Component({
   selector: 'step-list',
   templateUrl: './step-list.component.html',
@@ -50,6 +51,7 @@ export class StepListComponent {
     })
 
   }
+
   openAddModal(): void {
     const modalRef = this.modalService.open(AddStepModalComponent, { size: 'lg' });
     modalRef.componentInstance.projectId = this.projectId;

src/app/projects/projects.module.ts

@@ -6,7 +6,7 @@ import { ProjectDetailsComponent } from './pages/project-details/project-details
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { SharedModule } from '../shared/shared.module';
 import { ProjectRoutingModule } from './project-routing.module';
-import { StepRowItemComponent } from './components/step-row-item/step-row-item.component';
+import { StepRowItemComponent } from './components/steps/step-row-item/step-row-item.component';
 import { ProjectCreateComponent } from './pages/project-create/project-create.component';
 import {  MatCommonModule, MatOption, MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -37,6 +37,10 @@ import { RemoveParticipantModalComponent } from './components/modals/remove-part
 import { ParticipantChangesComponent } from './pages/participant-changes/participant-changes.component';
 import { AttahmentItemComponent } from './components/attahment-item/attahment-item.component';
 import { RemoveAttachmentModalComponent } from './components/modals/remove-attachment-modal/remove-attachment-modal.component';
+import { RemoveStepModalComponent } from './components/steps/remove-step-modal/remove-step-modal.component';
+import { ProjectToprogressModalComponent } from './components/projectModals/project-toprogress-modal/project-toprogress-modal.component';
+import { ProjectCompleteModalComponent } from './components/projectModals/project-complete-modal/project-complete-modal.component';
+import { ProjectReplanModalComponent } from './components/projectModals/project-replan-modal/project-replan-modal.component';
 
 @NgModule({
   declarations: [
@@ -63,7 +67,12 @@ import { RemoveAttachmentModalComponent } from './components/modals/remove-attac
     RemoveParticipantModalComponent,
     ParticipantChangesComponent,
     AttahmentItemComponent,
-    RemoveAttachmentModalComponent
+    RemoveAttachmentModalComponent,
+    AddStepModalComponent,
+    RemoveStepModalComponent,
+    ProjectToprogressModalComponent,
+    ProjectCompleteModalComponent,
+    ProjectReplanModalComponent
   ],
   providers: [
     ProjectService,