report servie

package-lock.json

@@ -10,12 +10,12 @@
       "integrity": "sha512-LVENJqtBZEWpX+uJkGI0zgg+Xkm2KkktQm4ojZozArbeNvQkVL6pqVc04Mme6vvOzwJpD1cET5w4byC8Xaq1QQ=="
     },
     "@angular-devkit/architect": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.13.1.tgz",
-      "integrity": "sha512-QDmIbqde75ZZSEFbw6Q6kQWq4cY6C7D67yujXw6XTyubDNAs1tyXJyxTIB8vjSlEKwRizTTDd/B0ZXVcke3Mvw==",
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.13.8.tgz",
+      "integrity": "sha512-gxUs5rhnP576T8ZclKqxlspiChrqRtqaJo54wqNVFvYKEjRZKyMa+1AK6p0oD9zcIToEkcjknj3BbtQa27lLHg==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "7.3.1",
+        "@angular-devkit/core": "7.3.8",
         "rxjs": "6.3.3"
       }
     },
@@ -180,12 +180,12 @@
       }
     },
     "@angular-devkit/core": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-7.3.1.tgz",
-      "integrity": "sha512-56XDWWfIzOAkEk69lBLgmCYybPUA4yjunhmMlCk7vVdb7gbQUyzNjFD04Uj0GjlejatAQ5F76tRwygD9C+3RXQ==",
+      "version": "7.3.8",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-7.3.8.tgz",
+      "integrity": "sha512-3X9uzaZXFpm5o2TSzhD6wEOtVU32CgeytKjD1Scxj+uMMVo48SWLlKiFh312T+smI9ko7tOT8VqxglwYkWosgg==",
       "dev": true,
       "requires": {
-        "ajv": "6.7.0",
+        "ajv": "6.9.1",
         "chokidar": "2.0.4",
         "fast-json-stable-stringify": "2.0.0",
         "rxjs": "6.3.3",
@@ -193,9 +193,9 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "6.7.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.7.0.tgz",
-          "integrity": "sha512-RZXPviBTtfmtka9n9sy1N5M5b82CbxWIR6HIis4s3WQTXDJamc/0gpCWNGz6EWdWp4DOfjzJfhz/AS9zVPjjWg==",
+          "version": "6.9.1",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.9.1.tgz",
+          "integrity": "sha512-XDN92U311aINL77ieWHmqCcNlwjoP5cHXDxIxbf2MaPYuCXOHS7gHH8jktxeK5omgd52XbSTX6a4Piwd1pQmzA==",
           "dev": true,
           "requires": {
             "fast-deep-equal": "^2.0.1",
@@ -207,12 +207,12 @@
       }
     },
     "@angular-devkit/schematics": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-7.3.1.tgz",
-      "integrity": "sha512-cd7usiasfSgw75INz72/VssrLr9tiVRYfo1TEdvr9ww0GuQbuQpB33xbV8W135eAV8+wzQ3Ce8ohaDHibvj6Yg==",
+      "version": "7.3.8",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-7.3.8.tgz",
+      "integrity": "sha512-mvaKoORZIaW/h0VNZ3IQWP0qThRCZRX6869FNlzV0jlW0mhn07XbiIGHCGGSCDRxS7qJ0VbuIVnKXntF+iDeWw==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "7.3.1",
+        "@angular-devkit/core": "7.3.8",
         "rxjs": "6.3.3"
       }
     },
@@ -225,35 +225,26 @@
       }
     },
     "@angular/cli": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-7.3.1.tgz",
-      "integrity": "sha512-8EvXYRhTqTaTk5PKv7VZxIWJiyG51R9RC9gtpRFx4bbnurqBHdEUxGMmaRsGT8QDbfvVsWnuakE0eeW1CrfZAQ==",
+      "version": "7.3.8",
+      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-7.3.8.tgz",
+      "integrity": "sha512-5ldU1idvWstmRaavGZen9WRjfjIViERGt8NYuLLI7dgVLYOPF5TyFoTnpT5nxkiCopp4tPIcpbzPV394Bxmdtg==",
       "dev": true,
       "requires": {
-        "@angular-devkit/architect": "0.13.1",
-        "@angular-devkit/core": "7.3.1",
-        "@angular-devkit/schematics": "7.3.1",
-        "@schematics/angular": "7.3.1",
-        "@schematics/update": "0.13.1",
+        "@angular-devkit/architect": "0.13.8",
+        "@angular-devkit/core": "7.3.8",
+        "@angular-devkit/schematics": "7.3.8",
+        "@schematics/angular": "7.3.8",
+        "@schematics/update": "0.13.8",
         "@yarnpkg/lockfile": "1.1.0",
         "ini": "1.3.5",
         "inquirer": "6.2.1",
         "npm-package-arg": "6.1.0",
-        "opn": "5.4.0",
+        "open": "6.0.0",
         "pacote": "9.4.0",
         "semver": "5.6.0",
         "symbol-observable": "1.2.0"
       },
       "dependencies": {
-        "opn": {
-          "version": "5.4.0",
-          "resolved": "https://registry.npmjs.org/opn/-/opn-5.4.0.tgz",
-          "integrity": "sha512-YF9MNdVy/0qvJvDtunAOzFw9iasOQHpVthTCvGzxt61Il64AYSGdK+rYwld7NAfk9qJ7dt+hymBNSc9LNYS+Sw==",
-          "dev": true,
-          "requires": {
-            "is-wsl": "^1.1.0"
-          }
-        },
         "semver": {
           "version": "5.6.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
@@ -905,13 +896,13 @@
       "integrity": "sha1-DLsOeOLiq/s9+/S+EY6GrvOIQKI="
     },
     "@schematics/angular": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-7.3.1.tgz",
-      "integrity": "sha512-0Ne8APPlTAjKg5CSZqluwCuW/5yPjr3ALCWzqwPxN0suE745usThtasBmqrjw0RMIt8nRqRgtg54Z7lCPO9ZFg==",
+      "version": "7.3.8",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-7.3.8.tgz",
+      "integrity": "sha512-7o90bnIxXNpJhWPDY/zCedcG6KMIihz7a4UQe6UdlhEX21MNZLYFiDiR5Vmsx39wjm2EfPh3JTuBIHGmMCXkQQ==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "7.3.1",
-        "@angular-devkit/schematics": "7.3.1",
+        "@angular-devkit/core": "7.3.8",
+        "@angular-devkit/schematics": "7.3.8",
         "typescript": "3.2.4"
       },
       "dependencies": {
@@ -924,13 +915,13 @@
       }
     },
     "@schematics/update": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.13.1.tgz",
-      "integrity": "sha512-EHOqolT/d/jRGuVTCUESLpk8JNpuaPlsVHfeK7Kdp/t0wSEnmtOelZX4+leS25lGXDaDUF3138ntjrZR4n6bGw==",
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.13.8.tgz",
+      "integrity": "sha512-2jP9w7Nnn24jOdrJtWjoS9LsNPmO9/Eu/+gDxBAVERCqR71mtNW+DopgWDtxleE9jri/pZWrHwShGFCSS7w23g==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "7.3.1",
-        "@angular-devkit/schematics": "7.3.1",
+        "@angular-devkit/core": "7.3.8",
+        "@angular-devkit/schematics": "7.3.8",
         "@yarnpkg/lockfile": "1.1.0",
         "ini": "1.3.5",
         "pacote": "9.4.0",
@@ -5600,18 +5591,18 @@
           }
         },
         "strip-ansi": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.0.0.tgz",
-          "integrity": "sha512-Uu7gQyZI7J7gn5qLn1Np3G9vcYGTVqB+lFTytnDJv83dd8T22aGH451P3jueT2/QemInJDfxHB5Tde5OzgG1Ow==",
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
           "dev": true,
           "requires": {
-            "ansi-regex": "^4.0.0"
+            "ansi-regex": "^4.1.0"
           },
           "dependencies": {
             "ansi-regex": {
-              "version": "4.0.0",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.0.0.tgz",
-              "integrity": "sha512-iB5Dda8t/UqpPI/IjsejXu5jOGDrzn41wJyljwPH65VCIbk6+1BzFIMJGFwTNrYXT1CrD+B4l19U7awiQ8rk7w==",
+              "version": "4.1.0",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+              "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
               "dev": true
             }
           }
@@ -7433,6 +7424,14 @@
         "tslib": "^1.9.0"
       }
     },
+    "ngx-countdown": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/ngx-countdown/-/ngx-countdown-3.2.0.tgz",
+      "integrity": "sha512-syyXjGslLaRZ/6/7oSDokHtc/XgBrYxxUDMIxMcu2e/g968u21QbEvo3saiW7TSpRar0htmR84Shg+jUakl8KA==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "ngx-hijri-lib": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/ngx-hijri-lib/-/ngx-hijri-lib-1.0.6.tgz",
@@ -7737,9 +7736,9 @@
       }
     },
     "npm-packlist": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.3.0.tgz",
-      "integrity": "sha512-qPBc6CnxEzpOcc4bjoIBJbYdy0D/LFFPUdxvfwor4/w3vxeE0h6TiOVurCEPpQ6trjN77u/ShyfeJGsbAfB3dA==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.1.tgz",
+      "integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==",
       "dev": true,
       "requires": {
         "ignore-walk": "^3.0.1",
@@ -7937,6 +7936,15 @@
         "mimic-fn": "^1.0.0"
       }
     },
+    "open": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-6.0.0.tgz",
+      "integrity": "sha512-/yb5mVZBz7mHLySMiSj2DcLtMBbFPJk5JBKEkHVZFxZAPzeg3L026O0T+lbdz1B2nyDnkClRSwRQJdeVUIF7zw==",
+      "dev": true,
+      "requires": {
+        "is-wsl": "^1.1.0"
+      }
+    },
     "opn": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/opn/-/opn-5.4.0.tgz",
@@ -8185,9 +8193,9 @@
           }
         },
         "semver": {
-          "version": "5.6.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
-          "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==",
+          "version": "5.7.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
+          "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
           "dev": true
         },
         "ssri": {
@@ -9923,9 +9931,9 @@
       }
     },
     "socks": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/socks/-/socks-2.2.3.tgz",
-      "integrity": "sha512-+2r83WaRT3PXYoO/1z+RDEBE7Z2f9YcdQnJ0K/ncXXbV5gJ6wYfNAebYFYiiUjM6E4JyXnPY8cimwyvFYHVUUA==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.3.2.tgz",
+      "integrity": "sha512-pCpjxQgOByDHLlNqlnh/mNSAxIUkyBBuwwhTcV+enZGbDaClPvHdvm6uvOwZfFJkam7cGhBNbb4JxiP8UZkRvQ==",
       "dev": true,
       "requires": {
         "ip": "^1.1.5",
@@ -9933,13 +9941,13 @@
       }
     },
     "socks-proxy-agent": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-4.0.1.tgz",
-      "integrity": "sha512-Kezx6/VBguXOsEe5oU3lXYyKMi4+gva72TwJ7pQY5JfqUx2nMk7NXA6z/mpNqIlfQjWYVfeuNvQjexiTaTn6Nw==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-4.0.2.tgz",
+      "integrity": "sha512-NT6syHhI9LmuEMSK6Kd2V7gNv5KFZoLE7V5udWmn0de+3Mkj3UMA/AJPLyeNUVmElCurSHtUdM3ETpR3z770Wg==",
       "dev": true,
       "requires": {
-        "agent-base": "~4.2.0",
-        "socks": "~2.2.0"
+        "agent-base": "~4.2.1",
+        "socks": "~2.3.2"
       }
     },
     "source-list-map": {

package.json

@@ -65,6 +65,7 @@
     "ng2-social-share": "0.0.10",
     "ng2-toastr": "^4.1.2",
     "ng6-social-button": "^1.0.5",
+    "ngx-countdown": "^3.2.0",
     "ngx-hijri-lib": "^1.0.6",
     "ngx-modialog": "^5.0.1",
     "ngx-moment": "^3.3.0",
@@ -87,7 +88,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.12.4",
-    "@angular/cli": "^7.3.1",
+    "@angular/cli": "^7.3.8",
     "@angular/compiler-cli": "~7.0.0",
     "@angular/language-service": "~7.0.0",
     "@types/core-js": "^2.5.0",

src/app/dashboard/absorpation-plan/absorpation-add/absorpation-add.component.ts

@@ -194,11 +194,5 @@ export class AbsorpationAddComponent implements OnInit {
           );
         }
       }
-
-    
-
     }
-
-
-
 }

src/app/dashboard/adminstration-contact-officers/adminstration-contact-officers-list/adminstration-contact-officers-list.component.ts

@@ -84,13 +84,7 @@ export class AdminstrationContactOfficersListComponent implements OnInit, OnDest
        (response) => {
          console.log(response);
          this.emplyees = response['users'];
-         for (let i = 0; i< this.currentadmins.length; i++) {
-          for(let j = 0; j < this.emplyees.length; j++) {
-            if(this.currentadmins[i].id == this.emplyees[j].id){
-              this.emplyees[i].selected = true;
-            }
-          }
-         }
+         this.selectCurrentAdmin();
        },
        (error) => {
          console.log(error);
@@ -114,13 +108,7 @@ export class AdminstrationContactOfficersListComponent implements OnInit, OnDest
           (response) => {
             console.log(response);
             this.emplyees = response['users'];
-            for (let i = 0; i< this.currentadmins.length; i++) {
-              for(let j = 0; j < this.emplyees.length; j++) {
-                if(this.currentadmins[i].id == this.emplyees[j].id){
-                  this.emplyees[i].selected = true;
-                }
-              }
-             }
+            this.selectCurrentAdmin();
           },
           (error) => {
             console.log(error);
@@ -149,7 +137,20 @@ selectAll() {
     this.subscriptionVar.unsubscribe();
   }
   
-  onSubmit(){
+  //checkCurrentAdminFunction
+
+  selectCurrentAdmin() {
+    for (let i = 0; i< this.currentadmins.length; i++) {
+      for(let j = 0; j < this.emplyees.length; j++) {
+        if(this.currentadmins[i].id == this.emplyees[j].id){
+          this.emplyees[i].selected = true;
+        }
+      }
+     }
+  }
+
+  onSubmit() {
+
     const employeesIds = [];
     this.checkSaveDisabled = true;
 
@@ -159,51 +160,52 @@ selectAll() {
         employeesIds.push(this.emplyees[i].id);
       };
     }
-        if(employeesIds.length == 0){
+    if(employeesIds.length == 0){
+      this.toastr.success('تم نعين ضباط الاتصال');
+      this.checkSaveDisabled = false;
+    }else{
+      if(this.pageId == 54){
+      this.http.post(this.authSer.pathApi + '/asign_adminstration_employees_to_contact_officers', {'officers' : employeesIds}).subscribe(
+        (response) => {
+          this.currentadmins = [];
+          for(let i = 0 ; i < this.emplyees.length; i++) {  
+            if(this.emplyees[i].selected == true) {
+              this.currentadmins.push(this.emplyees[i]);
+            };  
+          }
           this.toastr.success('تم نعين ضباط الاتصال');
-          this.checkSaveDisabled = false;
-        }else{
-         if(this.pageId == 54){
-          this.http.post(this.authSer.pathApi + '/asign_adminstration_employees_to_contact_officers', {'officers' : employeesIds}).subscribe(
-            (response) => {
-              this.currentadmins = [];
-              for(let i = 0 ; i < this.emplyees.length; i++) {  
-                if(this.emplyees[i].selected == true) {
-                    this.currentadmins.push(this.emplyees[i]);
-                   };  
-              }
-              this.toastr.success('تم نعين ضباط الاتصال');
-              console.log(response);
-              for(let i = 0; i < this.emplyees.length; i++){
-                this.emplyees[i].selected == false;
-              }
-            },
-            (error) => {
-              this.toastr.error('حدث خطئ في التعين يرجا المحاوله لاحقاً')
-              console.log(error);
-            }
-          );
-        }
-         else  if(this.pageId == 57){
-          this.http.post(this.authSer.pathApi + '/asign_department_employees_to_contact_officers',{'officers' : employeesIds} ).subscribe(
-            (response) => {
-              this.currentadmins = [];
-              for(let i = 0 ; i < this.emplyees.length; i++) {  
-                if(this.emplyees[i].selected == true) {
-                    this.currentadmins.push(this.emplyees[i]);
-                   };  
-              }
-              this.toastr.success('تم نعين ضباط الاتصال');
-              console.log(response);
-              
-            },
-            (error) => {
-              this.toastr.error('حدث خطئ في التعين يرجا المحاوله لاحقاً')
-              console.log(error);
-            }
-          );
+          location.reload();
+          console.log(response);
+          for(let i = 0; i < this.emplyees.length; i++){
+            this.emplyees[i].selected == false;
+          }
+        },
+        (error) => {
+          this.toastr.error('حدث خطئ في التعين يرجا المحاوله لاحقاً')
+          console.log(error);
         }
-          this.checkSaveDisabled = false;
+      );
+    }
+      else  if(this.pageId == 57){
+      this.http.post(this.authSer.pathApi + '/asign_department_employees_to_contact_officers',{'officers' : employeesIds} ).subscribe(
+        (response) => {
+          this.currentadmins = [];
+          for(let i = 0 ; i < this.emplyees.length; i++) {  
+            if(this.emplyees[i].selected == true) {
+                this.currentadmins.push(this.emplyees[i]);
+                };  
+          }
+          this.toastr.success('تم نعين ضباط الاتصال');
+          console.log(response);
+          location.reload();
+        },
+        (error) => {
+          this.toastr.error('حدث خطأ في التعين يرجا المحاوله لاحقاً')
+          console.log(error);
         }
+      );
+    }
+      this.checkSaveDisabled = false;
+    }
   }
 }

src/app/dashboard/create-report/add-new-report/add-new-report.component.html

@@ -43,7 +43,7 @@
                       <div class="form-group">
                           <label for="startDate" style="float:right" >التاريخ</label>
                           <div>
-                            <app-higri-date  class="disabledDiv" (onDatePicked)="getDate($event, 'start')" [myDate]="bindingDateSplitStart" ></app-higri-date>
+                            <app-higri-date  class="disabledDiv" (onDatePicked)="getDate($event, 'start')" [myDate]="bindingDateSplitStart" [higriDisabled]="disabledVal"></app-higri-date>
                           </div>
                       </div>
                     </div>

src/app/dashboard/create-report/add-new-report/add-new-report.component.ts

@@ -35,17 +35,18 @@ export class AddNewReportComponent implements OnInit {
     checked : boolean = false;
     pageId: number;
     uploaded: boolean = false;
+    disabledVal: boolean = true;
+    serviceId: number;
+    userId: number;
 
     files = [{
       title : null,
       file: null,
       file_type: null,
       nameFile: null,
-      
     }];
 
     dataForm = {
-      
       id_number: '',
       name : '',
       phoneNum: '',
@@ -59,10 +60,10 @@ export class AddNewReportComponent implements OnInit {
     };
 
 
-    currentDate: any = Date.now();
+  currentDate: any = Date.now();
 
        //higri date array
-  month = ['محرم', 'صفر', 'ربيع الأول', 'ربيع الآخر', 'جمادى الأولى', 'جمادى الآخرة', 'رجب', 'شعبان', 'رمضان', 'شوال',
+  month = ['محرم', 'صفر', 'ربيع الأول', 'ربيع الآخر', 'جمادى الأولى', 'جمادى الآخرة', 'رجب', 'Shaʻban', 'رمضان', 'شوال',
   'ذو القعدة', 'ذو الحجة'];
 
 
@@ -87,25 +88,37 @@ export class AddNewReportComponent implements OnInit {
         localStorage.setItem('pageIdActive', parmas['reportId']);
       }
     );
+
+    this.route.parent.params.subscribe(
+      (params:Params) => {
+        this.serviceId = params['serviceID'];
+        this.userId = params['userID'];
+      }
+    );
    
-    this.currentDate = this.authService.writeHijri(new Date(this.currentDate), 'ar', 'system');
+    this.currentDate = this.authService.writeHijri(new Date(this.currentDate), 'en', 'system');
 
 
 
-    console.log(this.currentDate.split(' '));
+    
+
     const nowHigriDate = this.currentDate.split(' ');
 
+    console.log('nowHigriDate', nowHigriDate);
+
+    console.log('current higri date split', this.currentDate.split(' '));
+
     for(let i = 0; i < this.month.length; i++) {
-      if(this.currentDate.split(' ')[1] == this.month[i]) {
-        this.currentDate.split(' ')[1] = i + 1;
-        nowHigriDate[1] = i + 1;
+      if(this.currentDate.split(' ')[0] == this.month[i]) {
+        this.currentDate.split(' ')[0] = i + 1;
+        nowHigriDate[0] = i + 1;
       }
     }
 
     this.bindingDateSplitStart = {
-      year: parseInt(nowHigriDate[2]),
-      month: parseInt(nowHigriDate[1]),
-      day: parseInt(nowHigriDate[0]),
+      year:parseInt(nowHigriDate[2]),
+      month: parseInt(nowHigriDate[0]),
+      day: parseInt(nowHigriDate[1]),
     }
 
     console.log('hhhhhhhhhhhhhhhhhhhh', this.bindingDateSplitStart);
@@ -113,9 +126,9 @@ export class AddNewReportComponent implements OnInit {
 
 
     var today = new Date();
-    this.dataForm.created_time = today.getHours() + ":" + today.getMinutes() ;
-
-    this.dataForm.created_date = nowHigriDate[2] + '-' + nowHigriDate[1] + '-' + nowHigriDate[0];
+    this.dataForm.created_time = ( today.getHours() > 10 ? today.getHours() : '0' + today.getHours() ) + ":" + ( today.getMinutes() > 10 ? today.getMinutes() : '0' + today.getMinutes() );
+    console.log('created_timmmmme', this.dataForm.created_time);
+    this.dataForm.created_date = nowHigriDate[2] + '-' + nowHigriDate[0] + '-' + nowHigriDate[1];
 
     console.log('dataForm object ', this.dataForm.created_date);
 
@@ -188,6 +201,7 @@ export class AddNewReportComponent implements OnInit {
       console.log(this.files);
       console.log('files after change ',this.files);
   }
+  
   onSubmitted(){
     for (let i = 0; i < this.files.length; i++) {
       if(this.files[i].file_type){
@@ -221,10 +235,11 @@ export class AddNewReportComponent implements OnInit {
            console.log(res);
            this.checked = false;
            this.toastr.success('تم حفظ البلاغ ');
+           this.router.navigate(['/service/' + this.userId + '/' +  this.serviceId + '/followCommunicationList/58']);
           },
           err => {
            console.log(err)
-           this.toastr.error('حدث خطأ في الاتصال ')
+           this.toastr.error('حدث خطأ في الاتصال ');
           }
        );
     }else{

src/app/dashboard/dasboard-content.html

@@ -1,3 +1,3 @@
-<div class="routerLinkContainer-w" [style.min-height.px]="myInnerHeight">
+<div class="routerLinkContainer-w" [style.min-height.px]="screenHeight">
     <router-outlet></router-outlet>
 </div>

src/app/dashboard/dashboard-content.ts

@@ -1,5 +1,6 @@
 import { AuthServiceService } from './../shared/auth-service.service';
 import { Component, OnInit } from '@angular/core';
+import { HostListener } from "@angular/core";
 
 
 @Component({
@@ -9,12 +10,24 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DashboardContent implements OnInit {
 
-  constructor(private authSer: AuthServiceService) { }
-  myInnerHeight = window.innerHeight;
+  constructor(private authSer: AuthServiceService) { 
+    this.getScreenSize();
+  }
+
+
   ngOnInit() {
     this.authSer.arabicTemplate = true; //to make footer arabic all time 
   }
 
 
+  screenHeight:any;
+
+  @HostListener('window:resize', ['$event'])
+  getScreenSize(event?) {
+        this.screenHeight = window.innerHeight;
+        console.log(this.screenHeight);
+  }
+
+
 
 }

src/app/dashboard/dashboard-routing.ts

@@ -1,3 +1,8 @@
+import { ReportCommunicationsComponent } from './report-communication/report-communications/report-communications.component';
+import { FollowCommunicationSectionsDetailsComponent } from './follow-communications-sections/follow-communication-sections-details/follow-communication-sections-details.component';
+import { FollowCommunicationsAdminstrationEditComponent } from './follow-communications-adminstrations/follow-communications-adminstration-edit/follow-communications-adminstration-edit.component';
+import { FollowCommunicationsAddComponent } from './follow-communications/follow-communications-add/follow-communications-add.component';
+import { MaintenanceCommunicationEditComponent } from './maintenance-communications/maintenance-communication-edit/maintenance-communication-edit.component';
 import { LocationAddComponent } from './definition-of-location/location-add/location-add.component';
 import { LocationListComponent } from './definition-of-location/location-list/location-list.component';
 import { DefinitionAddComponent } from './definition-of-classification/definition-add/definition-add.component';
@@ -93,6 +98,7 @@ import { DefinitionTimeAddComponent } from './definition-of-time/definition-time
 import { AdminstrationContactOfficersListComponent } from './adminstration-contact-officers/adminstration-contact-officers-list/adminstration-contact-officers-list.component';
 import { AddNewReportComponent } from './create-report/add-new-report/add-new-report.component';
 import { MaintenanceCommunicationsListComponent } from './maintenance-communications/maintenance-communications-list/maintenance-communications-list.component';
+import { ReportCurrentEmployeeOfficerComponent } from './report-current-employees-officer/report-current-employee-officer/report-current-employee-officer.component';
 
 const dashboardRouting: Routes = [
     {path: 'service/:userID/:serviceID', component: ServiceItemComponent, canActivate: [AuthGuard], children: [
@@ -221,12 +227,17 @@ const dashboardRouting: Routes = [
     {path: 'adminstrationContactOfficers/:adminId', component: AdminstrationContactOfficersListComponent , canActivate: [AuthGuard]},
     {path: 'departmentContactOfficers/:adminId', component: AdminstrationContactOfficersListComponent , canActivate: [AuthGuard]},
     {path: 'addNewReport/:reportId', component: AddNewReportComponent , canActivate: [AuthGuard]},
-    {path: 'maintenanceCommunicationList/:maintCommuicationPageId', component: MaintenanceCommunicationsListComponent , canActivate: [AuthGuard]},
-    
-
-    
-    
-  ]},
+    {path: 'followCommunicationList/:listPageId', component: MaintenanceCommunicationsListComponent , canActivate: [AuthGuard]},
+    {path: 'followCommunicationEdit/:followCommunicationId', component: FollowCommunicationsAddComponent, canActivate: [AuthGuard]},
+    {path: 'followCommunicationDepartment/:listPageId', component: MaintenanceCommunicationsListComponent , canActivate: [AuthGuard]},
+    {path: 'followCommunicationAdminEdit/:followAdminEditId', component: FollowCommunicationsAdminstrationEditComponent, canActivate: [AuthGuard]},
+    {path: 'maintenanceCommunicationList/:listPageId', component: MaintenanceCommunicationsListComponent , canActivate: [AuthGuard]},
+    {path: 'maintenanceCommunicationEdit/:maintEditId', component: MaintenanceCommunicationEditComponent , canActivate: [AuthGuard]}, 
+    {path: 'followSectionCommunicationList/:listPageId', component: MaintenanceCommunicationsListComponent , canActivate: [AuthGuard] },   
+    {path: 'followCommunicationSecEdit/:followSectEditId', component: FollowCommunicationSectionsDetailsComponent, canActivate: [AuthGuard] },
+    {path: 'reportCurrentEmployeeOfficer', component: ReportCurrentEmployeeOfficerComponent, canActivate: [AuthGuard] },
+    {path: 'reportCommunication', component: ReportCommunicationsComponent, canActivate: [AuthGuard] },
+    ]},
 ];
 
 @NgModule({

src/app/dashboard/dashboard.module.ts

@@ -16,6 +16,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CountdownModule, Config } from 'ngx-countdown';
 
 //import { NumberDerictiveDirective } from './../number-derictive.directive';
 //import { EnglishCharactersDirective } from './../shared/english-characters.directive';
@@ -137,6 +138,13 @@ import { DefinitionTimeAddComponent } from './definition-of-time/definition-time
 import { AdminstrationContactOfficersListComponent } from './adminstration-contact-officers/adminstration-contact-officers-list/adminstration-contact-officers-list.component';
 import { AddNewReportComponent } from './create-report/add-new-report/add-new-report.component';
 import { MaintenanceCommunicationsListComponent } from './maintenance-communications/maintenance-communications-list/maintenance-communications-list.component';
+import { MaintenanceCommunicationEditComponent } from './maintenance-communications/maintenance-communication-edit/maintenance-communication-edit.component';
+import { FollowCommunicationsAddComponent } from './follow-communications/follow-communications-add/follow-communications-add.component';
+import { FollowCommunicationsAdminstrationEditComponent } from './follow-communications-adminstrations/follow-communications-adminstration-edit/follow-communications-adminstration-edit.component';
+import { FollowCommunicationSectionsDetailsComponent } from './follow-communications-sections/follow-communication-sections-details/follow-communication-sections-details.component';
+import { ReportCurrentEmployeeOfficerComponent } from './report-current-employees-officer/report-current-employee-officer/report-current-employee-officer.component';
+import { ReportCommunicationsComponent } from './report-communication/report-communications/report-communications.component';
+
 
 
 @NgModule({
@@ -159,8 +167,6 @@ import { MaintenanceCommunicationsListComponent } from './maintenance-communicat
         RoleReport2Component,
         ReportsPageComponent,
         ReportListComponent,
-        //EnglishCharactersDirective,
-        //OnlyNumberDirective,
         HospitalListComponent,
         AddHospitalComponent,
         EventsComponent,
@@ -240,6 +246,12 @@ import { MaintenanceCommunicationsListComponent } from './maintenance-communicat
         AdminstrationContactOfficersListComponent,
         AddNewReportComponent,
         MaintenanceCommunicationsListComponent,
+        MaintenanceCommunicationEditComponent,
+        FollowCommunicationsAddComponent,
+        FollowCommunicationsAdminstrationEditComponent,
+        FollowCommunicationSectionsDetailsComponent,
+        ReportCurrentEmployeeOfficerComponent,
+        ReportCommunicationsComponent,
     ],
     imports: [
         CommonModule,
@@ -248,6 +260,7 @@ import { MaintenanceCommunicationsListComponent } from './maintenance-communicat
         NgxPaginationModule,
         AlifeFileToBase64Module,
         SharedModule,
+        CountdownModule,
         NgbModule.forRoot(),
         ModalModule.forRoot(),
         FormsModule,
@@ -275,6 +288,8 @@ import { MaintenanceCommunicationsListComponent } from './maintenance-communicat
     ],
 })
 
+
+
 export class DashBoardModule {
 
 }

src/app/dashboard/follow-communications-adminstrations/follow-communications-adminstration-edit/follow-communications-adminstration-edit.component.css

@@ -0,0 +1,336 @@
+.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/follow-communications-adminstrations/follow-communications-adminstration-edit/follow-communications-adminstration-edit.component.html

@@ -0,0 +1,381 @@
+<div class="addHospital-w">
+  <div class="container">
+    
+    <!-- <h3 style="font-size: 18px; color: red">سيتم تحديث الصفحه بعد  <countdown #countdown [config]="{leftTime: 180}">$!m!:$!s!</countdown></h3> -->
+    <h3 style="font-size: 18px; color: red">سيتم تحديث الصفحه بعد  {{counter$ | async }} ثانيه </h3>
+
+
+    <div class="row">
+      <div class="col-12">
+        <ul class="list-unstyled titileLi-w">
+          <li class="headingText-w">خدمه البلاغات  </li>
+          <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()"> عرض التفاصيل</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="containerContent-w">
+        <form (ngSubmit)="onSubmittedForm()" #f="ngForm">
+          <div class="row">
+            <div class="col-12">
+              <h2 class="title">بيانات منشئ البلاغ</h2>
+              <div class="row">
+                <div class="wrapper">
+                  
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label for="name" style="float:right">رقم البلاغ</label>
+                      <input id="name" type="text" class="form-control" placeholder="رقم البلاغ" ngModel name="commmun_number"  [(ngModel)]="maintData.id" [disabled]="disabledInput" />
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label for="name" style="float:right">إسم المستخدم</label>
+                      <input id="name" type="text" class="form-control" placeholder="الإسم" ngModel name="name"  [(ngModel)]="userData.comm_creator_name" [disabled]="disabledInput" />
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label for="name" style="float:right">الإداره</label>
+                      <input id="name" type="text" class="form-control" placeholder="الإداره" ngModel name="comm_adminstration_creator_name"  [(ngModel)]="userData.comm_adminstration_creator_name" [disabled]="disabledInput" />
+                    </div>
+                   </div>
+                  
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                    <label style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
+                    <input type="phone" placeholder="رقم الجوال" class="form-control" ngModel name="phone" [(ngModel)]="userData.comm_creator_phone" [disabled]="disabledInput" />
+                    </div>
+                  </div>
+      
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label for="endDate" style="float:right" >التاريخ<span class="spanReqired-w">*</span></label>
+                      <div *ngIf='bindingDateSplitEnd'>
+                        <app-end-higri-date  (onDatePicked)="getDate($event, 'end')" [myEndDate]="bindingDateSplitEnd" [higriDisabled]="disabledVal"> </app-end-higri-date>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label for="time" style="float:right"> الوقت<span class="spanReqired-w">*</span></label>
+                      <input type="time" id="time" placeholder="الوقت" class="form-control" ngModel name="time" [(ngModel)]="maintData.created_time" [disabled]="disabledInput" /> 
+                    </div>
+                  </div>
+
+                 
+
+                </div>
+              </div>
+            </div>
+
+           <div class="col-12">
+              <h2 class="title">بيانات البلاغ</h2>
+              <div class="row">
+                <div class="wrapper">
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label for="subject"  style="float: right; margin-right:5px;margin-top:10px">موضوع البلاغ</label>
+                      <input type="text" id="subject" class="form-control" placeholder="موضوع البلاغ" name="subject" ngModel [(ngModel)]="maintData.subject" [disabled]="disabledInput" />
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label for="message"  style="float: right; margin-right:5px;margin-top:10px">نص البلاغ</label>
+                      <input type="text" id="message" class="form-control" placeholder="نص البلاغ" name="message" ngModel [(ngModel)]="maintData.message" [disabled]="disabledInput" />
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" style="margin-top: 10px;">
+                      <div class="form-group">
+                        <label for="reportTopic" style="float: right;margin-right: 5px">  الموقع الرئيسي </label>
+                        <select name="main_location_id" class="form-control" [ngModel]="mainLocationVal" (change)="onChangemainLocation($event)" [disabled]="disabledInput" >
+                          <option *ngFor="let location of locationList" [value]="location.id" required> {{location.name}} </option>    
+                        </select>                  
+                      </div>     
+                   </div>
+                   
+                   <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                      <div class="form-group">
+                        <label for="sub_location_id"  style="float: right;margin-right: 5px">  الموقع الفرعي </label>
+                        <select name="sub_location_id" class="form-control" [ngModel]="subLocationVal" (change)="changeSubLocation($event)" [disabled]="disabledInput">
+                          <option *ngFor="let location of subLocationList" [value]="location.id" required> {{location.name}} </option>    
+                        </select>
+                      </div>
+                   </div>
+
+                   <div class="col-12">
+                      <h2 class="title">المرفقات</h2>
+                      <div class="row">
+                        <div class="wrapper">
+                          <h3 *ngIf="!showAttachements" style="font-size: 18px;">لا توجد مرفقات لعرضها </h3>
+
+                          <table class="table table-bordered" *ngIf="showAttachements">
+                            <thead class="headBackground-w">
+                              <tr>
+                                <th> إسم المرفق</th>
+                                <th>عرض الملف</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr style="text-align:center;" *ngFor="let file of maintData['files']; let i = index">
+                                <td><input type="text" class="form-control" placeholder="إسم الملف" [(ngModel)]="file.title" [ngModelOptions]="{standalone: true}" [disabled]="disabledInput"/></td>
+                                <th style="text-align:center"><a href="{{authSer.pathImg + file.file}}" target="_blank"><i class="fas fa-download"></i></a></th>
+                              </tr>
+                            </tbody>
+                          </table>
+          
+                        </div>
+                      </div>
+                  
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+
+          <div class="col-12">
+              <h2 class="title">عمليات البلاغ</h2>
+              <div class="row">
+                <div class="wrapper">
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label style="float:right" for="parent_category_id">التصنيف الرئيسي</label>
+                      <select class="form-control" id="parent_category_id" style="padding:0 5px" ngModel name="parent_category_id" (input)="changeParentCategory($event)" [(ngModel)]="communicationData.parent_category_id" [disabled]="disabledInput">
+                        <option *ngFor="let categorie of parentCategoriesList; let i = index" [value]="categorie.id">{{categorie.name}}</option>
+                      </select>
+                    </div>
+                  </div>
+                  <!-- <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="checkStatusClosed">
+                    <div class="form-group">
+                      <label style="float:right" for="reopen_reason">سبب إعاده فتح البلاغ</label>
+                      <select class="form-control" id="reopen_reason" style="padding:0 5px" ngModel name="reopen_reason" (input)="getReopenReason($event)" [(ngModel)]="reOpenReasonObject.reopen_closed_communication" >
+                        <option value="ظهور المشكلة مجددا">ظهور المشكلة مجددا</option>
+                        <option value="عدم حل المشكلة من البداية">عدم حل المشكلة من البداية</option>
+                        <option value="إغلاق البلاغ دون موافقتنا">إغلاق البلاغ دون موافقتنا</option>
+                      </select>
+                    </div>
+                  </div> -->
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label style="float:right" for="child_category_id">التصنيف الفرعي</label>
+                      <select class="form-control" id="child_category_id" style="padding:0 5px" ngModel name="child_category_id" [(ngModel)]="communicationData.child_category_id" [disabled]="disabledInput">
+                        <option *ngFor="let childCategorie of childsCategoriesList; let i = index" [value]="childCategorie.id">{{childCategorie.name}}</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label style="float:right" for="time_period_id">الفئه - الوقت</label>
+                      <select class="form-control" id="time_period_id" style="padding:0 5px" ngModel name="time_period_id" [(ngModel)]="communicationData.time_period_id" [disabled]="disabledInput">
+                        <option *ngFor="let timePeriod of times; let i = index" [value]="timePeriod.id">{{timePeriod.name}}</option>
+                      </select>
+                    </div>
+                  </div>
+                  
+                  <div class="col-12 col-md-12">
+                    <div class="form-group">
+                      <label for="maintenance_notes" style="float:right">ملاحظات إداره الصيانه</label>
+                      <textarea cols="3" class="form-control" name="maintenance_notes" id="maintenance_notes" [(ngModel)]="communicationData.maintenance_notes" [disabled]="disabledInput"> </textarea>
+                    </div>
+                  </div>
+
+               
+
+                  <!-- <div class="col-12 col-md-4">
+                    <div style="float:right">
+                      <input type="checkbox" class="form-check-input" name="urgent_communication" id="urgent_communication" [(ngModel)]="communicationData.urgent_communication" [value]="communicationData.urgent_communication">
+                      <label class="form-check-label" for="urgent_communication" style="margin: 0 20px;">بلاغ عاجل</label>
+                    </div>
+                  </div> -->
+
+              </div>
+            </div>
+          </div>
+
+          <div class="col-12">
+              <h2 class="title">إغلاف البلاغ</h2>
+              <div class="row">
+                <div class="wrapper" style="padding: 10px 20px;">
+                    <div style="float:right">
+                      <input type="checkbox" class="form-check-input" name="status" id="status" [(ngModel)]="formData.status" [value]="formData.status">
+                      <label class="form-check-label" for="status" style="margin: 0 20px;">إغلاق البلاغ</label>
+                    </div>
+                    <div class="col-12 col-md-12" style="margin: 20px 0;" *ngIf="formData.status">
+                      <div class="form-group">
+                        <label for="closed_status_reason" style="float:right; margin-right: 5px;"> سبب إغلاق البلاغ</label>
+                        <textarea cols="3" class="form-control" name="closed_status_reason" id="closed_status_reason" [(ngModel)]="formData.closed_status_reason"> </textarea>
+                      </div>
+                    </div>
+                </div>
+              </div>
+          
+            </div>
+
+            <div class="col-12">
+              <h2 class="title"> ملاحظات الإداره</h2>
+              <div class="row">
+                <div class="wrapper" style="padding: 10px 20px;">
+                  <div class="col-12 col-md-12" style="margin: 20px 0;">
+                    <div class="form-group">
+                      <label for="adminstration_notes" style="float:right; margin-right: 5px;"> </label>
+                      <textarea cols="3" class="form-control" name="adminstration_notes" id="adminstration_notes" [(ngModel)]="formData.adminstration_notes"> </textarea>
+                    </div>
+                  </div>
+                </div>
+              </div>
+          
+            </div>
+
+            <div class="col-12">
+              <h2 class="title">الإدارات الموجه لها البلاغ</h2>
+              <div class="row">
+                <div class="wrapper">
+                  <table class="table table-bordered">
+                    <thead class="headBackground-w">
+                      <tr>
+                        <th>الجهه المستلمه للبلاغ</th>
+                        <th>وقت التحويل</th>
+                        <th>ملاحظات</th>
+                        <th>حاله البلاغ</th>
+                        <th>الاٌقسام</th>
+                        <th>مده التأخير</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr *ngFor="let selectAdmin of maintData['adminstrations']; let i = index">
+                        <td>{{selectAdmin.name ? selectAdmin.name : '-'}}</td>
+                        <td>{{ selectAdmin.created_at ? selectAdmin.created_at : '-' }}</td>
+                        <td>{{selectAdmin.adminstration_notes ? selectAdmin.adminstration_notes : '-'}}</td>
+                        <td>
+                          {{ 
+                            selectAdmin.adminstration_status == 'new' ? 'جديد' 
+                            : selectAdmin.adminstration_status == 'closed' ? 'مغلق' 
+                            : selectAdmin.adminstration_status == 'reopen' ? 'إستأنف' 
+                            : selectAdmin.adminstration_status == 'redirect_to_adminstrations' ? 'العائد للإدارات' : 'لايوجد'}}
+                        </td>
+                        <th style="text-align:center">
+                          <div class="dropdown">
+                            <button class="btn btn-secondary dropdown-toggle buttonW" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                              عرض
+                            </button>
+                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="text-align:right;"> 
+                              <a class="dropdown-item" *ngFor="let department of selectAdmin['departments']"> {{ department.name ? department.name : 'لا يوجد'}} </a>
+                            </div>
+                          </div>
+                        </th>
+                        <td style="font-size: 12px;">{{selectAdmin.countdown}}</td>
+                      </tr>
+                  </tbody>
+                </table>
+                
+                </div>
+              </div>            
+            </div>
+
+            <div class="col-12">
+              <h2 class="title">الأقسام الموجه لها البلاغ</h2>
+              <div class="row">
+                <div class="wrapper">
+                  <!-- Button trigger modal -->
+                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" style="float: right; margin: 20px 0;" [disabled]="communicationData.status">
+                      الأقسام الموجه لها البلاغ
+                  </button>
+
+                  <!-- Modal -->
+                  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+                    <div class="modal-dialog" role="document">
+                      <div class="modal-content">
+                        <div class="modal-header">
+                          <h5 class="modal-title" id="exampleModalLabel">الأقسام</h5>
+                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                          </button>
+                        </div>
+                        <div class="modal-body">
+                          <div class="form-group">
+                            <input type="text" placeholder="البحث" class="form-control inputSearchTable-w" style="margin-top:0;" (input)="filtterFunc($event)"/>
+                            <hr>
+                          </div>
+                          <table class="table table-bordered">
+                            <thead class="headBackground-w">
+                              <tr>
+                                <th style="text-align:right">
+                                  <div class="custom-control custom-checkbox">
+                                    <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                                  </div>
+                                </th>
+                                <th style="text-align:right">الإسم</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr *ngFor="let data of departments; 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();" [ngModelOptions]="{standalone: true}">
+                                    <label class="custom-control-label disblayBlock-w" for="{{data.id}}" style="color:#2a2a2a"></label>
+                                  </div>
+                                </td>
+                                <td>{{data.name}}</td>
+                              </tr>
+                          </tbody>
+                        </table>
+                        </div>
+                        <div class="modal-footer">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal" style="margin: 0 10px;">إغلاق</button>
+                          <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="getDepartments()">حفظ</button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <table class="table table-bordered">
+                    <thead class="headBackground-w">
+                      <tr>
+                        <th>الجهه المستلمه للبلاغ</th>
+                        <th>وقت التحويل</th>
+                        <th>ملاحظات</th>
+                        <th>حاله البلاغ</th>
+                        <th>مده التأخير</th>
+                        <th>حذف</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr *ngFor="let selectAdmin of selectedDepartments; let i = index">
+                        <td>{{selectAdmin.name ? selectAdmin.name : '-'}}</td>
+                        <td>{{ selectAdmin.created_at ? selectAdmin.created_at : '-' }}</td>
+                        <td>{{selectAdmin.adminstration_notes ? selectAdmin.adminstration_notes : '-'}}</td>
+                        <td>
+                          {{ 
+                            selectAdmin.adminstration_status == 'new' ? 'جديد' 
+                            : selectAdmin.adminstration_status == 'closed' ? 'مغلق' 
+                            : selectAdmin.adminstration_status == 'reopen' ? 'إستأنف' 
+                            : selectAdmin.adminstration_status == 'redirect_to_adminstrations' ? 'العائد للإدارات' : 'لايوجد'}}
+                        </td>
+                        <td style="font-size: 12px;">{{selectAdmin.countdown}}</td>
+                        <td><button type="button" class="btn btn-danger" (click)="removeSelectedAdminsration(selectAdmin)">حذف</button></td>
+                      </tr>
+                  </tbody>
+                </table>
+                
+                </div>
+              </div>            
+            </div>
+
+            <div class="col-12">
+              <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveClick" *ngIf="!checkStatusClosed">حفظ</button>
+              <!-- <button type="button" class="btn btn-primary rightW" *ngIf="checkStatusClosed" (click)="reOpenMaintenance()">إعاده فتح البلاغ</button> -->
+              <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
+            </div>
+            
+          </div>
+        </form>
+      </div>
+  </div>
+</div>
+

src/app/dashboard/follow-communications-adminstrations/follow-communications-adminstration-edit/follow-communications-adminstration-edit.component.ts

@@ -0,0 +1,416 @@
+import { Observable } from 'rxjs/Observable';
+import { HttpClient } from '@angular/common/http';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { UserService } from 'src/app/shared/user.service';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { Location, formatDate } from '@angular/common';
+import { timer } from 'rxjs';
+import { take, map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-follow-communications-adminstration-edit',
+  templateUrl: './follow-communications-adminstration-edit.component.html',
+  styleUrls: ['./follow-communications-adminstration-edit.component.css']
+})
+export class FollowCommunicationsAdminstrationEditComponent implements OnInit {
+
+  pageId: number;
+  userAdminstrationId: number;
+  bindingDateSplitEnd;
+
+  maintData:any = [];
+  userData:any = [];
+  times:any = [];
+  locationList: any = [];
+  subLocationList: any = [];
+
+  parentCategoriesList = [];
+  childsCategoriesList: any = [];
+  departmentsIds: any = [];
+  departments: any = [];
+  selectedDepartments: any = [];
+
+
+  //reopen object 
+  reOpenReasonObject = {
+    communication_id: null,
+    reopen_closed_communication: '',
+  }
+
+  selectedAll: any;
+  mainLocationVal = '';
+  subLocationVal = '';
+  checkSaveClick: boolean = false;
+  checkStatusClosed: boolean = false;
+
+  communicationData = {
+    parent_category_id: null,
+    child_category_id: null,
+    time_period_id: '',
+    maintenance_notes: '',
+  };
+
+  formData = {
+    communication_id: null,
+    closed_status_reason: '',
+    department_notes: '',
+    status: null,
+  }
+
+  countries = [];
+  identities = [];
+
+  disabledInput: boolean = true;
+  showAttachements: boolean = false;
+  disabledVal: boolean = true;
+  adminstrationsButtonDisabled: boolean = false;
+
+  counter$: Observable<number>;
+  counter = 180;
+
+  constructor(private route: ActivatedRoute, 
+    private dashBoardSer: DashboardService,
+    private userSer: UserService,
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private location: Location,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService) { }
+
+  ngOnInit() {
+
+    this.spinner.show();
+      //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.userAdminstrationId = +localStorage.getItem('adminId');
+      //reload page every 10 seconds
+     
+      // setTimeout(function(){
+      //   location.reload(); 
+      // },180000);
+
+  
+
+      this.counter$ = timer(0,1000).pipe(
+        take(this.counter),
+        map(() => --this.counter)
+      );
+      
+    //get maintenance id
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.pageId = params['followAdminEditId'];
+        this.formData.communication_id = this.pageId;
+      }
+    );
+
+     //get sections list 
+     this.getsectionsList('');
+
+     //get nationality data
+     this.userSer.getNationality().subscribe(
+      (responce) => {
+        console.log(responce);
+        this.countries = responce['countries'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get identites
+    this.userSer.onGetIdentities().subscribe(
+      (responce) => {
+        this.identities = responce['identities'];
+        console.log('idddentiiiesssssssssss', this.identities);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+
+    //get parent_categories_list
+    this.http.get(this.authSer.pathApi + '/parent_categories_list').subscribe(
+      (responce) => {
+        console.log('parent_categories_list', responce);
+        this.parentCategoriesList = responce['categories'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get maintanence data by id
+    this.dashBoardSer.getItemData(this.pageId, 'maintenance').subscribe(
+      (responce) => {
+        
+        this.maintData = responce['communication'];
+        if(this.maintData.reopen == 1) {
+          this.checkStatusClosed = true;
+        } else {
+          this.checkStatusClosed = false;
+        }
+        console.log('main data ', this.maintData);
+        this.communicationData.maintenance_notes = this.maintData.maintenance_notes;
+        this.formData.status = this.maintData.status == 'closed' ? this.maintData.status : false;
+        this.communicationData.time_period_id = this.maintData.time_period_id;
+        this.formData.closed_status_reason = this.maintData.closed_status_reason ? this.maintData.closed_status_reason : '';
+        this.communicationData.parent_category_id = this.maintData.parent_category_id;
+        this.getChildGategories(this.communicationData.parent_category_id);
+        this.communicationData.child_category_id = this.maintData.child_category_id;
+        //get main_location_id
+        this.mainLocationVal = this.maintData.main_location_id;
+        this.getSublocationList(this.mainLocationVal);
+        this.subLocationVal = this.maintData.sub_location_id;
+
+        this.returnEditData();
+      
+
+        // this.selectedDepartments = [];
+        // if(this.maintData.adminstrations.length > 0) {
+        //   for(let i = 0; i < this.maintData.departments.length; i++) {
+        //     this.selectedDepartments.push(this.maintData.departments[i]);
+        //     for(let j = 0; j < this.departments.length; j++) {
+        //       if(this.maintData.departments[i].id == this.departments[j].id) {
+        //         this.departments[i].selected = true;
+        //       }
+        //     }
+        //   }
+        // }
+
+        // console.log('selected adminstrations', this.selectedDepartments);
+
+        
+        this.bindingDateSplitEnd = {
+          year: parseInt(this.maintData.created_date.split('-')[0]),
+          month: parseInt(this.maintData.created_date.split('-')[1]),
+          day: parseInt(this.maintData.created_date.split('-')[2]),
+        }
+
+        this.userData = responce['communication']['user'];
+        this.spinner.hide();
+        console.log('gggg', this.maintData);
+        if(this.maintData['files'].length > 0) {
+          this.showAttachements = true;
+        } else {
+          this.showAttachements = false;
+        }
+        console.log('user data ', this.userData);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get time period 
+    this.http.get(this.authSer.pathApi + '/page_list/53/1/1000/for_communication').subscribe(
+      (response) => {
+        console.log('time period', response);
+        this.times = response['time_periods'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get location parent
+    this.http.get(this.authSer.pathApi + '/parent_locations_list').subscribe(
+      (response) => {
+        this.locationList = response['locations'];
+        console.log('parent location' , this.locationList);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+  }
+
+  changeParentCategory(event) {
+    console.log(event.target.value);
+    this.getChildGategories(event.target.value);
+  }  
+
+
+  //get child gategories 
+  getChildGategories(parentId: number) {
+    this.http.get(this.authSer.pathApi + '/childs_categories_list_by_parent_id/' + parentId).subscribe(
+      (responce) => {
+        console.log('childs_categories_list_by_parent_id', responce);
+        this.childsCategoriesList = responce['categories'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  };
+
+  //get adminstration list 
+  getsectionsList(dataSearch) {
+    const searchKey = dataSearch ? dataSearch : '';
+    console.log('urrrl', this.authSer.pathApi + '/page_list/4/1/1000/' + this.userAdminstrationId);
+     this.http.get(this.authSer.pathApi + '/page_list/4/1/1000/' + this.userAdminstrationId  + searchKey).subscribe(
+      (responce) => {
+        console.log('sections', responce);
+        this.departments = responce['departments'];
+        console.log('sections', responce);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  };
+
+  //search function 
+  filtterFunc(event) {
+    this.departments = [];
+    console.log(event.target.value);
+    this.getsectionsList(event.target.value);
+  }
+
+
+  //make all checkbox of user checked 
+  selectAll() {
+    for (var i = 0; i < this.departments.length; i++) {
+      this.departments[i].selected = this.selectedAll;
+    }
+  }
+
+  //to checked one checkBox 
+  checkIfAllSelected() {
+    this.selectedAll = this.departments.every(function(item:any) {
+      return item.selected == true;
+    });
+  }
+
+  //get departments ids 
+  getDepartments() {
+    this.selectedDepartments = [];
+    for(let i = 0; i < this.departments.length; i++) {
+      if(this.departments[i].selected == true) {
+        this.selectedDepartments.push(this.departments[i]);
+      }
+    }
+    console.log(this.selectedDepartments);
+  }
+
+  //get sub location list 
+  getSublocationList(parentId: any) {
+    this.http.get(this.authSer.pathApi + '/childs_locations_list_by_parent_id/' + parentId).subscribe(  
+      (response)  => {
+        this.subLocationList = response['locations'];
+        console.log('sub Location', this.subLocationList);
+      },
+      (error) => {
+        console.log(error)
+      }
+     );
+  }
+
+  //get value of reason reOpen
+  getReopenReason(event) {
+    console.log(event.target.value);
+    console.log(this.reOpenReasonObject);
+    this.reOpenReasonObject.reopen_closed_communication = event.target.value;
+  }
+
+  //reOpen mentainence function
+  reOpenMaintenance() {
+    this.http.post(this.authSer.pathApi + '/reopen_closed_communication', this.reOpenReasonObject).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.toastr.success('تم إعاده الفتح بنجاح');
+        this.location.back();
+      },
+      (error) => {
+        console.log(error);
+        this.toastr.error('حدث خطا في الحفظ ، حاول لاحقاً');
+        this.location.back();
+      }
+    );
+  }
+
+
+  //remove selected adminsration 
+  removeSelectedAdminsration(departmentData) {
+    console.log(departmentData);
+
+    //to remove checked from adminstrations list
+      for(let j = 0; j < this.departments.length; j++) {
+        if(departmentData.id == this.departments[j].id) {
+          this.departments[j].selected = false;
+        }
+      }
+    
+    const index = this.selectedDepartments.indexOf(departmentData);
+    this.selectedDepartments.splice(index, 1);
+    
+    console.log(index);
+  }
+
+  //return substring of subject and check negaive and positive time 
+    returnEditData() {
+      for(let i = 0; i < this.maintData['adminstrations'].length; i++) {
+          this.maintData['adminstrations'][i].countdown = this.maintData['adminstrations'][i].countdown ? this.dashBoardSer.secondsToDhms(this.maintData['adminstrations'][i].countdown) : '-';
+          console.log(this.maintData['adminstrations'][i].countdown);
+      }
+    }
+
+
+  //submitted form 
+  onSubmittedForm() {
+    
+    //this.checkSaveClick = true; //make save btn disabled till request is success 
+
+
+    if(this.formData.status) {
+      this.formData.status = 'closed';
+    } else {
+      this.formData.status = '';
+      this.formData.closed_status_reason = '';
+    }
+
+    this.departmentsIds = [];
+    for(let i = 0; i < this.selectedDepartments.length; i++) {
+      this.departmentsIds.push(this.selectedDepartments[i].id);
+    }
+
+    this.formData['departments_ids'] = this.departmentsIds;
+
+   console.log(this.formData);
+
+
+   if(this.formData.status == 'closed' && this.formData.closed_status_reason == '') {
+     this.toastr.warning('أدخل سبب الرفض !');
+   } else {
+      this.http.post(this.authSer.pathApi + '/adminstration_handle_communication', this.formData).subscribe(
+      (responce) => {
+        console.log(responce['status']);
+        if(responce['status'] == 'some adminstrations didnt closed yet') {
+          this.toastr.warning('بعض الأقسام لم تقم بإغلاق البلاغ بعد !');
+        } else {
+          this.toastr.success('تم الحفظ بنجاح');
+          this.location.back();
+        }
+      },
+      (error) => {
+        console.log(error);
+        this.toastr.error('خطأ في الحفظ حاول لاحقاً');
+      }
+    );
+   }
+
+  }
+
+}

src/app/dashboard/follow-communications-sections/follow-communication-sections-details/follow-communication-sections-details.component.css

@@ -0,0 +1,336 @@
+.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/follow-communications-sections/follow-communication-sections-details/follow-communication-sections-details.component.html

@@ -0,0 +1,376 @@
+<div class="addHospital-w">
+  <div class="container">
+    
+    <!-- <h3 style="font-size: 18px; color: red">سيتم تحديث الصفحه بعد  <countdown #countdown [config]="{leftTime: 180}">$!m!:$!s!</countdown></h3> -->
+    <h3 style="font-size: 18px; color: red">سيتم تحديث الصفحه بعد  {{counter$ | async }} ثانيه </h3>
+
+
+    <div class="row">
+      <div class="col-12">
+        <ul class="list-unstyled titileLi-w">
+          <li class="headingText-w">خدمه البلاغات  </li>
+          <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()"> عرض التفاصيل</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="containerContent-w">
+        <form (ngSubmit)="onSubmittedForm()" #f="ngForm">
+          <div class="row">
+            <div class="col-12">
+              
+              <h2 class="title">بيانات منشئ البلاغ</h2>
+              <div class="row">
+                <div class="wrapper">
+                  
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label for="name" style="float:right">رقم البلاغ</label>
+                      <input id="name" type="text" class="form-control" placeholder="رقم البلاغ" ngModel name="commmun_number"  [(ngModel)]="maintData.id" [disabled]="disabledInput" />
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label for="name" style="float:right">إسم المستخدم</label>
+                      <input id="name" type="text" class="form-control" placeholder="الإسم" ngModel name="name"  [(ngModel)]="userData.comm_creator_name" [disabled]="disabledInput" />
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label for="name" style="float:right">الإداره</label>
+                      <input id="name" type="text" class="form-control" placeholder="الإداره" ngModel name="comm_adminstration_creator_name"  [(ngModel)]="userData.comm_adminstration_creator_name" [disabled]="disabledInput" />
+                    </div>
+                   </div>
+                  
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                    <label style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
+                    <input type="phone" placeholder="رقم الجوال" class="form-control" ngModel name="phone" [(ngModel)]="userData.comm_creator_phone" [disabled]="disabledInput" />
+                    </div>
+                  </div>
+      
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label for="endDate" style="float:right" >التاريخ<span class="spanReqired-w">*</span></label>
+                      <div *ngIf='bindingDateSplitEnd'>
+                        <app-end-higri-date  (onDatePicked)="getDate($event, 'end')" [myEndDate]="bindingDateSplitEnd" [higriDisabled]="disabledVal"> </app-end-higri-date>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label for="time" style="float:right"> الوقت<span class="spanReqired-w">*</span></label>
+                      <input type="time" id="time" placeholder="الوقت" class="form-control" ngModel name="time" [(ngModel)]="maintData.created_time" [disabled]="disabledInput" /> 
+                    </div>
+                  </div>
+
+                 
+
+                </div>
+              </div>
+            </div>
+
+           <div class="col-12">
+              <h2 class="title">بيانات البلاغ</h2>
+              <div class="row">
+                <div class="wrapper">
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label for="subject"  style="float: right; margin-right:5px;margin-top:10px">موضوع البلاغ</label>
+                      <input type="text" id="subject" class="form-control" placeholder="موضوع البلاغ" name="subject" ngModel [(ngModel)]="maintData.subject" [disabled]="disabledInput" />
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label for="message"  style="float: right; margin-right:5px;margin-top:10px">نص البلاغ</label>
+                      <input type="text" id="message" class="form-control" placeholder="نص البلاغ" name="message" ngModel [(ngModel)]="maintData.message" [disabled]="disabledInput" />
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" style="margin-top: 10px;">
+                      <div class="form-group">
+                        <label for="reportTopic" style="float: right;margin-right: 5px">  الموقع الرئيسي </label>
+                        <select name="main_location_id" class="form-control" [ngModel]="mainLocationVal" (change)="onChangemainLocation($event)" [disabled]="disabledInput" >
+                          <option *ngFor="let location of locationList" [value]="location.id" required> {{location.name}} </option>    
+                        </select>                  
+                      </div>     
+                   </div>
+                   
+                   <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                      <div class="form-group">
+                        <label for="sub_location_id"  style="float: right;margin-right: 5px">  الموقع الفرعي </label>
+                        <select name="sub_location_id" class="form-control" [ngModel]="subLocationVal" (change)="changeSubLocation($event)" [disabled]="disabledInput">
+                          <option *ngFor="let location of subLocationList" [value]="location.id" required> {{location.name}} </option>    
+                        </select>
+                      </div>
+                   </div>
+
+                   <div class="col-12">
+                      <h2 class="title">المرفقات</h2>
+                      <div class="row">
+                        <div class="wrapper">
+                          <h3 *ngIf="!showAttachements" style="font-size: 18px;">لا توجد مرفقات لعرضها </h3>
+
+                          <table class="table table-bordered" *ngIf="showAttachements">
+                            <thead class="headBackground-w">
+                              <tr>
+                                <th> إسم المرفق</th>
+                                <th>عرض الملف</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr style="text-align:center;" *ngFor="let file of maintData['files']; let i = index">
+                                <td><input type="text" class="form-control" placeholder="إسم الملف" [(ngModel)]="file.title" [ngModelOptions]="{standalone: true}" [disabled]="disabledInput"/></td>
+                                <th style="text-align:center"><a href="{{authSer.pathImg + file.file}}" target="_blank"><i class="fas fa-download"></i></a></th>
+                              </tr>
+                            </tbody>
+                          </table>
+          
+                        </div>
+                      </div>
+                  
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+
+          <div class="col-12">
+              <h2 class="title">عمليات البلاغ</h2>
+              <div class="row">
+                <div class="wrapper">
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label style="float:right" for="parent_category_id">التصنيف الرئيسي</label>
+                      <select class="form-control" id="parent_category_id" style="padding:0 5px" ngModel name="parent_category_id" (input)="changeParentCategory($event)" [(ngModel)]="communicationData.parent_category_id" [disabled]="disabledInput">
+                        <option *ngFor="let categorie of parentCategoriesList; let i = index" [value]="categorie.id">{{categorie.name}}</option>
+                      </select>
+                    </div>
+                  </div>
+                  <!-- <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="checkStatusClosed">
+                    <div class="form-group">
+                      <label style="float:right" for="reopen_reason">سبب إعاده فتح البلاغ</label>
+                      <select class="form-control" id="reopen_reason" style="padding:0 5px" ngModel name="reopen_reason" (input)="getReopenReason($event)" [(ngModel)]="reOpenReasonObject.reopen_closed_communication" >
+                        <option value="ظهور المشكلة مجددا">ظهور المشكلة مجددا</option>
+                        <option value="عدم حل المشكلة من البداية">عدم حل المشكلة من البداية</option>
+                        <option value="إغلاق البلاغ دون موافقتنا">إغلاق البلاغ دون موافقتنا</option>
+                      </select>
+                    </div>
+                  </div> -->
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label style="float:right" for="child_category_id">التصنيف الفرعي</label>
+                      <select class="form-control" id="child_category_id" style="padding:0 5px" ngModel name="child_category_id" [(ngModel)]="communicationData.child_category_id" [disabled]="disabledInput">
+                        <option *ngFor="let childCategorie of childsCategoriesList; let i = index" [value]="childCategorie.id">{{childCategorie.name}}</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label style="float:right" for="time_period_id">الفئه - الوقت</label>
+                      <select class="form-control" id="time_period_id" style="padding:0 5px" ngModel name="time_period_id" [(ngModel)]="communicationData.time_period_id" [disabled]="disabledInput">
+                        <option *ngFor="let timePeriod of times; let i = index" [value]="timePeriod.id">{{timePeriod.name}}</option>
+                      </select>
+                    </div>
+                  </div>
+                  
+                  <div class="col-12 col-md-12">
+                    <div class="form-group">
+                      <label for="maintenance_notes" style="float:right">ملاحظات إداره الصيانه</label>
+                      <textarea cols="3" class="form-control" name="maintenance_notes" id="maintenance_notes" [(ngModel)]="communicationData.maintenance_notes" [disabled]="disabledInput"> </textarea>
+                    </div>
+                  </div>
+
+               
+
+                  <!-- <div class="col-12 col-md-4">
+                    <div style="float:right">
+                      <input type="checkbox" class="form-check-input" name="urgent_communication" id="urgent_communication" [(ngModel)]="communicationData.urgent_communication" [value]="communicationData.urgent_communication">
+                      <label class="form-check-label" for="urgent_communication" style="margin: 0 20px;">بلاغ عاجل</label>
+                    </div>
+                  </div> -->
+
+              </div>
+            </div>
+          </div>
+
+          <div class="col-12">
+              <h2 class="title">إغلاف البلاغ</h2>
+              <div class="row">
+                <div class="wrapper" style="padding: 10px 20px;">
+                    <div style="float:right">
+                      <input type="checkbox" class="form-check-input" name="status" id="status" [(ngModel)]="formData.status" [value]="formData.status">
+                      <label class="form-check-label" for="status" style="margin: 0 20px;">إغلاق البلاغ</label>
+                    </div>
+                    <div class="col-12 col-md-12" style="margin: 20px 0;" *ngIf="formData.status">
+                      <div class="form-group">
+                        <label for="closed_status_reason" style="float:right; margin-right: 5px;"> سبب إغلاق البلاغ</label>
+                        <textarea cols="3" class="form-control" name="closed_status_reason" id="closed_status_reason" [(ngModel)]="formData.closed_status_reason"> </textarea>
+                      </div>
+                    </div>
+                </div>
+              </div>
+          
+            </div>
+
+            <div class="col-12">
+              <h2 class="title"> ملاحظات القسم</h2>
+              <div class="row">
+                <div class="wrapper" style="padding: 10px 20px;">
+                  <div class="col-12 col-md-12" style="margin: 20px 0;">
+                    <div class="form-group">
+                      <label for="department_notes" style="float:right; margin-right: 5px;"> </label>
+                      <textarea cols="3" class="form-control" name="department_notes" id="department_notes" [(ngModel)]="formData.department_notes"> </textarea>
+                    </div>
+                  </div>
+                </div>
+              </div>
+          
+            </div>
+
+            <div class="col-12">
+              <h2 class="title">الإدارات الموجه لها البلاغ</h2>
+              <div class="row">
+                <div class="wrapper">
+                  <table class="table table-bordered">
+                    <thead class="headBackground-w">
+                      <tr>
+                        <th>الجهه المستلمه للبلاغ</th>
+                        <th>وقت التحويل</th>
+                        <th>ملاحظات</th>
+                        <th>حاله البلاغ</th>
+                        <th>الاٌقسام</th>
+                        <th>مده التأخير</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr *ngFor="let selectAdmin of maintData['adminstrations']; let i = index">
+                        <td>{{selectAdmin.name ? selectAdmin.name : '-'}}</td>
+                        <td>{{ selectAdmin.created_at ? selectAdmin.created_at : '-' }}</td>
+                        <td>{{selectAdmin.adminstration_notes ? selectAdmin.adminstration_notes : '-'}}</td>
+                        <td>
+                          {{ 
+                            selectAdmin.adminstration_status == 'new' ? 'جديد' 
+                            : selectAdmin.adminstration_status == 'closed' ? 'مغلق' 
+                            : selectAdmin.adminstration_status == 'reopen' ? 'إستأنف' 
+                            : selectAdmin.adminstration_status == 'redirect_to_adminstrations' ? 'العائد للإدارات' : 'لايوجد'}}
+                        </td>
+                        <th style="text-align:center">
+                          <div class="dropdown">
+                            <button class="btn btn-secondary dropdown-toggle buttonW" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                              عرض
+                            </button>
+                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="text-align:right;"> 
+                              <a class="dropdown-item" *ngFor="let department of selectAdmin['departments']"> {{ department.name ? department.name : 'لا يوجد'}} </a>
+                            </div>
+                          </div>
+                        </th>
+                        <td style="font-size: 12px;">{{selectAdmin.countdown}}</td>
+                      </tr>
+                  </tbody>
+                </table>
+                
+                </div>
+              </div>            
+            </div>
+
+            <!-- <div class="col-12">
+              <h2 class="title">الأقسام الموجه لها البلاغ</h2>
+              <div class="row">
+                <div class="wrapper">
+              
+
+                  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+                    <div class="modal-dialog" role="document">
+                      <div class="modal-content">
+                        <div class="modal-header">
+                          <h5 class="modal-title" id="exampleModalLabel">الأقسام</h5>
+                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                          </button>
+                        </div>
+                        <div class="modal-body">
+                          <div class="form-group">
+                            <input type="text" placeholder="البحث" class="form-control inputSearchTable-w" style="margin-top:0;" (input)="filtterFunc($event)"/>
+                            <hr>
+                          </div>
+                          <table class="table table-bordered">
+                            <thead class="headBackground-w">
+                              <tr>
+                                <th style="text-align:right">
+                                  <div class="custom-control custom-checkbox">
+                                    <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                                  </div>
+                                </th>
+                                <th style="text-align:right">الإسم</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr *ngFor="let data of departments; 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();" [ngModelOptions]="{standalone: true}">
+                                    <label class="custom-control-label disblayBlock-w" for="{{data.id}}" style="color:#2a2a2a"></label>
+                                  </div>
+                                </td>
+                                <td>{{data.name}}</td>
+                              </tr>
+                          </tbody>
+                        </table>
+                        </div>
+                        <div class="modal-footer">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal" style="margin: 0 10px;">إغلاق</button>
+                          <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="getDepartments()">حفظ</button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <table class="table table-bordered">
+                    <thead class="headBackground-w">
+                      <tr>
+                        <th>الجهه المستلمه للبلاغ</th>
+                        <th>وقت التحويل</th>
+                        <th>ملاحظات</th>
+                        <th>حاله البلاغ</th>
+                        <th>مده التأخير</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr *ngFor="let selectAdmin of selectedDepartments; let i = index">
+                        <td>{{selectAdmin.name ? selectAdmin.name : '-'}}</td>
+                        <td>{{ selectAdmin.created_at ? selectAdmin.created_at : '-' }}</td>
+                        <td>{{selectAdmin.adminstration_notes ? selectAdmin.adminstration_notes : '-'}}</td>
+                        <td>
+                          {{ 
+                            selectAdmin.adminstration_status == 'new' ? 'جديد' 
+                            : selectAdmin.adminstration_status == 'closed' ? 'مغلق' 
+                            : selectAdmin.adminstration_status == 'reopen' ? 'إستأنف' 
+                            : selectAdmin.adminstration_status == 'redirect_to_adminstrations' ? 'العائد للإدارات' : 'لايوجد'}}
+                        </td>
+                        <td style="font-size: 12px;">{{selectAdmin.countdown}}</td>
+                      </tr>
+                  </tbody>
+                </table>
+                
+                </div>
+              </div>            
+            </div> -->
+
+            <div class="col-12">
+              <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveClick">حفظ</button>
+              <!-- <button type="button" class="btn btn-primary rightW" *ngIf="checkStatusClosed" (click)="reOpenMaintenance()">إعاده فتح البلاغ</button> -->
+              <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
+            </div>
+            
+          </div>
+        </form>
+      </div>
+  </div>
+</div>
+

src/app/dashboard/follow-communications-sections/follow-communication-sections-details/follow-communication-sections-details.component.ts

@@ -0,0 +1,404 @@
+import { Observable } from 'rxjs/Observable';
+import { HttpClient } from '@angular/common/http';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { UserService } from 'src/app/shared/user.service';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { Location, formatDate } from '@angular/common';
+import { timer } from 'rxjs';
+import { take, map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-follow-communication-sections-details',
+  templateUrl: './follow-communication-sections-details.component.html',
+  styleUrls: ['./follow-communication-sections-details.component.css']
+})
+export class FollowCommunicationSectionsDetailsComponent implements OnInit {
+
+ 
+  pageId: number;
+  userAdminstrationId: number;
+  bindingDateSplitEnd;
+
+  maintData:any = [];
+  userData:any = [];
+  times:any = [];
+  locationList: any = [];
+  subLocationList: any = [];
+
+  parentCategoriesList = [];
+  childsCategoriesList: any = [];
+  departmentsIds: any = [];
+  departments: any = [];
+  selectedDepartments: any = [];
+
+
+  //reopen object 
+  reOpenReasonObject = {
+    communication_id: null,
+    reopen_closed_communication: '',
+  }
+
+  selectedAll: any;
+  mainLocationVal = '';
+  subLocationVal = '';
+  checkSaveClick: boolean = false;
+  checkStatusClosed: boolean = false;
+
+  communicationData = {
+    parent_category_id: null,
+    child_category_id: null,
+    time_period_id: '',
+    maintenance_notes: '',
+  };
+
+  formData = {
+    communication_id: null,
+    closed_status_reason: '',
+    adminstration_notes: '',
+    department_status: null,
+  }
+
+  countries = [];
+  identities = [];
+
+  disabledInput: boolean = true;
+  showAttachements: boolean = false;
+  disabledVal: boolean = true;
+  adminstrationsButtonDisabled: boolean = false;
+
+  counter$: Observable<number>;
+  counter = 180;
+
+  constructor(private route: ActivatedRoute, 
+    private dashBoardSer: DashboardService,
+    private userSer: UserService,
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private location: Location,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService) { }
+
+  ngOnInit() {
+
+    this.spinner.show();
+      //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.userAdminstrationId = +localStorage.getItem('adminId');
+      //reload page every 10 seconds
+     
+      // setTimeout(function(){
+      //   location.reload(); 
+      // },180000);
+
+  
+
+      this.counter$ = timer(0,1000).pipe(
+        take(this.counter),
+        map(() => --this.counter)
+      );
+      
+    //get maintenance id
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.pageId = params['followSectEditId'];
+        this.formData.communication_id = this.pageId;
+      }
+    );
+
+     //get sections list 
+     this.getsectionsList('');
+
+     //get nationality data
+     this.userSer.getNationality().subscribe(
+      (responce) => {
+        console.log(responce);
+        this.countries = responce['countries'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get identites
+    this.userSer.onGetIdentities().subscribe(
+      (responce) => {
+        this.identities = responce['identities'];
+        console.log('idddentiiiesssssssssss', this.identities);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+
+    //get parent_categories_list
+    this.http.get(this.authSer.pathApi + '/parent_categories_list').subscribe(
+      (responce) => {
+        console.log('parent_categories_list', responce);
+        this.parentCategoriesList = responce['categories'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get maintanence data by id
+    this.dashBoardSer.getItemData(this.pageId, 'maintenance').subscribe(
+      (responce) => {
+        
+        this.maintData = responce['communication'];
+        
+        console.log('main data ', this.maintData);
+        this.communicationData.maintenance_notes = this.maintData.maintenance_notes;
+        this.formData.department_status = this.maintData.status == 'closed' ? this.maintData.status : false;
+        this.communicationData.time_period_id = this.maintData.time_period_id;
+        this.formData.closed_status_reason = this.maintData.closed_status_reason ? this.maintData.closed_status_reason : '';
+        this.communicationData.parent_category_id = this.maintData.parent_category_id;
+        this.getChildGategories(this.communicationData.parent_category_id);
+        this.communicationData.child_category_id = this.maintData.child_category_id;
+        //get main_location_id
+        this.mainLocationVal = this.maintData.main_location_id;
+        this.getSublocationList(this.mainLocationVal);
+        this.subLocationVal = this.maintData.sub_location_id;
+
+        this.returnEditData();
+      
+
+        // this.selectedDepartments = [];
+        // if(this.maintData.adminstrations.length > 0) {
+        //   for(let i = 0; i < this.maintData.departments.length; i++) {
+        //     this.selectedDepartments.push(this.maintData.departments[i]);
+        //     for(let j = 0; j < this.departments.length; j++) {
+        //       if(this.maintData.departments[i].id == this.departments[j].id) {
+        //         this.departments[i].selected = true;
+        //       }
+        //     }
+        //   }
+        // }
+
+        // console.log('selected adminstrations', this.selectedDepartments);
+
+        
+        this.bindingDateSplitEnd = {
+          year: parseInt(this.maintData.created_date.split('-')[0]),
+          month: parseInt(this.maintData.created_date.split('-')[1]),
+          day: parseInt(this.maintData.created_date.split('-')[2]),
+        }
+
+        this.userData = responce['communication']['user'];
+        this.spinner.hide();
+        console.log('gggg', this.maintData);
+        if(this.maintData['files'].length > 0) {
+          this.showAttachements = true;
+        } else {
+          this.showAttachements = false;
+        }
+        console.log('user data ', this.userData);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get time period 
+    this.http.get(this.authSer.pathApi + '/page_list/53/1/1000/for_communication').subscribe(
+      (response) => {
+        console.log('time period', response);
+        this.times = response['time_periods'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get location parent
+    this.http.get(this.authSer.pathApi + '/parent_locations_list').subscribe(
+      (response) => {
+        this.locationList = response['locations'];
+        console.log('parent location' , this.locationList);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+  }
+
+  changeParentCategory(event) {
+    console.log(event.target.value);
+    this.getChildGategories(event.target.value);
+  }  
+
+
+  //get child gategories 
+  getChildGategories(parentId: number) {
+    this.http.get(this.authSer.pathApi + '/childs_categories_list_by_parent_id/' + parentId).subscribe(
+      (responce) => {
+        console.log('childs_categories_list_by_parent_id', responce);
+        this.childsCategoriesList = responce['categories'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  };
+
+  //get adminstration list 
+  getsectionsList(dataSearch) {
+    const searchKey = dataSearch ? dataSearch : '';
+    console.log('urrrl', this.authSer.pathApi + '/page_list/4/1/1000/' + this.userAdminstrationId);
+     this.http.get(this.authSer.pathApi + '/page_list/4/1/1000/' + this.userAdminstrationId  + searchKey).subscribe(
+      (responce) => {
+        console.log('sections', responce);
+        this.departments = responce['departments'];
+        console.log('sections', responce);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  };
+
+  //search function 
+  filtterFunc(event) {
+    this.departments = [];
+    console.log(event.target.value);
+    this.getsectionsList(event.target.value);
+  }
+
+
+  //make all checkbox of user checked 
+  selectAll() {
+    for (var i = 0; i < this.departments.length; i++) {
+      this.departments[i].selected = this.selectedAll;
+    }
+  }
+
+  //to checked one checkBox 
+  checkIfAllSelected() {
+    this.selectedAll = this.departments.every(function(item:any) {
+      return item.selected == true;
+    });
+  }
+
+  //get departments ids 
+  getDepartments() {
+    this.selectedDepartments = [];
+    for(let i = 0; i < this.departments.length; i++) {
+      if(this.departments[i].selected == true) {
+        this.selectedDepartments.push(this.departments[i]);
+      }
+    }
+    console.log(this.selectedDepartments);
+  }
+
+  //get sub location list 
+  getSublocationList(parentId: any) {
+    this.http.get(this.authSer.pathApi + '/childs_locations_list_by_parent_id/' + parentId).subscribe(  
+      (response)  => {
+        this.subLocationList = response['locations'];
+        console.log('sub Location', this.subLocationList);
+      },
+      (error) => {
+        console.log(error)
+      }
+     );
+  }
+
+  //get value of reason reOpen
+  getReopenReason(event) {
+    console.log(event.target.value);
+    console.log(this.reOpenReasonObject);
+    this.reOpenReasonObject.reopen_closed_communication = event.target.value;
+  }
+
+  //reOpen mentainence function
+  reOpenMaintenance() {
+    this.http.post(this.authSer.pathApi + '/reopen_closed_communication', this.reOpenReasonObject).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.toastr.success('تم إعاده الفتح بنجاح');
+        this.location.back();
+      },
+      (error) => {
+        console.log(error);
+        this.toastr.error('حدث خطا في الحفظ ، حاول لاحقاً');
+        this.location.back();
+      }
+    );
+  }
+
+
+  //remove selected adminsration 
+  removeSelectedAdminsration(departmentData) {
+    console.log(departmentData);
+
+    //to remove checked from adminstrations list
+      for(let j = 0; j < this.departments.length; j++) {
+        if(departmentData.id == this.departments[j].id) {
+          this.departments[j].selected = false;
+        }
+      }
+    
+    const index = this.selectedDepartments.indexOf(departmentData);
+    this.selectedDepartments.splice(index, 1);
+    
+    console.log(index);
+  }
+
+  //return substring of subject and check negaive and positive time 
+    returnEditData() {
+      for(let i = 0; i < this.maintData['adminstrations'].length; i++) {
+          this.maintData['adminstrations'][i].countdown = this.maintData['adminstrations'][i].countdown ? this.dashBoardSer.secondsToDhms(this.maintData['adminstrations'][i].countdown) : '-';
+          console.log(this.maintData['adminstrations'][i].countdown);
+      }
+    }
+
+
+  //submitted form 
+  onSubmittedForm() {
+    
+    //this.checkSaveClick = true; //make save btn disabled till request is success 
+
+
+    if(this.formData.department_status) {
+      this.formData.department_status = 'closed';
+    } else {
+      this.formData.department_status = '';
+      this.formData.closed_status_reason = '';
+    }
+
+   
+
+   console.log(this.formData);
+
+
+  //  if(this.formData.status == 'closed' && this.formData.closed_status_reason == '') {
+  //    this.toastr.warning('أدخل سبب الرفض !');
+  //  } else {
+  //     this.http.post(this.authSer.pathApi + '/adminstration_handle_communication', this.formData).subscribe(
+  //     (responce) => {
+  //       console.log(responce);
+  //       this.toastr.success('تم الحفظ بنجاح');
+  //       this.location.back();
+  //     },
+  //     (error) => {
+  //       console.log(error);
+  //       this.toastr.error('خطأ في الحفظ حاول لاحقاً');
+  //     }
+  //   );
+  //  }
+   
+  }
+
+}

src/app/dashboard/follow-communications/follow-communications-add/follow-communications-add.component.css

@@ -0,0 +1,314 @@
+.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;
+}
+    
+
+
+/* .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/follow-communications/follow-communications-add/follow-communications-add.component.html

@@ -0,0 +1,312 @@
+<div class="addHospital-w">
+  <div class="container">
+    
+    <!-- <h3 style="font-size: 18px; color: red">سيتم تحديث الصفحه بعد  <countdown #countdown [config]="{leftTime: 180}">$!m!:$!s!</countdown></h3> -->
+    <h3 style="font-size: 18px; color: red">سيتم تحديث الصفحه بعد  {{counter$ | async }} ثانيه</h3>
+
+    <div class="row">
+      <div class="col-12">
+        <ul class="list-unstyled titileLi-w">
+          <li class="headingText-w">خدمه البلاغات  </li>
+          <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()"> عرض التفاصيل</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="containerContent-w">
+        <form (ngSubmit)="onSubmittedForm()" #f="ngForm">
+          <div class="row">
+            <div class="col-12">
+              <h2 class="title">بيانات منشئ البلاغ</h2>
+              <div class="row">
+                <div class="wrapper">
+                  
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label for="name" style="float:right">رقم البلاغ</label>
+                      <input id="name" type="text" class="form-control" placeholder="رقم البلاغ" ngModel name="commmun_number"  [(ngModel)]="maintData.id" [disabled]="disabledInput" />
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label for="name" style="float:right">إسم المستخدم</label>
+                      <input id="name" type="text" class="form-control" placeholder="الإسم" ngModel name="name"  [(ngModel)]="userData.comm_creator_name" [disabled]="disabledInput" />
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label for="name" style="float:right">الإداره</label>
+                      <input id="name" type="text" class="form-control" placeholder="الإداره" ngModel name="comm_adminstration_creator_name"  [(ngModel)]="userData.comm_adminstration_creator_name" [disabled]="disabledInput" />
+                    </div>
+                   </div>
+                  
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                    <label style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
+                    <input type="phone" placeholder="رقم الجوال" class="form-control" ngModel name="phone" [(ngModel)]="userData.comm_creator_phone" [disabled]="disabledInput" />
+                    </div>
+                  </div>
+      
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label for="endDate" style="float:right" >التاريخ<span class="spanReqired-w">*</span></label>
+                      <div *ngIf='bindingDateSplitEnd'>
+                        <app-end-higri-date  (onDatePicked)="getDate($event, 'end')" [myEndDate]="bindingDateSplitEnd" [higriDisabled]="disabledVal"> </app-end-higri-date>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label for="time" style="float:right"> الوقت<span class="spanReqired-w">*</span></label>
+                      <input type="time" id="time" placeholder="الوقت" class="form-control" ngModel name="time" [(ngModel)]="maintData.created_time" [disabled]="disabledInput" /> 
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+           <div class="col-12">
+              <h2 class="title">بيانات البلاغ</h2>
+              <div class="row">
+                <div class="wrapper">
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label for="subject"  style="float: right; margin-right:5px;margin-top:10px">موضوع البلاغ</label>
+                      <input type="text" id="subject" class="form-control" placeholder="موضوع البلاغ" name="subject" ngModel [(ngModel)]="maintData.subject" [disabled]="disabledInput" />
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label for="message"  style="float: right; margin-right:5px;margin-top:10px">نص البلاغ</label>
+                      <input type="text" id="message" class="form-control" placeholder="نص البلاغ" name="message" ngModel [(ngModel)]="maintData.message" [disabled]="disabledInput" />
+                    </div>
+                  </div>
+
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4" style="margin-top: 10px;">
+                      <div class="form-group">
+                        <label for="reportTopic" style="float: right;margin-right: 5px">  الموقع الرئيسي </label>
+                        <select name="main_location_id" class="form-control" [ngModel]="mainLocationVal" (change)="onChangemainLocation($event)" [disabled]="disabledInput" >
+                          <option *ngFor="let location of locationList" [value]="location.id" required> {{location.name}} </option>    
+                        </select>                  
+                      </div>     
+                   </div>
+                   
+                   <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                      <div class="form-group">
+                        <label for="sub_location_id"  style="float: right;margin-right: 5px">  الموقع الفرعي </label>
+                        <select name="sub_location_id" class="form-control" [ngModel]="subLocationVal" (change)="changeSubLocation($event)" [disabled]="disabledInput">
+                          <option *ngFor="let location of subLocationList" [value]="location.id" required> {{location.name}} </option>    
+                        </select>
+                      </div>
+                   </div>
+
+                   <div class="col-12">
+                      <h2 class="title">المرفقات</h2>
+                      <div class="row">
+                        <div class="wrapper">
+                          <h3 *ngIf="!showAttachements" style="font-size: 18px;">لا توجد مرفقات لعرضها </h3>
+
+                          <table class="table table-bordered" *ngIf="showAttachements">
+                            <thead class="headBackground-w">
+                              <tr>
+                                <th> إسم المرفق</th>
+                                <th>عرض الملف</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr style="text-align:center;" *ngFor="let file of maintData['files']; let i = index">
+                                <td><input type="text" class="form-control" placeholder="إسم الملف" [(ngModel)]="file.title" [ngModelOptions]="{standalone: true}" [disabled]="disabledInput" /></td>
+                                <th style="text-align:center"><a href="{{authSer.pathImg + file.file}}" target="_blank"><i class="fas fa-download"></i></a></th>
+                              </tr>
+                            </tbody>
+                          </table>
+          
+                        </div>
+                      </div>
+                  
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+
+          <div class="col-12">
+              <h2 class="title">عمليات البلاغ</h2>
+              <div class="row">
+                <div class="wrapper">
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                    <div class="form-group">
+                      <label style="float:right" for="parent_category_id">التصنيف الرئيسي</label>
+                      <select class="form-control" id="parent_category_id" style="padding:0 5px" ngModel name="parent_category_id" (input)="changeParentCategory($event)" [(ngModel)]="communicationData.parent_category_id" [disabled]="disabledInput">
+                        <option *ngFor="let categorie of parentCategoriesList; let i = index" [value]="categorie.id">{{categorie.name}}</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="checkStatusClosed">
+                    <div class="form-group">
+                      <label style="float:right" for="reopen_reason">سبب إعاده فتح البلاغ</label>
+                      <select class="form-control" id="reopen_reason" style="padding:0 5px" ngModel name="reopen_reason" (input)="getReopenReason($event)" [(ngModel)]="reOpenReasonObject.reopen_closed_communication">
+                        <option value="ظهور المشكلة مجددا">ظهور المشكلة مجددا</option>
+                        <option value="عدم حل المشكلة من البداية">عدم حل المشكلة من البداية</option>
+                        <option value="إغلاق البلاغ دون موافقتنا">إغلاق البلاغ دون موافقتنا</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label style="float:right" for="child_category_id">التصنيف الفرعي</label>
+                      <select class="form-control" id="child_category_id" style="padding:0 5px" ngModel name="child_category_id" [(ngModel)]="communicationData.child_category_id" [disabled]="disabledInput">
+                        <option *ngFor="let childCategorie of childsCategoriesList; let i = index" [value]="childCategorie.id">{{childCategorie.name}}</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="col-12 col-md-4">
+                    <div class="form-group">
+                      <label style="float:right" for="time_period_id">الفئه - الوقت</label>
+                      <select class="form-control" id="time_period_id" style="padding:0 5px" ngModel name="time_period_id" [(ngModel)]="communicationData.time_period_id" [disabled]="disabledInput">
+                        <option *ngFor="let timePeriod of times; let i = index" [value]="timePeriod.id">{{timePeriod.name}}</option>
+                      </select>
+                    </div>
+                  </div>
+                  
+                  <div class="col-12 col-md-12">
+                    <div class="form-group">
+                      <label for="maintenance_notes" style="float:right">ملاحظات إداره الصيانه</label>
+                      <textarea cols="3" class="form-control" name="maintenance_notes" id="maintenance_notes" [(ngModel)]="communicationData.maintenance_notes" [disabled]="disabledInput"> </textarea>
+                    </div>
+                  </div>
+
+               
+
+                  <div class="col-12 col-md-4">
+                    <div style="float:right">
+                      <input type="checkbox" class="form-check-input" name="urgent_communication" id="urgent_communication" [(ngModel)]="communicationData.urgent_communication" [value]="communicationData.urgent_communication" [disabled]="disabledInput">
+                      <label class="form-check-label" for="urgent_communication" style="margin: 0 20px;">بلاغ عاجل</label>
+                    </div>
+                  </div>
+
+              </div>
+            </div>
+          </div>
+
+          <div class="col-12">
+              <h2 class="title">إغلاف البلاغ</h2>
+              <div class="row">
+                <div class="wrapper" style="padding: 10px 20px;">
+                    <div style="float:right">
+                      <input type="checkbox" class="form-check-input" name="status" id="status" [(ngModel)]="communicationData.status" [value]="communicationData.status" [disabled]="disabledInput">
+                      <label class="form-check-label" for="status" style="margin: 0 20px;">إغلاق البلاغ</label>
+                    </div>
+                    <div class="col-12 col-md-12" style="margin: 20px 0;" *ngIf="communicationData.status">
+                      <div class="form-group">
+                        <label for="closed_status_reason" style="float:right; margin-right: 5px;"> سبب إغلاق البلاغ</label>
+                        <textarea cols="3" class="form-control" name="closed_status_reason" id="closed_status_reason" [(ngModel)]="communicationData.closed_status_reason" [disabled]="disabledInput"> </textarea>
+                      </div>
+                    </div>
+                </div>
+              </div>
+          
+            </div>
+
+            <div class="col-12">
+              <h2 class="title">الإدارات الموجه لها البلاغ</h2>
+              <div class="row">
+                <div class="wrapper">
+                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" style="float: right; margin: 20px 0;" [disabled]="disabledInput">
+                      الإدارات الموجه لها البلاغ
+                  </button>
+
+                  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+                    <div class="modal-dialog" role="document">
+                      <div class="modal-content">
+                        <div class="modal-header">
+                          <h5 class="modal-title" id="exampleModalLabel">الإدارات</h5>
+                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                          </button>
+                        </div>
+                        <div class="modal-body">
+                          <div class="form-group">
+                            <input type="text" placeholder="البحث" class="form-control inputSearchTable-w" style="margin-top:0;" (input)="filtterFunc($event)"/>
+                            <hr>
+                          </div>
+                          <table class="table table-bordered" *ngIf="this.count != 0">
+                            <thead class="headBackground-w">
+                              <tr>
+                                  <th style="text-align:right">
+                                  <div class="custom-control custom-checkbox">
+                                    <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                                  </div>
+                                </th>
+                                <th style="text-align:right">الإسم</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr *ngFor="let data of adminstrations ">
+                                <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();" [ngModelOptions]="{standalone: true}">
+                                    <label class="custom-control-label disblayBlock-w" for="{{data.id}}" style="color:#2a2a2a"></label>
+                                  </div>
+                                </td>
+                                <td>{{data.name}}</td>
+                              </tr>
+                          </tbody>
+                        </table>
+                        </div>
+                        <div class="modal-footer">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal" style="margin: 0 10px;">إغلاق</button>
+                          <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="getDepartments()">حفظ</button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <table class="table table-bordered">
+                    <thead class="headBackground-w">
+                      <tr>
+                        <th>الجهه المستلمه للبلاغ</th>
+                        <th>وقت التحويل</th>
+                        <th>ملاحظات</th>
+                        <th>حاله البلاغ</th>
+                        <th>مده التأخير</th>
+                        <!-- <th>حذف</th> -->
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr *ngFor="let selectAdmin of selectedAdminstrations; let i = index">
+                        <td>{{selectAdmin.name ? selectAdmin.name : '-'}}</td>
+                        <td>{{ selectAdmin.created_at ? selectAdmin.created_at : '-' }}</td>
+                        <td>{{selectAdmin.adminstration_notes ? selectAdmin.adminstration_notes : '-'}}</td>
+                        <td>
+                          {{ 
+                            selectAdmin.adminstration_status == 'new' ? 'جديد' 
+                            : selectAdmin.adminstration_status == 'closed' ? 'مغلق' 
+                            : selectAdmin.adminstration_status == 'reopen' ? 'إستأنف' 
+                            : selectAdmin.adminstration_status == 'redirect_to_adminstrations' ? 'العائد للإدارات' : 'لايوجد'}}
+                        </td>
+                        <td style="font-size: 14px;">{{selectAdmin.countdown}}</td>
+                        <!-- <td><button type="button" class="btn btn-danger" (click)="removeSelectedAdminsration(selectAdmin)">حذف</button></td> -->
+                      </tr>
+                  </tbody>
+                </table>
+                
+                </div>
+              </div>            
+            </div>
+
+            <div class="col-12">
+              <button type="button" class="btn btn-primary rightW" *ngIf="checkStatusClosed" (click)="reOpenMaintenance()">إعاده فتح البلاغ</button>
+              <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
+            </div>
+          </div>
+        </form>
+      </div>
+  </div>
+</div>
+

src/app/dashboard/follow-communications/follow-communications-add/follow-communications-add.component.ts

@@ -0,0 +1,410 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { UserService } from 'src/app/shared/user.service';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { Location } from '@angular/common';
+import { timer, Observable } from 'rxjs';
+import { take, map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-follow-communications-add',
+  templateUrl: './follow-communications-add.component.html',
+  styleUrls: ['./follow-communications-add.component.css']
+})
+
+export class FollowCommunicationsAddComponent implements OnInit {
+
+  pageId: number;
+  bindingDateSplitEnd;
+
+  maintData:any = [];
+  userData:any = [];
+  times:any = [];
+  locationList: any = [];
+  subLocationList: any = [];
+
+  parentCategoriesList = [];
+  childsCategoriesList: any = [];
+  adminstrationsIds: any = [];
+  adminstrations: any = [];
+  selectedAdminstrations: any = [];
+
+
+  //reopen object 
+  reOpenReasonObject = {
+    communication_id: null,
+    reopen_closed_communication: '',
+  }
+
+  selectedAll: any;
+  mainLocationVal = '';
+  subLocationVal = '';
+  checkSaveClick: boolean = false;
+  checkStatusClosed: boolean = false;
+
+  communicationData = {
+    communication_id: null,
+    parent_category_id: null,
+    child_category_id: null,
+    time_period_id: '',
+    maintenance_notes: '',
+    status: null,
+    closed_status_reason: '',
+    urgent_communication: '',
+  };
+
+  countries = [];
+  identities = [];
+
+  disabledInput: boolean = true;
+  showAttachements: boolean = false;
+  disabledVal: boolean = true;
+  adminstrationsButtonDisabled: boolean = false;
+
+  counter$: Observable<number>;
+  counter = 180;
+
+  constructor(private route: ActivatedRoute, 
+    private dashBoardSer: DashboardService,
+    private userSer: UserService,
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private location: Location,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService) { }
+
+  ngOnInit() {
+
+    this.spinner.show();
+
+    //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;
+
+    //reload page every 10 seconds
+    setTimeout(function(){
+      location.reload(); 
+    },180000);
+
+    this.counter$ = timer(0,1000).pipe(
+      take(this.counter),
+      map(() => --this.counter)
+    );
+      
+    //get maintenance id
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.pageId = params['followCommunicationId'];
+        this.communicationData.communication_id = this.pageId;
+        this.reOpenReasonObject.communication_id = this.pageId;
+      }
+    );
+
+     //get adminstration list 
+     this.getAdminstrationList('');
+
+     //get nationality data
+     this.userSer.getNationality().subscribe(
+      (responce) => {
+        console.log(responce);
+        this.countries = responce['countries'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get identites
+    this.userSer.onGetIdentities().subscribe(
+      (responce) => {
+        this.identities = responce['identities'];
+        console.log('idddentiiiesssssssssss', this.identities);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+
+    //get parent_categories_list
+    this.http.get(this.authSer.pathApi + '/parent_categories_list').subscribe(
+      (responce) => {
+        console.log('parent_categories_list', responce);
+        this.parentCategoriesList = responce['categories'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get maintanence data by id
+    this.dashBoardSer.getItemData(this.pageId, 'maintenance').subscribe(
+      (responce) => {
+        
+        this.maintData = responce['communication'];
+        console.log('main data ', this.maintData);
+        this.communicationData.maintenance_notes = this.maintData.maintenance_notes;
+        this.communicationData.status = this.maintData.status == 'closed' ? this.maintData.status : false;
+        this.communicationData.time_period_id = this.maintData.time_period_id;
+        this.communicationData.closed_status_reason = this.maintData.closed_status_reason ? this.maintData.closed_status_reason : '';
+        this.communicationData.parent_category_id = this.maintData.parent_category_id;
+        this.getChildGategories(this.communicationData.parent_category_id);
+        this.communicationData.child_category_id = this.maintData.child_category_id;
+        //get main_location_id
+        this.mainLocationVal = this.maintData.main_location_id;
+        this.getSublocationList(this.mainLocationVal);
+        this.subLocationVal = this.maintData.sub_location_id;
+
+        this.returnEditData(); 
+        
+        //check status closed or no
+        if(this.maintData.reopen == 1) {
+          this.checkStatusClosed = true;
+        } else {
+          this.checkStatusClosed = false;
+        }
+
+        this.selectedAdminstrations = [];
+        if(this.maintData.adminstrations.length > 0) {
+          for(let i = 0; i < this.maintData.adminstrations.length; i++) {
+            this.selectedAdminstrations.push(this.maintData.adminstrations[i]);
+            for(let j = 0; j < this.adminstrations.length; j++) {
+              if(this.maintData.adminstrations[i].id == this.adminstrations[j].id) {
+                this.adminstrations[i].selected = true;
+              }
+            }
+          }
+        }
+
+        console.log('selected adminstrations', this.selectedAdminstrations);
+
+        
+        this.bindingDateSplitEnd = {
+          year: parseInt(this.maintData.created_date.split('-')[0]),
+          month: parseInt(this.maintData.created_date.split('-')[1]),
+          day: parseInt(this.maintData.created_date.split('-')[2]),
+        }
+
+        this.userData = responce['communication']['user'];
+        this.spinner.hide();
+        console.log('gggg', this.maintData);
+        if(this.maintData['files'].length > 0) {
+          this.showAttachements = true;
+        } else {
+          this.showAttachements = false;
+        }
+        console.log('user data ', this.userData);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get time period 
+    this.http.get(this.authSer.pathApi + '/page_list/53/1/1000/for_communication').subscribe(
+      (response) => {
+        console.log('time period', response);
+        this.times = response['time_periods'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get location parent
+    this.http.get(this.authSer.pathApi + '/parent_locations_list').subscribe(
+      (response) => {
+        this.locationList = response['locations'];
+        console.log('parent location' , this.locationList);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+  }
+
+  changeParentCategory(event) {
+    console.log(event.target.value);
+    this.getChildGategories(event.target.value);
+  }  
+
+
+  //get child gategories 
+  getChildGategories(parentId: number) {
+    this.http.get(this.authSer.pathApi + '/childs_categories_list_by_parent_id/' + parentId).subscribe(
+      (responce) => {
+        console.log('childs_categories_list_by_parent_id', responce);
+        this.childsCategoriesList = responce['categories'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  };
+
+  //get adminstration list 
+  getAdminstrationList(dataSearch) {
+    const searchKey = dataSearch ? dataSearch : '';
+
+     this.http.get(this.authSer.pathApi + '/page_list/3/1/1000/all'  + searchKey).subscribe(
+      (responce) => {
+        console.log('adminstraitions', responce);
+        this.adminstrations = responce['adminstrations'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  };
+
+  //search function 
+  filtterFunc(event) {
+    this.adminstrations = [];
+    console.log(event.target.value);
+    this.getAdminstrationList(event.target.value);
+  };
+
+
+  //make all checkbox of user checked 
+  selectAll() {
+    for (var i = 0; i < this.adminstrations.length; i++) {
+      this.adminstrations[i].selected = this.selectedAll;
+    }
+  };
+
+  
+  //to checked one checkBox 
+  checkIfAllSelected() {
+    this.selectedAll = this.adminstrations.every(function(item:any) {
+      return item.selected == true;
+    });
+  };
+
+  //get departments ids 
+  getDepartments() {
+    this.adminstrationsIds = [];
+    this.selectedAdminstrations = [];
+    for(let i = 0; i < this.adminstrations.length; i++) {
+      if(this.adminstrations[i].selected == true) {
+        this.adminstrationsIds.push(this.adminstrations[i].id);
+        this.selectedAdminstrations.push(this.adminstrations[i]);
+      }
+    }
+    console.log(this.adminstrationsIds);
+    console.log(this.selectedAdminstrations);
+  };
+
+  //get sub location list 
+  getSublocationList(parentId: any) {
+    this.http.get(this.authSer.pathApi + '/childs_locations_list_by_parent_id/' + parentId).subscribe(  
+      (response)  => {
+        this.subLocationList = response['locations'];
+        console.log('sub Location', this.subLocationList);
+      },
+      (error) => {
+        console.log(error)
+      }
+     );
+  }
+
+  //get value of reason reOpen
+  getReopenReason(event) {
+    console.log(event.target.value);
+    console.log(this.reOpenReasonObject);
+    this.reOpenReasonObject.reopen_closed_communication = event.target.value;
+  }
+
+  //reOpen mentainence function
+  reOpenMaintenance() {
+    this.http.post(this.authSer.pathApi + '/reopen_closed_communication', this.reOpenReasonObject).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.toastr.success('تم إعاده الفتح بنجاح');
+        this.location.back();
+      },
+      (error) => {
+        console.log(error);
+        this.toastr.error('حدث خطا في الحفظ ، حاول لاحقاً');
+        this.location.back();
+      }
+    );
+  }
+
+
+  //remove remove selected adminsration 
+  removeSelectedAdminsration(adminstrationData) {
+    console.log(adminstrationData);
+
+    //to remove checked from adminstrations list
+      for(let j = 0; j < this.adminstrations.length; j++) {
+        if(adminstrationData.id == this.adminstrations[j].id) {
+          this.adminstrations[j].selected = false;
+        }
+      }
+    
+    const index = this.selectedAdminstrations.indexOf(adminstrationData);
+    this.selectedAdminstrations.splice(index, 1);
+    
+    console.log(index);
+  }
+
+    //return substring of subject and check negaive and positive time 
+returnEditData() {
+  for(let i = 0; i < this.maintData['adminstrations'].length; i++) {
+      this.maintData['adminstrations'][i].countdown = this.maintData['adminstrations'][i].countdown ? this.dashBoardSer.secondsToDhms(this.maintData['adminstrations'][i].countdown) : '-';
+      console.log(this.maintData['adminstrations'][i].countdown);
+  }
+}
+
+
+  //submitted form 
+  onSubmittedForm() {
+    
+    this.checkSaveClick = true; //make save btn disabled till request is success 
+
+
+    if(this.communicationData.status) {
+      this.communicationData.status = 'closed';
+    } else {
+      this.communicationData.status = '';
+      this.communicationData.closed_status_reason = '';
+    }
+
+    if(this.communicationData.urgent_communication) {
+      this.communicationData.urgent_communication = '1';
+    } else {
+      this.communicationData.urgent_communication = '';
+    }
+
+    this.communicationData['adminstrations_ids'] = this.adminstrationsIds;
+    console.log(this.communicationData);
+
+    if(this.adminstrationsIds.length == 0 && this.communicationData.urgent_communication == '1') {
+      this.toastr.warning('قم بإختيار الإدارات');
+      this.checkSaveClick = false;
+    } else {
+      this.http.post(this.authSer.pathApi + '/maintenance_handle_communication', this.communicationData).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تم الحفظ بنجاح');
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.toastr.error('خطأ في الحفظ حاول لاحقاً');
+        }
+      );
+    }
+
+  }
+
+}

src/app/dashboard/main-menu/add-menu/add-menu.component.ts

@@ -126,7 +126,7 @@ export class AddMenuComponent implements OnInit {
         console.log('external pagesssssssssssssssss' , responce);
         this.internalPages = responce['pages'];
       }
-    )
+    );
 
     this.menuService.getParentList().subscribe(
       (responce) => {

src/app/dashboard/maintenance-communications/maintenance-communication-edit/maintenance-communication-edit.component.css

@@ -0,0 +1,314 @@
+.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;
+}
+    
+
+
+/* .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/maintenance-communications/maintenance-communication-edit/maintenance-communication-edit.component.html

@@ -0,0 +1,319 @@
+<div class="addHospital-w">
+    <div class="container">
+      
+      <!-- <h3 style="font-size: 18px; color: red">سيتم تحديث الصفحه بعد  <countdown #countdown [config]="{leftTime: 180}">$!m!:$!s!</countdown></h3> -->
+      <h3 style="font-size: 18px; color: red">سيتم تحديث الصفحه بعد  {{counter$ | async }} ثانيه</h3>
+
+
+      <div class="row">
+        <div class="col-12">
+          <ul class="list-unstyled titileLi-w">
+            <li class="headingText-w">خدمه البلاغات  </li>
+            <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()"> عرض التفاصيل</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="containerContent-w">
+          <form (ngSubmit)="onSubmittedForm()" #f="ngForm">
+            <div class="row">
+              <div class="col-12">
+                <h2 class="title">بيانات منشئ البلاغ</h2>
+                <div class="row">
+                  <div class="wrapper">
+                    
+                    <div class="col-12 col-md-4">
+                      <div class="form-group">
+                        <label for="name" style="float:right">رقم البلاغ</label>
+                        <input id="name" type="text" class="form-control" placeholder="رقم البلاغ" ngModel name="commmun_number"  [(ngModel)]="maintData.id" [disabled]="disabledInput" />
+                      </div>
+                    </div>
+
+                    <div class="col-12 col-md-4">
+                      <div class="form-group">
+                        <label for="name" style="float:right">إسم المستخدم</label>
+                        <input id="name" type="text" class="form-control" placeholder="الإسم" ngModel name="name"  [(ngModel)]="userData.comm_creator_name" [disabled]="disabledInput" />
+                      </div>
+                    </div>
+
+                    <div class="col-12 col-md-4">
+                      <div class="form-group">
+                        <label for="name" style="float:right">الإداره</label>
+                        <input id="name" type="text" class="form-control" placeholder="الإداره" ngModel name="comm_adminstration_creator_name"  [(ngModel)]="userData.comm_adminstration_creator_name" [disabled]="disabledInput" />
+                      </div>
+                     </div>
+                    
+  
+                    <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                      <div class="form-group">
+                      <label style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
+                      <input type="phone" placeholder="رقم الجوال" class="form-control" ngModel name="phone" [(ngModel)]="userData.comm_creator_phone" [disabled]="disabledInput" />
+                      </div>
+                    </div>
+        
+                    <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                      <div class="form-group">
+                        <label for="endDate" style="float:right" >التاريخ<span class="spanReqired-w">*</span></label>
+                        <div *ngIf='bindingDateSplitEnd'>
+                          <app-end-higri-date  (onDatePicked)="getDate($event, 'end')" [myEndDate]="bindingDateSplitEnd" [higriDisabled]="disabledVal"> </app-end-higri-date>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                      <div class="form-group">
+                        <label for="time" style="float:right"> الوقت<span class="spanReqired-w">*</span></label>
+                        <input type="time" id="time" placeholder="الوقت" class="form-control" ngModel name="time" [(ngModel)]="maintData.created_time" [disabled]="disabledInput" /> 
+                      </div>
+                    </div>
+  
+                   
+  
+                  </div>
+                </div>
+              </div>
+  
+             <div class="col-12">
+                <h2 class="title">بيانات البلاغ</h2>
+                <div class="row">
+                  <div class="wrapper">
+                    <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                      <div class="form-group">
+                        <label for="subject"  style="float: right; margin-right:5px;margin-top:10px">موضوع البلاغ</label>
+                        <input type="text" id="subject" class="form-control" placeholder="موضوع البلاغ" name="subject" ngModel [(ngModel)]="maintData.subject" [disabled]="disabledInput" />
+                      </div>
+                    </div>
+
+                    <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                      <div class="form-group">
+                        <label for="message"  style="float: right; margin-right:5px;margin-top:10px">نص البلاغ</label>
+                        <input type="text" id="message" class="form-control" placeholder="نص البلاغ" name="message" ngModel [(ngModel)]="maintData.message" [disabled]="disabledInput" />
+                      </div>
+                    </div>
+
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4" style="margin-top: 10px;">
+                        <div class="form-group">
+                          <label for="reportTopic" style="float: right;margin-right: 5px">  الموقع الرئيسي </label>
+                          <select name="main_location_id" class="form-control" [ngModel]="mainLocationVal" (change)="onChangemainLocation($event)" [disabled]="disabledInput" >
+                            <option *ngFor="let location of locationList" [value]="location.id" required> {{location.name}} </option>    
+                          </select>                  
+                        </div>     
+                     </div>
+                     
+                     <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                        <div class="form-group">
+                          <label for="sub_location_id"  style="float: right;margin-right: 5px">  الموقع الفرعي </label>
+                          <select name="sub_location_id" class="form-control" [ngModel]="subLocationVal" (change)="changeSubLocation($event)" [disabled]="disabledInput">
+                            <option *ngFor="let location of subLocationList" [value]="location.id" required> {{location.name}} </option>    
+                          </select>
+                        </div>
+                     </div>
+
+                     <div class="col-12">
+                        <h2 class="title">المرفقات</h2>
+                        <div class="row">
+                          <div class="wrapper">
+                            <h3 *ngIf="!showAttachements" style="font-size: 18px;">لا توجد مرفقات لعرضها </h3>
+
+                            <table class="table table-bordered" *ngIf="showAttachements">
+                              <thead class="headBackground-w">
+                                <tr>
+                                  <th> إسم المرفق</th>
+                                  <th>عرض الملف</th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                <tr style="text-align:center;" *ngFor="let file of maintData['files']; let i = index">
+                                  <td><input type="text" class="form-control" placeholder="إسم الملف" [(ngModel)]="file.title" [ngModelOptions]="{standalone: true}" [disabled]="disabledInput"/></td>
+                                  <th style="text-align:center"><a href="{{authSer.pathImg + file.file}}" target="_blank"><i class="fas fa-download"></i></a></th>
+                                </tr>
+                              </tbody>
+                            </table>
+            
+                          </div>
+                        </div>
+                    
+                      </div>
+
+                    </div>
+                  </div>
+                </div>
+
+            <div class="col-12">
+                <h2 class="title">عمليات البلاغ</h2>
+                <div class="row">
+                  <div class="wrapper">
+                    <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                      <div class="form-group">
+                        <label style="float:right" for="parent_category_id">التصنيف الرئيسي</label>
+                        <select class="form-control" id="parent_category_id" style="padding:0 5px" ngModel name="parent_category_id" (input)="changeParentCategory($event)" [(ngModel)]="communicationData.parent_category_id">
+                          <option *ngFor="let categorie of parentCategoriesList; let i = index" [value]="categorie.id">{{categorie.name}}</option>
+                        </select>
+                      </div>
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="checkStatusClosed">
+                      <div class="form-group">
+                        <label style="float:right" for="reopen_reason">سبب إعاده فتح البلاغ</label>
+                        <select class="form-control" id="reopen_reason" style="padding:0 5px" ngModel name="reopen_reason" (input)="getReopenReason($event)" [(ngModel)]="reOpenReasonObject.reopen_closed_communication">
+                          <option value="ظهور المشكلة مجددا">ظهور المشكلة مجددا</option>
+                          <option value="عدم حل المشكلة من البداية">عدم حل المشكلة من البداية</option>
+                          <option value="إغلاق البلاغ دون موافقتنا">إغلاق البلاغ دون موافقتنا</option>
+                        </select>
+                      </div>
+                    </div>
+                    <div class="col-12 col-md-4">
+                      <div class="form-group">
+                        <label style="float:right" for="child_category_id">التصنيف الفرعي</label>
+                        <select class="form-control" id="child_category_id" style="padding:0 5px" ngModel name="child_category_id" [(ngModel)]="communicationData.child_category_id">
+                          <option *ngFor="let childCategorie of childsCategoriesList; let i = index" [value]="childCategorie.id">{{childCategorie.name}}</option>
+                        </select>
+                      </div>
+                    </div>
+                    <div class="col-12 col-md-4">
+                      <div class="form-group">
+                        <label style="float:right" for="time_period_id">الفئه - الوقت</label>
+                        <select class="form-control" id="time_period_id" style="padding:0 5px" ngModel name="time_period_id" [(ngModel)]="communicationData.time_period_id">
+                          <option *ngFor="let timePeriod of times; let i = index" [value]="timePeriod.id">{{timePeriod.name}}</option>
+                        </select>
+                      </div>
+                    </div>
+                    
+                    <div class="col-12 col-md-12">
+                      <div class="form-group">
+                        <label for="maintenance_notes" style="float:right">ملاحظات إداره الصيانه</label>
+                        <textarea cols="3" class="form-control" name="maintenance_notes" id="maintenance_notes" [(ngModel)]="communicationData.maintenance_notes"> </textarea>
+                      </div>
+                    </div>
+
+                 
+
+                    <div class="col-12 col-md-4">
+                      <div style="float:right">
+                        <input type="checkbox" class="form-check-input" name="urgent_communication" id="urgent_communication" [(ngModel)]="communicationData.urgent_communication" [value]="communicationData.urgent_communication">
+                        <label class="form-check-label" for="urgent_communication" style="margin: 0 20px;">بلاغ عاجل</label>
+                      </div>
+                    </div>
+
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12">
+                <h2 class="title">إغلاف البلاغ</h2>
+                <div class="row">
+                  <div class="wrapper" style="padding: 10px 20px;">
+                      <div style="float:right">
+                        <input type="checkbox" class="form-check-input" name="status" id="status" [(ngModel)]="communicationData.status" [value]="communicationData.status">
+                        <label class="form-check-label" for="status" style="margin: 0 20px;">إغلاق البلاغ</label>
+                      </div>
+                      <div class="col-12 col-md-12" style="margin: 20px 0;" *ngIf="communicationData.status">
+                        <div class="form-group">
+                          <label for="closed_status_reason" style="float:right; margin-right: 5px;"> سبب إغلاق البلاغ</label>
+                          <textarea cols="3" class="form-control" name="closed_status_reason" id="closed_status_reason" [(ngModel)]="communicationData.closed_status_reason"> </textarea>
+                        </div>
+                      </div>
+                  </div>
+                </div>
+            
+              </div>
+
+              <div class="col-12">
+                <h2 class="title">الإدارات الموجه لها البلاغ</h2>
+                <div class="row">
+                  <div class="wrapper">
+                    <!-- Button trigger modal -->
+                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" style="float: right; margin: 20px 0;" [disabled]="communicationData.status">
+                        الإدارات الموجه لها البلاغ
+                    </button>
+
+                    <!-- Modal -->
+                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+                      <div class="modal-dialog" role="document">
+                        <div class="modal-content">
+                          <div class="modal-header">
+                            <h5 class="modal-title" id="exampleModalLabel">الإدارات</h5>
+                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                              <span aria-hidden="true">&times;</span>
+                            </button>
+                          </div>
+                          <div class="modal-body">
+                            <div class="form-group">
+                              <input type="text" placeholder="البحث" class="form-control inputSearchTable-w" style="margin-top:0;" (input)="filtterFunc($event)"/>
+                              <hr>
+                            </div>
+                            <table class="table table-bordered" *ngIf="this.count != 0">
+                              <thead class="headBackground-w">
+                                <tr>
+                                    <th style="text-align:right">
+                                    <div class="custom-control custom-checkbox">
+                                      <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                                    </div>
+                                  </th>
+                                  <th style="text-align:right">الإسم</th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                <tr *ngFor="let data of adminstrations ">
+                                  <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();" [ngModelOptions]="{standalone: true}">
+                                      <label class="custom-control-label disblayBlock-w" for="{{data.id}}" style="color:#2a2a2a"></label>
+                                    </div>
+                                  </td>
+                                  <td>{{data.name}}</td>
+                                </tr>
+                            </tbody>
+                          </table>
+                          </div>
+                          <div class="modal-footer">
+                            <button type="button" class="btn btn-secondary" data-dismiss="modal" style="margin: 0 10px;">إغلاق</button>
+                            <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="getDepartments()">حفظ</button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <table class="table table-bordered">
+                      <thead class="headBackground-w">
+                        <tr>
+                          <th>الجهه المستلمه للبلاغ</th>
+                          <th>وقت التحويل</th>
+                          <th>ملاحظات</th>
+                          <th>حاله البلاغ</th>
+                          <th>مده التأخير</th>
+                          <th>حذف</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr *ngFor="let selectAdmin of selectedAdminstrations; let i = index">
+                          <td>{{selectAdmin.name ? selectAdmin.name : '-'}}</td>
+                          <td>{{ selectAdmin.created_at ? selectAdmin.created_at : '-' }}</td>
+                          <td>{{selectAdmin.adminstration_notes ? selectAdmin.adminstration_notes : '-'}}</td>
+                          <td>
+                            {{ 
+                              selectAdmin.adminstration_status == 'new' ? 'جديد' 
+                              : selectAdmin.adminstration_status == 'closed' ? 'مغلق' 
+                              : selectAdmin.adminstration_status == 'reopen' ? 'إستأنف' 
+                              : selectAdmin.adminstration_status == 'redirect_to_adminstrations' ? 'العائد للإدارات' : 'لايوجد'}}
+                          </td>
+                          <td style="font-size: 12px;">{{selectAdmin.countdown}}</td>
+                          <td><button type="button" class="btn btn-danger" (click)="removeSelectedAdminsration(selectAdmin)">حذف</button></td>
+                        </tr>
+                    </tbody>
+                  </table>
+                  
+                  </div>
+                </div>            
+              </div>
+  
+              <div class="col-12">
+                <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveClick" *ngIf="!checkStatusClosed">حفظ</button>
+                <button type="button" class="btn btn-primary rightW" *ngIf="checkStatusClosed" (click)="reOpenMaintenance()">إعاده فتح البلاغ</button>
+                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
+              </div>
+            </div>
+          </form>
+        </div>
+    </div>
+  </div>
+  

src/app/dashboard/maintenance-communications/maintenance-communication-edit/maintenance-communication-edit.component.ts

@@ -0,0 +1,420 @@
+import { Observable } from 'rxjs/Observable';
+import { HttpClient } from '@angular/common/http';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { UserService } from 'src/app/shared/user.service';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { Location } from '@angular/common';
+import { timer } from 'rxjs';
+import { take, map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-maintenance-communication-edit',
+  templateUrl: './maintenance-communication-edit.component.html',
+  styleUrls: ['./maintenance-communication-edit.component.css']
+})
+export class MaintenanceCommunicationEditComponent implements OnInit {
+
+  pageId: number;
+  bindingDateSplitEnd;
+
+  maintData:any = [];
+  userData:any = [];
+  times:any = [];
+  locationList: any = [];
+  subLocationList: any = [];
+
+  parentCategoriesList = [];
+  childsCategoriesList: any = [];
+  adminstrationsIds: any = [];
+  adminstrations: any = [];
+  selectedAdminstrations: any = [];
+
+
+  //reopen object 
+  reOpenReasonObject = {
+    communication_id: null,
+    reopen_closed_communication: '',
+  }
+
+  selectedAll: any;
+  mainLocationVal = '';
+  subLocationVal = '';
+  checkSaveClick: boolean = false;
+  checkStatusClosed: boolean = false;
+
+  communicationData = {
+    communication_id: null,
+    parent_category_id: null,
+    child_category_id: null,
+    time_period_id: '',
+    maintenance_notes: '',
+    status: null,
+    closed_status_reason: '',
+    urgent_communication: '',
+  };
+
+  countries = [];
+  identities = [];
+
+  disabledInput: boolean = true;
+  showAttachements: boolean = false;
+  disabledVal: boolean = true;
+  adminstrationsButtonDisabled: boolean = false;
+
+  counter$: Observable<number>;
+  counter = 180;
+
+  constructor(private route: ActivatedRoute, 
+    private dashBoardSer: DashboardService,
+    private userSer: UserService,
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private location: Location,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService) { }
+
+  ngOnInit() {
+
+    this.spinner.show();
+      //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;
+
+      //reload page every 10 seconds
+      // setTimeout(function(){
+      //   location.reload(); 
+      // },180000);
+
+
+  
+
+      this.counter$ = timer(0,1000).pipe(
+        take(this.counter),
+        map(() => --this.counter)
+      );
+      
+    //get maintenance id
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.pageId = params['maintEditId'];
+        this.communicationData.communication_id = this.pageId;
+        this.reOpenReasonObject.communication_id = this.pageId;
+      }
+    );
+
+     //get adminstration list 
+     this.getAdminstrationList('');
+
+     //get nationality data
+     this.userSer.getNationality().subscribe(
+      (responce) => {
+        console.log(responce);
+        this.countries = responce['countries'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+      //get identites
+      this.userSer.onGetIdentities().subscribe(
+        (responce) => {
+          this.identities = responce['identities'];
+          console.log('idddentiiiesssssssssss', this.identities);
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+
+
+      //get parent_categories_list
+      this.http.get(this.authSer.pathApi + '/parent_categories_list').subscribe(
+        (responce) => {
+          console.log('parent_categories_list', responce);
+          this.parentCategoriesList = responce['categories'];
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+
+    //get maintanence data by id
+    this.dashBoardSer.getItemData(this.pageId, 'maintenance').subscribe(
+      (responce) => {
+        
+        this.maintData = responce['communication'];
+        console.log('main data ', this.maintData);
+        this.communicationData.maintenance_notes = this.maintData.maintenance_notes;
+        this.communicationData.status = this.maintData.status == 'closed' ? this.maintData.status : false;
+        this.communicationData.time_period_id = this.maintData.time_period_id;
+        this.communicationData.closed_status_reason = this.maintData.closed_status_reason ? this.maintData.closed_status_reason : '';
+        this.communicationData.parent_category_id = this.maintData.parent_category_id;
+        this.getChildGategories(this.communicationData.parent_category_id);
+        this.communicationData.child_category_id = this.maintData.child_category_id;
+        //get main_location_id
+        this.mainLocationVal = this.maintData.main_location_id;
+        this.getSublocationList(this.mainLocationVal);
+        this.subLocationVal = this.maintData.sub_location_id;
+
+        this.returnEditData();
+        
+        //check status closed or no
+        if(this.maintData.reopen == 1) {
+          this.checkStatusClosed = true;
+        } else {
+          this.checkStatusClosed = false;
+        }
+
+        this.selectedAdminstrations = [];
+        if(this.maintData.adminstrations.length > 0) {
+          for(let i = 0; i < this.maintData.adminstrations.length; i++) {
+            this.selectedAdminstrations.push(this.maintData.adminstrations[i]);
+            for(let j = 0; j < this.adminstrations.length; j++) {
+              if(this.maintData.adminstrations[i].id == this.adminstrations[j].id) {
+                this.adminstrations[i].selected = true;
+              }
+            }
+          }
+        }
+
+        console.log('selected adminstrations', this.selectedAdminstrations);
+        console.log('adminstrations ids ', this.adminstrationsIds);
+        
+        this.bindingDateSplitEnd = {
+          year: parseInt(this.maintData.created_date.split('-')[0]),
+          month: parseInt(this.maintData.created_date.split('-')[1]),
+          day: parseInt(this.maintData.created_date.split('-')[2]),
+        }
+
+        this.userData = responce['communication']['user'];
+        this.spinner.hide();
+        console.log('gggg', this.maintData);
+        if(this.maintData['files'].length > 0) {
+          this.showAttachements = true;
+        } else {
+          this.showAttachements = false;
+        }
+        console.log('user data ', this.userData);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get time period 
+    this.http.get(this.authSer.pathApi + '/page_list/53/1/1000/for_communication').subscribe(
+      (response) => {
+        console.log('time period', response);
+        this.times = response['time_periods'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get location parent
+    this.http.get(this.authSer.pathApi + '/parent_locations_list').subscribe(
+      (response) => {
+        this.locationList = response['locations'];
+        console.log('parent location' , this.locationList);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+  }
+
+  changeParentCategory(event) {
+    console.log(event.target.value);
+    this.getChildGategories(event.target.value);
+  }  
+
+
+  //get child gategories 
+  getChildGategories(parentId: number) {
+    this.http.get(this.authSer.pathApi + '/childs_categories_list_by_parent_id/' + parentId).subscribe(
+      (responce) => {
+        console.log('childs_categories_list_by_parent_id', responce);
+        this.childsCategoriesList = responce['categories'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  };
+
+  //get adminstration list 
+  getAdminstrationList(dataSearch) {
+    const searchKey = dataSearch ? dataSearch : '';
+
+     this.http.get(this.authSer.pathApi + '/page_list/3/1/1000/all'  + searchKey).subscribe(
+      (responce) => {
+        console.log('adminstraitions', responce);
+        this.adminstrations = responce['adminstrations'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  };
+
+  //search function 
+  filtterFunc(event) {
+    this.adminstrations = [];
+    console.log(event.target.value);
+    this.getAdminstrationList(event.target.value);
+  }
+
+
+  //make all checkbox of user checked 
+  selectAll() {
+    for (var i = 0; i < this.adminstrations.length; i++) {
+      this.adminstrations[i].selected = this.selectedAll;
+    }
+  }
+
+  //to checked one checkBox 
+  checkIfAllSelected() {
+    this.selectedAll = this.adminstrations.every(function(item:any) {
+      return item.selected == true;
+    });
+  }
+
+  //get departments ids 
+  getDepartments() {
+    this.adminstrationsIds = [];
+    this.selectedAdminstrations = [];
+    for(let i = 0; i < this.adminstrations.length; i++) {
+      if(this.adminstrations[i].selected == true) {
+        this.adminstrationsIds.push(this.adminstrations[i].id);
+        this.selectedAdminstrations.push(this.adminstrations[i]);
+      }
+    }
+    console.log(this.adminstrationsIds);
+    console.log(this.selectedAdminstrations);
+  }
+
+  //get sub location list 
+  getSublocationList(parentId: any) {
+    this.http.get(this.authSer.pathApi + '/childs_locations_list_by_parent_id/' + parentId).subscribe(  
+      (response)  => {
+        this.subLocationList = response['locations'];
+        console.log('sub Location', this.subLocationList);
+      },
+      (error) => {
+        console.log(error)
+      }
+     );
+  }
+
+  //get value of reason reOpen
+  getReopenReason(event) {
+    console.log(event.target.value);
+    console.log(this.reOpenReasonObject);
+    this.reOpenReasonObject.reopen_closed_communication = event.target.value;
+  }
+
+  //reOpen mentainence function
+  reOpenMaintenance() {
+    this.http.post(this.authSer.pathApi + '/reopen_closed_communication', this.reOpenReasonObject).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.toastr.success('تم إعاده الفتح بنجاح');
+        this.location.back();
+      },
+      (error) => {
+        console.log(error);
+        this.toastr.error('حدث خطا في الحفظ ، حاول لاحقاً');
+        this.location.back();
+      }
+    );
+  }
+
+
+  //remove remove selected adminsration 
+  removeSelectedAdminsration(adminstrationData) {
+    console.log(adminstrationData);
+
+    //to remove checked from adminstrations list
+      for(let j = 0; j < this.adminstrations.length; j++) {
+        if(adminstrationData.id == this.adminstrations[j].id) {
+          this.adminstrations[j].selected = false;
+        }
+      }
+    
+    const index = this.selectedAdminstrations.indexOf(adminstrationData);
+    this.selectedAdminstrations.splice(index, 1);
+    
+    console.log(index);
+  }
+
+  //return substring of subject and check negaive and positive time 
+returnEditData() {
+  for(let i = 0; i < this.maintData['adminstrations'].length; i++) {
+      this.maintData['adminstrations'][i].countdown = this.maintData['adminstrations'][i].countdown ? this.dashBoardSer.secondsToDhms(this.maintData['adminstrations'][i].countdown) : '-';
+      console.log(this.maintData['adminstrations'][i].countdown);
+  }
+}
+
+
+  //submitted form 
+  onSubmittedForm() {
+    
+    this.checkSaveClick = true; //make save btn disabled till request is success 
+    this.adminstrationsIds = [];
+
+    if(this.communicationData.status) {
+      this.communicationData.status = 'closed';
+    } else {
+      this.communicationData.status = '';
+      this.communicationData.closed_status_reason = '';
+    }
+
+    if(this.communicationData.urgent_communication) {
+      this.communicationData.urgent_communication = '1';
+    } else {
+      this.communicationData.urgent_communication = '0';
+    }
+
+    for(let i = 0; i < this.selectedAdminstrations.length; i++) {
+      this.adminstrationsIds.push(this.selectedAdminstrations[i].id);
+    }
+
+    this.communicationData['adminstrations_ids'] = this.adminstrationsIds;
+
+    console.log(this.communicationData);
+
+    if(this.adminstrationsIds.length == 0 && this.communicationData.urgent_communication == '1') {
+      this.toastr.warning('قم بإختيار الإدارات');
+      this.checkSaveClick = false;
+    } else {
+      this.http.post(this.authSer.pathApi + '/maintenance_handle_communication', this.communicationData).subscribe(
+        (responce) => {
+          console.log(responce['status']);
+          if(responce['status'] == 'some adminstrations didnt closed yet') {
+            this.toastr.warning('بعض الإدارات لم تقم بإغلاق البلاغ بعد !');
+          } else {
+            this.toastr.success('تم الحفظ بنجاح');
+            this.location.back();
+          }
+        },
+        (error) => {
+          console.log(error);
+          this.toastr.error('خطأ في الحفظ حاول لاحقاً');
+        }
+      );
+    }
+
+  }
+
+}

src/app/dashboard/maintenance-communications/maintenance-communications-list/maintenance-communications-list.component.css

@@ -21,10 +21,31 @@
 
 .disblayBlock-w {
     display: block;
+
+}
+
+.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;
 }
 
-/* .centerIneerItem {
-    display: flex;
-    justify-content: center;
-    text-align: center;
-} */
+.btn-secondary.focus, .btn-secondary:focus {
+    box-shadow: none;
+}
+
+.show>.btn-secondary.dropdown-toggle::after {
+    transform: rotate(-180deg); 
+}
+
+.table .tr td, .table .tr th {
+    padding: 6px !important;
+}

src/app/dashboard/maintenance-communications/maintenance-communications-list/maintenance-communications-list.component.html

@@ -1,5 +1,12 @@
 <div class="container">
 
+
+  <h3 style="font-size:18px; padding: 5px; color: #fff; background-color: Pink">البلاغات المعاد فتحها</h3>
+  <!-- <h3 style="font-size: 18px; color: red">سيتم تحديث الصفحه بعد  <countdown #countdown [config]="{leftTime: 180}">$!m!:$!s!</countdown></h3> -->
+     <h3 style="font-size: 18px; color: red">سيتم تحديث الصفحه بعد  {{counter$ | async }} ثانيه </h3>
+
+
+
   <div class="row">
     <div class="col-12">
       <ul class="list-unstyled titileLi-w">
@@ -9,12 +16,10 @@
     </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-12 col-lg-6">
         <div class="form-group">
           <span class="spanSelect-w" style="margin-right:10px;">
@@ -43,76 +48,53 @@
       </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)"/>
+          <input type="text" placeholder=" البحث ( رقم البلاغ - إداره منشأ البلاغ )" class="form-control inputSearchTable-w" style="margin-top:0;" (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 class="form-group" style="float: right; margin: 0 20px;">
-            <span class="spanSelect-w" style="
-            margin-top: -13px; ">
-              <select [ngModel]="filtterStatus" style="width:134px;" class="form-control selectButton-w" (input)="onGetValueFiltter($event)">
-                  <option value="all"> الكل </option>
-                  <option value="main"> رئيسي</option>
-                  <option value="sub">فرعي</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> -->
-         
+        <tr class="tr">
+          <th>#</th>
           <th>رقم البلاغ</th>
           <th>وقت انشاء البلاغ</th>
           <th>موضوع البلاغ</th>
           <th>الادارات / الاقسام / الموظفين الموجه لهم</th> 
           <th>الفئة</th>
+          <th>مده التأخير</th>
           <th>الحالة</th>
-          <th>عرض التفاصيل</th>         
-          <!-- <th *ngIf="authSer.showEditBtn">تعديل</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> -->
+        <tr class="tr" *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+          <td>{{i + 1}}</td>
           <td>{{data.id}}</td>
-          <td>{{data.created_date + "  /  " +data.created_time }}</td>
+          <td>{{data.created_date + " " + data.created_time }}</td>
           <td>{{data.subject }}</td>
-          <td >{{data.adminstration_name}}</td>
-          <td>{{data.time_period_name}}</td>
-          <td>{{data.status}}</td>
-          <td>{{data.maintenance_notes}}</td>
-
+          <td >
+            <div class="dropdown">
+              <button class="btn btn-secondary dropdown-toggle buttonW" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                عرض
+              </button>
+              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="text-align:right;"> 
+                <a class="dropdown-item" *ngFor="let admin of dataList[i]['adminstrations']"> {{ admin.adminstration_name ? admin.adminstration_name : 'لا يوجد'}} </a>
+              </div>
+            </div>
+          </td>
+          <td>{{data.time_period_name ? data.time_period_name : '-'}}</td>
+          <td>{{data.total_count_down == 0 ? '-' : data.total_count_down }}</td>
+          <td>{{ 
+            data.status == 'new' ? 'جديد' 
+            : data.status == 'closed' ? 'مغلق' 
+            : data.status == 'reopen' ? 'إستأنف'
+            : data.status == 'adminstration_redirection' ? 'تم التحويل' 
+            : '-'}}
+          </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>

src/app/dashboard/maintenance-communications/maintenance-communications-list/maintenance-communications-list.component.ts

@@ -1,3 +1,4 @@
+import { Observable } from 'rxjs/Observable';
 import { AuthServiceService } from './../../../shared/auth-service.service';
 import { NgxSpinnerService } from 'ngx-spinner';
 import { ActivatedRoute, Router, Params } from '@angular/router';
@@ -7,6 +8,9 @@ import { Component, OnInit } from '@angular/core';
 import { Modal } from 'ngx-modialog/plugins/bootstrap';
 import { UserService } from '../../../shared/user.service';
 import { ToastrService } from 'ngx-toastr';
+import { timer } from 'rxjs';
+import { take, map } from 'rxjs/operators';
+
 
 @Component({
   selector: 'app-maintenance-communications-list',
@@ -24,7 +28,8 @@ export class MaintenanceCommunicationsListComponent implements OnInit {
     private spinner: NgxSpinnerService,
     private authSer: AuthServiceService,
     private toastr: ToastrService,
-    private dashboardSer: DashboardService) { }
+    private dashboardSer: DashboardService) {
+     }
 
     dataList = [];
     pages= [];
@@ -38,8 +43,11 @@ export class MaintenanceCommunicationsListComponent implements OnInit {
     userLoginId:number;
     serviceId:number;
     dataTableNumber: number = 5;
-    absorpationListIds = [];
+    //absorpationListIds = [];
     dataListIds = [];
+    
+    counter$: Observable<number>;
+    counter = 180;
 
   ngOnInit() {
 
@@ -56,61 +64,209 @@ export class MaintenanceCommunicationsListComponent implements OnInit {
       this.authSer.showDashboardHeader = true;
       this.authSer.internalHeader = false;
 
+      //reload page every 10 seconds
+      setTimeout(function(){
+        location.reload(); 
+      },180000);
+
+      this.counter$ = timer(0,1000).pipe(
+        take(this.counter),
+        map(() => --this.counter)
+      );
+
       this.route.params.subscribe(
         (parmas: Params) => {
-          this.pageId =  +parmas['maintCommuicationPageId'];
-          localStorage.setItem('pageIdActive', parmas['maintCommuicationPageId']);
-        }
-      );
+          this.pageId =  +parmas['listPageId'];
+          localStorage.setItem('pageIdActive', parmas['listPageId']);
 
-      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 == 58) {
-                    if(this.pages[i]['permissions'][0].name == 'follow_up_communications_for_admin_maintenance') {
-                      this.authSer.showAddBtn = true;
-                      this.authSer.showEditBtn = true;
-                      this.authSer.showDeleteBtn = true;
-                    } else {
-                      console.log('no permissions');
-                    }
-                  } else {
-                    console.log('no events');
-                  }
+          if(this.pageId == 56) {
+
+            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 == 56) {
+                          if(this.pages[i]['permissions'][0].name == 'follow_up_communications') {
+                            this.authSer.showEditBtn = true;
+                          } else {
+                            console.log('no permissions');
+                          }
+                        } else {
+                          console.log('no events');
+                        }
+                      }
+                      this.spinner.hide();
+                    },
+                    (error) => {console.log(error)}
+                  );
                 }
-                this.spinner.hide();
-              },
-              (error) => {console.log(error)}
-            );
-          }
-        );
-        console.log('current page',this.pageId)
-        this.dashboardSer.getListData(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
-          (response) => {
-            console.log(response);
-            this.dataList = response['communications'];
-            this.count = response['count'];
-            this.perPagePagenation = response['per_page'];
-           
-          },
-          (error) => {
-            console.log(error);
+              );
+              
+              console.log('current page',this.pageId)
+              this.dashboardSer.getListData(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
+                (response) => {
+                  this.dataList = response['communications'];
+                  console.log('dataList', this.dataList);
+                  this.count = response['count'];
+                  this.perPagePagenation = response['per_page'];
+                  this.returnEditData();
+                },
+                (error) => {
+                  console.log(error);
+                }
+        
+              );
+          } else if(this.pageId == 58) {
+
+            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 == 58) {
+                          if(this.pages[i]['permissions'][0].name == 'follow_up_communications_for_admin_maintenance') {
+                            this.authSer.showEditBtn = 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(
+                (response) => {
+                  console.log(response);
+                  this.dataList = response['communications'];
+                  this.count = response['count'];
+                  this.perPagePagenation = response['per_page'];
+                  this.returnEditData();           
+                },
+                (error) => {
+                  console.log(error);
+                }
+        
+              );
+          } else if(this.pageId == 59) {
+
+            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 == 59) {
+                          if(this.pages[i]['permissions'][0].name == 'follow_up_communications_for_adminstration') {
+                            this.authSer.showEditBtn = 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(
+                (response) => {
+                  console.log('beforre', response);
+                  this.dataList = response['communications'];
+                  this.count = response['count'];
+                  this.perPagePagenation = response['per_page'];
+                  this.returnEditData();           
+                  console.log('afteeeeeer', response);
+                },
+                (error) => {
+                  console.log(error);
+                }
+              );
+          } else if(this.pageId == 60) {
+
+            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 == 60) {
+                          if(this.pages[i]['permissions'][0].name == 'follow_up_communications_for_department') {
+                            this.authSer.showEditBtn = 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(
+                (response) => {
+                  console.log('beforre', response);
+                  this.dataList = response['communications'];
+                  this.count = response['count'];
+                  this.perPagePagenation = response['per_page'];
+                  this.returnEditData();           
+                  console.log('afteeeeeer', response);
+                },
+                (error) => {
+                  console.log(error);
+                }
+              );
           }
-  
-        );
+
+        }
+      );
+
+      
   }
 
   filtterFunc(data) {
     this.dataList =[];
-    this.absorpationListIds = [];
     console.log(data.target.value);
     const dataSearch = data.target.value;     
     this.currentPage = 1;
@@ -123,6 +279,7 @@ export class MaintenanceCommunicationsListComponent implements OnInit {
         this.dataList = responce['communications'];
         this.count = responce['count'];
         this.perPagePagenation = responce['per_page'];
+        this.returnEditData();
         console.log('filtter count', this.count);
         console.log('filtter perPagePAgenation', this.perPagePagenation);
       },
@@ -133,18 +290,18 @@ export class MaintenanceCommunicationsListComponent implements OnInit {
   };
 
 onPageChange(pagenationNumber) {
+  this.dataList = [];
   this.spinner.show();
   this.currentPage = pagenationNumber;
-  this.absorpationListIds = [];
   console.log(pagenationNumber);
   console.log(this.pageId);
-  this.dashboardSer.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+  this.dashboardSer.searchFiltterPagenation(this.pageId, pagenationNumber, this.dataTableNumber, this.filtterStatus).subscribe(
     (responce) => {
       console.log(responce);
       this.dataList = responce['communications'];
       this.count = responce['count'];
       this.perPagePagenation = responce['per_page'];
-      console.log('FFFFFF', this.absorpationListIds);
+      this.returnEditData();
       this.spinner.hide();
     },
     (error) => {
@@ -156,14 +313,15 @@ onPageChange(pagenationNumber) {
 //determine the list count from select element 
 onGetValue(event) {
   this.spinner.show();
-  this.absorpationListIds = [];
+  this.dataList = [];
   this.dataTableNumber = event.target.value;
   this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
     (responce) => {
       console.log(responce);
-      this.absorpationListIds = responce['communications'];
+      this.dataList = responce['communications'];
       this.count = responce['count'];
       this.perPagePagenation = responce['per_page'];
+      this.returnEditData();
       this.spinner.hide();
     },
     (error) => {
@@ -172,6 +330,7 @@ onGetValue(event) {
     }
   );
 };
+
 onGetValueFiltter(event) {
   console.log(event.target.value)
   this.spinner.show();
@@ -185,6 +344,7 @@ onGetValueFiltter(event) {
       this.dataList = responce['communications'];
       this.count = responce['count'];
       this.perPagePagenation = responce['per_page'];
+      this.returnEditData();
       this.spinner.hide();
       console.log('UrL>>', this.authSer.pathApi +'/page_list/' + this.pageId + '/' + this.currentPage + '/' + this.dataTableNumber + '/' + typeId)
     },
@@ -194,4 +354,35 @@ onGetValueFiltter(event) {
   );
 }
 
+
+//return substring of subject and check negaive and positive time 
+returnEditData() {
+  for(let i = 0; i < this.dataList.length; i++) {
+    if(this.dataList[i].subject.length > 20) {
+      this.dataList[i].subject = this.dataList[i].subject.substring(0 , 15) + '...';
+    }
+
+    // const firstChar = this.dataList[i].total_count_down.substring(0,1);
+    //   console.log('first char', firstChar);
+    //   if(firstChar == '-') {
+    //     this.dataList[i].total_count_down = '-' + this.dashboardSer.secondsToDhms(this.dataList[i].total_count_down);
+    //   }
+      this.dataList[i].total_count_down = this.dataList[i].total_count_down ? this.dashboardSer.secondsToDhms(this.dataList[i].total_count_down) : '-';
+      console.log(this.dataList[i].total_count_down);
+  }
+}
+
+  onEdit(id: number) {
+    console.log(id);
+    if(this.pageId == 58) {
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/maintenanceCommunicationEdit/' + id]);
+    } else if(this.pageId == 56){
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/followCommunicationEdit/' + id]);
+    } else if(this.pageId == 59){
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/followCommunicationAdminEdit/' + id]); 
+    } else if(this.pageId == 60) {
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/followCommunicationSecEdit/' + id]);
+    }
+  }
+
 }

src/app/dashboard/report-communication/report-communications/report-communications.component.css

@@ -0,0 +1,345 @@
+.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/report-communication/report-communications/report-communications.component.html

@@ -0,0 +1,382 @@
+<div class="addHospital-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" style="cursor:pointer">تقرير الإتصال</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="containerContent-w">
+      <div class="row">
+        <div class="col-12 col-md-4">
+          <div class="form-group">
+            <input type="number" placeholder="رقم البلاغ" class="form-control numberReport-s" [(ngModel)]="searchValue"/>
+            <button class="btn btn-success buttonS" (click)="onSearch()">أبحث</button>
+          </div>
+        </div>
+      
+      </div>
+
+      <form (ngSubmit)="onSubmittedForm()" #f="ngForm"  *ngIf="showTable">
+        <div class="row">
+          <div class="col-12">
+            
+            <h2 class="title">بيانات منشئ البلاغ</h2>
+            <div class="row">
+              <div class="wrapper">
+                
+                <div class="col-12 col-md-4">
+                  <div class="form-group">
+                    <label for="name" style="float:right">رقم البلاغ</label>
+                    <input id="name" type="text" class="form-control" placeholder="رقم البلاغ" ngModel name="commmun_number"  [(ngModel)]="maintData.id" [disabled]="disabledInput" />
+                  </div>
+                </div>
+
+                <div class="col-12 col-md-4">
+                  <div class="form-group">
+                    <label for="name" style="float:right">إسم المستخدم</label>
+                    <input id="name" type="text" class="form-control" placeholder="الإسم" ngModel name="name"  [(ngModel)]="userData.comm_creator_name" [disabled]="disabledInput" />
+                  </div>
+                </div>
+
+                <div class="col-12 col-md-4">
+                  <div class="form-group">
+                    <label for="name" style="float:right">الإداره</label>
+                    <input id="name" type="text" class="form-control" placeholder="الإداره" ngModel name="comm_adminstration_creator_name"  [(ngModel)]="userData.comm_adminstration_creator_name" [disabled]="disabledInput" />
+                  </div>
+                  </div>
+                
+
+                <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                  <div class="form-group">
+                  <label style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
+                  <input type="phone" placeholder="رقم الجوال" class="form-control" ngModel name="phone" [(ngModel)]="userData.comm_creator_phone" [disabled]="disabledInput" />
+                  </div>
+                </div>
+    
+                <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                  <div class="form-group">
+                    <label for="endDate" style="float:right" >التاريخ<span class="spanReqired-w">*</span></label>
+                    <div *ngIf='bindingDateSplitEnd'>
+                      <app-end-higri-date  (onDatePicked)="getDate($event, 'end')" [myEndDate]="bindingDateSplitEnd" [higriDisabled]="disabledVal"> </app-end-higri-date>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                  <div class="form-group">
+                    <label for="time" style="float:right"> الوقت<span class="spanReqired-w">*</span></label>
+                    <input type="time" id="time" placeholder="الوقت" class="form-control" ngModel name="time" [(ngModel)]="maintData.created_time" [disabled]="disabledInput" /> 
+                  </div>
+                </div>
+
+                
+
+              </div>
+            </div>
+          </div>
+
+          <div class="col-12">
+            <h2 class="title">بيانات البلاغ</h2>
+            <div class="row">
+              <div class="wrapper">
+                <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                  <div class="form-group">
+                    <label for="subject"  style="float: right; margin-right:5px;margin-top:10px">موضوع البلاغ</label>
+                    <input type="text" id="subject" class="form-control" placeholder="موضوع البلاغ" name="subject" ngModel [(ngModel)]="maintData.subject" [disabled]="disabledInput" />
+                  </div>
+                </div>
+
+                <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                  <div class="form-group">
+                    <label for="message"  style="float: right; margin-right:5px;margin-top:10px">نص البلاغ</label>
+                    <input type="text" id="message" class="form-control" placeholder="نص البلاغ" name="message" ngModel [(ngModel)]="maintData.message" [disabled]="disabledInput" />
+                  </div>
+                </div>
+
+                <div class="col-12 col-sm-12 col-md-4 col-lg-4" style="margin-top: 10px;">
+                    <div class="form-group">
+                      <label for="reportTopic" style="float: right;margin-right: 5px">  الموقع الرئيسي </label>
+                      <select name="main_location_id" class="form-control" [ngModel]="mainLocationVal" (change)="onChangemainLocation($event)" [disabled]="disabledInput" >
+                        <option *ngFor="let location of locationList" [value]="location.id" required> {{location.name}} </option>    
+                      </select>                  
+                    </div>     
+                  </div>
+                  
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="form-group">
+                      <label for="sub_location_id"  style="float: right;margin-right: 5px">  الموقع الفرعي </label>
+                      <select name="sub_location_id" class="form-control" [ngModel]="subLocationVal" (change)="changeSubLocation($event)" [disabled]="disabledInput">
+                        <option *ngFor="let location of subLocationList" [value]="location.id" required> {{location.name}} </option>    
+                      </select>
+                    </div>
+                  </div>
+
+                  <div class="col-12">
+                    <h2 class="title">المرفقات</h2>
+                    <div class="row">
+                      <div class="wrapper">
+                        <h3 *ngIf="!showAttachements" style="font-size: 18px;">لا توجد مرفقات لعرضها </h3>
+
+                        <table class="table table-bordered" *ngIf="showAttachements">
+                          <thead class="headBackground-w">
+                            <tr>
+                              <th> إسم المرفق</th>
+                              <th>عرض الملف</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <tr style="text-align:center;" *ngFor="let file of maintData['files']; let i = index">
+                              <td><input type="text" class="form-control" placeholder="إسم الملف" [(ngModel)]="file.title" [ngModelOptions]="{standalone: true}" [disabled]="disabledInput"/></td>
+                              <th style="text-align:center"><a href="{{authSer.pathImg + file.file}}" target="_blank"><i class="fas fa-download"></i></a></th>
+                            </tr>
+                          </tbody>
+                        </table>
+        
+                      </div>
+                    </div>
+                
+                  </div>
+
+                </div>
+              </div>
+            </div>
+
+        <div class="col-12">
+            <h2 class="title">عمليات البلاغ</h2>
+            <div class="row">
+              <div class="wrapper">
+                <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+                  <div class="form-group">
+                    <label style="float:right" for="parent_category_id">التصنيف الرئيسي</label>
+                    <select class="form-control" id="parent_category_id" style="padding:0 5px" ngModel name="parent_category_id" (input)="changeParentCategory($event)" [(ngModel)]="communicationData.parent_category_id" [disabled]="disabledInput">
+                      <option *ngFor="let categorie of parentCategoriesList; let i = index" [value]="categorie.id">{{categorie.name}}</option>
+                    </select>
+                  </div>
+                </div>
+                <!-- <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="checkStatusClosed">
+                  <div class="form-group">
+                    <label style="float:right" for="reopen_reason">سبب إعاده فتح البلاغ</label>
+                    <select class="form-control" id="reopen_reason" style="padding:0 5px" ngModel name="reopen_reason" (input)="getReopenReason($event)" [(ngModel)]="reOpenReasonObject.reopen_closed_communication" >
+                      <option value="ظهور المشكلة مجددا">ظهور المشكلة مجددا</option>
+                      <option value="عدم حل المشكلة من البداية">عدم حل المشكلة من البداية</option>
+                      <option value="إغلاق البلاغ دون موافقتنا">إغلاق البلاغ دون موافقتنا</option>
+                    </select>
+                  </div>
+                </div> -->
+                <div class="col-12 col-md-4">
+                  <div class="form-group">
+                    <label style="float:right" for="child_category_id">التصنيف الفرعي</label>
+                    <select class="form-control" id="child_category_id" style="padding:0 5px" ngModel name="child_category_id" [(ngModel)]="communicationData.child_category_id" [disabled]="disabledInput">
+                      <option *ngFor="let childCategorie of childsCategoriesList; let i = index" [value]="childCategorie.id">{{childCategorie.name}}</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="col-12 col-md-4">
+                  <div class="form-group">
+                    <label style="float:right" for="time_period_id">الفئه - الوقت</label>
+                    <select class="form-control" id="time_period_id" style="padding:0 5px" ngModel name="time_period_id" [(ngModel)]="communicationData.time_period_id" [disabled]="disabledInput">
+                      <option *ngFor="let timePeriod of times; let i = index" [value]="timePeriod.id">{{timePeriod.name}}</option>
+                    </select>
+                  </div>
+                </div>
+                
+                <div class="col-12 col-md-12">
+                  <div class="form-group">
+                    <label for="maintenance_notes" style="float:right">ملاحظات إداره الصيانه</label>
+                    <textarea cols="3" class="form-control" name="maintenance_notes" id="maintenance_notes" [(ngModel)]="communicationData.maintenance_notes" [disabled]="disabledInput"> </textarea>
+                  </div>
+                </div>
+
+              
+
+                <!-- <div class="col-12 col-md-4">
+                  <div style="float:right">
+                    <input type="checkbox" class="form-check-input" name="urgent_communication" id="urgent_communication" [(ngModel)]="communicationData.urgent_communication" [value]="communicationData.urgent_communication">
+                    <label class="form-check-label" for="urgent_communication" style="margin: 0 20px;">بلاغ عاجل</label>
+                  </div>
+                </div> -->
+
+            </div>
+          </div>
+        </div>
+
+        <!-- <div class="col-12">
+            <h2 class="title">إغلاف البلاغ</h2>
+            <div class="row">
+              <div class="wrapper" style="padding: 10px 20px;">
+                  <div style="float:right">
+                    <input type="checkbox" class="form-check-input" name="status" id="status" [(ngModel)]="formData.status" [value]="formData.status">
+                    <label class="form-check-label" for="status" style="margin: 0 20px;">إغلاق البلاغ</label>
+                  </div>
+                  <div class="col-12 col-md-12" style="margin: 20px 0;" *ngIf="formData.status">
+                    <div class="form-group">
+                      <label for="closed_status_reason" style="float:right; margin-right: 5px;"> سبب إغلاق البلاغ</label>
+                      <textarea cols="3" class="form-control" name="closed_status_reason" id="closed_status_reason" [(ngModel)]="formData.closed_status_reason"> </textarea>
+                    </div>
+                  </div>
+              </div>
+            </div>
+        
+          </div> -->
+
+          <!-- <div class="col-12">
+            <h2 class="title"> ملاحظات القسم</h2>
+            <div class="row">
+              <div class="wrapper" style="padding: 10px 20px;">
+                <div class="col-12 col-md-12" style="margin: 20px 0;">
+                  <div class="form-group">
+                    <label for="department_notes" style="float:right; margin-right: 5px;"> </label>
+                    <textarea cols="3" class="form-control" name="department_notes" id="department_notes" [(ngModel)]="formData.department_notes"> </textarea>
+                  </div>
+                </div>
+              </div>
+            </div>
+        
+          </div> -->
+
+          <div class="col-12">
+            <h2 class="title">الإدارات الموجه لها البلاغ</h2>
+            <div class="row">
+              <div class="wrapper">
+                <table class="table table-bordered">
+                  <thead class="headBackground-w">
+                    <tr>
+                      <th>الجهه المستلمه للبلاغ</th>
+                      <th>وقت التحويل</th>
+                      <th>ملاحظات</th>
+                      <th>حاله البلاغ</th>
+                      <th>الاٌقسام</th>
+                      <th>مده التأخير</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let selectAdmin of maintData['adminstrations']; let i = index">
+                      <td>{{selectAdmin.name ? selectAdmin.name : '-'}}</td>
+                      <td>{{ selectAdmin.created_at ? selectAdmin.created_at : '-' }}</td>
+                      <td>{{selectAdmin.adminstration_notes ? selectAdmin.adminstration_notes : '-'}}</td>
+                      <td>
+                        {{ 
+                          selectAdmin.adminstration_status == 'new' ? 'جديد' 
+                          : selectAdmin.adminstration_status == 'closed' ? 'مغلق' 
+                          : selectAdmin.adminstration_status == 'reopen' ? 'إستأنف' 
+                          : selectAdmin.adminstration_status == 'redirect_to_adminstrations' ? 'العائد للإدارات' : 'لايوجد'}}
+                      </td>
+                      <th style="text-align:center">
+                        <div class="dropdown">
+                          <button class="btn btn-secondary dropdown-toggle buttonW" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            عرض
+                          </button>
+                          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="text-align:right;"> 
+                            <a class="dropdown-item" *ngFor="let department of selectAdmin['departments']"> {{ department.name ? department.name : 'لا يوجد'}} </a>
+                          </div>
+                        </div>
+                      </th>
+                      <td style="font-size: 12px;">{{selectAdmin.countdown}}</td>
+                    </tr>
+                </tbody>
+              </table>
+              
+              </div>
+            </div>            
+          </div>
+
+          <!-- <div class="col-12">
+            <h2 class="title">الأقسام الموجه لها البلاغ</h2>
+            <div class="row">
+              <div class="wrapper">
+            
+
+                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+                  <div class="modal-dialog" role="document">
+                    <div class="modal-content">
+                      <div class="modal-header">
+                        <h5 class="modal-title" id="exampleModalLabel">الأقسام</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                          <span aria-hidden="true">&times;</span>
+                        </button>
+                      </div>
+                      <div class="modal-body">
+                        <div class="form-group">
+                          <input type="text" placeholder="البحث" class="form-control inputSearchTable-w" style="margin-top:0;" (input)="filtterFunc($event)"/>
+                          <hr>
+                        </div>
+                        <table class="table table-bordered">
+                          <thead class="headBackground-w">
+                            <tr>
+                              <th style="text-align:right">
+                                <div class="custom-control custom-checkbox">
+                                  <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                                </div>
+                              </th>
+                              <th style="text-align:right">الإسم</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <tr *ngFor="let data of departments; 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();" [ngModelOptions]="{standalone: true}">
+                                  <label class="custom-control-label disblayBlock-w" for="{{data.id}}" style="color:#2a2a2a"></label>
+                                </div>
+                              </td>
+                              <td>{{data.name}}</td>
+                            </tr>
+                        </tbody>
+                      </table>
+                      </div>
+                      <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal" style="margin: 0 10px;">إغلاق</button>
+                        <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="getDepartments()">حفظ</button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <table class="table table-bordered">
+                  <thead class="headBackground-w">
+                    <tr>
+                      <th>الجهه المستلمه للبلاغ</th>
+                      <th>وقت التحويل</th>
+                      <th>ملاحظات</th>
+                      <th>حاله البلاغ</th>
+                      <th>مده التأخير</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let selectAdmin of selectedDepartments; let i = index">
+                      <td>{{selectAdmin.name ? selectAdmin.name : '-'}}</td>
+                      <td>{{ selectAdmin.created_at ? selectAdmin.created_at : '-' }}</td>
+                      <td>{{selectAdmin.adminstration_notes ? selectAdmin.adminstration_notes : '-'}}</td>
+                      <td>
+                        {{ 
+                          selectAdmin.adminstration_status == 'new' ? 'جديد' 
+                          : selectAdmin.adminstration_status == 'closed' ? 'مغلق' 
+                          : selectAdmin.adminstration_status == 'reopen' ? 'إستأنف' 
+                          : selectAdmin.adminstration_status == 'redirect_to_adminstrations' ? 'العائد للإدارات' : 'لايوجد'}}
+                      </td>
+                      <td style="font-size: 12px;">{{selectAdmin.countdown}}</td>
+                    </tr>
+                </tbody>
+              </table>
+              
+              </div>
+            </div>            
+          </div> -->
+
+          <div class="col-12">
+            <button class="btn btn-success" style="float: right; margin: 10px 0;" (click)="onPrint()">طباعه</button> 
+          </div>
+          
+        </div>
+      </form>
+          
+      </div>
+    </div>
+
+</div>
+

src/app/dashboard/report-communication/report-communications/report-communications.component.ts

@@ -0,0 +1,304 @@
+import { DashboardService } from './../../../shared/dashboard.service';
+import { UserService } from 'src/app/shared/user.service';
+import { ToastrService } from 'ngx-toastr';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-report-communications',
+  templateUrl: './report-communications.component.html',
+  styleUrls: ['./report-communications.component.css']
+})
+export class ReportCommunicationsComponent implements OnInit {
+
+  searchValue: number = null;
+  userAdminstrationId: number;
+  showTable: boolean = false;
+
+  bindingDateSplitEnd;
+
+  maintData:any = [];
+  userData:any = [];
+  times:any = [];
+  locationList: any = [];
+  subLocationList: any = [];
+
+  parentCategoriesList = [];
+  childsCategoriesList: any = [];
+  departmentsIds: any = [];
+  departments: any = [];
+  selectedDepartments: any = [];
+
+
+  //reopen object 
+  reOpenReasonObject = {
+    communication_id: null,
+    reopen_closed_communication: '',
+  }
+
+  selectedAll: any;
+  mainLocationVal = '';
+  subLocationVal = '';
+  checkSaveClick: boolean = false;
+  checkStatusClosed: boolean = false;
+
+  communicationData = {
+    parent_category_id: null,
+    child_category_id: null,
+    time_period_id: '',
+    maintenance_notes: '',
+  };
+
+  formData = {
+    communication_id: null,
+    closed_status_reason: '',
+    adminstration_notes: '',
+    department_status: null,
+  }
+
+  countries = [];
+  identities = [];
+
+  disabledInput: boolean = true;
+  showAttachements: boolean = false;
+  disabledVal: boolean = true;
+  adminstrationsButtonDisabled: boolean = false;
+
+
+  constructor( 
+    private dashBoardSer: DashboardService,
+    private userSer: UserService,
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService) { }
+
+  
+  ngOnInit() {
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+    localStorage.setItem('pageIdActive', '62');
+    
+        //get sections list 
+        this.getsectionsList('');
+
+        //get nationality data
+        this.userSer.getNationality().subscribe(
+         (responce) => {
+           console.log(responce);
+           this.countries = responce['countries'];
+         },
+         (error) => {
+           console.log(error);
+         }
+       );
+   
+       //get identites
+       this.userSer.onGetIdentities().subscribe(
+         (responce) => {
+           this.identities = responce['identities'];
+           console.log('idddentiiiesssssssssss', this.identities);
+         },
+         (error) => {
+           console.log(error);
+         }
+       );
+   
+   
+       //get parent_categories_list
+       this.http.get(this.authSer.pathApi + '/parent_categories_list').subscribe(
+         (responce) => {
+           console.log('parent_categories_list', responce);
+           this.parentCategoriesList = responce['categories'];
+         },
+         (error) => {
+           console.log(error);
+         }
+       );
+
+
+    //get time period 
+    this.http.get(this.authSer.pathApi + '/page_list/53/1/1000/for_communication').subscribe(
+      (response) => {
+        console.log('time period', response);
+        this.times = response['time_periods'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    //get location parent
+    this.http.get(this.authSer.pathApi + '/parent_locations_list').subscribe(
+      (response) => {
+        this.locationList = response['locations'];
+        console.log('parent location' , this.locationList);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+    
+
+  }
+
+ 
+
+
+
+
+
+
+
+
+ //print function 
+ onPrint() {
+  window.print();
+}
+
+  onSearch() {
+    console.log(this.searchValue);
+    this.http.get(this.authSer.pathApi + '/report_for_communication/' + this.searchValue).subscribe(
+      (responce) => {
+        this.maintData = responce['communication'];
+        if(this.maintData) {
+          this.showTable = true;
+        } else {
+          this.showTable = false;
+        }
+        console.log('main data ', this.maintData);
+        this.communicationData.maintenance_notes = this.maintData.maintenance_notes;
+        this.formData.department_status = this.maintData.status == 'closed' ? this.maintData.status : false;
+        this.communicationData.time_period_id = this.maintData.time_period_id;
+        this.formData.closed_status_reason = this.maintData.closed_status_reason ? this.maintData.closed_status_reason : '';
+        this.communicationData.parent_category_id = this.maintData.parent_category_id;
+        this.getChildGategories(this.communicationData.parent_category_id);
+        this.communicationData.child_category_id = this.maintData.child_category_id;
+        //get main_location_id
+        this.mainLocationVal = this.maintData.main_location_id;
+        this.getSublocationList(this.mainLocationVal);
+        this.subLocationVal = this.maintData.sub_location_id;
+
+        this.returnEditData();
+      
+
+        // this.selectedDepartments = [];
+        // if(this.maintData.adminstrations.length > 0) {
+        //   for(let i = 0; i < this.maintData.departments.length; i++) {
+        //     this.selectedDepartments.push(this.maintData.departments[i]);
+        //     for(let j = 0; j < this.departments.length; j++) {
+        //       if(this.maintData.departments[i].id == this.departments[j].id) {
+        //         this.departments[i].selected = true;
+        //       }
+        //     }
+        //   }
+        // }
+
+        // console.log('selected adminstrations', this.selectedDepartments);
+
+        
+        this.bindingDateSplitEnd = {
+          year: parseInt(this.maintData.created_date.split('-')[0]),
+          month: parseInt(this.maintData.created_date.split('-')[1]),
+          day: parseInt(this.maintData.created_date.split('-')[2]),
+        }
+
+        this.userData = responce['communication']['user'];
+        this.spinner.hide();
+        console.log('gggg', this.maintData);
+        if(this.maintData['files'].length > 0) {
+          this.showAttachements = true;
+        } else {
+          this.showAttachements = false;
+        }
+        console.log('user data ', this.userData);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  }
+
+  changeParentCategory(event) {
+    console.log(event.target.value);
+    this.getChildGategories(event.target.value);
+  }  
+
+
+  //get child gategories 
+  getChildGategories(parentId: number) {
+    this.http.get(this.authSer.pathApi + '/childs_categories_list_by_parent_id/' + parentId).subscribe(
+      (responce) => {
+        console.log('childs_categories_list_by_parent_id', responce);
+        this.childsCategoriesList = responce['categories'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  };
+
+  //get adminstration list 
+  getsectionsList(dataSearch) {
+    const searchKey = dataSearch ? dataSearch : '';
+    console.log('urrrl', this.authSer.pathApi + '/page_list/4/1/1000/' + this.userAdminstrationId);
+     this.http.get(this.authSer.pathApi + '/page_list/4/1/1000/' + this.userAdminstrationId  + searchKey).subscribe(
+      (responce) => {
+        console.log('sections', responce);
+        this.departments = responce['departments'];
+        console.log('sections', responce);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  };
+
+    //get departments ids 
+    getDepartments() {
+      this.selectedDepartments = [];
+      for(let i = 0; i < this.departments.length; i++) {
+        if(this.departments[i].selected == true) {
+          this.selectedDepartments.push(this.departments[i]);
+        }
+      }
+      console.log(this.selectedDepartments);
+    }
+  
+    //get sub location list 
+    getSublocationList(parentId: any) {
+      this.http.get(this.authSer.pathApi + '/childs_locations_list_by_parent_id/' + parentId).subscribe(  
+        (response)  => {
+          this.subLocationList = response['locations'];
+          console.log('sub Location', this.subLocationList);
+        },
+        (error) => {
+          console.log(error)
+        }
+       );
+    }
+
+     //return substring of subject and check negaive and positive time 
+     returnEditData() {
+      for(let i = 0; i < this.maintData['adminstrations'].length; i++) {
+          this.maintData['adminstrations'][i].countdown = this.maintData['adminstrations'][i].countdown ? this.dashBoardSer.secondsToDhms(this.maintData['adminstrations'][i].countdown) : '-';
+          console.log(this.maintData['adminstrations'][i].countdown);
+      }
+    }
+  
+    //get value of reason reOpen
+    getReopenReason(event) {
+      console.log(event.target.value);
+      console.log(this.reOpenReasonObject);
+      this.reOpenReasonObject.reopen_closed_communication = event.target.value;
+    }
+
+
+
+}

src/app/dashboard/report-current-employees-officer/report-current-employee-officer/report-current-employee-officer.component.css

@@ -0,0 +1,40 @@
+.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;
+}
+
+.heading {
+    text-align: right;
+    font-size: 18px;
+    margin: 0;
+    margin: 0 6px;
+    font-weight: bold;
+    border-bottom: 1px solid #ccc;
+    padding: 10px 0;
+}
+
+/* .centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+} */

src/app/dashboard/report-current-employees-officer/report-current-employee-officer/report-current-employee-officer.component.html

@@ -0,0 +1,89 @@
+<div class="addHospital-w">
+  <div class="container">
+
+    <div class="row">
+        <div class="col-12">
+          <ul class="list-unstyled titileLi-w" style="margin: 0;">
+            <li class="headingText-w">خدمه البلاغات</li>
+            <li class="headingText-w" style="cursor:pointer">تقرير ضابط الموظفين الحالي</li>
+          </ul>
+        </div>
+    </div>
+
+    <div class="containerContent-w">
+      <div class="row">
+        <div class="col-12 col-md-4">
+          <div class="form-group">
+            <label for="admin" style="float:right">الإداره</label>
+            <select id="admin" class="form-control" (input)="getAdminstrationsData($event)" [ngModel]="defaultAdminstrationValue">
+              <option *ngFor="let admin of adminstrations" [value]="admin.id">{{admin.name}}</option>
+            </select>
+          </div>
+        </div>
+        <div class="col-12 col-md-4">
+          <div class="form-group">
+            <label for="admin" style="float:right">القسم</label>
+            <select id="admin" class="form-control" (input)="getDepartmentsData($event)" [ngModel]="defaultdepartmentValue">
+              <option value="all">الكل</option>
+              <option *ngFor="let depart of departments" [value]="depart.id">{{depart.name}}</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="col-12 col-md-4">
+          <div class="form-group">
+            <button class="btn btn-success form-control" style="margin:30px 0" (click)="getReport()">إرسال</button>
+          </div>
+        </div>
+
+        <div class="col-12" *ngIf="adminstraion_officers.length > 0">
+          <!-- <button class="btn btn-success" style="float: right; margin: 10px 0;" (click)="onPrint()">طباعه</button>  -->
+          <h3 class="heading">ظباط إتصال الإداره</h3>
+          <table class="table table-bordered text-center">
+            <thead class="headBackground-w">
+              <tr>
+                <th>إسم الموظف</th>
+                <th>تاريخ التعيين</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr *ngFor="let data of adminstraion_officers; let i = index">
+                <td>{{data.name}}</td>
+                <td>
+                    {{data.created_at}}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="col-12" *ngIf="department_officers.length > 0">
+            <h3 class="heading">ظباط إتصال القسم</h3>
+            <table class="table table-bordered text-center">
+              <thead class="headBackground-w">
+                <tr>
+                  <th>إسم الموظف</th>
+                  <th>إسم القسم</th>
+                  <th>تاريخ التعيين</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr *ngFor="let data of department_officers; let i = index">
+                  <td>{{data.name}}</td>
+                  <td>{{data.department_name}}</td>
+                  <td>{{data.created_at}}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div class="col-12" *ngIf="adminstraion_officers.length > 0 || department_officers.length > 0">
+            <button class="btn btn-success" style="float: right; margin: 10px 0;" (click)="onPrint()">طباعه</button> 
+          </div>
+
+      </div>
+    </div>
+
+
+  </div>
+</div>

src/app/dashboard/report-current-employees-officer/report-current-employee-officer/report-current-employee-officer.component.ts

@@ -0,0 +1,100 @@
+import { NgxSpinnerService } from 'ngx-spinner';
+import { HttpClient } from '@angular/common/http';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-report-current-employee-officer',
+  templateUrl: './report-current-employee-officer.component.html',
+  styleUrls: ['./report-current-employee-officer.component.css']
+})
+export class ReportCurrentEmployeeOfficerComponent implements OnInit {
+
+  constructor(private authSer: AuthServiceService, 
+    private toastr: ToastrService,
+    private spinner: NgxSpinnerService,
+    private http: HttpClient) { }
+
+  adminstrations = [];
+  departments = [];
+  adminstraion_officers = [];
+  department_officers = [];
+  adminId: number = null;
+  departId: number = null;
+  defaultAdminstrationValue: string = ' ';
+  defaultdepartmentValue: string = '';
+
+  ngOnInit() {
+
+    this.spinner.show();
+
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+    localStorage.setItem('pageIdActive', '61');
+
+
+    this.http.get(this.authSer.pathApi + '/page_list/3/1/1000/all').subscribe(
+      (responce) => {
+        this.adminstrations = responce['adminstrations'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
+  }
+
+
+  getAdminstrationsData(event) {
+    this.adminId = event.target.value;
+    console.log(this.adminId);
+    this.getDepartments(this.adminId);
+  }
+
+  getDepartmentsData(event) {
+    this.departId = event.target.value;
+    console.log(this.departId);
+  }
+
+  getDepartments(adminId) {
+    this.http.get(this.authSer.pathApi + '/page_list/4/1/1000/' + adminId).subscribe(
+      (response) => {
+        console.log(response);
+        this.departments = response['departments'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
+  }
+
+
+  getReport() {
+    
+    if(this.adminId == null) {
+      this.toastr.warning('قم بإختيار إدراه اولا !'); 
+    } else {
+      this.http.get(this.authSer.pathApi + '/report_current_employees_officer/' + this.adminId + '/' + (this.departId ? this.departId : 'all') ).subscribe(
+        (response) => {
+          console.log(response);
+          this.adminstraion_officers = response['adminstraion_officers'];
+          this.department_officers = response['department_officers'];
+        },
+        (error) => {
+          console.log(error);
+        }
+      )
+    }
+  }
+
+  //print function 
+  onPrint() {
+    window.print();
+  }
+
+}

src/app/dashboard/roles/add-roles/add-roles.component.css

@@ -40,4 +40,12 @@ input,select,textarea{
 
 .addRole-w .permission .custom-control {
     padding-left: 0;
+}
+
+.roleCheckBox {
+    width: 20px !important;
+    height: 20px !important;
+    margin: 3px -10px !important;
+    opacity: 1 !important;
+    z-index: 1 !important;
 }

src/app/dashboard/roles/add-roles/add-roles.component.html

@@ -53,8 +53,8 @@
                 <div class="permission">
                     <h2>{{page.name}}</h2>
                     <div class="custom-control custom-checkbox centerIneerItem" *ngFor="let pagePermission of page['permissions']; let j=index" style="margin: 5px 0;">
-                        <input type="checkbox" class="custom-control-input" id="{{pagePermission.id}}" [(ngModel)]="pagePermission.selected" [value]='pagePermission.id' name="{{pagePermission.id}}" style="cursor: pointer;">
-                        <label class="custom-control-label disblayBlock-w" for="{{pagePermission.id}}" style="color:#2a2a2a; cursor:pointer; padding: 0 20px">{{pagePermission.permission_name}}</label>
+                      <input type="checkbox" class="custom-control-input roleCheckBox" id="{{pagePermission.id}}" [(ngModel)]="pagePermission.selected" [value]='pagePermission.id' name="{{pagePermission.id}}" style="cursor: pointer;">
+                      <label class="custom-control-label disblayBlock-w" for="{{pagePermission.id}}" style="color:#2a2a2a; cursor:pointer; padding: 0 20px">{{pagePermission.permission_name}}</label>
                     </div>
                 </div>
               </div>

src/app/dashboard/roles/role-report/role-report.component.html

@@ -4,24 +4,28 @@
         <div class="row">
             <div class="col-12">
               <button class="btn btn-success" style="float: right; margin: 10px 0;" (click)="onPrint()">طباعه</button> 
-              <table class="table table-bordered text-center">
-                <thead>
-                  <tr>
-                    <th>إسم المجموعه</th>
-                    <th>إسم الصفحه</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr *ngFor="let data of reportPages; let i = index">
-                    <td>{{data.role_name}}</td>
-                    <td>
-                      <p *ngFor="let page of data.pages">
-                        {{page.name}}
-                      </p>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
+              <table class="table table-bordered">
+                  <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>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let role of rolesList; let i = index ">
+                      <td>
+                        <div class="custom-control custom-checkbox centerIneerItem">
+                          <input type="checkbox" class="custom-control-input" id="{{role.id}}" [(ngModel)]="role.selected" [value]='role' (change)="checkIfAllSelected();">
+                        </div>
+                      </td>
+                      <td>{{role.role_name}}</td>
+                    </tr>
+                  </tbody>
+                </table>
             </div>
         </div>
     </div>

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

@@ -439,8 +439,18 @@ export class ServiceItemComponent implements OnInit {
       this.router.navigate(['departmentContactOfficers/' + dataPage.id], {relativeTo: this.route});
     }else if(dataPage.id == 55) {
       this.router.navigate(['addNewReport/' + dataPage.id], {relativeTo: this.route});
-    }else if(dataPage.id == 58) {
+    } else if(dataPage.id == 56) {
+      this.router.navigate(['followCommunicationList/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 58) {
       this.router.navigate(['maintenanceCommunicationList/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 59) {
+      this.router.navigate(['followCommunicationDepartment/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 60) {
+      this.router.navigate(['followSectionCommunicationList/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 61) {
+      this.router.navigate(['reportCurrentEmployeeOfficer'], {relativeTo: this.route});
+    } else if(dataPage.id == 62) {
+      this.router.navigate(['reportCommunication'], {relativeTo: this.route});
     }
     
   }

src/app/dashboard/users/user-permission/user-permission.component.css

@@ -26,4 +26,14 @@
 
 .userPermission-w .permission .custom-control {
     padding-left: 0;
+}
+
+
+.checkboxx {
+    position: absolute;
+    z-index: 1 !important;
+    opacity: 1 !important;
+    width: 20px !important;
+    height: 20px!important;
+    margin: 3px -15px !important;
 }

src/app/dashboard/users/user-permission/user-permission.component.html

@@ -16,7 +16,7 @@
         <div class="col-12 col-sm-3 col-md-3" *ngFor="let role of roles; let i = index">
           <div class="permission text-center">
             <div class="custom-control custom-checkbox centerIneerItem">
-              <input type="checkbox" class="custom-control-input" id="{{role.id}}" [(ngModel)]="role.selected" [value]='role.id' name="{{role.id}}" style="cursor: pointer;">
+              <input type="checkbox" class="custom-control-input checkboxx" id="{{role.id}}" [(ngModel)]="role.selected" [value]='role.id' name="{{role.id}}" style="cursor: pointer;">
               <label class="custom-control-label disblayBlock-w" for="{{role.id}}" style="color:#2a2a2a; cursor:pointer; padding: 0 20px">{{role.role_name}}</label>
             </div>
           </div>

src/app/end-higri-date/end-higri-date.component.html

@@ -3,6 +3,7 @@
     placeholder="yyyy-mm-dd"
     name="dp" 
     [(ngModel)]="endModel" 
+    [disabled]="higriDisabled"
     ngbDatepicker #d="ngbDatepicker" />
             
 <div class="input-group-append">

src/app/end-higri-date/end-higri-date.component.ts

@@ -36,10 +36,12 @@ const MONTHS = ['محرم', 'صفر', 'ربيع الأول', 'ربيع الآخ
     {provide: NgbDatepickerI18n, useClass: IslamicI18n}
   ]
 })
+
 export class EndHigriDateComponent implements OnInit {
 
   @Output() onDatePicked: EventEmitter<NgbDate> = new EventEmitter<NgbDate>();
   @Input() myEndDate;
+  @Input() higriDisabled;
   endModel: NgbDateStruct;
 
 

src/app/higri-date/higri-date.component.html

@@ -2,7 +2,8 @@
     (ngModelChange)="onSearchChange($event)" 
     placeholder="yyyy-mm-dd"
     name="dp" 
-    [(ngModel)]="model" 
+    [(ngModel)]="model"
+    [disabled]="higriDisabled"
     ngbDatepicker #d="ngbDatepicker" />
             
 <div class="input-group-append">

src/app/higri-date/higri-date.component.ts

@@ -42,6 +42,8 @@ export class HigriDateComponent implements OnInit {
   @Output() onDatePicked: EventEmitter<NgbDate> = new EventEmitter<NgbDate>();
   @Input() myDate;
   @Input() myDate2;
+  @Input() higriDisabled;
+
   model: NgbDateStruct;
 
 

src/app/login/login.component.html

@@ -1,4 +1,4 @@
-  <div class="login-dashBoard" [style.height.px]="myInnerHeight">
+  <div class="login-dashBoard" [style.min-height.px]="screenHeight">
     <div class="container">
         <div class="formContent-w">
             <h2>تسجيل الدخول</h2>

src/app/login/login.component.ts

@@ -1,7 +1,7 @@
 import { Location } from '@angular/common';
 import { Router, ActivatedRoute } from '@angular/router';
 import { AuthServiceService } from './../shared/auth-service.service';
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, HostListener } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { Response } from '@angular/http';
 import { ToastrService } from 'ngx-toastr';
@@ -24,7 +24,13 @@ export class LoginComponent implements OnInit {
 
   @ViewChild('f') loginFormData: NgForm;
 
-  myInnerHeight = window.innerHeight;
+  screenHeight:any;
+
+  @HostListener('window:resize', ['$event'])
+  getScreenSize(event?) {
+        this.screenHeight = window.innerHeight;
+        console.log(this.screenHeight);
+  }
 
   
 
@@ -50,6 +56,8 @@ export class LoginComponent implements OnInit {
       (responce: Response) => {
         localStorage.setItem('token', responce['token']);
         localStorage.setItem('userType', responce['user'].type);
+        localStorage.setItem('adminId', this.authSer.dataLoginUser['adminstration_id']);
+
         const id = responce['user'].id;
         console.log(id);
         this.authSer.setDataUser(responce);

src/app/servicesItems/services.component.ts

@@ -247,15 +247,24 @@ getDataService(dataService){
             this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/departmentContactOfficers/' + this.pages[0].id]);
           }else  if(this.pages[0].id == 55) {
             this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/addNewReport/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 56) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/followCommunicationList/' + this.pages[0].id]);
           }else  if(this.pages[0].id == 58) {
             this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/maintenanceCommunicationList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 59) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/followCommunicationDepartment/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 60) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/followSectionCommunicationList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 61){
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/reportCurrentEmployeeOfficer']);
+          } else if(this.pages[0].id == 62) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/reportCommunication']);
           }
         },
         (error) => {
           console.log(error);
         }
       );
-
      }
   }
 

src/app/shared/dashboard.service.ts

@@ -247,6 +247,8 @@ export class DashboardService {
         return this.http.get(this.authService.pathApi + '/get_location/' + pageId);
       }else if(typeGetData == 'definitionOfTime') {
         return this.http.get(this.authService.pathApi + '/get_time_period/' + pageId);
+      } else if(typeGetData == 'maintenance') {
+        return this.http.get(this.authService.pathApi + '/get_communication/' + pageId);
       }
   }
     //delete event
@@ -321,5 +323,16 @@ export class DashboardService {
     };
 
 
+    //return seconds inot hh-mm-ss
+     secondsToDhms(seconds) {
+        seconds = Number(seconds);
+        var days = Math.floor(seconds / (3600*24));
+        seconds  -= days*3600*24;
+        var hrs   = Math.floor(seconds / 3600);
+        seconds  -= hrs*3600;
+        var mnts = Math.floor(seconds / 60);
+        seconds  -= mnts*60;
+        return (days + " يوم, " + hrs + " ساعه, " + mnts + " دقيقه, " + seconds + " ثانيه");
+      }
 
 }

src/styles.css

@@ -976,6 +976,10 @@ height: 7px !important;
   text-align: left;
 }
 
+.form-control:disabled {
+  cursor: not-allowed;
+}
+
 
 .higriButton {
   position: absolute;