Commit d719ff0c authored by hasan khaddour's avatar hasan khaddour

add participatino parts

parent 5b062c32
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="col-xl-6 col offset-3"> <div class="col-xl-6 col offset-3">
<div class="card p-4"> <div class="card p-4">
<form class="php-email-form"> <form #form="ngForm" class="php-email-form">
<div class="row text-center"> <div class="row text-center">
<p> <p>
إصافة نوع مشروع إصافة نوع مشروع
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
<div class="col-md-12 text-center"> <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>
</div> </div>
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<h5 class="modal-title text-center">إضافة عنصر جديد </h5> <h5 class="modal-title text-center">إضافة عنصر جديد </h5>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form (ngSubmit)="onSubmit()" #projectForm="ngForm"> <form #form="ngForm" (ngSubmit)="onSubmit()" #projectForm="ngForm">
<div class="row"> <div class="row">
<div class="mb-3 col-3 offset-1"> <div class="mb-3 col-3 offset-1">
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<div class="mb-3 col-3"> <div class="mb-3 col-3">
<label for="worker" class="form-label">الكلفة بالليرة السورية</label> <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>
</div> </div>
...@@ -46,8 +46,8 @@ ...@@ -46,8 +46,8 @@
</div> </div>
<div class="row "> <div class="row ">
<button type="submit" class=" col-3 btn btn-primary">إضافة</button> <button [disabled]="form.invalid" type="submit" class=" m-4 col-3 btn btn-primary">إضافة</button>
<button class="btn btn-seondary col-3" (click)="onClose()" >إغلاق</button> <div class="btn m-4 btn-secondary col-3" (click)="onClose()" >إغلاق</div>
</div> </div>
</form> </form>
......
<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>
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();
}
}
}
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
</div> </div>
<div class="card-text my-2"> <div class="card-text my-2">
<strong class="card-title my-0">{{participant.employee.personalInfo | fullname}}</strong> <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> <p class="small"><span class="badge badge-light text-muted"> {{participant.employee.workInfo.workType}} {{participant.employee.workInfo.workJob}}</span></p>
</div> </div>
</div> <!-- ./card-text --> </div> <!-- ./card-text -->
...@@ -15,7 +15,9 @@ ...@@ -15,7 +15,9 @@
<div class="row align-items-center justify-content-between"> <div class="row align-items-center justify-content-between">
<div class="col-auto text-center"> <div class="col-auto text-center">
<small> <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> </div>
</div> <!-- /.card-footer --> </div> <!-- /.card-footer -->
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</div> <!-- .col --> </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 shadow mb-4">
<div class="card-body file-list"> <div class="card-body file-list">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
......
export class AddParticipantRequest {
export interface AddParticipantRequest {
projectId: number; projectId: number;
participantId: number; participantId: number;
partialTimeRatio: number; partialTimeRatio: number;
......
<section *ngIf="participants" class="row"> <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="row justify-content-center">
<div class="col-12"> <div class="col-12">
<div class="row align-items-center my-4"> <div class="row align-items-center my-4">
...@@ -6,7 +15,7 @@ ...@@ -6,7 +15,7 @@
<h2 class="h4 mb-0 page-title"> قائمة المشاركين بالمشروع </h2> <h2 class="h4 mb-0 page-title"> قائمة المشاركين بالمشروع </h2>
</div> </div>
<div class="col-auto"> <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>
</div> </div>
<hr> <hr>
...@@ -19,3 +28,4 @@ ...@@ -19,3 +28,4 @@
</div> </div>
</div> </div>
</section> </section>
...@@ -3,6 +3,7 @@ import { EmployeeParticipate } from '../../../employees/models/responses/employe ...@@ -3,6 +3,7 @@ import { EmployeeParticipate } from '../../../employees/models/responses/employe
import { ProjectService } from '../../services/project.service'; import { ProjectService } from '../../services/project.service';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { Modal } from 'bootstrap';
@Component({ @Component({
selector: 'participants-list', selector: 'participants-list',
...@@ -24,6 +25,12 @@ export class ParticipantsListComponent { ...@@ -24,6 +25,12 @@ export class ParticipantsListComponent {
ngOnInit(): void { ngOnInit(): void {
this.loadParticipations(); this.loadParticipations();
}
onParticipantAdded(){
this.closeModal('addParticipantModal')
this.loadParticipations();
} }
loadParticipations(): void{ loadParticipations(): void{
...@@ -41,4 +48,12 @@ export class ParticipantsListComponent { ...@@ -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();
}
}
} }
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { EmployeesService } from '../../../employees/services/employees.service'; import { EmployeesService } from '../../../employees/services/employees.service';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; 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 { Employee } from '../../../employees/models/responses/employee';
import { Customer } from '../../../customers/models/customer'; import { Customer } from '../../../customers/models/customer';
import { CustomerService } from '../../../customers/services/customer.service'; import { CustomerService } from '../../../customers/services/customer.service';
......
...@@ -31,6 +31,8 @@ import { AddAttachmentModalComponent } from './components/modals/add-attachment- ...@@ -31,6 +31,8 @@ import { AddAttachmentModalComponent } from './components/modals/add-attachment-
import { FinancialSpendingComponent } from './pages/financial-spending/financial-spending.component'; import { FinancialSpendingComponent } from './pages/financial-spending/financial-spending.component';
import { FinancialItemComponent } from './components/financial-item/financial-item.component'; import { FinancialItemComponent } from './components/financial-item/financial-item.component';
import { ReportControllComponent } from './components/project-controll/report-controll/report-controll.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({ @NgModule({
declarations: [ declarations: [
...@@ -52,7 +54,8 @@ import { ReportControllComponent } from './components/project-controll/report-co ...@@ -52,7 +54,8 @@ import { ReportControllComponent } from './components/project-controll/report-co
AddAttachmentModalComponent, AddAttachmentModalComponent,
FinancialSpendingComponent, FinancialSpendingComponent,
FinancialItemComponent, FinancialItemComponent,
ReportControllComponent ReportControllComponent,
AddParticipantModalComponent
], ],
providers: [ providers: [
ProjectService, ProjectService,
...@@ -73,7 +76,8 @@ import { ReportControllComponent } from './components/project-controll/report-co ...@@ -73,7 +76,8 @@ import { ReportControllComponent } from './components/project-controll/report-co
RouterModule , RouterModule ,
MatInputModule, MatInputModule,
ReactiveFormsModule , ReactiveFormsModule ,
SharedModule SharedModule,
NgbTypeaheadModule
] ]
}) })
export class ProjectsModule { } export class ProjectsModule { }
...@@ -10,7 +10,7 @@ import { ChangeProjectTeamLeaderRequest } from '../models/requests/project-reque ...@@ -10,7 +10,7 @@ import { ChangeProjectTeamLeaderRequest } from '../models/requests/project-reque
import { ChangeProjectManagerRequest } from '../models/requests/project-requests/ChangeProjectManagerRequest'; import { ChangeProjectManagerRequest } from '../models/requests/project-requests/ChangeProjectManagerRequest';
import { AddProjectStepRequest } from '../models/requests/project-requests/AddProjectStepRequest'; import { AddProjectStepRequest } from '../models/requests/project-requests/AddProjectStepRequest';
import { RemoveParticipantRequest } from '../models/requests/project-requests/RemoveParticipant'; 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 { CancelProjectRequest } from '../models/requests/project-requests/CancelProjectRequest';
import { RePlanProjectRequest } from '../models/requests/project-requests/RePlanProjectRequest'; import { RePlanProjectRequest } from '../models/requests/project-requests/RePlanProjectRequest';
import { CreateProjectRequest } from '../models/requests/project-requests/createProjectRequest'; import { CreateProjectRequest } from '../models/requests/project-requests/createProjectRequest';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment