fix modal

src/app/core/services/authentication/authentication.service.ts

@@ -35,6 +35,7 @@ export class AuthenticationService {
     return this.http
           .post<AuthenticationResponse>(
             this.config.getServerUrl()+ "/Authentication/Login",loginRequest).pipe(
+              
               tap(response => {
                 // Store JWT token in cookie
                 this.cookieService.set('token', response.token,1); // Expires in  days

src/app/pages/login/login.component.ts

@@ -54,7 +54,6 @@ export class LoginComponent implements OnInit {
       next: (res:AuthenticationResponse)=>{
         if(res.email) {
           this.dataStorage.setItem('userDetails', JSON.stringify(res));
-          this.dataStorage.setItem('token', JSON.stringify(res.token));
           this.toastr.info('مرحبا بك مجددا يا ' + res.firstName+" " +res.lastName);
           this.router.navigateByUrl('/home');
 

src/app/projects-types/components/edit-type-modal/edit-type-modal.component.html

-<form (ngSubmit)="saveType()">
+  <div class="modal-header">
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+    
+        <h5 class="modal-title" id="modalLabel">تعديل نوع مشروع</h5>
+    
+      </div>
+      <div class="modal-body">
+        <!-- Edit Form -->
+        <form (ngSubmit)="saveType()">
           <div class="row">
       
               <div class="mb-3 col-5  offset-1">
                 <label for="employee" class="form-label">عدد العمال المطلوب لهذا النوع  </label>
-          <input type="number" name="employee" id="employee" class="form-control"[min]="0"  [(ngModel)]="selectedItem.expectedNumberOfWorker" required>
+                <input type="number" name="employee" id="employee" class="form-control"[min]="0"  [(ngModel)]="request.expectedNumberOfWorker" required>
               </div>
               <div class="mb-3 col-5 ">
                 <label for="efort" class="form-label">الجهد لهذا النوع من المشاريع</label>
-          <input  id="efort" class="form-control" [(ngModel)]="selectedItem.expectedEffort" [min]="0" name="efort" required>
+                <input  id="efort" class="form-control" [(ngModel)]="request.expectedEffort" [min]="0" name="efort" required>
               </div>
           
               <div class="mb-3 col-9 offset-1">
                 <label for="typeDescription" class="form-label">وصف هذا النوع</label>
-          <textarea  id="typeDescription" class="form-control" [cols]="3" [(ngModel)]="selectedItem.description" name="typeDescription" required>
+                <textarea  id="typeDescription" class="form-control" [cols]="3" [(ngModel)]="request.description" name="typeDescription" required>
                   </textarea>
       
               </div>
       
           </div>
           <button type="submit" class="btn btn-success">حفظ</button>
-</form>
+      </form>
+            
+      </div>
+    
\ No newline at end of file

src/app/projects-types/components/edit-type-modal/edit-type-modal.component.ts

-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { ProjectType } from '../../models/responses/projectType';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { ProjectsTypesService } from '../../services/projects-types.service';
+import { ToastrService } from 'ngx-toastr';
+import { UpdateTypeRequest } from '../../models/requests/updateProjectTypeRequest';
 
 @Component({
   selector: 'edit-type-modal',
   templateUrl: './edit-type-modal.component.html',
   styleUrl: './edit-type-modal.component.css'
 })
-export class EditTypeModalComponent {
+export class EditTypeModalComponent implements OnInit{
 
   @Input() selectedItem : ProjectType
+  request : UpdateTypeRequest
   @Output() submit = new EventEmitter<ProjectType>();
 
-  constructor(){}
+  constructor(
+      private avtive : NgbActiveModal,
+      private service : ProjectsTypesService,
+      private toastr :ToastrService
 
+  ){}
+
+  ngOnInit(): void {
+    this.request = {...this.selectedItem}
+    
+  }
   saveType(){
-    this.submit.emit(this.selectedItem);
+    this
+    .service
+    .updateType(this.selectedItem.id,this.request)
+    .subscribe({
+      next : ()=>{
+
+        this.avtive.close(this.request);
+
+      }
+    })
     
   }
 }

src/app/projects-types/components/remove-tyoe-modal/remove-tyoe-modal.component.html

+    <div class="modal-header">
+          <button type="button" class="btn-close" (click)="close()"></button>
+      
+          <h5 class="modal-title" id="modalLabel">حذف نوع مشروع </h5>
+      
+        </div>
+        <div class="modal-body">
+            <p>هل أنت متأكد من أنك تريد حذف عنصر {{ item.typeName }}?</p>
+            <button type="button" class="col-4 m-4  btn  btn-danger" (click)="remove()">إزالة</button>
+            <button type="button" class="btn col-4 my-4  btn-secondary" (click)="close()">إلغاء</button>
+        </div>

src/app/projects-types/components/remove-tyoe-modal/remove-tyoe-modal.component.ts

+import { Component, Input } from '@angular/core';
+import { ProjectType } from '../../models/responses/projectType';
+import { ProjectsTypesService } from '../../services/projects-types.service';
+import { ToastrService } from 'ngx-toastr';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'remove-tyoe-modal',
+  templateUrl: './remove-tyoe-modal.component.html',
+  styleUrl: './remove-tyoe-modal.component.css'
+})
+export class RemoveTyoeModalComponent {
+
+  @Input() item : ProjectType 
+
+
+  constructor(
+
+    private prt : ProjectsTypesService,
+    private toastr : ToastrService,
+    private active : NgbActiveModal
+
+  ){}
+
+
+  remove(){
+    this
+    .prt
+    .delete(this.item.id)
+    .subscribe({
+
+      next : ()=>{
+
+        this.active.close(this.item.id);
+        this.toastr.success('تم الحذف بنجاح')
+      
+      },
+      error:(err)=>{
+      }
+
+    })
+
+  }
+
+  close(){
+    this.active.close();
+  }
+}
+
+

src/app/projects-types/pages/types-list/types-list.component.html

@@ -26,31 +26,3 @@
     </div>
     </div>
 </section>
-<div class="modal   fade" id="typeModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      
-          <h5 class="modal-title" id="modalLabel">{{ modalTitle }}</h5>
-      
-        </div>
-        <div class="modal-body">
-          <!-- Edit Form -->
-          <div *ngIf="modalMode === 'edit'">
-
-            <edit-type-modal 
-              [selectedItem]="selectedItem"
-              (submit)="saveType()"
-            ></edit-type-modal>
-          </div>
-          <!-- Delete Confirmation -->
-          <div *ngIf="modalMode === 'delete'" class="row ">
-            <p>هل أنت متأكد من أنك تريد حذف عنصر {{ selectedItem.typeName }}?</p>
-            <button type="button" class="col-4 m-4  btn  btn-danger" (click)="delete()">إزالة</button>
-            <button type="button" class="btn col-4 my-4  btn-secondary" data-bs-dismiss="modal">إلغاء</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
\ No newline at end of file

src/app/projects-types/projects-types.module.ts

@@ -8,6 +8,7 @@ import { TypesCreateComponent } from './pages/types-create/types-create.componen
 import { EditTypeModalComponent } from './components/edit-type-modal/edit-type-modal.component';
 import { FormsModule } from '@angular/forms';
 import { TypesDetailComponent } from './pages/types-detail/types-detail.component';
+import { RemoveTyoeModalComponent } from './components/remove-tyoe-modal/remove-tyoe-modal.component';
 
 
 @NgModule({
@@ -16,7 +17,8 @@ import { TypesDetailComponent } from './pages/types-detail/types-detail.componen
     TypesListComponent,
     TypesCreateComponent,
     EditTypeModalComponent,
-    TypesDetailComponent
+    TypesDetailComponent,
+    RemoveTyoeModalComponent
   ],
   imports: [
     CommonModule,

src/app/projects/components/edit-financial-modal/edit-financial-modal.component.html

+<div class="modal-header">
+    <button type="button" class="btn-close"  (click)="close()" ></button>
+    <h5 class="modal-title" id="modalLabel">تعديل عنصر إنفاق</h5>
+
+  </div>
+  <div class="modal-body">
+    <!-- Edit Form -->
+    <div>
+      <form (ngSubmit)="saveItem()">
+          <div class="row">
+
+              <div class="mb-3 col-5  offset-1">
+                <label for="stepName" class="form-label">نوع الكلفة</label>
+                <input type="text" name="stepName" id="stepName" class="form-control" [(ngModel)]="selectedItem.costType" required>
+              </div>
+              
+              <div class="mb-3 col-5">
+                <label for="expectedSpendingDate" class="form-label">تاريخ الانفاق المتوقع</label>
+                <input type="date" id="expectedSpendingDate" class="form-control" [(ngModel)]="selectedItem.expectedSpendingDate" name="expectedSpendingDate" required>
+              </div>
+        
+            <div class="mb-3 col-4  offset-1">
+              <label for="local" class="form-label">الشراء المحلي</label>
+              <input  id="local" class="form-control" [(ngModel)]="selectedItem.localPurchase" name="local" required>
+            </div>
+            <div class="mb-3 col-4 ">
+              <label for="completion" class="form-label">الشراء الخارجي </label>
+              <input  id="completion" class="form-control" [(ngModel)]="selectedItem.externalPurchase.ammount" name="completion" required>
+            </div>
+            
+          <div class="mb-3 col-2">
+            <label for="duration" class="form-label">نوغ القطع</label>
+            <select  id="duration" class="form-control select " [(ngModel)]="selectedItem.externalPurchase.currency" name="duration" required>
+              <option value="USA">USA</option>  
+              <option value="EUR">EUR</option>  
+            </select>
+          </div>
+            </div>
+            <div class="row">
+              <div class="mb-3 col-10 offset-1 " >
+                <label for="decription" class="form-label">البيان</label>
+                <textarea col="3" name="worker" id="decription" class="form-control" [(ngModel)]="selectedItem.description"  required>
+                  </textarea>
+              </div>
+              </div>
+              <div class="row">
+
+        
+
+          </div>
+          <button type="submit" class="btn m-4 btn-success">حفظ</button>
+          <button type="submit" (click)="close()" class="btn m-4 btn-secondary">إلغاء</button>
+          
+      </form>
+    </div>
+    <!-- Delete Confirmation -->
+    </div>

src/app/projects/components/edit-financial-modal/edit-financial-modal.component.ts

+import { Component, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { FinancialSpending } from '../../models/responses/financialSpending';
+import { FinancialSpendingService } from '../../services/financial-spending.service';
+import { UpdateFinancialSpendItemRequest } from '../../models/requests/financial-reuqests/UpdateFinancialSpendItemRequest';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'edit-financial-modal',
+  templateUrl: './edit-financial-modal.component.html',
+  styleUrl: './edit-financial-modal.component.css'
+})
+export class EditFinancialModalComponent {
+
+  @Input() selectedItem : FinancialSpending
+  @Input() projectId : number 
+  
+  constructor(
+
+    private activeModal: NgbActiveModal,
+    private toastr : ToastrService,
+    private financialService : FinancialSpendingService
+
+  ){}
+  
+  saveItem(){
+    let request : UpdateFinancialSpendItemRequest ={
+      ...this.selectedItem,
+      projectId: this.projectId
+    }
+    this.financialService.updateSpendItem(request).subscribe({
+      next :()=>{
+        this.activeModal.close(request);
+      }
+      ,
+      error:(err)=>{
+        this.toastr.error("لقد حدث خطاء ما ")
+      
+      }
+
+    })
+  
+      
+
+  }
+
+close(){
+
+  this.activeModal.close();
+}
+}

src/app/projects/components/remove-financial-modal/remove-financial-modal.component.html

+<div class="modal-header">
+    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+    <h5 class="modal-title" id="modalLabel">حذف عنصر إنفاق</h5>
+
+  </div>
+  <div class="modal-body">
+ 
+    <!-- Delete Confirmation -->
+    <div>
+      <p class="text-center text-danger">هل أنت متأكد من أنك تريد حذف عنصر {{ selectedItem.costType }}?</p>
+      <button type="button" class="btn m-4 btn-danger" (click)="saveItem()">إزالة</button>
+      <button type="button" class="btn btn-secondary" (click)="close()">إلغاء</button>
+    </div>
+  
\ No newline at end of file

src/app/projects/components/remove-financial-modal/remove-financial-modal.component.ts

+import { Component, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastrService } from 'ngx-toastr';
+import { UpdateFinancialSpendItemRequest } from '../../models/requests/financial-reuqests/UpdateFinancialSpendItemRequest';
+import { FinancialSpending } from '../../models/responses/financialSpending';
+import { FinancialSpendingService } from '../../services/financial-spending.service';
+import { RemoveFinancialSpendItemRequest } from '../../models/requests/financial-reuqests/RemoveFinancialSpendItemRequest';
+
+@Component({
+  selector: 'remove-financial-modal',
+  templateUrl: './remove-financial-modal.component.html',
+  styleUrl: './remove-financial-modal.component.css'
+})
+export class RemoveFinancialModalComponent {
+
+  @Input() selectedItem : FinancialSpending
+  @Input() projectId : number 
+  
+  constructor(
+
+    private activeModal: NgbActiveModal,
+    private toastr : ToastrService,
+    private financialService : FinancialSpendingService
+
+  ){}
+  
+  saveItem(){
+    let request : RemoveFinancialSpendItemRequest ={
+      ...this.selectedItem,
+      projectId: this.projectId
+    }
+    this.financialService.delete(request).subscribe({
+      next :()=>{
+        this.activeModal.close(request);
+      }
+      ,
+      error:(err)=>{
+        this.toastr.error("لقد حدث خطاء ما ")
+      
+      }
+
+    })
+  
+      
+
+  }
+
+close(){
+
+  this.activeModal.close();
+}
+
+}

src/app/projects/pages/financial-spending/financial-spending.component.html

@@ -15,14 +15,19 @@
   <financial-item class=" offset-2" 
     *ngFor="let item of spends" 
     [item]="item"
-    (edit)="openModal('edit', item)"
-    (delete)="openModal('delete', item)"
+    (edit)="openEditModal(item)"
+    (delete)="openDeleteModal(item)"
   >
   
   </financial-item>
 
-    <div *ngIf="spends.length==0">
+    <div *ngIf="spends.length==0" class="text-center text-primary">
+      <strong>
+
         للأسف هذا المشروع لايحوي على خطة انفاق
+    
+      </strong>
+    
     </div>
     </div>
     </div>

src/app/projects/pages/financial-spending/financial-spending.component.ts

@@ -11,6 +11,8 @@ import { AddFinancialSpendModalComponent } from '../../components/modals/add-fin
 import { UpdateFinancialSpendItemRequest } from '../../models/requests/financial-reuqests/UpdateFinancialSpendItemRequest';
 import { RemoveFinancialSpendItemRequest } from '../../models/requests/financial-reuqests/RemoveFinancialSpendItemRequest';
 import { Modal } from 'bootstrap';
+import { EditFinancialModalComponent } from '../../components/edit-financial-modal/edit-financial-modal.component';
+import { RemoveFinancialModalComponent } from '../../components/remove-financial-modal/remove-financial-modal.component';
 
 @Component({
   selector: 'financial-spending',
@@ -159,4 +161,43 @@ export class FinancialSpendingComponent {
     });
   }
 
+  
+
+  openEditModal(item : FinancialSpending): void {
+    const modalRef = this.modalService.open(EditFinancialModalComponent);
+    modalRef.componentInstance.projectId = this.projectId;
+    modalRef.componentInstance.selectedItem = item;
+
+    modalRef.result.then((result :UpdateFinancialSpendItemRequest) => {
+      if (result) {
+
+        let sp = this.spends.find(e => e.id == item.id);
+        sp={...item};
+
+
+
+      }
+    }, (reason) => {
+
+    });
+  }
+
+  openDeleteModal(item : FinancialSpending): void {
+    const modalRef = this.modalService.open(RemoveFinancialModalComponent);
+    modalRef.componentInstance.projectId = this.projectId;
+    modalRef.componentInstance.selectedItem = item;
+
+    modalRef.result.then((result : number ) => {
+      if (result) {
+
+        let sp = this.spends.filter(e => e.id != item.id);
+        
+
+      }
+    }, (reason) => {
+
+    });
+  }
+
+
 }

src/app/projects/pages/participant-changes/participant-changes.component.html

@@ -32,9 +32,9 @@
               </div>
             </div>
             <div class="row mt-5 align-items-center">
-            <p>
+            <p class="text-center">
               إن السيد <b>{{participant.personalInfo | fullname}}</b> 
-            يعمل حاليا في المشروع بصفة  <b>{{currentParticipation.role}}</b> وبنسبة تفرغ قدرها <b>{{currentParticipation.partialTimeRatio}}</b> ويبين الجدول التالي تبدلات عمله اثناء عمله في المشروع
+            يعمل حاليا في المشروع بصفة  <b>{{currentParticipation.role}}</b> وبنسبة تفرغ قدرها <b>{{currentParticipation.partialTimeRatio}}</b> سلعة، ويبين الجدول التالي تبدلات عمله اثناء عمله في المشروع
             </p>
             </div>
             <div class="row mt-5 align-items-center">

src/app/projects/projects.module.ts

@@ -48,6 +48,8 @@ import { EditWeightModalComponent } from './components/step-modals/edit-weight-m
 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';
+import { EditFinancialModalComponent } from './components/edit-financial-modal/edit-financial-modal.component';
+import { RemoveFinancialModalComponent } from './components/remove-financial-modal/remove-financial-modal.component';
 
 @NgModule({
   declarations: [
@@ -86,7 +88,9 @@ import { CancelProjectComponent } from './components/cancel-project/cancel-proje
     EditWeightModalComponent,
     ProjectBycreterionComponent,
     FilterModalComponent,
-    CancelProjectComponent
+    CancelProjectComponent,
+    EditFinancialModalComponent,
+    RemoveFinancialModalComponent
   ],
   providers: [
     ProjectService,

src/app/projects/services/financial-spending.service.ts

@@ -39,7 +39,7 @@ export class FinancialSpendingService {
 
   public updateSpendItem(request : UpdateFinancialSpendItemRequest ):Observable<FinancialSpending>{
     
-    return this.http.put<FinancialSpending>(this.config.getServerUrl()+ "/FinancialSpends/",request);
+    return this.http.put<FinancialSpending>(this.config.getServerUrl()+ "/FinancialSpends/"+request.id,request);
   }