final

angular.json

@@ -25,10 +25,16 @@
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "node_modules/font-awesome/css/font-awesome.css",
+              "node_modules/owl.carousel/dist/assets/owl.carousel.css",
+              "node_modules/owl.carousel/dist/assets/owl.theme.default.css",
               "node_modules/ngx-toastr/toastr.css",
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/bootstrap/dist/js/bootstrap.js",
+              "node_modules/slick-carousel/slick/slick.min.js"
+            ]
           },
           "configurations": {
             "production": {

package-lock.json

@@ -934,6 +934,11 @@
         "semver-intersect": "1.4.0"
       }
     },
+    "@types/chart.js": {
+      "version": "2.7.42",
+      "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.7.42.tgz",
+      "integrity": "sha512-+0v+PV2J9wsV7u36Vqt5Oke7ugtiZqNeYJgNk5mgNMkEkqtjxo2Q9N5Q9znHlgmXeOTfQL6e1sfcAbTnPHAzlA=="
+    },
     "@types/core-js": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/@types/core-js/-/core-js-2.5.0.tgz",
@@ -969,9 +974,9 @@
       "integrity": "sha512-aWw2YTtAdT7CskFyxEX2K21/zSDStuf/ikI3yBqmwpwJF0pS+/IX5DWv+1UFffZIbruP6cnT9/LAJV1gFwAT1A=="
     },
     "@types/lodash": {
-      "version": "4.14.119",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.119.tgz",
-      "integrity": "sha512-Z3TNyBL8Vd/M9D9Ms2S3LmFq2sSMzahodD6rCS9V2N44HUMINb75jNkSuwAx7eo2ufqTdfOdtGQpNbieUjPQmw=="
+      "version": "4.14.120",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.120.tgz",
+      "integrity": "sha512-jQ21kQ120mo+IrDs1nFNVm/AsdFxIx2+vZ347DbogHJPd/JzKNMOqU6HCYin1W6v8l5R9XSO2/e9cxmn7HAnVw=="
     },
     "@types/lodash.isequal": {
       "version": "4.5.3",
@@ -1457,6 +1462,7 @@
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
       "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
       "dev": true,
+      "optional": true,
       "requires": {
         "delegates": "^1.0.0",
         "readable-stream": "^2.0.6"
@@ -2313,6 +2319,39 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "chart.js": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.7.3.tgz",
+      "integrity": "sha512-3+7k/DbR92m6BsMUYP6M0dMsMVZpMnwkUyNSAbqolHKsbIzH2Q4LWVEHHYq7v0fmEV8whXE0DrjANulw9j2K5g==",
+      "requires": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "chartjs-color": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.2.0.tgz",
+      "integrity": "sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=",
+      "requires": {
+        "chartjs-color-string": "^0.5.0",
+        "color-convert": "^0.5.3"
+      },
+      "dependencies": {
+        "color-convert": {
+          "version": "0.5.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
+          "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
+        }
+      }
+    },
+    "chartjs-color-string": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz",
+      "integrity": "sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==",
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
     "chokidar": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.4.tgz",
@@ -2516,8 +2555,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "colors": {
       "version": "1.1.2",
@@ -2675,7 +2713,8 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "constants-browserify": {
       "version": "1.0.0",
@@ -3089,7 +3128,8 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "depd": {
       "version": "1.1.2",
@@ -4151,7 +4191,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4172,12 +4213,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4192,17 +4235,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4319,7 +4365,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4331,6 +4378,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4345,6 +4393,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4352,12 +4401,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -4376,6 +4427,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4456,7 +4508,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4468,6 +4521,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4553,7 +4607,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4589,6 +4644,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4608,6 +4664,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4651,12 +4708,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -4665,6 +4724,7 @@
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
       "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
       "dev": true,
+      "optional": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "inherits": "~2.0.0",
@@ -4677,6 +4737,7 @@
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
       "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
       "dev": true,
+      "optional": true,
       "requires": {
         "aproba": "^1.0.3",
         "console-control-strings": "^1.0.0",
@@ -4708,7 +4769,8 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
       "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "get-stream": {
       "version": "3.0.0",
@@ -4856,6 +4918,11 @@
       "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==",
       "dev": true
     },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
+    },
     "handle-thing": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",
@@ -4963,7 +5030,8 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "has-value": {
       "version": "1.0.0",
@@ -5665,7 +5733,8 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
       "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "is-windows": {
       "version": "1.0.2",
@@ -6346,6 +6415,7 @@
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "dev": true,
+      "optional": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "parse-json": "^2.2.0",
@@ -6358,7 +6428,8 @@
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -6541,7 +6612,8 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
       "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "map-visit": {
       "version": "1.0.0",
@@ -7067,6 +7139,23 @@
         "tslib": "^1.9.0"
       }
     },
+    "ngx-owl-carousel": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/ngx-owl-carousel/-/ngx-owl-carousel-2.0.7.tgz",
+      "integrity": "sha512-y2RkgavDwLx//3iDnheX9WCo3EdZR09QJSoXmQDQR386LmOJSmqF0fOCJAgcp/l4GkdkEH8DpIu3VL+8TxWCJw==",
+      "requires": {
+        "jquery": ">= 2.2.0",
+        "owl.carousel": "^2.2.0"
+      }
+    },
+    "ngx-owl-carousel-o": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/ngx-owl-carousel-o/-/ngx-owl-carousel-o-1.0.10.tgz",
+      "integrity": "sha512-w/McwMYtsfrX9ffY8xtgZC3PNDFRz/K1Z5FUP4NO71tnfBms/bejE1yn/hvCER0x0xYO9jiJTvgpF18sKH63RA==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "ngx-pagination": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ngx-pagination/-/ngx-pagination-3.2.1.tgz",
@@ -7081,6 +7170,19 @@
         "quill": "^1.3.6"
       }
     },
+    "ngx-slick": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/ngx-slick/-/ngx-slick-0.2.1.tgz",
+      "integrity": "sha512-1ynZi91njdTNuc0fkzpIceLWwlu4wyn8IGFZqxqLGup4z3Frl+d4fRgTtZYhSufqp8hSx263I699NloWJgbG0A=="
+    },
+    "ngx-slick-carousel": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/ngx-slick-carousel/-/ngx-slick-carousel-0.4.4.tgz",
+      "integrity": "sha512-z/cu8CL7LlUaqtImxC595V644efgjHTdQ9+u3AqL/igQYSELRryENGVH0jyPZuJSpSNvi52I2HGeifPsEd7bkg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "ngx-slimscroll": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/ngx-slimscroll/-/ngx-slimscroll-7.1.0.tgz",
@@ -7332,6 +7434,7 @@
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
       "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
       "dev": true,
+      "optional": true,
       "requires": {
         "are-we-there-yet": "~1.1.2",
         "console-control-strings": "~1.1.0",
@@ -7571,6 +7674,14 @@
         "os-tmpdir": "^1.0.0"
       }
     },
+    "owl.carousel": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/owl.carousel/-/owl.carousel-2.3.4.tgz",
+      "integrity": "sha512-JaDss9+feAvEW8KZppPSpllfposEzQiW+Ytt/Xm5t/3CTJ7YVmkh6RkWixoA2yXk2boIwedYxOvrrppIGzru9A==",
+      "requires": {
+        "jquery": ">=1.8.3"
+      }
+    },
     "p-defer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
@@ -8342,6 +8453,7 @@
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
       "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
       "dev": true,
+      "optional": true,
       "requires": {
         "load-json-file": "^1.0.0",
         "normalize-package-data": "^2.3.2",
@@ -8353,6 +8465,7 @@
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
           "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
           "dev": true,
+          "optional": true,
           "requires": {
             "graceful-fs": "^4.1.2",
             "pify": "^2.0.0",
@@ -8363,7 +8476,8 @@
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -8372,6 +8486,7 @@
       "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
       "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
       "dev": true,
+      "optional": true,
       "requires": {
         "find-up": "^1.0.0",
         "read-pkg": "^1.0.0"
@@ -8382,6 +8497,7 @@
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
           "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
           "dev": true,
+          "optional": true,
           "requires": {
             "path-exists": "^2.0.0",
             "pinkie-promise": "^2.0.0"
@@ -8392,6 +8508,7 @@
           "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
           "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
           "dev": true,
+          "optional": true,
           "requires": {
             "pinkie-promise": "^2.0.0"
           }
@@ -9027,6 +9144,11 @@
       "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=",
       "dev": true
     },
+    "slick-carousel": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA=="
+    },
     "slide": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/slide/-/slide-1.1.6.tgz",
@@ -9666,6 +9788,7 @@
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
       "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
       "dev": true,
+      "optional": true,
       "requires": {
         "is-utf8": "^0.2.0"
       }
@@ -11017,6 +11140,7 @@
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
       "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
       "dev": true,
+      "optional": true,
       "requires": {
         "string-width": "^1.0.2 || 2"
       }

package.json

@@ -23,6 +23,7 @@
     "@auth0/angular-jwt": "^2.1.0",
     "@ng-bootstrap/ng-bootstrap": "^4.0.0",
     "@ngui/tab": "^0.5.0",
+    "@types/chart.js": "^2.7.40",
     "@types/es6-promise": "^3.3.0",
     "@types/jwt-decode": "^2.2.1",
     "alife-file-to-base64": "0.0.2",
@@ -33,11 +34,13 @@
     "angular2-modal": "^3.0.3",
     "angularx-flatpickr": "^6.1.0",
     "bootstrap": "^4.1.3",
+    "chart.js": "^2.7.2",
     "core-js": "^2.5.4",
     "cuppa-ng2-slidemenu": "^2.0.0",
     "date-fns": "^1.30.1",
     "flatpickr": "^4.5.2",
     "font-awesome": "^4.7.0",
+    "hammerjs": "~2.0.8",
     "hijri-date": "^0.2.2",
     "jquery": "^3.3.1",
     "jw-angular-social-buttons": "^1.0.0",
@@ -56,14 +59,19 @@
     "ngx-hijri-lib": "^1.0.6",
     "ngx-modialog": "^5.0.1",
     "ngx-moment": "^3.3.0",
+    "ngx-owl-carousel": "^2.0.7",
+    "ngx-owl-carousel-o": "^1.0.10",
     "ngx-pagination": "^3.2.1",
     "ngx-quill": "^3.0.0",
+    "ngx-slick": "^0.2.1",
+    "ngx-slick-carousel": "^0.4.4",
     "ngx-slimscroll": "^7.1.0",
     "ngx-spinner": "^6.1.2",
     "ngx-toastr": "^9.1.1",
     "popper.js": "^1.14.6",
     "rxjs": "~6.3.3",
     "rxjs-compat": "^6.3.3",
+    "slick-carousel": "^1.8.1",
     "zone.js": "~0.8.26"
   },
   "devDependencies": {

src/app/Internal-Page/circulars-page/circulars-page.component.css

@@ -84,6 +84,11 @@
     padding: 10px 0;
 }
 
+.menuTabContent-w ol li a,
+.menuTabContentEn-w ol li a {
+    color: #03aa9e;
+}
+
 /* .lastTab-w .menuTabContent-w {
     width: 100%;
     display: inline-block;
@@ -172,3 +177,34 @@
     border: 2px solid #888;
     color: #fff;
   }
+
+#demo {
+    width: 100%;
+    height: 300px;
+    background-color: #ccc;
+    margin: 30px auto;
+
+}
+
+.carousel-inner {
+    width: 100%;
+    height: 100%;
+    background-color: red;
+}
+
+.carousel-inner h3,
+.carousel-inner p {
+    color: #000;
+}
+
+.carousel-caption {
+    position: inherit;
+    z-index: 10;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    color: #fff;
+    text-align: center;
+    right: 0;
+    left: 0;
+    bottom: 0;
+}

src/app/Internal-Page/circulars-page/circulars-page.component.html

@@ -33,7 +33,10 @@
               <div class="menuTabContent-w">
                   <h2 class="text-center" *ngIf="checkShowData">لايوجد بيانات الأن لعرضها</h2>
                   <ol>
-                      <li *ngFor="let tab of data | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }">{{tab.name}}</li>
+                      <li *ngFor="let tab of data | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }">
+                        {{tab.name}}
+                        <button class="btn btn-default" *ngIf="tab.file" type="button" style="position: absolute; background:transparent; border:none; left:45px"> <a href="{{authSer.pathImg + tab.file}}" target="_blank"><i class="fas fa-download"></i></a></button>
+                      </li>
                   </ol>
               </div>
 
@@ -85,7 +88,10 @@
             <div class="menuTabContent-w" [className]=" authSer.arabicTemplate ? '' : 'menuTabContentEn-w' ">
                 <h2 class="text-center" *ngIf="checkShowData">No Data To Show</h2>
                 <ol>
-                    <li *ngFor="let tab of data | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }">{{tab.name_en}}</li>
+                    <li *ngFor="let tab of data | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }">
+                      {{tab.name_en}}
+                      <button class="btn btn-default" *ngIf="tab.file" type="button" style="position: absolute; background:transparent; border:none; right:45px"> <a href="{{authSer.pathImg + data.file}}" target="_blank"><i class="fas fa-download"></i></a></button>
+                    </li>
                 </ol>
                 <pagination-controls nextLabel="Next" previousLabel="Prev" (pageChange)="onPageChange($event)"></pagination-controls>
             </div>
@@ -98,3 +104,4 @@
     </div>
   </div>
 </ng-template>
+

src/app/Internal-Page/events/events.component.css

@@ -0,0 +1,38 @@
+.popUp {
+    width: 720px;
+    border: 1px solid #fff;
+    background-color: #fff;
+    box-shadow: 0px 2px 5px #252525;
+    border-radius: 5px;
+    margin: 0 auto;
+    text-align: left;
+    padding: 10px;
+    position: fixed;
+    top: 0;
+    left: 25%;
+}
+
+.eventContent-w {
+    width: 100%;
+    padding: 10px 0;
+    display: inline-block;
+}
+
+.eventContent-w h1 {
+    font-size: 18px;
+}
+
+.eventContent-w p {
+    text-align: center;
+    font-size: 16px;
+}
+
+.eventContent-w button {
+    position: absolute;
+    top: 0;
+    right: 0px;
+}
+
+/* .eventContentChange-w {
+    background-color: #888;
+} */

src/app/Internal-Page/events/events.component.html

@@ -1,108 +1,118 @@
-<br><br><br>
 
-<ng-template #modalContent let-close="close">
-  <div class="modal-header">
-    <h5 class="modal-title">Event action occurred</h5>
-    <button type="button" class="close" (click)="close()">
-      <span aria-hidden="true">&times;</span>
-    </button>
-  </div>
-  <div class="modal-body">
-    <div>
-      Action:
-      <pre>{{ modalData?.action }}</pre>
-    </div>
-    <div>
-      Event:
-      <pre>{{ modalData?.event | json }}</pre>
-    </div>
-  </div>
-  <div class="modal-footer">
-    <button type="button" class="btn btn-outline-secondary" (click)="close()">OK</button>
-  </div>
-</ng-template>
+<div class="eventContent-w" [ngClass]="{'eventContentChange-w': showDetailsEvent}">
+  <br><br><br>
 
-<div class="row text-center">
-  <div class="col-md-4">
-    <div class="btn-group">
-      <div
-        class="btn btn-primary"
-        mwlCalendarPreviousView
-        [view]="view"
-        [(viewDate)]="viewDate"
-        (viewDateChange)="activeDayIsOpen = false">
-        Previous
-      </div>
-      <div
-        class="btn btn-outline-secondary"
-        mwlCalendarToday
-        [(viewDate)]="viewDate">
-        Today
+  <ng-template #modalContent let-close="close">
+    <div class="modal-header">
+      <h5 class="modal-title">Event action occurred</h5>
+      <button type="button" class="close" (click)="close()">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+    <div class="modal-body">
+      <div>
+        Action:
+        <pre>{{ modalData?.action }}</pre>
       </div>
-      <div
-        class="btn btn-primary"
-        mwlCalendarNextView
-        [view]="view"
-        [(viewDate)]="viewDate"
-        (viewDateChange)="activeDayIsOpen = false">
-        Next
+      <div>
+        Event:
+        <pre>{{ modalData?.event | json }}</pre>
       </div>
     </div>
-  </div>
-  <div class="col-md-4">
-    <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>
-  </div>
-  <div class="col-md-4">
-    <div class="btn-group">
-      <div
-        class="btn btn-primary"
-        (click)="view = CalendarView.Month"
-        [class.active]="view === CalendarView.Month">
-        Month
-      </div>
-      <div
-        class="btn btn-primary"
-        (click)="view = CalendarView.Week"
-        [class.active]="view === CalendarView.Week">
-        Week
+    <div class="modal-footer">
+      <button type="button" class="btn btn-outline-secondary" (click)="close()">OK</button>
+    </div>
+  </ng-template>
+  
+  <div class="row text-center">
+    <div class="col-md-4">
+      <div class="btn-group">
+        <div
+          class="btn btn-primary"
+          mwlCalendarPreviousView
+          [view]="view"
+          [(viewDate)]="viewDate"
+          (viewDateChange)="activeDayIsOpen = false">
+          Previous
+        </div>
+        <div
+          class="btn btn-outline-secondary"
+          mwlCalendarToday
+          [(viewDate)]="viewDate">
+          Today
+        </div>
+        <div
+          class="btn btn-primary"
+          mwlCalendarNextView
+          [view]="view"
+          [(viewDate)]="viewDate"
+          (viewDateChange)="activeDayIsOpen = false">
+          Next
+        </div>
       </div>
-      <div
-        class="btn btn-primary"
-        (click)="view = CalendarView.Day"
-        [class.active]="view === CalendarView.Day">
-        Day
+    </div>
+    <div class="col-md-4">
+      <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>
+    </div>
+    <div class="col-md-4">
+      <div class="btn-group">
+        <div
+          class="btn btn-primary"
+          (click)="view = CalendarView.Month"
+          [class.active]="view === CalendarView.Month">
+          Month
+        </div>
+        <div
+          class="btn btn-primary"
+          (click)="view = CalendarView.Week"
+          [class.active]="view === CalendarView.Week">
+          Week
+        </div>
+        <div
+          class="btn btn-primary"
+          (click)="view = CalendarView.Day"
+          [class.active]="view === CalendarView.Day">
+          Day
+        </div>
       </div>
     </div>
   </div>
-</div>
-<br>
-<div [ngSwitch]="view">
-  <mwl-calendar-month-view
-    *ngSwitchCase="CalendarView.Month"
-    [viewDate]="viewDate"
-    [events]="events"
-    [refresh]="refresh"
-    [activeDayIsOpen]="activeDayIsOpen"
-    (dayClicked)="dayClicked($event.day)"
-    (eventClicked)="handleEvent('Clicked', $event.event)"
-    (eventTimesChanged)="eventTimesChanged($event)">
-  </mwl-calendar-month-view>
-  <mwl-calendar-week-view
-    *ngSwitchCase="CalendarView.Week"
-    [viewDate]="viewDate"
-    [events]="events"
-    [refresh]="refresh"
-    (eventClicked)="handleEvent('Clicked', $event.event)"
-    (eventTimesChanged)="eventTimesChanged($event)">
-  </mwl-calendar-week-view>
-  <mwl-calendar-day-view
-    *ngSwitchCase="CalendarView.Day"
-    [viewDate]="viewDate"
-    [events]="events"
-    [refresh]="refresh"
-    (eventClicked)="handleEvent('Clicked', $event.event)"
-    (eventTimesChanged)="eventTimesChanged($event)">
-  </mwl-calendar-day-view>
+  <br>
+  <div [ngSwitch]="view">
+    <mwl-calendar-month-view
+      *ngSwitchCase="CalendarView.Month"
+      [viewDate]="viewDate"
+      [events]="events"
+      [refresh]="refresh"
+      [activeDayIsOpen]="activeDayIsOpen"
+      (dayClicked)="dayClicked($event.day)"
+      (eventClicked)="handleEvent('Clicked', $event.event)"
+      (eventTimesChanged)="eventTimesChanged($event)">
+    </mwl-calendar-month-view>
+    <mwl-calendar-week-view
+      *ngSwitchCase="CalendarView.Week"
+      [viewDate]="viewDate"
+      [events]="events"
+      [refresh]="refresh"
+      (eventClicked)="handleEvent('Clicked', $event.event)"
+      (eventTimesChanged)="eventTimesChanged($event)">
+    </mwl-calendar-week-view>
+    <mwl-calendar-day-view
+      *ngSwitchCase="CalendarView.Day"
+      [viewDate]="viewDate"
+      [events]="events"
+      [refresh]="refresh"
+      (eventClicked)="handleEvent('Clicked', $event.event)"
+      (eventTimesChanged)="eventTimesChanged($event)">
+    </mwl-calendar-day-view>
+  </div>
+  
+  <br><br><br>
+  
+  <div class="popUp" *ngIf="showDetailsEvent">
+    <h1 class="text-center">{{dataLecture.title}}</h1>
+    <p [innerHTML]="dataLecture.description"></p>
+    <button class="btn btn-danger" (click)="closeDetailEvent()"><i class="fas fa-times-circle"></i></button>
+  </div>
 </div>
 
-<br><br><br>

src/app/Internal-Page/events/events.component.ts

@@ -1,3 +1,4 @@
+import { NgxSpinnerService } from 'ngx-spinner';
 import { InternalPageService } from './../../shared/internal-page.service';
 
 import { Component, OnInit,
@@ -47,16 +48,21 @@ const colors: any = {
 export class EventsComponent implements OnInit {
   events: CalendarEvent[] = [] ;
   refresh: Subject<any> = new Subject();
+  dataLecture: any;
+  showDetailsEvent:boolean = false;
 
-  constructor(private modal: NgbModal, private internalService: InternalPageService) {
+  constructor(private modal: NgbModal, 
+    private internalService: InternalPageService, 
+    private spinner:NgxSpinnerService) {
 
 }
   ngOnInit() {
+    this.spinner.show();
     this.loadEvents();
     this.refresh.next();
     console.log("dddddddd"+new Date())
-
   }
+
   loadEvents(): void {
     this.internalService.getEventNow().subscribe(
       (responce) => {
@@ -65,10 +71,12 @@ export class EventsComponent implements OnInit {
               event['start'] = new Date(responce['lectures'][i].start);
               event['end'] = new Date(responce['lectures'][i].end);
               event['title'] = responce['lectures'][i].title;
+              event['description'] = responce['lectures'][i].description;
+              event['description_en'] = responce['lectures'][i].description_en;
               this.events.push(event)
           }
           this.dayClicked({ date: new Date(), events: this.events });
-
+          this.spinner.hide();
       },
       (error) => {
         console.log(error);
@@ -115,6 +123,18 @@ export class EventsComponent implements OnInit {
       }
     }
 
+
+    handleEvent(ssss,event) {
+      this.showDetailsEvent = true;
+      console.log(ssss , event);
+      this.dataLecture = event;
+      console.log('dataaaaaa lectrueeeeee',this.dataLecture);
+    }
+
+    closeDetailEvent() {
+      this.showDetailsEvent = false;
+    }
+
   
 
 

src/app/Internal-Page/hospital-content/hospital-content.component.css

@@ -14,7 +14,7 @@
     text-align: right;
     background-color: #dac4a6;
     padding: 10px 20px;
-    color: #fff;
+    color: #ccc;
     font-size: 17px;
     font-weight: bold;
     border-bottom: 1px solid #fff;
@@ -57,16 +57,25 @@
 .recordsContent-w ul {
     width: 100%;
     text-align: center;
+    display: flex;
+    text-align: right;
+    justify-content: right;
 }
 
 .recordsContent-w ul li{
     cursor: pointer;
-    background-color: #bda380;
-    text-align: center;
-    margin: 5px 0;
-    color: #fff;
+    color: #ccc;
     font-weight: bold;
-    padding: 10px 0;
+    width: 100%;
+    padding: 6px 0;
+    border-bottom: 1px solid #ccc;
+    margin-left: 50px;
+    transition: all 0.5s;
+}
+
+.recordsContent-w ul li:hover {
+    color: #bda380;
+    border-bottom: 1px solid #bda380;
 }
 
 .recordsContent-w ul .nestedMenu {
@@ -92,6 +101,33 @@
     display: inline-block;
 }
 
+.testGroupEn-w {
+    margin: 10px 0;
+    border: 1px solid #ccc;
+    background-color: #f5f5f5;
+}
+
+.recordsContent-w .testBodyEn-w .nestedMenu {
+    width: 100%;
+    text-align: left;
+    direction: ltr;
+}
+
+.recordsContent-w .testBodyEn-w .nestedMenu li {
+    cursor: pointer;
+    color: #ccc;
+    font-weight: bold;
+    width: 100%;
+    padding: 6px 0;
+    border-bottom: 1px solid #ccc;
+    margin-right: 50px;
+    transition: all 0.5s;
+}
+
+.recordsContent-w .testBodyEn-w .nestedMenu li:hover{
+    color: #bda380;
+    border-bottom: 1px solid #bda380;
+}
 
 /* start english style  */
 
@@ -115,4 +151,5 @@
     color: #a9a8a8;
     font-size: 16px;
     margin: 0 10px;
-}
+}
+

src/app/Internal-Page/hospital-content/hospital-content.component.html

@@ -6,10 +6,8 @@
               <div class="row">
                   <div class="col-6 col-md-3">
                       <div class="recordsContent-w">
-                          <ul class="list-unstyled">
+                          <!-- <ul class="list-unstyled">
                             <li *ngFor="let hospital of hospitalCenters; let i = index" (click)="open(hospital,i)" style="cursor: pointer;">  
-                                <!-- <img src="../../../assets/image/Path 148.png" *ngIf="topArrow"/>
-                                <img src="../../../assets/image/Path 147.png" *ngIf="bottomArrow"/>   -->
                                 {{hospital.name}}
                                 <div *ngIf="i == expandedIndex">  
                                     <div class="containetttt" *ngFor="let field of hospital['fields']">
@@ -21,7 +19,25 @@
                                     </div>  
                                 </div>                                  
                             </li>
-                          </ul>
+                          </ul> -->
+                          <div class="accordion" id="accordionExample">
+                              <div class="panel-group testGroup-w" *ngFor="let hospital of hospitalCenters; let i = index"  id="accordion">
+                                  <div class="panel panel-default">
+                                      <div class="panel-heading accordion-toggle collapsed" [ngClass]="{ 'collapsed' : i == 0 }" id="{{ 'heading' + (i+1) }}" data-toggle="collapse" [attr.data-target]=" '#collapse' + (i+1) " [attr.aria-controls] = " 'collapse' + (i+1) ">
+                                          <h4 class="panel-title">{{hospital.name}}</h4>
+                                      </div>
+                                      <div *ngFor="let field of hospital['fields']" [ngClass]="{'show' : i == 0}" id="{{ 'collapse'+(i+1) }}" class="panel-collapse collapse" [attr.aria-labelledby] = " 'heading' + (i+1) " data-parent="#accordionExample">
+                                          <div class="panel-body testBody-w">
+                                              <ul class="list-unstyled nestedMenu">
+                                                <li (click)="showDescriptionDetails(field)" [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' ">
+                                                  {{field.title}} 
+                                                </li>
+                                              </ul>
+                                          </div>
+                                      </div>
+                                  </div>
+                              </div>
+                          </div>
                       </div>
                   </div>
                   <div class="col-6 col-md-9">
@@ -38,11 +54,29 @@
                 <div class="row">
                     <div class="col-6 col-md-3">
                         <div class="recordsContent-w">
-                            <ul class="list-unstyled">
+                            <div class="accordion" id="accordionExample">
+                                <div class="panel-group testGroupEn-w" *ngFor="let hospital of hospitalCenters; let i = index"  id="accordion">
+                                    <div class="panel panel-default">
+                                        <div class="panel-headingEn accordion-toggle collapsed"  [ngClass]="{ 'collapsed' : i == 0 }" id="{{ 'heading' + (i+1) }}" data-toggle="collapse" [attr.data-target]=" '#collapse' + (i+1) " [attr.aria-controls] = " 'collapse' + (i+1) ">
+                                            <h4 class="panel-title">{{hospital.name_en}}</h4>
+                                        </div>
+                                        <div *ngFor="let field of hospital['fields']" [ngClass]="{'show' : i == 0}" id="{{ 'collapse'+(i+1) }}" class="panel-collapse collapse" [attr.aria-labelledby] = " 'heading' + (i+1) " data-parent="#accordionExample">
+                                            <div class="panel-body testBodyEn-w">
+                                                <ul class="list-unstyled nestedMenu">
+                                                  <li (click)="showDescriptionDetails(field)">
+                                                    {{field.title_en}} 
+                                                  </li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- <ul class="list-unstyled">
                               <li *ngFor="let hospital of hospitalCenters; let i = index" (click)="open(hospital,i)" style="cursor: pointer;">  
                                   {{hospital.name_en}}  
                                   <div *ngIf="i == expandedIndex">  
-                                      <div class="containetttt" *ngFor="let field of hospital['fields']">
+                                      <div class="containetttt" c>
                                         <ul class="list-unstyled nestedMenu">
                                           <li (click)="showDescriptionDetails(field)">
                                             {{field.title_en}} 
@@ -51,7 +85,7 @@
                                       </div>  
                                   </div>                                  
                               </li>
-                            </ul>
+                            </ul> -->
                         </div>
                     </div>
                     <div class="col-6 col-md-9">

src/app/Internal-Page/hospital-content/hospital-content.component.ts

@@ -1,7 +1,9 @@
+import { NgxSpinnerService } from 'ngx-spinner';
 import { ActivatedRoute, Params } from '@angular/router';
 import { AuthServiceService } from './../../shared/auth-service.service';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterContentInit } from '@angular/core';
 import { InternalPageService } from '../../shared/internal-page.service';
+declare var $: any;
 
 @Component({
   selector: 'app-hospital-content',
@@ -13,6 +15,7 @@ export class HospitalContentComponent implements OnInit {
 
   constructor(private internalService: InternalPageService, 
               private route: ActivatedRoute,
+              private spinner: NgxSpinnerService,
               private authSer:AuthServiceService) { }
 
   hospitalCenters = [];
@@ -21,7 +24,6 @@ export class HospitalContentComponent implements OnInit {
   expandedIndex:number;
   topArrow:boolean = true;
   bottomArrow:boolean = false;
-  
   flag: boolean = false;
   typePage:string;
   
@@ -37,7 +39,7 @@ export class HospitalContentComponent implements OnInit {
 
 
   ngOnInit() {
-
+    this.spinner.show();
     this.expandedIndex = 0;
     this.route.params.subscribe(
       (params: Params) => {
@@ -45,7 +47,11 @@ export class HospitalContentComponent implements OnInit {
       }
     );
 
+
+  
+
     if(this.typePage == 'hospital') {
+
       this.internalService.getHospitalCenterList('hospitals_centers_list').subscribe(
         (responce) => {
           console.log(responce);
@@ -57,6 +63,27 @@ export class HospitalContentComponent implements OnInit {
           console.log(error);
         }
       );
+
+      this.authSer.parentsPage = [];
+
+      this.internalService.getParentData().subscribe(
+        (responce) => {
+          this.authSer.parentsPage = responce['parents'];
+          for(let i = 0; i < this.authSer.parentsPage.length; i++) {
+            if(this.authSer.parentsPage[i].id == 8) {
+              this.authSer.parentsPage[i].active = 1;
+            } else {
+              this.authSer.parentsPage[i].active = 0;
+            }
+          }
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+
+
     } else if(this.typePage == 'managements') {
       this.internalService.getHospitalCenterList('managements_list').subscribe(
         (responce) => {
@@ -69,6 +96,24 @@ export class HospitalContentComponent implements OnInit {
           console.log(error);
         }
       );
+
+      this.internalService.getParentData().subscribe(
+        (responce) => {
+          this.authSer.parentsPage = responce['parents'];
+          for(let i = 0; i < this.authSer.parentsPage.length; i++) {
+            if(this.authSer.parentsPage[i].id == 9) {
+              this.authSer.parentsPage[i].active = 1;
+            } else {
+              this.authSer.parentsPage[i].active = 0;
+            }
+          }
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+
     }
   }
 
@@ -102,4 +147,6 @@ export class HospitalContentComponent implements OnInit {
 
 
 
+
+
 }

src/app/Internal-Page/internal-page-content/internal-page-content.component.css

@@ -272,6 +272,7 @@ input,button {
     width: 100%;
     height: 405px;
     padding: 10px 0;
+    position: relative;
 }
 
 .slider img {
@@ -340,6 +341,11 @@ input,button {
 }
 
 
+.joinUsImg-w {
+    width: 100px;
+    height: 100px;
+}
+
 
 
 .servicesContent-w {
@@ -494,7 +500,7 @@ input,button {
 .contentsData-w .joinUs-w .dataContent,
 .contentsData-w .joinUsEn-w .dataContent {
     width: 100%;
-    padding: 20px 15px;
+    padding: 5px 15px;
     height: 200px;
     overflow-y: auto;
     margin-top: 2px;
@@ -582,7 +588,7 @@ input,button {
     background-color: #fff;
     box-shadow: 0 0px 1px #ccc;
     text-align: center;
-    padding: 30px 0;
+    padding: 15px 0;
 }
 
 .sharingEvent-w .content .eventsTab {
@@ -676,10 +682,17 @@ input,button {
 .iconeActive {
   width: 30px;
   height: 30px;
-  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
+  -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
 }
 
+/* .defaultIconn-w {
+    width: 30px;
+    height: 30px;
+    -webkit-filter: grayscale(100%);
+    filter: grayscale(100%); 
+} */
+
 .secondServices-w .contentSecondSer-w .contentSer .fieldData-w p{
     text-align: center;
     font-size: 12px;
@@ -753,6 +766,10 @@ input,button {
     border-bottom: 1px solid #ccc;
 }
 
+.tabs .lastTab-w .menuTabContent-w ol li a {
+    color: #00a99d;
+}
+
 .tabs .lastTab-w .menuTab-w ul li:last-child{
     border-left: none;
 }
@@ -878,6 +895,142 @@ input,button {
     margin: 0 10px;
 }
 
+.contentsData-w .joinUs-w .dataContent #demo,
+.contentsData-w .joinUsEn-w .dataContent #demo {
+    width: 100%;
+    height: 100;
+}
+
+.sharingEvent-w .content #demo1,
+.sharingEvent-w .content #demo2 {
+    width: 100%;
+    height: 100;
+}
+
+.contentsData-w .joinUs-w .dataContent #demo .active,
+.contentsData-w .joinUsEn-w .dataContent #demo .active{
+    background-color: #fff !important;
+    color: #000 !important;
+}
+
+.sharingEvent-w .content #demo1 .active,
+.sharingEvent-w .content #demo2 .active {
+    background-color: #fff !important;
+    color: #000 !important;
+}
+
+.contentsData-w .joinUs-w .dataContent .carousel-inner,
+.contentsData-w .joinUsEn-w .dataContent .carousel-inner {
+    width: 100%;
+    height: 100%;
+}
+
+.sharingEvent-w .content .carousel-inner {
+    width: 100%;
+    height: 100%;
+}
+
+.contentsData-w .joinUs-w .dataContent .carousel-inner h3,
+.contentsData-w .joinUs-w .dataContent .carousel-inner p {
+    color: #bda380;
+}
+
+.contentsData-w .joinUsEn-w .dataContent .carousel-inner h3,
+.contentsData-w .joinUsEn-w .dataContent .carousel-inner p {
+    color: #bda380;
+}
+
+.sharingEvent-w .content .carousel-inner h3,
+.sharingEvent-w .content .carousel-inner p {
+    color: #bda380;
+}
+
+.contentsData-w .joinUs-w .dataContent .carousel-caption,
+.contentsData-w .joinUsEn-w .dataContent .carousel-caption {
+    position: inherit;
+    height: 183px;;
+    z-index: 10;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    color: #fff;
+    text-align: center;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background: transparent;
+}
+
+.sharingEvent-w .content .carousel-caption {
+    position: inherit;
+    height: 170px;;
+    z-index: 10;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    color: #fff;
+    text-align: center;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background: transparent;
+}
+
+.contentsData-w .joinUs-w .dataContent .carousel-caption img,
+.contentsData-w .joinUsEn-w .dataContent .carousel-caption img {
+    width: 120px;
+    height: 110px;
+    float: right;
+    margin: 0 10px;    
+}
+
+.contentsData-w .joinUs-w .dataContent #demo .carousel-indicators li,
+.contentsData-w .joinUsEn-w .dataContent #demo .carousel-indicators li{
+    background-color: #ccc;
+    width: 25px;
+    border-radius: 11px;
+    height: 7px;    
+}
+
+.sharingEvent-w .content #demo1 .carousel-indicators ,
+.sharingEvent-w .content #demo2 .carousel-indicators {
+    margin-right: 7%;
+}
+
+.sharingEvent-w .content #demo1 .carousel-indicators li,
+.sharingEvent-w .content #demo2 .carousel-indicators li{
+    background-color: #ccc;
+    width: 25px;
+    border-radius: 11px;
+    height: 7px;    
+}
+
+.contentsData-w .joinUs-w .dataContent #demo .carousel-indicators .active,
+.contentsData-w .joinUsEn-w .dataContent #demo .carousel-indicators .active {
+    background-color: #007A71 !important;
+}
+
+.sharingEvent-w .content #demo1 .carousel-indicators .active,
+.sharingEvent-w .content #demo2 .carousel-indicators .active {
+    background-color: #007A71 !important;
+}
+
+.notAllowed-w{
+    cursor: not-allowed !important;
+    pointer-events: none;
+}
+
+.advertisiment {
+    width: 98%;
+    height: 100px;
+    padding: 10px 0;
+    margin: 0 8px;
+    position: relative;
+}
+
+.advertisiment img {
+    width: 100%;
+    height: 100%;
+}
+
 
 
 @media(max-width: 767px) {

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

@@ -1,126 +1,145 @@
 <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
-        <div class="container">
-            <div class="contentPage-w">
-                <div class="servicesContent-w">
-                    <div class="container">
-                        <div class="row">
-                            <div class="col-12 col-md-4 order-2 order-sm-2 order-md-1">
-                                <div class="row">
-                                    <div class="col-6 col-md-6 editRowPadding-w" *ngFor="let service of externalServices">
-                                        <a class="hyperLink" href="{{service.link}}">
-                                            <div class="serviceItem-w">
-                                                <img src="{{authSer.pathImg + service.photo}}" />
-                                                <p>{{service.name}}</p>
-                                            </div>
-                                        </a>
-                                    </div>
+    <div class="container">
+        <div class="contentPage-w">
+            
+            <div class="advertisiment">
+                <img src="{{ authSer.pathImg + advertisiment.photo }}" />
+            </div>
+
+            <div class="servicesContent-w">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-12 col-md-4 order-2 order-sm-2 order-md-1">
+                            <div class="row">
+                                <div class="col-6 col-md-6 editRowPadding-w" *ngFor="let service of externalServices">
+                                    <a class="hyperLink" href="{{service.link}}">
+                                        <div class="serviceItem-w">
+                                            <img src="{{authSer.pathImg + service.photo}}" title="TITLE NEED SHOW ON HOVER"/>
+                                            <p>{{service.name}}</p>
+                                        </div>
+                                    </a>
                                 </div>
                             </div>
+                        </div>
 
-                            <div class="col-12 col-md-8 order-1 order-sm-1 order-md-2">
-                                <div class="slider">
-                                    <div *ngIf="reportsData.length > 1"> 
-                                        <ngb-carousel #myCarousel="ngbCarousel">
-                                            <ng-template ngbSlide *ngFor="let report of reportsData; let i = index" id={{i}} >
-                                                <img [src]="authSer.pathImg + report.photo.photo" alt="Random first slide">
-                                                <div class="carousel-caption">
-                                                <h4>{{report.title}}</h4>
-                                                <p class="paragraphTemplate-w" [innerHTML] = "report.description"> </p>
-                                                <span class="extra d-none d-sm-none d-md-block" *ngIf="report.description" (click)="onExtraPage(report.id)"> تفاصيل الخبر</span>
-                                                <span class="allNews d-none d-sm-none d-md-block" (click)="getAllNews()" *ngIf="report.description"> المزيد من الأخبار</span>
-                                                </div>
-                                            </ng-template>
-                                        </ngb-carousel>
-                                    </div>
+                        <div class="col-12 col-md-8 order-1 order-sm-1 order-md-2">
+                            <div class="slider">
+                                 
+                                <div *ngIf="reportsData.length > 1"> 
+                                    <ngb-carousel #myCarousel="ngbCarousel">
+                                        <ng-template ngbSlide *ngFor="let report of reportsData; let i = index" id={{i}} >
+                                            <img [src]="authSer.pathImg + report.photo.photo" alt="Random first slide">
+                                            <div class="carousel-caption">
+                                            <h4>{{report.title}}</h4>
+                                            <p class="paragraphTemplate-w" [innerHTML] = "report.description"> </p>
+                                            <span class="extra d-none d-sm-none d-md-block" *ngIf="report.description" (click)="onExtraPage(report.id)"> تفاصيل الخبر</span>
+                                            <span class="allNews d-none d-sm-none d-md-block" (click)="getAllNews()" *ngIf="report.description"> المزيد من الأخبار</span>
+                                            </div>
+                                        </ng-template>
+                                    </ngb-carousel>
                                 </div>
-                            </div> 
-                        </div>
+                            </div>
+                        </div> 
                     </div>
                 </div>
+            </div>
 
-                 <div class="eventPart-w">
-                    <div class="container containerPaddingEdit-w">
-                        <div class="event">
-                            <div class="row">
-                                <div class="col-12 col-sm-12 col-md-12 col-lg-4">
-                                    <p class="now"> <img src="../../../assets/image/live.png"/>  يعرض الأن :<span>{{live_event ? live_event.name : 'لايوجد حدث '}}</span></p>
-                                </div>
-                                <div class="col-12 col-sm-12 col-md-12 col-lg-4">
-                                    <p class="next"> <img src="../../../assets/image/back.png"> يعرض لاحقاً :<span>{{next_lecture ? next_lecture.name : 'لايوجد حدث '}}</span></p>
-                                </div>
-                                <div class="col-12 col-sm-12 col-md-12 col-lg-4">
-                                    <p class="lectureHeading" (click)="onLectureTable()"> <img class="lectureCalenderImg" src="../../../assets/image/calendar.png" /> جدول المحاضرات</p>
-                                </div>
+                <div class="eventPart-w">
+                <div class="container containerPaddingEdit-w">
+                    <div class="event">
+                        <div class="row">
+                            <div class="col-12 col-sm-12 col-md-12 col-lg-4">
+                                <p class="now"> <img src="../../../assets/image/live.png"/>  يعرض الأن :<span>{{live_event ? live_event.name : 'لايوجد حدث '}}</span></p>
+                            </div>
+                            <div class="col-12 col-sm-12 col-md-12 col-lg-4">
+                                <p class="next"> <img src="../../../assets/image/back.png"> يعرض لاحقاً :<span>{{next_lecture ? next_lecture.name : 'لايوجد حدث '}}</span></p>
+                            </div>
+                            <div class="col-12 col-sm-12 col-md-12 col-lg-4">
+                                <p class="lectureHeading" (click)="onLectureTable()"> <img class="lectureCalenderImg" src="../../../assets/image/calendar.png" /> جدول المحاضرات</p>
                             </div>
                         </div>
                     </div>
                 </div>
+            </div>
 
-                <div class="contentsData-w">
-                    <div class="container containerPaddingEdit-w">
-                        <div class="row">
-                            <div class="col-12 col-sm-12 col-md-4 editRowPadding-w">
-                                <div class="joinUs-w">
-                                    <div class="joinHeader-w">
-                                        إنضم إلينا
-                                    </div>
-                                    <div class="joinHeading-w">
-                                        <h2>ترحيب بالإنضمام للمجمع الطبي</h2>
-                                    </div>
-                                    <div class="dataContent">
-                                        <div class="row">
-                                            <div class="col-12 col-md-12 col-lg-5">
-                                                <div class="joinUs-photo">
-                                                    <img src="{{authSer.pathImg + joinTabData.photo}}" />
-                                                </div>
-                                            </div>
-                                            <div class="col-12 col-md-12 col-lg-7">
-                                                <div class="profileData-w">
-                                                    <p>  الموظف :<span>{{joinTabData.name}}</span></p>
-                                                    <p>  الإداره :<span>{{joinTabData.adminstration_name ? joinTabData.adminstration_name : 'لايوجد'}}</span></p>
-                                                    <p>  التاريخ :<span>{{joinTabData.date_of_employment_hij}}</span></p>
+            <div class="contentsData-w">
+                <div class="container containerPaddingEdit-w">
+                    <div class="row">
+                        <div class="col-12 col-sm-12 col-md-4 editRowPadding-w">
+                            <div class="joinUs-w">
+                                <div class="joinHeader-w">
+                                    إنضم إلينا
+                                </div>
+                                <div class="joinHeading-w">
+                                    <h2>ترحيب بالإنضمام للمجمع الطبي</h2>
+                                </div>
+                                <div class="dataContent">
+                                    <div class="row">                                         
+                                        <div id="demo" class="carousel slide" data-ride="carousel">
+                                            <ul class="carousel-indicators">
+                                                <li *ngFor="let join of joinUs; let i = index" data-target="#demo" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
+                                            </ul>
+                                            <div class="carousel-inner">
+                                                <div class="carousel-item" *ngFor="let join of joinUs; let i = index" [ngClass]="i == 0 ? 'active' : ''">
+                                                    <div class="carousel-caption">
+                                                        <img src="{{authSer.pathImg + join.photo}}" />
+                                                        <p> الموظف : <span>{{join.name}}</span></p>
+                                                        <p> الإداره: <span>{{join.adminstration_name ? join.adminstration_name : 'not found'}}</span></p>
+                                                        <p>  التاريخ : <span>{{join.date_of_employment_hij ? join.date_of_employment_hij : 'not found'}}</span></p>
+                                                    </div>   
                                                 </div>
                                             </div>
-                                            <div class="col-12">
-                                                <ul class="list-unstyled eventsTab">
-                                                    <li  *ngFor="let join of joinUs; let i = index" [ngClass]="join.active == 0 ? '' : 'actineTab' " (click)="showJoinData(join)"></li>
-                                                </ul> 
-                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                             <div class="col-12 col-md-8 editRowPadding-w">
-                                <div class="sharingEvent-w">
-                                    <div class="sharingHeader-w">
-                                        <h2>مشاركه اللحظات</h2>
+                        </div>
+                            <div class="col-12 col-md-8 editRowPadding-w">
+                            <div class="sharingEvent-w">
+                                <div class="sharingHeader-w">
+                                    <h2>مشاركه اللحظات</h2>
+                                </div>
+                                <div class="row">
+                                    <div class="col-12 col-md-6" style="padding-left:5px">
+                                        <div class="congeratolation">
+                                            <h2>التهانى</h2>
+                                        </div>
+                                        <div class="content">
+                                            <div id="demo1" class="carousel slide" data-ride="carousel">
+                                                <ul class="carousel-indicators">
+                                                    <li *ngFor="let conga of congratulations; let i = index" data-target="#demo1" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
+                                                </ul>
+                                                <div class="carousel-inner">
+                                                    <div class="carousel-item" *ngFor="let conga of congratulations; let i = index" [ngClass]="i == 0 ? 'active' : ''">
+                                                        <div class="carousel-caption">
+                                                            <p>الموظف : <span>{{conga.employee_name}}</span></p>
+                                                            <p class="event">{{conga.name}}</p>
+                                                            <p>{{conga.created_at}}</p>
+                                                        </div>   
+                                                    </div>
+                                                </div>
+                                            </div> 
+                                        </div>
                                     </div>
-                                    <div class="row">
-                                        <div class="col-12 col-md-6" style="padding-left:5px">
-                                            <div class="congeratolation">
-                                                <h2>التهانى</h2>
-                                            </div>
-                                            <div class="content">     
-                                                <p>الموظف : <span>{{tabCongaData.employee_name}}</span></p>
-                                                <p class="event">{{tabCongaData.name}}</p>
-                                                <p>{{tabCongaData.created_at}}</p>
-                                                <ul class="list-unstyled eventsTab">
-                                                    <li  *ngFor="let conga of congratulations; let i = index" [ngClass]="conga.active == 0 ? '' : 'actineTab' " (click)="showTabData(conga,'wedding')"></li>
-                                                </ul>    
-                                            </div>
+                                    <div class="col-12 col-md-6" style="padding-right:5px">
+                                        <div class="sadDead-w">
+                                            <h2>التعازى</h2>
                                         </div>
-                                        <div class="col-12 col-md-6" style="padding-right:5px">
-                                            <div class="sadDead-w">
-                                                <h2>التعازى</h2>
-                                            </div>
-                                            <div class="content">     
-                                                <p>الموظف : <span>{{tabSadData.employee_name}}</span></p>
-                                                <p class="event">{{tabSadData.name}}</p>
-                                                <p>{{tabSadData.created_at}}</p>
-                                                <ul class="list-unstyled eventsTab">
-                                                    <li  *ngFor="let cond of condolences; let i = index" [ngClass]="cond.active == 0 ? '' : 'actineTab' " (click)="showTabData(cond, 'sad')"></li>
-                                                </ul>    
-                                            </div>
+                                        <div class="content">    
+                                            <div id="demo2" class="carousel slide" data-ride="carousel">
+                                                <ul class="carousel-indicators">
+                                                    <li *ngFor="let cond of condolences; let i = index" data-target="#demo2" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
+                                                </ul>
+                                                <div class="carousel-inner">
+                                                    <div class="carousel-item" *ngFor="let cond of condolences; let i = index" [ngClass]="i == 0 ? 'active' : ''">
+                                                        <div class="carousel-caption">
+                                                            <p>الموظف : <span>{{cond.employee_name}}</span></p>
+                                                            <p class="event">{{cond.name}}</p>
+                                                            <p>{{cond.created_at}}</p>
+                                                        </div>   
+                                                    </div>
+                                                </div>
+                                            </div>  
                                         </div>
                                     </div>
                                 </div>
@@ -128,25 +147,25 @@
                         </div>
                     </div>
                 </div>
-
-                <div class="secondServices-w">
-                    <div class="container containerPaddingEdit-w" style="height:560px; overflow-y:auto">
-                        <div class="row" style="padding:0 10px;">
-                            <div class="col-12 col-sm-6 col-md-4 editRowPadding-w" *ngFor="let ser of internalServices">
-                                <div class="contentSecondSer-w">
-                                    <div class="headerSer-w">
-                                        {{ser.name}}
-                                    </div>
-                                    <div class="contentSer" style="overflow:auto; overflow-x:hidden">
-                                        <div class="row" style="padding: 0 10px; margin-left: 0; margin-right: 0">
-                                            <div class="col-6 col-md-4"  *ngFor="let field of ser['fields']">
-                                            <a href="{{ field.apperance == 1 ? field.link : '' }}" style="text-decoration:none">
-                                                <div class="fieldData-w text-center">
-                                                    <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" [className]=" field.apperance == 1 ? 'iconeActive' : ''" />
-                                                    <p style="color:#767676; font-size:13px;">{{field.name ? field.name : 'إضافه خدمه'}}</p>
-                                                </div>
-                                            </a>
+            </div>
+        
+            <div class="secondServices-w">
+                <div class="container containerPaddingEdit-w" style="height:560px; overflow-y:auto">
+                    <div class="row" style="padding:0 10px;">
+                        <div class="col-12 col-sm-6 col-md-4 editRowPadding-w" *ngFor="let ser of internalService">
+                            <div class="contentSecondSer-w">
+                                <div class="headerSer-w">
+                                    {{ser.name}}
+                                </div>
+                                <div class="contentSer" style="overflow:auto; overflow-x:hidden">
+                                    <div class="row" style="padding: 0 10px; margin-left: 0; margin-right: 0">
+                                        <div class="col-6 col-md-4"  *ngFor="let field of ser['fields']">
+                                        <a [attr.href]=" field.apperance == 1 ? field.link : '#' " [className]=" field.apperance == 1 ? '' : 'notAllowed-w' " style="text-decoration:none">
+                                            <div class="fieldData-w text-center">
+                                                <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" [className]=" field.apperance == 0 ? 'iconeActive' : '' " />
+                                                <p style="color:#767676; font-size:13px;">{{field.name ? field.name : 'إضافه خدمه'}}</p>
                                             </div>
+                                        </a>
                                         </div>
                                     </div>
                                 </div>
@@ -154,50 +173,55 @@
                         </div>
                     </div>
                 </div>
+            </div>
 
-                <div class="tabs">
-                    <div class="container containerPaddingEdit-w">
-                        <div class="row">
-                            <div class="col-12 col-md-12 col-lg-8 editRowPadding-w">
-                                <div class="lastTab-w">
-                                    <div class="headerTab-w">
-                                        أخر التعاميم
-                                    </div>
-                                    <div class="menuTab-w">
-                                        <ul class="list-unstyled">
-                                            <li (click)="onGetData(0)" [ngClass]="{'active': selectedItem == 0}">التعاميم الداخليه</li>
-                                            <li (click)="onGetData(1)" [ngClass]="{'active': selectedItem == 1}">التعاميم الخارجيه</li>
-                                            <li (click)="onGetData(2)" [ngClass]="{'active': selectedItem == 2}">السياسات</li>
-                                        </ul>
-                                    </div>
-                                    <div class="menuTabContent-w">
-                                        <h2 class="text-center" *ngIf="checkShowData">لايوجد بيانات الأن لعرضها</h2>
-                                        <ol>
-                                            <li *ngFor="let data of tabsData">{{data.name}}</li>
-                                        </ol>
-                                        <button class="btn btn-primary" (click)="onPageCir()" style="margin:0 auto; display:block; background-color:#bda380; width:150px;border:none;">المزيد</button>
-                                    </div>
+            <div class="tabs">
+                <div class="container containerPaddingEdit-w">
+                    <div class="row">
+                        
+                        <div class="col-12 col-md-12 col-lg-8 editRowPadding-w">
+                            <div class="lastTab-w">
+                                <div class="headerTab-w">
+                                    أخر التعاميم
+                                </div>
+                                <div class="menuTab-w">
+                                    <ul class="list-unstyled">
+                                        <li (click)="onGetData(0)" [ngClass]="{'active': selectedItem == 0}">التعاميم الداخليه</li>
+                                        <li (click)="onGetData(1)" [ngClass]="{'active': selectedItem == 1}">التعاميم الخارجيه</li>
+                                        <li (click)="onGetData(2)" [ngClass]="{'active': selectedItem == 2}">السياسات</li>
+                                    </ul>
+                                </div>
+                                <div class="menuTabContent-w">
+                                    <h2 class="text-center" *ngIf="checkShowData">لايوجد بيانات الأن لعرضها</h2>
+                                    <ol>
+                                        <li *ngFor="let data of tabsData">{{data.name}}
+                                             <button class="btn btn-default" *ngIf="data.file" type="button" style="position: absolute; background:transparent; border:none; left:45px"> <a href="{{authSer.pathImg + data.file}}" target="_blank"><i class="fas fa-download"></i></a></button>
+                                        </li>
+                                    </ol>
+                                    <button class="btn btn-primary" (click)="onPageCir()" style="margin:0 auto; display:block; background-color:#bda380; width:150px;border:none;">المزيد</button>
                                 </div>
                             </div>
-                            <div class="col-12 col-md-12 col-lg-4 editRowPadding-w">
-                                <div class="recods">
-                                    <div class="headerRecords-w">
-                                        إحصائيات عامه - إنجازات
-                                    </div>
-                                    <div class="recordsContent-w">
-                                        <ol>
-                                            <li *ngFor="let achiev of achievements; let i = index" (click)="open(achiev,i)" style="cursor: pointer;">
-                                                <p>{{achiev.title}}</p>
-                                                <div *ngIf="i == expandedIndex">
-                                                    <div class="collapse">
-                                                        <div>
-                                                            <p>{{achiev.title}}</p>
-                                                            <p>{{achiev.descripton}}</p>
-                                                        </div>
+                        </div>
+
+                        <div class="col-12 col-md-12 col-lg-4 editRowPadding-w">
+                            <div class="recods">
+                                <div class="headerRecords-w">
+                                    إحصائيات عامه - إنجازات
+                                </div>
+                                <div class="recordsContent-w">
+                                    <div class="accordion" id="accordionExample">
+                                        <div class="panel-group testGroup-w" *ngFor="let achiev of achievements; let i = index"  id="accordion">
+                                            <div class="panel panel-default">
+                                                <div class="panel-heading accordion-toggle collapsed" id="{{ 'heading' + (i+1) }}" data-toggle="collapse" [attr.data-target]=" '#collapse' + (i+1) " [attr.aria-controls] = " 'collapse' + (i+1) ">
+                                                    <h4 class="panel-title">{{achiev.title}}</h4>
+                                                </div>
+                                                <div id="{{ 'collapse'+(i+1) }}" class="panel-collapse collapse" [attr.aria-labelledby] = " 'heading' + (i+1) " data-parent="#accordionExample">
+                                                    <div class="panel-body testBody-w">
+                                                        <p [innerHTML]="achiev.description"></p>
                                                     </div>
                                                 </div>
-                                            </li>
-                                        </ol>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -206,8 +230,10 @@
                 </div>
             </div>
         </div>
+    </div> 
+
 
-    </ng-template>
+</ng-template>
 
 
 
@@ -218,6 +244,12 @@
         <div class="container">
             <div class="row">
 
+            <div class="col-12">
+                <div class="advertisiment">
+                        <img src="{{ authSer.pathImg + advertisiment.photo }}" />
+                </div>
+            </div>
+            
             <div class="col-12 col-md-4 order-2 order-sm-2 order-md-1">
                 <div class="row">
                 <div class="col-6 col-md-6 editRowPadding-w" *ngFor="let service of externalServices">
@@ -282,23 +314,20 @@
                     </div>
                     <div class="dataContent">
                         <div class="row">
-                            <div class="col-12 col-md-12 col-lg-5">
-                                <div class="joinUs-photo">
-                                <img src="{{authSer.pathImg + joinTabData.photo}}" />
-                                </div>
-                            </div>
-                            <div class="col-12 col-md-12 col-lg-7">
-                                <div class="profileData-w">
-                                <p> Employee : <span>{{joinTabData.name_en}}</span></p>
-                                <p> Administration : <span>{{joinTabData.adminstration_name_en ? joinUs.adminstration_name_en : 'not found'}}</span></p>
-                                <p> Date : <span>{{joinTabData.date_of_employment_hij ? joinTabData.date_of_employment_hij : 'not found'}}</span></p>
+                            <div id="demo" class="carousel slide" data-ride="carousel">
+                                <ul class="carousel-indicators">
+                                    <li *ngFor="let join of joinUs; let i = index" data-target="#demo" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
+                                </ul>
+                                <div class="carousel-inner">
+                                    <div class="carousel-item" *ngFor="let join of joinUs; let i = index" [ngClass]="i == 0 ? 'active' : ''">
+                                        <div class="carousel-caption">
+                                            <img src="{{authSer.pathImg + join.photo}}" />
+                                            <p> Employee : <span>{{join.name_en}}</span></p>
+                                            <p>  Date : <span>{{join.date_of_employment_hij ? join.date_of_employment_hij : 'not found'}}</span></p>
+                                        </div>   
+                                    </div>
                                 </div>
                             </div>
-                            <div class="col-12">
-                                <ul class="list-unstyled eventsTab">
-                                    <li  *ngFor="let join of joinUs; let i = index" [ngClass]="join.active == 0 ? '' : 'actineTab' " (click)="showJoinData(join)"></li>
-                                </ul> 
-                            </div>  
                         </div>
                     </div>
                 </div>
@@ -310,31 +339,47 @@
                     </div>
                     <div class="row">
                         <div class="col-12 col-md-6" style="padding-right:5px">
-                        <div class="congeratolation">
-                            <h2>Congratulations</h2>
-                        </div>
-                        <div class="content">     
-                            <p>Employee : <span>{{tabCongaData.employee_name_en}}</span></p>
-                            <p class="event">{{tabCongaData.name_en}}</p>
-                            <p>{{tabCongaData.created_at}}</p>
-                            <ul class="list-unstyled eventsTab">
-                                <li  *ngFor="let conga of congratulations; let i = index" [ngClass]="conga.active == 0 ? '' : 'actineTab' " (click)="showTabData(conga,'wedding')"></li>
-                            </ul>    
-                        </div>
+                            <div class="congeratolation">
+                                <h2>Congratulations</h2>
+                            </div>
+                            <div class="content">     
+                                <div id="demo1" class="carousel slide" data-ride="carousel">
+                                    <ul class="carousel-indicators">
+                                        <li *ngFor="let conga of congratulations; let i = index" data-target="#demo1" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
+                                    </ul>
+                                    <div class="carousel-inner">
+                                        <div class="carousel-item" *ngFor="let conga of congratulations; let i = index" [ngClass]="i == 0 ? 'active' : ''">
+                                            <div class="carousel-caption">
+                                                <p>Employee : <span>{{conga.employee_name_en}}</span></p>
+                                                <p class="event">{{conga.name_en}}</p>
+                                                <p>{{conga.created_at}}</p>
+                                            </div>   
+                                        </div>
+                                    </div>
+                                </div>    
+                            </div>
                         
                         </div>
                         <div class="col-12 col-md-6" style="padding-left:5px">
-                        <div class="sadDead-w">
-                            <h2>Condolences</h2>
-                        </div>
-                        <div class="content">     
-                            <p>Empolyee : <span>{{tabSadData.employee_name_en}}</span></p>
-                            <p class="event">{{tabSadData.name_en}}</p>
-                            <p>{{tabSadData.created_at}}</p>
-                            <ul class="list-unstyled eventsTab">
-                                <li  *ngFor="let cond of condolences; let i = index" [ngClass]="cond.active == 0 ? '' : 'actineTab' " (click)="showTabData(cond, 'sad')"></li>
-                            </ul>    
-                        </div>
+                            <div class="sadDead-w">
+                                <h2>Condolences</h2>
+                            </div>
+                            <div class="content">     
+                                <div id="demo2" class="carousel slide" data-ride="carousel">
+                                    <ul class="carousel-indicators">
+                                        <li *ngFor="let cond of condolences; let i = index" data-target="#demo2" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
+                                    </ul>
+                                    <div class="carousel-inner">
+                                        <div class="carousel-item" *ngFor="let cond of condolences; let i = index" [ngClass]="i == 0 ? 'active' : ''">
+                                            <div class="carousel-caption">
+                                                <p>Employee : <span>{{cond.employee_name_en}}</span></p>
+                                                <p class="event">{{cond.name_en}}</p>
+                                                <p>{{cond.created_at}}</p>
+                                            </div>   
+                                        </div>
+                                    </div>
+                                </div>    
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -344,7 +389,7 @@
             <div class="secondServices-w">
                 <div class="container" style="height:560px; overflow-y:auto; padding-left:5px">
                     <div class="row" style="padding:0 10px;">
-                        <div class="col-12 col-sm-6 col-md-4 editRowPadding-w" *ngFor="let ser of internalServices">
+                        <div class="col-12 col-sm-6 col-md-4 editRowPadding-w" *ngFor="let ser of internalService">
                             <div class="contentSecondSer-w" style="float:left;">
                                 <div class="headerSer-w">
                                     {{ser.name_en}}
@@ -352,11 +397,11 @@
                                 <div class="contentSer" style="overflow:auto; overflow-x:hidden">
                                     <div class="row" style="padding: 0 10px; margin-left: 0; margin-right: 0">
                                         <div class="col-6 col-md-4"  *ngFor="let field of ser['fields']">
-                                            <a href="{{ field.apperance == 1 ? field.link : '' }}" style="text-decoration:none">
-                                            <div class="fieldData-w text-center">
-                                                <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" [className]=" field.apperance == 1 ? 'iconeActive' : ''" />
-                                                <p style="color:#767676; font-size:13px;">{{field.name_en ? field.name_en : 'إضافه خدمه'}}</p>
-                                            </div>
+                                            <a [href]=" field.apperance == 1 ? field.link : ' ' " style="text-decoration:none">
+                                                <div class="fieldData-w text-center">
+                                                    <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" [className]=" field.apperance == 1 && authSer.isAuthenticated() ? 'iconeActive' : 'defaultIconn-w' " />
+                                                    <p style="color:#767676; font-size:13px;">{{field.name_en ? field.name_en : 'إضافه خدمه'}}</p>
+                                                </div>
                                             </a>
                                         </div>
                                     </div>
@@ -385,7 +430,10 @@
                         <div class="menuTabContent-w">
                         <h2 class="text-center" *ngIf="checkShowData"> no data to show , now </h2>
                         <ol [className]="authSer.arabicTemplate ? '' : 'achievementsLang-w' ">
-                            <li *ngFor="let data of tabsData">{{data.name_en}}</li>
+                            <li *ngFor="let data of tabsData">
+                                {{data.name_en}}
+                                <button class="btn btn-default" *ngIf="data.file" type="button" style="position: absolute; background:transparent; border:none; right:45px"> <a href="{{authSer.pathImg + data.file}}" target="_blank"><i class="fas fa-download"></i></a></button>
+                            </li>
                         </ol>
                         <button class="btn btn-primary" (click)="onPageCir()" style="margin:0 auto; display:block; background-color:#bda380; width:150px; border:none;">more</button>
                         </div>
@@ -397,19 +445,20 @@
                             General Statistics - Achievements
                         </div>
                         <div class="recordsContent-w">
-                            <ol [className]="authSer.arabicTemplate ? '' : 'achievementsLang-w' ">
-                            <li *ngFor="let achiev of achievements; let i = index" (click)="open(achiev,i)" style="cursor: pointer;">
-                                <p>{{achiev.title_en}}</p>
-                                <div *ngIf="i == expandedIndex">
-                                    <div class="collapse">
-                                        <div>
-                                            <p>{{achiev.title_en}}</p>
-                                            <p>{{achiev.descripton_en}}</p>
+                            <div class="accordion" id="accordionExample">
+                                <div class="panel-group testGroupEn-w" *ngFor="let achiev of achievements; let i = index"  id="accordion">
+                                    <div class="panel panel-default">
+                                        <div class="panel-headingEn accordion-toggle collapsed" id="{{ 'heading' + (i+1) }}" data-toggle="collapse" [attr.data-target]=" '#collapse' + (i+1) " [attr.aria-controls] = " 'collapse' + (i+1) ">
+                                            <h4 class="panel-title">{{achiev.title_en}}</h4>
+                                        </div>
+                                        <div id="{{ 'collapse'+(i+1) }}" class="panel-collapse collapse" [attr.aria-labelledby] = " 'heading' + (i+1) " data-parent="#accordionExample">
+                                            <div class="panel-body testBodyEn-w">
+                                                <p [innerHTML]="achiev.description_en"></p>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                            </li>
-                            </ol>
+                            </div>
                         </div>
                     </div>
                     </div>
@@ -417,6 +466,8 @@
                 </div>
             </div>
             </div>
+
+          
         </div>
         </div>
      </div>

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

@@ -1,3 +1,4 @@
+import { HttpClient } from '@angular/common/http';
 import { UserService } from './../../shared/user.service';
 import { Router, ActivatedRoute } from '@angular/router';
 import { AuthServiceService } from './../../shared/auth-service.service';
@@ -6,6 +7,9 @@ import { InternalPageService } from '../../shared/internal-page.service';
 import { NgxSpinnerService } from 'ngx-spinner';
 import {NgbCarousel,NgbCarouselConfig} from '@ng-bootstrap/ng-bootstrap';
 
+import * as $ from 'jquery';
+declare var jQuery: any;
+
 
 @Component({
   selector: 'app-internal-page-content',
@@ -13,9 +17,12 @@ import {NgbCarousel,NgbCarouselConfig} from '@ng-bootstrap/ng-bootstrap';
   styleUrls: ['./internal-page-content.component.css'],
   providers: [NgbCarouselConfig],
 })
+
+
 export class InternalPageContentComponent implements OnInit {
 
   @ViewChild('myCarousel') myCarousel: NgbCarousel;
+  
 
 
   constructor(private authSer: AuthServiceService,
@@ -24,10 +31,9 @@ export class InternalPageContentComponent implements OnInit {
     private internalService: InternalPageService,
     private route: ActivatedRoute,
     private config: NgbCarouselConfig,
+    private http: HttpClient,
     private spinner: NgxSpinnerService) {
-      this.config.interval = 10000;
-       this.config.wrap = false;
-      this.config.keyboard = false;
+
 
 
      }
@@ -68,6 +74,12 @@ export class InternalPageContentComponent implements OnInit {
       photo: '',
     };
 
+    advertisiment = {
+      photo : '',
+      description: '',
+      description_en: '',
+    };
+
     checkShowData: boolean;
     tabtype:number = 0;
     expandedIndex:number;
@@ -89,8 +101,14 @@ export class InternalPageContentComponent implements OnInit {
     }
 
 
+ 
+
+    
+
+
   ngOnInit() {
 
+    
     this.spinner.show();
 
    
@@ -98,121 +116,65 @@ export class InternalPageContentComponent implements OnInit {
     // this.myCarousel.activeId = '2';
 
     //this.spinner.show();
-    this.authSer.showDashboardHeader = false;
    //console.log(this.checkTokenExpire);
        //get profile data
     this.userservice.getUserDataProfile();
 
-
-
-
-    //get slider data
-    this.internalService.getSliderData().subscribe(
+    this.internalService.getInternalPageData().subscribe(
       (responce) => {
-        console.log('responxce', responce);
-        this.reportsData = responce['reports'];
+        console.log(responce);
+        this.externalServices = responce['data'].external_services;
+        console.log('external services ', this.externalServices);
+        this.reportsData = responce['data'].reports;
         console.log('report data', this.reportsData);
+
         for(let i = 0; i< this.reportsData.length; i++) {
           if(this.reportsData[i].description.length > 60) {
             this.reportsData[i].description = this.reportsData[i].description.substr(0,100) + '.......';
             this.reportsData[i].description_en = this.reportsData[i].description_en.substr(0,100) + 'Read More';
           }
         }
-      },
-      (error) => {
-        console.log(error);
-      }
-    );
 
-    //get externals list
-    this.internalService.getExternalServicesList().subscribe(
-      (responce) => {
-        this.externalServices = responce['external_services'];
-      },
-      (error) => {
-        console.log(error);
-      }
-    );
+        this.live_event = responce['data'].live_lecture;
+        this.next_lecture = responce['data'].next_lecture;
 
-    //get join us data
-    this.internalService.getJoinUsData().subscribe(
-      (responce) => {
-        console.log('joooin us', responce);
-        this.joinUs = responce['users'];
-        console.log(this.joinUs);
+        this.joinUs = responce['data'].users;
         this.showJoinData(this.joinUs[0]);
-        console.log('zzzzzzzzzzzzzzzzzz', this.showJoinData);
-      },
-      (error) => {
-        console.log(error);
-      }
-    );
-
-    this.internalService.getCongatoration().subscribe(
-      (responce) => {
-        this.congratulations = responce['events'];
-        this.showTabData(this.congratulations[0], 'wedding');
-      },
-      (error) => {
-        console.log(error);
-      }
-    );
 
-    this.internalService.getCondolences().subscribe(
-      (responce) => {
-        this.condolences = responce['events'];
+        this.condolences = responce['data'].condolences_events;
         this.showTabData(this.condolences[0], 'sad');
-      },
-      (error) => {
-        console.log(error);
-      }
-    );
 
-    this.internalService.getInternalServicesList().subscribe(
-      (responce) => {
-        console.log('internal serviceees',responce);
-        this.internalServices = responce['internal_services'];
-      },
-      (error) => {
-        console.log(error);
-      }
-    );
+        this.congratulations = responce['data'].congratulations_events;
+        this.showTabData(this.congratulations[0], 'wedding');
 
-    this.internalService.getTabData(this.tabtype).subscribe(
-      (responce) => {
-        this.tabsData = responce['tabs'];
+        this.internalService = responce['data'].internal_services;
+        console.log('internalService', this.internalService);
+
+        this.tabsData = responce['data'].tabs;
+        
         if(this.tabsData.length > 0) {
-          this.checkShowData = false;
+            this.checkShowData = false;
         } else {
-          this.checkShowData = true;
+            this.checkShowData = true;
         }
-      },
-      (error) => {
-        console.log(error);
-      }
-    );
 
-    this.internalService.getForthAchievementsList().subscribe(
-      (responce) => {
-        console.log('weeeeeeeeeeeeeeeeeeee', responce);
-        this.achievements = responce['achievements'];
-      },
-      (error) => {
-        console.log(error);
-      }
-    );
+        this.achievements = responce['data'].achievements;
+        
+        this.advertisiment = {
+          photo: responce['data']['main_ad'].photo,
+          description: responce['data']['main_ad'].description,
+          description_en: responce['data']['main_ad'].description_en,
+        }
+       
+        
+       
 
-    this.internalService.getEventNow().subscribe(
-      (responce) => {
-        this.live_event = responce['live_lecture'];
-        this.next_lecture = responce['next_lecture'];
         this.spinner.hide();
       },
       (error) => {
         console.log(error);
       }
-    );
-
+    )
   }
 
 
@@ -221,20 +183,17 @@ export class InternalPageContentComponent implements OnInit {
     this.spinner.show();
     this.tabsData = [];
     this.tabtype = numberTab;
-    this.internalService.getTabData(this.tabtype).subscribe(
+
+    this.http.get(this.authSer.pathApi + '/forth_tabs_list/' + this.tabtype).subscribe(
       (responce) => {
+        console.log(responce);
         this.tabsData = responce['tabs'];
-        if(this.tabsData.length > 0) {
-          this.checkShowData = false;
-        } else {
-          this.checkShowData = true;
-        }
         this.spinner.hide();
       },
       (error) => {
         console.log(error);
       }
-    )
+    );
   }
 
   onExtraPage(reportId) {

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

@@ -14,7 +14,7 @@ input,button {
 	float: left !important;
 }
 .dropdown-item{
-	    border: 0px solid #00000008 !important;
+	border: 0px solid #00000008 !important;
     width: 75px !important;
     padding: 4px 0px !important;
     text-align: center !important;
@@ -40,9 +40,7 @@ input,button {
     margin: -12px 0px 0px 6px;
     background-color: #f1f1f1;
 }
-.mylistt mg{
-	
-}
+
 .internalHeader-w {
     width: 100%;
     height: 35px;
@@ -422,8 +420,7 @@ input,button {
 }
 
 .activeLanguageIcon {
-    width: 40px;
-    height: 40px;
+    width: 35px;
     float: left !important;
     margin: 0 5px;
 }
@@ -455,6 +452,10 @@ input,button {
     background-color: #d8cdbd !important;
 }
 
+.activeInternalHeader-w {
+    background-color: #d8cdbd !important;
+  }
+
 
 @media(max-width: 767px) {
     .tabs .lastTab-w .menuTab-w ul li {

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

@@ -5,49 +5,48 @@
         <div class="container">
             <div class="row">
                 <div class="col-5 col-sm-5 col-md-4 col-lg-4"  style="margin:0;padding:0">
-                    <ul class="list-unstyled notificationList-w" *ngIf="!authSer.isAuthenticated()">
-                        <li class="profileData-w">
+                    <div class="notificationDiv-w">
+                        <ul class="list-unstyled notificationList-w" *ngIf="!authSer.isAuthenticated()">
+                          <li class="profileData-w">
                             <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
                                 <button class="buttonW" ngbDropdownToggle>
-									<img src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="imageProfile" alt="" />
-									
-									{{authSer.dataLoginUser['name']}} </button>
-								
-                                <div class="dropdown-menu" style="text-align:right" ngbDropdownMenu>
-									 <button class="dropdown-item" style="cursor: pointer;" >
-										<i class="fas fa-bell"></i>
-										 <span>الاشعارات</span>
-									</button>
-									<!-- <button class="dropdown-item" style="cursor: pointer;" >
-										 <i class="fas fa-comments"></i>
-										 <span>رسائل</span>
-									</button> -->
-                                    <button class="dropdown-item" style="cursor: pointer;" (click)="onGetProfile()">
-										<i class="fas fa-user-alt"></i>
-										 <span>ملفي</span>
-									</button>
-									<button class="dropdown-item" style="cursor: pointer;" >
-										 <i class="fas fa-sticky-note"></i>
-										 <span>ملاحظاتي</span>
-									</button>
-									<button class="dropdown-item" style="cursor: pointer;" >
-										 <i class="fas fa-tasks"></i>
-										 <span>مهامي</span>
-									</button>
-                                    <button class="dropdown-item" style="cursor: pointer;" (click)="onDashBoard()">
-										<i class="fas fa-solar-panel"></i>
-										<span>لوحة التحكم</span>
-									</button>
-                                    <button class="dropdown-item" style="cursor: pointer;color: #da0b0b !important;background-color: #f3f3f3;border-radius: 4px;" (click)="onLogout()">
-										<i class="fas fa-sign-out-alt" style="color: #da0b0b !important;"></i>
-										<span>خروج</span>
-									</button>
-                                </div>
+                                    <img src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="imageProfile" alt="" />
+                                        {{authSer.dataLoginUser['name']}} 
+                                </button>
+                  
+                            <div class="dropdown-menu" style="text-align:right" ngbDropdownMenu>
+
+                                <button class="dropdown-item" style="cursor: pointer;" >
+                                <i class="fas fa-bell"></i>
+                                <span>الاشعارات</span>
+                                </button>
+                                <button class="dropdown-item" style="cursor: pointer;" (click)="onGetProfile()">
+                                    <i class="fas fa-user-alt"></i>
+                                    <span>ملفي</span>
+                                </button>
+                                <button class="dropdown-item" style="cursor: pointer;" >
+                                <i class="fas fa-sticky-note"></i>
+                                <span>ملاحظاتي</span>
+                                </button>
+                                <button class="dropdown-item" style="cursor: pointer;" >
+                                <i class="fas fa-tasks"></i>
+                                <span>مهامي</span>
+                                </button>
+                                 <button class="dropdown-item" style="cursor: pointer;" (click)="onDashBoard()">
+                                    <i class="fas fa-solar-panel"></i>
+                                    <span>لوحة التحكم</span>
+                                </button>
+                                <button class="dropdown-item" style="cursor: pointer;color: #da0b0b !important;background-color: #f3f3f3;border-radius: 4px;" (click)="onLogout()">
+                                    <i class="fas fa-sign-out-alt" style="color: #da0b0b !important;"></i>
+                                    <span>خروج</span>
+                                </button>
                             </div>
-                        </li>
-                        <!-- <li><span><i class="fas fa-comments"></i></span></li>
-                        <li><span><i class="fas fa-bell"></i></span></li> -->
-                    </ul>
+                         </div>
+                      </li>
+                          <!-- <li><span><i class="fas fa-comments"></i></span></li>
+                          <li><span><i class="fas fa-bell"></i></span></li> -->
+                      </ul>
+                      </div>
                     <p *ngIf="authSer.isAuthenticated()" class="login"><a (click)="onLogin()">تسجيل دخول </a></p>
                 </div>
                 <div class="col-5 col-sm-5 col-md-4 col-lg-4 backgroundXS">
@@ -99,42 +98,42 @@
                     <div ngbDropdown class="d-inline-block d-lg-none mobileMenu-w">
                         <button class="btn btn-outline-primary menuMobile-w" id="dropdownBasic1" ngbDropdownToggle style="color:#61a59b"><i class="fas fa-bars"></i></button>
                         <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="dropDownMobile-w">
-                            <button class="dropdown-item" style="font-weight:bold; color:#00A99D;font-size:14px;"> <a href="/home"> الرئيسيه</a></button>
-                            <div *ngFor="let parent of parentsPage; let i = index" class="dropdown">
-                                    <button class="dropbtn" *ngIf="parent['childs'].length > 0">
-                                        <span class="parentName-w"> {{parent.name}}<i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i></span>
-                                    </button>
-                                    <button class="dropbtn" *ngIf="parent['childs'].length == 0">
-                                        <a href="{{parent.link}}" style="text-decoration:none"> <span class="parentName-w"> {{parent.name}}</span> </a>
-                                        <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
-                                    </button>
-                                    <div class="dropdown-content" *ngIf="parent['childs'].length > 0">
-                                        <div class="row">
-                                            <div *ngFor="let child of parent['childs']" style="width:100%;">
-                                                <ul class="list-unstyled" style="width: 100%; padding: 0 10px;">
-                                                    <li style="text-align:right; padding: 5px 5px; border-bottom: 1px solid #ccc">
-                                                        <a href="{{child.link}}"> {{child.name}}</a>
-                                                    </li>
-                                                </ul>
-                                            </div>
+                            <button class="dropdown-item activeInternalHeader-w"> <a href="/home"> الرئيسيه</a></button>
+                            <div *ngFor="let parent of authSer.parentsPage; let i = index" class="dropdown">
+                                <button class="dropbtn" *ngIf="parent['childs'].length > 0">
+                                    <span class="parentName-w"> {{parent.name}}<i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i></span>
+                                </button>
+                                <button class="dropbtn" *ngIf="parent['childs'].length == 0">
+                                    <a href="{{parent.link}}" style="text-decoration:none"> <span class="parentName-w"> {{parent.name}}</span> </a>
+                                    <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
+                                </button>
+                                <div class="dropdown-content" *ngIf="parent['childs'].length > 0">
+                                    <div class="row">
+                                        <div *ngFor="let child of parent['childs']" style="width:100%;">
+                                            <ul class="list-unstyled" style="width: 100%; padding: 0 10px;">
+                                                <li style="text-align:right; padding: 5px 5px; border-bottom: 1px solid #ccc">
+                                                    <a href="{{child.link}}"> {{child.name}}</a>
+                                                </li>
+                                            </ul>
                                         </div>
                                     </div>
                                 </div>
+                            </div>
                         </div>
                     </div>
                     <!-- end navbar mobile -->
 
                     <!-- start large screen navbar -->
 
-                    <button class="dropbtn d-none d-sm-none d-md-none d-lg-block homeBtn" (click)="goToHome()" style="background:transparent; border:none;color:#00A99D;height: 100%">
+                    <button class="dropbtn d-none d-sm-none d-md-none d-lg-block homeBtn" (click)="goToHome()" style="background:transparent; border:none;color:#00A99D;height: 100%" [ngClass]="{'activeInternalHeader-w': authSer.headereClassActive}">
                         <a style="cursor: pointer; font-size:18px; font-weight:bold">   <i class="fa fa-home" style="font-size: 30px;margin:0 5px;"></i> <span class="parentName-w"> الرئيسيه</span></a>
                     </button>
-                    <div *ngFor="let parent of parentsPage; let i = index" class="dropdown d-none d-sm-none d-md-none d-lg-block">
-                        <button class="dropbtn" *ngIf="parent['childs'].length > 0">
+                    <div *ngFor="let parent of authSer.parentsPage; let i = index" class="dropdown d-none d-sm-none d-md-none d-lg-block">
+                        <button class="dropbtn" *ngIf="parent['childs'].length > 0" [ngClass]="parent.active == 0 ? '' : 'activeLink' ">
                             <span class="parentName-w"> {{parent.name}}  <i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i></span>
                             <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" />
                         </button>
-                        <button class="dropbtn" *ngIf="parent['childs'].length == 0">
+                        <button class="dropbtn" *ngIf="parent['childs'].length == 0" [ngClass]="parent.active == 0 ? '' : 'activeInternalHeader'" (click)="getData(parent)">
                             <a href="{{parent.link}}" style="text-decoration:none"> <span class="parentName-w"> {{parent.name}} </span>
                                 <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" />
                             </a>
@@ -256,36 +255,36 @@
         <div class="container">
             <div class="row">
                 <div class="navbar">
-                        <div ngbDropdown class="d-inline-block d-lg-none mobileMenu-w">
-                                <button class="btn btn-outline-primary menuMobile-w" id="dropdownBasic1" style="color:#61a59b" ngbDropdownToggle><i class="fas fa-bars"></i></button>
-                                <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="dropDownMobile-w">
-                                    <button class="dropdown-item" (click)="goToHome()" [className]=" arabicTemplate ? '' : 'activeHomeMenu' ">Home</button>
-                                    <div *ngFor="let parent of parentsPage; let i = index" class="dropdown" [className]=" arabicTemplate ? '' : 'activeHeaderMenu' ">
-                                        <button class="dropbtn" *ngIf="parent['childs'].length > 0">
-                                            <span class="parentName-w"> {{parent.name_en}}  <i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i></span>
-                                            <!-- <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" /> -->
-                                        </button>
-                                        <button class="dropbtn" *ngIf="parent['childs'].length == 0">
-                                            <a href="{{parent.link}}" style="text-decoration:none"> <span class="parentName-w"> {{parent.name_en}} </span> </a>
-                                            <!-- <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" /> -->
-                                            <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
-                                        </button>
-                                        <div class="dropdown-content" *ngIf="parent['childs'].length > 0">
-                                            <div class="row">
-                                                <div *ngFor="let child of parent['childs']" style="width:100%;">
-                                                    <ul class="list-unstyled" style="width: 100%; padding: 0 10px;">
-                                                        <li style="text-align:right; padding: 5px 5px; border-bottom: 1px solid #ccc">
-                                                            <a href="{{child.link}}"> {{child.name_en}}</a>
-                                                        </li>
-                                                    </ul>
-                                                </div>
-                                            </div>
+                    <div ngbDropdown class="d-inline-block d-lg-none mobileMenu-w">
+                        <button class="btn btn-outline-primary menuMobile-w" id="dropdownBasic1" style="color:#61a59b" ngbDropdownToggle><i class="fas fa-bars"></i></button>
+                        <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="dropDownMobile-w">
+                            <button class="dropdown-item" (click)="goToHome()" [className]=" arabicTemplate ? '' : 'activeHomeMenu' ">  Home</button>
+                            <div *ngFor="let parent of authSer.parentsPage; let i = index" class="dropdown" [className]=" arabicTemplate ? '' : 'activeHeaderMenu' ">
+                                <button class="dropbtn" *ngIf="parent['childs'].length > 0">
+                                    <span class="parentName-w"> {{parent.name_en}}  <i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i></span>
+                                    <!-- <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" /> -->
+                                </button>
+                                <button class="dropbtn" *ngIf="parent['childs'].length == 0">
+                                    <a href="{{parent.link}}" style="text-decoration:none"> <span class="parentName-w"> {{parent.name_en}} </span> </a>
+                                    <!-- <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" /> -->
+                                    <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
+                                </button>
+                                <div class="dropdown-content" *ngIf="parent['childs'].length > 0">
+                                    <div class="row">
+                                        <div *ngFor="let child of parent['childs']" style="width:100%;">
+                                            <ul class="list-unstyled" style="width: 100%; padding: 0 10px;">
+                                                <li style="text-align:right; padding: 5px 5px; border-bottom: 1px solid #ccc">
+                                                    <a href="{{child.link}}"> {{child.name_en}}</a>
+                                                </li>
+                                            </ul>
                                         </div>
                                     </div>
                                 </div>
                             </div>
+                        </div>
+                    </div>
 
-                    <div *ngFor="let parent of parentsPage; let i = index" class="dropdown d-none d-sm-none d-md-none d-lg-block">
+                    <div *ngFor="let parent of authSer.parentsPage; let i = index" class="dropdown d-none d-sm-none d-md-none d-lg-block">
                         <button class="dropbtn" *ngIf="parent['childs'].length > 0">
                             <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" />
                             <span class="parentName-w"> {{parent.name_en}}  <i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i></span>
@@ -306,7 +305,7 @@
                         </div>
                     </div>
                     <button class="dropbtn d-none d-sm-none d-md-none d-lg-block" (click)="goToHome()" style="background:transparent; border:none;color:#00A99D">
-                        <a style="cursor: pointer; font-size:18px; font-weight:bold"> <span class="parentName-w">Home</span></a>
+                        <a style="cursor: pointer; font-size:18px; font-weight:bold">  <span class="parentName-w">Home</span> <i class="fa fa-home" style="font-size: 30px;margin:0 5px;"></i></a>
                     </button>
                 </div>
             </div>

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

@@ -1,4 +1,4 @@
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute, Params } from '@angular/router';
 import { InternalPageService } from './../../shared/internal-page.service';
 import { UserService } from './../../shared/user.service';
 import { AuthServiceService } from './../../shared/auth-service.service';
@@ -16,23 +16,26 @@ export class InternalPageHeaderComponent implements OnInit {
   constructor(private authSer: AuthServiceService, 
     private userservice: UserService, 
     private internalService: InternalPageService, 
+    private route: ActivatedRoute,
     private router: Router) { }
   
-    parentsPage = [];
     
-    currentDate: any = Date.now();
+  currentDate: any = Date.now();
 
 
-    currentEnglishDate: any = Date.now();
+  currentEnglishDate: any = Date.now();
+
+  showActiveBackground: boolean = false;
      
   ngOnInit() {
 
+
     this.authSer.setLocalLang();
     console.log('tooooken', this.authSer.isAuthenticated());
     this.internalService.getParentData().subscribe(
       (responce) => {
-        this.parentsPage = responce['parents'];
-        console.log('parents pageees', this.parentsPage);
+        this.authSer.parentsPage = responce['parents'];
+        console.log('parents pageees', this.authSer.parentsPage);
       },
       (error) => {
         console.log(error);
@@ -73,6 +76,9 @@ export class InternalPageHeaderComponent implements OnInit {
   }
 
 
+
+
+
   
 
 }

src/app/Internal-Page/internal-page.module.ts

@@ -19,6 +19,7 @@ import { FormsModule } from '@angular/forms';
 import {NgxPaginationModule} from 'ngx-pagination';
 import { JwSocialButtonsModule } from 'jw-angular-social-buttons';
 import { CeiboShare } from 'ng2-social-share';
+import { CarouselModule } from 'ngx-owl-carousel-o';
 
 
 @NgModule({
@@ -39,6 +40,7 @@ import { CeiboShare } from 'ng2-social-share';
         CollapsibleModule,
         NgxPaginationModule,
         JwSocialButtonsModule,
+        CarouselModule,
         NgbModule.forRoot(),
         FlatpickrModule.forRoot(),
         CalendarModule.forRoot({

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

@@ -1,5 +1,5 @@
 import { InternalPageService } from './../../shared/internal-page.service';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute, Params } from '@angular/router';
 import { AuthServiceService } from './../../shared/auth-service.service';
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { ToastrService } from 'ngx-toastr';
@@ -21,6 +21,7 @@ export class InternalPageComponent implements OnInit {
   constructor(private authSer: AuthServiceService, 
     private router:Router, 
     private userservice: UserService, 
+    private route: ActivatedRoute,
     private internalService: InternalPageService,
     private spinner: NgxSpinnerService,) { }
 
@@ -41,6 +42,7 @@ export class InternalPageComponent implements OnInit {
    externalServices = [];
 
 
+
     
     // flag: boolean = false;
   
@@ -64,9 +66,11 @@ export class InternalPageComponent implements OnInit {
     this.userservice.getUserDataProfile();
     this.spinner.hide();
     //get parent and child data
-    this.internalService.getParentData();
+   
     //this.router.navigate(['InternalPage/home']);
 
+   
+
     // //get slider data
     // this.internalService.getSliderData().subscribe(
     //   (responce) => {

src/app/app-routing.module.ts

@@ -1,3 +1,4 @@
+import { CanDeactivateGuard } from './shared/can-deactivate-guards.service';
 import { AddJoinUsComponent } from './dashboard/add-join-us/add-join-us.component';
 import { AddMenuComponent } from './dashboard/main-menu/add-menu/add-menu.component';
 import { MainListComponent } from './dashboard/main-menu/main-list/main-list.component';
@@ -42,6 +43,8 @@ import { AddEventComponent } from './dashboard/events/add-event/add-event.compon
 import { NewsListComponent } from './dashboard/news/news-list/news-list.component';
 import { InternalServicesComponent } from './dashboard/internal-services/internal-services.component';
 import { InternalPageComponent } from './Internal-Page/internal-page/internal-page.component';
+import { AdvertisimentComponent } from './dashboard/advertisiment/advertisiment.component';
+import { AddAdverComponent } from './dashboard/advertisiment/add-advertisiment/add-adver/add-adver.component';
 
 const routes: Routes = [
   {path: '', redirectTo: '/InternalPage/home', pathMatch: 'full'},
@@ -105,6 +108,8 @@ const routes: Routes = [
     {path: 'roleReport/:roleReportId', component: RoleReportComponent, canActivate: [AuthGuard]},
     {path: 'userInRoleReport/:userRoleReportId', component: RoleReport2Component, canActivate: [AuthGuard]},
     {path: 'reportList/:reportName', component: ReportListComponent},
+    {path: 'advertisimentList/:adverId', component: AdvertisimentComponent},
+    {path: 'advertisiment/:typeAdver', component: AddAdverComponent},
   ]},
   {path: 'page-not-found', component: PageNotFoundComponent},
   {path: '**', redirectTo: '/page-not-found', pathMatch: 'full'}

src/app/app.module.ts

@@ -1,3 +1,5 @@
+import { DashboardService } from './shared/dashboard.service';
+import { CanDeactivateGuard } from './shared/can-deactivate-guards.service';
 import { ExternalPageModule } from './External-Page/external-page.module';
 import { FooterComponent } from './dashboard/main-footer/footer.component';
 import { HeaderComponent } from './dashboard/header/header.component';
@@ -99,9 +101,14 @@ import { HigriDateComponent } from './higri-date/higri-date.component';
 import { ModalModule } from 'ngx-modialog';
 import { BootstrapModalModule } from 'ngx-modialog/plugins/bootstrap';
 import { JwSocialButtonsModule } from 'jw-angular-social-buttons';
+import { AdvertisimentComponent } from './dashboard/advertisiment/advertisiment.component';
+import { AddAdverComponent } from './dashboard/advertisiment/add-advertisiment/add-adver/add-adver.component';
+import { NumberDerictiveDirective } from './number-derictive.directive';
+
 //import { CeiboShare } from 'ng2-social-share';
 
 
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -154,6 +161,9 @@ import { JwSocialButtonsModule } from 'jw-angular-social-buttons';
     AddJoinUsComponent,
     ShortenPipe,
     HigriDateComponent,
+    AdvertisimentComponent,
+    AddAdverComponent,
+    NumberDerictiveDirective,
     //CeiboShare,
   ],
   imports: [
@@ -200,6 +210,8 @@ import { JwSocialButtonsModule } from 'jw-angular-social-buttons';
     ExternalSerService,
     AchievementsService,
     InternalSerService,
+    CanDeactivateGuard,
+    DashboardService,
     {provide: LocationStrategy, useClass: HashLocationStrategy},
     ResponceInterceptService , {
       provide: HTTP_INTERCEPTORS,

src/app/dashboard/achievements/achievement-list/achievement.component.ts

@@ -210,7 +210,21 @@ export class AchievementComponent implements OnInit {
           (responce) => {
             console.log(responce);
             this.toastr.success('تم الحذف');
-            window.location.reload();
+            this.spinner.show();
+            this.achievementsList = [];
+            this.achievementsServie.getAchievementsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.achievementsList = responce['achievements'];
+                this.count = responce['count'];
+                this.perPagePagenation = responce['per_page'];
+                this.spinner.hide();
+              },
+              (error) => {
+                console.log(error);
+                this.spinner.hide();
+              }
+            );
           },
           (error) => {
             console.log(error);

src/app/dashboard/achievements/add-achievement/add-achievement.component.html

@@ -49,8 +49,11 @@
 
         </div>
 
-        <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid" style="float: right;">حفظ</button>
-
+        <div class="col-6">
+            <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkDisabledSave">حفظ</button>
+            <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+        </div>
+        
       </form>
 
     </div>

src/app/dashboard/achievements/add-achievement/add-achievement.component.ts

@@ -29,6 +29,7 @@ export class AddAchievementComponent implements OnInit {
     typeMode: boolean = false;
     typeLink: string = '';
     achievId: number;
+    checkDisabledSave:boolean = false;
   
     achiv = {
       title: '',
@@ -72,16 +73,21 @@ export class AddAchievementComponent implements OnInit {
   }
 
   onSubmitted() {
+    
+    this.checkDisabledSave = true;
+
     const dataFormAchiev = this.dataForm.value;
     if(this.typeMode) {
       this.achievService.editAchievement(dataFormAchiev, this.achievId).subscribe(
         (responce) => {
           console.log(responce);
           this.toastr.success('تم التعديل بنجاح ');
+          this.checkDisabledSave = false;
           this.location.back();
         },
         (error) => {
           console.log(error);
+          this.checkDisabledSave = false;
           this.toastr.error(' خطأ في التعديل !');
         }
       );
@@ -89,11 +95,13 @@ export class AddAchievementComponent implements OnInit {
       this.achievService.addAchievements(dataFormAchiev).subscribe(
         (responce) => {
           this.toastr.success('تم الاضافه بنجاح');
+          this.checkDisabledSave = false;
           console.log(responce);
           this.location.back();
         },
         (error) => {
           console.log(error);
+          this.checkDisabledSave = false;
           this.toastr.error('خطأ في الاضافه');
         }
       );

src/app/dashboard/add-join-us/add-join-us.component.css

@@ -79,11 +79,7 @@ input,select {
 	outline: -webkit-focus-ring-color auto 5px;
 }
 
-.regesterBtn-w {
-    width: 200px;
-    display: block;
-    margin:  20px auto;
-}
+
 
 .inlineBlock-w {
     display: inline-block !important;

src/app/dashboard/add-join-us/add-join-us.component.html

@@ -38,7 +38,6 @@
             <div class="col-12 col-sm-12 col-md-4 col-lg-4">
               <div class="form-group">
                 <label for="date_employment_hij" style="float:right">تاريخ التوظيف الهجري <span class="spanReqired-w">*</span></label>
-                <!-- <input type="date" class="form-control" placeholder="تاريخ التوظيف الهجري" id="date_employment_hij" formControlName="date_of_employment_hij" /> -->
                 <div *ngIf='bindingDateSplit && checkMode'>
                   <app-higri-date (onDatePicked)="getDate($event)" [myDate]="bindingDateSplit"></app-higri-date>
                 </div>
@@ -53,13 +52,17 @@
               <div class="form-group">
                 <label style="float:right">الاداره <span class="spanReqired-w">*</span></label>
                 <select class="form-control" formControlName="adminstration_id" (change)="getDepartment()">
-                  <option *ngFor="let admin of adminstrations; let i = index" [ngValue]="admin.id">{{admin.name}}</option>
+                  <option *ngFor="let admin of adminstrations; let i = index" [value]="admin.id">{{admin.name}}</option>
                 </select>
               </div>
             </div>
 
+            <div class="col-12">
+                <button type="submit" [disabled]="!joinUsForm.valid || checkSaveClick" class="btn btn-success rightW">حفظ</button>
+                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+            </div>
+
           </div>
-          <button type="submit" [disabled]="!joinUsForm.valid || checkSaveClick" class="btn btn-success regesterBtn-w">حفظ</button>
         </form>
       </div>
 

src/app/dashboard/add-join-us/add-join-us.component.ts

@@ -194,6 +194,7 @@ export class AddJoinUsComponent implements OnInit {
 
       if(this.imageBase64 == '') {
         this.toastr.warning('قم باختيار صوره !');
+        this.checkSaveClick = false;
       } else {
         this.userSer.addUser(formData, 'joinUs').subscribe(
           (responce) => {

src/app/dashboard/advertisiment/add-advertisiment/add-adver/add-adver.component.css

@@ -0,0 +1,63 @@
+.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;
+}
+
+
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}
+
+
+
+.imgProfile {
+    width: 70px;
+    height: 70px;
+    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: 37px;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    bottom: 0;
+    right: 42%;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}

src/app/dashboard/advertisiment/add-advertisiment/add-adver/add-adver.component.html

@@ -0,0 +1,93 @@
+<div class="addHospital-w">
+    <div class="container">
+      <div class="row" style="margin-bottom: 30px;">
+        <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>
+            <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
+          </ul>
+        </div>
+      </div>
+      <div class="containerContent-w">
+  
+      <div class="row">
+        <div class="col-12">
+  
+          <form (ngSubmit)="onSubmitted()" #f="ngForm">
+            <div class="row">
+                
+            <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
+                <div class="form-group text-center imgContainer">
+                    <img [src]="urlImg" class="imgProfile" height="200">
+                    <input type="file" name="file" id="file" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" (change)="getUrl($event)" [(fileModel)]="files" />
+                    <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+                </div>
+            </div>
+
+            <!-- <div class="col-12 col-sm-6 col-md-4">
+              <div class="form-group">
+                <label for="start_time" style="float: right; margin-right: 5px">وقت الإبتداء <span class="spanReqired-w">*</span></label>
+                <input type="date" class="form-control" name="start_time" id="start_time" [ngModel]="advertisiment.start_time" required/>
+              </div>
+            </div>
+
+            <div class="col-12 col-sm-6 col-md-4">
+              <div class="form-group">
+                <label for="end_time" style="float: right; margin-right: 5px">وقت الإنتهاء <span class="spanReqired-w">*</span></label>
+                <input type="date" class="form-control" name="end_time" id="end_time" [ngModel]="advertisiment.end_time" required/>
+              </div>
+            </div> -->
+            <div class="col-12 col-sm-12 col-md-4">
+              <div class="form-group">
+                <label for="lecture_time" style="float: right;margin-right: 5px"> وقت البدء <span class="spanReqired-w">*</span></label>
+                <input type="datetime-local" class="form-control" name="start_time" [ngModel]="advertisiment.start_time" id="lecture_time" required />
+              </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-4">
+              <div class="form-group">
+                <label for="lecture_end" style="float: right;margin-right: 5px"> وقت الإنتهاء <span class="spanReqired-w">*</span></label>
+                <input type="datetime-local" class="form-control" name="end_time" [ngModel]="advertisiment.end_time" id="lecture_end" required />
+              </div>
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-4">
+              <label for="status" style="float: right; margin-right: 5px">الحاله <span class="spanReqired-w">*</span></label>
+              <select class="form-control" name="status" [ngModel]="advertisiment.status" id="status" required>
+                <option value="1">فعال</option>
+                <option value="0">غير فعال</option>
+              </select>
+            </div>
+
+              <div class="col-12 col-sm-12 col-md-6" style="margin:20px 0">
+                <div class="form-group">
+                    <label for="description" style="float: right;margin-right: 5px"> الوصف باللغه العربيه <span class="spanReqired-w">*</span></label>
+                    <!-- <textarea cols="3" class="form-control" id="description" name="description" [ngModel]="new.description" required></textarea> -->
+                  <quill-editor id="description" name="description" [ngModel]="advertisiment.description" required>
+                  </quill-editor>
+                </div>
+              </div>
+  
+              <div class="col-12 col-sm-12 col-md-6" style="margin:20px 0">
+                <div class="form-group">
+                    <label for="description" style="float: right;margin-right: 5px">الوصف باللغه الإنجليزيه <span class="spanReqired-w">*</span></label>
+                    <!-- <textarea cols="3" class="form-control" id="description" name="description" [ngModel]="new.description" required></textarea> -->
+                  <quill-editor id="description" name="description_en" [ngModel]="advertisiment.description_en" required>
+                  </quill-editor>
+                </div>
+              </div>
+  
+              <div class="col-6">
+                  <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+                  <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+              </div>
+  
+            </div>
+          </form>
+  
+        </div>
+      </div>
+    </div>
+    </div>
+  </div>
+  

src/app/dashboard/advertisiment/add-advertisiment/add-adver/add-adver.component.ts

@@ -0,0 +1,175 @@
+import { DashboardService } from './../../../../shared/dashboard.service';
+import { AuthServiceService } from './../../../../shared/auth-service.service';
+import { UserService } from './../../../../shared/user.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { Location } from '@angular/common';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+@Component({
+  selector: 'app-add-adver',
+  templateUrl: './add-adver.component.html',
+  styleUrls: ['./add-adver.component.css']
+})
+export class AddAdverComponent implements OnInit {
+
+  constructor(private userSer:UserService, 
+    private authSer:AuthServiceService, 
+    private toastr: ToastrService, 
+    private spinner: NgxSpinnerService, 
+    private dashboardSer: DashboardService,
+    private location: Location, 
+    private route:ActivatedRoute) { }
+
+    typeMode:boolean = false; //default false for create page 
+    typeLink: string;
+    fileUpload: any;
+    checkChangePhoto:boolean = false;
+    advertisimenId:number;
+    @ViewChild('f') formAdvertisimentData: NgForm;
+
+
+    urlImg: string = '../../../../../assets/image/avatar.png';
+
+    advertisiment = {
+      start_time: '',
+      end_time: '',
+      status: 1,
+      description: '',
+      description_en: '',
+    }
+
+  ngOnInit() {
+    
+    this.route.params.subscribe(
+      (params: Params) => {
+        if(params['typeAdver'] == 'add'){
+          this.typeMode = false;
+          this.typeLink = 'إنشاء إعلان';
+        } else if(params['typeAdver'] == 'edit') {
+          this.spinner.show();
+          this.typeMode = true;
+         this.advertisimenId = parseInt(localStorage.getItem('editAdevIdStorage'));
+          this.typeLink = 'تعديل إعلان';
+          this.dashboardSer.getItemData(this.advertisimenId, 'advertisiment').subscribe(
+            (responce) => {
+              console.log(responce);
+              this.advertisiment.start_time = responce['ad'].start_time.split(' ').join("T");
+              this.advertisiment.end_time = responce['ad'].end_time.split(' ').join("T");
+              this.advertisiment.description = responce['ad'].description;
+              this.advertisiment.description_en = responce['ad'].description_en;
+              this.advertisiment.status = responce['ad'].status;
+              this.urlImg = this.authSer.pathImg + responce['ad'].photo;
+              this.spinner.hide();
+            },
+            (error) => {
+              console.log(error);
+            }
+          );
+
+        } else {
+          this.toastr.warning('Catch Error Go To Home !');
+        }
+      }
+    ); 
+  }
+
+
+
+  onFileChanges(event) {
+    this.checkChangePhoto = true;
+    this.fileUpload = event[0];
+    console.log(this.fileUpload);
+  }
+
+  getUrl(event) {   
+    console.log(event);
+    if (event.target.files && event.target.files[0]) {
+      console.log(event.target.files[0]);
+    
+      
+    var reader = new FileReader();
+    reader.readAsDataURL(event.target.files[0]); // read file as data url
+    reader.onload = (event) => { // called once readAsDataURL is completed
+      this.urlImg = event.target['result'];
+    }
+    console.log(this.urlImg);
+  }
+ }
+
+ onSubmitted() {
+  
+  if(this.checkChangePhoto) {
+    this.formAdvertisimentData.value['photo'] = this.fileUpload.base64;
+    this.formAdvertisimentData.value['photo_type'] = this.fileUpload.type.split('/')[1];
+  }
+  this.formAdvertisimentData.value['start_time'] = this.formAdvertisimentData.value['start_time'].split('T').join(" ");
+  this.formAdvertisimentData.value['end_time'] = this.formAdvertisimentData.value['end_time'].split('T').join(" ");
+
+   console.log(this.formAdvertisimentData.value);
+
+   if(!this.typeMode) {
+     //add logic
+
+      if(!this.formAdvertisimentData.value['photo']) {
+        this.toastr.warning('قم بإختيار صوره !');
+      } else {
+        this.dashboardSer.addItem(this.formAdvertisimentData.value, 'advertisiment').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم الإنشاء بنجاح ');
+            this.location.back();
+          },
+          (error) => {
+            console.log(error);
+            this.toastr.error('خطأ في الإنشاء');
+          }
+        )
+      }
+   } else {
+
+    this.formAdvertisimentData.value['id'] = this.advertisimenId;
+    console.log(this.formAdvertisimentData.value);
+
+    if(this.checkChangePhoto){
+      if(!this.formAdvertisimentData.value.photo) {
+        this.toastr.warning('قم بإختيار صوره !');
+      } else {
+        this.dashboardSer.editItem(this.formAdvertisimentData.value, this.advertisimenId, 'advertisiment').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم التعديل بنجاح ');
+            this.location.back();
+          },
+          (error) => {
+            console.log(error);
+            this.toastr.error('خطأ في التعديل');
+          }
+        );
+      }
+    } else {
+        this.dashboardSer.editItem(this.formAdvertisimentData.value, this.advertisimenId, 'advertisiment').subscribe(
+        (responce) => {
+          console.log(responce);
+          this.toastr.success('تم التعديل بنجاح ');
+          this.location.back();
+        },
+        (error) => {
+          console.log(error);
+          this.toastr.error('خطأ في التعديل');
+        }
+      );
+    }
+   
+
+   }
+
+   
+
+ }
+
+
+
+}

src/app/dashboard/advertisiment/advertisiment.component.css

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

src/app/dashboard/advertisiment/advertisiment.component.html

@@ -0,0 +1,76 @@
+<div class="container">
+
+    <div class="row">
+      <div class="col-12">
+        <ul class="list-unstyled titileLi-w">
+          <li class="headingText-w">خدمه إداره المحتوي > </li>
+          <li class="headingText-w activeLi-w" style="margin-right:5px"> إداره إعلان رئيسي</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="containerContent-w">
+
+    <div class="row">
+      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+          <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn"><i class="fas fa-plus marginFontAowsome-w"></i>إنشاء جديد</button>
+          <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn"><i class="fas fa-times marginFontAowsome-w"></i>حذف</button>
+      </div>
+      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+        <div class="form-group">
+          <input type="text" placeholder="البحث" class="form-control inputSearchTable-w" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+          <hr>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+          <div class="form-group">
+            <span class="spanSelect-w">
+              <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+                <option value="5">5</option>
+                <option value="10">10</option>
+                <option value="15">15</option>
+                <option value="20">20</option>
+              </select>
+              من العناصر يتم عرضها
+            </span>
+          </div>
+        </div>
+        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+
+        </div>
+    </div>
+
+    <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">
+                <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label>
+            </div>
+          </th>
+          <th> تاريخ الإبتداء </th>
+          <th>تاريخ الإنتهاء</th>
+          <th *ngIf="authSer.showEditBtn">تعديل</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let adver of advertisimentsList | 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="{{adver.id}}" [(ngModel)]="adver.selected" [value]='adver' (change)="checkIfAllSelected();">
+              <label class="custom-control-label disblayBlock-w" for="{{adver.id}}" style="color:#2a2a2a;cursor: pointer;"></label>
+            </div>
+          </td>
+          <td>{{adver.start_time}}</td>
+          <td>{{adver.end_time}}</td>
+          <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(adver.id)"><i class="fas fa-edit"></i></button></td>
+        </tr>
+      </tbody>
+    </table>
+    <pagination-controls nextLabel="التالي" previousLabel="السابق" (pageChange)="onPageChange($event)"></pagination-controls>
+  </div>
+  </div>

src/app/dashboard/advertisiment/advertisiment.component.ts

@@ -0,0 +1,259 @@
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { DashboardService } from './../../shared/dashboard.service';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+import { UserService } from '../../shared/user.service';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-advertisiment',
+  templateUrl: './advertisiment.component.html',
+  styleUrls: ['./advertisiment.component.css']
+})
+export class AdvertisimentComponent implements OnInit {
+
+  constructor(private http: HttpClient, 
+    private route: ActivatedRoute,
+    private router: Router,
+    private modal: Modal,
+    private userSer: UserService,
+    private spinner: NgxSpinnerService,
+    private authSer: AuthServiceService,
+    private toastr: ToastrService,
+    private dashboardSer: DashboardService) { }
+
+  advertisimentsList = [];
+  pages= [];
+  pageId: number;
+  advertisimentsListIds = [];
+  count: number;
+  perPagePagenation: number;
+  currentPage:number = 1;
+  filtterStatus = '';
+  selectedAll: any;
+  userLoginId:number;
+  serviceId:number;
+  dataTableNumber: number = 5;
+
+  ngOnInit() {
+    //init values of permisions
+    this.authSer.showAddBtn = false;
+    this.authSer.showDeleteBtn = false;
+    this.authSer.showEditBtn = false;
+    this.authSer.showPermissionsBtn = false;
+     //show / hide notification search in header
+     this.authSer.notificationLogin = true;
+     this.authSer.showSearchHeader = false;
+     this.authSer.showHeaderLogin = false;
+     this.authSer.showHeaderDashBoard = true;
+     this.authSer.showDashboardHeader = true;
+     this.authSer.internalHeader = false;
+           //to show / hide permissions
+
+  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 == 24) {
+                for(let j = 0; j < this.pages[i].permissions.length; j++) {
+                  if(this.pages[i].permissions[j].name == 'add_main_ad'){
+                    this.authSer.showAddBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'edit_main_ad'){
+                    this.authSer.showEditBtn = true;
+                  }
+                  if(this.pages[i].permissions[j].name == 'delete_main_ads'){
+                    this.authSer.showDeleteBtn = true;
+                  }
+                }
+              }else {
+                console.log('no events');
+              }
+            }
+            this.spinner.hide();
+          },
+          (error) => {console.log(error)}
+        );
+      }
+    );
+    
+    
+    
+    this.route.params.subscribe(
+      (parmas: Params) => {
+        this.pageId = parmas['adverId'];
+      }
+    );
+
+
+    this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.advertisimentsList = responce['main_ads'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+  }
+
+   //make all checkbox of user checked 
+   selectAll() {
+    for (var i = 0; i < this.advertisimentsList.length; i++) {
+      this.advertisimentsList[i].selected = this.selectedAll;
+    }
+  };
+
+  checkIfAllSelected() {
+    this.selectedAll = this.advertisimentsList.every(function(item:any) {
+      return item.selected == true;
+    });
+  };
+
+      //filtter function
+      filtterFunc(data) {
+        this.advertisimentsList = [];
+        console.log(data.target.value);
+        const dataSearch = data.target.value;     
+        this.currentPage = 1;
+        console.log('search curent page', this.currentPage);
+        this.dashboardSer.getDataUSerSearchBar(dataSearch, this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.advertisimentsList = responce['main_ads'];
+            this.count = responce['count'];
+            this.perPagePagenation = responce['per_page'];
+            console.log('filtter count', this.count);
+            console.log('filtter perPagePAgenation', this.perPagePagenation);
+          },
+          (error) => {
+            console.log(error)
+          }
+        );
+      };
+    
+      //change page 
+      onPageChange(pagenationNumber) {
+        this.spinner.show();
+        this.currentPage = pagenationNumber;
+        this.advertisimentsList = [];
+        //console.log(pagenationNumber);
+        //console.log(this.pageId);
+        this.dashboardSer.getListData(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.advertisimentsList = responce['main_ads'];
+            this.count = responce['count'];
+            this.perPagePagenation = responce['per_page'];
+            console.log(this.advertisimentsList);
+            this.spinner.hide();
+          },
+          (error) => {
+            console.log(error);
+            this.spinner.hide();
+          }
+        );
+      };
+
+      //determine the list count from select element 
+  onGetValue(event) {
+    this.spinner.show();
+    this.advertisimentsList = [];
+    this.dataTableNumber = event.target.value;
+    this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.advertisimentsList = responce['main_ads'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  }
+
+  onDelete() {
+
+    this.advertisimentsListIds = [];
+    for(let i = 0; i < this.advertisimentsList.length; i++) {
+      if(this.advertisimentsList[i].selected == true) {
+        this.advertisimentsListIds.push(this.advertisimentsList[i].id);
+      }
+    }
+
+    console.log(this.advertisimentsListIds);
+
+    if(this.advertisimentsListIds.length > 0) {
+      const dialogRef = this.modal.alert()
+      .size('sm')
+      .showClose(true)
+      .title('تأكيد الحذف')
+      .body(`
+          <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
+          `)
+      .open();
+  
+        dialogRef.result
+        .then( result => 
+          this.dashboardSer.deleteItem(this.advertisimentsListIds, this.pageId).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.toastr.success('تم الحذف');
+              this.spinner.show();
+              this.advertisimentsList = [];
+              this.dashboardSer.getListData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+                (responce) => {
+                  console.log(responce);
+                  this.advertisimentsList = responce['main_ads'];
+                  this.count = responce['count'];
+                  this.perPagePagenation = responce['per_page'];
+                  this.spinner.hide();
+                },
+                (error) => {
+                  console.log(error);
+                  this.spinner.hide();
+                }
+              );
+            },
+            (error) => {
+              console.log(error);
+              this.spinner.hide();
+              },
+            )
+        );
+    } else {
+      this.toastr.warning('لم يتم إختيار أي عنصر للمسح !');
+    }
+  };
+
+
+  //add function
+  onAdd() {
+    console.log('service/' + this.userLoginId + '/' + this.serviceId + '/advertisiment/add');
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/advertisiment/add']);
+  }
+
+  //edit function
+   onEdit(editTabID) {
+    localStorage.setItem('editAdevIdStorage', editTabID);
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/advertisiment/edit/']);
+    console.log('service/' + this.userLoginId + '/' + this.serviceId + '/advertisiment/edit/');
+  };
+
+
+
+}

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

@@ -24,19 +24,20 @@
               <div class="col-12 col-sm-6 col-md-4 col-lg-4">
                 <div class="form-group">
                   <label for="email">الأيميل <span class="spanReqired-w">*</span></label>
-                  <input type="email" class="form-control" name="email" placeholder="الإيميل" appEnglishCharacters ngModel email #email="ngModel" [ngModel]="admin.email" required/>
+                  <input type="email" class="form-control" name="email" placeholder="الإيميل" appEnglishCharacters ngModel #email="ngModel" [ngModel]="admin.email" required/>
+                  <span class="help-block" *ngIf="!email.valid && email.touched" style="color:red">من فضلك أدخل إيميل صحيح</span>
                 </div>
               </div>
               <div class="col-12 col-sm-6 col-md-4 col-lg-4">
                 <div class="form-group">
-                  <label for="phone">الهاتف</label>
-                  <input type="phone" class="form-control" name="phone" ngModel #phone="ngModel" [ngModel]="admin.phone"/>
+                  <label for="phone">رقم الجوال</label>
+                  <input type="phone" class="form-control" appNumberDerictive name="phone" ngModel #phone="ngModel" [ngModel]="admin.phone"/>
                 </div>
               </div>
               <div class="col-12 col-sm-6 col-md-4 col-lg-4">
                 <div class="form-group">
-                  <label for="switch_phone">الهاتف البديل</label>
-                  <input type="phone" class="form-control" name="switch_phone" ngModel #switchPhone="ngModel" [ngModel]="admin.switch_phone"/>
+                  <label for="switch_phone">رقم الجوال البديل</label>
+                  <input type="phone" class="form-control" appNumberDerictive name="switch_phone" ngModel #switchPhone="ngModel" [ngModel]="admin.switch_phone"/>
                 </div>
               </div>
               <div class="col-12 col-sm-6 col-md-4 col-lg-4">
@@ -55,8 +56,11 @@
                   </textarea>
                 </div>
               </div>
+              <div class="col-6">
+                  <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveDisabled">حفظ</button>
+                  <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+              </div>
           </div>
-          <button type="submit" class="btn btn-success" style="float: right" [disabled]="!f.valid ">حفظ</button>
         </form>
     </div>
   </div>

src/app/dashboard/department/add-department/add-department.component.ts

@@ -12,6 +12,7 @@ import { Router, ActivatedRoute, Params } from '@angular/router';
   templateUrl: './add-department.component.html',
   styleUrls: ['./add-department.component.css']
 })
+
 export class AddDepartmentComponent implements OnInit {
 
   constructor(private authService: AuthServiceService,
@@ -22,9 +23,12 @@ export class AddDepartmentComponent implements OnInit {
       private router: Router,
       private authSer: AuthServiceService,
       private route: ActivatedRoute,
-      private location: Location) { }
+      private location: Location) {
+        this.spinner.show();
+       }
 
   checkEditMode: boolean = false;
+
   departId: number;
 
   admin = {
@@ -37,10 +41,12 @@ export class AddDepartmentComponent implements OnInit {
   }
 
   typeLink: string = '';
-
+  checkSaveDisabled: boolean = false;
   @ViewChild('f') addDepertmentForm;
 
   ngOnInit() {
+
+
     this.userService.getUserDataProfile();
     //show / hide notification search in header
     this.authSer.notificationLogin = true;
@@ -59,7 +65,6 @@ export class AddDepartmentComponent implements OnInit {
       (params: Params) => {
         if(params['typeAdminMode'] == 'edit') {
           this.typeLink = 'تعديل';
-          this.spinner.show();
           this.checkEditMode = true;
           this.departId = params['editAdminId'];
           this.departmentSer.getDataAdmin(this.departId).subscribe(
@@ -79,6 +84,7 @@ export class AddDepartmentComponent implements OnInit {
           )
         } else {
           this.typeLink = 'إنشاء جديد';
+          this.spinner.hide();
         }
       }
     )
@@ -86,27 +92,34 @@ export class AddDepartmentComponent implements OnInit {
 
   //add function 
   onSubmitted() {
+
+    this.checkSaveDisabled = true;
+
     console.log(this.addDepertmentForm.value);
     if(this.checkEditMode) {
       this.departmentSer.editAdmin(this.addDepertmentForm, this.departId).subscribe(
         (responce) => {
+          this.checkSaveDisabled = false;
           console.log(responce);
           this.toastr.success('تم التعديل');
           this.location.back();
         },
         (error) => {
           this.toastr.error('خطأ تعديل');
+          this.checkSaveDisabled = false;
           console.log(error);
         }
       );
     } else {
       this.departmentSer.addDepartment(this.addDepertmentForm).subscribe(
         (responce) => {
+          this.checkSaveDisabled= false;
           console.log(responce);
           this.toastr.success('تم الاضافه بنجاح');
           this.location.back();
         },
         (error) => {
+          this.checkSaveDisabled= false;
           console.log(error);
           this.toastr.error('خطأ الاضافه !');
         }

src/app/dashboard/department/department-list/department-list.component.ts

@@ -210,7 +210,25 @@ export class DepartmentListComponent implements OnInit {
             (responce) => {
               console.log(responce);
               this.toastr.success('تم المسح');
-              window.location.reload();
+              this.spinner.show();
+              this.departmentsList = [];
+              this.departService.getDeparmentsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+                (responce) => {
+                  console.log(responce);
+                  this.departmentsList = responce['adminstrations'];
+                  for (var i = 0; i < this.departmentsList.length; i++) {
+                    this.departmentsList[i].selected = false;
+                  }
+                  this.count = responce['count'];
+                  this.perPagePagenation = responce['per_page'];
+                  console.log(this.departmentsList);
+                  this.spinner.hide();
+                },
+                (error) => {
+                  console.log(error);
+                  this.spinner.hide();
+                }
+              );
             },
             (error) => {
               console.log(error);

src/app/dashboard/events/add-event/add-event.component.css

@@ -1,8 +1,4 @@
-.rightW {
-    display: block;
-    float: right;
-    margin: 20px 0;
-}
+
 
 
 .submittedW {

src/app/dashboard/events/add-event/add-event.component.html

@@ -102,10 +102,12 @@
                 <input type="time" class="form-control" [ngModel]="event.time" id="time" name="time" />
               </div>
 
-            </div>
-
-            <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveClick">حفظ</button>
+              <div class="col-12">
+                  <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveClick">حفظ</button>
+                  <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+              </div>
 
+            </div>
           </form>
 
         </div>

src/app/dashboard/events/events.component.ts

@@ -149,6 +149,29 @@ export class EventsComponent implements OnInit {
     );
   };
 
+     //change page 
+     onPageChange(pagenationNumber) {
+      this.spinner.show();
+      this.currentPage = pagenationNumber;
+      this.eventsList = [];
+      //console.log(pagenationNumber);
+      //console.log(this.pageId);
+      this.eventService.getEventsList(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.eventsList = responce['events'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          console.log(this.eventsList);
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+          this.spinner.hide();
+        }
+      );
+    }
+
   changeRanking(event, id) {
     const data = {
       id: id,
@@ -192,6 +215,7 @@ onGetValue(event) {
     (error) => {
       console.log(error);
       this.spinner.hide();
+      
     }
   );
 }
@@ -223,7 +247,20 @@ onGetValue(event) {
             (responce) => {
               console.log(responce);
               this.toastr.success('تم الحذف');
-              window.location.reload();
+              this.spinner.show();
+              this.eventsList = [];
+              this.eventService.getEventsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+                (responce) => {
+                  console.log(responce);
+                  this.eventsList = responce['events'];
+                  this.count = responce['count'];
+                  this.perPagePagenation = responce['per_page'];
+                  this.spinner.hide();
+                },
+                (error) => {
+                  console.log(error);  
+                }
+              );
             },
             (error) => {
               console.log(error);

src/app/dashboard/external-services/add-external/add-external.component.css

@@ -4,10 +4,7 @@
     border: 1px solid #ccc;
     border-radius: 20px 20px 0 0;
 }
-.rightW {
-    display: block;
-    margin: 20px 0;
-}
+
 
 .imgProfile {
     width: 70px;

src/app/dashboard/external-services/add-external/add-external.component.html

@@ -66,10 +66,12 @@
                       <option value="0">غير فعال</option>
                     </select>
                   </div>
+                 
+                  <div class="col-6">
+                    <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveClick">حفظ</button>
+                    <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+                  </div>
                 </div>
-
-                <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveClick">حفظ</button>
-
               </form>
 
             </div>

src/app/dashboard/external-services/add-external/add-external.component.ts

@@ -122,17 +122,21 @@ export class AddExternalComponent implements OnInit {
   if(this.typeMode){
     if((this.photoType[1] != 'png' && this.photoType[1] != 'gif') && this.photoEdit == true) {
       this.toastr.warning('الصوره يجب أن تكون بصيغه Png');
+      this.checkSaveClick = false;
     } else if(this.imageBase64 == '' && this.photoEdit == true){
       this.toastr.warning('قم باختيار صوره !');
+      this.checkSaveClick = false;
     } else {
       this.externalService.editExternal(formData, this.externalId).subscribe(
         (responce) => {
           console.log(responce);
           this.toastr.success('تمت التعديل بنجاح');
           this.location.back();
+          this.checkSaveClick = true;
         },
         (error) => {
           console.log(error);
+          this.checkSaveClick = false;
           this.toastr.error('خطأ في التعديل !');
         }
       );
@@ -140,18 +144,22 @@ export class AddExternalComponent implements OnInit {
   } else {
     if(this.photoType[1] != 'png' && this.photoType[1] != 'gif') {
       this.toastr.warning('الصوره يجب أن تكون بصيغه Png');
+      this.checkSaveClick = false;
     } else if(this.imageBase64 == ''){
       this.toastr.warning('قم باختيار صوره !');
+      this.checkSaveClick = false;
     } else {
       this.externalService.addExternal(formData).subscribe(
         (responce) => {
           console.log(responce);
           this.toastr.success('تمت الاضافه بنجاح');
           this.location.back();
+          this.checkSaveClick = true;
         },
         (error) => {
           console.log(error);
           this.toastr.error('خطأ في الحفظ !');
+          this.checkSaveClick = false;
         }
       );
     }

src/app/dashboard/external-services/external-list/external-list.component.ts

@@ -242,7 +242,22 @@ export class ExternalListComponent implements OnInit {
             (responce) => {
               console.log(responce);
               this.toastr.success('تم الحذف');
-              window.location.reload();
+              this.spinner.show();
+              this.externalsList = [];
+              this.externalService.getExternalsList(this.externalId, this.currentPage ,this.dataTableNumber).subscribe(
+                (responce) => {
+                  console.log(responce);
+                  this.externalsList = responce['external_services'];
+                  this.count = responce['count'];
+                  this.perPagePagenation = responce['per_page'];
+                  console.log('evennnnts', this.externalsList);
+                  this.spinner.hide();
+                },
+                (error) => {
+                  console.log(error);
+                  this.spinner.hide();
+                }
+              );
             },
             (error) => {
               console.log(error);

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

@@ -62,10 +62,7 @@
 	outline: 1px dotted #000;
 	outline: -webkit-focus-ring-color auto 5px;
 }
-.rightW {
-    display: block;
-    margin: 20px 0;
-}
+
 input,select {
     font-size: 12px;
     background-color: #f9f9f9;

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

@@ -63,9 +63,13 @@
                   <option value="0">غير فعال</option>
                 </select>
               </div>
+
+              <div class="col-6">
+                  <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+                  <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+              </div>
             </div>
 
-            <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
 
           </form>
 

src/app/dashboard/footer/footer-list/footer-list.component.ts

@@ -220,7 +220,21 @@ export class FooterListComponent implements OnInit {
             (responce) => {
               console.log(responce);
               this.toastr.success('تم الحذف');
-              window.location.reload();
+              this.spinner.show();
+              this.footerList = [];
+              this.footerService.getFooterList(this.footerId, this.currentPage, this.dataTableNumber).subscribe(
+                (responce) => {
+                  console.log(responce);
+                  this.footerList = responce['footers'];
+                  this.count = responce['count'];
+                  this.perPagePagenation = responce['per_page'];
+                  this.spinner.hide();
+                },
+                (error) => {
+                  console.log(error);
+                  this.spinner.hide();
+                }
+              );
             },
             (error) => {
               console.log(error);

src/app/dashboard/header/header.component.css

@@ -1,12 +1,58 @@
+.dropdown-menu {
+    top: 46px !important;
+right: 0 !important;
+border-radius: 2px !important;
+width: 245px;
+background-color: #ffffffe0;
+box-shadow: 0px 3px 9px #00000030;
+border: 1px solid #cec8c8;
+}
+.en_ .dropdown-item{
+float: left !important;
+}
+.dropdown-item{
+border: 0px solid #00000008 !important;
+width: 75px !important;
+padding: 4px 0px !important;
+text-align: center !important;
+font-weight: bold !important;
+clear: none !important;
+float: right;
+margin: 3px 3px;
+}
+/*.dropdown-item span{
+color: #a08b70 !important;
+font-size: 12px !important;
+}*/
+.dropdown-item i{
+color: #04756d !important;
+font-size: 18px !important;
+}
+.mylistt{
+display: block;
+border: 1px solid #bdbbbb;
+float: right;
+width: 45px;
+height: 45px;
+margin: -12px 0px 0px 6px;
+background-color: #f1f1f1;
+}
+
 .header {
-    width: 100%;
+    /* width: 100%;
     height: 35px;
     display: inline-block;
     background-color: #d0d0d0;
     direction: rtl;
     font-family: 'Cairo', sans-serif;
     overflow: visible;
-    color: #fff;
+    color: #fff; */
+    /* width: 100%;
+    height: 35px;
+    background: rgba(185, 183, 183, 0.8); */
+    padding-top: 7px;
+    height: 55px !important;
+    background-color:#a1a1a15e !important; 
 }
 
 .header p{
@@ -33,17 +79,32 @@
 }
 
 .header .notificationDiv-w img{
-    width: 35px;
-    border: 1px solid #15a498;
+    width: 45px;
+    border: 1px solid #eceaea;
+    margin: -12px 0px 0px 6px;
+    height: 45px;
+    background-color: #fff;
+    display: block;
     float: right;
-    margin: 0 10px;
-    margin-top: -4px;
 }
 
-.header .notificationDiv-w button {
+/* .header .notificationDiv-w button {
     border: none;
     color: #252525;
     text-align: right;
+} */
+
+.header .notificationDiv-w .profileData-w .buttonW{
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    color: #02635c;
+    outline: none;
+    text-shadow: 0px 0px 2px #0000002e;
+    font-weight: bold;
+    font-size: 15px;
+    margin-top: 8px;
+    direction: rtl;
 }
 
 .header .notificationDiv-w .buttonDropDown-w,
@@ -66,6 +127,40 @@
     margin-right: 10px !important;
 }
 
+.header .notificationDiv-w .notificationList-w li {
+    display: inline-block; 
+    margin: 0 10px;
+}
+
+.header .notificationDiv-w .notificationList-w li span {
+    color: #a08b70;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.5s;
+    margin-top: 0px;
+    display: block;
+}
+
+.header .notificationDiv-w .notificationList-w li span:hover i {
+    color: #08726a;
+}
+
+.header .notificationDiv-w .notificationList-w .profileData-w .btn-outline-success {
+    border: none;
+}
+
+.header .notificationDiv-w .notificationList-w .profileData-w .buttonW:hover {
+    background-color: transparent;
+}
+
+.dateDiv-w {
+    color: #fff;
+    text-shadow: 0px 0px 2px #000;
+    font-weight: bold; 
+    display:inline-block;
+    font-size: 14px;  
+}
+
 .bottomHeader-w {
     width: 100%;
     height: 160px;
@@ -149,7 +244,7 @@
     margin-left: 76%; 
 }
 
-.fixDropDown-w button, 
+.fixDropDown-w W, 
 .fixDropDown-w button a {
     color: #252525;
 }
@@ -235,7 +330,7 @@
       text-align: left;
   }
 
-  .buttonW {
+  /* .buttonW {
     background-color: transparent !important;
     border: none !important;
     cursor: pointer !important;
@@ -250,4 +345,4 @@
 
 .buttonW:hover{
     background-color: transparent;
-}
+} */

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

@@ -6,15 +6,59 @@
           <div class="col-6 col-sm-6 col-md-6 col-lg-6">
             <div class="notificationDiv-w">
                 <div class="col">
-                    <div ngbDropdown class="d-inline-block" style="float: right; direction: ltr;">
-                      <button class="btn btn-outline-primary buttonW" id="dropdownBasic1" ngbDropdownToggle><img class="img" src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="image">
-                        {{authSer.dataLoginUser['name']}}</button>
-                      <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="listDropMenu-w">
+                  <div ngbDropdown class="d-inline-block" style="float: right; direction: ltr;">
+                      <!-- <button class="btn btn-outline-primary buttonW" id="dropdownBasic1" ngbDropdownToggle><img class="img" src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="image">
+                        {{authSer.dataLoginUser['name']}}</button> -->
+                      <!-- <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="listDropMenu-w">
                           <button class="dropdown-item" style="cursor: pointer" (click)="onGetProfile()">صفحتي</button>
                           <button class="dropdown-item" style="cursor: pointer" (click)="onInternalPage()">البوابه الداخليه</button>
                           <button class="dropdown-item" style="cursor: pointer" (click)="onLogout()">تسجيل الخروج</button>
-                      </div>
-                  </div>
+                      </div> -->
+                      <ul class="list-unstyled notificationList-w" *ngIf="!authSer.isAuthenticated()">
+                          <li class="profileData-w">
+                            <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
+                                <button class="buttonW" ngbDropdownToggle>
+                                    <img src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="imageProfile" alt="" />
+                                        {{authSer.dataLoginUser['name']}} 
+                                </button>
+                  
+                            <div class="dropdown-menu" style="text-align:right" ngbDropdownMenu>
+
+                                <button class="dropdown-item" style="cursor: pointer;" >
+                                <i class="fas fa-bell"></i>
+                                <span>الاشعارات</span>
+                                </button>
+                    <!-- <button class="dropdown-item" style="cursor: pointer;" >
+                       <i class="fas fa-comments"></i>
+                       <span>رسائل</span>
+                    </button> -->
+                                <button class="dropdown-item" style="cursor: pointer;" (click)="onGetProfile()">
+                                    <i class="fas fa-user-alt"></i>
+                                    <span>ملفي</span>
+                                </button>
+                                <button class="dropdown-item" style="cursor: pointer;" >
+                                <i class="fas fa-sticky-note"></i>
+                                <span>ملاحظاتي</span>
+                                </button>
+                                <button class="dropdown-item" style="cursor: pointer;" >
+                                <i class="fas fa-tasks"></i>
+                                <span>مهامي</span>
+                                </button>
+                                 <button class="dropdown-item" style="cursor: pointer;" (click)="onInternalPage()">
+                                    <i class="fas fa-solar-panel"></i>
+                                    <span> البوابه الداخليه</span>
+                                </button>
+                                <button class="dropdown-item" style="cursor: pointer;color: #da0b0b !important;background-color: #f3f3f3;border-radius: 4px;" (click)="onLogout()">
+                                    <i class="fas fa-sign-out-alt" style="color: #da0b0b !important;"></i>
+                                    <span>خروج</span>
+                                </button>
+                            </div>
+                         </div>
+                      </li>
+                          <!-- <li><span><i class="fas fa-comments"></i></span></li>
+                          <li><span><i class="fas fa-bell"></i></span></li> -->
+                      </ul>
+                   </div>
                 </div>
             </div>
           </div>

src/app/dashboard/hospitals/add-hospital/add-hospital.component.html

@@ -73,6 +73,12 @@
                             </quill-editor>
                           </div>
                         </div>
+
+                        <div class="col-6">
+                            <button type="submit" class="btn btn-success rightW" [disabled]="!addHospitalForm.valid || checkSaveClick">حفظ</button>
+                            <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin: 33px 10px;">إلغاء</button>
+
+                        </div>
       
                     </div>
           
@@ -80,7 +86,6 @@
                   </div>
                 </div>
       
-                  <button type="submit" class="btn btn-success rightW" [disabled]="!addHospitalForm.valid || checkSaveClick">حفظ</button>
       
               </form>
             </div>

src/app/dashboard/hospitals/hospital-list/hospital-list.component.ts

@@ -189,7 +189,36 @@ export class HospitalListComponent implements OnInit {
                 (responce) => {
                   console.log(responce);
                   this.toastr.success('تم الحذف');
-                  window.location.reload();
+                  this.spinner.show();
+                  this.dataList = [];
+                  if(this.pageId == 10) {
+                    this.hospitalService.getHospitalsList(this.pageId , this.currentPage, this.dataTableNumber).subscribe(
+                      (responce) => {
+                        console.log(responce);
+                        this.dataList = responce['managements'];
+                        this.count = responce['count'];
+                        this.perPagePagenation = responce['per_page'];
+                        this.spinner.hide();
+                      },
+                      (error) => {
+                        console.log(error);
+                      }
+                    );
+                  } else if(this.pageId == 6){
+                    this.hospitalService.getHospitalsList(this.pageId , this.currentPage, this.dataTableNumber).subscribe(
+                      (responce) => {
+                        console.log(responce);
+                        this.dataList = responce['hospital_centers'];
+                        this.count = responce['count'];
+                        this.perPagePagenation = responce['per_page'];
+                        this.spinner.hide();
+                      },
+                      (error) => {
+                        console.log(error);
+                      }
+                    );
+                  }
+                
                 },
                 (error) => {
                   console.log(error);

src/app/dashboard/internal-services/add-internal-services/add-internal-services.component.css

@@ -87,11 +87,6 @@ input,select {
 }
 
 
-.rightW {
-    display: block;
-    margin: 20px 0;
-}
-
 .submittedW {
     margin: 20px 0;
     float: right;

src/app/dashboard/internal-services/add-internal-services/add-internal-services.component.html

@@ -64,26 +64,62 @@
                   <input type="text" id="name" class="form-control" formControlName="name" style="margin: 10px 0;" />
                   <label for="name_en" style="float: right;">الأسم باللغه الإنجليزيه</label>
                   <input type="text" id="name_en" class="form-control" formControlName="name_en" style="margin: 10px 0;" />
-                  <label for="link" style="float: right;">الرابط</label>
-                  <input type="text" id="link" class="form-control" formControlName="link" style="margin:10px 0" />
+                  <!-- <label for="link" style="float: right;">الرابط</label> -->
+                  <input type="text" id="link" *ngIf="" class="form-control" formControlName="link" style="margin:10px 0" />
 
                   <label for="apperance" style="float: right;">الظهور</label>
                   <select id="apperance" class="form-control" formControlName="apperance" style="margin: 10px 0">
                     <option value="1">الظهور</option>
                     <option value="0">غير الظهور</option>
                   </select>
+
                   <label for="status" style="float: right;">الحاله</label>
                   <select id="status" class="form-control" formControlName="status" style="margin: 10px 0">
                     <option value="1">فعال</option>
                     <option value="0">غير فعال</option>
                   </select>
-                  <button type="button" class="btn btn-danger rightW" *ngIf="i == 0 ? false : true" style="position: absolute; top:0" (click)="removeTitle(i)"><i class="fas fa-trash-alt"></i></button>
+
+
+                  <div class="form-group">
+                      <label style="float: right; margin-right:5px;margin-top:10px">نوع الرايط <span class="spanReqired-w">*</span></label>
+                      <div class="form-group">
+                        <div class="custom-control custom-radio inlineBlock-w">
+                          <input type="radio" class="custom-control-input" id="defaultUnchecked{{i}}" (change)="showCahngeRadio('internal',i)" value="internal" formControlName="link_type">
+                          <label class="custom-control-label" for="defaultUnchecked{{i}}" style="cursor: pointer;">داخلي</label>
+                        </div>
+                        
+                        <div class="custom-control custom-radio inlineBlock-w">
+                          <input type="radio" class="custom-control-input" id="defaultChecked{{i}}" value="external" (change)="showCahngeRadio('external',i)" formControlName="link_type">
+                          <label class="custom-control-label" for="defaultChecked{{i}}" style="cursor: pointer;">خارجي</label>
+                        </div>
+                      </div>
+                  </div>
+
+                  <div class="form-group" *ngIf=" addInternalForm.get('fields')['controls'][i]['controls'].link_type.value == 'external' ">
+                      <label for="link" style="float: right; margin-right:5px;margin-top:10px">الرايط</label>
+                      <input type="text" class="form-control" placeholder="الرابط" formControlName="link" id="link" />
+                  </div>
+
+                  <div class="form-group" *ngIf=" addInternalForm.get('fields')['controls'][i]['controls'].link_type.value == 'internal' ">
+                      <label style="float: right; margin-right:5px;margin-top:10px">الصفحات الداخليه</label>
+                      <select formControlName="link2" class="form-control">
+                        <option *ngFor="let page of internalPages; let i = index" [value]="page.id">{{page.name}}</option>
+                      </select>
+                  </div>
+              
+                  <button type="button" class="btn btn-danger rightW" *ngIf="i == 0 ? false : true" style="position: absolute; top:0;right:23px;" (click)="removeTitle(i)"><i class="fas fa-trash-alt"></i></button>
+
                 </div>
               </div>
+
+              <div class="col-12">
+                  <button type="submit" class="btn btn-success rightW" [disabled]="!addInternalForm.valid || checkSaveClick">حفظ</button>
+                  <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+              </div>
+
             </div>
           </div>
 
-          <button type="submit" class="btn btn-success rightW" [disabled]="!addInternalForm.valid || checkSaveClick">حفظ</button>
 
         </form>
       </div>

src/app/dashboard/internal-services/add-internal-services/add-internal-services.component.ts

@@ -39,6 +39,7 @@ export class AddInternalServicesComponent implements OnInit {
   typeCreateSubscription: Subscription;
   editObjectPhoto = [];
   fieldsData = [];
+  internalPages = [];
   imageBase64 = [{
     photo: '',
     photo_type: '',
@@ -48,6 +49,7 @@ export class AddInternalServicesComponent implements OnInit {
   photoType: string = '';
   checkChangeImage = [false]; //check change for any image if change in edit mode or no
   checkValidateField: boolean = false; //loop in imageBase64 array and check if one of them not have image or no
+  showLink: boolean = false;
 
   urlImg =  ['../../assets/image/avatar.png'];
   
@@ -64,6 +66,16 @@ export class AddInternalServicesComponent implements OnInit {
     this.authSer.showHeaderDashBoard = true;
     this.authSer.showDashboardHeader = true;
     this.authSer.internalHeader = false;
+
+    this.internalServices.getInternalPages().subscribe(
+      (responce) => {
+        console.log(responce);
+        this.internalPages = responce['pages'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
     
     
     //init form data 
@@ -71,6 +83,7 @@ export class AddInternalServicesComponent implements OnInit {
       name: new FormControl(null , Validators.required),
       name_en: new FormControl(null , Validators.required),
       status: new FormControl('1', Validators.required),
+      //link_type: new FormControl('external' , Validators.required),
       fields: this.formBuilder.array([ this.createItem() ])
     });
 
@@ -86,6 +99,7 @@ export class AddInternalServicesComponent implements OnInit {
               name: new FormControl(null , Validators.required),
               name_en: new FormControl(null , Validators.required),
               status: new FormControl(null, Validators.required),
+              link_type: new FormControl(null , Validators.required),
               fields: this.formBuilder.array([])
             });
 
@@ -102,6 +116,7 @@ export class AddInternalServicesComponent implements OnInit {
                   name: responce['internal_service'].name,
                   name_en: responce['internal_service'].name_en,
                   status: responce['internal_service'].status,
+                  //link_type: responce['internal_service'].link_type,
                 });
                   
                 this.fields = this.addInternalForm.get('fields') as FormArray;
@@ -150,6 +165,8 @@ export class AddInternalServicesComponent implements OnInit {
         link: '',
         apperance: '',
         status: '1',
+        link_type: '',
+        link2: ''
       });
     } else {
       return this.formBuilder.group({
@@ -160,6 +177,8 @@ export class AddInternalServicesComponent implements OnInit {
         link: '',
         apperance: '',
         status: '1',
+        link_type: '',
+        link2: '',
       });
     }
     
@@ -262,6 +281,18 @@ export class AddInternalServicesComponent implements OnInit {
   }
  }
 
+ showCahngeRadio(type,index) {
+  this.showLink = type;
+  const fieldsValue = this.addInternalForm.get('fields')
+  if(type == 'internal') {
+    //console.log(this.addInternalForm.get('fields')['controls'][index]['controls'].link = null);
+    //this.addInternalForm.get('fields')['controls'][index]['controls'].link = null
+  } else if (type == 'external') {
+    //console.log(this.addInternalForm.get('fields')['controls'][index]['controls'].link2 = null);
+    //this.addInternalForm.get('fields')['controls'][index]['controls'].link2 = null
+  }
+ }
+
 
 
 
@@ -275,7 +306,7 @@ export class AddInternalServicesComponent implements OnInit {
     console.log(formInternalData);
 
 
-
+    //edit mode
     if(this.typeMode) {
 
       //save edit
@@ -290,6 +321,7 @@ export class AddInternalServicesComponent implements OnInit {
 
       console.log(formInternalData);
 
+      //validateion in data fields
       for(let i = 0; i < formInternalData['fields'].length; i++) {
         if(formInternalData['fields'][i].photo == '') {
           this.toastr.warning('قم باختيار صوره للعنصر ' + (i+1) );
@@ -309,17 +341,17 @@ export class AddInternalServicesComponent implements OnInit {
       if(this.checkValidateField) {
         console.log('valid imagaes');
       } else {
-        // this.internalServices.editInternal(this.pageId, formInternalData).subscribe(
-        //   (responce) => {
-        //     console.log(responce);
-        //     this.toastr.success('تم التعديل بنجاح ');
-        //     this.checkSaveClick = false;
-        //   }, (error) => {
-        //     console.log(error);
-        //     this.toastr.error('فشل التعديل !');
-        //     this.checkSaveClick = false;
-        //   }
-        // );
+        this.internalServices.editInternal(this.pageId, formInternalData).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم التعديل بنجاح ');
+            this.checkSaveClick = false;
+          }, (error) => {
+            console.log(error);
+            this.toastr.error('فشل التعديل !');
+            this.checkSaveClick = false;
+          }
+        );
       }
       
 

src/app/dashboard/internal-services/internal-services.component.ts

@@ -149,7 +149,20 @@ export class InternalServicesComponent implements OnInit {
               (responce) => {
                 console.log(responce);
                 this.toastr.success('تم الحذف');
-                window.location.reload();
+                this.spinner.show();
+                this.dataList = [];
+                this.internalService.getInternalsList(this.pageId , this.currentPage, this.dataTableNumber).subscribe(
+                  (responce) => {
+                    console.log(responce);
+                    this.dataList = responce['internal_services'];
+                    this.count = responce['count'];
+                    this.perPagePagenation = responce['per_page'];
+                    this.spinner.hide();
+                  },
+                  (error) => {
+                    console.log(error);
+                  }
+                );
               },
               (error) => {
                 console.log(error);

src/app/dashboard/lectures/add-lecture/add-lecture.component.css

@@ -1,13 +1,4 @@
-.rightW {
-    display: block;
-    float: right;
-    margin: 20px 0;
-}
 
-.rightW {
-    display: block;
-    margin: 20px 0;
-}
 
 .submittedW {
     margin: 20px 0;

src/app/dashboard/lectures/add-lecture/add-lecture.component.html

@@ -31,13 +31,13 @@
               <div class="form-group">
                 <label for="ranking" style="float: right; margin-right: 5px">الترتيب <span class="spanReqired-w">*</span></label>
                 <select class="form-control" name="ranking" [ngModel]="lecture.ranking" id="ranking" required>
-                  <option value="10000">المزيد</option>
                   <option value="1">1</option>
                   <option value="2">2</option>
                   <option value="3">3</option>
                   <option value="4">4</option>
                   <option value="5">5</option>
                   <option value="6">6</option>
+                  <option value="10000">المزيد</option>
                 </select>
                 <!-- <span *ngIf="!name.valid && name.touched"></span>  -->
               </div>
@@ -74,10 +74,33 @@
                 <option value="0">غير فعال</option>
               </select>
             </div>
-          </div>
+            
+            <div class="col-12 col-sm-12 col-md-4"></div>
+            <div class="col-12 col-sm-12 col-md-4"></div>
+
+            <div class="col-12 col-sm-12 col-md-6" style="margin:20px 0">
+              <div class="form-group">
+                  <label for="description" style="float: right;margin-right: 5px"> تفاصيل الحدث باللغه العربيه <span class="spanReqired-w">*</span></label>
+                  <!-- <textarea cols="3" class="form-control" id="description" name="description" [ngModel]="new.description" required></textarea> -->
+                <quill-editor id="description" name="description" [ngModel]="lecture.description" required>
+                </quill-editor>
+              </div>
+            </div>
 
-          <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+            <div class="col-12 col-sm-12 col-md-6" style="margin:20px 0">
+              <div class="form-group">
+                  <label for="description" style="float: right;margin-right: 5px"> تفاصيل الحدث باللغه الإنجليزيه <span class="spanReqired-w">*</span></label>
+                  <!-- <textarea cols="3" class="form-control" id="description" name="description" [ngModel]="new.description" required></textarea> -->
+                <quill-editor id="description" name="description_en" [ngModel]="lecture.description_en" required>
+                </quill-editor>
+              </div>
+            </div>
 
+            <div class="col-12">
+                <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+            </div>
+          </div>
         </form>
 
       </div>

src/app/dashboard/lectures/add-lecture/add-lecture.component.ts

@@ -29,6 +29,8 @@ export class AddLectureComponent implements OnInit {
     end_time: '',
     lecture_time: '',
     status: '',
+    description: '',
+    description_en: '',
   }
   
 
@@ -66,9 +68,11 @@ export class AddLectureComponent implements OnInit {
               this.lecture.name_en = lectureData.name_en;
               this.lecture.ranking = lectureData.ranking;
               this.lecture.display_location = lectureData.display_location;
-              this.lecture.lecture_time = lectureData.lecture_time;
-              this.lecture.end_time = lectureData.end_time;
+              this.lecture.lecture_time = lectureData.lecture_time.split(' ').join("T");
+              this.lecture.end_time = lectureData.end_time.split(' ').join("T");;
               this.lecture.status = lectureData.status;
+              this.lecture.description = lectureData.description;
+              this.lecture.description_en = lectureData.description_en;
               this.spineer.hide();
             },
             (error) => {

src/app/dashboard/lectures/lectures-list/lectures-list.component.ts

@@ -245,7 +245,21 @@ onGetValue(event) {
             (responce) => {
               console.log(responce);
               this.toastr.success('تم الحذف');
-              window.location.reload();
+              this.spinner.show();
+              this.lecturesList = [];
+              this.lectureService.getLecturesList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+                (responce) => {
+                  console.log(responce);
+                  this.lecturesList = responce['lectures'];
+                  this.count = responce['count'];
+                  this.perPagePagenation = responce['per_page'];
+                  this.spinner.hide();
+                },
+                (error) => {
+                  console.log(error);
+                  this.spinner.hide();
+                }
+              );
             },
             (error) => {
               console.log(error);

src/app/dashboard/main-footer/footer.component.css

@@ -64,10 +64,9 @@
     text-decoration: none;
     font-size: 14px;
     font-weight: 600;
-    color: #fff;
+    color: #4dbcb1;
     margin: 5px;
     transition: all 0.5s;
-    text-shadow: 2px 2px 4px #000000;
 }
 
 .linksSection-w ul li a img {
@@ -91,9 +90,10 @@
 }
 
 .rights {
-    text-align:center;
-    text-shadow:2px 2px 4px #000;
-    color:#fff;
+    text-align: center;
+    color: #00a99d;
+    font-weight: bold;
+    text-shadow: 0 1px 1px #252525;
 }
 
 /* start media query */

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

@@ -4,10 +4,7 @@
     border: 1px solid #ccc;
     border-radius: 20px 20px 0 0;
 }
-.rightW {
-    display: block;
-    margin: 20px 0;
-}
+
 
 input,select {
     font-size: 12px; 

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

@@ -78,10 +78,14 @@
                         <option *ngFor="let parent of parentList" [value]="parent.id">{{parent.name}}</option>
                       </select>
                     </div>
+
+                    <div class="col-6">
+                        <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveClick">حفظ</button>
+                        <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+                    </div>
       
                   </div>
                   
-                  <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveClick">حفظ</button>
         
                 </form>
         

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

@@ -45,7 +45,9 @@ export class AddMenuComponent implements OnInit {
     private route: ActivatedRoute,
     private authSer: AuthServiceService,
     private authService: AuthServiceService,
-    private menuService: MainMenuService, ) { }
+    private menuService: MainMenuService, ) { 
+      this.spinner.show();
+    }
 
   ngOnInit() {
     
@@ -60,7 +62,6 @@ export class AddMenuComponent implements OnInit {
     this.route.params.subscribe(
       (params: Params) => {
         if(params['typeMenuMode'] == 'edit') {
-          this.spinner.show();
           this.typeMode = true;
           this.typeLink = 'تعديل';
           this.menuId = params['editMenuId'];
@@ -86,6 +87,7 @@ export class AddMenuComponent implements OnInit {
           )
         } else {
           this.typeLink = 'أنشاء جديد';
+          this.spinner.hide();
         }
       }
     );
@@ -138,6 +140,7 @@ export class AddMenuComponent implements OnInit {
   if(this.typeMode){
     if(this.imageBase64 == '' && this.photoEdit == true){
       this.toastr.warning('قم باختيار صوره !');
+      this.checkSaveClick = false;
     } else {
       this.menuService.editMenu(formData, this.menuId).subscribe(
         (responce) => {
@@ -147,7 +150,7 @@ export class AddMenuComponent implements OnInit {
           this.checkSaveClick = false;
         },
         (error) => {
-          this.checkSaveClick = true;
+          this.checkSaveClick = false;
           console.log(error);
           this.toastr.error('خطأ في التعديل !');
         }
@@ -156,6 +159,7 @@ export class AddMenuComponent implements OnInit {
   } else {
     if(this.imageBase64 == ''){
       this.toastr.warning('قم باختيار صوره !');
+      this.checkSaveClick = false;
     } else {
       this.menuService.addMain(formData).subscribe(
         (responce) => {
@@ -166,7 +170,7 @@ export class AddMenuComponent implements OnInit {
         },
         (error) => {
           console.log(error);
-          this.checkSaveClick = true;
+          this.checkSaveClick = false;
           this.toastr.error('خطأ في الحفظ !');
         }
       );

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

@@ -245,7 +245,21 @@ export class MainListComponent implements OnInit {
               (responce) => {
                 console.log(responce);
                 this.toastr.success('تم الحذف');
-                window.location.reload();
+                this.spinner.show();
+                this.menuList = [];
+                this.mainService.getMainList(this.menuId, this.currentPage, this.dataTableNumber).subscribe(
+                  (responce) => {
+                    console.log(responce);
+                    this.count = responce['count'];
+                    this.perPagePagenation = responce['per_page'];
+                    this.menuList = responce['menus'];
+                    console.log(this.menuList);
+                    this.spinner.hide();
+                  },
+                  (error) => {
+                    console.log(error);
+                  }
+                )
               },
               (error) => {
                 console.log(error);

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

@@ -115,3 +115,7 @@ input,select {
 	outline: 1px dotted #000;
 	outline: -webkit-focus-ring-color auto 5px;
 }
+
+.redBorder {
+    border: 1px solid red !important;
+}

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

@@ -82,6 +82,8 @@
                   </div>
               </div>
 
+              
+
               <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
                 <button type="button" class="btn btn-default" (click)="plusImage()">أضف صوره</button>
                 <div class="row">
@@ -90,15 +92,16 @@
                       <img [src]="image.urlImg" class="imgProfile">
                       <input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)" (change)="getUrl($event,i)" [(fileModel)]="files" />
                       <label for="file{{i}}" class="iconUpload-w"><i class="fas fa-upload"></i></label>
-                      <button class="deleteBtn-w" (click)="deleteImg(i,image)"><i class="far fa-trash-alt"></i></button>
+                      <button class="deleteBtn-w" *ngIf="i==0 ? false: true" (click)="deleteImg(i,image)"><i class="far fa-trash-alt"></i></button>
                     </div>
                   </div>
                 </div>
               </div>
+              <div class="col-12">
+                  <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+                  <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin:20px 10px;">إلغاء</button>
+              </div>
             </div>
-
-            <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
-
           </form>
 
         </div>

src/app/dashboard/news/add-news/add-news.component.ts

@@ -23,13 +23,15 @@ export class AddNewsComponent implements OnInit {
   newId: number;
   checkValidImg: boolean = true;
   imageBase64: string = '';
+  imageMainBase64:string = '';
   photoType: string = '';
   typeLink: string = '';
   checkSaveClick: boolean = false;
-  photoEdit:boolean = true;
+  photoEdit:boolean = false;
   checkAddMode: boolean = false;
-
-
+  
+  mainPhotoDefault: string = '../../../../assets/image/Group 408.png';
+  mainPhotoPath: string = '';
   
 
   new = {
@@ -46,8 +48,9 @@ export class AddNewsComponent implements OnInit {
   images = [{
     base64: '',
     photoType: '',
-    urlImg: '../../assets/image/avatar.png',
+    urlImg: '../../../../assets/image/Group 408.png',
     id: '',
+    is_main_photo: 0
   }];
 
   //add more div photo
@@ -56,8 +59,9 @@ export class AddNewsComponent implements OnInit {
     this.images.push({
      base64: '',
      photoType: '',
-     urlImg: '../../assets/image/avatar.png',
+     urlImg: '../../../../assets/image/Group 408.png',
      id: '',
+     is_main_photo: 0
     });
   }
 
@@ -113,6 +117,7 @@ export class AddNewsComponent implements OnInit {
                     photoType: '',
                     urlImg : this.authSer.pathImg +  newData.photos[i].photo,
                     id: newData.photos[i].id,
+                    is_main_photo : newData.photos[i].is_main_photo,
                   });
                   console.log('imageeeees' , this.images);
                 }
@@ -182,6 +187,8 @@ export class AddNewsComponent implements OnInit {
   }
  }
 
+
+
  deleteImg(index, data) {
    if(this.typeMode) {
     this.images.splice(index , 1);
@@ -199,6 +206,10 @@ export class AddNewsComponent implements OnInit {
  
  }
 
+ deleteMainImg() {
+   this.mainPhotoPath = '';
+ }
+
 
 
   //submitted form
@@ -210,17 +221,24 @@ export class AddNewsComponent implements OnInit {
       
     if(this.typeMode){
         //to remove photo from object not has edit on it
-        const images = [];
-        for(let i = 0; i < this.images.length; i++) {
-          if(this.images[i].base64 == '') {
-            this.images.splice(this.images.indexOf(this.images[i]) , 1);
-          } else {
-            images.push({
-              photo: this.images[i].base64,
-              photo_type: this.images[i].photoType,
-            });
-          }
-        }
+        // const images = [];
+        // for(let i = 0; i < this.images.length; i++) {
+        //   if(this.images[i].base64 == '') {
+        //     this.images.splice(this.images.indexOf(this.images[i]) , 1);
+        //   } else {
+        //     if(i == 0) {
+        //       images.push({
+        //         photo: this.images[i].base64,
+        //         photo_type: this.images[i].photoType,
+        //       });
+        //     } else {
+        //       images.push({
+        //         photo: this.images[i].base64,
+        //         photo_type: this.images[i].photoType,
+        //       });
+        //     }
+        //   }
+        // }
 
         //formData['images'] = images;
 
@@ -239,16 +257,25 @@ export class AddNewsComponent implements OnInit {
         );
     } else {
       if(this.images[0].base64 == ''){
-        this.toastr.warning('قم باختيار صوره !');
+        this.toastr.warning('قم باختيار الصوره الرئيسيه !');
       } else {
 
         const images = [];
 
         for(let i = 0; i < this.images.length; i++) {
-          images.push({
-            photo: this.images[i].base64,
-            photo_type: this.images[i].photoType,
-          });
+          if(i == 0) {
+            images.push({
+              photo: this.images[i].base64,
+              photo_type: this.images[i].photoType,
+              is_main_photo: 1,
+            });
+          } else {
+            images.push({
+              photo: this.images[i].base64,
+              photo_type: this.images[i].photoType,
+              is_main_photo: 0,
+            });
+          }
         }
 
         formData['images'] = images;

src/app/dashboard/news/news-list/news-list.component.ts

@@ -231,6 +231,7 @@ export class NewsListComponent implements OnInit {
     };
     
     onDelete() {
+
       this.newsListIds = [];
       for(let i = 0; i < this.newsList.length; i++) {
         if(this.newsList[i].selected == true) {
@@ -241,7 +242,7 @@ export class NewsListComponent implements OnInit {
       console.log(this.newsListIds);
 
       if(this.newsListIds.length > 0) {
-
+        this.newsList =[];
         const dialogRef = this.modal.alert()
         .size('sm')
         .showClose(true)
@@ -252,11 +253,25 @@ export class NewsListComponent implements OnInit {
         .open();
         dialogRef.result
         .then( result =>  
+          
           this.newService.deleteNew(this.newsListIds).subscribe(
             (responce) => {
               console.log(responce);
               this.toastr.success('تم الحذف');
-              window.location.reload();
+              this.spinner.show();
+              this.newService.getnewsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+                (responce) => {
+                  console.log(responce);
+                  this.newsList = responce['reports'];
+                  this.count = responce['count'];
+                  this.perPagePagenation = responce['per_page'];
+                  this.spinner.hide();
+                },
+                (error) => {
+                  console.log(error);
+                  this.spinner.hide();
+                }
+              );
             },
             (error) => {
               this.toastr.success('يوجد خطأ إنتظر قليلا وأعد المحاوله ');

src/app/dashboard/report-list/report-list.component.ts

@@ -31,6 +31,8 @@ export class ReportListComponent implements OnInit {
   usersList = [];
   rolesList= [];
   roleValue:number;
+  serviceId: number;
+  userLoginId:number;
  
   typeRoleReport:string //to determine the type 0f report of role
 
@@ -45,6 +47,13 @@ export class ReportListComponent implements OnInit {
     this.authSer.showDashboardHeader = true;
     this.authSer.internalHeader = false;
 
+    this.route.parent.params.subscribe(
+      (params:Params) => {
+          this.userLoginId = params['userID'];
+          this.serviceId = params['serviceID'];
+        }
+      );
+
     this.route.params.subscribe(
       (params: Params) => {
         this.reportType = params['reportName'];
@@ -116,12 +125,9 @@ export class ReportListComponent implements OnInit {
 
   getRoleReport() {
     if(this.typeRoleReport == 'reportPages') {
-      this.router.navigate(['roleReport/' + this.roleValue]);
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/roleReport/' + this.roleValue]);
     } else if(this.typeRoleReport == 'reportUsers') {
-      this.router.navigate(['userInRoleReport/' + this.roleValue]);
+      this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/userInRoleReport/' + this.roleValue]);
     }
   }
-
- 
-
 }

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

@@ -33,7 +33,7 @@
                 </div>
                 <div class="col-12 col-sm-12 col-md-4">
                     <div class="form-group">
-                      <label style="float: right;margin: 5px 0">الصلاحيات</label>
+                      <label style="float: right;margin: 5px 0">الأنظمه</label>
                       <select class="form-control" [ngModel]="serviceVal" name="service_val" (change)="onSelectChange($event)">
                           <option *ngFor="let service of pages" [value]="service.id">{{service.name}}</option>
                       </select>
@@ -60,8 +60,10 @@
               </div>
             </div>
             
-
-            <button type="submit" class="btn btn-success" style="margin:30px 0; float:right" [disabled]="!f.valid">حفظ</button>
+            <div class="col-6">
+                <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveDisabled">حفظ</button>
+                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+            </div>
 
           </form>
         </div>

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

@@ -23,13 +23,16 @@ export class AddRolesComponent implements OnInit, OnDestroy {
       private toastr: ToastrService,
       private authSer: AuthServiceService,
       private route: ActivatedRoute, 
-      private spineer: NgxSpinnerService) { }
+      private spineer: NgxSpinnerService) { 
+        this.spineer.show();
+      }
   
   @ViewChild('f') addRoleData: NgForm;  
   checkModePage: boolean = false;
   selectChange: boolean = false;
   typeLink: string = '';
   roleId: number;
+  checkSaveDisabled:boolean = false;
 
   pages = []; //فيها كل حاجه السيرفيس والصفحات والصلاحيات
   permisionsId = [];
@@ -48,7 +51,6 @@ export class AddRolesComponent implements OnInit, OnDestroy {
   };
 
   ngOnInit() {
-    this.spineer.show();
     //show / hide notification search in header
     this.authSer.notificationLogin = true;
     this.authSer.showSearchHeader = false;
@@ -102,16 +104,15 @@ export class AddRolesComponent implements OnInit, OnDestroy {
               }
               console.log(this.getPerId);
              
-
               this.spineer.hide();
             },
             (error) => {
               console.log(error);
-              this.spineer.hide();
             }
           )
         } else {
           this.typeLink = 'إنشاء جديد';
+          this.spineer.hide();
         }
       }
     );
@@ -152,6 +153,8 @@ export class AddRolesComponent implements OnInit, OnDestroy {
     //   } 
     // };
 
+    this.checkSaveDisabled = true;
+
     for(let i = 0; i < this.allPages.length; i++) {
       for(let j = 0; j < this.allPages[i].permissions.length; j++) {
         if(this.allPages[i].permissions[j].selected == true) {
@@ -168,10 +171,12 @@ export class AddRolesComponent implements OnInit, OnDestroy {
     if(this.checkModePage){      
       this.rolesService.editRole(this.addRoleData.value, this.roleId).subscribe(
         (responce) => {
+          this.checkSaveDisabled = false;
           this.toastr.success('تم التعديل');
           this.location.back();
         },
         (error) => {
+          this.checkSaveDisabled = false;
           console.log(error);
           this.toastr.error('خطأ التعديل !');
         }
@@ -179,10 +184,12 @@ export class AddRolesComponent implements OnInit, OnDestroy {
     } else {
       this.rolesService.addRoles(this.addRoleData).subscribe(
         (responce)=>{
+          this.checkSaveDisabled = false;
           this.toastr.success('تم الاضافه بنجاح');
           this.location.back();
         },
         (error) => {
+          this.checkSaveDisabled = false;
           console.log(error);
           this.toastr.error('خطأ الاضافه !');
         }

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

@@ -20,13 +20,12 @@ export class RoleReportComponent implements OnInit {
   constructor(private route: ActivatedRoute, 
     private roleService:RolesService, 
     private userService: UserService,
-    private spinner: NgxSpinnerService ) { }
+    private spinner: NgxSpinnerService ) { 
+      this.spinner.show();
+    }
 
   ngOnInit() {
     
-
-    this.spinner.show();
-
     this.userService.getUserDataProfile();
     
     this.route.params.subscribe(

src/app/dashboard/roles/role-report2/role-report2.component.ts

@@ -17,10 +17,11 @@ export class RoleReport2Component implements OnInit {
   constructor(private roleServise: RolesService, 
     private route: ActivatedRoute, 
     private userService: UserService,
-    private spinner: NgxSpinnerService) { }
+    private spinner: NgxSpinnerService) { 
+      this.spinner.show();
+    }
 
   ngOnInit() {
-    this.spinner.show();
     this.userService.getUserDataProfile();
     this.route.params.subscribe(
       (params:Params) => {

src/app/dashboard/roles/roles-list/roles-list.component.ts

@@ -214,7 +214,22 @@ export class RolesListComponent implements OnInit {
             (responce) => {
               console.log(responce);
               this.toastr.success('تم الحذف');
-              window.location.reload();
+              this.spinner.show();
+              this.rolesList = [];
+              this.rolesService.getRolesList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+                (responce) => {
+                  console.log(responce);
+                  this.rolesList = responce['roles'];
+                  this.count = responce['count'];
+                  this.perPagePagenation = responce['per_page'];
+                  console.log(this.rolesList);
+                  this.spinner.hide();
+                },
+                (error) => {
+                  console.log(error);
+                  this.spinner.hide();
+                }
+              );
             },
             (error) => {
               console.log(error);

src/app/dashboard/sections/add-section/add-section.component.html

@@ -23,26 +23,28 @@
                   <div class="form-group">
                     <label for="email">الأيميل <span class="spanReqired-w">*</span></label>
                     <input type="email" class="form-control" name="email" placeholder="الإيميل" ngModel email #email="ngModel" [ngModel]="section.email" required/>
+                    <span class="help-block" *ngIf="!email.valid && email.touched" style="color:red">من فضلك أدخل إيميل صحيح</span>
+
                   </div>
                 </div>
                 <div class="col-12 col-sm-6 col-md-4 col-lg-4">
                   <div class="form-group">
-                    <label for="phone">الهاتف</label>
-                    <input type="phone" class="form-control" placeholder="الهاتف" name="phone" ngModel #phone="ngModel" [ngModel]="section.phone"/>
+                    <label for="phone">رقم الجوال</label>
+                    <input type="phone" appNumberDerictive class="form-control" placeholder="الهاتف" name="phone" ngModel #phone="ngModel" [ngModel]="section.phone"/>
                   </div>
                 </div>
                 <div class="col-12 col-sm-6 col-md-4 col-lg-4">
                   <div class="form-group">
-                    <label for="switch_phone">الهاتف البديل</label>
-                    <input type="phone" class="form-control" placeholder="الهاتف البديل" name="switch_phone" ngModel #switchPhone="ngModel" [ngModel]="section.switch_phone"/>
+                    <label for="switch_phone">رقم الجوال البديل</label>
+                    <input type="phone" appNumberDerictive class="form-control" placeholder="الهاتف البديل" name="switch_phone" ngModel #switchPhone="ngModel" [ngModel]="section.switch_phone"/>
                   </div>
                 </div>
                 <div class="col-12 col-sm-6 col-md-4 col-lg-4">
                   <div class="form-group">
                     <label for="status">الحاله</label>
                     <select name="status" class="form-control" [ngModel]="section.status">
-                      <option value="1">Active</option>
-                      <option value="0">InActive</option>
+                      <option value="1">فعال</option>
+                      <option value="0">غير فعال</option>
                     </select>
                   </div>
                 </div>
@@ -54,8 +56,11 @@
                     </select>
                   </div>
                 </div>
+                <div class="col-6">
+                    <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveDisabled">حفظ</button>
+                    <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+                </div>
             </div>
-            <button type="submit" class="btn btn-success" style="float: right" [disabled]="!f.valid">حفظ</button>
           </form>
       </div>
     </div>

src/app/dashboard/sections/add-section/add-section.component.ts

@@ -23,13 +23,16 @@ export class AddSectionComponent implements OnInit {
     private toastr: ToastrService,
     private router: Router,
     private route: ActivatedRoute,
-    private location: Location) { }
+    private location: Location) {
+      this.spinner.show();
+     }
 
 checkEditMode: boolean = false;
 
 departId: number;
 adminstartionsList = [];
 typeLink: string = '';
+checkSaveDisabled:boolean = false;
 
 section = {
   name: '',
@@ -68,7 +71,6 @@ ngOnInit() {
     (params: Params) => {
       if(params['typeSectionMode'] == 'edit') {
         this.typeLink = 'تعديل';
-        this.spinner.show();
         this.checkEditMode = true;
         this.departId = params['editSectionId'];
         this.sectionService.getDataSection(this.departId).subscribe(
@@ -88,6 +90,7 @@ ngOnInit() {
         )
       } else {
         this.typeLink = 'أنشاء جديد';
+        this.spinner.hide();
       }
     }
   );
@@ -97,15 +100,19 @@ ngOnInit() {
 
 //add function 
 onSubmitted() {
+
+  this.checkSaveDisabled = true;
   console.log(this.addSectionForm.value);
   if(this.checkEditMode) {
     this.sectionService.editSection(this.addSectionForm, this.departId).subscribe(
       (responce) => {
+        this.checkSaveDisabled = false;
         console.log(responce);
         this.toastr.success('تم التعديل');
         this.location.back();
       },
       (error) => {
+        this.checkSaveDisabled = false;
         this.toastr.error('خطأ تعديل');
         console.log(error);
       }
@@ -113,11 +120,13 @@ onSubmitted() {
   } else {
     this.sectionService.addSection(this.addSectionForm).subscribe(
       (responce) => {
+        this.checkSaveDisabled = false;
         console.log(responce);
         this.toastr.success('تم الاضافه بنجاح');
         this.location.back();
       },
       (error) => {
+        this.checkSaveDisabled = false;
         console.log(error);
         this.toastr.error('خطأ الاضافه !');
       }

src/app/dashboard/sections/section-list/section-list.component.ts

@@ -199,8 +199,22 @@ export class SectionListComponent implements OnInit {
           this.sectionService.deleteSection(this.sectionsId).subscribe(
             (responce) => {
               console.log(responce);
-              window.location.reload();
               this.toastr.success('تم الحذف');
+              this.spinner.show();
+              this.sectionsList = [];
+              this.sectionService.getSectionsList(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+                (responce) => {
+                  console.log(responce);
+                  this.sectionsList = responce['departments'];
+                  this.count = responce['count'];
+                  this.perPagePagenation = responce['per_page'];
+                  this.spinner.hide();
+                },
+                (error) => {
+                  console.log(error);
+                  this.spinner.hide();
+                }
+              );
             },
             (error) => {
               console.log(error);

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

@@ -16,7 +16,7 @@
             <ul class="navbar-nav mr-auto" style="margin: 0 auto">
               <li class="nav-item" style="color: #00a99d; font-weight:bold;margin-top:13px;margin-left:10px;" (click)="goToHome()">الرئيسيه</li>
               <li class="nav-item active" *ngFor="let page of pages; let i = index">
-                <a class="nav-link" style="color: #00a99d; padding:13px 10px; font-weight:bold"  [ngClass]="page.active == 0 ? '' : 'activeLink' " (click)="getListPage(page)">{{page.name}}</a>
+                <a class="nav-link" style="color: #00a99d; padding:13px 10px; font-weight:bold"  [ngClass]="page.active == 0 ? '' : 'activeLink'" (click)="getListPage(page)">{{page.name}}</a>
               </li>
               <div class="btn-group mr-3" *ngIf="authService.showMoreLinks">
                 <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">

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

@@ -180,6 +180,8 @@ export class ServiceItemComponent implements OnInit {
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/lecturesList/' + this.pages[0].id]);
           } else if(this.pages[0].id == 17) {
             this.router.navigate(['/service/' + this.userId + '/' + service.id + '/mainMenuList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 24) {
+            this.router.navigate(['/service/' + this.userId + '/' + service.id + '/advertisimentList/' + this.pages[0].id]);
           }
           this.spinner.hide();
         },
@@ -235,6 +237,8 @@ export class ServiceItemComponent implements OnInit {
       this.router.navigate(['lecturesList/' + dataPage.id], {relativeTo: this.route});
     } else if(dataPage.id == 17) {
       this.router.navigate(['mainMenuList/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 24) {
+      this.router.navigate(['advertisimentList/' + dataPage.id], {relativeTo: this.route});
     }
   }
 

src/app/dashboard/tabs/add-tab/add-tab.component.css

@@ -1,13 +1,3 @@
-.rightW {
-    display: block;
-    float: right;
-    margin: 20px 0;
-}
-
-.rightW {
-    display: block;
-    margin: 20px 0;
-}
 
 .submittedW {
     margin: 20px 0;
@@ -25,3 +15,20 @@ input,select {
     background-color: #f9f9f9;
     border: 2px solid #bda380;
 }
+input[type="file"] {
+    display: none;
+}
+
+.custom-file-upload {
+    display: inline-block;
+    padding: 8px 12px;
+    border-radius: 5px;
+    cursor: pointer;
+    width: 100%;
+    margin-top: 31px;
+    text-align: right;
+    font-size: 12px;
+    background-color: #f9f9f9;
+    border: 2px solid #bda380;
+    
+}

src/app/dashboard/tabs/add-tab/add-tab.component.html

@@ -16,18 +16,21 @@
 
         <form (ngSubmit)="onSubmitted()" #f="ngForm">
           <div class="row">
+            
             <div class="col-12 col-sm-12 col-md-4">
               <div class="form-group">
                 <label for="name" style="float: right; margin-right: 5px">الاسم باللغه العربيه <span class="spanReqired-w">*</span></label>
                 <input type="text" class="form-control" id="name" name="name" placeholder="الأسم باللغه العربيه"ngModel [ngModel]="tab.name" #name="ngModel" required/>
               </div>
             </div>
+            
             <div class="col-12 col-sm-12 col-md-4">
               <div class="form-group">
                 <label for="name_en" style="float: right; margin-right: 5px">الاسم باللغه الإنجليزيه <span class="spanReqired-w">*</span></label>
                 <input type="text" class="form-control" id="name_en" name="name_en" placeholder="الإسم باللغه الإنجليزيه" ngModel [ngModel]="tab.name_en" #name="ngModel" required/>
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-4">
               <div class="form-group">
                 <label for="ranking" style="float: right; margin-right: 5px">الترتيب <span class="spanReqired-w">*</span></label>
@@ -62,10 +65,25 @@
               </select>
             </div>
 
-          </div>
+            <div class="col-12 col-sm-12 col-md-4" style="margin-bottom:30px">
+                <div class="form-group text-center imgContainer">
+                  <!-- <label style="float: right; margin-right: 5px">أضف ملف <span class="spanReqired-w">*</span></label>
+                    <input type="file" name="file" id="file" class="form-control inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" (change)="getUrl($event)" [(fileModel)]="files" /> -->
+                    <label for="file-upload" class="custom-file-upload">
+                      {{'  أرفع ملف ' + nameLink}}
+                    </label>
+                    <input id="file-upload" type="file" alife-file-to-base64 (onFileChanged)="onFileChanges($event)" (change)="getUrl($event)" [(fileModel)]="files"/>
+                  <!-- <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label> -->
+                  <button class="btn btn-default" *ngIf="checkShowDownloadFile" type="button" style="position: absolute; background:transparent; border:none; left:17px; top:32px"> <a href="{{authSer.pathImg + tab.file}}"><i class="fas fa-download"></i></a></button>
+                </div>
+            </div>
 
-          <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+            <div class="col-6">
+                <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
+                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+            </div>
 
+          </div>
         </form>
 
       </div>

src/app/dashboard/tabs/add-tab/add-tab.component.ts

@@ -13,6 +13,7 @@ import { NgxSpinnerService } from 'ngx-spinner';
   templateUrl: './add-tab.component.html',
   styleUrls: ['./add-tab.component.css']
 })
+
 export class AddTabComponent implements OnInit {
 
   @ViewChild('f') formTabData: NgForm;
@@ -23,6 +24,10 @@ export class AddTabComponent implements OnInit {
   eventId: number;
   tabId: number;
   typeLink: string = '';
+  checkFileChange: boolean = false;
+  fileData: any;
+  checkShowDownloadFile: boolean = false;
+  nameLink = "";
 
   tab = {
     name: '',
@@ -30,6 +35,7 @@ export class AddTabComponent implements OnInit {
     ranking: '',
     type: '',
     status: '',
+    file: '',
   }
   
 
@@ -67,6 +73,8 @@ export class AddTabComponent implements OnInit {
               this.tab.ranking = tabData.ranking;
               this.tab.type = tabData.type;
               this.tab.status = tabData.status;
+              this.tab.file = tabData.file;
+              responce['tab'].file ? this.checkShowDownloadFile = true : this.checkShowDownloadFile = false;
               this.spineer.hide();
             },
             (error) => {
@@ -81,25 +89,81 @@ export class AddTabComponent implements OnInit {
   }
 
 
+  onFileChanges(event) {
+
+    console.log(event);
+    this.nameLink = event[0].name;
+    // this.imageBase64 = event[0].base64;
+    // this.photoType = event[0].type.split('/');
+    this.fileData = {
+      file: event[0].base64,
+      file_type: event[0].type.split('/')[1],
+    };
+
+    this.checkFileChange = true;
+
+    console.log(this.fileData);
+    this.checkShowDownloadFile = false;
+
+  }
+
+  getUrl(event) {   
+    if (event.target.files && event.target.files[0]) {
+    var reader = new FileReader();
+    reader.readAsDataURL(event.target.files[0]); // read file as data url
+    reader.onload = (event) => { // called once readAsDataURL is completed
+      //this.urlImg = event.target['result'];
+    }
+  }
+ }
+
+
 
   //on submitted form
   onSubmitted() {
+
     this.checkSaveclick = true;
+    if(this.checkFileChange) {
+      this.formTabData.value['file'] = this.fileData.file;
+      this.formTabData.value['file_type'] = this.fileData.file_type;
+    }
+
     console.log(this.formTabData.value);
     if(this.typeMode) {
-      this.tabService.editEvent(this.formTabData.value, this.tabId).subscribe(
-        (responce) => {
-          console.log(responce);
-          this.toastr.success('تم التعديل بنجاح');
-          this.location.back();
-          this.checkSaveclick = false;
-        },
-        (error) => {
-          console.log(error);
-          this.toastr.error('خطأ في التعديل ');
-          this.checkSaveclick = false;
+      if(this.checkFileChange){
+        if(this.formTabData.value['file']){
+          this.tabService.editEvent(this.formTabData.value, this.tabId).subscribe(
+            (responce) => {
+              console.log(responce);
+              this.toastr.success('تم التعديل بنجاح');
+              this.location.back();
+              this.checkSaveclick = false;
+            },
+            (error) => {
+              console.log(error);
+              this.toastr.error('خطأ في التعديل ');
+              this.checkSaveclick = false;
+            }
+          );
+        } else {
+          this.toastr.warning('قم برفع ملف !')
         }
-      )
+      } else {
+        this.tabService.editEvent(this.formTabData.value, this.tabId).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.toastr.success('تم التعديل بنجاح');
+            this.location.back();
+            this.checkSaveclick = false;
+          },
+          (error) => {
+            console.log(error);
+            this.toastr.error('خطأ في التعديل ');
+            this.checkSaveclick = false;
+          }
+        );
+      }
+     
     } else {
       this.tabService.addTab(this.formTabData.value).subscribe(
         (responce) => {
@@ -117,4 +181,6 @@ export class AddTabComponent implements OnInit {
     }
   };
 
+ 
+
 }

src/app/dashboard/tabs/tab-list/tab-list.component.ts

@@ -245,7 +245,26 @@ export class TabListComponent implements OnInit {
             (responce) => {
               console.log(responce);
               this.toastr.success('تم الحذف');
-              window.location.reload();
+              this.spinner.show();
+              this.tabsList = [];
+               //get list data 
+              this.tabService.getTabsList(this.pageId, this.currentPage ,this.dataTableNumber).subscribe(
+                (responce) => {
+                  console.log(responce);
+                  this.tabsList = responce['tabs'];
+                  for(let i = 0; i<this.tabsList.length ; i++) {
+                    var date = this.tabsList[i].created_at.split(' ')[0].split('-');
+                    this.tabsList[i].created_at = this.authSer.writeHijri( new Date(date[0],date[1],date[2]),'ar','system'); 
+                  }
+                  this.count = responce['count'];
+                  this.perPagePagenation = responce['per_page'];
+                  this.spinner.hide();
+                },
+                (error) => {
+                  console.log(error);
+                  this.spinner.hide();
+                }
+              );
             },
             (error) => {
               console.log(error);

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

@@ -93,11 +93,7 @@ input,select {
 	outline: -webkit-focus-ring-color auto 5px;
 }
 
-.regesterBtn-w {
-    width: 200px;
-    display: block;
-    margin:  20px auto;
-}
+
 
 .inlineBlock-w {
     display: inline-block !important;

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

@@ -14,6 +14,7 @@
       <div class="containerContent-w">
         <form [formGroup]="signupForm" (ngSubmit)="onSubmittedForm()">
           <div class="row">
+
             <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
               <div class="form-group text-center imgContainer">
                   <img [src]="urlImg" class="imgProfile" height="200"> 
@@ -21,18 +22,23 @@
                   <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-4 col-lg-4">
               <div class="form-group">
                 <label for="name" style="float:right">الأسم <span class="spanReqired-w">*</span></label>
                 <input type="text" id="name" placeholder="أدخل الأسم رباعي" class="form-control" formControlName="name" />
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-4 col-lg-4">
               <div class="form-group">
-                <label for="functional_number" style="float:right">الرقم الوظيفي <span class="spanReqired-w">*</span></label>
-                <input type="number" class="form-control" id="functional_number" formControlName="functional_number" />
+                <label style="float:right">الجنسيه <span class="spanReqired-w">*</span></label>
+                <select class="form-control" formControlName="nationality_id">
+                  <option *ngFor="let country of countries; let i = index" [value]="country.id">{{country.name}}</option>
+                </select>
               </div>
-            </div> 
+            </div>
+            
             <div class="col-12 col-sm-12 col-md-4 col-lg-4">
               <div class="form-group">
                   <label for="identity" style="float:right">الهويه <span class="spanReqired-w">*</span></label>
@@ -41,15 +47,17 @@
                 </select>
               </div>
             </div>
+   
             <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="identity_id != 4">
               <div class="form-group">
                 <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
-                <input type="phone" class="form-control" id="identityNumber" formControlName="identity_number" appOnlyNumber (input)="onIdentitiyChange($event.target.value)" />
+                <input type="phone" class="form-control" placeholder="رقم الهويه"d="identityNumber" formControlName="identity_number" appOnlyNumber (input)="onIdentitiyChange($event.target.value)" />
                 <span *ngIf="identity_id == 1"  style="color:red">أدخل رقم هويه مكون من 10 أرقام يبدأ برقم 1</span>
                 <span *ngIf="identity_id == 2" style="color:red">أدخل رقم هويه مكون من 10 أرقام </span>
                 <span *ngIf="identity_id == 3" style="color:red">أدخل رقم الإقامه مكون من 10 أرقام يبدأ برقم 2 </span>
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="identity_id == 4">
               <div class="form-group">
                 <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
@@ -57,39 +65,70 @@
                 <span style="color:red">أدخل رقم جواز السفر </span>
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-4 col-lg-4">
               <div class="form-group">
-                <label style="float:right">الجنسيه <span class="spanReqired-w">*</span></label>
-                <select class="form-control" formControlName="nationality_id">
-                  <option *ngFor="let country of countries; let i = index" [ngValue]="country.id">{{country.name}}</option>
-                </select>
+                <label for="email" style="float:right">البريد الإلكتروني <span class="spanReqired-w">*</span></label>
+                <input type="email" id="email" class="form-control" placeholder="البريد الإلكتروني" appEnglishCharacters formControlName="email" />
+                <span class="help-block" *ngIf="!signupForm.get('email').valid && signupForm.get('email').touched" style="color:red">من فضلك أدخل إيميل صحيح</span>
               </div>
             </div>
-           
+
             <div class="col-12 col-sm-12 col-md-4 col-lg-4">
               <div class="form-group">
                 <label for="phone" style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
-                <input type="text" id="phone" class="form-control" placeholder="رقم جوال يبدأ ب 05" formControlName="phone" />
+                <input type="text" id="phone" appNumberDerictive class="form-control" placeholder="رقم جوال يبدأ ب 05" formControlName="phone" />
+              </div>
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="password" style="float:right">كلمه المرور <span class="spanReqired-w" *ngIf="checkRequiredSpan">*</span></label>
+                <input type="password" id="password" class="form-control" placeholder="كلمه المرور" formControlName="password" />
+              </div>
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="hideConfirmPassword">
+              <div class="form-group">
+                <label for="password_confirmation" style="float:right">تأكيد كلمه المرور <span class="spanReqired-w">*</span></label>
+                <input type="password" id="password_confirmation" placeholder="تأكيد كلمه المرور" class="form-control" formControlName="password_confirmation" minlength="6"/>
               </div>
             </div>
+
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="functional_number" style="float:right">الرقم الوظيفي <span class="spanReqired-w">*</span></label>
+                <input type="number" class="form-control" id="functional_number" formControlName="functional_number" />
+              </div>
+            </div> 
+            
+           
+           
             <div class="col-12 col-sm-12 col-md-4 col-lg-4">
               <div class="form-group">
                 <label for="birthday" style="float:right">تاريخ الميلاد <span class="spanReqired-w">*</span></label>
-                <input type="date" id="birthdate" class="form-control" formControlName="birthday" /> 
+                <input type="date" [max]="authSer.end" id="birthdate" class="form-control" formControlName="birthday" /> 
               </div>
             </div>
             <div class="col-12 col-sm-12 col-md-4 col-lg-4">
               <div class="form-group">
                 <label for="date_employment" style="float:right">تاريخ التوظيف الميلادي <span class="spanReqired-w">*</span></label>
-                <input type="date" class="form-control" id="date_employment" formControlName="date_of_employment_gre" />
+                <input type="date" class="form-control"  id="date_employment" formControlName="date_of_employment_gre" />
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-4 col-lg-4">
               <div class="form-group">
                 <label for="date_employment_hij" style="float:right">تاريخ التوظيف الهجري <span class="spanReqired-w">*</span></label>
-                <input type="date" class="form-control" id="date_employment_hij" formControlName="date_of_employment_hij" />
+                <div *ngIf='bindingDateSplit && typeMode'>
+                  <app-higri-date (onDatePicked)="getDate($event)" [myDate]="bindingDateSplit"></app-higri-date>
+                </div>
+                <div *ngIf='!typeMode'>
+                  <app-higri-date (onDatePicked)="getDate($event)" ></app-higri-date>
+                </div>
               </div>
             </div>
+            
             <div class="col-12 col-sm-12 col-md-4 col-lg-4">
               <div class="form-group">
                 <label for="position" style="float:right">المنصب <span class="spanReqired-w">*</span></label>
@@ -100,7 +139,7 @@
               <div class="form-group">
                 <label style="float:right">اسم الوظيفه</label>
                 <select class="form-control" formControlName="job_title_id">
-                  <option *ngFor="let job of jobTitils; let i = index" [ngValue]="job.id">{{job.name}}</option>
+                  <option *ngFor="let job of jobTitils; let i = index" [value]="job.id">{{job.name}}</option>
                 </select>
               </div>
             </div>
@@ -108,7 +147,7 @@
               <div class="form-group">
                 <label style="float:right">التخصص</label>
                 <select class="form-control" formControlName="specialization_id">
-                  <option *ngFor="let spec of specializations; let i = index" [ngValue]="spec.id">{{spec.name}}</option>
+                  <option *ngFor="let spec of specializations; let i = index" [value]="spec.id">{{spec.name}}</option>
                 </select>
               </div>
             </div>
@@ -116,7 +155,7 @@
               <div class="form-group">
                 <label style="float:right">نوع العقد</label>
                 <select class="form-control" formControlName="contract_type_id">
-                  <option *ngFor="let contract of contracts; let i = index" [ngValue]="contract.id">{{contract.name}}</option>
+                  <option *ngFor="let contract of contracts; let i = index" [value]="contract.id">{{contract.name}}</option>
                 </select>
               </div>
             </div>
@@ -124,51 +163,26 @@
               <div class="form-group">
                 <label style="float:right">الملاك الوظيفي</label>
                 <select class="form-control" formControlName="staff_id">
-                  <option *ngFor="let staff of staffs; let i = index" [ngValue]="staff.id">{{staff.name}}</option>
-                </select>
-              </div>
-            </div>
-            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-              <div class="form-group">
-                <label for="email" style="float:right">الإيميل <span class="spanReqired-w">*</span></label>
-                <input type="email" id="email" class="form-control" placeholder="الإيميل" appEnglishCharacters formControlName="email" />
-              </div>
-            </div>
-            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="hideConfirmPassword">
-              <div class="form-group">
-                <label for="password_confirmation" style="float:right">تأكيد كلمه المرور <span class="spanReqired-w">*</span></label>
-                <input type="password" id="password_confirmation" placeholder="تأكيد كلمه المرور" class="form-control" formControlName="password_confirmation" minlength="6"/>
-              </div>
-            </div>
-            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
-              <div class="form-group">
-                <label for="password" style="float:right">كلمه المرور <span class="spanReqired-w">*</span></label>
-                <input type="password" id="password" class="form-control" placeholder="كلمه المرور" formControlName="password" />
-              </div>
-            </div>
-            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="showStatus">
-              <div class="form-group">
-                <label>الحاله <span class="spanReqired-w">*</span></label>
-                <select class="form-control" formControlName="status">
-                  <option [ngValue]='1'>Active</option>
-                  <option [ngValue]='0'>Non Active</option>
+                  <option *ngFor="let staff of staffs; let i = index" [value]="staff.id">{{staff.name}}</option>
                 </select>
               </div>
             </div>
+            
+          
             <div class="col-12 col-sm-12 col-md-4 col-lg-4">
               <div class="form-group">
                 <label style="float: right;">الحاله <span class="spanReqired-w">*</span></label>
                 <select class="form-control" formControlName="status">
-                  <option [ngValue]='1'>Active</option>
-                  <option [ngValue]='0'>Non Active</option>
+                  <option value='1'>فعال</option>
+                  <option value='0'>غير فعال</option>
                 </select>
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+            <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>
                 <select class="form-control" formControlName="adminstration_id" (change)="getDepartment()">
-                  <option *ngFor="let admin of adminstration; let i = index" [ngValue]="admin.id">{{admin.name}}</option>
+                  <option *ngFor="let admin of adminstration; let i = index" [value]="admin.id">{{admin.name}}</option>
                 </select>
               </div>
             </div>
@@ -176,7 +190,7 @@
               <div class="form-group">
                 <label style="float:right">القسم <span class="spanReqired-w">*</span></label>
                 <select class="form-control" formControlName="department_id">
-                  <option *ngFor="let department of departments; let i = index" [ngValue]="department.id">{{department.name}}</option>
+                  <option *ngFor="let department of departments; let i = index" [value]="department.id">{{department.name}}</option>
                 </select>
               </div>
             </div>
@@ -194,8 +208,11 @@
                 </div>
               </div>
             </div>
+            <div class="col-6">
+                <button type="submit" [disabled]="!signupForm.valid || checkSaveDisabled" class="btn btn-success rightW">حفظ</button>
+                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+            </div>
           </div>
-          <button type="submit" [disabled]="!signupForm.valid" class="btn btn-success regesterBtn-w">حفظ</button>
         </form>
       </div>
   </div>

src/app/dashboard/users/form-user/form-user.component.ts

@@ -19,7 +19,9 @@ export class FormUserComponent implements OnInit {
       private route: ActivatedRoute,
       private authSer: AuthServiceService,
       private location: Location,
-      private toastr: ToastrService) { }
+      private toastr: ToastrService) {
+        this.spineer.show();
+       }
 
   adminstration = [];
   countries = [];
@@ -46,13 +48,16 @@ export class FormUserComponent implements OnInit {
   identity_type: number;
   number_identitiy:number;
   checkPageAppear: boolean  = true;
+  checkRequiredSpan:boolean = true;
   urlImg: string =  '../../../../assets/image/Group 299.png';
+  higriDateVal = "";
+  bindingDateSplit;
+  checkSaveDisabled:boolean = false;
 
-
+  end:any;
 
   ngOnInit() {
-
-    
+    this.spineer.show();
       //show / hide notification search in header
       this.authSer.notificationLogin = true;
       this.authSer.showSearchHeader = false;
@@ -117,6 +122,12 @@ export class FormUserComponent implements OnInit {
           this.contracts = responce['contract_types'];
         }
       );
+
+      this.userSer.getAdministration().subscribe(
+        (responce) => {
+          this.adminstration = responce['adminstrations'];
+        }
+      );
   
       //get staff list
       this.userSer.getStaff().subscribe(
@@ -142,12 +153,10 @@ export class FormUserComponent implements OnInit {
         if(this.typeCreatePage == 'user') {
           this.typeFirstLink = 'المستخدمين';
           this.typeLink = 'إنشاء جديد';
-        } else if(this.typeCreatePage == 'joinUs') {
-          this.typeFirstLink = 'إنضم إلينا';
-          this.typeLink = 'إنشاء جديد';
+          this.spineer.hide();
         }
       }
-    )
+    );
 
     this.route.params.subscribe(
       (params:Params) => {
@@ -155,7 +164,7 @@ export class FormUserComponent implements OnInit {
           this.typeFirstLink = 'المستخدمين';
           this.typeLink = 'تعديل';
           this.checkPageAppear = true;
-          this.spineer.show();
+          this.checkRequiredSpan = false;
           this.userID = params['userEditId'];
           this.typeMode = true;
           this.hideConfirmPassword = false;
@@ -176,7 +185,6 @@ export class FormUserComponent implements OnInit {
                   birthday: responce['user'].birthday,
                   nationality_id: responce['user'].nationality_id,
                   date_of_employment_gre: responce['user'].date_of_employment_gre,
-                  date_of_employment_hij: responce['user'].date_of_employment_hij,
                   job_title_id: responce['user'].job_title_id,
                   specialization_id: responce['user'].specialization_id,
                   functional_number: responce['user'].functional_number,
@@ -191,52 +199,19 @@ export class FormUserComponent implements OnInit {
               );
               this.urlImg = responce['user'].photo ? this.authSer.pathImg + responce['user'].photo : this.urlImg;
               console.log(this.urlImg);
+              const date = responce['user'].date_of_employment_hij.split('-');
+            
+              this.bindingDateSplit = {
+                'year': parseInt(date[0]),
+                'month': parseInt(date[1]),
+                'day': parseInt(date[2])
+              };
+              
+              this.higriDateVal = responce['user'].date_of_employment_hij;
+              console.log(this.bindingDateSplit);
+              
               this.getDepartment();
               this.spineer.hide();
-            },
-            (error) => {console.log(error)},
-          );
-        } else if(params['typemode'] == 'editJo') {
-          this.typeFirstLink = 'إنضم إلينا';
-          this.typeLink = 'تعديل';
-          this.checkPageAppear = false;
-          this.spineer.show();
-          this.userID = params['userEditId'];
-          this.typeMode = true;
-          this.hideConfirmPassword = false;
-          this.showDepart = true;
-          this.typeEditPage = 'editJo';
-          this.userSer.onGetUserData(this.userID, 'editJo').subscribe(
-            (responce) => {
-              console.log('data join' , responce);
-              this.signupForm.patchValue(
-                {
-                  name: responce['user'].name,
-                  position: responce['user'].position,
-                  email: responce['user'].email,
-                  password: responce['user'].password,
-                  password_confirmation: responce['user'].password_confirmation,
-                  phone: responce['user'].phone,
-                  gender: responce['user'].gender,
-                  birthday: responce['user'].birthday,
-                  nationality_id: responce['user'].nationality_id,
-                  date_of_employment_gre: responce['user'].date_of_employment_gre,
-                  date_of_employment_hij: responce['user'].date_of_employment_hij,
-                  job_title_id: responce['user'].job_title_id,
-                  specialization_id: responce['user'].specialization_id,
-                  functional_number: responce['user'].functional_number,
-                  adminstration_id: responce['user'].adminstration_id,
-                  department_id: responce['user'].department_id,
-                  contract_type_id: responce['user'].contract_type_id,
-                  staff_id: responce['user'].staff_id,
-                  status: responce['user'].status,
-                  identity_type_id: responce['user'].identity_type_id,
-                  identity_number: responce['user'].identity_number,
-                }
-              );
-              this.urlImg = responce['user'].photo ? this.authSer.pathImg + responce['user'].photo : this.urlImg;
-              console.log(this.urlImg);
-              this.getDepartment();
               this.spineer.hide();
             },
             (error) => {console.log(error)},
@@ -250,19 +225,18 @@ export class FormUserComponent implements OnInit {
       this.signupForm = new FormGroup({
         name: new FormControl(null, Validators.required),
         identity_type_id: new FormControl(null, [Validators.required]),
-        identity_number: new FormControl(null, [Validators.required, Validators.minLength(10)]),
+        identity_number: new FormControl(null,Validators.required),
         position: new FormControl(null, Validators.required),
         email: new FormControl(null, [Validators.required,Validators.email]),
         password: new FormControl(null, [Validators.required, Validators.minLength(6)]),
         password_confirmation: new FormControl(null, [Validators.required, Validators.minLength(6)]),
-        phone: new FormControl(null, [Validators.required, Validators.minLength(10)]),
+        phone: new FormControl(null, Validators.required),
         gender: new FormControl(null, Validators.required),
         birthday: new FormControl(null, Validators.required),
         adminstration_id: new FormControl(null, Validators.required),
         department_id: new FormControl(null, Validators.required),
         nationality_id: new FormControl(null, Validators.required),
         date_of_employment_gre: new FormControl(null, Validators.required),
-        date_of_employment_hij: new FormControl(null, Validators.required),
         job_title_id: new FormControl(null),
         specialization_id: new FormControl(null),
         functional_number: new FormControl(null, Validators.required),
@@ -270,24 +244,25 @@ export class FormUserComponent implements OnInit {
         staff_id: new FormControl(null),
         status: new FormControl(null, Validators.required),
       });
+
+      this.spineer.hide();
   
     }else{
       //creating edit form user 
       this.signupForm = new FormGroup({
         name: new FormControl(null, Validators.required),
         identity_type_id: new FormControl(null, [Validators.required]),
-        identity_number: new FormControl(null, [Validators.required, Validators.minLength(10)]),
+        identity_number: new FormControl(null, Validators.required),
         position: new FormControl(null, Validators.required),
         email: new FormControl(null, [Validators.required,Validators.email]),
         password: new FormControl(null, [Validators.minLength(6)]),
-        phone: new FormControl(null, [Validators.required, Validators.minLength(10)]),
+        phone: new FormControl(null, Validators.required),
         gender: new FormControl(null, Validators.required),
         birthday: new FormControl(null, Validators.required),
         adminstration_id: new FormControl(null, Validators.required),
         department_id: new FormControl(null, Validators.required),
         nationality_id: new FormControl(null, Validators.required),
         date_of_employment_gre: new FormControl(null, Validators.required),
-        date_of_employment_hij: new FormControl(null, Validators.required),
         job_title_id: new FormControl(null),
         specialization_id: new FormControl(null),
         functional_number: new FormControl(null, Validators.required),
@@ -298,7 +273,16 @@ export class FormUserComponent implements OnInit {
     }
     //catch params to show edit mode
   }
-//get departmants 
+
+  //get value date from child component 
+  public getDate(date: any):void {
+    console.log( date);
+    this.higriDateVal = date.year + '-' + date.month + '-' + date.day;
+    console.log('higrii date', this.higriDateVal);
+  }
+
+
+  //get departmants 
   getDepartment() {
     const adminstrationId = this.signupForm.get('adminstration_id').value;
     console.log(adminstrationId);
@@ -312,9 +296,17 @@ export class FormUserComponent implements OnInit {
   }
 
 
+
   //submitted form
   onSubmittedForm() {
+
+    this.checkSaveDisabled = true;
     const userData = this.signupForm.value;
+    userData['date_of_employment_hij'] = this.higriDateVal;
+    const birthDate = userData['birthday'].split('-')[0];
+    const joinJopYear = userData['date_of_employment_gre'].split('-')[0];
+    console.log(joinJopYear);
+   
 
     if(this.checkChangeImage) {
       userData['photo'] = this.imageBase64;
@@ -326,22 +318,35 @@ export class FormUserComponent implements OnInit {
     if(this.typeCreatePage == 'user') {
 
       if(this.signupForm.get('password').value != this.signupForm.get('password_confirmation').value){
-        this.toastr.warning('please, check password and confirm password !');
-      } else if(this.signupForm.get('identity_number').value.substring(0,1) != 1 && this.signupForm.get('identity_type_id').value == 1){
+        this.toastr.warning('من فضلك تأكد أن كلمه المرور هي نفس تأكيد كلمه المرور ');
+        this.checkSaveDisabled = false;
+      } else if(userData['date_of_employment_hij'] == "") {
+          this.toastr.warning('من فضلك ، أدخل تاريخ التوظيف الهجري !');
+          this.checkSaveDisabled = false;
+     }else if(this.signupForm.get('identity_number').value.substring(0,1) != 1 && this.signupForm.get('identity_type_id').value == 1){
         this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 1');
+        this.checkSaveDisabled = false;
       } else if(this.signupForm.get('identity_number').value.substring(0,1) != 2 && this.signupForm.get('identity_type_id').value == 3){
         this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 2');
+        this.checkSaveDisabled = false;
       } else if(this.signupForm.get('phone').value.substring(0,2) != '05') {
         this.toastr.warning('رقم الجوال يجب أن يبدأ ب 05');
-      } else {
+        this.checkSaveDisabled = false;
+      } else if(birthDate > joinJopYear) {
+        this.toastr.warning('تاريخ التوظيف الميلادي أكبر من تاريخ الميلاد !');
+        this.checkSaveDisabled = false;
+      } 
+      else {
         this.userSer.addUser(userData, 'user').subscribe(
           (responce) => {
             console.log(responce);
             this.toastr.success('تم الاضافه بنجاح');
             this.location.back();
+            this.checkSaveDisabled = true;
           },
           (error) => {
             console.log(error);
+            this.checkSaveDisabled = false;
             if(error.error['error'].email) {
               this.toastr.warning('الايميل تم التسجيل به من قبل !');
             } else if(error.error['error'].identity_number) {
@@ -351,44 +356,23 @@ export class FormUserComponent implements OnInit {
         );
       };
 
-    } else if(this.typeCreatePage == 'joinUs') {
-
-      if(this.signupForm.get('password').value != this.signupForm.get('password_confirmation').value){
-        this.toastr.warning('please, check password and confirm password !');
-      } else if(this.signupForm.get('identity_number').value.substring(0,1) != 1 && this.signupForm.get('identity_type_id').value == 1){
-        this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 1');
-      } else if(this.signupForm.get('identity_number').value.substring(0,1) != 2 && this.signupForm.get('identity_type_id').value == 3){
-        this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 2');
-      } else if(this.signupForm.get('phone').value.substring(0,2) != '05') {
-        this.toastr.warning('رقم الجوال يجب أن يبدأ ب 05');
-      } else {
-        this.userSer.addUser(userData, 'joinUs').subscribe(
-          (responce) => {
-            console.log(responce);
-            this.toastr.success('تم الاضافه بنجاح');
-            this.location.back();
-          },
-          (error) => {
-            console.log(error);
-            if(error.error['error'].email) {
-              this.toastr.warning('الايميل تم التسجيل به من قبل !');
-            } else if(error.error['error'].identity_number) {
-              this.toastr.warning('رقم الهويه تم التسجيل به من قبل !');
-            }
-          }
-        );
-      }
-    };
+    }
 
     if(this.typeMode) {
       if(this.typeEditPage == 'editUs') {
         userData['id'] = this.userID;
         if(this.signupForm.get('identity_number').value.substring(0,1) != 1 && this.signupForm.get('identity_type_id').value == 1){
           this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 1');
+          this.checkSaveDisabled = false;
         } else if(this.signupForm.get('identity_number').value.substring(0,1) != 2 && this.signupForm.get('identity_type_id').value == 3){
           this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 2');
+          this.checkSaveDisabled = false;
+        } else if(birthDate > joinJopYear) {
+          this.toastr.warning('تاريخ التوظيف الميلادي أكبر من تاريخ الميلاد !');
+          this.checkSaveDisabled = false;
         } else if(this.signupForm.get('phone').value.substring(0,2) != '05') {
           this.toastr.warning('رقم الجوال يجب أن يبدأ ب 05');
+          this.checkSaveDisabled = false;
         } else {
           this.userSer.onEditUser(userData, 'user').subscribe(
             (responce) => {
@@ -402,32 +386,8 @@ export class FormUserComponent implements OnInit {
             }
           );
         }
-      } else if(this.typeEditPage == 'editJo') {
-        userData['id'] = this.userID;
-        console.log('ediit', userData);
-        if(this.signupForm.get('identity_number').value.substring(0,1) != 1 && this.signupForm.get('identity_type_id').value == 1){
-          this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 1');
-        } else if(this.signupForm.get('identity_number').value.substring(0,1) != 2 && this.signupForm.get('identity_type_id').value == 3){
-          this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 2');
-        } else if(this.signupForm.get('phone').value.substring(0,2) != '05') {
-          this.toastr.warning('رقم الجوال يجب أن يبدأ ب 05');
-        } else {
-          this.userSer.onEditUser(userData, 'joinUs').subscribe(
-            (responce) => {
-              console.log(responce);
-              this.toastr.success('تم التعديل بنجاح');
-              this.location.back(); 
-            },
-            (error) => {
-              console.log(error);
-              this.toastr.error('خطأ التعديل');
-            }
-          );
-        }
       }
     }
-
-
   };
 
   getSelectedOptionText(event){
@@ -478,4 +438,5 @@ export class FormUserComponent implements OnInit {
     return this.signupForm.get('password_confirmation');
   }
 
+
 }

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

@@ -25,7 +25,7 @@
   
       <!-- <h1 class="text-center" style="margin: 30px 0;">الصلاحيات</h1>
       <hr> -->
-      <div class="row">
+      <!-- <div class="row">
         <div class="col-12 col-sm-6 col-md-6" *ngFor="let page of pages; let i=index">
           <div class="permission text-center">
             <h2>{{page.name}}</h2>
@@ -35,7 +35,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </div> -->
       <button class="btn btn-success" style="float:right; margin: 20px 0;" (click)="onSubmitted()">حفظ</button>
     
     </div>

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

@@ -50,18 +50,18 @@ export class UserPermissionComponent implements OnInit, OnDestroy {
       }
     );
 
-    //get Permission list
-    this.permissionSubscription = this.userSevice.getPermissionList().subscribe(
-      (responce) => {
-        //console.log(responce);
-        this.pages = responce['pages'];
+    // //get Permission list
+    // this.permissionSubscription = this.userSevice.getPermissionList().subscribe(
+    //   (responce) => {
+    //     //console.log(responce);
+    //     this.pages = responce['pages'];
         
-        this.spinner.hide();
-      },
-      (error) => {
-        console.log(error);
-      }
-    );
+    //     this.spinner.hide();
+    //   },
+    //   (error) => {
+    //     console.log(error);
+    //   }
+    // );
 
     //get roles permission list
     this.rolesSubscriptions = this.userSevice.getRolesList().subscribe(
@@ -79,9 +79,9 @@ export class UserPermissionComponent implements OnInit, OnDestroy {
     this.subscriptionGetUser = this.userSevice.onGetUserData(this.userId, 'editUs').subscribe(
       (responce) => {
         console.log(responce);
-        for(let i = 0; i < responce['permissions'].length; i++) {
-          this.pagesId[i] = responce['permissions'][i].id;
-        }
+        // for(let i = 0; i < responce['permissions'].length; i++) {
+        //   this.pagesId[i] = responce['permissions'][i].id;
+        // }
 
         for(let i = 0; i < responce['roles'].length; i++) {
           this.rolesId[i] = responce['roles'][i].id;
@@ -90,18 +90,18 @@ export class UserPermissionComponent implements OnInit, OnDestroy {
 
         console.log('edite permissoion id', this.pagesId);
         
-        for(let i = 0; i < this.pagesId.length; i++) {
-          console.log('paaaaggggesIIIDD', this.pagesId[i]);
-          for(let j = 0; j < this.pages.length; j++){
-            console.log('paaaaaaageees', this.pages[j]);
-            for(let k = 0 ; k < this.pages[j].permissions.length ; k++) {
-              console.log('permisssions', this.pages[j].permissions[k]);
-              if(this.pages[j].permissions[k].id == this.pagesId[i]) {
-                this.pages[j].permissions[k].selected = true;
-              }
-            }
-          }
-        }
+        // for(let i = 0; i < this.pagesId.length; i++) {
+        //   console.log('paaaaggggesIIIDD', this.pagesId[i]);
+        //   for(let j = 0; j < this.pages.length; j++){
+        //     console.log('paaaaaaageees', this.pages[j]);
+        //     for(let k = 0 ; k < this.pages[j].permissions.length ; k++) {
+        //       console.log('permisssions', this.pages[j].permissions[k]);
+        //       if(this.pages[j].permissions[k].id == this.pagesId[i]) {
+        //         this.pages[j].permissions[k].selected = true;
+        //       }
+        //     }
+        //   }
+        // }
 
         for(let i = 0; i < this.rolesId.length; i++) {
           for(let j = 0; j < this.roles.length; j++){
@@ -122,16 +122,16 @@ export class UserPermissionComponent implements OnInit, OnDestroy {
   onSubmitted() {
  
     this.rolesId = [];
-    this.pagesId = [];
+    //this.pagesId = [];
     const data = {};
     
-    for(let i = 0 ; i < this.pages.length; i++) {
-      for(let j = 0 ; j < this.pages[i].permissions.length ; j++) {
-        if(this.pages[i].permissions[j].selected == true) {
-          this.pagesId.push(this.pages[i].permissions[j].id);
-        }
-      } 
-    };
+    // for(let i = 0 ; i < this.pages.length; i++) {
+    //   for(let j = 0 ; j < this.pages[i].permissions.length ; j++) {
+    //     if(this.pages[i].permissions[j].selected == true) {
+    //       this.pagesId.push(this.pages[i].permissions[j].id);
+    //     }
+    //   } 
+    // };
 
 
     for(let k = 0; k < this.roles.length; k++) {
@@ -141,7 +141,7 @@ export class UserPermissionComponent implements OnInit, OnDestroy {
     }
 
     data['roles_id'] = this.rolesId;
-    data['permissions_id'] = this.pagesId;
+    //data['permissions_id'] = this.pagesId;
     data['user_id'] = this.userId;
     console.log(data);
 
@@ -157,15 +157,12 @@ export class UserPermissionComponent implements OnInit, OnDestroy {
       this.toastr.error('please select at least one role');
       this.toastr.error('خطأ التعديل !');
     }
-
   };
 
 
-
   //when destroy component
   ngOnDestroy(){
     this.subscriptionRouteing.unsubscribe();
-    this.permissionSubscription.unsubscribe();
     this.rolesSubscriptions.unsubscribe();
     this.subscriptionGetUser.unsubscribe();
   }

src/app/dashboard/users/users.component.ts

@@ -258,6 +258,8 @@ export class UsersComponent implements OnInit {
         }
       }
 
+    
+
       if(this.usersId.length > 0) {
         const dialogRef = this.modal.alert()
         .size('sm')
@@ -273,7 +275,38 @@ export class UsersComponent implements OnInit {
             (responce) => {
               console.log(responce);
               this.toastr.success('تم الحذف');
-              window.location.reload();
+              this.spinner.show();
+              this.usersList = [];
+              if(this.pageId == 1) {
+                this.userSer.getPageData(this.pageId, this.currentPage, this.dataTableNumber).subscribe(
+                  (responce) => {
+                    console.log(responce);
+                    this.usersList = responce['users'];
+                    console.log(this.usersList);
+                    this.spinner.hide();
+                  },
+                  (error) => {
+                    console.log(error);
+                    this.spinner.hide();
+                  }
+                );
+              } else if(this.pageId == 9) {
+                this.userSer.getPageData(this.pageId, this.currentPage , this.dataTableNumber).subscribe(
+                  (responce) => {
+                    console.log(responce);
+                    this.usersList = responce['join_wes'];
+                    console.log(this.usersList);
+                    for (var i = 0; i < this.usersList.length; i++) {
+                      this.usersList[i].selected = false;
+                    }
+                    this.count = responce['count'];
+                    this.perPagePagenation = responce['per_page'];
+                    this.spinner.hide();
+                  },
+                  (error) => {console.log(error)}
+                );
+              }
+              
             },
             (error) => {console.log(error)},
           )

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

@@ -1,3 +1,9 @@
+input,select {
+    font-size: 12px; 
+    background-color: #f9f9f9;
+    border: 2px solid #bda380;
+}
+
 .calendar {
     position: absolute;
     left: 16px;

src/app/number-derictive.directive.ts

@@ -0,0 +1,29 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[appNumberDerictive]'
+})
+export class NumberDerictiveDirective {
+
+
+     private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);
+
+     private specialKeys: Array<string> = [ 'Backspace', 'Tab', 'End', 'Home' ];
+ 
+     constructor(private el: ElementRef) {
+     }
+ 
+     @HostListener('keydown', [ '$event' ])
+     onKeyDown(event: KeyboardEvent) {
+         // Allow Backspace, tab, end, and home keys
+         if (this.specialKeys.indexOf(event.key) !== -1) {
+             return;
+         }
+         let current: string = this.el.nativeElement.value;
+         let next: string = current.concat(event.key);
+         if (next && !String(next).match(this.regex) || next.length > 10) {
+             event.preventDefault();
+         }
+     }
+
+}

src/app/regester/regester.component.css

@@ -75,9 +75,8 @@ select.ng-invalid{
 }
 
 .regesterBtn-w {
-    width: 200px;
-    display: block;
-    margin:  20px auto;
+    margin:  20px 10px;
+    float: right;
 }
 
 .inlineBlock-w {
@@ -89,11 +88,25 @@ select.ng-invalid{
 .formStyle{
     border: 1px solid #ccc;
     border-top: 4px solid #bda380;
-    padding: 20px 100px;
-    width: 90%;
+    padding: 20px;
     margin: 0 auto
 }
 
+
+
+.titileLi-w {
+    margin: 0 65px;
+}
+.titileLi-w li {
+    margin: 0 5px;
+}
+
+.errorMessage-w {
+    font-size: 14px;
+    text-align: right;
+    margin: 5px;
+    color: red;
+}
 /* start media query style */
 
 @media(max-width: 767px){

src/app/regester/regester.component.html

@@ -1,3 +1,17 @@
+
+<div class="row">
+  <div class="col-12">
+    <div class="path">
+      <div class="container">
+        <ul class="list-unstyled titileLi-w">
+          <li class="headingText-w" (click)="authSer.perviousLocation()" style="cursor: pointer"> العوده > </li>
+          <li class="headingText-w activeLi-w" (click)="authSer.perviousLocation()">  {{typeTitle}} </li>
+        </ul> 
+      </div>     
+    </div>
+  </div>
+</div>
+
 <div class="userForm-w" [style.min-height.px]="myInnerHeight">
     <div class="container">
         <form [formGroup]="regesterForm" (ngSubmit)="onSubmittedForm()" class="formStyle">
@@ -9,158 +23,187 @@
                   <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label for="name" style="float:right">الأسم <span class="spanReqired-w">*</span></label>
                 <input type="text" id="name" placeholder="أدخل الأسم رباعي" class="form-control" formControlName="name" />
               </div>
             </div>
+            
             <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
-                <label for="functional_number" style="float:right"> الرقم الوظيفي <span class="spanReqired-w">*</span></label>
-                <input type="number" class="form-control" id="functional_number" placeholder="الرقم الوظيفي" formControlName="functional_number" />
+                <label style="float:right">الجنسيه <span class="spanReqired-w">*</span></label>
+                <select class="form-control" formControlName="nationality_id">
+                  <option *ngFor="let country of countries; let i = index" [value]="country.id">{{country.name}}</option>
+                </select>
               </div>
-            </div> 
+            </div>
+
             <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                   <label for="identity" style="float:right"> الهويه <span class="spanReqired-w">*</span></label>
                 <select class="form-control select" id="identity" formControlName="identity_type_id" (change)="getSelectedOptionText($event)">
-                  <option *ngFor="let identity of identities" value="{{identity.id}}">{{identity.name}}</option>
+                  <option *ngFor="let identity of identities" [value]="identity.id">{{identity.name}}</option>
                 </select>
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="identity_id != 4">
               <div class="form-group">
                 <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
                 <input type="phone" class="form-control" placeholder="رقم الهويه" id="identityNumber" formControlName="identity_number" appOnlyNumber (input)="onIdentitiyChange($event.target.value)" />
-                <span *ngIf="identity_id == 1"  style="color:red">أدخل رقم هويه مكون من 10 أرقام يبدأ برقم 1</span>
-                <span *ngIf="identity_id == 2" style="color:red">أدخل رقم هويه مكون من 10 أرقام </span>
-                <span *ngIf="identity_id == 3" style="color:red">أدخل رقم الإقامه مكون من 10 أرقام يبدأ برقم 2 </span>
+                <span class="errorMessage-w" *ngIf="identity_id == 1">أدخل رقم هويه مكون من 10 أرقام يبدأ برقم 1</span>
+                <span class="errorMessage-w" *ngIf="identity_id == 2">أدخل رقم هويه مكون من 10 أرقام </span>
+                <span class="errorMessage-w" *ngIf="identity_id == 3">أدخل رقم الإقامه مكون من 10 أرقام يبدأ برقم 2 </span>
               </div>
             </div>
             <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="identity_id == 4">
               <div class="form-group">
                 <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
                 <input type="phone" class="form-control" placeholder="رقم الهويه" id="identityNumber" formControlName="identity_number" />
-                <span style="color:red">أدخل رقم جواز السفر </span>
+                <span class="errorMessage-w"> أدخل رقم جواز السفر </span>
               </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>
-                <select class="form-control" formControlName="nationality_id">
-                  <option *ngFor="let country of countries; let i = index" [ngValue]="country.id">{{country.name}}</option>
-                </select>
+                <label for="email" style="float:right">البريد الإلكتروني <span class="spanReqired-w">*</span></label>
+                <input type="email" id="email" placeholder="البريد الإلكتروني" class="form-control" appEnglishCharacters formControlName="email" />
+                <span class="help-block" *ngIf="!regesterForm.get('email').valid && regesterForm.get('email').touched" style="color:red">من فضلك أدخل بريد إلكتروني صحيح</span>
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label for="phone" style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
-                <input type="text" id="phone" class="form-control" placeholder="رقم الجوال يبدأ ب 05 ومكون من 10 أرقام" formControlName="phone" />
+                <input type="text" id="phone" appNumberDerictive class="form-control" placeholder="رقم الجوال يبدأ ب 05 ومكون من 10 أرقام" formControlName="phone" />
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
-                <label for="birthday" style="float:right">تاريخ الميلاد <span class="spanReqired-w">*</span></label>
-                <input type="date" id="birthdate" placeholder="تاريخ الميلاد" class="form-control" formControlName="birthday" /> 
+                <label for="password" style="float:right">كلمه المرور <span *ngIf="checkShowSpanRequired" class="spanReqired-w">*</span></label>
+                <input type="password" id="password" class="form-control" placeholder="كلمه المرور" formControlName="password" />
+                <span class="help-block" *ngIf="password.errors?.minlength && regesterForm.get('password').touched" style="color:red;font-size:12px"> من فضلك , أدخل كلمه مرور لاتقل عن 6 ارقام</span>
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
-                <label for="date_employment" style="float:right">تاريخ التوظيف الميلادي <span class="spanReqired-w">*</span></label>
-                <input type="date" class="form-control" id="date_employment" formControlName="date_of_employment_gre" />
+                <label for="password_confirmation" style="float:right" >تأكيد كلمه المرور <span *ngIf="checkShowSpanRequired" class="spanReqired-w">*</span></label>
+                <input type="password" id="password_confirmation" placeholder="تأكيد كلمه المرور" class="form-control" formControlName="password_confirmation" minlength="6"/>
+                <span class="help-block" *ngIf="repeatPassword.errors?.minlength && regesterForm.get('password_confirmation').touched" style="color:red;font-size:12px">من فضلك , أدخل كلمه مرور لاتقل عن 6 ارقام</span>
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
-                <label for="date_employment_hij" style="float:right">تاريخ التوظيف الهجري <span class="spanReqired-w">*</span></label>
-                <input type="date" class="form-control" id="date_employment_hij" formControlName="date_of_employment_hij" />
+                <label for="functional_number" style="float:right"> الرقم الوظيفي <span class="spanReqired-w">*</span></label>
+                <input type="number" class="form-control" min="0" id="functional_number" placeholder="الرقم الوظيفي" formControlName="functional_number" />
+              </div>
+            </div> 
+           
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+              <div class="form-group">
+                <label for="birthday" style="float:right">تاريخ الميلاد <span class="spanReqired-w">*</span></label>
+                <input type="date" max="{{min}}" id="birthdate" placeholder="تاريخ الميلاد" class="form-control" formControlName="birthday" /> 
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
-                <label for="position" style="float:right">المنصب <span class="spanReqired-w">*</span></label>
-                <input type="text" id="position" class="form-control" placeholder="المنصب" formControlName="position" />
+                <label for="date_employment" style="float:right">تاريخ التوظيف الميلادي <span class="spanReqired-w">*</span></label>
+                <input type="date" class="form-control" id="date_employment" formControlName="date_of_employment_gre" />
+              </div>
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+              <div class="form-group">
+                <label for="date_employment_hij" style="float:right">تاريخ التوظيف الهجري <span class="spanReqired-w">*</span></label>
+                <div *ngIf='bindingDateSplit && typeMode'>
+                  <app-higri-date (onDatePicked)="getDate($event)" [myDate]="bindingDateSplit"></app-higri-date>
+                </div>
+                <div *ngIf='!typeMode'>
+                  <app-higri-date (onDatePicked)="getDate($event)" ></app-higri-date>
+                </div>
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label style="float:right">اسم الوظيفه</label>
                 <select class="form-control" formControlName="job_title_id">
-                  <option *ngFor="let job of jobTitils; let i = index" [ngValue]="job.id">{{job.name}}</option>
+                  <option *ngFor="let job of jobTitils; let i = index" [value]="job.id">{{job.name}}</option>
                 </select>
               </div>
             </div>
+
+
             <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label style="float:right">التخصص</label>
                 <select class="form-control" formControlName="specialization_id">
-                  <option *ngFor="let spec of specializations; let i = index" [ngValue]="spec.id">{{spec.name}}</option>
+                  <option *ngFor="let spec of specializations; let i = index" [value]="spec.id">{{spec.name}}</option>
                 </select>
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
-                <label style="float:right">نوع العقد</label>
-                <select class="form-control" formControlName="contract_type_id">
-                  <option *ngFor="let contract of contracts; let i = index" [ngValue]="contract.id">{{contract.name}}</option>
-                </select>
+                <label for="position" style="float:right">المنصب <span class="spanReqired-w">*</span></label>
+                <input type="text" id="position" class="form-control" placeholder="المنصب" formControlName="position" />
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
-                <label style="float:right">الملاك الوظيفي</label>
-                <select class="form-control" formControlName="staff_id">
-                  <option *ngFor="let staff of staffs; let i = index" [ngValue]="staff.id">{{staff.name}}</option>
+                <label style="float:right">الاداره <span class="spanReqired-w">*</span></label>
+                <select class="form-control" formControlName="adminstration_id" (change)="getDepartment()">
+                  <option *ngFor="let admin of adminstration; let i = index" [value]="admin.id">{{admin.name}}</option>
                 </select>
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+           
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="showDepart">
               <div class="form-group">
-                <label for="email" style="float:right">الإيميل <span class="spanReqired-w">*</span></label>
-                <input type="email" id="email" placeholder="الإيميل" class="form-control" appEnglishCharacters formControlName="email" />
+                <label style="float:right">القسم <span class="spanReqired-w">*</span></label>
+                <select class="form-control" formControlName="department_id">
+                  <option *ngFor="let department of departments; let i = index" [value]="department.id">{{department.name}}</option>
+                </select>
+                <span class="help-block" *ngIf="!regesterForm.get('department_id').valid && regesterForm.get('department_id').touched" style="color:red">أدخل القسم </span>
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
-                <label for="password" style="float:right">كلمه المرور <span class="spanReqired-w">*</span></label>
-                <input type="password" id="password" class="form-control" placeholder="كلمه المرور" formControlName="password" />
+                <label style="float:right">الملاك الوظيفي</label>
+                <select class="form-control" formControlName="staff_id">
+                  <option *ngFor="let staff of staffs; let i = index" [value]="staff.id">{{staff.name}}</option>
+                </select>
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
-                <label for="password_confirmation" style="float:right">تأكيد كلمه المرور <span class="spanReqired-w">*</span></label>
-                <input type="password" id="password_confirmation" placeholder="تأكيد كلمه المرور" class="form-control" formControlName="password_confirmation" minlength="6"/>
+                <label style="float:right">نوع العقد</label>
+                <select class="form-control" formControlName="contract_type_id">
+                  <option *ngFor="let contract of contracts; let i = index" [value]="contract.id">{{contract.name}}</option>
+                </select>
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="showStatus">
               <div class="form-group">
-                <label>الحاله</label>
+                <label style="float: right; margin-right:5px">الحاله</label>
                 <select class="form-control" formControlName="status">
-                  <option [ngValue]='1'>Active</option>
-                  <option [ngValue]='0'>Non Active</option>
+                  <option [value]='1'>فعال</option>
+                  <option [value]='0'>غير فعال</option>
                 </select>
                 <span class="help-block" *ngIf="!regesterForm.get('status').valid && regesterForm.get('status').touched" style="color:red">Please enter a status  </span>
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
-              <div class="form-group">
-                <label style="float:right">الاداره</label>
-                <select class="form-control" formControlName="adminstration_id" (change)="getDepartment()">
-                  <option *ngFor="let admin of adminstration; let i = index" [ngValue]="admin.id">{{admin.name}}</option>
-                </select>
-                <span class="help-block" *ngIf="!regesterForm.get('adminstration_id').valid && regesterForm.get('adminstration_id').touched" style="color:red">أدخل الاداره </span>
-              </div>
-            </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="showDepart">
-              <div class="form-group">
-                <label style="float:right">القسم</label>
-                <select class="form-control" formControlName="department_id">
-                  <option *ngFor="let department of departments; let i = index" [ngValue]="department.id">{{department.name}}</option>
-                </select>
-                <span class="help-block" *ngIf="!regesterForm.get('department_id').valid && regesterForm.get('department_id').touched" style="color:red">أدخل القسم </span>
-              </div>
-            </div>
+          
             <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label style="float: right; margin-right:5px;margin-top:10px">النوع <span class="spanReqired-w">*</span></label>
@@ -175,8 +218,12 @@
                 </div>
               </div>
             </div>
+            
+            <div class="col-12">
+                <button type="submit" [disabled]="!regesterForm.valid" class="btn btn-success regesterBtn-w">{{userProfileId ? 'حفظ' : 'سجل'}}</button>
+                <button type="button" class="btn btn-warning regesterBtn-w" (click)="authSer.backFromEdit()">إلغاء</button>
+            </div>
           </div>
-          <button type="submit" [disabled]="!regesterForm.valid" class="btn btn-success regesterBtn-w">{{userProfileId ? 'حفظ' : 'سجل'}}</button>
         </form>
     </div>
   </div>

src/app/regester/regester.component.ts

@@ -1,3 +1,5 @@
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+import { Observable } from 'rxjs/Observable';
 import { AuthServiceService } from './../shared/auth-service.service';
 import { UserService } from './../shared/user.service';
 import { Component, OnInit } from '@angular/core';
@@ -12,6 +14,8 @@ import { NgxSpinnerService } from 'ngx-spinner';
   styleUrls: ['./regester.component.css']
 })
 
+
+
 export class RegesterComponent implements OnInit {
 
   
@@ -20,11 +24,12 @@ export class RegesterComponent implements OnInit {
     private router: Router, 
     private toastr: ToastrService,
     private spinner: NgxSpinnerService,
+    private modal: Modal,
     private route: ActivatedRoute) { }
   
   regesterForm: FormGroup;
   myInnerHeight = window.innerHeight;
-
+  min = '1990-01-01';
   adminstration = [];
   countries = [];
   jobTitils = [];
@@ -43,6 +48,18 @@ export class RegesterComponent implements OnInit {
   identity_id: number = 0;
   identity_type: number;
   number_identitiy:number;
+  year: any;
+  month:any;
+  day:any;
+  checkShowSpanRequired: boolean = true;
+  changesSave:boolean = false;
+  typeMode:boolean = false;
+  typeTitle:string = '';
+  higriDateVal = "";
+  bindingDateSplit: any;
+  data = {
+    name: ''
+  }
 
 
   ngOnInit() {
@@ -50,7 +67,12 @@ export class RegesterComponent implements OnInit {
     this.authSer.showSearchHeader = false;
     this.authSer.notificationLogin = false;
     this.authSer.showDashboardHeader = true;
+
+  
+
     
+    
+    this.typeTitle = 'تسجيل الدخول';
 
     this.route.params.subscribe(
       (params:Params) => {
@@ -62,19 +84,18 @@ export class RegesterComponent implements OnInit {
     this.regesterForm = new FormGroup({
       name: new FormControl(null, Validators.required),
       identity_type_id: new FormControl(null, [Validators.required]),
-      identity_number: new FormControl(null, [Validators.required, Validators.minLength(10)]),
+      identity_number: new FormControl(null, Validators.required),
       position: new FormControl(null, Validators.required),
       email: new FormControl(null, [Validators.required,Validators.email]),
       password: new FormControl(null, [Validators.required, Validators.minLength(6)]),
       password_confirmation: new FormControl(null, [Validators.required, Validators.minLength(6)]),
-      phone: new FormControl(null, [Validators.required, Validators.minLength(10)]),
+      phone: new FormControl(null, Validators.required),
       gender: new FormControl(null, Validators.required),
       birthday: new FormControl(null, Validators.required),
       adminstration_id: new FormControl(null, Validators.required),
       department_id: new FormControl(null, Validators.required),
       nationality_id: new FormControl(null, Validators.required),
       date_of_employment_gre: new FormControl(null, Validators.required),
-      date_of_employment_hij: new FormControl(null, Validators.required),
       job_title_id: new FormControl(null),
       specialization_id: new FormControl(null),
       functional_number: new FormControl(null, Validators.required),
@@ -141,15 +162,20 @@ export class RegesterComponent implements OnInit {
     this.userService.onGetIdentities().subscribe(
       (responce) => {
         this.identities = responce['identities'];
+        console.log('idddentiiiesssssssssss', this.identities);
       },
       (error) => {
         console.log(error);
       }
-    )
+    );
 
+
+
+    //profile edit
     if(this.userProfileId) {
-      
+      this.typeTitle = 'صفحتي';
          //show / hide notification search in header
+      this.checkShowSpanRequired = false;
       this.authSer.notificationLogin = true;
       this.authSer.showSearchHeader = false;
       this.authSer.showHeaderLogin = false;
@@ -157,25 +183,25 @@ export class RegesterComponent implements OnInit {
       this.authSer.showDashboardHeader = true;
       this.authSer.internalHeader = false;
       
-      console.log(this.authSer.isAuthenticated());
-      this.showStatus = true;
+      this.showStatus = false;
+      this.typeMode = true;
       this.authSer.notificationLogin = true;
       this.regesterForm = new FormGroup({
         name: new FormControl(null, Validators.required),
         identity_type_id: new FormControl(null, [Validators.required]),
-        identity_number: new FormControl(null, [Validators.required, Validators.minLength(10)]),
+        identity_number: new FormControl(null, Validators.required),
         position: new FormControl(null, Validators.required),
         email: new FormControl(null, [Validators.required,Validators.email]),
         password: new FormControl(null, [Validators.minLength(6)]),
         password_confirmation: new FormControl(null, [Validators.minLength(6)]),
-        phone: new FormControl(null, [Validators.required, Validators.minLength(8)]),
+        phone: new FormControl(null,Validators.required),
         gender: new FormControl(null, Validators.required),
         birthday: new FormControl(null, Validators.required),
         adminstration_id: new FormControl(null, Validators.required),
         department_id: new FormControl(null, Validators.required),
         nationality_id: new FormControl(null, Validators.required),
         date_of_employment_gre: new FormControl(null, Validators.required),
-        date_of_employment_hij: new FormControl(null, Validators.required),
+        //date_of_employment_hij: new FormControl(null, Validators.required),
         job_title_id: new FormControl(null),
         specialization_id: new FormControl(null),
         functional_number: new FormControl(null, Validators.required),
@@ -186,8 +212,12 @@ export class RegesterComponent implements OnInit {
 
       this.spinner.show();
       this.userService.onGetUserData(this.userProfileId, 'editUs').subscribe(
+
         (responce) => {
           console.log('userDataaaa', responce['user']);
+
+          this.data.name = responce['user'].name;
+
           this.regesterForm.patchValue({
             name: responce['user'].name,
             identity_type_id: responce['user'].identity_type_id,
@@ -195,21 +225,30 @@ export class RegesterComponent implements OnInit {
             email: responce['user'].email,
             position: responce['user'].position,
             phone: responce['user'].phone,
-            password : responce['user'].password,
             gender: responce['user'].gender,
             birthday: responce['user'].birthday,
             adminstration_id: responce['user'].adminstration_id,
             department_id: responce['user'].department_id,
             nationality_id: responce['user'].nationality_id,
             date_of_employment_gre: responce['user'].date_of_employment_gre,
-            date_of_employment_hij: responce['user'].date_of_employment_hij,
             job_title_id: responce['user'].job_title_id,
             specialization_id: responce['user'].specialization_id,
             contract_type_id: responce['user'].contract_type_id,
             staff_id: responce['user'].staff_id,
             functional_number: responce['user'].functional_number,
             status: responce['user'].status,
-          })
+          });
+          const date = responce['user'].date_of_employment_hij.split('-');
+            
+          this.bindingDateSplit = {
+            'year': parseInt(date[0]),
+            'month': parseInt(date[1]),
+            'day': parseInt(date[2])
+          };
+
+          this.higriDateVal = responce['user'].date_of_employment_hij;
+          console.log(this.bindingDateSplit);
+
           this.getDepartment();
           console.log('image profile' , this.authSer.pathImg + responce['user'].photo);
           this.urlImg = responce['user'].photo ? this.authSer.pathImg + responce['user'].photo : '../../assets/image/avatar.png';
@@ -292,30 +331,57 @@ export class RegesterComponent implements OnInit {
         }
       }
 
+
+      //get value date from child component 
+      public getDate(date: any):void {
+        console.log( date);
+        this.higriDateVal = date.year + '-' + date.month + '-' + date.day;
+        console.log('higrii date', this.higriDateVal);
+      }
+
+   
+
+
+     
+
     //submitted form 
     onSubmittedForm() {
 
+      this.changesSave = true;
       console.log(this.regesterForm);
       const userDataRegester = this.regesterForm.value;
       console.log(userDataRegester);
+
+      const birthDate = userDataRegester['birthday'].split('-')[0];
+      const joinJobDate = userDataRegester['date_of_employment_gre'].split('-')[0];
+
       if(this.checkChangeImage) {
         userDataRegester['photo'] = this.imageBase64;
         userDataRegester['photo_type'] = this.photoType[1];
       }
 
+      const userData = this.regesterForm.value;
+      userData['date_of_employment_hij'] = this.higriDateVal;
+  
+
       if(this.userProfileId) {
         userDataRegester['id'] = this.userProfileId;
         console.log('dataaaaaaaaaaaa', userDataRegester);
         if(this.regesterForm.get('password').value != this.regesterForm.get('password_confirmation').value){
-          this.toastr.warning('please, check password and confirm password !');
-        } else if(this.regesterForm.get('identity_number').value.substring(0,1) != 1 && this.regesterForm.get('identity_type_id').value == 1){
+          this.toastr.warning(' من فضلك , تأكد أن كلمه المورو نفس تأكيد كلمه المرور!');
+        } else if(this.higriDateVal == "") {
+          this.toastr.warning('من فضلك أدخل تاريخ التوظيف الهجري !');
+        } 
+        else if(this.regesterForm.get('identity_number').value.substring(0,1) != 1 && this.regesterForm.get('identity_type_id').value == 1){
           this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 1');
         } else if(this.regesterForm.get('identity_number').value.substring(0,1) != 2 && this.regesterForm.get('identity_type_id').value == 3){
           this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 2');
+        } else if(birthDate > joinJobDate) {
+          this.toastr.warning('تارخ الميلاد أكبر من تاريخ التوظيف الميلادي !');
         } else if(this.regesterForm.get('phone').value.substring(0,2) != '05') {
           this.toastr.warning('رقم الجوال يجب أن يبدأ ب 05');
         } else {
-          this.userService.onEditUser(userDataRegester, 'user').subscribe(
+          this.userService.onEditProfile(userDataRegester).subscribe(
             (responce) => {
               console.log(responce);
               this.toastr.success('تم التعديل بنجاح');
@@ -323,6 +389,11 @@ export class RegesterComponent implements OnInit {
             (error) => {
               console.log(error);
               this.toastr.error('فشل التعديل');
+              if(error.error['error'].email) {
+                this.toastr.warning('الايميل تم التسجيل به من قبل !');
+              } else if(error.error['error'].identity_number) {
+                this.toastr.warning('رقم الهويه تم التسجيل به من قبل !');
+              }
             }
           );
         } 
@@ -331,11 +402,15 @@ export class RegesterComponent implements OnInit {
         userDataRegester['photo_type'] = this.photoType[1];
         console.log('dataaaaaaaaaaaa', userDataRegester);
         if(this.regesterForm.get('password').value != this.regesterForm.get('password_confirmation').value){
-          this.toastr.warning('please, check password and confirm password !');
+          this.toastr.warning('  من فضلك تأكد أن كلمه المرور نفس تأكيد كلمه المرور !');
+        } else if(this.higriDateVal = "") {
+          this.toastr.warning('من فضلك أدخل تاريخ التوظيف الهجري !');
         } else if(this.regesterForm.get('identity_number').value.substring(0,1) != 1 && this.regesterForm.get('identity_type_id').value == 1){
           this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 1');
         } else if(this.regesterForm.get('identity_number').value.substring(0,1) != 2 && this.regesterForm.get('identity_type_id').value == 3){
           this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 2');
+        } else if(birthDate > joinJobDate) {
+          this.toastr.warning('تارخ الميلاد أكبر من تاريخ التوظيف الميلادي !');
         } else if(this.regesterForm.get('phone').value.substring(0,2) != '05') {
           this.toastr.warning('رقم الجوال يجب أن يبدأ ب 05');
         } 

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

@@ -1,3 +1,4 @@
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
 import { HttpClient, HttpRequest } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import * as JWT from 'jwt-decode';
@@ -16,7 +17,11 @@ import { Location } from '@angular/common';
 
 export class AuthServiceService {
 
-  constructor(private http:  HttpClient, private location: Location, private route: ActivatedRoute) { }
+  constructor(private http:  HttpClient, 
+    private location: Location,
+    private modal: Modal, 
+    private route: ActivatedRoute) {
+     }
 
   jwtHelper: JwtHelper = new JwtHelper();
 
@@ -35,6 +40,9 @@ export class AuthServiceService {
   showMoreLinks:boolean = false;
   showDashboardHeader: boolean = false;
   internalHeader: boolean = false;
+    
+  
+  end = '1990-01-01';
 
   arabicTemplate: boolean;
   arabicLanguage: boolean;
@@ -49,9 +57,11 @@ export class AuthServiceService {
   iconImg: string = '../../assets/image/Group 92.png';
 
   showSearchHeader: boolean = true;
-
+  headereClassActive:boolean = false;
   cachedRequests: Array<HttpRequest<any>> = [];
   notificationLogin: boolean = true;
+  parentsPage = [];
+
 
   dataLoginUser = {};
   //login function
@@ -102,6 +112,23 @@ export class AuthServiceService {
     this.location.back();
   }
 
+  //out of page
+  backFromEdit() {
+    const dialogRef = this.modal.alert()
+    .size('sm')
+    .showClose(true)
+    .title('تأكيد الخروج')
+    .body(`
+        <h4>الخروج من هذه الصفحه ؟ </h4>
+        `)
+    .open();
+
+      dialogRef.result
+      .then( result => 
+        this.perviousLocation()
+      );
+  }
+
   setLocalLang(){
     if(! localStorage.getItem('lang')){
       localStorage.setItem('lang', "ar");
@@ -127,18 +154,18 @@ export class AuthServiceService {
         this.showEnglishIcon = false;
       }
     }
-
   }
 
   //language content
   onLanguageContent(typeLang:string) {
     localStorage.setItem('lang', typeLang);
     this.setLocalLang();
-
-    
+    window.location.reload();
   }
 
 
+
+
   //get footer list 
   onGetFooterData() {
     return this.http.get(this.pathApi + '/get_footers_links');

src/app/shared/can-deactivate-guards.service.ts

@@ -0,0 +1,16 @@
+import { Observable } from 'rxjs/Observable';
+import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+
+export interface CanComponentDeactivate {
+  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
+}
+
+export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
+
+  canDeactivate(component: CanComponentDeactivate,
+                currentRoute: ActivatedRouteSnapshot,
+                currentState: RouterStateSnapshot,
+                nextState?: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
+    return component.canDeactivate();
+  }
+}

src/app/shared/dashboard.service.ts

@@ -0,0 +1,72 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+import { AuthServiceService } from './auth-service.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+
+
+export class DashboardService {
+
+  constructor(private http: HttpClient, 
+    private toastr: ToastrService, 
+    private authService: AuthServiceService,
+    private spinner: NgxSpinnerService) { }
+
+     //get hospitals list 
+     getListData(pageId: number, currentPage: number, dataTableNumber: number){
+      this.spinner.show();
+      console.log(this.authService.pathApi +'/page_list/' + pageId + '/' + currentPage + '/' + dataTableNumber + '/all');
+      return this.http.get(this.authService.pathApi +'/page_list/' + pageId + '/' + currentPage + '/' + dataTableNumber + '/all');
+    }
+  
+     //get data user from searchBar 
+     getDataUSerSearchBar(data, pageId, pagenationNumber, dataTableNumber) {
+      console.log('url', this.authService.pathApi + '/page_list' + '/' + pageId + '/' + pagenationNumber + '/' + dataTableNumber + '/all/' + data);
+       return this.http.get(this.authService.pathApi + '/page_list' + '/' + pageId + '/' + pagenationNumber + '/' + dataTableNumber + '/all/' + data);
+    }
+  
+    //addEvent
+    addItem(data, addType) {
+
+      if(addType == 'advertisiment'){
+        return this.http.post(this.authService.pathApi + '/add_main_ad' , data);
+      }
+    }
+  
+    //edit event
+    editItem(dataEdit,editId,editPageName){
+      const editData = dataEdit;
+      editData.id = editId;
+
+      if(editPageName == 'advertisiment') {
+        console.log(editData);
+        return this.http.post(this.authService.pathApi + '/edit_main_ad', editData);
+      }
+    }
+  
+    //get event data
+    getItemData(pageId: number, typeGetData:string) {
+      console.log('wwwwwwwwwwwwwwwwwwwwwwwwwwww', pageId);
+      if(typeGetData == 'advertisiment') {
+        return this.http.get(this.authService.pathApi + '/get_main_ad/' + pageId);
+      }
+    }
+  
+    //delete event 
+    deleteItem(dataIds, pageId) {
+      
+      console.log(dataIds);
+
+      if(pageId == 24) {
+        return this.http.post(this.authService.pathApi + '/delete_main_ads' , {'ads_id' : dataIds});
+      }
+      
+      
+    };
+
+
+}

src/app/shared/internal-page.service.ts

@@ -10,6 +10,15 @@ export class InternalPageService {
   constructor(private http: HttpClient, private authSer: AuthServiceService) { }
 
 
+  //get internl page data 
+  getInternalPageData() {
+    if(this.authSer.isAuthenticated()) {
+      return this.http.get(this.authSer.pathApi + '/internal_page');
+    } else {
+      return this.http.get(this.authSer.pathApi + '/internal_page/1');
+    }
+  }
+
   getParentData() {
     return  this.http.get(this.authSer.pathApi + '/main_menu_list') 
   }
@@ -39,6 +48,7 @@ export class InternalPageService {
   }
 
   getTabData(numberTab) {
+    alert(numberTab);
     console.log(this.authSer.pathApi + '/forth_tabs_list/' + numberTab);
     return this.http.get(this.authSer.pathApi + '/forth_tabs_list/' + numberTab);
   }
@@ -66,4 +76,6 @@ export class InternalPageService {
     console.log('iiiiin reqqqqqqqqqqqqqqqqquuuuuuest');
     return this.http.get(this.authSer.pathApi + '/tabs_list_internal_gate/' + currentPage + '/' + perPage + '/' + index);
   }
+
+  
 }

src/app/shared/internal-ser.service.ts

@@ -51,4 +51,9 @@ export class InternalSerService {
       return this.http.post(this.authService.pathApi + '/edit_internal_service', newData);
     }
 
+    //get internal pages 
+  getInternalPages() {
+    return this.http.get(this.authService.pathApi + '/system_pages_list');
+  }
+
 }

src/app/shared/only-number.directive.ts

@@ -22,7 +22,7 @@ constructor(private el: ElementRef) {
  }
  let current: string = this.el.nativeElement.value;
  let next: string = current.concat(event.key);
- if (next && !String(next).match(this.regex)) {
+ if (next && !String(next).match(this.regex)|| next.length > 10) {
  event.preventDefault();
  }
  }