add cancel project

src/app/projects/components/cancel-project/cancel-project.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">
+   {{msg}}
+ </div>
+  <div  *ngIf="canComplete">
+
+    <p class="text-center">
+        <strong>
+            هل تريد حقاً إلغاء مشروع {{project.currentState | stateTranslate}}
+        </strong>
+    </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/projects/components/cancel-project/cancel-project.component.ts

+import { Component, Input, OnInit } 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 { CancelProjectRequest } from '../../models/requests/project-requests/CancelProjectRequest';
+import { Router } from '@angular/router';
+import { UserService } from '../../../core/services/authentication/user.service';
+
+@Component({
+  selector: 'cancel-project',
+  templateUrl: './cancel-project.component.html',
+  styleUrl: './cancel-project.component.css'
+})
+export class CancelProjectComponent implements OnInit {
+  @Input() project : Project 
+
+  request : CancelProjectRequest
+
+  msg :string
+  canComplete : boolean
+  constructor(
+    private projectServie : ProjectService ,
+    private toastr : ToastrService,
+    private userService : UserService,
+    private activeModal :NgbActiveModal,
+    private router :Router
+  ){}
+
+  ngOnInit(): void {
+    
+
+    this._setCanMove();
+
+    
+    
+  }
+  
+  onClose() {
+    this.activeModal.close();
+  }
+  
+  onSubmit(){
+
+    this
+    .projectServie
+    .cancelProject(this.request)
+    .subscribe({
+      next : (data)=>{
+        this
+        .toastr
+        .success('تم إلغاء المشروع بنجاح');
+      
+        this.activeModal.close(true);
+      },
+      error:(err)=>{
+        this
+        .toastr
+        .error('تعذر إلغاء المشروع');
+      }
+    });
+
+  }
+  private _setCanMove(){
+
+    this.request={
+      employeeId: this.userService.getEmployeeId(),
+      projectId : this.project.id
+    }
+
+    
+    this.canComplete =this
+    .project
+    .currentState.toLocaleLowerCase()=="inprogress";
+
+    this.canComplete=this.canComplete || this
+    .project
+    .currentState.toLocaleLowerCase()=="inplan";
+
+    this.msg="أنت في مرحلة لاتستطيع فيها إلغاء المشروع"    
+    
+  } 
+
+}

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

@@ -74,7 +74,7 @@
     <div class="card shadow mb-4">
       <div class="card-body file-list">
         <div class="d-flex align-items-center">
-          <div class="circle circle-md bg-danger">
+          <div class="circle circle-md bg-info">
             <span class="fe fe-map fe-16 text-white"></span>
           </div>
           <div class="flex-fill ml-4 fname">
@@ -92,7 +92,7 @@
     <div class="card shadow mb-4">
       <div class="card-body file-list">
         <div class="d-flex align-items-center">
-          <div class="circle circle-md bg-danger  ">
+          <div class="circle circle-md bg-info  ">
             <span class="fe fe-map fe-16 text-white"></span>
           </div>
           <div class="flex-fill ml-4 fname">
@@ -102,5 +102,24 @@
       </div> <!-- .card-body -->
     </div> <!-- .card -->
   </div>
+  <div class="col-md-6 col-lg-4" 
+    *ngIf="canSee()"
+
+    (click)="onCancel()">
+    <div class="card shadow mb-4">
+      <div class="card-body file-list">
+        <div class="d-flex align-items-center">
+          <div class="circle circle-md bg-danger  ">
+            <span class="fe fe-map fe-16 text-white"></span>
+          </div>
+          <div class="flex-fill ml-4 fname">
+            <strong>
+              إلغاء المشروع
+            </strong><br />
+          </div>
+        </div>
+      </div> <!-- .card-body -->
+    </div> <!-- .card -->
+  </div>
 
 </div>

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

@@ -12,6 +12,7 @@ export class InfoControllComponent {
 
   @Input() project : Project
   @Output() changeLeader = new EventEmitter<void>()
+  @Output() cancel = new EventEmitter<void>()
   @Output() changeManager = new EventEmitter<void>()
 
   constructor(
@@ -28,5 +29,8 @@ export class InfoControllComponent {
 
     return this.userService.hasRole(ROLES.SCIENTIFIC_DEPUTY)
   }
-      
+  onCancel() {
+    this.cancel.emit()
+    }
+          
 }

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

-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
 import { Project } from '../../../models/responses/project';
@@ -10,7 +10,7 @@ import { CompleteProjectRequest } from '../../../models/requests/project-request
   templateUrl: './project-complete-modal.component.html',
   styleUrl: './project-complete-modal.component.css'
 })
-export class ProjectCompleteModalComponent {
+export class ProjectCompleteModalComponent implements OnInit {
   @Input() project : Project 
 
   request = new CompleteProjectRequest();

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

 <div class="card col-10" *ngIf="types && departments">
   <div class="card-body">
-    <h5 class="card-title text-center"><strong>طرح مشروع جديد</strong></h5>
 
-    <!-- Multi Columns Form -->
-    <form class="row g-3" [formGroup]="projectForm" (ngSubmit)="onSubmit(request)">
+    <div class="row ">
+      <div  class="col-2 text-center">
+        <img src="/assets/images/users/4.jpg" class="navbar-brand-img brand-sm mx-auto my-4" alt="...">
+      </div>
+   
+    <div  class="col-8 text-center">
+      
+      <h5 class="card-title text-center"><strong>طرح مشروع جديد</strong></h5>
+    </div>
+  
+    <div  class="col-2 text-center">
+      <img src="/assets/images/users/4.jpg" class="navbar-brand-img brand-sm mx-auto my-4" alt="...">
+    </div>
+  </div> <!-- /.row -->
+  <hr>
+  <!-- Multi Columns Form -->
+    <form class="row mt-4 g-3" [formGroup]="projectForm" (ngSubmit)="onSubmit(request)">
       <div class="row">
       <mat-form-field class="col-4"> 
         <input type="text" placeholder="مدير المشروع" formControlName="projectManager" matInput [matAutocomplete]="autoPM">
@@ -38,16 +52,17 @@
       <hr>
     <div class="row mb-4" formGroupName="projectInfo">
 
+      
+    
+        <mat-form-field class="example-full-width col-12">
+          <mat-label  for="description" class="form-label">وصف النشاط</mat-label>
+          <textarea [cols]="5" matInput formControlName="description" placeholder="تعريف النشاط " class="form-control"></textarea>
+        </mat-form-field>
         <mat-form-field class=" col-4">
           <mat-label for="name" class="mat-form-field-label ">اسم النشاط</mat-label>
           <input matInput  formControlName="name" [value]="request.projectInfo.name" placeholder="اسم المشروع" class="form-control" id="name">
         </mat-form-field>
       
-    
-        <mat-form-field class="example-full-width col-8">
-          <mat-label  for="description" class="form-label">وصف النشاط</mat-label>
-          <textarea matInput formControlName="description" placeholder="تعريف النشاط " class="form-control"></textarea>
-        </mat-form-field>
         <mat-form-field class="col-4">
           <mat-label for="code" class="form-label">رمز المشروع</mat-label>
           <input matInput formControlName="code" class="form-control" id="code">
@@ -70,91 +85,97 @@
 
     </div>
   
-      <div class="row mb-4" formGroupName="financialFund">
+      <div class=" col-6 mb-4" formGroupName="financialFund">
       
         
-        <mat-form-field class="col-4">
+        <mat-form-field class="col-6">
           <mat-label  for="source" class="form-label">مصدر التمويل</mat-label>
           <input formControlName="source" class="form-control" id="source" matInput />
         </mat-form-field>
      
-        <mat-form-field class="col-4">
+        <mat-form-field class="col-6">
           <mat-label  for="financialStatus" class="form-label" >وضع التمويل</mat-label>
           <input formControlName="financialStatus" class="form-control" id="financialStatus" matInput />
         </mat-form-field>
      
       </div>
     
-      <div class="row" formGroupName="projectAggreement">
-        <div class="col-4">
-          <mat-form-field>
+      <div class="col-6" formGroupName="projectAggreement">
+          <mat-form-field  class="col-6">
             <mat-label>تاريخ كتاب الموافقة</mat-label>
             <input  formControlName="aggreementDate" class="form-control" id="source" matInput [matDatepicker]="aggreement">
             <mat-datepicker-toggle matIconSuffix [for]="aggreement"></mat-datepicker-toggle>
             <mat-datepicker #aggreement></mat-datepicker>
           </mat-form-field>
-          </div>
-        <mat-form-field class="col-4">
+        
+          <mat-form-field class="col-6">
           <mat-label  for="aggreementNumber" class="form-label">رقم كتاب الموافقة</mat-label>
           <input formControlName="aggreementNumber" class="form-control" id="aggreementNumber" matInput/>
         </mat-form-field>
      
       </div>
-      <div class="row" formGroupName="proposalInfo">
-        <div class="col-4">
-          <mat-form-field>
+      <div class="col-6" formGroupName="proposalInfo">
+         <mat-form-field class="col-6">
             <mat-label>تاريخ كتاب الطرح</mat-label>
             <input  formControlName="proposingBookDate" class="form-control" id="proposingBookDate" matInput [matDatepicker]="proposingBookDate">
             <mat-datepicker-toggle matIconSuffix [for]="proposingBookDate"></mat-datepicker-toggle>
             <mat-datepicker #proposingBookDate></mat-datepicker>
           </mat-form-field>
-          </div>
-        <mat-form-field class="col-4">
+        <mat-form-field class="col-6">
           <mat-label  for="proposingBookNumber" class="form-label">رقم كتاب الطرح</mat-label>
           <input formControlName="proposingBookNumber" class="form-control" id="proposingBookNumber" matInput/>
         </mat-form-field>
      
       </div>
-    
-      <div class="col-4">
-        <mat-form-field>
+      <div class="col-6" formGroupName="projectClassification">
+      
+        <mat-form-field class="col-6">
+          <mat-label  for="projectStatus" class="form-label" >حالة النشاط</mat-label>
+          <input formControlName="projectStatus" class="form-control" id="projectStatus" matInput />
+        </mat-form-field>
+     
+        <mat-form-field class="col-6">
+          <mat-label  for="projectNature" class="form-label" >طبيعة النشاط</mat-label>
+          <input formControlName="projectNature" class="form-control" id="projectNature" matInput />
+        </mat-form-field>
+     
+      </div>
+      <div class="col-6" >
+      
+      <mat-form-field class="col-6 ">
           <mat-label>الفعالية المنفذة </mat-label>
           <mat-select formControlName="executerId">
             <mat-option *ngFor="let department of departments " [value]="department.id">{{department.name}}</mat-option>
           </mat-select>
         </mat-form-field>
-        
-      </div>
-      <div class="col-4">
-        <mat-form-field>
+        <mat-form-field class="col-6 ">
           <mat-label for="projectTypeId" class="form-label">نوع النشاط </mat-label>
           <mat-select    id="projectTypeId" formControlName="projectTypeId">
             <mat-option  *ngFor="let type of types " [value]="type.id">{{type.typeName}}</mat-option>
           </mat-select>
         </mat-form-field>
         
-      </div>
+</div>
 
-      <div class="row mb-4" formGroupName="projectClassification">
-      
-        <mat-form-field class="col-4">
-          <mat-label  for="projectStatus" class="form-label" >حالة النشاط</mat-label>
-          <input formControlName="projectStatus" class="form-control" id="projectStatus" matInput />
-        </mat-form-field>
-     
-        <mat-form-field class="col-4">
-          <mat-label  for="projectNature" class="form-label" >طبيعة النشاط</mat-label>
-          <input formControlName="projectNature" class="form-control" id="projectNature" matInput />
-        </mat-form-field>
-     
-      </div>
-    
       <hr>
-      <div class="text-center">
+      <div class="row">
+        <div  class="col-2 text-center">
+          <img src="/assets/images/users/4.jpg" class="navbar-brand-img brand-sm mx-auto my-4" alt="...">
+        </div>
 
-        <button type="submit" class="btn btn-primary">إضافة</button>
-      </div>
-      
+        <div  class="col-8 text-center">
+    
+
+            <button type="submit" class="btn m-4 btn-primary">إضافة</button>
+            <button type="submit" [routerLink]="['/types']" class="btn m-4 btn-secondary">  أنواع المشاريع</button>
+
+            <button type="submit" [routerLink]="['/']" class="btn m-4 btn-secondary"> الصفحة الرئيسية</button>
+            </div>
+        <div  class="col-2 text-center">
+          <img src="/assets/images/users/4.jpg" class="navbar-brand-img brand-sm mx-auto my-4" alt="...">
+        </div>
+      </div> <!-- /.row -->
+              
     </form><!-- End Multi Columns Form -->
 
   </div>

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

@@ -92,6 +92,7 @@
           <info-controll
             [project]="project"
             (changeLeader)="openChangeTeamLeader()"
+            (cancel)="openCancelComplete()"
             (changeManager)="openChangeProjectManager()"
           >
 

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

@@ -13,6 +13,7 @@ import { ChangeManagerModalComponent } from '../../components/projectModals/chan
 import { ChangeLeaderModalComponent } from '../../components/projectModals/change-leader-modal/change-leader-modal.component';
 import { UserService } from '../../../core/services/authentication/user.service';
 import { ROLES } from '../../../core/constants/roles';
+import { CancelProjectComponent } from '../../components/cancel-project/cancel-project.component';
 
 
 @Component({
@@ -133,6 +134,28 @@ export class ProjectDetailsComponent implements OnInit {
   
   }
 
+  openCancelComplete(){
+    
+    const modalRef = this.modalService.open(CancelProjectComponent);
+    modalRef.componentInstance.project = this.project;
+
+    modalRef.result.then((result) => {
+ 
+      if (result) {
+ 
+        this
+        .router
+        .navigate(['/'])
+      
+        
+      }
+      
+    }, (reason) => {
+     
+    
+    });
+  
+  }
 
   loadProject(){
     this
@@ -146,7 +169,7 @@ export class ProjectDetailsComponent implements OnInit {
           ||data.teamLeader.id== this.userService.getEmployeeId()
           ||this.userService.hasRole(ROLES.SCIENTIFIC_DEPUTY)   ){
 
-          this.project = data;
+          this.project = {...data};
       
         }else{
 

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

@@ -155,4 +155,8 @@ closeModal(): void {
   }
 }
 
+canSee(){
+
+}
+
 }

src/app/projects/projects.module.ts

@@ -47,6 +47,7 @@ import { EditStepModalComponent } from './components/step-modals/edit-step-modal
 import { EditWeightModalComponent } from './components/step-modals/edit-weight-modal/edit-weight-modal.component';
 import { ProjectBycreterionComponent } from './pages/project-bycreterion/project-bycreterion.component';
 import { FilterModalComponent } from './components/filter-modal/filter-modal.component';
+import { CancelProjectComponent } from './components/cancel-project/cancel-project.component';
 
 @NgModule({
   declarations: [
@@ -84,7 +85,8 @@ import { FilterModalComponent } from './components/filter-modal/filter-modal.com
     EditStepModalComponent,
     EditWeightModalComponent,
     ProjectBycreterionComponent,
-    FilterModalComponent
+    FilterModalComponent,
+    CancelProjectComponent
   ],
   providers: [
     ProjectService,

src/app/shared/sharedLayout/sidebar/sidebar.component.html

@@ -71,7 +71,7 @@
     </li>
     <li class="nav-item">
       <a
-        [routerLink]="['/byCriterion']"
+        [routerLink]="['/projects/byCriterion']"
         [queryParams]="{ listType: 'managed' }"
         class="nav-link collapsed"
       >
@@ -80,7 +80,7 @@
     </li>
     <li class="nav-item">
       <a
-        [routerLink]="['/byCriterion']"
+        [routerLink]="['/projects/byCriterion']"
         [queryParams]="{ listType: 'leaded' }"
         class="nav-link collapsed"
       >