added some compo

src/app/dashboard/dashboard-routing.ts

@@ -105,6 +105,10 @@ import { DefinitionOfCovenantsListComponent } from './definition-of-covenants/de
 import { DefinitionOfCovenantsAddComponent } from './definition-of-covenants/definition-of-covenants-add/definition-of-covenants-add.component';
 import { RecordInfoBuildingListComponent } from './record-info-building/record-info-building-list/record-info-building-list.component';
 import { RecordInfoBuildingAddComponent } from './record-info-building/record-info-building-add/record-info-building-add.component';
+import { UnitInformationListComponent } from './unit-information/unit-information-list/unit-information-list.component';
+import { UnitInformationAddComponent } from './unit-information/unit-information-add/unit-information-add.component';
+import { UnitBuildingInformationListComponent } from './unit-building-information/unit-building-information-list/unit-building-information-list.component';
+import { UnitBuildingInformationAddComponent } from './unit-building-information/unit-building-information-add/unit-building-information-add.component';
     
 const dashboardRouting: Routes = [
     {path: 'service/:userID/:serviceID', component: ServiceItemComponent, canActivate: [AuthGuard], children: [
@@ -252,6 +256,13 @@ const dashboardRouting: Routes = [
     {path: 'recordInfoBuilding/:listPageId', component: RecordInfoBuildingListComponent, canActivate: [AuthGuard]},
     {path: 'recordInfoBuilding', component: RecordInfoBuildingAddComponent, canActivate: [AuthGuard]},
     {path: 'recordInfoBuilding/edit/:listPagEditId', component: RecordInfoBuildingAddComponent, canActivate: [AuthGuard]},
+    {path: 'unitsInformation/:listPageId', component: UnitInformationListComponent, canActivate: [AuthGuard]},
+    {path: 'unitsInformation', component: UnitInformationAddComponent, canActivate: [AuthGuard]},
+    {path: 'unitsInformation/edit/:listPageEditId', component: UnitInformationAddComponent, canActivate: [AuthGuard]},
+    {path: 'unitsBuildingInformation/:listPageId', component: UnitBuildingInformationListComponent, canActivate: [AuthGuard]},
+    {path: 'unitsBuildingInformation', component: UnitBuildingInformationAddComponent, canActivate: [AuthGuard]},
+    {path: 'unitsBuildingInformation/edit/:listPageEditId', component: UnitBuildingInformationAddComponent, canActivate: [AuthGuard]},
+    
     
     
     

src/app/dashboard/dashboard.module.ts

@@ -149,6 +149,10 @@ import { DefinitionOfCovenantsListComponent } from './definition-of-covenants/de
 import { DefinitionOfCovenantsAddComponent } from './definition-of-covenants/definition-of-covenants-add/definition-of-covenants-add.component';
 import { RecordInfoBuildingListComponent } from './record-info-building/record-info-building-list/record-info-building-list.component';
 import { RecordInfoBuildingAddComponent } from './record-info-building/record-info-building-add/record-info-building-add.component';
+import { UnitInformationListComponent } from './unit-information/unit-information-list/unit-information-list.component';
+import { UnitInformationAddComponent } from './unit-information/unit-information-add/unit-information-add.component';
+import { UnitBuildingInformationListComponent } from './unit-building-information/unit-building-information-list/unit-building-information-list.component';
+import { UnitBuildingInformationAddComponent } from './unit-building-information/unit-building-information-add/unit-building-information-add.component';
 
 
 
@@ -263,6 +267,10 @@ import { RecordInfoBuildingAddComponent } from './record-info-building/record-in
         DefinitionOfCovenantsAddComponent,
         RecordInfoBuildingListComponent,
         RecordInfoBuildingAddComponent,
+        UnitInformationListComponent,
+        UnitInformationAddComponent,
+        UnitBuildingInformationListComponent,
+        UnitBuildingInformationAddComponent,
     
     ],
     imports: [

src/app/dashboard/definition-of-covenants/definition-of-covenants-add/definition-of-covenants-add.component.html

@@ -30,7 +30,7 @@
             
           <div class="col-12 col-sm-12 col-md-4">
             <div class="form-group">
-              <label style="float: right; margin-right: 5px">الحاله</label>
+              <label style="float: right; margin-right: 5px">اسم المادة او العهدة</label>
               <select class="form-control" name="category_id" [ngModel]="formData.category_id" required>
                 <option *ngFor="let category of categories" [value]="category.id">{{category.name}}</option>
               </select>

src/app/dashboard/definition-of-covenants/definition-of-covenants-add/definition-of-covenants-add.component.ts

@@ -18,7 +18,7 @@ export class DefinitionOfCovenantsAddComponent implements OnInit {
   constructor(
     private dashBoardSer: DashboardService,
     private toastr: ToastrService,
-    private authSer: AuthServiceService,
+    public authSer: AuthServiceService,
     private route: ActivatedRoute,
     private spinner: NgxSpinnerService,
     private location: Location,

src/app/dashboard/definition-of-covenants/definition-of-covenants-list/definition-of-covenants-list.component.ts

@@ -37,7 +37,7 @@ export class DefinitionOfCovenantsListComponent implements OnInit {
     private modal: Modal,
     private userSer: UserService,
     private spinner: NgxSpinnerService,
-    private authSer: AuthServiceService,
+    public authSer: AuthServiceService,
     private toastr: ToastrService,
     private dashboardSer: DashboardService,
     private http: HttpClient

src/app/dashboard/record-info-building/record-info-building-add/record-info-building-add.component.html

@@ -32,7 +32,7 @@
           <div class="col-12 col-sm-12 col-md-4">
             <div class="form-group">
               <label for="land_area" style="float: right; margin-right: 5px">مساحة الأرض الإجمالية<span class="spanReqired-w">*</span></label>
-              <input type="text" class="form-control" id="land_area" name="land_area" placeholder="عدد العماير" ngModel [(ngModel)]="formData.land_area" required/>
+              <input type="text" class="form-control" id="land_area" name="land_area" placeholder="مساحة الأرض الإجمالية" ngModel [(ngModel)]="formData.land_area" required/>
             </div>
           </div>
 
@@ -58,7 +58,7 @@
                 <input type="text" class="form-control" id="building.name{{i}}" name="building.name{{i}}" placeholder="نوع المنى" ngModel [(ngModel)]="building.name"  required/>
               </div>
               <div class="col-4">
-                  <input type="number" class="form-control" id="building.value{{i}}" name="building.value{{i}}" placeholder="عدد المبنى" ngModel [(ngModel)]="building.value" required/>
+                  <input type="number" class="form-control" id="building.value{{i}}" name="building.value{{i}}" min="0" placeholder="عدد المباني" ngModel [(ngModel)]="building.value" required/>
               </div>
               <div class="col-3">
                   <button type="button" class="btn btn-danger" (click)="onDeleteRow(i)" style="margin: 10px 15px;">حذف</button>

src/app/dashboard/record-info-building/record-info-building-add/record-info-building-add.component.ts

@@ -41,7 +41,24 @@ export class RecordInfoBuildingAddComponent implements OnInit {
     name : '',
     land_area : '',
     status: '',
-    building_types:[]
+    building_types:[
+      {
+      
+        name : 'المباني',
+        value : ''
+},
+{
+        
+        name : 'الفلل',
+        value : ''
+},
+{
+        
+        name : 'العمائر',
+        value: ''
+},
+
+    ]
   }
   
 
@@ -56,6 +73,7 @@ export class RecordInfoBuildingAddComponent implements OnInit {
 
     if (this.editPageId) {
       this.spinner.show();
+      this.formData.building_types = [];
       this.isEdit = true;
       this.typePage = 'تعديل';
       this.dashBoardSer.getItemData(this.editPageId, 'recordInfoBuilding' ).subscribe(

src/app/dashboard/record-info-building/record-info-building-list/record-info-building-list.component.html

@@ -51,9 +51,6 @@
          
           <th>رقم المجمع السكني</th>
           <th>اسم المجمع السكني</th>
-          <th>عدد المباني</th>
-          <th>عدد الفلل</th>
-          <th>عدد العمائر</th>
           <th>مساحة الأرض الإجمالية</th>
           <th>فعال</th>
 
@@ -70,9 +67,6 @@
           </td>
           <td>{{data.complex_number}}</td>
           <td>{{data.name}}</td>
-          <td>{{data.buildings_number}}</td>
-          <td>{{data.villas_number}}</td>
-          <td>{{data.mini_buildings_number}}</td>
           <td>{{data.land_area}}</td>
           <td>{{data.status == '0' ? 'غير فعال' : data.status == '1' ? ' فعال' : 'not found'}}</td>
         <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>

src/app/dashboard/record-info-building/record-info-building-list/record-info-building-list.component.ts

@@ -265,7 +265,7 @@ onDelete() {
   } else {
     this.toastr.warning('لم يتم إختيار أي عنصر للمسح !');
   }
-};
+}
 onAdd() {
   this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'recordInfoBuilding']);
 }

src/app/dashboard/service-item/service-item.component.ts

@@ -457,10 +457,14 @@ export class ServiceItemComponent implements OnInit {
       this.router.navigate(['definitionOfConvenats/' + dataPage.id], {relativeTo: this.route});
     }else if(dataPage.id == 65) {
       this.router.navigate(['recordInfoBuilding/' + dataPage.id], {relativeTo: this.route});
+    }else if(dataPage.id == 66) {
+      this.router.navigate(['unitsInformation/' + dataPage.id], {relativeTo: this.route});
+    }else if(dataPage.id == 67) {
+      this.router.navigate(['unitsBuildingInformation/' + dataPage.id], {relativeTo: this.route});
     }
     
   }
-  // livingService
+  // livingService 
 
   onAddUser() {
     this.router.navigate(['addUser'],  {relativeTo: this.route});

src/app/dashboard/unit-building-information/unit-building-information-add/unit-building-information-add.component.html

@@ -0,0 +1,123 @@
+<div class="addDepartment-w">
+
+    
+    <div class="container">
+        <div class="row">
+          <div class="col-12">
+            <ul class="list-unstyled titileLi-w">
+              <li class="headingText-w"> خدمه البلاغات </li>
+              <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typePage}} </li>
+            </ul>
+          </div>
+        </div>
+  
+      <div class="containerContent-w">
+          <form (ngSubmit)="onSubmitted()" #f="ngForm" style="margin-top: 40px;">
+              <div class="row">
+  
+              <div class="col-12 col-sm-12 col-md-4" >
+                  <div class="form-group">
+                    <label style="float: right; margin-right: 5px">المجمع</label>
+                    <select class="form-control" name="housing_complex_id" [(ngModel)]="formData.housing_complex_id" (input)="getBuildingsType($event.target.value)" required>
+                      <option *ngFor="let complex of complex_list" [value]="complex.id">{{complex.name}}</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="col-12 col-sm-12 col-md-4" *ngIf="isComplex" >
+                    <div class="form-group">
+                      <label style="float: right; margin-right: 5px">نوع المبنى</label>
+                      <select class="form-control" name="building_type_id" [(ngModel)]="formData.building_type_id" (input)="getBuilding($event.target.value)" required>
+                        <option *ngFor="let type of building_types" [value]="type.id" >{{type.name}}</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4" *ngIf="isBuildingType">
+                    <div class="form-group">
+                        <label style="float: right; margin-right: 5px">اسم المبنى </label>
+                        <select class="form-control" name="building_id" [(ngModel)]="formData.building_id"  required>
+                          <option *ngFor="let building of buildings" [value]="building.id" >{{building.building_name}}</option>
+                        </select>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4">
+                      <div class="form-group">
+                        <label for="unit_number" style="float: right; margin-right: 5px">رقم الوحدة<span class="spanReqired-w">*</span></label>
+                        <input type="number" class="form-control" min="0" id="unit_number" name="unit_number" placeholder="" ngModel [ngModel]="formData.unit_number" required/>
+                      </div>
+                    </div>      
+                    <div class="col-12 col-sm-12 col-md-4">
+                      <div class="form-group">
+                        <label for="unit_code" style="float: right; margin-right: 5px">رمز الوحدة<span class="spanReqired-w">*</span></label>
+                        <input type="text" class="form-control" min="0" id="unit_code" name="unit_code" placeholder="" ngModel [ngModel]="formData.unit_code" required/>
+                      </div>
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-4">
+                      <div class="form-group">
+                        <label for="unit_name" style="float: right; margin-right: 5px" >اسم الوحدة السكنية<span class="spanReqired-w">*</span></label>
+                        <input type="text" class="form-control" min="0" id="unit_name" name="unit_name" placeholder="" ngModel [ngModel]="formData.unit_name" required/>
+                      </div>
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-4">
+                      <div class="form-group">
+                        <label for="bedrooms_number" style="float: right; margin-right: 5px" > عدد غرف النوم في الوحدة <span class="spanReqired-w">*</span></label>
+                        <input type="number" class="form-control" min="0" id="bedrooms_number" name="bedrooms_number" placeholder="" ngModel [ngModel]="formData.bedrooms_number" required/>
+                      </div>
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-4">
+                        <div class="form-group">
+                          <label for="bathrooms_number" style="float: right; margin-right: 5px" >عدد الحمامات <span class="spanReqired-w">*</span></label>
+                          <input type="number" class="form-control" min="0" id="bathrooms_number" name="bathrooms_number" placeholder="" ngModel [ngModel]="formData.bathrooms_number" required/>
+                        </div>
+                      </div>
+                      <div class="col-12 col-sm-12 col-md-4">
+                        <div class="form-group">
+                          <label for="sittingrooms_number" style="float: right; margin-right: 5px" > عدد غرف الجلوس <span class="spanReqired-w">*</span></label>
+                          <input type="number" class="form-control" min="0" id="sittingrooms_number" name="sittingrooms_number" placeholder="" ngModel [ngModel]="formData.sittingrooms_number" required/>
+                        </div>
+                      </div>
+                      <div class="col-12 col-sm-12 col-md-4" >
+                          <div class="form-group">
+                            <label style="float: right; margin-right: 5px"> مطبخ مستقل</label>
+                            <select class="form-control" name="independent_kitchen" [ngModel]="formData.independent_kitchen" required>
+                                <option value="0">رجاء الاختيار</option>
+                                <option value="yes">نعم</option>
+                                <option value="no">لا</option>
+                            </select>
+                          </div>
+                        </div>
+                        <div class="col-12 col-sm-12 col-md-4" >
+                            <div class="form-group">
+                              <label style="float: right; margin-right: 5px">حالة الوحدة</label>
+                              <select class="form-control" name="unit_status" [ngModel]="formData.unit_status" required>
+                                  <option value="new">جديد</option>
+                                  <option value="old">قديم</option>
+                              </select>
+                            </div>
+                          </div>
+                          <div class="col-12 col-sm-12 col-md-4">
+                            <div class="form-group">
+                              <label for="description" style="float: right; margin-right: 5px" > وصف للوحدة <span class="spanReqired-w">*</span></label>
+                              <input type="text" class="form-control" min="0" id="description" name="description" placeholder="" ngModel [ngModel]="formData.description" required/>
+                            </div>
+                          </div>      
+                          <div class="col-12 col-sm-12 col-md-4">
+                              <div class="form-group">
+                                <label style="float: right; margin-right: 5px">الحاله</label>
+                                <select class="form-control" name="status" [ngModel]="formData.status" required>
+                                    <option value="1">فعال</option>
+                                    <option value="0">غير فعال</option>
+                                  </select>
+                                </div>
+                            </div>
+                         </div>
+                         <div class=" row col-6">
+                            <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+                            <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>  
+
+
+      

src/app/dashboard/unit-building-information/unit-building-information-add/unit-building-information-add.component.ts

@@ -0,0 +1,179 @@
+import { HttpClient } from '@angular/common/http';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Location } from '@angular/common';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ToastrService } from 'ngx-toastr';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+
+
+@Component({
+  selector: 'app-unit-building-information-add',
+  templateUrl: './unit-building-information-add.component.html',
+  styleUrls: ['./unit-building-information-add.component.css']
+})
+export class UnitBuildingInformationAddComponent implements OnInit {
+
+  typePage: string = '';
+  isComplex = false;
+  isBuildingType = false;
+  complex_list =[];
+  building_types=[];
+  buildings = [];
+  valueType: string = '';
+  checkSaveclick:boolean = false;
+  check : boolean = false;
+  isEdit: boolean = false;
+  editPageId: number;
+
+  constructor(
+    private dashBoardSer: DashboardService,
+    private toastr: ToastrService,
+    public authSer: AuthServiceService,
+    private route: ActivatedRoute,
+    private spinner: NgxSpinnerService,
+    private location: Location,
+    private http: HttpClient
+  ) { }
+  @ViewChild('f') unitInfoForm : NgForm;
+
+  formData = {
+    housing_complex_id:'',
+    building_type_id:'',
+    building_id: '',
+    unit_number:'',
+    unit_code:'',
+    unit_name:'',
+    bedrooms_number:'',
+    bathrooms_number:'',
+    sittingrooms_number:'',
+    independent_kitchen:'0',
+    unit_status:'new',
+    description:'',
+    status: '1',
+  }
+
+  ngOnInit() {
+
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.editPageId = +params['listPageEditId'];
+        console.log(this.editPageId);
+      }
+    );
+
+    this.http.get(this.authSer.pathApi + '/housing_complexes_list').subscribe(
+      res => {
+        console.log(res);
+        this.complex_list = res[('housing_complexes')];
+      }
+    );
+
+    if (this.editPageId) {
+      
+      this.isEdit = true;
+      this.typePage = 'تعديل';
+      this.dashBoardSer.getItemData(this.editPageId, 'unitBuildingInformation' ).subscribe(
+        res => {
+          console.log('ssss', res);
+          this.formData.housing_complex_id = res['unit_information'].housing_complex_id;
+          this.getBuildingsType(this.formData.housing_complex_id);
+          this.formData.building_type_id = res['unit_information'].building_type_id;
+          this.getBuilding(this.formData.building_type_id);
+          this.formData.building_id = res['unit_information'].building_id;
+          this.formData.unit_number = res['unit_information'].unit_number;
+          this.formData.unit_code = res['unit_information'].unit_code;
+          this.formData.unit_name = res['unit_information'].unit_name;
+          this.formData.bedrooms_number = res['unit_information'].bedrooms_number;
+          this.formData.bathrooms_number = res['unit_information'].bathrooms_number;
+          this.formData.sittingrooms_number = res['unit_information'].sittingrooms_number;
+          this.formData.independent_kitchen = res['unit_information'].independent_kitchen;
+          this.formData.unit_status = res['unit_information'].unit_status;
+          this.formData.description = res['unit_information'].description;
+          this.formData.status = res['unit_information'].status;
+          
+        },
+        err => {
+          console.log(err);
+        }
+      );
+     
+    }else {
+      this.typePage = 'اضافة';
+    }
+
+  }
+
+  getBuildingsType(event){
+    console.log('sdsdsd',event);
+    const id = event;
+ 
+  console.log(id);
+
+    this.http.get(this.authSer.pathApi+ '/building_types_list/' + id ).subscribe(
+      res => {
+        console.log(res);
+        this.building_types = res[('building_types')];
+        if(this.building_types.length > 0)
+         this.isComplex = true;
+         else {
+           this.isComplex = false;
+           this.isBuildingType = false;
+        }
+      },
+      err => {
+        console.log(err);
+        
+      }
+    );  
+  } 
+
+  getBuilding(event){
+      this.http.get(this.authSer.pathApi + '/buildings_list_by_type_id/' + event ).subscribe(
+        res => {
+          console.log(res);
+          this.buildings = res['buildings'];
+          if(this.buildings.length > 0)
+            this.isBuildingType = true;
+            else this.isBuildingType = false;
+        },
+        err => {
+          console.log(err);
+          
+        }
+      );
+  }
+  onSubmitted(){
+    console.log('HERE',this.unitInfoForm.value);
+    if(this.editPageId) {
+      this.dashBoardSer.editItem(this.editPageId, this.unitInfoForm.value, 'unitsBuildingInformation').subscribe(
+        res => {
+          console.log(res);
+          this.toastr.success('تم التعديل بنجاح');
+          this.location.back();
+        },
+        err => {
+          console.log(err);
+          this.toastr.error('خطأ في الخادم ، رجاء المحارله لاحقا');
+        }
+      )
+    } else {
+      this.dashBoardSer.addItem( this.unitInfoForm.value , 'unitsBuildingInformation').subscribe(
+        res => {
+          console.log('ADD',res);
+          this.toastr.success('تم الإضافه بنجاح');
+          this.checkSaveclick = false;
+          this.location.back();
+        },
+        err => {
+          console.log(err);
+          this.checkSaveclick = false;
+          this.toastr.error('خطأ في الخادم ، حاول لاحقا');
+        }
+      );
+      }
+  }
+
+}

src/app/dashboard/unit-building-information/unit-building-information-list/unit-building-information-list.component.css

@@ -0,0 +1,30 @@
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+
+/* .centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+} */

src/app/dashboard/unit-building-information/unit-building-information-list/unit-building-information-list.component.html

@@ -0,0 +1,132 @@
+<div class="container">
+
+    <div class="row">
+      <div class="col-12">
+        <ul class="list-unstyled titileLi-w">
+          <li class="headingText-w">خدمه السكن  </li>
+          <li class="headingText-w activeLi-w" style="margin-right:5px">تسجيل معلومات المباني</li>
+        </ul>
+      </div>
+    </div>
+  
+    <div class="containerContent-w">
+      <div class="row">
+        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+          <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn"><i class="fas fa-plus marginFontAowsome-w"></i>إنشاء جديد</button>
+          <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn"><i class="fas fa-times marginFontAowsome-w"></i>حذف</button>
+        </div>
+        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+          <div class="form-group">
+            <input type="text" placeholder="البحث (اسم المبني او رمز المبنى)" class="form-control inputSearchTable-w" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+            <hr>
+          </div>
+        </div>
+      </div>
+  
+      <div class="row">
+          <div class="col-12 col-sm-12 col-md-12 col-lg-3">
+            <div class="form-group">
+              <span class="spanSelect-w" style="margin-right:10px;">
+                <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+                  <option value="5">5</option>
+                  <option value="10">10</option>
+                  <option value="15">15</option>
+                  <option value="20">20</option>
+                </select>
+                من العناصر يتم عرضها
+              </span>
+            </div>
+          </div>
+          <div class="col-12 col-sm-12 col-md-12 col-lg-3">
+              <div class="form-group">
+                <span class="spanSelect-w" style="margin-right:10px;">
+                  <select [ngModel]="housing_complex_id" class="form-control selectButton-w" (input)="getBuildingsType($event.target.value)">
+                    <option *ngFor="let complex of complex_list" [value]="complex.id">{{complex.name}}</option>
+                  </select>
+                 المجمع السكني
+                </span>
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-12 col-lg-3" *ngIf="isComplex">
+                <div class="form-group">
+                  <span class="spanSelect-w" style="margin-right:10px;">
+                    <select [ngModel]="building_type_id" class="form-control selectButton-w" (input)="getBuilding($event.target.value)">
+                    <option *ngFor="let type of building_types" [value]="type.id">{{type.name}}</option>
+                    </select>
+                     نوع المبنى
+                  </span>
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-12 col-lg-3" *ngIf="isBuildingType">
+                  <div class="form-group">
+                    <span class="spanSelect-w" style="margin-right:10px;">
+                      <select [ngModel]="building_id" class="form-control selectButton-w" (input)="getBuildingID($event.target.value)">
+                       <option *ngFor="let building of building" [value]="building.id">{{building.building_name}}</option>
+                      </select>
+                      اسم المبنى
+                    </span>
+                  </div>
+                </div>  
+          
+      </div>
+  
+      <table class="table table-bordered" *ngIf="this.count != 0">
+        <thead class="headBackground-w">
+          <tr>
+            <th>
+              <div class="custom-control custom-checkbox">
+                <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+              </div>
+            </th>
+           
+            <th *ngIf="selectedComplex">اسم المجمع السكني</th>
+            <th *ngIf="selectedType">نوع المبنى</th>
+            <th *ngIf="selectedBuilding">اسم المبنى</th>
+            <th>رقم الوحدة </th>
+            <th>رمز الوحدة</th>
+            <th>اسم الوحدة </th>
+            <th>عدد غرف النوم</th>
+            <th>عدد الحمامات</th>
+            <th>عدد غرف الجلوس</th>
+            <th>مطبخ مستقل</th>
+            <th>حالة الوحدة</th>
+            <th>وصف الوحدة</th>
+            <th>فعال</th>
+            <th *ngIf="authSer.showEditBtn">تعديل</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+            <td>
+              <div class="custom-control custom-checkbox centerIneerItem">
+                <input type="checkbox" class="custom-control-input" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected();">
+                <!-- <label class="custom-control-label disblayBlock-w" for="{{tab.id}}" style="color:#2a2a2a"></label> -->
+              </div>
+            </td>
+            <td *ngIf="selectedComplex">{{data.housing_complex_name}}</td>
+            <td *ngIf="selectedType">{{data.building_type_name}}</td>
+            <td *ngIf="selectedBuilding">{{data.building_information_name}}</td>
+            <td>{{data.unit_number}}</td>
+            <td>{{data.unit_code}}</td>
+            <td>{{data.unit_name}}</td>
+            <td>{{data.bedrooms_number}}</td>
+            <td>{{data.bathrooms_number}}</td>
+            <td>{{data.sittingrooms_number}}</td>
+            <td>{{data.independent_kitchen == 'yes' ? 'نعم' :  data.independent_kitchen == 'no' ? 'لا' : 'notFound'}}</td>
+            <td>{{data.unit_status == 'new' ? 'جديد' : data.unit_status == 'old' ? 'قديم' : 'NotFound'}}</td>
+            <td>{{data.description}}</td>
+            <td>{{data.status == '0' ? 'غير فعال' : data.status == '1' ? ' فعال' : 'not found'}}</td>
+          <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="col-12" *ngIf="this.count == 0" style="margin-top: 9px;" >
+      <!-- taaaaaaaaaaable -->
+      <h2 class="title"> لا يوجد بيانات لعرضها </h2>
+  
+    </div>
+    <pagination-controls nextLabel="التالي" previousLabel="السابق" (pageChange)="onPageChange($event)" *ngIf="this.count != 0"></pagination-controls>
+    </div>
+  </div>
+  

src/app/dashboard/unit-building-information/unit-building-information-list/unit-building-information-list.component.ts

@@ -0,0 +1,428 @@
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+import { UserService } from '../../../shared/user.service';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-unit-building-information-list',
+  templateUrl: './unit-building-information-list.component.html',
+  styleUrls: ['./unit-building-information-list.component.css']
+})
+export class UnitBuildingInformationListComponent implements OnInit {
+  complex_list = [];
+  building_types = [];
+  building = [];
+  isComplex = false;
+  isBuildingType = false;
+  selectedComplex = true;
+  selectedType = true;
+  selectedBuilding = true;
+  dataList = [];
+  pages= [];
+  pageId: number;
+  Ids = [];
+  count: number;
+  perPagePagenation: number;
+  currentPage:number = 1;
+  housing_complex_id = 'all';
+  building_type_id = 'all';
+  building_id = 'all';
+  filtterStatus = 'all';
+  selectedAll: any;
+  userLoginId:number;
+  serviceId:number;
+  dataTableNumber: number = 5;
+  absorpationListIds = [];
+  dataListIds = [];
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private modal: Modal,
+    private userSer: UserService,
+    private spinner: NgxSpinnerService,
+    public authSer: AuthServiceService,
+    private toastr: ToastrService,
+    private dashboardSer: DashboardService,
+    private http: HttpClient
+  ) { }
+
+  ngOnInit() {
+
+
+            //init the values of permision boolean
+   this.authSer.showAddBtn = false;
+   this.authSer.showDeleteBtn = false;
+   this.authSer.showEditBtn = false;
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+
+
+    this.route.params.subscribe(
+      (parmas: Params) => {
+        this.pageId =  +parmas['listPageId'];
+        localStorage.setItem('pageIdActive', parmas['listPageId']);
+        console.log(this.pageId);
+      }
+    );
+
+    this.http.get(this.authSer.pathApi + '/housing_complexes_list').subscribe(
+      res => {
+        console.log(res);
+        this.complex_list = res[('housing_complexes')];
+        this.complex_list.splice(0, 0 ,  {
+          id: 'all',
+          name:'الكل'
+        },
+          );
+        console.log(this.complex_list);
+        
+      },
+      err => {
+        console.log(err);
+        
+      }
+    );
+
+    this.route.parent.params.subscribe(
+      (params:Params) => {
+          this.userLoginId = params['userID'];
+          this.serviceId = params['serviceID'];
+         
+  
+          this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.pages = responce['pages'];
+              for(let i = 0; i< this.pages.length; i++) {
+                if(this.pages[i].id == 67){
+                  if(this.pages[i]['permissions'][0].name == 'unit_information') {
+                    this.authSer.showAddBtn = true;
+                    this.authSer.showEditBtn = true;
+                    this.authSer.showDeleteBtn = true;
+                  } else {
+                    console.log('no permissions');
+                  }
+                } else {
+                  console.log('no events');
+                }
+              }
+              this.spinner.hide();
+            },
+            (error) => {console.log(error)}
+          );
+        }
+      );
+
+      console.log('current page',this.pageId)
+      this.dashboardSer.getListUnit( this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id).subscribe(
+        res => {
+          console.log('x',res);
+          this.dataList = res['units'];
+          this.count = res['count'];
+          this.perPagePagenation = res['per_page'];
+        },
+        err => {
+          console.log(err);
+          
+        }
+
+      );
+    
+  }
+
+  getBuilding(event){
+    this.building_type_id = event;
+    this.building = [];
+    this.building_id = 'all'
+    this.selectedType = true;
+
+    if(event != 'all'){
+      this.selectedType = false;
+      this.http.get(this.authSer.pathApi + '/buildings_list_by_type_id/' + event ).subscribe(
+        res => {
+          console.log(res);
+          this.building = res['buildings'];
+          const x = this.building.length
+          this.building.splice(0, 0 ,  {
+            id: 'all',
+            building_name:'الكل'
+          },
+            );
+            if(x > 0)
+            this.isBuildingType= true;
+            
+        },
+        err =>{
+          console.log(err);
+          
+        }
+      );
+    }
+
+    this.dashboardSer.getListUnit( this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id).subscribe(
+      res => {
+        console.log('x',res);
+        this.dataList = res['units'];
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+      },
+      err => {
+        console.log(err);
+        
+      }
+
+    );
+    this.spinner.hide();
+  }
+  getBuildingID(event){
+    this.building_id = event;
+    if(event != 'all')
+    this.selectedBuilding = false;
+    else {
+      this.selectedBuilding = true;
+
+    }
+    this.dashboardSer.getListUnit( this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id).subscribe(
+      res => {
+        console.log('x',res);
+        this.dataList = res['units'];
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+      },
+      err => {
+        console.log(err);
+        
+      }
+
+    );
+    this.spinner.hide();
+      
+  }
+
+  selectAll() {
+    console.log('selected alllllll');
+    for(let i = 0; i < this.dataList.length; i++){
+      this.dataList[i].selected = this.selectedAll;
+    }
+  }
+  
+  checkIfAllSelected() {
+    this.selectedAll = this.absorpationListIds.every(function(item:any) {
+      return item.selected == true;
+    });
+  }
+
+  getBuildingsType(event){
+    console.log('sdsdsd',event);
+    const id = event;
+  this.housing_complex_id = id;
+  console.log(id);
+  this.isComplex = false;
+  this.isBuildingType = false;
+  this.selectedComplex = true;
+
+  this.building_types = [];
+  this.building = [];
+  this.building_type_id = 'all'
+  this.building_id = 'all';
+  
+  if(id != 'all'){
+    this.selectedComplex = false;
+    this.http.get(this.authSer.pathApi+ '/building_types_list/' + id ).subscribe(
+      res => {
+        console.log(res);
+        this.building_types = res[('building_types')];
+        this.building_types.splice(0, 0 ,  {
+          id: 'all',
+          name:'الكل'
+        },
+          );
+        if(this.building_types.length > 1)
+        this.isComplex = true;
+
+        console.log(this.isComplex);
+        
+      },
+      err => {
+        console.log(err);
+        
+      }
+    );
+  }
+   
+    
+    this.dashboardSer.getListUnit( this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id).subscribe(
+      res => {
+        console.log('x',res);
+        this.dataList = res['units'];
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+      },
+      err => {
+        console.log(err);
+        
+      }
+
+    );
+    this.spinner.hide();
+  } 
+
+  filtterFunc(data) {
+    this.dataList =[];
+    this.absorpationListIds = [];
+    console.log(data.target.value);
+    const dataSearch = data.target.value;     
+    this.currentPage = 1;
+    console.log('search curent page', this.currentPage);
+    console.log('search page id', this.pageId);
+    this.dashboardSer.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      res => {
+        console.log(res);
+        this.dataList = res['units'];
+        console.log('hey',this.dataList)
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+        console.log('filtter count', this.count);
+        console.log('filtter perPagePAgenation', this.perPagePagenation);
+      },
+      err => {
+        console.log(err);
+      }
+    );
+  };
+  onPageChange(pagenationNumber) {
+    this.spinner.show();
+    this.currentPage = pagenationNumber;
+    this.absorpationListIds = [];
+    console.log(pagenationNumber);
+    console.log(this.pageId);
+    this.dashboardSer.getListUnit( this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id).subscribe(
+      res => {
+        console.log(res);
+        this.dataList = res['units'];
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+        console.log('FFFFFF', this.absorpationListIds);
+        this.spinner.hide();
+      },
+      err => {
+        console.log(err);
+        this.spinner.hide();
+      }
+    );
+  }
+
+  onGetValue(event) {
+    this.spinner.show();
+    this.absorpationListIds = [];
+    this.dataTableNumber = event.target.value;
+    this.dashboardSer.getListUnit( this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id).subscribe(
+      res => {
+        console.log(res);
+        this.absorpationListIds = res['units'];
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+        this.spinner.hide();
+      },
+      err => {
+        console.log(err);
+        this.spinner.hide();
+      }
+    );
+  };
+  
+  onGetValueFiltter(event) {
+    console.log(event.target.value)
+    this.spinner.show();
+    this.dataList = [];
+    const typeId = event.target.value;
+    this.filtterStatus = event.target.value;
+    console.log(this.filtterStatus);
+    this.dashboardSer.getListUnit( this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id).subscribe(
+      res => {
+        console.log(res);
+        this.dataList = res['units'];
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+        this.spinner.hide();
+        console.log('UrL>>', this.authSer.pathApi +'/page_list/' + this.pageId + '/' + this.currentPage + '/' + this.dataTableNumber + '/' + typeId)
+      },
+      err=> {
+        console.log(err);
+      }
+    );
+  }
+  
+  onDelete() {
+
+    this.dataListIds = [];
+    for(let i = 0; i < this.dataList.length; i++) {
+      if(this.dataList[i].selected == true) {
+        this.dataListIds.push(this.dataList[i].id);
+      }
+    }
+    console.log(this.dataListIds);
+  
+    if(this.dataListIds.length > 0) {
+      const dialogRef = this.modal.alert()
+      .size('sm')
+      .showClose(true)
+      .title('تأكيد الحذف')
+      .body(`
+          <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
+          `)
+      .open();
+  
+        dialogRef.result
+        .then( result =>
+          this.dashboardSer.deleteItem(this.dataListIds , this.pageId).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.toastr.success('تم الحذف');
+              this.spinner.show();
+              this.dataList = [];
+               //get list data
+              this.dashboardSer.getListUnit( this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id).subscribe(
+                (responce) => {
+                  console.log(responce);
+                  this.dataList = responce['units'];
+                  this.count = responce['count'];
+                  this.perPagePagenation = responce['per_page'];
+                  this.spinner.hide();
+                },
+                (error) => {
+                  console.log(error);
+                  this.spinner.hide();
+                }
+              );
+            },
+            (error) => {
+              console.log(error);
+              this.spinner.hide();
+              },
+            )
+        );
+    } else {
+      this.toastr.warning('لم يتم إختيار أي عنصر للمسح !');
+    }
+  }
+  onAdd() {
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'unitsBuildingInformation']);
+  }
+  
+  onEdit(editId: number) {
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'unitsBuildingInformation/edit/' + editId]);
+  }
+
+}

src/app/dashboard/unit-information/unit-information-add/unit-information-add.component.html

@@ -0,0 +1,102 @@
+<div class="addDepartment-w">
+
+    
+  <div class="container">
+      <div class="row">
+        <div class="col-12">
+          <ul class="list-unstyled titileLi-w">
+            <li class="headingText-w"> خدمه البلاغات </li>
+            <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typePage}} </li>
+          </ul>
+        </div>
+      </div>
+
+    <div class="containerContent-w">
+        <form (ngSubmit)="onSubmitted()" #f="ngForm" style="margin-top: 40px;">
+            <div class="row">
+
+                <div class="col-12 col-sm-12 col-md-4" >
+                    <div class="form-group">
+                      <label style="float: right; margin-right: 5px">المجمع</label>
+                      <select class="form-control" name="housing_complex_id" [ngModel]="formData.housing_complex_id" (input)="getBuildingsType($event.target.value)" required>
+                        <option *ngFor="let complex of complex_list" [value]="complex.id">{{complex.name}}</option>
+                      </select>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4" *ngIf="showTypes" >
+                      <div class="form-group">
+                        <label style="float: right; margin-right: 5px">نوع المبنى</label>
+                        <select class="form-control" name="building_type_id" [ngModel]="formData.building_type_id" (input)="typeNumber($event.target.value)" required>
+                          <option *ngFor="let building of building_types" [value]="building.id" >{{building.name}}</option>
+                        </select>
+                      </div>
+                    </div>
+
+                    <!-- <div class="col-12 col-sm-12 col-md-4" *ngIf="show_amount" >
+                        <div class="form-group">
+                          <label style="float: right; margin-right: 5px"> رقم المبنى</label>
+                          <select class="form-control" name="building_number" [ngModel]="formData.building_number"  required>
+                            <option *ngFor="let amount of amount;  let i = index" (change)="removeAmount(i)"  [value]="amount" >{{amount}}</option>
+                          </select>
+                        </div>
+                      </div>  -->
+
+                      <div class="col-12 col-sm-12 col-md-4">
+                        <div class="form-group">
+                          <label for="building_number" style="float: right; margin-right: 5px">رقم المبنى<span class="spanReqired-w">*</span></label>
+                          <input type="number" class="form-control" id="building_number" name="building_number" placeholder=""  min="0"  ngModel [ngModel]="formData.building_number" required/>
+                        </div>
+                      </div>
+
+
+                      <div class="col-12 col-sm-12 col-md-4">
+                        <div class="form-group">
+                          <label for="building_code" style="float: right; margin-right: 5px">رمز المبنى<span class="spanReqired-w">*</span></label>
+                          <input type="text" class="form-control" id="building_code" name="building_code" placeholder="رمز المبنى" ngModel [ngModel]="formData.building_code" required/>
+                        </div>
+                      </div>
+
+                      <div class="col-12 col-sm-12 col-md-4">
+                        <div class="form-group">
+                          <label for="building_units" style="float: right; margin-right: 5px">عدد الوحدات السكنية في المبنى<span class="spanReqired-w">*</span></label>
+                          <input type="number" class="form-control" id="building_units" name="building_units" placeholder=" " ngModel [ngModel]="formData.building_units" required/>
+                        </div>
+                      </div>
+
+                <div class="col-12 col-sm-12 col-md-4">
+                    <div class="form-group">
+                      <label for="building_name" style="float: right; margin-right: 5px">اسم المبنى<span class="spanReqired-w">*</span></label>
+                      <input type="text" class="form-control" id="building_name" name="building_name" placeholder="اسم المبنى" ngModel [ngModel]="formData.building_name" required/>
+                    </div>
+                  </div>
+              
+                  <div class="col-12 col-sm-12 col-md-4" >
+                    <div class="form-group">
+                      <label style="float: right; margin-right: 5px">ملكية المبنى</label>
+                      <select class="form-control" name="building_property" [ngModel]="formData.building_property" required>
+                          <option value="governmental">حكومي</option>
+                          <option value="rented">أجر</option>
+                      </select>
+                    </div>
+                  </div>
+
+                <div class="col-12 col-sm-12 col-md-4">
+                 <div class="form-group">
+                   <label style="float: right; margin-right: 5px">الحاله</label>
+                   <select class="form-control" name="status" [ngModel]="formData.status" required>
+                      <option value="1">فعال</option>
+                       <option value="0">غير فعال</option>
+                    </select>
+                  </div>
+               </div>
+              
+          </div>
+          <div class=" row col-6">
+              <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+              <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+          </div>
+        </form>
+    </div>
+  </div>
+</div>

src/app/dashboard/unit-information/unit-information-add/unit-information-add.component.ts

@@ -0,0 +1,183 @@
+import { HttpClient } from '@angular/common/http';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Location } from '@angular/common';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ToastrService } from 'ngx-toastr';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+
+@Component({
+  selector: 'app-unit-information-add',
+  templateUrl: './unit-information-add.component.html',
+  styleUrls: ['./unit-information-add.component.css']
+})
+export class UnitInformationAddComponent implements OnInit {
+
+  constructor(
+    private dashBoardSer: DashboardService,
+    private toastr: ToastrService,
+    public authSer: AuthServiceService,
+    private route: ActivatedRoute,
+    private spinner: NgxSpinnerService,
+    private location: Location,
+    private http: HttpClient
+  ) { }
+  @ViewChild('f') unitInfoForm : NgForm;
+
+  typePage: string = '';
+  locations =[];
+  amount = [];
+  Amount  = 0;
+  show_amount = false;
+  complex_list =[];
+  building_types=[];
+  valueType: string = '';
+  checkSaveclick:boolean = false;
+  check : boolean = false;
+  isEdit: boolean = false;
+  editPageId: number;
+  showTypes = false;
+
+
+  formData = {
+    housing_complex_id:'',
+    building_type_id:'',
+    building_number:'',
+    building_code:'',
+    building_name: '',
+    building_units:'',
+    building_property:'',
+    status: '1',
+  }
+
+
+  ngOnInit() {
+
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.editPageId = +params['listPageEditId'];
+        console.log(this.editPageId);
+      }
+    );
+    
+    this.http.get(this.authSer.pathApi + '/housing_complexes_list').subscribe(
+      res => {
+        console.log(res);
+        this.complex_list = res[('housing_complexes')];
+      }
+    );
+    
+
+    if (this.editPageId) {
+      this.spinner.show();
+      this.isEdit = true;
+      this.show_amount = true;
+      this.showTypes = true;
+      this.typePage = 'تعديل';
+      this.dashBoardSer.getItemData(this.editPageId, 'unitInformation' ).subscribe(
+        res => {
+          console.log('ssss', res);
+          this.formData.housing_complex_id = res['building_information'].housing_complex_id;
+          this.getBuildingsType(this.formData.housing_complex_id);
+
+          this.formData.building_type_id = res['building_information'].building_type_id;
+          this.typeNumber(this.formData.building_type_id);
+          this.formData.building_number = res['building_information'].building_number;
+          this.formData.building_code = res['building_information'].building_code;
+          this.formData.building_name = res['building_information'].building_name;
+          this.formData.building_units = res['building_information'].building_units;
+          this.formData.building_property = res['building_information'].building_property;
+          this.formData.status  = res['building_information'].status;
+          this.spinner.hide();
+        },
+        err => {
+          console.log(err);
+        }
+      );
+     
+    }else {
+      this.typePage = 'اضافة';
+    }
+  }
+  getBuildingsType(event){
+    console.log(event);
+    this.showTypes = true;
+    const id = event;
+  
+    this.http.get(this.authSer.pathApi+ '/building_types_list/' + id ).subscribe(
+      res => {
+        console.log(res);
+        this.building_types = res[('building_types')];
+        
+        
+      },
+      err => {
+        console.log(err);
+        
+      }
+    );
+    
+  } 
+   typeNumber(event){
+
+    this.show_amount = true;
+  const id = event;
+  for (let i = 0,n =this.building_types.length; i < n; i++) {
+    if(id == this.building_types[i].id)
+    {
+      this.Amount = this.building_types[i].value; 
+    } 
+  } 
+  // this.counting(this.Amount);
+  }
+  // counting(x){
+
+  //   for (let i = 0,j = 1; i <= x-1; i++,j++) {
+  //     this.amount[i].index = j;
+  //     console.log(j);
+      
+  //     } 
+  // }
+  
+  // removeAmount(i)
+  // {
+  //  this.amount[i].value = true;
+  //   log
+  // }
+ 
+
+    onSubmitted(){
+      console.log('HERE',this.unitInfoForm.value);
+      if(this.editPageId) {
+        this.dashBoardSer.editItem(this.editPageId, this.unitInfoForm.value, 'unitsInformation').subscribe(
+          res => {
+            console.log(res);
+            this.toastr.success('تم التعديل بنجاح');
+            this.location.back();
+          },
+          err => {
+            console.log(err);
+            this.toastr.error('خطأ في الخادم ، رجاء المحارله لاحقا');
+          }
+        )
+      } else {
+        this.dashBoardSer.addItem( this.unitInfoForm.value , 'unitsInformation').subscribe(
+          res => {
+            console.log('ADD',res);
+            this.toastr.success('تم الإضافه بنجاح');
+            this.checkSaveclick = false;
+            this.location.back();
+          },
+          err => {
+            console.log(err);
+            this.checkSaveclick = false;
+            this.toastr.error('خطأ في الخادم ، حاول لاحقا');
+          }
+        );
+        }
+    }
+    
+  }
+

src/app/dashboard/unit-information/unit-information-list/unit-information-list.component.css

@@ -0,0 +1,30 @@
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+
+/* .centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+} */

src/app/dashboard/unit-information/unit-information-list/unit-information-list.component.html

@@ -0,0 +1,91 @@
+<div class="container">
+
+  <div class="row">
+    <div class="col-12">
+      <ul class="list-unstyled titileLi-w">
+        <li class="headingText-w">خدمه السكن  </li>
+        <li class="headingText-w activeLi-w" style="margin-right:5px">تسجيل معلومات المباني</li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="containerContent-w">
+    <div class="row">
+      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn"><i class="fas fa-plus marginFontAowsome-w"></i>إنشاء جديد</button>
+        <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn"><i class="fas fa-times marginFontAowsome-w"></i>حذف</button>
+      </div>
+      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <div class="form-group">
+          <input type="text" placeholder="البحث (اسم المبني او رمز المبنى)" class="form-control inputSearchTable-w" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+          <hr>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+          <div class="form-group">
+            <span class="spanSelect-w" style="margin-right:10px;">
+              <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+                <option value="5">5</option>
+                <option value="10">10</option>
+                <option value="15">15</option>
+                <option value="20">20</option>
+              </select>
+              من العناصر يتم عرضها
+            </span>
+          </div>
+        </div>
+        
+    </div>
+
+    <table class="table table-bordered" *ngIf="this.count != 0">
+      <thead class="headBackground-w">
+        <tr>
+          <th>
+            <div class="custom-control custom-checkbox">
+              <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+            </div>
+          </th>
+         
+          <th>اسم المجمع السكني</th>
+          <th>نوع المبنى</th>
+          <th>رقم المبنى</th>
+          <th>رمز المبنى</th>
+          <th>اسم المبنى</th>
+          <th>عدد الوحدات السكنية في المبنى</th>
+          <th>ملكية المبنى</th>
+          <th>فعال</th>
+
+          <th *ngIf="authSer.showEditBtn">تعديل</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+          <td>
+            <div class="custom-control custom-checkbox centerIneerItem">
+              <input type="checkbox" class="custom-control-input" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected();">
+              <!-- <label class="custom-control-label disblayBlock-w" for="{{tab.id}}" style="color:#2a2a2a"></label> -->
+            </div>
+          </td>
+          <td>{{data.housing_complex_name}}</td>
+          <td>{{data.building_type_name}}</td>
+          <td>{{data.building_number}}</td>
+          <td>{{data.building_code}}</td>
+          <td>{{data.building_name}}</td>
+          <td>{{data.building_units}}</td>
+          <td>{{data.building_property == 'governmental' ? 'حكومية' : data.building_property == 'rented' ? 'أجر' : 'NotFound'}}</td>
+          <td>{{data.status == '0' ? 'غير فعال' : data.status == '1' ? ' فعال' : 'not found'}}</td>
+        <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="col-12" *ngIf="this.count == 0" >
+    <!-- taaaaaaaaaaable -->
+    <h2 class="title"> لا يوجد بيانات لعرضها </h2>
+
+  </div>
+  <pagination-controls nextLabel="التالي" previousLabel="السابق" (pageChange)="onPageChange($event)" *ngIf="this.count != 0"></pagination-controls>
+  </div>
+</div>

src/app/dashboard/unit-information/unit-information-list/unit-information-list.component.ts

@@ -0,0 +1,278 @@
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+import { UserService } from '../../../shared/user.service';
+import { ToastrService } from 'ngx-toastr';
+
+
+@Component({
+  selector: 'app-unit-information-list',
+  templateUrl: './unit-information-list.component.html',
+  styleUrls: ['./unit-information-list.component.css']
+})
+export class UnitInformationListComponent implements OnInit {
+
+  dataList = [];
+  pages= [];
+  pageId: number;
+  Ids = [];
+  count: number;
+  perPagePagenation: number;
+  currentPage:number = 1;
+  filtterStatus = 'all';
+  selectedAll: any;
+  userLoginId:number;
+  serviceId:number;
+  dataTableNumber: number = 5;
+  absorpationListIds = [];
+  dataListIds = [];
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private modal: Modal,
+    private userSer: UserService,
+    private spinner: NgxSpinnerService,
+    public authSer: AuthServiceService,
+    private toastr: ToastrService,
+    private dashboardSer: DashboardService,
+    private http: HttpClient
+  ) { }
+
+  ngOnInit() {
+
+
+            //init the values of permision boolean
+   this.authSer.showAddBtn = false;
+   this.authSer.showDeleteBtn = false;
+   this.authSer.showEditBtn = false;
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+
+    this.route.params.subscribe(
+      (parmas: Params) => {
+        this.pageId =  +parmas['listPageId'];
+        localStorage.setItem('pageIdActive', parmas['listPageId']);
+        console.log(this.pageId);
+      }
+    );
+
+    this.route.parent.params.subscribe(
+      (params:Params) => {
+          this.userLoginId = params['userID'];
+          this.serviceId = params['serviceID'];
+         
+  
+          this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.pages = responce['pages'];
+              for(let i = 0; i< this.pages.length; i++) {
+                if(this.pages[i].id == 66){
+                  if(this.pages[i]['permissions'][0].name == 'building_information') {
+                    this.authSer.showAddBtn = true;
+                    this.authSer.showEditBtn = true;
+                    this.authSer.showDeleteBtn = true;
+                  } else {
+                    console.log('no permissions');
+                  }
+                } else {
+                  console.log('no events');
+                }
+              }
+              this.spinner.hide();
+            },
+            (error) => {console.log(error)}
+          );
+        }
+      );
+
+      console.log('current page',this.pageId)
+      this.dashboardSer.getListData(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
+        res => {
+          console.log('x',res);
+          this.dataList = res['building_informations'];
+          this.count = res['count'];
+          this.perPagePagenation = res['per_page'];
+        },
+        err => {
+          console.log(err);
+          
+        }
+
+      );
+
+  }
+
+  selectAll() {
+    console.log('selected alllllll');
+    for(let i = 0; i < this.dataList.length; i++){
+      this.dataList[i].selected = this.selectedAll;
+    }
+  }
+  
+  checkIfAllSelected() {
+    this.selectedAll = this.absorpationListIds.every(function(item:any) {
+      return item.selected == true;
+    });
+  }
+
+
+  filtterFunc(data) {
+    this.dataList =[];
+    this.absorpationListIds = [];
+    console.log(data.target.value);
+    const dataSearch = data.target.value;     
+    this.currentPage = 1;
+    console.log('search curent page', this.currentPage);
+    console.log('search page id', this.pageId);
+    this.dashboardSer.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      res => {
+        console.log(res);
+        this.dataList = res['building_informations'];
+        console.log('hey',this.dataList)
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+        console.log('filtter count', this.count);
+        console.log('filtter perPagePAgenation', this.perPagePagenation);
+      },
+      err => {
+        console.log(err);
+      }
+    );
+  };
+
+  onPageChange(pagenationNumber) {
+    this.spinner.show();
+    this.currentPage = pagenationNumber;
+    this.absorpationListIds = [];
+    console.log(pagenationNumber);
+    console.log(this.pageId);
+    this.dashboardSer.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+      res => {
+        console.log(res);
+        this.dataList = res['building_informations'];
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+        console.log('FFFFFF', this.absorpationListIds);
+        this.spinner.hide();
+      },
+      err => {
+        console.log(err);
+        this.spinner.hide();
+      }
+    );
+  }
+
+    //determine the list count from select element 
+onGetValue(event) {
+  this.spinner.show();
+  this.absorpationListIds = [];
+  this.dataTableNumber = event.target.value;
+  this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+    res => {
+      console.log(res);
+      this.absorpationListIds = res['building_informations'];
+      this.count = res['count'];
+      this.perPagePagenation = res['per_page'];
+      this.spinner.hide();
+    },
+    err => {
+      console.log(err);
+      this.spinner.hide();
+    }
+  );
+};
+
+onGetValueFiltter(event) {
+  console.log(event.target.value)
+  this.spinner.show();
+  this.dataList = [];
+  const typeId = event.target.value;
+  this.filtterStatus = event.target.value;
+  console.log(this.filtterStatus);
+  this.http.get(this.authSer.pathApi +'/page_list/' + this.pageId + '/' + this.currentPage + '/' + this.dataTableNumber + '/' + typeId).subscribe(
+    res => {
+      console.log(res);
+      this.dataList = res['building_informations'];
+      this.count = res['count'];
+      this.perPagePagenation = res['per_page'];
+      this.spinner.hide();
+      console.log('UrL>>', this.authSer.pathApi +'/page_list/' + this.pageId + '/' + this.currentPage + '/' + this.dataTableNumber + '/' + typeId)
+    },
+    err=> {
+      console.log(err);
+    }
+  );
+}
+
+onDelete() {
+
+  this.dataListIds = [];
+  for(let i = 0; i < this.dataList.length; i++) {
+    if(this.dataList[i].selected == true) {
+      this.dataListIds.push(this.dataList[i].id);
+    }
+  }
+  console.log(this.dataListIds);
+
+  if(this.dataListIds.length > 0) {
+    const dialogRef = this.modal.alert()
+    .size('sm')
+    .showClose(true)
+    .title('تأكيد الحذف')
+    .body(`
+        <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
+        `)
+    .open();
+
+      dialogRef.result
+      .then( result =>
+        this.dashboardSer.deleteItem(this.dataListIds , this.pageId).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم الحذف');
+            this.spinner.show();
+            this.dataList = [];
+             //get list data
+            this.dashboardSer.getListData(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.dataList = responce['building_informations'];
+                this.count = responce['count'];
+                this.perPagePagenation = responce['per_page'];
+                this.spinner.hide();
+              },
+              (error) => {
+                console.log(error);
+                this.spinner.hide();
+              }
+            );
+          },
+          (error) => {
+            console.log(error);
+            this.spinner.hide();
+            },
+          )
+      );
+  } else {
+    this.toastr.warning('لم يتم إختيار أي عنصر للمسح !');
+  }
+}
+onAdd() {
+  this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'unitsInformation']);
+}
+
+onEdit(editId: number) {
+  this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'unitsInformation/edit/' + editId]);
+}
+}

src/app/servicesItems/services.component.ts

@@ -278,6 +278,10 @@ getDataService(dataService){
             this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/definitionOfConvenats/' + this.pages[0].id]);            
            }else if (this.pages[0].id == 65){
             this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/recordInfoBuilding/' + this.pages[0].id]);            
+           }else if (this.pages[0].id == 66){
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/unitsInformation/' + this.pages[0].id]);            
+           }else if (this.pages[0].id == 67){
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/unitsBuildingInformation/' + this.pages[0].id]);            
            }
            
          },

src/app/shared/dashboard.service.ts

@@ -17,7 +17,14 @@ export class DashboardService {
     private spinner: NgxSpinnerService) { }
 
      //get hospitals list
-     getListData(pageId: number, currentPage: number, dataTableNumber: number){
+      getListUnit( currentPage: number, dataTableNumber: number, housing_complex_id: any,building_type_id: any,building_id: any){
+      this.spinner.show();
+        console.log('services ', currentPage);
+        console.log(this.authService.pathApi +'/units_list/'  + currentPage + '/' + dataTableNumber + '/' + housing_complex_id + '/' + building_type_id + '/' + building_id );
+        return this.http.get(this.authService.pathApi +'/units_list/'  + currentPage + '/' + dataTableNumber + '/' + housing_complex_id + '/' + building_type_id + '/' + building_id );
+    }
+
+    getListData(pageId: number, currentPage: number, dataTableNumber: number){
       this.spinner.show();
         console.log('services ', currentPage);
         console.log(this.authService.pathApi +'/page_list/' + pageId + '/' + currentPage + '/' + dataTableNumber + '/all');
@@ -35,6 +42,12 @@ export class DashboardService {
       }
     }
 
+    // getDataUSerSearchBarUnit(data,  pagenationNumber, currentPage: number, dataTableNumber: number, housing_complex_id: any,building_type_id: any,building_id: any) {
+     
+    //     return this.http.get(this.authService.pathApi +'/units_list/'  + currentPage + '/' + dataTableNumber + '/' + housing_complex_id + '/' + building_type_id + '/' + building_id +'/all/' + data);
+      
+    // }
+
     //if the page has filtter 
     searchFiltterPagenation(pageId: number, currentPage: number, dataTableNumber: number, typeFiltter: string){
       console.log(this.authService.pathApi + '/page_list' + '/' + pageId + '/' + currentPage + '/' + dataTableNumber + '/' + typeFiltter)
@@ -115,10 +128,14 @@ export class DashboardService {
         return this.http.post(this.authService.pathApi + '/add_housing_complex', data);
       }else if(addType == 'events') {
         return this.http.post(this.authService.pathApi + '/add_event' , data);
+      }else if(addType == 'unitsInformation') {
+        return this.http.post(this.authService.pathApi + '/add_building_information' , data);
+      }else if(addType == 'unitsBuildingInformation') {
+        return this.http.post(this.authService.pathApi + '/add_unit_information' , data);
       }
     }
 
-    //edit event 
+    //edit event  
     editItem(editId,dataEdit,editPageName){
       const editData = dataEdit;
       console.log(editId);
@@ -203,6 +220,10 @@ export class DashboardService {
         return this.http.post(this.authService.pathApi + '/edit_housing_complex', editData);
       }else if(editPageName == 'events') {
         return this.http.post(this.authService.pathApi + '/edit_event', editData);
+      }else if(editPageName == 'unitsInformation') {
+        return this.http.post(this.authService.pathApi + '/edit_building_information', editData);
+      }else if(editPageName == 'unitsBuildingInformation') {
+        return this.http.post(this.authService.pathApi + '/edit_unit_information', editData);
       }
     }
     
@@ -273,6 +294,10 @@ export class DashboardService {
         return this.http.get(this.authService.pathApi + '/get_housing_complex/' + pageId);
       }else if(typeGetData == 'events') {
         return this.http.get(this.authService.pathApi + '/get_event/' + pageId);
+      }else if(typeGetData == 'unitInformation') {
+        return this.http.get(this.authService.pathApi + '/get_building_information/' + pageId);
+      }else if(typeGetData == 'unitBuildingInformation') {
+        return this.http.get(this.authService.pathApi + '/get_unit_information/' + pageId);
       }
   }
     //delete event
@@ -349,6 +374,10 @@ export class DashboardService {
         return this.http.post(this.authService.pathApi + '/delete_housing_complex', {'housing_complex_ids' : dataIds});
       }else if (pageId == 8){
         return this.http.post(this.authService.pathApi + '/delete_events' , {'events_id' : dataIds});
+      }else if(pageId == 66) {
+        return this.http.post(this.authService.pathApi + '/delete_building_information', {'building_information_ids' : dataIds});
+      }else if(pageId == 67) {
+        return this.http.post(this.authService.pathApi + '/delete_unit_information', {'unit_information_ids' : dataIds});
       }