complete cusotmer moule

src/app/customers/components/add-contactinfo-modal/add-contactinfo-modal.component.html

+<div class="modal-header">
+  <h5 class="modal-title" id="moveToplanModalLabel">إضافة معلومة اتصال</h5>
+  <button
+    type="button"
+    class="ml-4 mr-4 btn-close"
+    (click)="onClose()"
+  ></button>
+</div>
+<div class="modal-body">
+  <form (ngSubmit)="onSubmit()" #projectForm="ngForm">
+    <div class="row">
+      <div class="mb-3 col-8 offset-1">
+        <label for="conatatType" class="form-label">طريقة الاتصال</label>
+        <input
+        
+          type="text"
+          name="conatatType"
+          id="conatatType"
+          class="form-control"
+          [(ngModel)]="request.contactType"
+          required
+        />
+      </div>
+
+      <div class="mb-3 col-8 offset-1">
+        <label for="conatatValue" class="form-label">رقم الاتصال </label>
+        <input
+          id="conatatValue"
+          class="form-control"
+          [(ngModel)]="request.contactValue"
+          name="conatatValue"
+          required
+        />
+    </div>
+    </div>
+    <div class="row">
+      <button
+        type="submit"
+        [disabled]="projectForm.invalid"
+        class="col m-4 btn btn-primary"
+      >
+        إضافة
+      </button>
+      <div class="col m-4 btn btn-seondary" (click)="onClose()">
+        إغلاق
+      </div>
+    </div>
+  </form>
+</div>

src/app/customers/components/add-contactinfo-modal/add-contactinfo-modal.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { Customer } from '../../models/responses/customer';
+import { ToastrService } from 'ngx-toastr';
+import { CustomerService } from '../../services/customer.service';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { AddContactInfoRequest } from '../../models/requests/updateCustomerRequest';
+
+@Component({
+  selector: 'add-contactinfo-modal',
+  templateUrl: './add-contactinfo-modal.component.html',
+  styleUrl: './add-contactinfo-modal.component.css'
+})
+export class AddContactinfoModalComponent implements OnInit{
+
+  @Input() customer :Customer
+
+  request =new  AddContactInfoRequest(); 
+ 
+  constructor(
+
+    private toastr :ToastrService ,
+    private customerService :CustomerService,
+    private activeModal :  NgbActiveModal
+
+  ){}
+
+  ngOnInit(): void {
+    
+
+  }
+
+  
+  onClose() {
+    this.activeModal.close();
+  }
+  
+  onSubmit(){
+
+    this
+    .request
+    .customerId=this.customer.id
+
+    this
+    .customerService
+    .addContactInfo(this.request)
+    .subscribe({
+      next : (data)=>{
+       
+        this.onClose()
+      },
+      error:(err)=>{
+        this
+        .toastr
+        .error('تعذر إضافة معلومة الاتصال');
+      }
+    });
+
+  }
+
+}

src/app/customers/components/customer-item/customer-item.component.ts

 import { Component, Input } from '@angular/core';
-import { Customer } from '../../models/customer';
+import { Customer } from '../../models/responses/customer';
 
 @Component({
   selector: 'customer-item',

src/app/customers/components/remove-contactinfo-modal/remove-contactinfo-modal.component.html

+
+<div class="modal-header">
+    <h5 class="modal-title" id="moveToplanModalLabel">حذف معلومة اتصال</h5>
+    <button type="button" class="ml-4 mr-4 btn-close" (click)="onClose()" ></button>
+  </div>
+  <div class="modal-body">
+  
+  <form (ngSubmit)="onSubmit()" #projectForm="ngForm">
+    <div class="row">
+        هل أنت متأكد من أنك تريد حذف جهة الاتصال {{contact.contactType}}/{{contact.contactValue}}
+      </div>
+      
+      <div class="row ">
+      <button type="submit" [disabled]="projectForm.invalid " class="col m-4 btn btn-primary">إضافة</button>
+      <button  class="col m-4  btn btn-seondary" (click)="onClose()" >إغلاق</button>
+   
+    </div>
+     </form>
+
+  </div>

src/app/customers/components/remove-contactinfo-modal/remove-contactinfo-modal.component.ts

+import { Component, Input } from '@angular/core';
+import { ContactInfo, Customer } from '../../models/responses/customer';
+import { RemoveContactInfoRequest } from '../../models/requests/updateCustomerRequest';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastrService } from 'ngx-toastr';
+import { CustomerService } from '../../services/customer.service';
+
+@Component({
+  selector: 'remove-contactinfo-modal',
+  templateUrl: './remove-contactinfo-modal.component.html',
+  styleUrl: './remove-contactinfo-modal.component.css'
+})
+export class RemoveContactinfoModalComponent {
+
+  @Input() contact :ContactInfo
+
+  @Input() customer :Customer
+
+  request =new  RemoveContactInfoRequest(); 
+ 
+  constructor(
+
+    private toastr :ToastrService ,
+    private customerService :CustomerService,
+    private activeModal :  NgbActiveModal
+
+  ){}
+
+  ngOnInit(): void {
+    
+
+  }
+
+  
+  onClose() {
+    this.activeModal.close();
+  }
+  
+  onSubmit(){
+
+    this
+    .request
+    .customerId=this.customer.id
+    this.request.id=this.contact.id
+
+    this
+    .customerService
+    .removeContactInfo(this.request)
+    .subscribe({
+      next : (data)=>{
+       this.onClose();
+      },
+      error:(err)=>{
+        this
+        .toastr
+        .error('تعذر حذف معلومة الاتصال');
+      }
+    });
+
+  }
+
+}

src/app/customers/customers.module.ts

@@ -10,6 +10,8 @@ import { SharedModule } from "../shared/shared.module";
 import { CustomerItemComponent } from './components/customer-item/customer-item.component';
 import { CustomerCreateComponent } from './pages/customer-create/customer-create.component';
 import { AddCustomerModalComponent } from './components/add-customer-modal/add-customer-modal.component';
+import { AddContactinfoModalComponent } from './components/add-contactinfo-modal/add-contactinfo-modal.component';
+import { RemoveContactinfoModalComponent } from './components/remove-contactinfo-modal/remove-contactinfo-modal.component';
 
 
 
@@ -20,7 +22,9 @@ import { AddCustomerModalComponent } from './components/add-customer-modal/add-c
     UpdateCustomerComponent,
     CustomerItemComponent,
     CustomerCreateComponent,
-    AddCustomerModalComponent
+    AddCustomerModalComponent,
+    AddContactinfoModalComponent,
+    RemoveContactinfoModalComponent
    ],
   imports: [
     CommonModule,

src/app/customers/models/requests/updateCustomerRequest.ts

@@ -7,4 +7,14 @@ export class UpdateCustomerRequest{
         streetName : string 
     }
     email :string 
+}
+export class   AddContactInfoRequest{
+    customerId :number
+    contactType :string 
+    contactValue :string 
+}
+
+export class RemoveContactInfoRequest{
+    id :number 
+    customerId :number  
 }
\ No newline at end of file

src/app/customers/models/customer.ts → src/app/customers/models/responses/customer.ts

@@ -7,8 +7,11 @@ export interface Customer{
         streetNumber : number ,
         streetName : string 
     } 
-    contactInfo :{
-        contactValue :string,
-        contactType :string
-    }[]
+    contactInfo :ContactInfo[]
+}
+export class ContactInfo {
+    id :number 
+    contactValue :string 
+    contactType :string   
+
 }
\ No newline at end of file

src/app/customers/pages/customer-create/customer-create.component.ts

 import { Component } from '@angular/core';
-import { CreateCustomerRequest } from '../../models/createCustomerRequest';
+import { CreateCustomerRequest } from '../../models/requests/createCustomerRequest';
 import { CustomerService } from '../../services/customer.service';
 import { ToastrService } from 'ngx-toastr';
 import { Router } from '@angular/router';

src/app/customers/pages/customer-details/customer-details.component.html

@@ -16,15 +16,41 @@
                 <p><strong>العنوان</strong></p>
                 <p>المدينة {{customer.address.city}}</p>
                 <p>الشارع {{customer.address.streetName}} {{customer.address.streetNumber}}</p>
+            
                 
-                
+            </div>
+            <div class="row col-8  ">
+              <table class="table offset-2">
+                <thead>
+                  <tr>
+                    <th>#</th>
+                    <th>طريقة الاتصال</th>
+                    <th>قيمة الاتصال</th>
+                    <th>تعديل </th>
+                    
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr *ngFor="let contact of customer.contactInfo ;index as i ">
+                    <td class="text-center" >{{i +1}}</td>
+                    <td class="text-center">{{contact.contactType}}</td>
+                    <td class="text-center">{{contact.contactValue}}</td>
+                    <td class="text-center"  >
+                      <button class="btn btn-danger" (click)="openRemoveConatact(contact)">
+                        إزالة
+                      </button>
+                    </td>
+                    
+                  </tr>
+                </tbody>
+              </table>
             </div>
             <div class="row mb-4">
 
                 <button class="col-3 offset-1 m-4 btn btn-danger" (click)="openModal('delete')">إزالة</button>
                 <button class="col-3 offset-1 m-4 btn btn-primary" (click)="openModal('edit')">تعديل</button>
                 
-                <button class="col-3 m-4 btn btn-primary" (click)="addContact(customer.id)">إضافة معلومة اتصال</button>
+                <button class="col-3 m-4 btn btn-primary" (click)="openAddConatact()">إضافة معلومة اتصال</button>
             
             </div>
             
@@ -34,7 +60,7 @@
 </div> <!-- .row -->
 
 
-<div class="modal   fade" id="customerModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
+<div *ngIf="customer" class="modal   fade" id="customerModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
       <div class="modal-header">

src/app/customers/pages/customer-details/customer-details.component.ts

 import { Component, Input, OnInit } from '@angular/core';
-import { Customer } from '../../models/customer';
+import { ContactInfo, Customer } from '../../models/responses/customer';
 import { CustomerService } from '../../services/customer.service';
 import { ActivatedRoute, Router, RouteReuseStrategy } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
 import { Modal } from 'bootstrap';
 import { UpdateCustomerComponent } from '../update-customer/update-customer.component';
-import { UpdateCustomerRequest } from '../../models/requests/updateCustomerRequest';
+import { AddContactInfoRequest, UpdateCustomerRequest } from '../../models/requests/updateCustomerRequest';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { AddContactinfoModalComponent } from '../../components/add-contactinfo-modal/add-contactinfo-modal.component';
+import { RemoveContactinfoModalComponent } from '../../components/remove-contactinfo-modal/remove-contactinfo-modal.component';
 
 @Component({
   selector: 'customer-details',
@@ -17,19 +20,26 @@ export class CustomerDetailsComponent implements OnInit {
   modalMode: 'edit' | 'delete' = 'edit';
   modalTitle: string = '';
 
+  customerId : number 
   customer: Customer ;
   selectedCustomer :Customer ;
   constructor(
     private router : Router,
     private route: ActivatedRoute,
     private customerService: CustomerService,
-    private toastr: ToastrService
+    private toastr: ToastrService,
+    private modalService : NgbModal
   ) {}
 
   ngOnInit(): void {
-    const id = Number(this.route.snapshot.paramMap.get('id'));
-    
-    this.customerService.getCustomerById(id).subscribe({
+    this.customerId = Number(this.route.snapshot.paramMap.get('id'));
+    this.loadCustomer();
+
+  }
+
+  loadCustomer (){
+
+    this.customerService.getCustomerById(this.customerId).subscribe({
       next :(data) => {
         
          this.customer = data;
@@ -40,10 +50,6 @@ export class CustomerDetailsComponent implements OnInit {
 
   });
   }
-  addContact(arg0: number) {
-    throw new Error('Method not implemented.');
-    }
-    
 
     openModal(mode: 'edit' | 'delete'): void {
       this.modalMode = mode;
@@ -109,6 +115,48 @@ export class CustomerDetailsComponent implements OnInit {
     );
   
     }
+
+    openAddConatact(){
+    
+      const modalRef = this.modalService.open(AddContactinfoModalComponent);
+      modalRef.componentInstance.customer = this.customer;
+
+  
+      modalRef.result.then((result) => {
+   
+        if (result) {
+   
+          this.loadCustomer();
+          
+        }
+        
+      }, (reason) => {
+                 this.loadCustomer();
+      
+      });
+    
+    }
+  
+    openRemoveConatact(conta : ContactInfo){
+    
+      const modalRef = this.modalService.open(RemoveContactinfoModalComponent);
+      modalRef.componentInstance.customer = this.customer;
+      modalRef.componentInstance.contact= conta
+  
+      modalRef.result.then((result) => {
+   
+        if (result) {
+   
+          this.loadCustomer();
+          
+        }
+        
+      }, (reason) => {
+       
+      
+      });
+    
+    }
   
     closeModal(): void {
       const modalElement = document.getElementById('customerModal');

src/app/customers/pages/customer-list/customer-list.component.ts

 import { Component, OnInit } from '@angular/core';
-import { Customer } from '../../models/customer';
+import { Customer } from '../../models/responses/customer';
 import { CustomerService } from '../../services/customer.service';
 import { CustomerDetailsComponent } from '../customer-details/customer-details.component';
 import { MatDialog } from '@angular/material/dialog';

src/app/customers/pages/update-customer/update-customer.component.ts

 import { Component, Input, input, Output } from '@angular/core';
-import { Customer } from '../../models/customer';
+import { Customer } from '../../models/responses/customer';
 import { CustomerService } from '../../services/customer.service';
 
 @Component({

src/app/customers/services/customer.service.ts

 import { Injectable } from '@angular/core';
-import { Customer } from '../models/customer';
+import { Customer } from '../models/responses/customer';
 import { HttpClient } from '@angular/common/http';
 import { ConfigurationService } from '../../core/services/configuration/configuration.service';
 import { Observable } from 'rxjs';
 import { Result } from '../../core/models/result';
-import { CreateCustomerRequest } from '../models/createCustomerRequest';
-import { UpdateCustomerRequest } from '../models/requests/updateCustomerRequest';
+import { CreateCustomerRequest } from '../models/requests/createCustomerRequest';
+import { AddContactInfoRequest, RemoveContactInfoRequest, UpdateCustomerRequest } from '../models/requests/updateCustomerRequest';
 
 @Injectable({
   providedIn: 'root'
@@ -35,7 +35,16 @@ export class CustomerService {
     
     return this.http.post<Customer>(this.config.getServerUrl()+ "/Customers",customer);
   }
+  public addContactInfo(request :AddContactInfoRequest):Observable<void>{
+    
+    return this.http.post<void>(this.config.getServerUrl()+ "/Customers/AddContactInfo",request);
+  }
 
+public removeContactInfo(request :RemoveContactInfoRequest):Observable<void>{
+    
+    return this.http.post<void>(this.config.getServerUrl()+ "/Customers/RemoveContactInfo",request);
+  }
+  
   public updateCustomer(id :number ,request :UpdateCustomerRequest):Observable<void>{
     
     return this.http.put<void>(`${this.config.getServerUrl()}/Customers/${id}` ,request);

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

@@ -3,7 +3,7 @@ import { CreateNewTypeRequest } from '../../models/requests/createNewTypeRequest
 import { ProjectsTypesService } from '../../services/projects-types.service';
 import { ToastrService } from 'ngx-toastr';
 import { Router } from '@angular/router';
-import { CreateCustomerRequest } from '../../../customers/models/createCustomerRequest';
+import { CreateCustomerRequest } from '../../../customers/models/requests/createCustomerRequest';
 
 @Component({
   selector: 'types-create',

src/app/projects/models/responses/project.ts

-import { Customer } from "../../../customers/models/customer"
+import { Customer } from "../../../customers/models/responses/customer"
 import { Employee } from "../../../employees/models/responses/employee"
 import { EmployeeParticipate } from "../../../employees/models/responses/employeeParticipate"
 import { Aggreement } from "../valueObjects/Aggreement"

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

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

src/app/reports/componenets/project-footer/project-footer.component.ts

 import { Component, Input } from '@angular/core';
-import { Customer } from '../../../customers/models/customer';
+import { Customer } from '../../../customers/models/responses/customer';
 import { Employee } from '../../../employees/models/responses/employee';
 import { Department } from '../../../projects/models/responses/department';