add employee partiipate and project create

src/app/app.component.html

 <loading-spinner hidden></loading-spinner>
-<router-outlet />
+<router-outlet />
\ No newline at end of file

src/app/employees/components/participate-item/participate-item.component.html

-<p>participate-item works!</p>
+<div class="card shadow mb-4">
+    <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">{{employeeParticipate.projectInfo.name}}</strong><span class=" ml-1"></span>
+          <p class="small text-muted mb-1">{{employeeParticipate.projectInfo.description}}</p>
+        </div>
+        <div class="col-auto">
+        </div>
+      </div>
+    </div>
+    <div class="card-body">
+      <div class="row align-items-center">
+        <div class="col">
+          <div class="small mb-2 d-flex">
+            <span class="text-muted flex-fill">نسبة التفرغ {{employeeParticipate.partialTimeRatio}}</span>
+            <span class="text-muted">صفة المساهمة {{employeeParticipate.role}}</span>
+          </div>
+          <div class="progress" style="height: 2px;">
+            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow=[employeeParticipate.partialTimeRatio] aria-valuemin="0" aria-valuemax="60"></div>
+          </div>
+        </div>
+        <div class="col-auto">
+          <button type="button" class="btn m-4 btn-sm btn-primary">استعراض المهام المكلف بها</button>
+          <button type="button" class="btn m-4 btn-sm btn-secondary">تقرير بمشاركتي</button>
+        </div>
+      </div>
+    </div> <!-- / .card-body -->
+  </div>
\ No newline at end of file

src/app/employees/components/participate-item/participate-item.component.ts

-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { EmployeeParticipate } from '../../models/responses/employeeParticipate';
 
 @Component({
   selector: 'participate-item',
@@ -7,4 +8,9 @@ import { Component } from '@angular/core';
 })
 export class ParticipateItemComponent {
 
+  @Input() employeeParticipate :EmployeeParticipate 
+  
+  constructor(){}
+
+
 }

src/app/employees/employees-routing.module.ts

@@ -6,7 +6,7 @@ import { Observable } from 'rxjs';
 import { Result } from '../core/models/result';
 import { Employee } from './models/responses/employee';
 import { EmployeeProfileComponent } from './pages/employee-profile/employee-profile.component';
-import { EmployeeParticipateComponent } from './pages/employee-participate/employee-participate.component';
+import { EmployeeParticipateComponent } from './components/employee-participate/employee-participate.component';
 import { EmployeeParticipatesComponent } from './pages/employee-participates/employee-participates.component';
 
 const routes: Routes = [

src/app/employees/employees.module.ts

@@ -4,7 +4,7 @@ import { CommonModule } from '@angular/common';
 import { EmployeesRoutingModule } from './employees-routing.module';
 import { EmployeeProfileComponent } from './pages/employee-profile/employee-profile.component';
 import { EmployeeParticipatesComponent } from './pages/employee-participates/employee-participates.component';
-import { EmployeeParticipateComponent } from './pages/employee-participate/employee-participate.component';
+import { EmployeeParticipateComponent } from './components/employee-participate/employee-participate.component';
 import { ParticipateItemComponent } from './components/participate-item/participate-item.component';
 import { SharedModule } from '../shared/shared.module';
 

src/app/employees/models/responses/employeeParticipate.ts

+import { ProjectInfo } from "../../../projects/models/valueObjects/ProjectInfo"
 import { Employee } from "./employee"
 
 export class EmployeeParticipate {
 
     employeeId :number 
     projectId : number
+    projectInfo: ProjectInfo
     employee :Employee
     partialTimeRatio : number 
     role: string   

src/app/employees/pages/employee-participates/employee-participates.component.html

 <section  *ngIf="employeeParticipates" class="row">
 
-    <employee-participate class="col-8 offset-2" *ngFor="let participate of employeeParticipates" [employeeParticipate]="participate"></employee-participate>
+    <participate-item class="col-8 offset-2" *ngFor="let participate of employeeParticipates" [employeeParticipate]="participate"></participate-item>
 
     <div *ngIf="employeeParticipates.length==0">
         للأسف أنت لم تشارك حتى الآن بأي مشروع

src/app/employees/pages/employee-profile/employee-profile.component.html

-<div class="card profile shadow">
+<div  *ngIf="employee" class="card profile shadow">
   <div class="card-body my-4">
     <div class="row align-items-center">
       <div class="col-md-3 text-center mb-5">

src/app/projects/components/step-table/step-table.component.html

+<table class="table table-borderless table-striped">
+    <thead>
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">اسم المرحلة</th>
+        <th scope="col" class="text-left">الوصف</th>
+        <th scope="col" class="text-left">نسبة الانجاز</th>
+        <th scope="col" class="text-left">النسبة التثقيلية</th>
+        <th scope="col" class="text-left">تاريع البدء</th>
+        <th scope="col" class="text-left">مدة التنفيذ</th>
+        
+      </tr>
+    </thead>
+    <tbody>
+      <tr  *ngFor="let step of steps " >
+        <th scope="row"></th>
+        <td> {{step.stepInfo.stepName}}
+        </td>
+        <td class="text-left">{{step.stepInfo.description}}</td>
+        <td class="text-left">{{step.currentCompletionRatio}}</td>
+        <td class="text-left">{{step.weight}}</td>
+        
+        <td class="text-left">{{step.stepInfo.startDate | date}}</td>
+        <td class="text-left">{{step.stepInfo.duration}}</td>
+      </tr>
+    </tbody>
+  </table>
\ No newline at end of file

src/app/projects/components/step-table/step-table.component.ts

+import { Component, Input } from '@angular/core';
+import { Step } from '../../models/responses/Step';
+
+@Component({
+  selector: 'step-table',
+  templateUrl: './step-table.component.html',
+  styleUrl: './step-table.component.css'
+})
+export class StepTableComponent {
+
+  @Input() steps : Step[]
+}

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

@@ -48,10 +48,6 @@
           <mat-label  for="description" class="form-label">وصف النشاط</mat-label>
           <textarea matInput formControlName="description" placeholder="تعريف النشاط " class="form-control"></textarea>
         </mat-form-field>
-    
-    </div>
-          
-      <div class="row mb-4" formGroupName="projectInfo">
         <mat-form-field class="col-4">
           <mat-label for="code" class="form-label">رمز المشروع</mat-label>
           <input matInput formControlName="code" class="form-control" id="code">
@@ -72,7 +68,11 @@
           <mat-datepicker #start></mat-datepicker>
         </mat-form-field>
 
-      </div>
+    </div>
+          
+      <!-- <div class="row mb-4" formGroupName="projectInfo">
+      
+      </div> -->
     
       <div class="row mb-4" formGroupName="financialFund">
       

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

@@ -9,6 +9,8 @@ import { Customer } from '../../../customers/models/customer';
 import { CustomerService } from '../../../customers/services/customer.service';
 import { ProjectService } from '../../services/project.service';
 import { CreateProjectRequest } from '../../models/requests/project-requests/createProjectRequest';
+import { ToastrComponentlessModule, ToastrService } from 'ngx-toastr';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'project-create',
@@ -30,44 +32,15 @@ export class ProjectCreateComponent {
     private fb: FormBuilder,
     private employeeService: EmployeesService,
     private customersService : CustomerService,
-    private projectService :ProjectService
+    private projectService :ProjectService,
+    private toastr : ToastrService,
+    private router :Router
   ) {}
 
   ngOnInit(): void {
     this.request= new CreateProjectRequest();
-    
-    this.projectForm = this.fb.group({
-      projectManager: [''],
-      teamLeader: [''],
-      customer: [''],
+    this._buildFrom();
 
-      projectInfo: this.fb.group({
-        name: [''],
-        description: [''],
-        code: ['', Validators.required],
-        startDate: ['', Validators.required],
-        expectedEndDate: ['', Validators.required],
-      }),
-      financialFund: this.fb.group({
-        source: ['', Validators.required],
-        financialStatus: ['', Validators.required],
-      }),
-      projectAggreement: this.fb.group({
-        aggreementDate: ['', Validators.required],
-        aggreementNumber: ['', Validators.required],
-      }),
-      proposalInfo: this.fb.group({
-        proposingBookNumber :['', Validators.required],
-        proposingBookDate :['', Validators.required]
-      }),
-      projectClassification: this.fb.group({
-        projectStatus: ['', Validators.required],
-        projectNature: ['', Validators.required],
-        projectType: ['', Validators.required],
-      }),
-      executerId: ['', Validators.required],
-    });
-    console.log(this.request)
     this.projectForm.valueChanges.subscribe(values => {
       this.request = {
         ...this.request, // Preserve other properties
@@ -118,13 +91,64 @@ export class ProjectCreateComponent {
   onSubmit(request : CreateProjectRequest){
 
     console.log(request)
-    
+    debugger
     console.log(this.projectForm.errors)
-    if(this.projectForm.valid){
-      console.log(request);
-      this.projectService.createProject(request);
+    console.log(this.projectForm.valid)
+  
+    if(this.projectForm.valid){ 
+      this.projectService.createProject(request).subscribe({
+
+        next: (data)=>{
+          this.toastr.success("تمت إضافة الجهة بنجاح")
+          this.router.navigate(['/projects/detail/',data])
+
+        }
+        ,
+
+        error:(err)=>{
+          this.toastr.error("لقد حدث خطاء ما")
+        }
+      });
+ 
     }
+
   
-    
+      
+  }
+
+  _buildFrom(){
+    this.projectForm = this.fb.group({
+      projectManager: [''],
+      teamLeader: [''],
+      customer: [''],
+
+      projectInfo: this.fb.group({
+        name: ['',Validators.required],
+        description: ['',Validators.required],
+        code: ['', Validators.required],
+        startDate: ['', Validators.required],
+        expectedEndDate: ['', Validators.required],
+      }),
+      financialFund: this.fb.group({
+        source: ['', Validators.required],
+        financialStatus: ['', Validators.required],
+      }),
+      projectAggreement: this.fb.group({
+        aggreementDate: ['', Validators.required],
+        aggreementNumber: ['', Validators.required],
+      }),
+      proposalInfo: this.fb.group({
+        proposingBookNumber :['', Validators.required],
+        proposingBookDate :['', Validators.required]
+      }),
+      projectClassification: this.fb.group({
+        projectStatus: ['', Validators.required],
+        projectNature: ['', Validators.required],
+        projectType: ['', Validators.required],
+      }),
+      executerId: ['', Validators.required],
+    });
+   
+
   }
 }

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

@@ -39,41 +39,17 @@
                 <p class="mb-4">
                   <strong>معلومات حالة المشروع </strong>
                   <br /> المرحلة التطويرير : <small>{{project.currentState}} </small>
+                  <br />نوع المشروع  : <small>{{project.projectClassification.projectType}} </small>
+                  <br /> طبيعة المشروع : <small>{{project.projectClassification.projectNature}} </small>
                 
                 </p>
               </div>
             </div> <!-- /.row -->
             <hr>
-            <p>مراحل المشروع</p>
-            <table class="table table-borderless table-striped">
-              <thead>
-                <tr>
-                  <th scope="col">#</th>
-                  <th scope="col">اسم المرحلة</th>
-                  <th scope="col" class="text-left">الوصف</th>
-                  <th scope="col" class="text-left">نسبة الانجاز</th>
-                  <th scope="col" class="text-left">النسبة التثقيلية</th>
-                  <th scope="col" class="text-left">تاريع البدء</th>
-                  <th scope="col" class="text-left">مدة التنفيذ</th>
-                  
-                </tr>
-              </thead>
-              <tbody>
-                <tr  *ngFor="let step of  project.steps " >
-                  <th scope="row"></th>
-                  <td> {{step.stepInfo.stepName}}
-                  </td>
-                  <td class="text-left">{{step.stepInfo.description}}</td>
-                  <td class="text-left">{{step.currentCompletionRatio}}</td>
-                  <td class="text-left">{{step.weight}}</td>
-                  
-                  <td class="text-left">{{step.stepInfo.startDate | date}}</td>
-                  <td class="text-left">{{step.stepInfo.duration}}</td>
-                </tr>
-              </tbody>
-            </table>
+            <p><strong>مراحل المشروع</strong></p>
+            <step-table [steps]="project.steps"></step-table>
             <hr>
-            <p>المشاركين في المشروع</p>
+            <p><strong>المشاركين في المشروع</strong></p>
             <table class="table table-borderless table-striped">
               <thead>
                 <tr>
@@ -101,7 +77,7 @@
               </tbody>
             </table>
 
-            <p>خطة الانفاق</p>
+            <p><strong>خطة الانفاق</strong></p>
             <table class="table table-borderless table-striped">
               <thead>
                 <tr>

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

@@ -29,6 +29,7 @@ export class ProjectListComponent  implements OnInit{
 
   loadProjects():void{
 
+    this.loadingService.show()
     this.projectService.getByFilter()
       .subscribe(
         {
@@ -36,10 +37,11 @@ export class ProjectListComponent  implements OnInit{
             
               this.projects = res;
               this.toastr.success("تم تحميل المشاريع بنجاح");
-            
+                this.loadingService.hide()
           },
           error: (err)=>{
             this.toastr.error("لقد حدث خظاء ما");
+            this.loadingService.hide()
           }
         }
       );

src/app/projects/projects.module.ts

@@ -20,6 +20,7 @@ import {MatSelectModule} from '@angular/material/select';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {provideNativeDateAdapter} from '@angular/material/core';
 import { ProjectAttachmentsComponent } from './pages/project-attachments/project-attachments.component';
+import { StepTableComponent } from './components/step-table/step-table.component';
 
 @NgModule({
   declarations: [
@@ -30,7 +31,8 @@ import { ProjectAttachmentsComponent } from './pages/project-attachments/project
     StepRowItemComponent,
     ProjectHeaderComponent,
     ProjectCreateComponent,
-    ProjectAttachmentsComponent
+    ProjectAttachmentsComponent,
+    StepTableComponent
   ],
   providers: [
     ProjectService,

src/app/shared/componenets/loading-spinner/loading-spinner.component.css

 .spinner-wrapper {
-    display: flex;
+    display:flex;
+    
     justify-content: center;
     align-items: center;
     height: 100%;

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

@@ -5,7 +5,7 @@
       <li class="nav-item">
         <a class="nav-link " href="index.html">
           <i class="fe fe-grid"></i>
-          <span>الصفحة الئيسية</span>
+          <span>الصفحة الرئيسية</span>
         </a>
       </li><!-- End Dashboard Nav -->
       <li class="nav-heading">المتابعة</li>
@@ -92,7 +92,7 @@
             </a>
           </li>
           <li class="nav-heading">العمل</li>
-      <li [routerLink]="['/employees/paticipation']" class="nav-item">
+      <li  [routerLink]="['/employees/participates',id]" class="nav-item">
         <a class="nav-link collapsed" >
           <i class="bi bi-layout-text-window-reverse"></i><span>استعراض مساهماتي</span><i class="bi bi-chevron-down ms-auto"></i>
         </a>

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

-import { Component, Input, input } from '@angular/core';
+import { Component, Input, input, OnInit } from '@angular/core';
 import { NavItem } from '../../componenets/nav-item/nav-item.component';
+import { UserService } from '../../../core/services/authentication/user.service';
 
 @Component({
   selector: 'app-sidebar',
@@ -7,14 +8,14 @@ import { NavItem } from '../../componenets/nav-item/nav-item.component';
   styleUrl: './sidebar.component.css'
 })
 
-export class SidebarComponent {
-  items : NavItem[ ]=[
-    {
-      name: "الصفحة الرئيسية",
-      haschild:false,
-      child:[]
-    }
-
-  ]
+export class SidebarComponent implements OnInit {
+  id : number 
+  
+  constructor(private userService : UserService){}
   @Input() isToggled: Boolean;  
+
+  ngOnInit(): void {
+    this.id= this.userService.getEmployeeId();
+  }
+
 }