add participatino parts

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

@@ -5,7 +5,7 @@
 
       <div class="col-xl-6 col offset-3">
         <div class="card p-4">
-          <form class="php-email-form">
+          <form #form="ngForm"  class="php-email-form">
             <div class="row text-center">
                 <p>
                   إصافة نوع مشروع
@@ -36,7 +36,7 @@
  
               <div class="col-md-12 text-center">
  
-                <button class="btn btn-primary"  (click)="submit(request)">إضافة</button>
+                <button class="btn btn-primary" [disabled]="form.invalid"  (click)="submit(request)">إضافة</button>
               </div>
 
             </div>

src/app/projects/components/modals/add-financial-spend-modal/add-financial-spend-modal.component.html

@@ -3,7 +3,7 @@
     <h5 class="modal-title text-center">إضافة  عنصر جديد </h5>
   </div>
   <div class="modal-body">
-    <form (ngSubmit)="onSubmit()" #projectForm="ngForm">
+    <form #form="ngForm" (ngSubmit)="onSubmit()" #projectForm="ngForm">
       <div class="row">
   
         <div class="mb-3 col-3  offset-1">
@@ -18,7 +18,7 @@
   
       <div class="mb-3 col-3">
         <label for="worker" class="form-label">الكلفة  بالليرة السورية</label>
-        <input  id="worker" class="form-control" [(ngModel)]="request.localPurchase" name="worker" required>
+        <input  type="number" id="worker" class="form-control" [(ngModel)]="request.localPurchase" name="worker" required>
       </div>
       
       </div>
@@ -46,8 +46,8 @@
   
         </div>
       <div class="row ">
-        <button type="submit" class=" col-3 btn btn-primary">إضافة</button>
-        <button  class="btn btn-seondary col-3" (click)="onClose()" >إغلاق</button>
+        <button  [disabled]="form.invalid" type="submit" class="  m-4 col-3 btn btn-primary">إضافة</button>
+        <div  class="btn m-4  btn-secondary col-3" (click)="onClose()" >إغلاق</div>
      
       </div>
        </form>

src/app/projects/components/modals/add-participant-modal/add-participant-modal.component.html

+<div class="modal fade" id="addParticipantModal" tabindex="-1" aria-labelledby="addParticipantModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="addParticipantModalLabel">إضافة مشارك في المشروع</h5>
+        <button type="button" class="mr-4 ml-4 btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <form [formGroup]="addParticipantForm" (ngSubmit)="onSubmit()">
+          <div class="mb-3">
+            <label for="email" class="form-label">البريد الالكتروني</label>
+            <input
+              type="text"
+              id="email"
+              formControlName="email"
+              class="form-control"
+              [ngbTypeahead]="search"
+              [resultFormatter]="formatter"
+              [inputFormatter]="formatter"
+              (selectItem)="onEmployeeSelected($event.item)"
+              placeholder="البريد الالكتروني"
+                required
+            />
+          </div>
+          <div class="mb-3">
+            <label for="partialTimeRatio" class="form-label">نسبة التفرغ</label>
+            <input type="number" id="partialTimeRatio" formControlName="partialTimeRatio" class="form-control" required [min]="0" />
+          </div>
+          <div class="mb-3">
+            <label for="role" class="form-label">صفة المساهمة</label>
+            <input type="text" id="role" formControlName="role" class="form-control" required />
+          </div>
+          <button type="submit" class="col-4 offset-2 btn btn-success" [disabled]="!addParticipantForm.valid">إضافة المشارك</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

src/app/projects/components/modals/add-participant-modal/add-participant-modal.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { Observable, debounceTime, distinctUntilChanged, map, of, switchMap } from 'rxjs';
+import { EmployeesService } from '../../../../employees/services/employees.service';
+import { Employee } from '../../../../employees/models/responses/employee';
+import { AddParticipantRequest } from '../../../models/requests/project-requests/addParticipantRequest';
+import { Modal } from 'bootstrap';
+import { EmployeeParticipate } from '../../../../employees/models/responses/employeeParticipate';
+import { ProjectService } from '../../../services/project.service';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'add-participant-modal',
+  templateUrl: './add-participant-modal.component.html',
+  styleUrl: './add-participant-modal.component.css'
+})
+export class AddParticipantModalComponent {
+
+  @Output() participantAdded = new EventEmitter<void>();
+  @Input() paticipants : EmployeeParticipate[]
+  @Input() projectId : number 
+
+  request : AddParticipantRequest =new  AddParticipantRequest();
+  addParticipantForm: FormGroup;
+  employees$: Observable<Employee[]>;
+
+  constructor(
+    private fb: FormBuilder,
+    private employeeService: EmployeesService,
+    private projectService : ProjectService,
+    private toastr :ToastrService
+
+
+  ) {
+
+    this.addParticipantForm = this.fb.group({
+      email: ['', Validators.required],
+      partialTimeRatio: [0, [Validators.required, Validators.min(0)]],
+      role: ['', Validators.required],
+      participantId: [0] 
+    });
+  }
+
+  ngOnInit(): void {
+    // Load employees as an observable
+    this.employees$ = this.employeeService.getAvailableEmployees();
+  }
+
+  search = (text$: Observable<string>) =>
+    text$.pipe(
+      debounceTime(300),
+      distinctUntilChanged(),
+      switchMap(term =>
+        term.length < 2 ? of([])
+        : this.employees$.pipe(
+            map(employees => employees.filter(employee => employee.email.toLowerCase().includes(term.toLowerCase()))),
+            map(employees => this.filterExistingEmployees(employees))
+     
+          )
+      )
+    );
+  
+  formatter = (x: Employee) => x != undefined ?  x.email +" / "+ x.personalInfo.firstName+"  " + x.personalInfo.lastName : "";
+  
+  onEmployeeSelected(employee: Employee) {
+    debugger
+    this.addParticipantForm.patchValue({
+      participantId: employee.id,
+      email: employee.email
+    });
+  }
+
+  filterExistingEmployees(employees: Employee[]): Employee[] {
+    const existingEmails = new Set(this.paticipants.map(p => p.employeeId));
+    return employees.filter(employee => !existingEmails.has(employee.id));
+  }
+  onSubmit() {
+    if (this.addParticipantForm.valid) {
+
+      debugger
+      const participantData = this.addParticipantForm.value;
+      console.log(participantData)
+      let request : AddParticipantRequest= {
+        partialTimeRatio: participantData.partialTimeRatio ,
+        participantId: participantData.participantId ,
+        role:participantData.role,
+        projectId:this.projectId 
+      }
+      
+      this
+      .projectService
+      .addParticipant(request)
+      .subscribe({
+        next : ()=>{
+
+          this.participantAdded.emit(participantData);
+       
+
+        }
+        ,
+        error:(err) =>{
+
+          this.toastr.error("لقد حدث خطاء ما")
+        }
+      });
+
+    }
+  }
+
+  closeModal() {
+    const modal = document.getElementById('addParticipantModal');
+    if (modal) {
+      // Use Bootstrap 5 JavaScript API to hide modal
+      const bsModal = new Modal(modal);
+      bsModal.hide();
+    }
+  }  
+}

src/app/projects/components/participant-item/participant-item.component.html

@@ -7,7 +7,7 @@
       </div>
       <div class="card-text my-2">
         <strong class="card-title my-0">{{participant.employee.personalInfo | fullname}}</strong>
-        <p class="small text-muted mb-0">Tristique Ltd</p>
+        <p class="small text-muted mb-0">صفة المساهمة {{participant.role}}</p>
         <p class="small"><span class="badge badge-light text-muted"> {{participant.employee.workInfo.workType}} {{participant.employee.workInfo.workJob}}</span></p>
       </div>
     </div> <!-- ./card-text -->
@@ -15,7 +15,9 @@
       <div class="row align-items-center justify-content-between">
         <div class="col-auto text-center">
           <small>
-            <span class="dot dot-lg bg-secondary mr-1"></span> {{participant.role}} </small>
+            <button class="btn  mr-4 ml-4 btn-primary">تفاصيل </button>
+            <button class="btn  mr-4 ml-4 btn-danger">إزالة </button>
+          </small>
         </div>
       </div>
     </div> <!-- /.card-footer -->

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

@@ -23,7 +23,7 @@
       </div> <!-- .col -->
 
 
-      <div class="col-md-6 col-lg-4" [routerLink]="['/projects/',project.id,'participants/']">
+      <div class="col-md-6 col-lg-4" [routerLink]="['/projects/',project.id,'participants']">
         <div class="card shadow mb-4">
           <div class="card-body file-list">
             <div class="d-flex align-items-center">

src/app/projects/models/requests/project-requests/addParticipantRequest.ts

-
-
-export interface AddParticipantRequest {
+export class AddParticipantRequest {
     projectId: number;
     participantId: number;
     partialTimeRatio: number;

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

 <section  *ngIf="participants" class="row">
+    <add-participant-modal
+    [projectId]="projectId"
+    [paticipants]="participants"
+    (participantAdded)="onParticipantAdded()"
+    >
+    
+    </add-participant-modal>
+
+    
     <div class="row justify-content-center">
         <div class="col-12">
             <div class="row align-items-center my-4">
@@ -6,7 +15,7 @@
                 <h2 class="h4 mb-0 page-title">  قائمة المشاركين بالمشروع </h2>
                 </div>
             <div class="col-auto">
-            <button type="button"  class="btn btn-primary"><span class="fe fe-file-plus fe-12 mr-2"></span>إضافة مشارك </button>
+            <button type="button"  data-bs-toggle="modal" data-bs-target="#addParticipantModal" class="btn btn-primary"><span class="fe fe-file-plus fe-12 mr-2"></span>إضافة مشارك </button>
         </div>
    </div>
 <hr>
@@ -19,3 +28,4 @@
     </div>
     </div>
 </section>
+

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

@@ -3,6 +3,7 @@ import { EmployeeParticipate } from '../../../employees/models/responses/employe
 import { ProjectService } from '../../services/project.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
+import { Modal } from 'bootstrap';
 
 @Component({
   selector: 'participants-list',
@@ -24,6 +25,12 @@ export class ParticipantsListComponent {
   ngOnInit(): void {
     this.loadParticipations();
 
+  }
+
+  onParticipantAdded(){
+    this.closeModal('addParticipantModal')
+    this.loadParticipations();
+       
   }
    loadParticipations(): void{
 
@@ -41,4 +48,12 @@ export class ParticipantsListComponent {
     })
 
   }
+  closeModal(name :string) {
+    const modal = document.getElementById(name);
+    if (modal) {
+      // Use Bootstrap 5 JavaScript API to hide modal
+      const bsModal = new Modal(modal);
+      bsModal.hide();
+    }
+  }  
 }

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

@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 import { EmployeesService } from '../../../employees/services/employees.service';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { debounceTime, distinctUntilChanged, map, Observable, startWith, switchMap } from 'rxjs';
+import { debounceTime, distinctUntilChanged, filter, map, Observable, startWith, switchMap } from 'rxjs';
 import { Employee } from '../../../employees/models/responses/employee';
 import { Customer } from '../../../customers/models/customer';
 import { CustomerService } from '../../../customers/services/customer.service';

src/app/projects/projects.module.ts

@@ -31,6 +31,8 @@ import { AddAttachmentModalComponent } from './components/modals/add-attachment-
 import { FinancialSpendingComponent } from './pages/financial-spending/financial-spending.component';
 import { FinancialItemComponent } from './components/financial-item/financial-item.component';
 import { ReportControllComponent } from './components/project-controll/report-controll/report-controll.component';
+import { AddParticipantModalComponent } from './components/modals/add-participant-modal/add-participant-modal.component';
+import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 
 @NgModule({
   declarations: [
@@ -52,7 +54,8 @@ import { ReportControllComponent } from './components/project-controll/report-co
     AddAttachmentModalComponent,
     FinancialSpendingComponent,
     FinancialItemComponent,
-    ReportControllComponent
+    ReportControllComponent,
+    AddParticipantModalComponent
   ],
   providers: [
     ProjectService,
@@ -73,7 +76,8 @@ import { ReportControllComponent } from './components/project-controll/report-co
     RouterModule ,
     MatInputModule,
     ReactiveFormsModule ,
-    SharedModule
+    SharedModule,
+    NgbTypeaheadModule
   ]
 })
 export class ProjectsModule { }

src/app/projects/services/project.service.ts

@@ -10,7 +10,7 @@ import { ChangeProjectTeamLeaderRequest } from '../models/requests/project-reque
 import { ChangeProjectManagerRequest } from '../models/requests/project-requests/ChangeProjectManagerRequest';
 import { AddProjectStepRequest } from '../models/requests/project-requests/AddProjectStepRequest';
 import { RemoveParticipantRequest } from '../models/requests/project-requests/RemoveParticipant';
-import { AddParticipantRequest } from '../models/requests/project-requests/AddParticipantRequest';
+import { AddParticipantRequest } from '../models/requests/project-requests/addParticipantRequest';
 import { CancelProjectRequest } from '../models/requests/project-requests/CancelProjectRequest';
 import { RePlanProjectRequest } from '../models/requests/project-requests/RePlanProjectRequest';
 import { CreateProjectRequest } from '../models/requests/project-requests/createProjectRequest';