Skip to content

PSManagementUI
PSManagementUI
Commit d4e57933 authored by hasan khaddour's avatar hasan khaddour
Browse files
Options

Add Participation crud

parent d719ff0c
Hide whitespace changes
Inline Side-by-side
Showing with 293 additions and 36 deletions
src/app/projects/components/modals/add-participant-modal/add-participant-modal.component.html
View file @ d4e57933
......@@ -24,7 +24,7 @@
</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" />
<input type="number" id="partialTimeRatio" formControlName="partialTimeRatio" class="form-control" required />
</div>
<div class="mb-3">
<label for="role" class="form-label">صفة المساهمة</label>
......
src/app/projects/components/modals/add-participant-modal/add-participant-modal.component.ts
View file @ d4e57933
......@@ -60,7 +60,7 @@ export class AddParticipantModalComponent {
)
);
formatter = (x: Employee) => x != undefined ? x.email +" / "+ x.personalInfo.firstName+" " + x.personalInfo.lastName : "";
formatter = (x: Employee) => x != undefined ? x.email +" / "+ x.personalInfo?.firstName+" " + x.personalInfo?.lastName : "";
onEmployeeSelected(employee: Employee) {
debugger
......
src/app/projects/components/modals/edit-participant-modal/edit-participant-modal.component.html 0 → 100644
View file @ d4e57933
<!-- 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/modals/edit-participant-modal/edit-participant-modal.component.ts 0 → 100644
View file @ d4e57933
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { EmployeeParticipate } from '../../../../employees/models/responses/employeeParticipate';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ProjectService } from '../../../services/project.service';
import { ChangeEmployeeParticipationRequest } from '../../../models/requests/project-requests/ChangeEmployeeParticipationRequest';
@Component({
selector: 'edit-participant-modal',
templateUrl: './edit-participant-modal.component.html',
styleUrl: './edit-participant-modal.component.css'
})
export class EditParticipantModalComponent {
@Input() participant: EmployeeParticipate;
@Output() participantEdited = new EventEmitter<void>();
editParticipantForm: FormGroup;
constructor(private fb: FormBuilder, private projectService: ProjectService) {
this.editParticipantForm = this.fb.group({
role: ['', Validators.required],
partialTimeRatio: [0, [Validators.required, Validators.min(0)]],
});
}
ngOnChanges() {
if (this.participant) {
this.editParticipantForm.patchValue(this.participant);
}
}
onSubmit() {
if (this.editParticipantForm.valid) {
let request : ChangeEmployeeParticipationRequest ={
role: this.editParticipantForm.value.role ,
partialTimeRation: this.editParticipantForm.value.partialTimeRatio,
participantId: this.participant.employee.id ,
projectId:this.participant.projectId
}
debugger;
this
.projectService
.changeParticipation(request)
.subscribe(() => {
this.participantEdited.emit();
this.closeModal();
});
}
}
closeModal() {
const modal = document.getElementById('editParticipantModal');
if (modal) {
(modal as any).modal('hide');
}
}
}
src/app/projects/components/modals/remove-participant-modal/remove-participant-modal.component.html 0 → 100644
View file @ d4e57933
<!-- remove-participant-modal.component.html -->
<div class="modal fade" id="removeParticipantModal" tabindex="-1" aria-labelledby="removeParticipantModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="removeParticipantModalLabel">إزالة مشارك من المشروع</h5>
<button type="button" class="ml-4 mr-4 btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>هل أنت متأكد من أنك تريد إزالة السيد {{participant.employee.personalInfo | fullname}} من قائمة المشاركين في المشروع</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
<button type="button" class="btn btn-danger" (click)="onConfirmRemove()">إزالة</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/projects/components/modals/remove-participant-modal/remove-participant-modal.component.ts 0 → 100644
View file @ d4e57933
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { EmployeeParticipate } from '../../../../employees/models/responses/employeeParticipate';
import { ProjectService } from '../../../services/project.service';
import { RemoveParticipantRequest } from '../../../models/requests/project-requests/RemoveParticipant';
@Component({
selector: 'remove-participant-modal',
templateUrl: './remove-participant-modal.component.html',
styleUrl: './remove-participant-modal.component.css'
})
export class RemoveParticipantModalComponent {
@Input() participant: EmployeeParticipate;
@Output() participantRemoved = new EventEmitter<void>();
constructor(private projectService: ProjectService) {}
onConfirmRemove() {
let request :RemoveParticipantRequest= {
ParticipantId : this.participant.employeeId,
projectId:this.participant.projectId
}
this.projectService
.removeParticipant(request)
.subscribe(() => {
this.participantRemoved.emit();
});
}
}
src/app/projects/components/participant-item/participant-item.component.html
View file @ d4e57933
......@@ -13,12 +13,18 @@
</div> <!-- ./card-text -->
<div class="card-footer">
<div class="row align-items-center justify-content-between">
<div class="col-auto text-center">
<div class="col text-center">
<small>
<button class="btn mr-4 ml-4 btn-primary">تفاصيل </button>
<button class="btn mr-4 ml-4 btn-danger">إزالة </button>
<button (click)="onSelected()" class="btn btn-primary">تفاصيل </button>
</small>
</div>
<div class="col text-center">
<small>
<button [routerLink]="['/projects',participant.projectId,'/history/participationChange',participant.employeeId]" class="btn btn-secondary">التبدلات</button>
</small>
</div>
</div>
</div> <!-- /.card-footer -->
</div>
\ No newline at end of file
src/app/projects/components/participant-item/participant-item.component.ts
View file @ d4e57933
import { Component, Input } from '@angular/core';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { EmployeeParticipate } from '../../../employees/models/responses/employeeParticipate';
@Component({
......@@ -7,6 +7,16 @@ import { EmployeeParticipate } from '../../../employees/models/responses/employe
styleUrl: './participant-item.component.css'
})
export class ParticipantItemComponent {
@Input() participant : EmployeeParticipate
@Output() selected = new EventEmitter<EmployeeParticipate>()
@Output() edit = new EventEmitter<EmployeeParticipate>()
onSelected() {
this.selected.emit(this.participant)
}
onEdit(){
this.edit.emit(this.participant);
}
}
src/app/projects/components/project-item/project-item.component.html
View file @ d4e57933
......@@ -10,7 +10,7 @@
<strong class="card-title my-0">{{project.projectInfo.name}} </strong>
<p class="small">{{project.projectInfo.description}}</p>
<p class="small">ينفذ من قبل {{project.executer.name}}</p>
<p class="small">الطور {{project.currentState }}</p>
<p class="small">الطور {{project.currentState | stateTranslate }}</p>
<p class="small text-muted mb-0"> <span class="badge badge-light text-muted"> رمز المشروع {{project.projectInfo.code}} </span>, <span class="badge badge-light text-muted"> تاريخ البدء {{project.projectInfo.startDate | date}} </span></p>
......
src/app/projects/pages/participants-list/participants-list.component.html
View file @ d4e57933
<section *ngIf="participants" class="row">
<add-participant-modal
<section *ngIf="participants" class="row">
<add-participant-modal
[projectId]="projectId"
[paticipants]="participants"
(participantAdded)="onParticipantAdded()"
>
</add-participant-modal>
>
</add-participant-modal>
<div class="row justify-content-center">
<div class="col-12">
<div class="row align-items-center my-4">
<div class="col">
<h2 class="h4 mb-0 page-title"> قائمة المشاركين بالمشروع </h2>
</div>
<div class="col-auto">
<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 class="row justify-content-center" *ngIf="!isDetailMode">
<div class="col-12">
<div class="row align-items-center my-4">
<div class="col">
<h2 class="h4 mb-0 page-title">قائمة المشاركين بالمشروع</h2>
</div>
</div>
<hr>
<div class="row">
<participant-item class="col-3" *ngFor="let participant of participants" [participant]="participant"></participant-item>
</div>
<div *ngIf="participants.length==0">
<div class="col-auto">
<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 />
<div class="row">
<participant-item
class="col-3"
(selected)="onDetailMode(participant)"
*ngFor="let participant of participants"
[participant]="participant"
></participant-item>
</div>
<div *ngIf="participants.length == 0">
للأسف هذا المشروع لايحوي على أية مشاركين
</div>
</div>
</div>
</div>
</section>
</div>
<edit-participant-modal
[participant]="selectedParticipant"
(participantEdited)="onParticipantUpdated()"
></edit-participant-modal>
<remove-participant-modal
[participant]="selectedParticipant"
(participantRemoved)="onParticipantRemoved()"
>
</remove-participant-modal>
<!-- <app-remove-participant-modal [participant]="selectedParticipant" (participantRemoved)="onParticipantRemoved()"></app-remove-participant-modal> -->
<div class="row" *ngIf="isDetailMode">
<div class="card shadow mb-4 col-8 offset-2">
<div class="card-header py-3">
<div class="row align-items-center">
<div class="col-auto">
<a href="profile-posts.html" class="avatar avatar-md">
<img src="./assets/images/users/4.jpg" alt="..." class="avatar-img rounded-circle">
</a>
</div>
<div class="col ml-n2">
<strong class="mb-1">المشارك {{selectedParticipant.employee.personalInfo | fullname}}</strong><span class=" ml-1"></span>
<p class="small text-muted mb-1">صفة المساهمة {{selectedParticipant.role}}</p>
</div>
<div class="col-auto">
</div>
</div>
</div>
<div class="card-body ">
<div class="row align-items-center">
<div class="col-8 ">
<div class="small mb-2 d-flex">
<span class="text-muted flex-fill">الوظيفة / الهيئة {{selectedParticipant.employee.workInfo.workJob}} / {{selectedParticipant.employee.workInfo.workType}}</span>
<span class="text-muted">نسبة التفرغ {{selectedParticipant.partialTimeRatio}}</span>
</div>
</div>
<div class="col-8 ">
<div class="small mb-2 d-flex">
</div>
<div class="col-auto">
<button type="button" class="btn m-2 btn-sm btn-primary">استعراض تاريخ تبدلاته </button>
<button type="button" data-bs-toggle="modal" data-bs-target="#editParticipantModal" class="btn m-2 btn-sm btn-secondary">تعديل معلومات المشاركة</button>
<button type="button" data-bs-toggle="modal" data-bs-target="#removeParticipantModal" class="btn m-2 btn-sm btn-danger">إزالة</button>
</div>
</div>
</div>
</div> <!-- / .card-body -->
</div>
</div>
</section>
src/app/projects/pages/participants-list/participants-list.component.ts
View file @ d4e57933
......@@ -12,6 +12,10 @@ import { Modal } from 'bootstrap';
})
export class ParticipantsListComponent {
participants : EmployeeParticipate[]
selectedParticipant: EmployeeParticipate;
isDetailMode : boolean =false
projectId = Number(this.route.snapshot.paramMap.get('id'));
constructor(
private projectService :ProjectService,
......@@ -25,6 +29,7 @@ export class ParticipantsListComponent {
ngOnInit(): void {
this.loadParticipations();
this.isDetailMode=false;
}
onParticipantAdded(){
......@@ -32,12 +37,30 @@ export class ParticipantsListComponent {
this.loadParticipations();
}
setSelectedParticipant(participant: EmployeeParticipate): void {
this.selectedParticipant = participant;
}
onParticipantUpdated(): void {
this.closeModal('editParticipantModal')
this.loadParticipations();
}
onParticipantRemoved(): void {
this.isDetailMode=false ;
this.loadParticipations();
}
loadParticipations(): void{
this.projectService.getParticipants(this.projectId).subscribe({
next: (data)=> {
if(!this.participants){
this.toastr.success("تم تحميل المراحل بنجاح");
}
this.participants= data
this.toastr.success("تم تحميل المراحل بنجاح");
}
,
......@@ -48,12 +71,18 @@ export class ParticipantsListComponent {
})
}
onDetailMode(participant: EmployeeParticipate) {
this.selectedParticipant=participant ;
this.isDetailMode=true;
}
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();
(modal as any).modal('hide');
}
}
}
src/app/projects/projects.module.ts
View file @ d4e57933
......@@ -33,6 +33,8 @@ import { FinancialItemComponent } from './components/financial-item/financial-it
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';
import { EditParticipantModalComponent } from './components/modals/edit-participant-modal/edit-participant-modal.component';
import { RemoveParticipantModalComponent } from './components/modals/remove-participant-modal/remove-participant-modal.component';
@NgModule({
declarations: [
......@@ -55,7 +57,9 @@ import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
FinancialSpendingComponent,
FinancialItemComponent,
ReportControllComponent,
AddParticipantModalComponent
AddParticipantModalComponent,
EditParticipantModalComponent,
RemoveParticipantModalComponent
],
providers: [
ProjectService,
......
src/app/projects/services/project.service.ts
View file @ d4e57933
......@@ -18,6 +18,7 @@ import { AddAttachmentRequest } from '../models/requests/project-requests/AddAtt
import { Attachment } from '../models/responses/attachment';
import { CompleteProjectRequest } from '../models/requests/project-requests/completeProjectRequest';
import { ChangeEmployeeParticipationRequest } from '../models/requests/project-requests/ChangeEmployeeParticipationRequest';
import { ParticipationChange } from '../models/responses/participationChange';
@Injectable({
providedIn: 'root'
......@@ -39,6 +40,12 @@ export class ProjectService {
return this.http.get<Project[]>(this.config.getServerUrl()+ "/Projects/ByFilter");
}
public getParticipationChangeHistory(projectId :number ):Observable<ParticipationChange[]>{
return this
.http
.get<ParticipationChange[]>(this.config.getServerUrl()+'/projets/ParticipationChangeHistory/'+projectId)
}
public getAll(pageSize : number | null , pageNumber :number |null):Observable<Project[]>{
......
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

HIAST - GitLab