sdds

.vscode/launch.json

@@ -0,0 +1,18 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Program",
+            "program": "${workspaceFolder}/serve",
+            "preLaunchTask": "tsc: build - tsconfig.json",
+            "outFiles": [
+                "${workspaceFolder}/dist/out-tsc/**/*.js"
+            ]
+        }
+    ]
+}

src/app/External-Page/external-page-header/external-page-header.component.html

@@ -9,7 +9,7 @@
                                 <div class="dropdown">
                                     <button class="btn dropdown-toggle buttonW" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                         <img src="{{dataLoginUser.photo ? authSer.pathImg + dataLoginUser.photo : authSer.imgSrc}}" title="imageProfile" alt="" />
-                                        {{ dataLoginUser.name }} 
+                                        {{ dataLoginUser.name ? dataLoginUser.name : '' }} 
                                     </button>
                                     <div class="dropdown-menu" style="text-align:right" aria-labelledby="dropdownMenuButton"> 
                                         <button class="dropdown-item" style="cursor: pointer;" >

src/app/External-Page/external-page-header/external-page-header.component.ts

@@ -20,19 +20,25 @@ export class ExternalPageHeaderComponent implements OnInit {
     dataLoginUser = {
       name: '',
       photo: '',
+      id: '',
     }
 
   ngOnInit() {
 
+
     this.authSer.arabicTemplate = true;
     this.authSer.showDashboardHeader = false;
     this.authSer.setLocalLang(); //set languages icons
     this.currentDate = this.authSer.writeHijri(new Date(this.currentDate), 'ar', 'header');
     
     if(!this.authSer.isAuthenticated()) {
-      this.dataLoginUser.name = this.authSer.returnUserData().name;
-      this.dataLoginUser.photo = this.authSer.returnUserData().photo;
+      const userLoginData = JSON.parse(localStorage.getItem('userData'));
+      this.dataLoginUser.name = userLoginData ? userLoginData.name : '';
+      this.dataLoginUser.photo = userLoginData ? userLoginData.photo : '';
+      this.dataLoginUser.id = userLoginData ? userLoginData.id : null;
     }
+
+    console.log(this.dataLoginUser);
  
 
     this.authSer.footerData = [];
@@ -62,7 +68,7 @@ export class ExternalPageHeaderComponent implements OnInit {
   }
 
   onDashBoard() {
-    this.router.navigate(['services/' + this.authSer.dataLoginUser['id']]);
+    this.router.navigate(['services/' + this.dataLoginUser.id]);
   }
 
   goToHome() {
@@ -75,8 +81,7 @@ export class ExternalPageHeaderComponent implements OnInit {
   }
 
   onGetProfile() {
-    console.log('profile/'  + this.authSer.dataLoginUser['id']);
-    this.router.navigate(['auth/profile/'  + this.authSer.dataLoginUser['id']]);
+    this.router.navigate(['auth/profile/'  + this.dataLoginUser.id]);
   }
 
   //log out function

src/app/Internal-Page/internal-page-header/internal-page-header.component.html

@@ -11,7 +11,7 @@
                             <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
                                 <button class="buttonW" ngbDropdownToggle>
                                     <img src="{{dataLoginUser.photo ? authSer.pathImg + authSer.dataLoginUser.photo : authSer.imgSrc}}" title="imageProfile" alt="" />
-                                        {{ dataLoginUser.name }} 
+                                        {{ dataLoginUser.name ? dataLoginUser.name : '' }} 
                                 </button>
                   
                             <div class="dropdown-menu" style="text-align:right" ngbDropdownMenu>

src/app/Internal-Page/internal-page-header/internal-page-header.component.ts

@@ -26,6 +26,7 @@ export class InternalPageHeaderComponent implements OnInit {
      dataLoginUser = {
       name: '',
       photo: '',
+      id: '',
     }
     
   currentDate: any = Date.now();
@@ -40,14 +41,15 @@ export class InternalPageHeaderComponent implements OnInit {
      this.authSer.footerData = [];
      
      if(!this.authSer.isAuthenticated()) {
-      this.dataLoginUser.name = this.authSer.returnUserData().name;
-      this.dataLoginUser.photo = this.authSer.returnUserData().photo;
+      const userLoginData = JSON.parse(localStorage.getItem('userData'));
+      this.dataLoginUser.name = userLoginData ? userLoginData.name : '';
+      this.dataLoginUser.photo = userLoginData ? userLoginData.photo : '';
+      this.dataLoginUser.id = userLoginData ? userLoginData.id : null;
     }
 
     this.authSer.onGetFooterData('internal').subscribe(
       (responce) => {
         this.authSer.footerData = responce['footer'];
-        console.log(this.authSer.footerData);
       },
       (error) => {
         console.log(error);
@@ -55,11 +57,9 @@ export class InternalPageHeaderComponent implements OnInit {
     );
 
     this.authSer.setLocalLang();
-    console.log('tooooken', this.authSer.isAuthenticated());
     this.internalService.getParentData().subscribe(
       (responce) => {
         this.authSer.parentsPage = responce['parents'];
-        console.log('parents pageees', this.authSer.parentsPage);
       },
       (error) => {
         console.log(error);
@@ -69,9 +69,7 @@ export class InternalPageHeaderComponent implements OnInit {
     //this.spinner.show();
     this.authSer.showDashboardHeader = false;
     this.internalService.getParentData();
-    //console.log(this.checkTokenExpire);
-      //get profile data
-    //this.userservice.getUserDataProfile();
+   
 
     this.currentDate = this.authSer.writeHijri(new Date(this.currentDate), 'ar', 'header');
   }
@@ -81,7 +79,6 @@ export class InternalPageHeaderComponent implements OnInit {
   }
 
   onGetProfile() {
-    console.log('profile/'  + this.authSer.dataLoginUser['id']);
     this.router.navigate(['auth/profile/'  + this.authSer.dataLoginUser['id']]);
   }
 

src/app/auth-services/login/login.component.html

@@ -21,7 +21,7 @@
                       <a (click)="registerFun()" class="signUp-w" style="float: left; margin-left:10px; cursor: pointer">إنشاء حساب جديد</a>
                       <a routerLink="/page-not-found" class="forgetPassword-w" style="margin-right: 10px">نسيت كلمه المرور ؟</a>
                     </div>
-                    <button class="btn btn-success form-control" type="submit" [disabled]="!f.valid">الدخول</button>
+                    <button class="btn btn-success form-control" type="submit" [disabled]="!f.valid || saveDisabled">الدخول</button>
                   </form>
                 </div>
               </div>

src/app/auth-services/login/login.component.ts

@@ -27,6 +27,7 @@ export class LoginComponent implements OnInit {
   @ViewChild('f') loginFormData: NgForm;
 
   screenHeight:any;
+  saveDisabled: boolean = false;
 
   @HostListener('window:resize', ['$event'])
   getScreenSize(event?) {
@@ -58,14 +59,17 @@ export class LoginComponent implements OnInit {
   onSubmitedForm(){
     console.log(this.loginFormData.value);
     const dataForm = this.loginFormData.value;
+    this.saveDisabled = true;
+
     this.authSer.login(dataForm).subscribe(
       (responce: Response) => {
         localStorage.setItem('token', responce['token']);
         localStorage.setItem('userType', responce['user'].type);
         localStorage.setItem('adminId', responce['user'].adminstration_id);
-
+        this.saveDisabled = false;
         const id = responce['user'].id;
         this.authSer.setDataUser(responce);
+        localStorage.setItem('userData', JSON.stringify(responce['user']));
         this.loginFormData.reset();
         this.router.navigate(['/services/' + id]);
         // this.location.back();

src/app/dashboard/application-for-housing/application-for-housing.component.css

@@ -0,0 +1,490 @@
+.imgContainer {
+    width: 200px;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px auto;
+}
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    display: inline-block;
+    border-radius: 0 0 20px 20px;
+    position: absolute;
+    right: 40%;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    bottom: 0;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: #00a99d;
+    color: #fff;
+}
+
+.inputfile + label {
+	cursor: pointer; /* "hand" cursor */
+}
+
+.inputfile:focus + label {
+	outline: 1px dotted #000;
+	outline: -webkit-focus-ring-color auto 5px;
+}
+
+.title {
+    font-size: 16px;
+    text-align: right;
+    margin: 10px 0;
+    background-color: #888;
+    width: 200px;
+    padding: 9px;
+    border-radius: 5px 5px 0 0;
+    margin-bottom: 0;
+    margin-right: 2px;
+    color: #fff;
+}
+
+.wrapper {
+    width: 100%;
+    display: inline-block;
+    padding: 10px 0;
+    background: #f5f5f5;
+    border: 1px solid #bdbdbd;
+    border-radius: 5px;
+}
+
+
+.wrapper .inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+.wrapper .iconUpload-w {
+    width: 200px;
+    height: 37px;
+    border-radius: 5px;
+    font-size: 1.25em;
+    font-weight: 700;
+    display: inline-block;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 0 10px;
+    display: contents;
+    right: 75px;
+}
+
+.wrapper .deleteRow-w {
+    width: 100px !important;
+    padding: 7px 8px !important;
+    cursor: pointer !important;
+    margin: 1px 0 !important;
+}
+.wrapper .table td, .table th {
+    padding: 5px 15px !important;
+    width: 150px !important;
+}
+
+.wrapper .table tbody tr:nth-child(odd):hover {
+    color: #bda380 !important;
+}
+
+.wrapper .table tbody tr:nth-child(even):hover {
+    color: #bda380 !important;
+}
+
+
+.check {
+    float: right;
+    margin-top: 3px;
+    margin-right: 10px;
+    width: 20px;
+    height: 20px;
+}
+
+
+.disabledDiv {
+    pointer-events: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color:  #e9ecef
+}
+
+
+.checkReport {
+    display: block;
+}
+
+.searchEmp {
+    width: 85%;
+    float: right;
+}
+
+@media(max-width: 767px) {
+
+    .searchEmp {
+        width: 100%;
+        float: right;
+    }
+}
+.numberReport-s {
+    width: 83%;
+    float: right;
+}
+
+.buttonS {
+    float: left;
+}
+
+.userForm-w {
+    width: 100%;
+    padding: 20px 0;
+    margin-top: -6px;
+    direction: rtl;
+    font-family: 'Cairo', sans-serif;
+}
+
+input,select {
+    font-size: 12px; 
+    background-color: #fff;
+    border: 2px solid #bda380;
+}
+
+/* input.ng-invalid.ng-touched {
+    border: 2px solid #ccc;
+}
+
+input.ng-invalid {
+    border: 2px solid #ccc;
+}
+
+select.ng-invalid{
+    border: 2px solid #ccc;
+} */
+.custom-radio .custom-control-label::before{
+	    border: 1px solid #b28c5e;
+}
+.custom-radio .custom-control-input:checked~.custom-control-label::before{
+	background-color: #906635;
+	    border: 1px solid #fff;
+}
+
+.formfieldset{
+	border: 1px solid #61606073;
+    width: 100%;
+	border-radius: 3px;
+	    margin-top: 40px;
+    background-color: #a5a3a31a;
+}
+.formfieldset legend{
+	    float: right;
+}
+.formfieldset legend span{
+    width: auto !important;
+    font-size: 15px;
+    border: 1px solid #616060;
+    padding: 2px 15px;
+    background-color: #616060;
+    float: right;
+    margin: -15px 14px 0px 0px;
+    border-radius: 3px;
+    color: #ffffff;
+}
+.imgProfile {
+    width: 100%;
+    border-radius: 20px 20px 0 0;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+
+}
+
+.imgContainer {
+    width: 200px;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px auto;
+}
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    display: inline-block;
+    border-radius: 0 0 20px 20px;
+    position: absolute;
+    right: 40%;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    bottom: 0;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+/* .inputfile + label {
+    width: 100%;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    background-color: transparent;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 0 0 20px 20px;
+} */
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: #00a99d;
+    color: #fff;
+}
+
+.inputfile + label {
+	cursor: pointer; /* "hand" cursor */
+}
+
+.inputfile:focus + label {
+	outline: 1px dotted #000;
+	outline: -webkit-focus-ring-color auto 5px;
+}
+
+.table .fileName-w {
+    position: absolute;
+    bottom: -3px;
+    right: 120px;
+}
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}
+
+
+.regesterBtn-w {
+    margin:  20px 10px;
+    float: right;
+}
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}
+
+.formStyle{
+    border: 1px solid #ccc;
+    border-top: 4px solid #bda380;
+    padding: 20px;
+    margin: 0 auto
+}
+
+
+
+
+
+.titileLi-w li {
+    margin: 0 5px;
+}
+
+.errorMessage-w {
+    font-size: 14px;
+    text-align: right;
+    margin: 5px;
+    color: red;
+}
+
+
+.title {
+    font-size: 16px;
+    text-align: right;
+    margin: 10px 0;
+    background-color: #888;
+    width: 200px;
+    padding: 9px;
+    border-radius: 5px 5px 0 0;
+    margin-bottom: 0;
+    margin-right: -12px;
+    color: #fff;
+}
+.statusBtn-w {
+    width: 145px;
+    margin: 5px 7px;
+    cursor: pointer;
+    float: right;
+    margin-top: 25px;
+    margin-bottom: 10px;
+}
+
+/* file table style */
+
+
+.wrapper {
+    width: 100%;
+    display: inline-block;
+    padding: 10px 0;
+    background: #f5f5f5;
+    border: 1px solid #bdbdbd;
+    border-radius: 5px;
+}
+
+
+.wrapper .inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+.wrapper .iconUpload-w {
+    width: 200px;
+    height: 37px;
+    border-radius: 5px;
+    font-size: 1.25em;
+    font-weight: 700;
+    display: inline-block;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 0 10px;
+    display: contents;
+    right: 75px;
+}
+
+.wrapper .deleteRow-w {
+    width: 100px !important;
+    padding: 7px 8px !important;
+    cursor: pointer !important;
+    margin: 1px 0 !important;
+}
+.wrapper .table td, .table th {
+    padding: 5px 15px !important;
+    width: 150px !important;
+}
+
+.wrapper .table tbody tr:nth-child(odd):hover {
+    color: #bda380 !important;
+}
+
+.wrapper .table tbody tr:nth-child(even):hover {
+    color: #bda380 !important;
+}
+
+.departmentHeading-w {
+    font-size: 18px;
+    float: right;
+}
+
+.departmentHeading-w span{
+    color: red;
+}
+
+.titleStatus {
+    font-size: 19px;
+    margin: 2px 14px;
+    color: green;
+}
+
+.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;
+}
+
+.wrapper .table td, 
+.table th {
+    font-size: 15px;
+}
+
+.buttonW {
+    background: transparent;
+    color: #b19877;
+    font-weight: bold;
+    border: none !important;
+    border-color: transparent;
+    padding: 5px 20px !important;
+}
+
+.btn-secondary.active, .btn-secondary:active, .show>.btn-secondary.dropdown-toggle {
+    background-color: transparent;
+    border: none;
+}
+
+.btn-secondary.focus, .btn-secondary:focus {
+    box-shadow: none;
+}
+
+.show>.btn-secondary.dropdown-toggle::after {
+    transform: rotate(-180deg); 
+}
+    
+
+
+/* .centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+} */
+
+/* start media query style */
+
+@media(max-width: 767px){
+    .formStyle {
+        padding: 20px;
+    }
+
+    input,select {
+        font-size: 12px; 
+    }
+}
+
+@media(min-width: 767px) and (max-width: 991px){
+    .formStyle {
+        padding: 20px;
+    }
+    input,select {
+        font-size: 12px; 
+    }
+}
+

src/app/dashboard/application-for-housing/application-for-housing.component.html

@@ -0,0 +1,128 @@
+<div class="addRequest-w">
+  <div class="container">
+
+    <div class="row" style="margin-bottom:8px;">
+      <div class="col-12">
+        <ul class="list-unstyled titileLi-w">
+          <li class="headingText-w" style="cursor: pointer;" (click)="authService.perviousLocation()">خدمه التدريب</li>
+          <li class="headingText-w activeLi-w" style="margin-right:5px">  طلب سكن</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="contentBorder-w">
+
+      <form (ngSubmit)="onSubmitted()" #f="ngForm">
+        <div class="row" *ngIf="applyForOther">
+          <div class="col-12 col-md-4">
+            <div class="form-group">
+              <input type="number" placeholder="" class="form-control numberReport-s" [(ngModel)]="searchValue" [ngModelOptions]="{standalone: true} "/>
+              <button type="button" class="btn btn-success buttonS" (click)="SearchOnUser()">أبحث</button>
+            </div>
+          </div> 
+        </div>
+        <div class="row">
+          <div class="col-12" *ngIf="showdetails" >
+            <h2 class="title" *ngIf="!applyForOther">بيانات مقدم الطلب</h2>
+            <h2 class="title" *ngIf="applyForOther">بيانات صاحب الطلب</h2>
+            <div class="row">
+              <div class="col-12">
+                <div class="wrapper">
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label  style="float: right;margin-right: 5px">رقم الهوية</label>
+                      <input type="text" placeholder="رقم الهوية" class="form-control" name="id_number" [ngModel]="dataForm.id_number" [disabled]="true" />
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="name"  style="float: right;margin-right: 5px">الاسم</label>
+                      <input type="text" placeholder="الاسم" class="form-control" name="name" [ngModel]="dataForm.name" [disabled]="true" />
+                    </div>
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                        <div class="form-group">
+                          <label  style="float: right;margin-right: 5px">رقم الوظيفي</label>
+                          <input type="text" placeholder="" class="form-control" name="functional_number" [ngModel]="dataForm.functional_number" [disabled]="true" />
+                        </div>
+                      </div>
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                      <div class="form-group">
+                        <label for="phoneNum"  style="float: right;margin-right: 5px"> الهاتف </label>
+                        <input type="number" placeholNeedder=" الهاتف" class="form-control" name="phoneNum" [ngModel]="dataForm.phoneNum" [disabled]="true" />
+                      </div>  
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                      <div class="form-group">
+                          <label for="email"  style="float: right;margin-right: 5px">البريد الالكتروني</label>
+                          <input type="email" placeholder="" class="form-control" name="email" [ngModel]="dataForm.email" [disabled]="true" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12" *ngIf="showdetails">
+              <h2 class="title">المرفقات</h2>
+              <div class="row">
+                <div class="col-12">
+                  <div class="wrapper"> 
+                    <div class="col-12">
+                      <button type="button" class="btn btn-default" (click)="plusImage()" style="margin:20px 0; float:right;">إضافه مرفق</button>
+                    </div>
+                    
+                    <table class="table table-bordered">
+                      <thead class="headBackground-w">
+                        <tr>
+                          <th> إسم المرفق</th>
+                          <th>رفع الملف ( بصيغه pdf )</th>
+                          <!-- <th>عرض الملف</th> -->
+                          <th>حذف</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr style="text-align:center;" *ngFor="let file of files; let i = index">
+                            <td><input type="text" class="form-control" placeholder="إسم الملف" [(ngModel)]="file.title" [ngModelOptions]="{standalone: true}"/></td>
+                            <td style="position: relative;">
+                                <input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)"/>
+                                <label for="file{{i}}" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+                                <span class="fileName-w" *ngIf="file.nameFile" style="color:green"> <i class='fas fa-check'style=" float: left; padding-top: 4px; "></i>
+                                </span>
+                              </td>
+                              <!-- <td><a href="{{authSer.pathImg + file.nameFile}}" target="_blank"><i class="fas fa-download"></i></a></td> -->
+                              <td><button type="button" class="btn btn-danger form-control deleteRow-w" (click)="onDeleteRow(i)">حذف</button></td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                      <div class="row">
+                          <div class="col-12 col-md-6">
+                            <div class="form-group">
+                              <input type="checkbox" class="form-check-input checkReport" name="report" id="report" [checked]="!saveTherequist" required (change)="saveTherequist = !saveTherequist">
+                              <label class="form-check-label" for="report" style="margin: 0 20px; float: right;"> أقبل الشروط و الأحكام </label>
+                            </div>
+                          </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+             
+            <div class="row">
+              <div class="col-12">
+                  <button type="submit" class="btn btn-success rightW"  [disabled]="send" >حفظ</button>
+                <button type="button" class="btn btn-warning rightW" (click)="authService.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
+              </div>
+            </div>
+          </div>
+      </form>
+      
+   </div>
+ </div>
+</div>
+
+
+                
+  
+            
+

src/app/dashboard/application-for-housing/application-for-housing.component.ts

@@ -0,0 +1,256 @@
+import { NgxSpinnerService } from 'ngx-spinner';
+
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { ToastrService } from 'ngx-toastr';
+import { Location, formatDate } from '@angular/common';
+
+import { UserService } from 'src/app/shared/user.service';
+import { DashboardService } from 'src/app/shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { AuthServiceService } from 'src/app/shared/auth-service.service';
+
+@Component({
+  selector: 'app-application-for-housing',
+  templateUrl: './application-for-housing.component.html',
+  styleUrls: ['./application-for-housing.component.css']
+})
+export class ApplicationForHousingComponent implements OnInit {
+  departmentUserLoginId: any;
+
+  constructor(
+    private route: ActivatedRoute, 
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private dashBoardSer: DashboardService,
+    private spiner: NgxSpinnerService,
+    private location: Location,
+    public authService: AuthServiceService,
+    private userService: UserService,
+    private router: Router
+  ) { }
+  subLocationList = [];
+  checkSaveClick: boolean = false;
+  bindingDateSplitStart;
+  checked : boolean = false;
+  pageId: number;
+  uploaded: boolean = false;
+  disabledVal: boolean = true;
+  serviceId: number;
+  userId: number = 0;
+  search: any;
+  reportVal:boolean = false;
+  saveTherequist: boolean = false;
+  whosend = '';
+  applyForOther : boolean = false;
+  showdetails : boolean = false;
+  showSearch: boolean = false;
+  send: boolean = true;
+  searchValue = null;
+  applyForm = {
+    employee_id: null,
+    files:[]
+  };
+
+  dataForm = {
+    id_number: '',
+    name : '',
+    phoneNum: '',
+    functional_number:'',
+    email:''
+  };
+
+  files = [{
+    title : null,
+    file: null,
+    file_type: null,
+    nameFile: null,
+  }];
+
+  ngOnInit() {
+      //init the values of permision boolean
+      this.authService.showAddBtn = false;
+      this.authService.showDeleteBtn = false;
+      this.authService.showEditBtn = false;
+      //show / hide notification search in header
+      this.authService.notificationLogin = true;
+      this.authService.showSearchHeader = false;
+      this.authService.showHeaderLogin = false;
+      this.authService.showHeaderDashBoard = true;
+      this.authService.showDashboardHeader = true;
+      this.authService.internalHeader = false;
+
+      this.route.params.subscribe(
+        (parmas: Params) => {
+          this.pageId =  +parmas['reportId'];
+          localStorage.setItem('pageIdActive', parmas['reportId']);
+          this.whosend = parmas['comefrom'];
+        }
+      );
+      this.route.parent.params.subscribe(
+        (params:Params) => {
+          this.serviceId = params['serviceID'];
+          this.userId = params['userID'];
+        }
+      );
+
+      if(this.whosend == 'new'){
+      this.http.get(this.authService.pathApi + '/profile').subscribe(
+        res => {
+         this.dataForm.id_number = res['user'].identity_number;
+         this.dataForm.name = res['user'].name;
+         this.dataForm.phoneNum = res['user'].phone;
+         this.applyForm.employee_id = res['user'].id;
+          console.log(this.applyForm.employee_id);
+
+         this.dataForm.functional_number = res['user'].functional_number;
+         this.dataForm.email = res['user'].email;
+         console.log('dsf',res)
+          this.showdetails = true;
+          this.applyForOther = false;
+          this.send = false;
+        },
+        (error) => {console.log(error)},
+      );
+      }else{
+        this.showSearch = true;
+      }
+      
+      if(this.whosend == 'new'){
+      this.http.get(this.authService.pathApi + '/get_employee_request_status/' +   this.userId).subscribe(
+        res => {
+          console.log('ser' , res);
+          const status = res['status']
+          if(status == 'employee free to make new request'){
+            this.location.back();
+            this.toastr.warning('لديك طلب بالفعل');
+            
+          }else if(status == 'employee free to make new request'){
+            console.log('Done');
+            
+          }
+        },
+        err => {
+            console.log(err);
+            
+        }
+      );
+      }
+  }
+
+  plusImage() {
+    this.files.push({
+      title: null,
+      file: null,
+      file_type: null,
+      nameFile: null,
+    });
+    console.log('files after plus ', this.files);
+  }
+
+   //delete row from table
+ onDeleteRow(index:number) {
+  this.files.splice(index , 1);
+  console.log('files after delete ',this.files);
+}
+  //change file 
+  onFileChanges(event, index:number) {
+    console.log(event);
+    console.log(index);
+    this.uploaded = true;
+    this.files[index].nameFile = event[0].name.substring(0,20) + '....';
+    this.files[index].file = event[0].base64;
+    this.files[index].file_type = event[0].type.split('/')[1];
+      console.log(this.files);
+      console.log('files after change ',this.files);
+  }
+
+  SearchOnUser(){
+    const key = this.searchValue
+    console.log(key);
+      console.log('here');
+      
+    this.http.get(this.authService.pathApi + '/find_user/' + key ).subscribe(
+      res => {
+        console.log('user',res);
+        if(res['user'] == null){
+          this.showdetails = false;
+        }else{
+        this.dataForm.id_number = res['user'].identity_number;
+         this.dataForm.name = res['user'].name;
+         this.dataForm.phoneNum = res['user'].phone;
+         this.applyForm.employee_id = res['user'].id;
+         this.dataForm.functional_number = res['user'].functional_number;
+         this.dataForm.email = res['user'].email;
+         this.applyForOther = true;
+         this.showdetails = true;
+         this.http.get(this.authService.pathApi + '/get_employee_request_status/' +   this.applyForm.employee_id).subscribe(
+          res => {
+            console.log('ser' , res);
+            const status = res['status']
+            if(status == 'employee free to make new request'){
+              this.toastr.warning('لديه طلب بالفعل');
+              this.applyForOther = false;
+              this.showdetails = false;
+            }
+          },
+          err => {
+              console.log(err);
+              
+          }
+        );
+
+        }
+      },
+      err => {
+        console.log(err);
+        this.showdetails = false;        
+      }
+    );
+    // }
+  }
+  
+  onSubmitted(){
+    for (let i = 0; i < this.files.length; i++) {
+      if(this.files[i].file_type){
+        this.files[i].file_type = this.files[i].file_type.toLowerCase();
+      }
+      if(this.files[i].file != null && this.files[i].title == null){
+       this.toastr.warning('ادخل عنوان الملف رقم ' + (i+1) );
+       this.checked = true;
+      }else if(this.files[i].file == null && this.files[i].title != null){
+        this.files.splice(i , 1);
+      }else if(this.files[i].file == null && this.files[i].title == null){
+        this.files.splice(i , 1);
+       } else {
+       delete this.files[i].nameFile;
+        this.applyForm.files.push(this.files[i]);
+      }
+    }
+    if(!this.checked){
+     
+
+    console.log(this.applyForm);
+     this.http.post(this.authService.pathApi + '/add_housing_request' , this.applyForm )
+      .subscribe(
+         res => {
+           console.log(res);
+           this.checked = false;
+           this.toastr.success('تم حفظ الطلب ');
+          //  this.router.navigate(['/service/' + this.userId + '/' +  this.serviceId + '/followCommunicationList/58']);
+          this.location.back();
+          },
+          err => {
+           console.log(err)
+           this.toastr.error('حدث خطأ في الاتصال ');
+          }
+       );
+    }else{
+      console.log('i cant send the request');
+    }
+  
+    }
+
+
+}

src/app/dashboard/dashboard-routing.ts

@@ -105,6 +105,17 @@ 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';
+import { LinkUnitToCovenantsListComponent } from './link_unit_to_covenants/link-unit-to-covenants-list/link-unit-to-covenants-list.component';
+import { LinkUnitToCovenantsAddComponent } from './link_unit_to_covenants/link-unit-to-covenants-add/link-unit-to-covenants-add.component';
+import { ApplicationForHousingComponent } from './application-for-housing/application-for-housing.component';
+import { ViewRequestsForAdminstrationListComponent } from './view_requests_for_adminstration/view-requests-for-adminstration-list/view-requests-for-adminstration-list.component';
+import { ViewRequestsForAdminstrationDetailsComponent } from './view_requests_for_adminstration/view-requests-for-adminstration-details/view-requests-for-adminstration-details.component';
+import { ViewRequestsForTenantComponent } from './view_requests_for_tenant/view-requests-for-tenant/view-requests-for-tenant.component';
+import { ViewRequestsForTenantDetailsComponent } from './view_requests_for_tenant/view-requests-for-tenant-details/view-requests-for-tenant-details.component';
     
 const dashboardRouting: Routes = [
     {path: 'service/:userID/:serviceID', component: ServiceItemComponent, canActivate: [AuthGuard], children: [
@@ -252,6 +263,23 @@ 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]},
+    {path: 'linkUnitToCovenants/:listPageId', component: LinkUnitToCovenantsListComponent, canActivate: [AuthGuard]},
+    {path: 'linkUnitToCovenants', component: LinkUnitToCovenantsAddComponent, canActivate: [AuthGuard]},
+    {path: 'linkUnitToCovenants/edit/:listPageEditId', component: LinkUnitToCovenantsAddComponent, canActivate: [AuthGuard]},
+    {path: 'applicationForHousing/:reportId/:comefrom', component: ApplicationForHousingComponent, canActivate: [AuthGuard] },
+    {path: 'viewRequestsForAdminstration/:listPageId', component: ViewRequestsForAdminstrationListComponent, canActivate: [AuthGuard]},
+    {path: 'viewRequestsForAdminstrationDetails/:detailsId', component: ViewRequestsForAdminstrationDetailsComponent, canActivate: [AuthGuard]},
+    {path: 'viewRequestsForTenant/:listPageId', component: ViewRequestsForTenantComponent, canActivate: [AuthGuard]},
+    {path: 'viewRequestsForTenantDetails/:detailsId', component: ViewRequestsForTenantDetailsComponent, canActivate: [AuthGuard]},
+    
+    
+    //ViewRequestsForTenantDetailsComponent
     ]},
 ];
 

src/app/dashboard/dashboard.module.ts

@@ -137,6 +137,17 @@ 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';
+import { LinkUnitToCovenantsListComponent } from './link_unit_to_covenants/link-unit-to-covenants-list/link-unit-to-covenants-list.component';
+import { LinkUnitToCovenantsAddComponent } from './link_unit_to_covenants/link-unit-to-covenants-add/link-unit-to-covenants-add.component';
+import { ApplicationForHousingComponent } from './application-for-housing/application-for-housing.component';
+import { ViewRequestsForAdminstrationListComponent } from './view_requests_for_adminstration/view-requests-for-adminstration-list/view-requests-for-adminstration-list.component';
+import { ViewRequestsForAdminstrationDetailsComponent } from './view_requests_for_adminstration/view-requests-for-adminstration-details/view-requests-for-adminstration-details.component';
+import { ViewRequestsForTenantComponent } from './view_requests_for_tenant/view-requests-for-tenant/view-requests-for-tenant.component';
+import { ViewRequestsForTenantDetailsComponent } from './view_requests_for_tenant/view-requests-for-tenant-details/view-requests-for-tenant-details.component';
 
 
 
@@ -250,6 +261,17 @@ import { RecordInfoBuildingAddComponent } from './record-info-building/record-in
         DefinitionOfCovenantsAddComponent,
         RecordInfoBuildingListComponent,
         RecordInfoBuildingAddComponent,
+        UnitInformationListComponent,
+        UnitInformationAddComponent,
+        UnitBuildingInformationListComponent,
+        UnitBuildingInformationAddComponent,
+        LinkUnitToCovenantsListComponent,
+        LinkUnitToCovenantsAddComponent,
+        ApplicationForHousingComponent,
+        ViewRequestsForAdminstrationListComponent,
+        ViewRequestsForAdminstrationDetailsComponent,
+        ViewRequestsForTenantComponent,
+        ViewRequestsForTenantDetailsComponent,
     
     ],
     imports: [

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

@@ -14,33 +14,27 @@
     <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 for="name" style="float: right; margin-right: 5px">اسم التصنيف<span class="spanReqired-w">*</span></label>
-              <input type="text" class="form-control" id="name" name="name" placeholder="اسم التصنيف" ngModel [ngModel]="formData.name" required/>
-            </div>
-          </div>
-                
-          <!-- <div class="col-12 col-sm-12 col-md-4">
-            <div class="form-group">
-              <label for="category_id" style="float: right; margin-right: 5px">اسم المادة او العهدة<span class="spanReqired-w">*</span></label>
-              <input type="number" class="form-control" id="category_id" name="category_id" placeholder="اسم المادة او العهدة	" ngModel [ngModel]="formData.category_id" 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="category_id" [ngModel]="formData.category_id" required>
-                <option *ngFor="let category of categories" [value]="category.id">{{category.name}}</option>
-              </select>
-            </div>
-          </div>
+              <div class="col-12 col-sm-12 col-md-4">
+                <div class="form-group">
+                    <label for="name" style="float: right; margin-right: 5px">اسم التصنيف<span class="spanReqired-w">*</span></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>
+                </div>
+              </div>
+              <div class="col-12 col-sm-12 col-md-4">
+                <div class="form-group">
+                  <label style="float: right; margin-right: 5px">اسم المادة او العهدة<span class="spanReqired-w">*</span></label>
+                  <input type="text" class="form-control" id="name" name="name" placeholder=" اسم المادة او العهدة" ngModel [ngModel]="formData.name" required/>
+               </div>
+              </div>
+          
+          
 
           <div class="col-12 col-sm-12 col-md-4">
             <div class="form-group">
               <label for="amount" style="float: right; margin-right: 5px">العدد الموجود	<span class="spanReqired-w">*</span></label>
-              <input type="number" class="form-control" id="amount" name="amount" placeholder="العدد الموجود		" ngModel [ngModel]="formData.amount" required/>
+              <input type="number" class="form-control" id="amount" name="amount" placeholder="العدد الموجود" min="1" ngModel [ngModel]="formData.amount" required/>
             </div>
           </div>
 

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

@@ -40,7 +40,7 @@ export class DefinitionOfCovenantsAddComponent implements OnInit {
     name: '',
     category_id:'',
     amount:'',
-    status: '',
+    status: '1',
   }
 
   ngOnInit() {

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

@@ -116,18 +116,18 @@ export class DefinitionOfCovenantsListComponent implements OnInit {
         );
 
   }
-  selectAll() {
-    console.log('selected alllllll');
-    for(let i = 0; i < this.dataList.length; i++){
+   //make all checkbox of user checked 
+   selectAll() {
+    for (var i = 0; i < this.dataList.length; i++) {
       this.dataList[i].selected = this.selectedAll;
     }
-  }
-  
+  };
+
   checkIfAllSelected() {
-    this.selectedAll = this.absorpationListIds.every(function(item:any) {
+    this.selectedAll = this.dataList.every(function(item:any) {
       return item.selected == true;
     });
-  }
+  };
   filtterFunc(data) {
     this.dataList =[];
     this.absorpationListIds = [];

src/app/dashboard/header/header.component.html

@@ -7,19 +7,12 @@
             <div class="notificationDiv-w">
                 <div class="col">
                   <div ngbDropdown class="d-inline-block" style="float: right; direction: ltr;">
-                      <!-- <button class="btn btn-outline-primary buttonW" id="dropdownBasic1" ngbDropdownToggle><img class="img" src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="image">
-                        {{authSer.dataLoginUser['name']}}</button> -->
-                      <!-- <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="listDropMenu-w">
-                          <button class="dropdown-item" style="cursor: pointer" (click)="onGetProfile()">صفحتي</button>
-                          <button class="dropdown-item" style="cursor: pointer" (click)="onInternalPage()">البوابه الداخليه</button>
-                          <button class="dropdown-item" style="cursor: pointer" (click)="onLogout()">تسجيل الخروج</button>
-                      </div> -->
                       <ul class="list-unstyled notificationList-w" *ngIf="!authSer.isAuthenticated()">
                           <li class="profileData-w">
                             <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
                                 <button class="buttonW" ngbDropdownToggle>
                                     <img src="{{dataLoginUser.photo ? authSer.pathImg + dataLoginUser.photo : authSer.imgSrc}}" title="imageProfile" alt="" />
-                                        {{dataLoginUser.name}} 
+                                      {{dataLoginUser.name ? dataLoginUser.name : 'user' }} 
                                 </button>
                   
                             <div class="dropdown-menu" style="text-align:right" ngbDropdownMenu>
@@ -28,10 +21,7 @@
                                 <i class="fas fa-bell"></i>
                                 <span>الاشعارات</span>
                                 </button>
-                    <!-- <button class="dropdown-item" style="cursor: pointer;" >
-                       <i class="fas fa-comments"></i>
-                       <span>رسائل</span>
-                    </button> -->
+                 
                                 <button class="dropdown-item" style="cursor: pointer;" (click)="onGetProfile()">
                                     <i class="fas fa-user-alt"></i>
                                     <span>ملفي</span>

src/app/dashboard/header/header.component.ts

@@ -24,6 +24,7 @@ export class HeaderComponent implements OnInit {
   dataLoginUser = {
     name: '',
     photo: '',
+    id: '',
   }
 
   ngOnInit() {
@@ -34,8 +35,14 @@ export class HeaderComponent implements OnInit {
 
     this.authSer.checkExternalFooter = false;
 
-    this.dataLoginUser.name = this.authSer.returnUserData().name;
-    this.dataLoginUser.photo = this.authSer.returnUserData().photo;
+    if(!this.authSer.isAuthenticated()) {
+      const userLoginData = JSON.parse(localStorage.getItem('userData'));
+      this.dataLoginUser.name = userLoginData ? userLoginData.name : '';
+      this.dataLoginUser.photo = userLoginData ? userLoginData.photo : '';
+      this.dataLoginUser.id = userLoginData ? userLoginData.id : null;
+    }
+
+    console.log(this.dataLoginUser);
 
     if(this.authSer.checkExternalFooter) {
     } else {

src/app/dashboard/link_unit_to_covenants/link-unit-to-covenants-add/link-unit-to-covenants-add.component.css

@@ -0,0 +1,12 @@
+.category-amount {
+    width: 100%;
+    display: inline-block;
+    padding: 20px 0;
+}
+
+.custom-control-input {
+    z-index: 1;
+    opacity: 1;
+    width: 20px;
+    height: 20px;
+}

src/app/dashboard/link_unit_to_covenants/link-unit-to-covenants-add/link-unit-to-covenants-add.component.html

@@ -0,0 +1,114 @@
+<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)="getBuildingType($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 " (input)="getUnit($event.target.value)" 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"  *ngIf="isBuilding">
+                  <div class="form-group">
+                      <label style="float: right; margin-right: 5px">رقم الوحدة </label>
+                      <select class="form-control" name="unit_id" [(ngModel)]="formData.unit_id " (input)="showcovenant_categories()"   required>
+                        <option *ngFor="let unit of units" [value]="unit.id" >{{unit.unit_number}}</option>
+                      </select>
+                  </div>
+                </div>
+             </div>
+            <div class="row" *ngIf="isConvenat"> 
+             <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="category_id" [(ngModel)]="categoryId" (input)="covenant($event.target.value)" required>
+                  <option *ngFor="let unit of covenant_categories" [value]="unit.id" >{{unit.name}}</option>
+                </select>
+              </div>
+            </div>   
+          </div>
+          <div class="row" *ngIf="isConvenat">
+            <div class="col-12 col-sm-12 col-md-4">
+              <div class="category-amount">
+                <div class=row>
+                  <div  *ngFor="let category of formData.covenants">
+                    <div *ngFor="let category_conv of category.covenants_data let i = index">
+                      <div>
+                          <div class="col-6"  *ngIf="categoryId == category_conv.category_id">
+                              <div class=form-group>
+                                <div class="custom-control custom-checkbox centerIneerItem">
+                                  <input type="checkbox" class="custom-control-input checkboxx" id="{{category_conv.id}}" [(ngModel)]="category_conv.selected" [value]='category_conv.id' name="{{category_conv.id}}" style="cursor: pointer;" (input)="checked($event.target.value)">
+                                  <label class="custom-control-label disblayBlock-w" for="{{category_conv.id}}" style="color:#2a2a2a; cursor:pointer; padding: 0 20px; margin: -3px 5px">{{category_conv.name}}</label>
+                                </div>
+                              </div>
+                            </div> 
+                            <div class="col-6"  *ngIf="categoryId == category_conv.category_id ">
+                              <div class="form-group">
+                                <input type="number" class="form-control" placeholer="amount" min="1"  [(ngModel)]="category_conv.covenant_amount" [ngModelOptions]="{standalone: true}"/>
+                                <p style="color: red" *ngIf="over">تخطيت الحد المسموح</p>
+                              </div>
+                            </div>
+                      </div>
+                        
+                    </div>
+                    
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+            
+             <div class=" row col-12">
+              <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/link_unit_to_covenants/link-unit-to-covenants-add/link-unit-to-covenants-add.component.ts

@@ -0,0 +1,336 @@
+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-link-unit-to-covenants-add',
+  templateUrl: './link-unit-to-covenants-add.component.html',
+  styleUrls: ['./link-unit-to-covenants-add.component.css']
+})
+export class LinkUnitToCovenantsAddComponent implements OnInit {
+
+
+  typePage: string = '';
+  isComplex = false;
+  isBuildingType = false;
+  show_amount = false;
+  isBuilding = false;
+  amount = [];
+  complex_list =[];
+  building_types=[];
+  buildings = [];
+  valueType: string = '';
+  checkSaveclick:boolean = false;
+  check : boolean = false;
+  isEdit: boolean = false;
+  isConvenat = false;
+  editPageId: number;
+  units =[];
+  covenant_categories = [];
+  covenants = [];
+  final = [] ;
+  over : boolean = false;
+  constructor(
+    private dashBoardSer: DashboardService,
+    private toastr: ToastrService,
+    public authSer: AuthServiceService,
+    private route: ActivatedRoute,
+    private spinner: NgxSpinnerService,
+    private location: Location,
+    private http: HttpClient
+  ) { }
+
+  @ViewChild('f') linkForm : NgForm;
+
+  formData = {
+    housing_complex_id:'',
+    building_type_id:'',
+    building_id: '',
+    unit_id:'',
+    covenants:[],
+  }
+
+
+  categoryId:number;
+
+
+
+  ngOnInit() {
+
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.editPageId = +params['listPageEditId'];
+      }
+    );
+
+    this.http.get(this.authSer.pathApi + '/housing_complexes_list').subscribe(
+      res => {
+        this.complex_list = res[('housing_complexes')];
+      }
+    );
+
+    this.http.get(this.authSer.pathApi+ '/get_covenant_categories_list').subscribe(
+      res=>{
+        this.covenant_categories = res['covenant_categories'];
+        console.log(this.covenant_categories);
+        this.covenant_categories.forEach(conv => {
+          conv.covenants.forEach(con => {
+            con.covenant_amount = 0;
+          })
+          this.formData.covenants.push({
+            category_id: conv.id,
+            covenants_data: conv.covenants
+          })
+        });
+        console.log(this.formData);
+      },
+      err =>{
+        console.log(err);
+      }
+    )
+
+    if (this.editPageId) {
+      this.spinner.show();
+      this.isEdit = true;
+      this.show_amount = true;
+      // this.showTypes = true;
+      
+      
+      this.typePage = 'تعديل';
+      this.dashBoardSer.getItemData(this.editPageId, 'linkUnitToCovenants' ).subscribe(
+        res => {
+          console.log('ssss', res);
+          this.formData.housing_complex_id = res['unit'].housing_complex_id;
+          this.getBuildingType( this.formData.housing_complex_id);
+          this.formData.building_type_id = res['unit'].building_type_id;
+          this.getBuilding(this.formData.building_type_id);
+          this.formData.building_id = res['unit'].building_id;
+        //  this.getUnit( this.formData.building_id);
+          this.formData.unit_id = res['unit'].unit_id;
+          this.covenant(this.formData.covenants[0].category_id);
+          this.covenants = res['unit'].covenants;
+          console.log('conv form',this.formData.covenants);
+          console.log('conv', this.covenants);
+          
+          for (let i = 0 , n = this.formData.covenants.length; i < n; i++) {
+           const arr= this.formData.covenants[i].covenants_data; 
+           for (let ii = 0, k = arr.length; ii < k; ii++) {
+            for (let j = 0 , m = this.covenants.length; j < m; j++) {
+              if(arr[ii].id == this.covenants[j].covenant_id){
+                arr[ii].selected = true;
+                arr[ii].covenant_amount = this.covenants[j].covenant_amount;
+              }
+           }
+           
+              
+            }
+            
+          }
+          this.spinner.hide();
+          },
+      
+        err => {
+          console.log(err);
+        }
+      );
+     
+    }else {
+      this.typePage = 'اضافة';
+    }
+
+  }
+
+  getBuildingType(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;
+           this.isBuilding = false;
+        }
+      },
+      err => {
+        console.log(err);
+        
+      }
+    );
+  }
+
+  getBuilding(event){
+    this.http.get(this.authSer.pathApi + '/buildings_list_by_type_id/' + event ).subscribe(
+      res => {
+        console.log('res',res);
+        this.buildings = res['buildings'];
+        if(this.buildings.length > 0){
+          this.isBuildingType = true;
+          console.log(this.buildings);
+          if(this.editPageId) {
+            this.getUnit(this.formData.building_id );
+          }
+        }else{
+             this.isBuildingType = false;
+             this.isBuilding = false;
+            
+          }
+          
+      },
+      err => {
+        console.log(err);
+        
+      }
+    );
+}
+
+getUnit(event){
+  this.http.get(this.authSer.pathApi + '/units_list_by_building_id/' + event ).subscribe(
+    res => {
+      console.log(res);
+      this.units = res['units'];
+      if(this.units.length > 0){
+        this.isBuilding = true;
+        console.log(this.units);
+
+      }else{
+           this.isBuilding = false;
+        }
+
+    },
+    err => {
+      console.log(err);
+      
+    }
+  );
+}
+
+    covenant(event){ 
+      const id = event;
+      console.log(id);
+      this.categoryId = id;
+      console.log(this.formData.covenants);
+    } 
+
+
+    showcovenant_categories(){
+      this.isConvenat = true;
+    }
+
+    checked(event){
+      console.log(event);
+      for(let i = 0, m = this.formData.covenants.length; i < m ; i++) {
+
+        //final finalCov array to add categories in covenants
+       for(let j = 0 , n =  this.formData.covenants[i].covenants_data.length; j < n; j++) {
+              if(event == this.formData.covenants[i].covenants_data[j].id ){
+
+                this.formData.covenants[i].covenants_data[j].covenant_amount = 1
+
+
+                // if(this.formData.covenants[i].covenants_data[j].selected == false){
+                // this.formData.covenants[i].covenants_data[j].covenant_amount = 1
+                // }else{
+                //   this.formData.covenants[i].covenants_data[j].covenant_amount = 0
+                // }
+              }
+        }
+       
+     };
+      
+    }
+
+    onSubmitted(){
+      //final array to add covenants
+      
+      const finalCov = [];
+      for(let i = 0; i < this.formData.covenants.length; i++) {
+
+        //final finalCov array to add categories in covenants
+       for(let j = 0; j < this.formData.covenants[i].covenants_data.length; j++) {
+         if(this.formData.covenants[i].covenants_data[j].selected != undefined && this.formData.covenants[i].covenants_data[j].selected == true) {
+        const  realamount = this.formData.covenants[i].covenants_data[j].covenant_amount;
+        const  available_amount =   this.formData.covenants[i].covenants_data[j].available_amount;
+           if (realamount > available_amount){
+            this.over = true;
+            return 0;
+           }
+          finalCov.push({
+            covenant_id:this.formData.covenants[i].covenants_data[j].id,
+            covenant_amount: this.formData.covenants[i].covenants_data[j].covenant_amount,
+            category_id: this.formData.covenants[i].covenants_data[j].category_id
+          })
+         }
+        }
+       
+     };
+
+     this.final =  this.formData.covenants
+     this.formData.covenants = finalCov;
+     console.log(finalCov.length);
+     
+     if(finalCov.length == 0){
+       this.toastr.warning('من فضلك قم بأختيار عهدة!!');
+       this.formData.covenants = this.final;
+       this.final = [];
+       return 0;
+     }
+
+      console.log(this.formData);
+
+        if(this.editPageId) {
+          this.dashBoardSer.editItem(this.editPageId, this.formData, 'linkUnitToCovenants').subscribe(
+            res => {
+              console.log(res);
+              this.toastr.success('تم التعديل بنجاح');
+              this.location.back();
+            },
+            err => {
+              this.formData.covenants = this.final;
+              this.final = [];
+              console.log(err);
+              this.toastr.error('خطأ في الخادم ، رجاء المحارله لاحقا');
+
+            }
+          )
+        } else {
+          this.dashBoardSer.addItem( this.formData , 'linkUnitToCovenants').subscribe(
+            res => {
+                console.log('ADD',res);
+                this.toastr.success('تم الإضافه بنجاح');
+                this.checkSaveclick = false;
+                this.location.back();
+              },
+              err => {
+                this.formData.covenants = this.final;
+                this.final = [];
+                console.log(err);
+                this.checkSaveclick = false;
+                this.toastr.error('خطأ في الخادم ، حاول لاحقا');
+              }
+          );
+        }
+      
+    }
+
+
+
+  }
+
+
+
+
+
+

src/app/dashboard/link_unit_to_covenants/link-unit-to-covenants-list/link-unit-to-covenants-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/link_unit_to_covenants/link-unit-to-covenants-list/link-unit-to-covenants-list.component.html

@@ -0,0 +1,134 @@
+<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" style="margin-bottom: 10px;">
+          <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>
+  
+      <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]="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 class="col-12 col-sm-12 col-md-12 col-lg-3" *ngIf="isUnit">
+                    <div class="form-group">
+                      <span class="spanSelect-w" style="margin-right:10px;">
+                        <select [ngModel]="unitId" class="form-control selectButton-w" (input)="unitNum($event.target.value)" >
+                         <option *ngFor="let unit of units" [value]="unit.id">{{unit.unit_number}}</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 *ngIf="selectedUnit">رقم الوحدة </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();">
+             
+              </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 *ngIf="selectedUnit">{{data.unit_number}}</td>
+            <td>{{data.category_name}}</td>
+            <td>{{data.covenant_name}}</td>
+            <td>{{data.covenant_amount}}</td>
+          <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(data.unit_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/link_unit_to_covenants/link-unit-to-covenants-list/link-unit-to-covenants-list.component.ts

@@ -0,0 +1,486 @@
+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-link-unit-to-covenants-list',
+  templateUrl: './link-unit-to-covenants-list.component.html',
+  styleUrls: ['./link-unit-to-covenants-list.component.css']
+})
+export class LinkUnitToCovenantsListComponent implements OnInit {
+
+  complex_list = [];
+  building_types = [];
+  building = [];
+  units = [];
+  isComplex = false;
+  isBuildingType = false;
+  isUnit= false;
+  selectedComplex = true;
+  selectedType = true;
+  selectedBuilding = true;
+  selectedUnit = 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';
+  unitId = '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 = true;
+   this.authSer.showDeleteBtn = true;
+   this.authSer.showEditBtn = true;
+    //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 == 68){
+                  if(this.pages[i]['permissions'][0].name == 'link_unit_to_covenants') {
+                    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)}
+          );
+        }
+      );
+
+      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);
+          
+        }
+      );
+
+      console.log('current page',this.pageId)
+      this.dashboardSer.getListUnit( this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id , this.unitId , 68).subscribe(
+        res => {
+          console.log('x',res);
+          this.dataList = res['unit_covenants'];
+          this.count = res['count'];
+          this.perPagePagenation = res['per_page'];
+        },
+        err => {
+          console.log(err);
+          
+        }
+
+      );
+  }
+
+  getBuildingsType(event){
+    console.log('sdsdsd',event);
+    const id = event;
+  this.housing_complex_id = id;
+  console.log(id);
+  this.isComplex = false;
+  this.isBuildingType = false;
+  this.isUnit = false;
+  this.selectedComplex = true;
+  this.selectedBuilding = true;
+  this.selectedType =true;
+  this.selectedUnit = 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, this.unitId ,68).subscribe(
+      res => {
+        console.log('x',res);
+        this.dataList = res['unit_covenants'];
+        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.getDataUSerSearchBarUnit( dataSearch ,this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id, this.unitId , 68).subscribe(
+      res => {
+        console.log(res);
+        this.dataList = res['unit_covenants'];
+        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, this.unitId ,68).subscribe(
+      res => {
+        console.log(res);
+        this.dataList = res['unit_covenants'];
+        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, this.unitId ,68).subscribe(
+      res => {
+        console.log(res);
+        this.absorpationListIds = res['unit_covenants'];
+        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, this.unitId ,68).subscribe(
+      res => {
+        console.log(res);
+        this.dataList = res['unit_covenants'];
+        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);
+      }
+    );
+  }
+  
+
+  getBuilding(event){
+    this.building_type_id = event;
+    this.building = [];
+    this.building_id = 'all';
+    this.selectedType = true;
+    this.selectedBuilding = true;
+    this.selectedUnit = true;
+    this.isBuildingType = false;
+    this.isUnit = false;
+
+    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, this.unitId ,68).subscribe(
+      res => {
+        console.log('x',res);
+        this.dataList = res['unit_covenants'];
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+      },
+      err => {
+        console.log(err);
+        
+      }
+
+    );
+    this.spinner.hide();
+  }
+
+  getBuildingID(event){
+    this.building_id = event;
+    this.selectedBuilding = true;
+    this.selectedUnit = true;
+    this.isUnit = false;
+    if(event != 'all'){
+    this.selectedBuilding = false;
+    this.http.get(this.authSer.pathApi + '/units_list_by_building_id/' + event).subscribe(
+      res =>{
+        console.log(res);
+        this.units = res['units']
+        const x = this.units.length;
+        this.units.splice(0, 0 ,  {
+          id: 'all',
+          unit_number:'الكل',
+        });
+
+        if(x > 0)
+            this.isUnit = true;
+
+      },
+
+      err => {
+        console.log(err);
+        
+      }
+    );
+    }
+
+    
+    this.dashboardSer.getListUnit( this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id, this.unitId ,68).subscribe(
+      res => {
+        console.log('x',res);
+        this.dataList = res['unit_covenants'];
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+      },
+      err => {
+        console.log(err);
+        
+      }
+
+    );
+    this.spinner.hide();
+      
+  }
+
+  unitNum(event){
+    this.unitId = event;
+    this.selectedUnit = true;
+    if(event != 'all'){
+      this.selectedUnit = false;
+    }
+
+
+    this.dashboardSer.getListUnit( this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id, this.unitId ,68).subscribe(
+      res => {
+        console.log('x',res);
+        this.dataList = res['unit_covenants'];
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+      },
+      err => {
+        console.log(err);
+        
+      }
+
+    );
+    this.spinner.hide();
+  }
+
+   //make all checkbox of user checked 
+   selectAll() {
+    for (var i = 0; i < this.dataList.length; i++) {
+      this.dataList[i].selected = this.selectedAll;
+    }
+  };
+
+  checkIfAllSelected() {
+    this.selectedAll = this.dataList.every(function(item:any) {
+      return item.selected == true;
+    });
+  }
+
+
+  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, this.unitId ,68).subscribe(
+                (responce) => {
+                  console.log(responce);
+                  this.dataList = responce['unit_covenants'];
+                  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 + '/' + 'linkUnitToCovenants']);
+  }
+  
+  onEdit(editId: number) {
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'linkUnitToCovenants/edit/' + editId]);
+  }
+
+}

src/app/dashboard/living-service/living-service-list/living-service-list.component.ts

@@ -114,18 +114,18 @@ export class LivingServiceListComponent implements OnInit {
   
   }
   //make all checkbox of user checked 
-selectAll() {
-  console.log('selected alllllll');
-  for(let i = 0; i < this.dataList.length; i++){
-    this.dataList[i].selected = this.selectedAll;
-  }
-}
+  //make all checkbox of user checked 
+  selectAll() {
+    for (var 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;
-  });
-}
+  checkIfAllSelected() {
+    this.selectedAll = this.dataList.every(function(item:any) {
+      return item.selected == true;
+    });
+  };
 
 filtterFunc(data) {
   this.dataList =[];

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>
 
@@ -55,10 +55,10 @@
             <div class="col-12 col-sm-12 col-md-12" *ngFor="let building of formData.building_types; let i = index" style="padding: 20px;">
               <div class="form-group">
                 <div class="col-4">
-                <input type="text" class="form-control" id="building.name{{i}}" name="building.name{{i}}" placeholder="نوع المنى" ngModel [(ngModel)]="building.name"  required/>
+                <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="1" placeholder="عدد {{building.name}}" 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

@@ -40,8 +40,25 @@ export class RecordInfoBuildingAddComponent implements OnInit {
     complex_number : '',
     name : '',
     land_area : '',
-    status: '',
-    building_types:[]
+    status: '1',
+    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

@@ -112,19 +112,18 @@ export class RecordInfoBuildingListComponent implements OnInit {
 
   }
 
+  //make all checkbox of user checked 
   selectAll() {
-    console.log('selected alllllll');
-    for(let i = 0; i < this.dataList.length; i++){
+    for (var i = 0; i < this.dataList.length; i++) {
       this.dataList[i].selected = this.selectedAll;
     }
-  }
-  
+  };
+
   checkIfAllSelected() {
-    this.selectedAll = this.absorpationListIds.every(function(item:any) {
+    this.selectedAll = this.dataList.every(function(item:any) {
       return item.selected == true;
     });
-  }
-
+  };
 
   filtterFunc(data) {
     this.dataList =[];
@@ -265,7 +264,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

@@ -86,11 +86,11 @@ export class ServiceItemComponent implements OnInit {
       (responce) => {
         this.mobilePages = responce['pages'];
         console.log(responce['pages'].length);
-        if(responce['pages'].length > 6) {
-          for(let i = 0; i < 6 ; i++) {
+        if(responce['pages'].length > 5) {
+          for(let i = 0; i < 5 ; i++) {
             this.pages[i] = responce['pages'][i];
           }
-          for(let i = 6; i < responce['pages'].length; i++) {
+          for(let i = 5; i < responce['pages'].length; i++) {
             this.extraPages.push(responce['pages'][i]);
           }
           this.authSer.showMoreLinks = true;
@@ -490,10 +490,22 @@ 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});
+    }else if(dataPage.id == 68) {
+      this.router.navigate(['linkUnitToCovenants/' + dataPage.id], {relativeTo: this.route});
+    }else if(dataPage.id == 69) {
+      this.router.navigate(['applicationForHousing/' + dataPage.id + '/' + 'new'], {relativeTo: this.route});
+    }else if(dataPage.id == 70) {
+      this.router.navigate(['viewRequestsForAdminstration/' + dataPage.id], {relativeTo: this.route});
+    }else if(dataPage.id == 71) {
+      this.router.navigate(['viewRequestsForTenant/' + dataPage.id], {relativeTo: this.route});
     }
     
   }
-  // livingService
+  // livingService viewRequestsForTenant
 
   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,125 @@
+<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 " (input)="typeNumber($event.target.value)"  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" *ngIf="show_amount" >
+                      <div class="form-group">
+                        <label for="unit_number" style="float: right; margin-right: 5px">رقم الوحدة<span class="spanReqired-w">*</span></label>
+                        <select class="form-control" name="unit_number" [(ngModel)]="formData.unit_number"  required>
+                          <option *ngFor="let amount of amount;  let i = index"   [value]="amount" >{{amount}}</option>
+                        </select>
+                      </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,203 @@
+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;
+  show_amount = false;
+  amount = [];
+  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.typeNumber(this.formData.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;
+            console.log(this.buildings);
+
+          }else{
+               this.isBuildingType = false;
+               this.show_amount = false;
+            }
+
+            if(this.editPageId) {
+              this.typeNumber(this.formData.building_id);}
+        },
+        err => {
+          console.log(err);
+          
+        }
+      );
+  }
+  typeNumber(event){
+
+    this.show_amount = true;
+  const id = event;;
+  for (let i = 0; i < this.buildings.length; i++) {
+    if(id == this.buildings[i].id) {
+        this.amount = this.buildings[i].empty_ids; 
+        console.log('ammmmounnnt', this.amount);
+        this.amount.push(this.formData.unit_number);
+    }
+  } 
+
+  }
+  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,429 @@
+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 , null , 67).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'
+
+    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, null ,67).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, null ,67).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();
+      
+  }
+
+ 
+
+   //make all checkbox of user checked 
+   selectAll() {
+    for (var i = 0; i < this.dataList.length; i++) {
+      this.dataList[i].selected = this.selectedAll;
+    }
+  };
+
+  checkIfAllSelected() {
+    this.selectedAll = this.dataList.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, null ,67).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.getDataUSerSearchBarUnit( dataSearch ,this.currentPage ,this.dataTableNumber, this.housing_complex_id,this.building_type_id, this.building_id, null, 67).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, null ,67).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, null ,67).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, null ,67).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, null ,67).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,93 @@
+<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 unitsInformationcomplex of complex_list" [value]="unitsInformationcomplex.id">{{unitsInformationcomplex.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"   [value]="amount" >{{amount}}</option>
+                          </select>
+                        </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"  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 " min="1" id="building_units" name="building_units" 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" 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 || checkSaveclick">حفظ</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,180 @@
+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.formData.building_number = res['building_information'].building_number;
+          // console.log('xxf',this.formData.building_type_id);        
+          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 = 'اضافة';
+    }
+
+
+  }
+
+
+  //get building list
+  getBuildingsType(event){
+    console.log(event);
+    this.showTypes = true;
+    const id = event;
+  
+    this.http.get(this.authSer.pathApi + '/building_types_list/' + id ).subscribe(
+      res => {
+        this.building_types = res['building_types'];
+        console.log('building types' , this.building_types);
+        if(this.editPageId) {
+          this.typeNumber(this.formData.building_type_id);
+        }
+      },
+      err => {
+        console.log(err);
+      }
+    );
+  } 
+
+   typeNumber(event){
+    this.show_amount = true;
+    const id = event;
+    //alert(id);
+    //alert(this.building_types.length);
+      
+    for (let i = 0; i < this.building_types.length; i++) {
+      if(id == this.building_types[i].id)
+      { console.log('sssls',this.formData.building_type_id);
+        this.amount = this.building_types[i].empty_ids; 
+        this.amount.push(this.formData.building_number);
+        console.log(this.amount);
+        
+      } 
+    } 
+
+  }
+
+    onSubmitted(){
+      this.checkSaveclick = true;
+      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);
+          
+        }
+
+      );
+
+  }
+
+   //make all checkbox of user checked 
+   selectAll() {
+    for (var i = 0; i < this.dataList.length; i++) {
+      this.dataList[i].selected = this.selectedAll;
+    }
+  };
+
+  checkIfAllSelected() {
+    this.selectedAll = this.dataList.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/dashboard/view_requests_for_adminstration/view-requests-for-adminstration-details/view-requests-for-adminstration-details.component.css

@@ -0,0 +1,494 @@
+.imgContainer {
+    width: 200px;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px auto;
+}
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    display: inline-block;
+    border-radius: 0 0 20px 20px;
+    position: absolute;
+    right: 40%;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    bottom: 0;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: #00a99d;
+    color: #fff;
+}
+
+.inputfile + label {
+	cursor: pointer; /* "hand" cursor */
+}
+
+.inputfile:focus + label {
+	outline: 1px dotted #000;
+	outline: -webkit-focus-ring-color auto 5px;
+}
+
+.title {
+    font-size: 16px;
+    text-align: right;
+    margin: 10px 0;
+    background-color: #888;
+    width: 200px;
+    padding: 9px;
+    border-radius: 5px 5px 0 0;
+    margin-bottom: 0;
+    margin-right: 2px;
+    color: #fff;
+}
+
+.wrapper {
+    width: 100%;
+    display: inline-block;
+    padding: 10px 0;
+    background: #f5f5f5;
+    border: 1px solid #bdbdbd;
+    border-radius: 5px;
+}
+
+
+.wrapper .inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+.wrapper .iconUpload-w {
+    width: 200px;
+    height: 37px;
+    border-radius: 5px;
+    font-size: 1.25em;
+    font-weight: 700;
+    display: inline-block;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 0 10px;
+    display: contents;
+    right: 75px;
+}
+
+.wrapper .deleteRow-w {
+    width: 100px !important;
+    padding: 7px 8px !important;
+    cursor: pointer !important;
+    margin: 1px 0 !important;
+}
+.wrapper .table td, .table th {
+    padding: 5px 15px !important;
+    width: 150px !important;
+}
+
+.wrapper .table tbody tr:nth-child(odd):hover {
+    color: #bda380 !important;
+}
+
+.wrapper .table tbody tr:nth-child(even):hover {
+    color: #bda380 !important;
+}
+
+
+.check {
+    float: right;
+    margin-top: 3px;
+    margin-right: 10px;
+    width: 20px;
+    height: 20px;
+}
+
+
+.disabledDiv {
+    pointer-events: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color:  #e9ecef
+}
+
+
+.checkReport {
+    display: block;
+}
+
+.searchEmp {
+    width: 85%;
+    float: right;
+}
+
+@media(max-width: 767px) {
+
+    .searchEmp {
+        width: 100%;
+        float: right;
+    }
+}
+.numberReport-s {
+    width: 83%;
+    float: right;
+}
+
+.buttonS {
+    float: left;
+}
+
+.userForm-w {
+    width: 100%;
+    padding: 20px 0;
+    margin-top: -6px;
+    direction: rtl;
+    font-family: 'Cairo', sans-serif;
+}
+
+input,select {
+    font-size: 12px; 
+    background-color: #fff;
+    border: 2px solid #bda380;
+}
+
+/* input.ng-invalid.ng-touched {
+    border: 2px solid #ccc;
+}
+
+input.ng-invalid {
+    border: 2px solid #ccc;
+}
+
+select.ng-invalid{
+    border: 2px solid #ccc;
+} */
+.custom-radio .custom-control-label::before{
+	    border: 1px solid #b28c5e;
+}
+.custom-radio .custom-control-input:checked~.custom-control-label::before{
+	background-color: #906635;
+	    border: 1px solid #fff;
+}
+
+.formfieldset{
+	border: 1px solid #61606073;
+    width: 100%;
+	border-radius: 3px;
+	    margin-top: 40px;
+    background-color: #a5a3a31a;
+}
+.formfieldset legend{
+	    float: right;
+}
+.formfieldset legend span{
+    width: auto !important;
+    font-size: 15px;
+    border: 1px solid #616060;
+    padding: 2px 15px;
+    background-color: #616060;
+    float: right;
+    margin: -15px 14px 0px 0px;
+    border-radius: 3px;
+    color: #ffffff;
+}
+.imgProfile {
+    width: 100%;
+    border-radius: 20px 20px 0 0;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+
+}
+
+.imgContainer {
+    width: 200px;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px auto;
+}
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    display: inline-block;
+    border-radius: 0 0 20px 20px;
+    position: absolute;
+    right: 40%;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    bottom: 0;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+/* .inputfile + label {
+    width: 100%;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    background-color: transparent;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 0 0 20px 20px;
+} */
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: #00a99d;
+    color: #fff;
+}
+
+.inputfile + label {
+	cursor: pointer; /* "hand" cursor */
+}
+
+.inputfile:focus + label {
+	outline: 1px dotted #000;
+	outline: -webkit-focus-ring-color auto 5px;
+}
+
+.table .fileName-w {
+    position: absolute;
+    bottom: -3px;
+    right: 120px;
+}
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}
+
+
+.regesterBtn-w {
+    margin:  20px 10px;
+    float: right;
+}
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}
+
+.formStyle{
+    border: 1px solid #ccc;
+    border-top: 4px solid #bda380;
+    padding: 20px;
+    margin: 0 auto
+}
+
+
+
+
+
+.titileLi-w li {
+    margin: 0 5px;
+}
+
+.errorMessage-w {
+    font-size: 14px;
+    text-align: right;
+    margin: 5px;
+    color: red;
+}
+
+
+.title {
+    font-size: 16px;
+    text-align: right;
+    margin: 10px 0;
+    background-color: #888;
+    width: 200px;
+    padding: 9px;
+    border-radius: 5px 5px 0 0;
+    margin-bottom: 0;
+    margin-right: -12px;
+    color: #fff;
+}
+.statusBtn-w {
+    width: 145px;
+    margin: 5px 7px;
+    cursor: pointer;
+    float: right;
+    margin-top: 25px;
+    margin-bottom: 10px;
+}
+
+/* file table style */
+
+
+.wrapper {
+    width: 100%;
+    display: inline-block;
+    padding: 10px 0;
+    background: #f5f5f5;
+    border: 1px solid #bdbdbd;
+    border-radius: 5px;
+}
+
+
+.wrapper .inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+.wrapper .iconUpload-w {
+    width: 200px;
+    height: 37px;
+    border-radius: 5px;
+    font-size: 1.25em;
+    font-weight: 700;
+    display: inline-block;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 0 10px;
+    display: contents;
+    right: 75px;
+}
+
+.wrapper .deleteRow-w {
+    width: 100px !important;
+    padding: 7px 8px !important;
+    cursor: pointer !important;
+    margin: 1px 0 !important;
+}
+.wrapper .table td, .table th {
+    padding: 5px 15px !important;
+    width: 150px !important;
+}
+
+.wrapper .table tbody tr:nth-child(odd):hover {
+    color: #bda380 !important;
+}
+
+.wrapper .table tbody tr:nth-child(even):hover {
+    color: #bda380 !important;
+}
+
+.departmentHeading-w {
+    font-size: 18px;
+    float: right;
+}
+
+.departmentHeading-w span{
+    color: red;
+}
+
+.titleStatus {
+    font-size: 19px;
+    margin: 2px 14px;
+    color: green;
+}
+
+.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;
+}
+
+.wrapper .table td, 
+.table th {
+    font-size: 15px;
+}
+
+.buttonW {
+    background: transparent;
+    color: #b19877;
+    font-weight: bold;
+    border: none !important;
+    border-color: transparent;
+    padding: 5px 20px !important;
+}
+
+.btn-secondary.active, .btn-secondary:active, .show>.btn-secondary.dropdown-toggle {
+    background-color: transparent;
+    border: none;
+}
+
+.btn-secondary.focus, .btn-secondary:focus {
+    box-shadow: none;
+}
+
+.show>.btn-secondary.dropdown-toggle::after {
+    transform: rotate(-180deg); 
+}
+    
+
+
+/* .centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+} */
+
+/* start media query style */
+
+@media(max-width: 767px){
+    .formStyle {
+        padding: 20px;
+    }
+
+    input,select {
+        font-size: 12px; 
+    }
+}
+
+@media(min-width: 767px) and (max-width: 991px){
+    .formStyle {
+        padding: 20px;
+    }
+    input,select {
+        font-size: 12px; 
+    }
+}
+
+.btns-des{
+    display: flex;
+    justify-content: center;
+}

src/app/dashboard/view_requests_for_adminstration/view-requests-for-adminstration-details/view-requests-for-adminstration-details.component.html

@@ -0,0 +1,187 @@
+<div class="addRequest-w">
+  <div class="container">
+
+    <div class="row" style="margin-bottom:8px;">
+      <div class="col-12">
+        <ul class="list-unstyled titileLi-w">
+          <li class="headingText-w" style="cursor: pointer;" (click)="authSer.perviousLocation()">خدمه السكن</li>
+          <li class="headingText-w activeLi-w" style="margin-right:5px">  طلب سكن</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="contentBorder-w">
+
+      <form (ngSubmit)="onSubmitted()" #f="ngForm">
+        <div class="row">
+          <div class="col-12" >
+            <h2 class="title" >بيانات صاحب الطلب</h2>
+            <div class="row">
+              <div class="col-12">
+                <div class="wrapper">
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label  style="float: right;margin-right: 5px">رقم الهوية</label>
+                      <input type="text" placeholder="رقم الهوية" class="form-control" name="id_number" [ngModel]="userData.identity_number" [disabled]="true" />
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="name"  style="float: right;margin-right: 5px">الاسم</label>
+                      <input type="text" placeholder="الاسم" class="form-control" name="name" [ngModel]="userData.name" [disabled]="true" />
+                    </div>
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                        <div class="form-group">
+                          <label  style="float: right;margin-right: 5px">رقم الوظيفي</label>
+                          <input type="text" placeholder="" class="form-control" name="functional_number" [ngModel]="userData.functional_number" [disabled]="true" />
+                        </div>
+                      </div>
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                      <div class="form-group">
+                        <label for="phoneNum"  style="float: right;margin-right: 5px"> الهاتف </label>
+                        <input type="number" placeholNeedder=" الهاتف" class="form-control" name="phoneNum" [ngModel]="userData.phone" [disabled]="true" />
+                      </div>  
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                      <div class="form-group">
+                          <label for="email"  style="float: right;margin-right: 5px">البريد الالكتروني</label>
+                          <input type="email" placeholder="" class="form-control" name="email" [ngModel]="userData.email" [disabled]="true" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12">
+              <h2 class="title">المرفقات</h2>
+              <div class="row">
+                <div class="col-12">
+                  <div class="wrapper"> 
+                    <div class="col-12">
+                      <button type="button" class="btn btn-default" (click)="plusImage()" style="margin:20px 0; float:right;">إضافه مرفق</button>
+                    </div>
+                    
+                    <table class="table table-bordered">
+                      <thead class="headBackground-w">
+                        <tr>
+                          <th> إسم المرفق</th>
+                          <th>رفع الملف ( بصيغه pdf )</th>
+                          <!-- <th>عرض الملف</th> -->
+                          <th>حذف</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr style="text-align:center;" *ngFor="let file of files; let i = index">
+                            <td><input type="text" class="form-control" placeholder="إسم الملف" [(ngModel)]="file.title"[ngModelOptions]="{standalone: true}"/></td>
+                            <td style="position: relative;">
+                                <input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)"/>
+                                <label for="file{{i}}" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+                                <span class="fileName-w" *ngIf="file.nameFile" style="color:green"> <i class='fas fa-check'style=" float: left; padding-top: 4px; "></i>
+                                </span>
+                              </td>
+                              <!-- <td><a href="{{authSer.pathImg + file.nameFile}}" target="_blank"><i class="fas fa-download"></i></a></td> -->
+                              <td><button type="button" class="btn btn-danger form-control deleteRow-w" (click)="onDeleteRow(i)">حذف</button></td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                      <div class="row">
+                        <div class="col-12 ">
+                            <div class="wrapper btns-des">
+                          <div class="col-3 col-md-2">
+                            <button type="button" class="btn btn-success" [disabled]="acceptCheak" (click)="accept()">قبول</button>
+                          </div>
+                          <div class="col-3 col-md-2">
+                            <button type="button" class="btn btn-warning"   [disabled]="waitingCheak" (click)="waiting()">انتظار</button>
+                          </div>
+                          <div class="col-3 col-md-2">
+                            <button type="button" class="btn btn-danger" [disabled]="refusedCheak" (click)="refuse()">رفض</button>
+                          </div>
+                          </div>
+                        </div>  
+                      </div>
+                      <div class="col-12" *ngIf="refusedCheak">
+                      <h2 class="title" > سبب الرفض</h2>
+                      <div class="row">
+                        <div class="col-12">
+                          <div class="wrapper">
+                            <textarea name="refused_reason" id="refused_reason"  [(ngModel)]="formData.refused_reason" maxlength="250"  cols="110" rows="5" (input)="makeItValid()"></textarea>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="col-12" *ngIf="waitingCheak">
+                      <h2 class="title" > سبب الانتظار</h2>
+                      <div class="row">
+                        <div class="col-12">
+                          <div class="wrapper">
+                            <textarea name="waiting_reason" id="waiting_reason"  [(ngModel)]="formData.waiting_reason" maxlength="250"  cols="110" rows="5" (input)="makeItValid()"></textarea>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="col-12" *ngIf="acceptCheak">
+                        <h2 class="title" >قم بختيار الوحدة السكنية</h2>
+                        <div class="row">
+                          <div class="col-12">
+                            <div class="wrapper">
+                                <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)]="unitInformation.housing_complex_id"  (input)="getBuildingType($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)]="unitInformation.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)]="unitInformation.building_id " (input)="getUnit($event.target.value)" 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"  *ngIf="isBuilding">
+                                       <div class="form-group">
+                                           <label style="float: right; margin-right: 5px">رقم الوحدة </label>
+                                           <select class="form-control" name="unit_id" [(ngModel)]="unitInformation.unit_id " (input)="makeItValid()"  required>
+                                             <option *ngFor="let unit of units" [value]="unit.id" >{{unit.unit_number}}</option>
+                                          </select>
+                                       </div>
+                                  </div>
+                            </div>
+                            </div>
+                          </div>
+                        </div>
+                    </div>
+                  </div>
+                </div>
+             
+            <div class="row">
+              <div class="col-12">
+                  <button type="submit" class="btn btn-success rightW"  [disabled]="notvailed" >حفظ</button>
+                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
+              </div>
+            </div>
+          </div>
+      </form>
+      
+   </div>
+ </div>
+</div>
+
+
+                
+  
+            
+

src/app/dashboard/view_requests_for_adminstration/view-requests-for-adminstration-details/view-requests-for-adminstration-details.component.ts

@@ -0,0 +1,307 @@
+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-view-requests-for-adminstration-details',
+  templateUrl: './view-requests-for-adminstration-details.component.html',
+  styleUrls: ['./view-requests-for-adminstration-details.component.css']
+})
+export class ViewRequestsForAdminstrationDetailsComponent implements OnInit {
+  detailsId: number;
+  employeeId: any;
+  files = [];
+  uploaded: boolean = false;
+  unitId: any;
+  acceptCheak: boolean = false;
+  refusedCheak: boolean = false;
+  waitingCheak: boolean = false;
+  complex_list =[];
+  building_types=[];
+  buildings = [];
+  units =[];
+  isComplex = false;
+  isBuildingType = false;
+  isBuilding = false;
+  status = ''
+  notvailed: boolean = true
+
+  constructor(
+    private dashBoardSer: DashboardService,
+    private toastr: ToastrService,
+    public authSer: AuthServiceService,
+    private route: ActivatedRoute,
+    private spinner: NgxSpinnerService,
+    private location: Location,
+    private http: HttpClient
+  ) { }
+
+  @ViewChild('f') linkForm : NgForm;
+
+  formData = {
+    request_id:'',
+    status:'',
+    refused_reason:'',
+    waiting_reason:'',
+    unit_id: '',
+    files: []
+  }
+  userData = {
+    name:'',
+    identity_number:'',
+    functional_number:'',
+    phone:'',
+    email:''
+  }
+  unitInformation = {
+    housing_complex_id: '',
+    building_type_id: '',
+    building_id:'',
+    unit_id:''
+  }
+  ngOnInit() {
+    this.spinner.show();
+    
+
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.detailsId = +params['detailsId'];
+      }
+    );
+
+
+    this.http.get(this.authSer.pathApi + '/housing_complexes_list').subscribe(
+      res => {
+        this.complex_list = res[('housing_complexes')];
+      }
+    );
+
+
+
+
+    this.dashBoardSer.getItemData(this.detailsId, 'viewRequestsForAdminstrationDetails' ).subscribe(
+      res => {
+        console.log('ssss', res);
+       
+        this.employeeId = res['request'].employee_id;
+        this.files = res['request'].files;
+        this.formData.request_id = res['request'].id;
+        this.formData.refused_reason = res['request'].refused_reason;
+        this.formData.waiting_reason = res['request'].waiting_reason;
+        this.formData.unit_id = res['request'].unit_id;
+        this.formData.status = res['request'].status
+        if(this.formData.status == 'accepted' ||  this.formData.status == 'ended' ){
+          this.unitInformation.housing_complex_id = res['request'].unit_information.housing_complex_id;
+          console.log(this.unitInformation.housing_complex_id );
+          this.getBuildingType(this.unitInformation.housing_complex_id);
+          this.unitInformation.building_type_id = res['request'].unit_information.building_type_id;
+          this.getBuilding(this.unitInformation.building_type_id);
+          this.unitInformation.building_id = res['request'].unit_information.building_id;
+          this.unitInformation.unit_id = res['request'].unit_information.unit_id;
+           this.accept();
+        }else if(this.formData.status == 'waiting'){
+          this.waiting()
+         }else if(this.formData.status == 'refused') {
+          this.refuse()
+         }
+        this.http.get(this.authSer.pathApi + '/get_user/' + this.employeeId).subscribe(
+          res =>{
+            console.log('=>',res);
+            this.userData.name = res['user'].name;
+            this.userData.identity_number = res['user'].identity_number;
+            this.userData.functional_number = res['user'].functional_number;
+            this.userData.phone = res['user'].phone;
+            this.userData.email = res['user'].email;
+
+          },
+          err =>{
+            console.log(err);
+            
+          }
+        )
+        this.files = res['request'].files;
+     
+        },
+    
+      err => {
+        console.log(err);
+      }
+    );
+    this.spinner.hide();
+  }
+
+
+
+
+  plusImage() {
+    this.files.push({
+      title: null,
+      file: null,
+      file_type: null,
+      nameFile: null,
+    });
+    console.log('files after plus ', this.files);
+  }
+
+   //delete row from table
+ onDeleteRow(index:number) {
+  this.files.splice(index , 1);
+  console.log('files after delete ',this.files);
+}
+  //change file 
+  onFileChanges(event, index:number) {
+    console.log(event);
+    console.log(index);
+    this.uploaded = true;
+    this.files[index].nameFile = event[0].name.substring(0,20) + '....';
+    this.files[index].file = event[0].base64;
+    this.files[index].file_type = event[0].type.split('/')[1];
+      console.log(this.files);
+      console.log('files after change ',this.files);
+  }
+
+  accept(){
+    this.formData.status = 'accepted'
+    this.acceptCheak = true;
+    this.refusedCheak = false;
+    this.waitingCheak = false;
+    this.formData.waiting_reason = ''
+    this.formData.refused_reason = ''
+   this.status = 'تم قبول الطلب'
+  }
+  waiting(){
+    this.formData.status = 'waiting'
+    this.acceptCheak = false;
+    this.refusedCheak = false;
+    this.waitingCheak = true;
+    this.formData.refused_reason = ''
+    this.unitInformation.unit_id = ''
+    this.unitInformation.housing_complex_id = ''
+    this.unitInformation.building_type_id = ''
+    this.unitInformation.building_id = ''
+    this.isComplex = false;
+    this.isBuildingType = false;
+    this.isBuilding = false;
+    this.status = 'الطلب في حالة الانتظار'
+
+  }
+  refuse(){
+    this.formData.status = 'refused'
+    this.acceptCheak = false;
+    this.refusedCheak = true;
+    this.waitingCheak = false;
+    this.formData.waiting_reason = ''
+    this.unitInformation.unit_id = ''
+    this.unitInformation.housing_complex_id = ''
+    this.unitInformation.building_type_id = ''
+    this.unitInformation.building_id = ''
+    this.isComplex = false;
+    this.isBuildingType = false;
+    this.isBuilding = false;
+    this.status = 'تم رفض الطلب'
+  }
+
+  getBuildingType(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;
+           this.isBuilding = false;
+        }
+      },
+      err => {
+        console.log(err);
+        
+      }
+    );
+  }
+
+  getBuilding(event){
+    this.http.get(this.authSer.pathApi + '/buildings_list_by_type_id/' + event ).subscribe(
+      res => {
+        console.log('res',res);
+        this.buildings = res['buildings'];
+        if(this.buildings.length > 0){
+          this.isBuildingType = true;
+          console.log(this.buildings);
+          this.getUnit(this.unitInformation.building_id);         
+        }else{
+             this.isBuildingType = false;
+             this.isBuilding = false;
+            
+          }
+          
+      },
+      err => {
+        console.log(err);
+        
+      }
+    );
+}
+
+getUnit(event){
+  this.http.get(this.authSer.pathApi + '/units_list_by_building_id/' + event ).subscribe(
+    res => {
+      console.log(res);
+      this.units = res['units'];
+      if(this.units.length > 0){
+        this.isBuilding = true;
+        console.log(this.units);
+
+      }else{
+           this.isBuilding = false;
+        }
+
+    },
+    err => {
+      console.log(err);
+      
+    }
+  );
+}
+
+makeItValid(){
+this.notvailed = false;
+}
+
+onSubmitted(){
+    this.formData.files = this.files;
+    this.formData.unit_id = this.unitInformation.unit_id
+    console.log(this.formData);
+    this.notvailed = true;
+    this.http.post(this.authSer.pathApi + '/adminstration_handle_housing_request' ,this.formData).subscribe(
+
+      res => {
+        console.log(res);
+        this.toastr.success(this.status)
+        this.location.back();
+        
+      },
+      err => {
+        console.log(err);
+        this.toastr.error('هناك خطأ يرجى المحاولة لاحقا')
+        
+        
+      }
+
+      )
+    
+  }
+
+}

src/app/dashboard/view_requests_for_adminstration/view-requests-for-adminstration-list/view-requests-for-adminstration-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/view_requests_for_adminstration/view-requests-for-adminstration-list/view-requests-for-adminstration-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-6 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 class="col-6 col-sm-12 col-md-12 col-lg-6">
+          <div class="form-group">
+            <span class="spanSelect-w" style="margin-right:10px;">
+              <select [ngModel]="status" class="form-control selectButton-w" (input)="onGetStatus($event.target.value)">
+                <option value="all">الكل</option>
+                <option value="new">جديد</option>
+                <option value="accepted">مقبول</option>
+                <option value="confirmed">مُأكد</option>
+                <option value="refused">مرفوض</option>
+                <option value="waiting">الانتظار</option>
+                <option value="ended">أنتهاء</option>
+              </select>
+             الحالة
+            </span>
+          </div>
+        </div>
+    </div>
+
+    <table class="table table-bordered" *ngIf="this.count != 0">
+      <thead class="headBackground-w">
+        <tr>
+          <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>{{data.id}}</td>
+          <td>{{data.employee_name}}</td>
+          <td>{{data.phone}}</td>
+          <td>{{data.adminstration_name}}</td>
+          <td>{{data.country_arNationality}}</td>
+          <td>{{data.date_of_employment_hij}}</td>
+          <td>{{data.status == 'new' ? 'جديد' : data.status == 'accepted' ? ' مقبول' : data.status == 'confirmed' ? ' تم تأكيد': data.status == 'refused' ? 'مرفوض': data.status == 'waiting' ? 'انتظار':data.status == 'ended' ? 'انتهى': '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/view_requests_for_adminstration/view-requests-for-adminstration-list/view-requests-for-adminstration-list.component.ts

@@ -0,0 +1,243 @@
+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-view-requests-for-adminstration-list',
+  templateUrl: './view-requests-for-adminstration-list.component.html',
+  styleUrls: ['./view-requests-for-adminstration-list.component.css']
+})
+export class ViewRequestsForAdminstrationListComponent implements OnInit {
+
+
+  dataList = [];
+  pages= [];
+  pageId: number;
+  Ids = [];
+  count: number;
+  perPagePagenation: number;
+  currentPage:number = 1;
+  to_whom  = 'all';
+  status = '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.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 == 70){
+                  if(this.pages[i]['permissions'][0].name == 'view_requests_for_adminstration') {
+                    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.getHousingRequestsList( this.currentPage ,this.dataTableNumber, this.to_whom, this.status).subscribe(
+        res => {
+          console.log('x',res);
+          this.dataList = res['requests'];
+          this.count = res['count'];
+          this.perPagePagenation = res['per_page'];
+        },
+        err => {
+          console.log(err);
+          
+        }
+
+      );
+  }
+
+  //make all checkbox of user checked 
+  selectAll() {
+    for (var i = 0; i < this.dataList.length; i++) {
+      this.dataList[i].selected = this.selectedAll;
+    }
+  };
+
+  checkIfAllSelected() {
+    this.selectedAll = this.dataList.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.getDataUSerSearchBarhousing(dataSearch, this.currentPage, this.dataTableNumber, this.to_whom , this.status).subscribe(
+      res => {
+        console.log(res);
+        this.dataList = res['requests'];
+        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);
+      }
+    );
+  }
+  onGetStatus(event){
+    this.spinner.show();
+    this.status = event;
+    this.dashboardSer.getHousingRequestsList( this.currentPage ,this.dataTableNumber, this.to_whom, this.status).subscribe(
+      res => {
+        console.log('x',res);
+        this.dataList = res['requests'];
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+        this.spinner.hide();
+
+      },
+      err => {
+        console.log(err);
+        this.spinner.hide();
+        
+      }
+
+    );
+  }
+
+  onPageChange(pagenationNumber) {
+    this.spinner.show();
+    this.currentPage = pagenationNumber;
+    this.absorpationListIds = [];
+    console.log(pagenationNumber);
+    console.log(this.pageId);
+    this.dashboardSer.getHousingRequestsList( this.currentPage ,this.dataTableNumber, this.to_whom, this.status).subscribe(
+      res => {
+        console.log('x',res);
+        this.dataList = res['requests'];
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+      },
+      err => {
+        console.log(err);
+        
+      }
+
+    );
+  }
+  onGetValue(event) {
+    this.spinner.show();
+    this.absorpationListIds = [];
+    this.dataTableNumber = event.target.value;
+    this.dashboardSer.getHousingRequestsList( this.currentPage ,this.dataTableNumber, this.to_whom, this.status).subscribe(
+      res => {
+        console.log('x',res);
+        this.dataList = res['requests'];
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+      },
+      err => {
+        console.log(err);
+        
+      }
+
+    );
+  }
+  
+  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.getHousingRequestsList( this.currentPage ,this.dataTableNumber, this.to_whom, this.status).subscribe(
+      res => {
+        console.log('x',res);
+        this.dataList = res['requests'];
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+      },
+      err => {
+        console.log(err);
+        
+      }
+
+    );
+  }
+
+  onAdd() {
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'applicationForHousing/69/Ad547']);
+  }
+  
+  onEdit(editId: number) {
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'viewRequestsForAdminstrationDetails/' + editId]);
+  }
+
+}

src/app/dashboard/view_requests_for_tenant/view-requests-for-tenant-details/view-requests-for-tenant-details.component.css

@@ -0,0 +1,494 @@
+.imgContainer {
+    width: 200px;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px auto;
+}
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    display: inline-block;
+    border-radius: 0 0 20px 20px;
+    position: absolute;
+    right: 40%;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    bottom: 0;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: #00a99d;
+    color: #fff;
+}
+
+.inputfile + label {
+	cursor: pointer; /* "hand" cursor */
+}
+
+.inputfile:focus + label {
+	outline: 1px dotted #000;
+	outline: -webkit-focus-ring-color auto 5px;
+}
+
+.title {
+    font-size: 16px;
+    text-align: right;
+    margin: 10px 0;
+    background-color: #888;
+    width: 200px;
+    padding: 9px;
+    border-radius: 5px 5px 0 0;
+    margin-bottom: 0;
+    margin-right: 2px;
+    color: #fff;
+}
+
+.wrapper {
+    width: 100%;
+    display: inline-block;
+    padding: 10px 0;
+    background: #f5f5f5;
+    border: 1px solid #bdbdbd;
+    border-radius: 5px;
+}
+
+
+.wrapper .inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+.wrapper .iconUpload-w {
+    width: 200px;
+    height: 37px;
+    border-radius: 5px;
+    font-size: 1.25em;
+    font-weight: 700;
+    display: inline-block;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 0 10px;
+    display: contents;
+    right: 75px;
+}
+
+.wrapper .deleteRow-w {
+    width: 100px !important;
+    padding: 7px 8px !important;
+    cursor: pointer !important;
+    margin: 1px 0 !important;
+}
+.wrapper .table td, .table th {
+    padding: 5px 15px !important;
+    width: 150px !important;
+}
+
+.wrapper .table tbody tr:nth-child(odd):hover {
+    color: #bda380 !important;
+}
+
+.wrapper .table tbody tr:nth-child(even):hover {
+    color: #bda380 !important;
+}
+
+
+.check {
+    float: right;
+    margin-top: 3px;
+    margin-right: 10px;
+    width: 20px;
+    height: 20px;
+}
+
+
+.disabledDiv {
+    pointer-events: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color:  #e9ecef
+}
+
+
+.checkReport {
+    display: block;
+}
+
+.searchEmp {
+    width: 85%;
+    float: right;
+}
+
+@media(max-width: 767px) {
+
+    .searchEmp {
+        width: 100%;
+        float: right;
+    }
+}
+.numberReport-s {
+    width: 83%;
+    float: right;
+}
+
+.buttonS {
+    float: left;
+}
+
+.userForm-w {
+    width: 100%;
+    padding: 20px 0;
+    margin-top: -6px;
+    direction: rtl;
+    font-family: 'Cairo', sans-serif;
+}
+
+input,select {
+    font-size: 12px; 
+    background-color: #fff;
+    border: 2px solid #bda380;
+}
+
+/* input.ng-invalid.ng-touched {
+    border: 2px solid #ccc;
+}
+
+input.ng-invalid {
+    border: 2px solid #ccc;
+}
+
+select.ng-invalid{
+    border: 2px solid #ccc;
+} */
+.custom-radio .custom-control-label::before{
+	    border: 1px solid #b28c5e;
+}
+.custom-radio .custom-control-input:checked~.custom-control-label::before{
+	background-color: #906635;
+	    border: 1px solid #fff;
+}
+
+.formfieldset{
+	border: 1px solid #61606073;
+    width: 100%;
+	border-radius: 3px;
+	    margin-top: 40px;
+    background-color: #a5a3a31a;
+}
+.formfieldset legend{
+	    float: right;
+}
+.formfieldset legend span{
+    width: auto !important;
+    font-size: 15px;
+    border: 1px solid #616060;
+    padding: 2px 15px;
+    background-color: #616060;
+    float: right;
+    margin: -15px 14px 0px 0px;
+    border-radius: 3px;
+    color: #ffffff;
+}
+.imgProfile {
+    width: 100%;
+    border-radius: 20px 20px 0 0;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+
+}
+
+.imgContainer {
+    width: 200px;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px auto;
+}
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    display: inline-block;
+    border-radius: 0 0 20px 20px;
+    position: absolute;
+    right: 40%;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    bottom: 0;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+/* .inputfile + label {
+    width: 100%;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    background-color: transparent;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 0 0 20px 20px;
+} */
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: #00a99d;
+    color: #fff;
+}
+
+.inputfile + label {
+	cursor: pointer; /* "hand" cursor */
+}
+
+.inputfile:focus + label {
+	outline: 1px dotted #000;
+	outline: -webkit-focus-ring-color auto 5px;
+}
+
+.table .fileName-w {
+    position: absolute;
+    bottom: -3px;
+    right: 120px;
+}
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}
+
+
+.regesterBtn-w {
+    margin:  20px 10px;
+    float: right;
+}
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}
+
+.formStyle{
+    border: 1px solid #ccc;
+    border-top: 4px solid #bda380;
+    padding: 20px;
+    margin: 0 auto
+}
+
+
+
+
+
+.titileLi-w li {
+    margin: 0 5px;
+}
+
+.errorMessage-w {
+    font-size: 14px;
+    text-align: right;
+    margin: 5px;
+    color: red;
+}
+
+
+.title {
+    font-size: 16px;
+    text-align: right;
+    margin: 10px 0;
+    background-color: #888;
+    width: 200px;
+    padding: 9px;
+    border-radius: 5px 5px 0 0;
+    margin-bottom: 0;
+    margin-right: -12px;
+    color: #fff;
+}
+.statusBtn-w {
+    width: 145px;
+    margin: 5px 7px;
+    cursor: pointer;
+    float: right;
+    margin-top: 25px;
+    margin-bottom: 10px;
+}
+
+/* file table style */
+
+
+.wrapper {
+    width: 100%;
+    display: inline-block;
+    padding: 10px 0;
+    background: #f5f5f5;
+    border: 1px solid #bdbdbd;
+    border-radius: 5px;
+}
+
+
+.wrapper .inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+.wrapper .iconUpload-w {
+    width: 200px;
+    height: 37px;
+    border-radius: 5px;
+    font-size: 1.25em;
+    font-weight: 700;
+    display: inline-block;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 0 10px;
+    display: contents;
+    right: 75px;
+}
+
+.wrapper .deleteRow-w {
+    width: 100px !important;
+    padding: 7px 8px !important;
+    cursor: pointer !important;
+    margin: 1px 0 !important;
+}
+.wrapper .table td, .table th {
+    padding: 5px 15px !important;
+    width: 150px !important;
+}
+
+.wrapper .table tbody tr:nth-child(odd):hover {
+    color: #bda380 !important;
+}
+
+.wrapper .table tbody tr:nth-child(even):hover {
+    color: #bda380 !important;
+}
+
+.departmentHeading-w {
+    font-size: 18px;
+    float: right;
+}
+
+.departmentHeading-w span{
+    color: red;
+}
+
+.titleStatus {
+    font-size: 19px;
+    margin: 2px 14px;
+    color: green;
+}
+
+.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;
+}
+
+.wrapper .table td, 
+.table th {
+    font-size: 15px;
+}
+
+.buttonW {
+    background: transparent;
+    color: #b19877;
+    font-weight: bold;
+    border: none !important;
+    border-color: transparent;
+    padding: 5px 20px !important;
+}
+
+.btn-secondary.active, .btn-secondary:active, .show>.btn-secondary.dropdown-toggle {
+    background-color: transparent;
+    border: none;
+}
+
+.btn-secondary.focus, .btn-secondary:focus {
+    box-shadow: none;
+}
+
+.show>.btn-secondary.dropdown-toggle::after {
+    transform: rotate(-180deg); 
+}
+    
+
+
+/* .centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+} */
+
+/* start media query style */
+
+@media(max-width: 767px){
+    .formStyle {
+        padding: 20px;
+    }
+
+    input,select {
+        font-size: 12px; 
+    }
+}
+
+@media(min-width: 767px) and (max-width: 991px){
+    .formStyle {
+        padding: 20px;
+    }
+    input,select {
+        font-size: 12px; 
+    }
+}
+
+.btns-des{
+    display: flex;
+    justify-content: center;
+}

src/app/dashboard/view_requests_for_tenant/view-requests-for-tenant-details/view-requests-for-tenant-details.component.html

@@ -0,0 +1,203 @@
+<div class="addRequest-w">
+  <div class="container">
+
+    <div class="row" style="margin-bottom:8px;">
+      <div class="col-12">
+        <ul class="list-unstyled titileLi-w">
+          <li class="headingText-w" style="cursor: pointer;" (click)="authSer.perviousLocation()">خدمه السكن</li>
+          <li class="headingText-w activeLi-w" style="margin-right:5px">  طلب سكن</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="contentBorder-w">
+
+      <form (ngSubmit)="onSubmitted()" #f="ngForm">
+        <div class="row">
+          <div class="col-12" >
+            <h2 class="title" >بيانات صاحب الطلب</h2>
+            <div class="row">
+              <div class="col-12">
+                <div class="wrapper">
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label  style="float: right;margin-right: 5px">رقم الهوية</label>
+                      <input type="text" placeholder="رقم الهوية" class="form-control" name="id_number" [ngModel]="userData.identity_number" [disabled]="true" />
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="name"  style="float: right;margin-right: 5px">الاسم</label>
+                      <input type="text" placeholder="الاسم" class="form-control" name="name" [ngModel]="userData.name" [disabled]="true" />
+                    </div>
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                        <div class="form-group">
+                          <label  style="float: right;margin-right: 5px">رقم الوظيفي</label>
+                          <input type="text" placeholder="" class="form-control" name="functional_number" [ngModel]="userData.functional_number" [disabled]="true" />
+                        </div>
+                      </div>
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                      <div class="form-group">
+                        <label for="phoneNum"  style="float: right;margin-right: 5px"> الهاتف </label>
+                        <input type="number" placeholNeedder=" الهاتف" class="form-control" name="phoneNum" [ngModel]="userData.phone" [disabled]="true" />
+                      </div>  
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                      <div class="form-group">
+                          <label for="email"  style="float: right;margin-right: 5px">البريد الالكتروني</label>
+                          <input type="email" placeholder="" class="form-control" name="email" [ngModel]="userData.email" [disabled]="true" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12">
+              <h2 class="title">المرفقات</h2>
+              <div class="row">
+                <div class="col-12">
+                  <div class="wrapper"> 
+                    <table class="table table-bordered">
+                      <thead class="headBackground-w">
+                        <tr>
+                          <th> إسم المرفق</th>
+                          <th>عرض الملف</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr style="text-align:center;" *ngFor="let file of files; let i = index">
+                            <td><h3  class="form-control" >{{file.title}}</h3></td>
+                            <td><a href="{{authSer.pathImg + file.nameFile}}" target="_blank"><i class="fas fa-download"></i></a></td>
+                       </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                      <div class="col-12" *ngIf="refusedCheak">
+                      <h2 class="title" > سبب الرفض</h2>
+                      <div class="row">
+                        <div class="col-12">
+                          <div class="wrapper">
+                            <textarea name="refused_reason" id="refused_reason"  [(ngModel)]="formData.refused_reason" maxlength="250"  cols="110" rows="5" [disabled]="true"></textarea>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="col-12" *ngIf="waitingCheak">
+                      <h2 class="title" > سبب الانتظار</h2>
+                      <div class="row">
+                        <div class="col-12">
+                          <div class="wrapper">
+                            <textarea name="waiting_reason" id="waiting_reason"  [(ngModel)]="formData.waiting_reason" maxlength="250"  cols="110" rows="5" ></textarea>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="col-12" *ngIf="acceptCheak">
+                        <h2 class="title" style="background-color: #5cce5c">تفاصيل السكن</h2>
+                        <div class="row">
+                          <div class="col-12">
+                            <div class="wrapper">
+                                <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)]="unitInformation.housing_complex_id"  (input)="getBuildingType($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)]="unitInformation.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)]="unitInformation.building_id " (input)="getUnit($event.target.value)" 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"  *ngIf="isBuilding">
+                                       <div class="form-group">
+                                           <label style="float: right; margin-right: 5px">رقم الوحدة </label>
+                                           <select class="form-control" name="unit_id" [(ngModel)]="unitInformation.unit_id "  required>
+                                             <option *ngFor="let unit of units" [value]="unit.id" >{{unit.unit_number}}</option>
+                                          </select>
+                                       </div>
+                                  </div>
+                            </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="col-12" *ngIf="acceptCheak">
+                          <h2 class="title" style="background-color: #5cce5c">تفاصيل الوحدة</h2>
+                          <div class="row">
+                            <div class="col-12">
+                              <div class="wrapper">
+                                  <div class="col-12 col-sm-12 col-md-4" >
+                                      <div class="form-group">
+                                        <label style="float: right; margin-right: 5px">  عدد غرف النوم </label>
+                                        <h3>{{unitInformation.bedrooms_number}}</h3>
+                                      </div>
+                                   </div>
+                                   <div class="col-12 col-sm-12 col-md-4" >
+                                    <div class="form-group">
+                                      <label style="float: right; margin-right: 5px">  عدد غرف الجلوس </label>
+                                      <h3>{{unitInformation.sittingrooms_number}}</h3>
+                                    </div>
+                                 </div>
+                                 <div class="col-12 col-sm-12 col-md-4" >
+                                  <div class="form-group">
+                                    <label style="float: right; margin-right: 5px">  عدد الحمامات </label>
+                                    <h3>{{unitInformation.bathrooms_number}}</h3>
+                                  </div>
+                               </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="col-12" *ngIf="acceptCheak">
+                          <h2 class="title" style="background-color: #5cce5c">تفاصيل العهد</h2>
+                          <div class="row">
+                            <div class="col-12">
+                              <div class="wrapper">
+                                  
+                              </div>
+                          </div>
+                        </div>
+                      </div>
+                    
+                      <div class="col-12 col-md-6" *ngIf="acceptCheak">
+                        <div class="form-group">
+                          <input type="checkbox" class="form-check-input checkReport" name="report" id="report" [checked]="!notvailed" required (change)="notvailed = !notvailed">
+                          <label class="form-check-label" for="report" style="margin: 0 20px; float: right;"> تم الإطلاع على العهد المسجلة ومقارنتها مع الواقع والموافقة عليها السكن</label>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              
+            <div class="row">
+              <div class="col-12">
+                  <button type="submit" class="btn btn-success rightW"  [disabled]="notvailed" *ngIf="acceptCheak" >تأكيد الطلب</button>
+                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin:20px 10px;">رجوع</button>
+              </div>
+            </div>
+          </div>
+      </form>
+      
+   </div>
+ </div>
+</div>
+
+
+                
+  
+            
+

src/app/dashboard/view_requests_for_tenant/view-requests-for-tenant-details/view-requests-for-tenant-details.component.ts

@@ -0,0 +1,269 @@
+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-view-requests-for-tenant-details',
+  templateUrl: './view-requests-for-tenant-details.component.html',
+  styleUrls: ['./view-requests-for-tenant-details.component.css']
+})
+export class ViewRequestsForTenantDetailsComponent implements OnInit {
+
+  detailsId: number;
+  employeeId: any;
+  files = [];
+  uploaded: boolean = false;
+  unitId: any;
+  acceptCheak: boolean = false;
+  refusedCheak: boolean = false;
+  waitingCheak: boolean = false;
+  complex_list =[];
+  building_types=[];
+  buildings = [];
+  units =[];
+  isComplex = false;
+  isBuildingType = false;
+  isBuilding = false;
+  status = ''
+  notvailed: boolean = true
+
+  constructor(
+    private dashBoardSer: DashboardService,
+    private toastr: ToastrService,
+    public authSer: AuthServiceService,
+    private route: ActivatedRoute,
+    private spinner: NgxSpinnerService,
+    private location: Location,
+    private http: HttpClient
+  ) { }
+
+
+  @ViewChild('f') linkForm : NgForm;
+
+  formData = {
+    request_id:'',
+    status:'',
+    refused_reason:'',
+    waiting_reason:'',
+    unit_id: '',
+    files: []
+  }
+  userData = {
+    name:'',
+    identity_number:'',
+    functional_number:'',
+    phone:'',
+    email:''
+  }
+  unitInformation = {
+    housing_complex_id: '',
+    building_type_id: '',
+    building_id:'',
+    unit_id:'',
+    bedrooms_number:'',
+    bathrooms_number:'',
+    covenants: [],
+    independent_kitchen: 'yes',
+    sittingrooms_number:''
+  }
+
+
+
+  ngOnInit() {
+
+    this.spinner.show();
+    
+
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.detailsId = +params['detailsId'];
+      }
+    );
+
+
+    this.http.get(this.authSer.pathApi + '/housing_complexes_list').subscribe(
+      res => {
+        this.complex_list = res[('housing_complexes')];
+      }
+    );
+
+    this.dashBoardSer.getItemData(this.detailsId, 'viewRequestsForAdminstrationDetails' ).subscribe(
+      res => {
+        console.log('ssss', res);
+       
+        this.employeeId = res['request'].employee_id;
+        this.files = res['request'].files;
+        this.formData.request_id = res['request'].id;
+        this.formData.refused_reason = res['request'].refused_reason;
+        this.formData.waiting_reason = res['request'].waiting_reason;
+        this.formData.unit_id = res['request'].unit_id;
+        this.formData.status = res['request'].status
+        if(this.formData.status == 'accepted' ||  this.formData.status == 'ended' ){
+          this.unitInformation.housing_complex_id = res['request'].unit_information.housing_complex_id;
+          console.log(this.unitInformation.housing_complex_id );
+          this.getBuildingType(this.unitInformation.housing_complex_id);
+          this.unitInformation.building_type_id = res['request'].unit_information.building_type_id;
+          this.getBuilding(this.unitInformation.building_type_id);
+          this.unitInformation.building_id = res['request'].unit_information.building_id;
+          this.unitInformation.unit_id = res['request'].unit_information.unit_id;
+          this.unitInformation.bedrooms_number = res['request'].unit_information.bedrooms_number;
+          this.unitInformation.bathrooms_number = res['request'].unit_information.bathrooms_number;
+          this.unitInformation.covenants = res['request'].unit_information.covenants;
+          this.unitInformation.independent_kitchen = res['request'].unit_information.independent_kitchen;
+          this.unitInformation.sittingrooms_number = res['request'].unit_information.sittingrooms_number;
+           this.accept();
+        }else if(this.formData.status == 'waiting'){
+          this.waiting()
+         }else if(this.formData.status == 'refused') {
+          this.refuse()
+         }
+        this.http.get(this.authSer.pathApi + '/get_user/' + this.employeeId).subscribe(
+          res =>{
+            console.log('=>',res);
+            this.userData.name = res['user'].name;
+            this.userData.identity_number = res['user'].identity_number;
+            this.userData.functional_number = res['user'].functional_number;
+            this.userData.phone = res['user'].phone;
+            this.userData.email = res['user'].email;
+
+          },
+          err =>{
+            console.log(err);
+            
+          }
+        )
+        this.files = res['request'].files;
+     
+        },
+    
+      err => {
+        console.log(err);
+      }
+    );
+    this.spinner.hide();
+
+
+  }
+
+  accept(){
+    this.formData.status = 'accepted'
+    this.acceptCheak = true;
+    this.refusedCheak = false;
+    this.waitingCheak = false;
+    this.formData.waiting_reason = ''
+    this.formData.refused_reason = ''
+   this.status = 'تم قبول الطلب'
+  }
+  waiting(){
+    this.formData.status = 'waiting'
+    this.acceptCheak = false;
+    this.refusedCheak = false;
+    this.waitingCheak = true;
+    this.formData.refused_reason = ''
+    this.unitInformation.unit_id = ''
+    this.unitInformation.housing_complex_id = ''
+    this.unitInformation.building_type_id = ''
+    this.unitInformation.building_id = ''
+    this.isComplex = false;
+    this.isBuildingType = false;
+    this.isBuilding = false;
+    this.status = 'الطلب في حالة الانتظار'
+
+  }
+  refuse(){
+    this.formData.status = 'refused'
+    this.acceptCheak = false;
+    this.refusedCheak = true;
+    this.waitingCheak = false;
+    this.formData.waiting_reason = ''
+    this.unitInformation.unit_id = ''
+    this.unitInformation.housing_complex_id = ''
+    this.unitInformation.building_type_id = ''
+    this.unitInformation.building_id = ''
+    this.isComplex = false;
+    this.isBuildingType = false;
+    this.isBuilding = false;
+    this.status = 'تم رفض الطلب'
+  }
+
+  getBuildingType(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;
+           this.isBuilding = false;
+        }
+      },
+      err => {
+        console.log(err);
+        
+      }
+    );
+  }
+
+  getBuilding(event){
+    this.http.get(this.authSer.pathApi + '/buildings_list_by_type_id/' + event ).subscribe(
+      res => {
+        console.log('res',res);
+        this.buildings = res['buildings'];
+        if(this.buildings.length > 0){
+          this.isBuildingType = true;
+          console.log(this.buildings);
+          this.getUnit(this.unitInformation.building_id);         
+        }else{
+             this.isBuildingType = false;
+             this.isBuilding = false;
+            
+          }
+          
+      },
+      err => {
+        console.log(err);
+        
+      }
+    );
+}
+
+getUnit(event){
+  this.http.get(this.authSer.pathApi + '/units_list_by_building_id/' + event ).subscribe(
+    res => {
+      console.log(res);
+      this.units = res['units'];
+      if(this.units.length > 0){
+        this.isBuilding = true;
+        console.log(this.units);
+
+      }else{
+           this.isBuilding = false;
+        }
+
+    },
+    err => {
+      console.log(err);
+      
+    }
+  );
+}
+
+
+onSubmitted() {
+  console.log('submitted !');
+}
+
+}

src/app/dashboard/view_requests_for_tenant/view-requests-for-tenant/view-requests-for-tenant.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/view_requests_for_tenant/view-requests-for-tenant/view-requests-for-tenant.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-6 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 class="col-6 col-sm-12 col-md-12 col-lg-6">
+          <div class="form-group">
+            <span class="spanSelect-w" style="margin-right:10px;">
+              <select [ngModel]="status" class="form-control selectButton-w" (input)="onGetStatus($event.target.value)">
+                <option value="all">الكل</option>
+                <option value="new">جديد</option>
+                <option value="accepted">مقبول</option>
+                <option value="confirmed">مُأكد</option>
+                <option value="refused">مرفوض</option>
+                <option value="waiting">الانتظار</option>
+                <option value="ended">أنتهاء</option>
+              </select>
+             الحالة
+            </span>
+          </div>
+        </div>
+    </div>
+
+    <table class="table table-bordered" *ngIf="this.count != 0">
+      <thead class="headBackground-w">
+        <tr>
+          <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>{{data.id}}</td>
+          <td>{{data.employee_name}}</td>
+          <td>{{data.phone}}</td>
+          <td>{{data.adminstration_name}}</td>
+          <td>{{data.country_arNationality}}</td>
+          <td>{{data.date_of_employment_hij}}</td>
+          <td>{{data.status == 'new' ? 'جديد' : data.status == 'accepted' ? ' مقبول' : data.status == 'confirmed' ? ' تم تأكيد': data.status == 'refused' ? 'مرفوض': data.status == 'waiting' ? 'انتظار':data.status == 'ended' ? 'انتهى': '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/view_requests_for_tenant/view-requests-for-tenant/view-requests-for-tenant.component.ts

@@ -0,0 +1,245 @@
+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-view-requests-for-tenant',
+  templateUrl: './view-requests-for-tenant.component.html',
+  styleUrls: ['./view-requests-for-tenant.component.css']
+})
+export class ViewRequestsForTenantComponent implements OnInit {
+
+
+  dataList = [];
+  pages= [];
+  pageId: number;
+  Ids = [];
+  count: number;
+  perPagePagenation: number;
+  currentPage:number = 1;
+  to_whom : number ;
+  status = '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.route.parent.params.subscribe(
+      (params:Params) => {
+          this.userLoginId = params['userID'];
+          this.serviceId = params['serviceID'];
+          this.to_whom = this.userLoginId;
+  
+          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 == 71){
+                  if(this.pages[i]['permissions'][0].name == 'view_requests_for_tenant') {
+                    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.getHousingRequestsList( this.currentPage ,this.dataTableNumber, this.to_whom, this.status).subscribe(
+        res => {
+          console.log('x',res);
+          this.dataList = res['requests'];
+          this.count = res['count'];
+          this.perPagePagenation = res['per_page'];
+        },
+        err => {
+          console.log(err);
+          
+        }
+
+      );
+
+  }
+
+  //make all checkbox of user checked 
+  selectAll() {
+    for (var i = 0; i < this.dataList.length; i++) {
+      this.dataList[i].selected = this.selectedAll;
+    }
+  };
+
+  checkIfAllSelected() {
+    this.selectedAll = this.dataList.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.getDataUSerSearchBarhousing(dataSearch, this.currentPage, this.dataTableNumber, this.to_whom , this.status).subscribe(
+      res => {
+        console.log(res);
+        this.dataList = res['requests'];
+        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);
+      }
+    );
+  }
+
+  onGetStatus(event){
+    this.spinner.show();
+    this.status = event;
+    this.dashboardSer.getHousingRequestsList( this.currentPage ,this.dataTableNumber, this.to_whom, this.status).subscribe(
+      res => {
+        console.log('x',res);
+        this.dataList = res['requests'];
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+        this.spinner.hide();
+
+      },
+      err => {
+        console.log(err);
+        this.spinner.hide();
+        
+      }
+
+    );
+  }
+
+
+
+  onPageChange(pagenationNumber) {
+    this.spinner.show();
+    this.currentPage = pagenationNumber;
+    this.absorpationListIds = [];
+    console.log(pagenationNumber);
+    console.log(this.pageId);
+    this.dashboardSer.getHousingRequestsList( this.currentPage ,this.dataTableNumber, this.to_whom, this.status).subscribe(
+      res => {
+        console.log('x',res);
+        this.dataList = res['requests'];
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+      },
+      err => {
+        console.log(err);
+        
+      }
+
+    );
+  }
+
+  onGetValue(event) {
+    this.spinner.show();
+    this.absorpationListIds = [];
+    this.dataTableNumber = event.target.value;
+    this.dashboardSer.getHousingRequestsList( this.currentPage ,this.dataTableNumber, this.to_whom, this.status).subscribe(
+      res => {
+        console.log('x',res);
+        this.dataList = res['requests'];
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+      },
+      err => {
+        console.log(err);
+        
+      }
+
+    );
+  }
+
+  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.getHousingRequestsList( this.currentPage ,this.dataTableNumber, this.to_whom, this.status).subscribe(
+      res => {
+        console.log('x',res);
+        this.dataList = res['requests'];
+        this.count = res['count'];
+        this.perPagePagenation = res['per_page'];
+      },
+      err => {
+        console.log(err);
+        
+      }
+
+    );
+  }
+
+  onEdit(editId: number) {
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/' + 'viewRequestsForTenantDetails/' + editId]);
+  }
+
+}

src/app/servicesItems/services.component.ts

@@ -277,9 +277,22 @@ 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]);            
+           }else if (this.pages[0].id == 68){
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/linkUnitToCovenants/' + this.pages[0].id]);            
+           }else if (this.pages[0].id == 69){
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/applicationForHousing/' + this.pages[0].id + '/' + 'new']);            
+           }else if (this.pages[0].id == 70){
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/viewRequestsForAdminstration/' + this.pages[0].id]);            
+           }else if (this.pages[0].id == 71){
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/viewRequestsForTenant/' + this.pages[0].id]);            
            }
            
-         },
+           
+         },//viewRequestsForTenant
          err => {
            console.log(err);
            

src/app/shared/auth-service.service.ts

@@ -109,7 +109,6 @@ export class AuthServiceService {
     // whether or not the token is expired
     if(token){
       return this.jwtHelper.isTokenExpired(token);
-
     }
     return true;
   }

src/app/shared/dashboard.service.ts

@@ -17,7 +17,24 @@ 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,unitId: any, pageId: number){
+      this.spinner.show();
+        console.log('services ', currentPage);
+        if(pageId == 67){
+        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 );
+      }else if (pageId == 68) {
+
+        return this.http.get(this.authService.pathApi +'/unit_covenants_list/'  + currentPage + '/' + dataTableNumber + '/' + housing_complex_id + '/' + building_type_id + '/' + building_id + '/' + unitId );
+
+      }
+    }
+    getHousingRequestsList(currentPage: number, dataTableNumber: number, to_whom: any ,status: any){
+      console.log(this.authService.pathApi + '/housing_requests_list/'+ currentPage +'/' + dataTableNumber +'/' +'/' +to_whom + '/' + status);
+      return this.http.get(this.authService.pathApi + '/housing_requests_list/'+ currentPage +'/' + dataTableNumber  +'/' +to_whom + '/' + status);
+    }
+
+    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 +52,17 @@ export class DashboardService {
       }
     }
 
+    getDataUSerSearchBarUnit(data, currentPage: number, dataTableNumber: number, housing_complex_id: any,building_type_id: any,building_id: any, unitId: any ,pageId: number) {
+        if(pageId == 67){
+        return this.http.get(this.authService.pathApi +'/units_list/'  + currentPage + '/' + dataTableNumber + '/' + housing_complex_id + '/' + building_type_id + '/' + building_id + '/' + data);
+        }else if(pageId == 68){
+        return this.http.get(this.authService.pathApi +'/unit_covenants_list/'  + currentPage + '/' + dataTableNumber + '/' + housing_complex_id + '/' + building_type_id + '/' + building_id + '/' + unitId + '/' + data)
+        }
+    }
+
+    getDataUSerSearchBarhousing(data, currentPage: number, dataTableNumber: number,to_whom: any, status: any){
+      return this.http.get(this.authService.pathApi+ '/housing_requests_list/' + currentPage + '/' + dataTableNumber + '/' + to_whom + '/' + status + '/' + 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)
@@ -129,10 +157,16 @@ 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);
+      }else if(addType == 'linkUnitToCovenants') {
+        return this.http.post(this.authService.pathApi + '/assign_unit_covenant' , data);
       }
     }
 
-    //edit event 
+    //edit event  
     editItem(editId,dataEdit,editPageName){
       const editData = dataEdit;
       console.log(editPageName);
@@ -230,6 +264,12 @@ 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);
+      }else if(editPageName == 'linkUnitToCovenants') {
+        return this.http.post(this.authService.pathApi + '/assign_unit_covenant', editData);
       }
     }
     
@@ -314,6 +354,14 @@ 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);
+      }else if(typeGetData == 'linkUnitToCovenants') {
+        return this.http.get(this.authService.pathApi + '/get_unit_covenant/' + pageId);
+      }else if(typeGetData == 'viewRequestsForAdminstrationDetails') {
+        return this.http.get(this.authService.pathApi + '/get_housing_request/' + pageId);
       }
   }
     //delete event
@@ -404,6 +452,12 @@ 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});
+      }else if(pageId == 68) {
+        return this.http.post(this.authService.pathApi + '/delete_unit_covenant', {'unit_covenant_ids' : dataIds});
       }