add project filter

src/app/projects/components/filter-modal/filter-modal.component.html

+<div class="modal-header">
+    <button type="button" class="btn-close" (click)="onClose()" ></button>
+    <h5 class="modal-title text-center">فلترة المشاريع </h5>
+  </div>
+  <div class="modal-body">
+    <form #form="ngForm" (ngSubmit)="onSubmit()" #projectForm="ngForm">
+      <div class="row">
+  
+        <div class="mb-3 col-12 ">
+          <label for="stepName" class="form-label">اسم رئيس فريق العمل</label>
+          <input type="text" name="tem" id="tem" class="form-control" [(ngModel)]="request.teamLeaderName" >
+        </div>
+        
+      </div>
+      <div class="row">
+        <div class="mb-3 ">
+          <label for="fgdg" class="form-label">اسم الجهة الطارحة</label>
+          <input type="fgdg" id="fgdg" class="form-control" [(ngModel)]="request.proposerName" name="start" >
+        </div>
+  
+        </div>
+        <div class="row">
+
+      <div class="mb-3 col-12">
+        <label for="worrker" class="form-label">اسم المشروع</label>
+        <input  id="worrker" class="form-control" [(ngModel)]="request.projectName" name="worker" >
+      </div>
+      
+      </div>
+
+      <div class="row">
+        <div class="mb-3 col-12">
+            <label for="duration" class="form-label">القسم المنفذ</label>
+            <select  id="duration" class="form-control select " [(ngModel)]="request.departmentName" name="duration" >
+            <option *ngFor="let dept of departments" [value]="dept.name">{{dept.name}}</option>  
+            
+          </select>
+          </div>
+  
+        
+          </div>
+          <div class="row ">
+        <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>
+  </div>
+  
\ No newline at end of file

src/app/projects/components/filter-modal/filter-modal.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Department } from '../../models/responses/department';
+import { EmployeesService } from '../../../employees/services/employees.service';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { GetProjecByFilterRequest } from '../../models/requests/project-requests/getProjectAttachmentsRequest';
+
+@Component({
+  selector: 'filter-modal',
+  templateUrl: './filter-modal.component.html',
+  styleUrl: './filter-modal.component.css'
+})
+export class FilterModalComponent implements OnInit{
+
+  departments : Department[]
+
+  request : GetProjecByFilterRequest
+  constructor(
+    private employeeService :EmployeesService,
+    private activeModal :NgbActiveModal
+  ) {
+    
+  }
+
+  ngOnInit(): void {
+    
+    this.request= {
+      projectName:'',
+      proposerName:'',
+      teamLeaderName:'',
+      departmentName:''
+    }
+      this
+      .employeeService
+      .getDepartments()
+      .subscribe({
+
+        next:(data)=>{
+          this.departments=data
+        }
+      });
+  }
+
+  onSubmit(){
+
+    this
+    .activeModal
+    .close(this.request);
+  }
+
+  onClose(){
+    this.activeModal.close();
+  }
+}

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

@@ -3,3 +3,11 @@ export interface GetProjectAttachmentsRequest {
     pageNumber: number | null;
     pageSize: number | null;
 }
+export class  GetProjecByFilterRequest {
+    projectName :string
+    teamLeaderName : string 
+    departmentName :string
+    proposerName : string
+         
+   
+}

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

@@ -6,17 +6,19 @@
             <h2 class="h3 mb-0 page-title">  قائمة  المشاريع </h2>
             </div>
         <div class="col-auto">
-            <button type="button"  (click)="this.router.navigate(['projects/create'])" class="btn btn-primary"><span class="fe fe-file-plus fe-12 mr-2"></span>طرح مشروع</button>
+    
+            <button  (click)="openFilter()" class="m-4 btn btn-primary">فلترة</button>
+            <button type="button"  (click)="this.router.navigate(['projects/create'])" class="m-4 btn btn-primary"><span class="fe fe-file-plus fe-12 mr-2"></span>طرح مشروع</button>
         </div>
 
     </div>
     <hr>
     <div *ngIf="projects">
     <div  class="row" *ngIf="projects.length > 0">
-        <project-item class="col-4"     *ngFor="let project of projects" [project]="project"></project-item>
+        <project-item class="col  col-4 "     *ngFor="let project of projects" [project]="project"></project-item>
     </div>
-    <div  class="row" *ngIf="projects.length == 0">
-            لا يوجد أي مشروع 
+    <div  class="row text-center" *ngIf="projects.length == 0">
+           <strong> لا يوجد أي مشروع </strong>
     </div>
     </div>
 </div>

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

@@ -6,6 +6,9 @@ import { Project } from '../../models/responses/project';
 import { ProjectService } from '../../services/project.service';
 import { GetProjectsByProjectManagerRequest, GetProjectsByTeamLeaderRequest } from '../../models/requests/project-requests/GetProjectsByProjectManagerRequest';
 import { UserService } from '../../../core/services/authentication/user.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { FilterModalComponent } from '../../components/filter-modal/filter-modal.component';
+import { GetProjecByFilterRequest } from '../../models/requests/project-requests/getProjectAttachmentsRequest';
 
 @Component({
   selector: 'project-list',
@@ -15,7 +18,7 @@ import { UserService } from '../../../core/services/authentication/user.service'
 export class ProjectListComponent  implements OnInit{
 
   projects : Project[]
-
+  request :GetProjecByFilterRequest
 
   constructor(
     private projectService : ProjectService,
@@ -23,6 +26,7 @@ export class ProjectListComponent  implements OnInit{
     public router: Router,
     private route :ActivatedRoute,
     private userService : UserService,
+    private modalService :NgbModal,
     private loadingService: LoadingService
   ) {
 
@@ -36,8 +40,15 @@ export class ProjectListComponent  implements OnInit{
   loadProjects():void{
 
     this.loadingService.show()
-    this.handelAll()
+    if(this.request){
+
+      this.handleByFilter();
+    }else {
+
+
+      this.handelAll()
    
+    }
   }
 
   handelAll() {
@@ -58,7 +69,51 @@ export class ProjectListComponent  implements OnInit{
     );
    }
    
-  
+
+
+   handleByFilter() {
+
+    this
+    .projectService
+    .getByRequestFilter(this.request)
+    .subscribe(
+      {
+        next: (res)=>{
+          
+            this.projects = res;
+            this.loadingService.hide()
+        },
+        error: (err)=>{
+          this.toastr.error("لقد حدث خظاء ما");
+          this.loadingService.hide()
+        }
+      }
+    );
+   }
+   
+
+
+   openFilter() {
+
+        
+    const modalRef = this.modalService.open(FilterModalComponent);
+ 
+    modalRef.result.then(
+      (data :GetProjecByFilterRequest) => {
+ 
+      if (data ) {
+ 
+        this.request=data;
+        this.loadProjects();
+        
+      }
+      
+    },
+     (reason) => {
+     
+    
+   });
+   }    
 
    
 }
\ No newline at end of file

src/app/projects/projects.module.ts

@@ -46,6 +46,7 @@ import { ChangeLeaderModalComponent } from './components/projectModals/change-le
 import { EditStepModalComponent } from './components/step-modals/edit-step-modal/edit-step-modal.component';
 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';
 
 @NgModule({
   declarations: [
@@ -82,7 +83,8 @@ import { ProjectBycreterionComponent } from './pages/project-bycreterion/project
     ChangeLeaderModalComponent,
     EditStepModalComponent,
     EditWeightModalComponent,
-    ProjectBycreterionComponent
+    ProjectBycreterionComponent,
+    FilterModalComponent
   ],
   providers: [
     ProjectService,

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

@@ -22,6 +22,7 @@ import { ChangeEmployeeParticipationRequest } from '../models/requests/project-r
 import { ParticipationChange } from '../models/responses/participationChange';
 import { ProjectCompletion } from '../models/responses/ProjectCompletion';
 import { EmployeeContribution } from '../models/responses/employeeContribution';
+import { GetProjecByFilterRequest } from '../models/requests/project-requests/getProjectAttachmentsRequest';
 //#endregion Imports
 @Injectable({
   providedIn: 'root'
@@ -43,6 +44,13 @@ export class ProjectService {
     return this.http.get<Project[]>(this.config.getServerUrl()+ "/Projects/ByFilter");
   
   }
+
+  public getByRequestFilter(request : GetProjecByFilterRequest):Observable<Project[]>{
+
+    return this.http.get<Project[]>(this.config.getServerUrl()+ "/Projects/ByFilter",{params:{...request}});
+  
+  }
+  
   public getParticipationChangeHistory(projectId :number ):Observable<ParticipationChange[]>{
 
     return this

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

@@ -63,7 +63,7 @@
     <li class="nav-item" *ngIf="hasRole(alroles.SCIENTIFIC_DEPUTY)">
       <a
         [routerLink]="['/projects']"
-        [queryParams]="{ listType: 'all' }"
+      
         class="nav-link collapsed"
       >
         <i class="fe fe-clipboard"></i><span>استعراض المشاريع</span>