gg

package-lock.json

@@ -896,6 +896,11 @@
         }
       }
     },
+    "@ngui/tab": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@ngui/tab/-/tab-0.5.0.tgz",
+      "integrity": "sha1-DLsOeOLiq/s9+/S+EY6GrvOIQKI="
+    },
     "@schematics/angular": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-7.0.6.tgz",
@@ -6173,6 +6178,11 @@
         }
       }
     },
+    "jw-angular-social-buttons": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/jw-angular-social-buttons/-/jw-angular-social-buttons-1.0.0.tgz",
+      "integrity": "sha512-E1xxsZBj0+DzJC7iPrwqq08UnfMbYuUHibMt5ijSqrR2LyBKmrZIlRM+8I+4e3m0bNNt1nwBbXcKlY6DsvOCOQ=="
+    },
     "jwt-decode": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-2.2.0.tgz",
@@ -7044,11 +7054,24 @@
         }
       }
     },
+    "ng2-social-share": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/ng2-social-share/-/ng2-social-share-0.0.10.tgz",
+      "integrity": "sha1-l/Qj+n51ZaAfsLMemV6tH65+hlU="
+    },
     "ng2-toastr": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/ng2-toastr/-/ng2-toastr-4.1.2.tgz",
       "integrity": "sha1-G0UvBxOZYcOPhmxuJKBiR++iGxE="
     },
+    "ng6-social-button": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/ng6-social-button/-/ng6-social-button-1.0.5.tgz",
+      "integrity": "sha512-1dBWYZ0FXupA8k809l1YHOSF5+HLndQc6r8Kl7QdWt1nH+vlp+2U3c4DTUtPz5HHcmDLeJi2a//IodSuEDu74g==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "ngx-hijri-lib": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/ngx-hijri-lib/-/ngx-hijri-lib-1.0.6.tgz",

package.json

@@ -22,6 +22,7 @@
     "@angular/router": "~7.0.0",
     "@auth0/angular-jwt": "^2.1.0",
     "@ng-bootstrap/ng-bootstrap": "^4.0.0",
+    "@ngui/tab": "^0.5.0",
     "@types/es6-promise": "^3.3.0",
     "@types/jwt-decode": "^2.2.1",
     "alife-file-to-base64": "0.0.2",
@@ -39,6 +40,7 @@
     "font-awesome": "^4.7.0",
     "hijri-date": "^0.2.2",
     "jquery": "^3.3.1",
+    "jw-angular-social-buttons": "^1.0.0",
     "jwt-decode": "^2.2.0",
     "materialize-css": "^1.0.0",
     "moment": "^2.23.0",
@@ -48,7 +50,9 @@
     "ng-simple-slideshow": "^1.2.6",
     "ng2-carouselamos": "^3.2.0",
     "ng2-opd-popup": "^1.1.21",
+    "ng2-social-share": "0.0.10",
     "ng2-toastr": "^4.1.2",
+    "ng6-social-button": "^1.0.5",
     "ngx-hijri-lib": "^1.0.6",
     "ngx-modialog": "^5.0.1",
     "ngx-moment": "^3.3.0",

src/app/External-Page/external-page.module.ts

@@ -0,0 +1,21 @@
+import { ExternalPageRoutingModule } from './external-routing-module';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+    declarations: [
+        
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        ExternalPageRoutingModule,
+    ],
+    providers: [
+    ],
+})
+
+export class ExternalPageModule {
+
+}

src/app/External-Page/external-routing-module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const externalPageRoutes: Routes = [];
+
+@NgModule({
+imports: [
+    RouterModule.forChild(externalPageRoutes),
+],
+//exports: [internalPageRoutes]
+exports: [
+    RouterModule
+  ]
+})
+
+export class ExternalPageRoutingModule {
+
+}

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

@@ -1,9 +1,10 @@
 .lastTab-w {
     width: 100%;
     display: inline-block;
-    padding: 40px 0;
 }
-.headerTab-w {
+
+.headerTab-w, 
+.headerTabEn-w {
     background-color: transparent;
     text-align: right;
     border-bottom: 1px solid #dac4a6;
@@ -14,44 +15,71 @@
     font-weight: bold;
 }
 
+.headerTabEn-w {
+    text-align: left;
+}
+
 
 
 
- .lastTab-w .menuTab-w {
+ .lastTab-w .menuTab-w,
+ .lastTab-w .menuTabEn-w {
     width: 100%;
-    padding: 10px 0;
+    height: 54px;
     background-color: #bda380;
 }
 
-.lastTab-w .menuTab-w ul {
+.lastTab-w .menuTabEn-w {
+    direction: ltr;
+    text-align: left;
+}
+
+.lastTab-w .menuTab-w ul,
+.lastTab-w .menuTabEn-w ul {
     width: 100%;
     display: inline-block;
-    padding: 5px 0;
     text-align: center;
 }
 
- .lastTab-w .menuTab-w ul li {
+ .lastTab-w .menuTab-w ul li,
+ .lastTab-w .menuTabEn-w ul li {
     display: inline-block;
     margin: 0 10px;
-    padding: 0 60px;
-    border-left: 1px solid #fff;
+    padding: 15px 60px;
     cursor: pointer;
     color: #fff;
     text-shadow: 0 0 1px;
+    transition: all 0.5s;
+}
+
+.lastTab-w .menuTab-w ul li:hover,
+.lastTab-w .menuTabEn-w ul li:hover{
+    color: #ccc;
 }
 
-.menuTabContent-w {
+.menuTabContent-w,
+.menuTabContentEn-w {
     width: 100%;
 }
 
-.menuTabContent-w ol {
+.menuTabContentEn-w {
+    direction: ltr;
+}
+
+.menuTabContent-w ol,
+.menuTabContentEn-w ol {
     width: 100%;
     display: block;
     padding: 0 40px;
     text-align: right;
 }
 
-.menuTabContent-w ol li {
+.menuTabContentEn-w ol {
+    text-align: left;
+}
+
+.menuTabContent-w ol li,
+.menuTabContentEn-w ol li {
     border-bottom: 1px solid #bda380;
     padding: 10px 0;
 }
@@ -84,18 +112,63 @@
     border-left: none;
 }
 
-.pagenation {
+.pagenation,
+.pagenationEn-w {
     width: 100%;
     display: inline-block;
     padding: 20px 0;
     margin: 20px 0;
 }
 
-.pagenation .spanSelect-w {
+
+
+.pagenation .spanSelect-w,
+.pagenationEn-w .spanSelect-w {
     color: #bda380;
 }
 
-.ngx-pagination {
+.pagenationEn-w  {
+    direction: ltr;
+}
+
+.pagenationEn-w .spanSelect-w {
+    float: left;
+}
+
+/* .ngx-pagination {
     text-align: center;
+} */
+
+.contentPage-w {
+    width: 95%;
+    display: block;
+    border-top: 0;
+    margin: 0 auto;
+    padding: 10px 20px;
+    background: rgba(255, 255, 255, 0.5);
 }
 
+
+.active {
+    background-color: #03aa9e !important;
+    color: #bda380;
+}
+
+.englishClass {
+    direction: ltr;
+    text-align: left;
+}
+
+
+
+.ngx-pagination li{
+    background-color: #fff;
+    border: 2px solid #cab599;
+    margin: 0 5px;
+  }
+
+  .ngx-pagination .current {
+    background-color: #ccc !important;
+    border: 2px solid #888;
+    color: #fff;
+  }

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

@@ -1,42 +1,100 @@
-<div class="lastTab-w">
-  <div class="container">
-    <div class="row">
-      <div class="col-12">
+<ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
+  <div class="lastTab-w">
+    <div class="container">
+      <div class="contentPage-w">
+        <div class="row">
+            <div class="col-12">
+      
+              <div class="headerTab-w">
+                  أخر التعاميم
+              </div>
+      
+                  
+              <div class="pagenation">
+                <span class="spanSelect-w">
+                  <select class="form-control selectButton-w" (input)="onGetValue($event)">
+                    <option value="5">5</option>
+                    <option value="10">10</option>
+                    <option value="15">15</option>
+                    <option value="20">20</option>
+                  </select>
+                  من العناصر يتم عرضها
+                </span>
+              </div>
+        
+              <div class="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 tab of data | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }">{{tab.name}}</li>
+                  </ol>
+              </div>
 
-          <div class="headerTab-w">
-              أخر التعاميم
-          </div>
+              <pagination-controls nextLabel="التالي" previousLabel="السابق" (pageChange)="onPageChange($event)"></pagination-controls>
 
               
-          <div class="pagenation">
-            <span class="spanSelect-w">
-              <select class="form-control selectButton-w" (input)="onGetValue($event)">
-                <option value="5">5</option>
-                <option value="10">10</option>
-                <option value="15">15</option>
-                <option value="20">20</option>
-              </select>
-              من العناصر يتم عرضها
-            </span>
-          </div>
+            </div>
+      
+        </div>
+      
+      </div>
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #englishTemplate>
+  <div class="lastTab-w">
+    <div class="container">
+      <div class="contentPage-w">
+        <div class="row">
+
+          <div class="col-12">
     
-          <div class="menuTab-w">
-              <ul class="list-unstyled">
-                  <li (click)="onGetData(0)">التعاميم الداخليه</li>
-                  <li (click)="onGetData(1)">التعاميم الخارجيه</li>
-                  <li (click)="onGetData(2)">السياسات</li>
-              </ul>
-          </div>
+            <div class="headerTab-w"  [className]=" authSer.arabicTemplate ? '' : 'headerTabEn-w' ">
+                Latest circulars
+            </div>
     
-          <div class="menuTabContent-w">
-              <h2 class="text-center" *ngIf="checkShowData">لايوجد بيانات الأن لعرضها</h2>
-              <ol>
-                  <li *ngFor="let tab of data">{{tab.name}}</li>
-              </ol>
-              <!-- <pagination-controls nextLabel="التالي" previousLabel="السابق" (pageChange)="onPageChange($event)"></pagination-controls> -->
+                
+            <div class="pagenation" [className]=" authSer.arabicTemplate ? '' : 'pagenationEn-w' ">
+              <span class="spanSelect-w">
+                <select class="form-control selectButton-w" [className]=" authSer.arabicTemplate ? '' : '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>
+                Items are displayed
+              </span>
+            </div>
+      
+            <div class="menuTab-w" [className]=" authSer.arabicTemplate ? '' : 'menuTabEn-w' ">
+                <ul class="list-unstyled">
+                  <li (click)="onGetData(0)" [ngClass]="{'active': selectedItem == 0}">Internal Circulars</li>
+                  <li (click)="onGetData(1)" [ngClass]="{'active': selectedItem == 1}">External Circulars</li>
+                  <li (click)="onGetData(2)" [ngClass]="{'active': selectedItem == 2}">Policse</li>
+                </ul>
+            </div>
+      
+            <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>
+                </ol>
+                <pagination-controls nextLabel="Next" previousLabel="Prev" (pageChange)="onPageChange($event)"></pagination-controls>
+            </div>
+            
           </div>
-          
+      
         </div>
+      
       </div>
     </div>
-</div>
+  </div>
+</ng-template>

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

@@ -15,12 +15,14 @@ export class CircularsPageComponent implements OnInit {
     private spinner: NgxSpinnerService,
     private internalService: InternalPageService) { }
    
-    count: number;
+    checkShowData: boolean;
+    selectedItem: any = 0 //check تعاميم active class
     perPagePagenation: number = 10;
     dataTableNumber:number = 5;
-    data = [];
-    //p: number[] = [];
+    count: number;
     currentPage:number = 1;
+    data = [];
+
 
     typeCircu:number = 0;
   
@@ -32,6 +34,11 @@ export class CircularsPageComponent implements OnInit {
         this.data = responce['tabs'];
         this.count = responce['count'];
         this.perPagePagenation = responce['per_page'];
+        if(this.data.length > 0) {
+          this.checkShowData = false;
+        } else {
+          this.checkShowData = true;
+        }
         this.spinner.hide();
       },
       (error) => {
@@ -66,6 +73,7 @@ export class CircularsPageComponent implements OnInit {
   onGetData(id) {
     this.spinner.show();
     this.typeCircu = id;
+    this.selectedItem = id;
     this.internalService.getCircularsData(this.currentPage, this.perPagePagenation, id).subscribe(
       (responce) => {
         console.log(responce);

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

@@ -14,7 +14,7 @@
                                 <div *ngIf="i == expandedIndex">  
                                     <div class="containetttt" *ngFor="let field of hospital['fields']">
                                       <ul class="list-unstyled nestedMenu">
-                                        <li (click)="showDescriptionDetails(field)" [className]=" arabicTemplate ? '' : 'achievementsLangHeading-w' ">
+                                        <li (click)="showDescriptionDetails(field)" [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' ">
                                           {{field.title}} 
                                         </li>
                                       </ul>
@@ -34,30 +34,34 @@
             </ng-template>
     
             <ng-template #englishTemplate>
-                <div class="col-6 col-md-3">
-                    <div class="recordsContent-w">
-                        <ul class="list-unstyled">
-                          <li *ngFor="let hospital of hospitalCenters; let i = index" (click)="open(hospital,i)" style="cursor: pointer;">  
-                              <i class="fas fa-sort-up"></i>{{hospital.name_en}}  
-                              <div *ngIf="i == expandedIndex">  
-                                  <div class="containetttt" *ngFor="let field of hospital['fields']">
-                                    <ul class="list-unstyled nestedMenu">
-                                      <li (click)="showDescriptionDetails(field)">
-                                        {{field.title_en}} 
-                                      </li>
-                                    </ul>
-                                  </div>  
-                              </div>                                  
-                          </li>
-                        </ul>
+              <div class="container" style="direction:ltr">
+                <div class="row">
+                    <div class="col-6 col-md-3">
+                        <div class="recordsContent-w">
+                            <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']">
+                                        <ul class="list-unstyled nestedMenu">
+                                          <li (click)="showDescriptionDetails(field)">
+                                            {{field.title_en}} 
+                                          </li>
+                                        </ul>
+                                      </div>  
+                                  </div>                                  
+                              </li>
+                            </ul>
+                        </div>
                     </div>
+                    <div class="col-6 col-md-9">
+                      <div class="information" [className]=" authSer.arabicTemplate ? '' : 'achievementsLang-w' ">
+                        <h2>{{detailsField.title_en}}</h2>
+                        <p>{{detailsField.description_en}}</p>
+                      </div>
+                    </div> 
                 </div>
-                <div class="col-6 col-md-9">
-                  <div class="information" [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
-                    <h2>{{detailsField.title_en}}</h2>
-                    <p>{{detailsField.description_en}}</p>
-                  </div>
-                </div> 
+              </div>
             </ng-template>
             
         </div>

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

@@ -5,7 +5,6 @@ input,button {
 .contentPage-w {
     width: 95%;
     display: block;
-    
     border-top: 0;
     margin: 0 auto;
     padding: 10px 20px;
@@ -271,39 +270,77 @@ input,button {
 
 .slider {
     width: 100%;
-    height: 439px;
+    height: 405px;
     padding: 10px 0;
 }
 
 .slider img {
     width: 100%;
-    height: 430px;
+    height: 405px;
 }
 
 .slider  .extra {
-    color: #e6646e;
+    color: #bea380;
     font-weight: bold;
     font-size: 18px;
     cursor: pointer;
     display: inline-block;
-    /* background-color: #252525; */
-    float: left;
-    /* margin-top: -50px; */
-    /* margin-left: -44px; */
-    opacity: 0.8;
-    /* width: 45px; */
-    /* height: 65px; */
-    /* margin-top: -81px; */
-    padding: 32px 0;
-    font-size: 14px;
+    font-size: 13px;
     position: absolute;
-    /* top: 27px; */
-    /* left: 15px; */
-    bottom: 6px;
-    left: 6px;
+    bottom: 50px;
+    left: 65px;
+    font-weight: bold;
+    cursor: pointer;
+    background-color: #dedede;
+    padding: 5px;
+    transform: all 0.5s;
+}
+
+.slider  .extra:hover {
+    background-color: #03b0b3;
+    color: #fff;
+    font-weight: bold;
+}
+
+
+.carousel-caption {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    color: #fff;
+    text-align: center;
+    height: 160px;
+    background: rgba(0 , 0 , 0 , 0.6);
+}
+
+.carousel-caption h4 {
+    font-size: 18px;
+    color: #bea380;
+    font-weight: 600;
+}
+
+.carousel-caption p{
+    font-size: 16px;
+}
+.carousel-indicators li {
+    position: relative;
+    flex: 0 1 auto;
+    width: 30px;
+    height: 6px;
+    margin-right: 3px;
+    margin-left: 3px;
+    text-indent: -999px;
+    cursor: pointer;
+    background-color: #bda380;
 }
 
 
+
+
 .servicesContent-w {
     width: 100%;
     padding: 0;
@@ -311,19 +348,21 @@ input,button {
 
 .servicesContent-w .serviceItem-w {
     width: 100%;
-    height: 140px;
+    height: 130px;
     padding: 18px 10px;
-    margin: 10px 0;
-    margin-left: -10px;
+    margin: 5px 0;
     color: #fff;
     text-align: center;
-    background: linear-gradient(#dedede,#bda380, #c0a786);;
+    background: linear-gradient(0.5turn,#f1e3cf, #c0a786, #c0a786);
     border-bottom: 4px solid #00a99d;
     transition: all 0.5s;
 }
 
 .servicesContent-w .serviceItem-w:hover {
     border-bottom: 4px solid #efe1ce;
+    background: linear-gradient(0.5turn,#f1e3cf, #c0a786, #c0a786);
+    color: #fff;
+    background: linear-gradient(0.5turn,#ccc, #bda380, #c0a786);
 }
 
 .servicesContent-w .serviceItem-w img {
@@ -335,6 +374,7 @@ input,button {
 
 .servicesContent-w .serviceItem-w p {
     margin-top: 16px;
+    font-size: 14px;
 }
 
 .servicesContent-w .serviceItem-w a {
@@ -345,10 +385,7 @@ input,button {
     transition: all 0.5s;
 }
 
-.servicesContent-w .hyperLink .serviceItem-w:hover{
-    color: #fff;
-    background: radial-gradient(#8c7171, #bda380);
-}
+
 
 .servicesContent-w .hyperLink .serviceItem-w:hover img{
     -webkit-filter: grayscale(100%);
@@ -371,21 +408,35 @@ input,button {
 .eventPart-w .event .now{
     padding: 5px 0;
     color: red;
+    text-align: center;
+    -webkit-animation: floating-text 0.5s ease alternate infinite;
+    -moz-animation: floating-text 0.5s ease alternate infinite;
+     -ms-animation: floating-text 0.5s ease alternate infinite;
+      -o-animation: floating-text 0.5s ease alternate infinite;
+         animation: floating-text 0.5s ease alternate infinite;
 }
 
 .eventPart-w .event .now img{
-    width: 60px;
-    height: 40px;
+    width: 50px;
+    height: 30px;
+    margin-left: 10px;
 }
 
 .eventPart-w .event .now span{
     color: #888;
     padding: 0 10px;
+    font-size: 14px;
 }
 
 .eventPart-w .event .next{
     color: #007A71;
     padding: 10px 0;
+    text-align: center;
+    -webkit-animation: floating-text 0.5s ease alternate infinite;
+    -moz-animation: floating-text 0.5s ease alternate infinite;
+     -ms-animation: floating-text 0.5s ease alternate infinite;
+      -o-animation: floating-text 0.5s ease alternate infinite;
+         animation: floating-text 0.5s ease alternate infinite;
 }
 
 .eventPart-w .event .next img{
@@ -399,12 +450,13 @@ input,button {
 }
 .contentsData-w {
     width: 100%;
-    padding-top: 13px;
+    padding-top: 10px;
 }
 
 .contentsData-w .joinUs-w,
 .contentsData-w .joinUsEn-w{
-    width: 100%;
+    width: 97%;
+    float: left;
     margin-bottom: 20px;
 }
 
@@ -441,8 +493,9 @@ input,button {
 .contentsData-w .joinUs-w .dataContent,
 .contentsData-w .joinUsEn-w .dataContent {
     width: 100%;
-    padding: 30px 15px;
-    min-height: 200px;
+    padding: 20px 15px;
+    height: 200px;
+    overflow-y: auto;
     margin-top: 2px;
     box-shadow: 0 0px 1px #ccc;
 }
@@ -450,12 +503,13 @@ input,button {
 .contentsData-w .joinUs-w .dataContent .joinUs-photo,
 .contentsData-w .joinUsEn-w .dataContent .joinUs-photo {
     width: 100%;
+    height: 120px;
 }
 
 .contentsData-w .joinUs-w .dataContent .joinUs-photo img,
 .contentsData-w .joinUsEn-w .dataContent .joinUs-photo img {
     width: 100%;
-    height: 100px;
+    height: 120px;
     margin: 0 5px;
     border: 1px solid #ccc;
 }
@@ -475,7 +529,6 @@ input,button {
     font-size: 14px;
     font-weight: bold;
     color: #bda380;
-    margin: 10px 0;
 }
 
 .contentsData-w .joinUs-w .dataContent  .profileData-w  p span,
@@ -485,7 +538,8 @@ input,button {
 }
 
 .sharingEvent-w {
-    width: 100%;
+    width: 98%;
+    float: right;
     display: inline-block;
 }
 .sharingEvent-w .sharingHeader-w {
@@ -530,6 +584,25 @@ input,button {
     padding: 30px 0;
 }
 
+.sharingEvent-w .content .eventsTab {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    padding-left: 40px;
+}
+.sharingEvent-w .content .eventsTab li {
+    display: inline-block;
+    padding: 5px;
+    margin: 5px;
+    background-color: #ccc;
+    cursor: pointer;
+    font-size: 14px;
+    width: 15px;
+    height: 15px;
+    color: #fff;
+    border-radius: 50%;
+}
 .sharingEvent-w .content p,
 .sharingEvent-w .content p {
     color: #bda380;
@@ -557,6 +630,7 @@ input,button {
     margin: 10px 0;
 }
 
+
 .secondServices-w .contentSecondSer-w .headerSer-w {
     width: 100%;
     padding: 13px 0;
@@ -632,22 +706,22 @@ input,button {
 
 .tabs .lastTab-w .menuTab-w {
     width: 100%;
-    padding: 5px 0;
-    background-color: #f1f1f1;
+    height: 50px;
+    background-color: #f3f3f3;
 }
 
 .tabs .lastTab-w .menuTab-w ul {
     width: 100%;
     display: inline-block;
-    padding: 5px 0;
+    padding: 0 0;
     text-align: center;
 }
 
 .tabs .lastTab-w .menuTab-w ul li {
     display: inline-block;
     margin: 0 10px;
-    padding: 0 50px;
-    border-left: 1px solid #bda380;
+    padding: 10px 15px;
+    height: 50px;
     cursor: pointer;
     color: #03b0b3;
     text-shadow: 0 0 1px;
@@ -668,7 +742,7 @@ input,button {
 
 .tabs .lastTab-w .menuTabContent-w ol {
     width: 100%;
-    padding: 20px;
+    padding: 10px 20px;
 }
 
 .tabs .lastTab-w .menuTabContent-w ol li {
@@ -701,7 +775,7 @@ input,button {
 .tabs .recods .recordsContent-w {
     width: 100%;
     display: inline-block;
-    min-height: 350px;
+    min-height: 340px;
     border: 1px solid #ccc;
     padding: 0 12px;
 }
@@ -713,11 +787,10 @@ input,button {
 }
 
 .tabs .recods .recordsContent-w ol li {
-    font-size: 15px;
+    font-size: 13px;
     padding: 0 10px;
-    margin: 15px 0;
+    margin: 10px 0;
     border-bottom: 1px solid #ccc;
-    padding-bottom: 13px;
 }
 
 .tabs .recods .recordsContent-w ol li .collapse {
@@ -732,51 +805,40 @@ input,button {
     font-size: 16px;
 }
 
+.allNews {
+    position: absolute;
+    color: #02a99d;
+    cursor: pointer;
+    bottom: 8px;
+    font-weight: bold;
+    left: 15px;
+    cursor: pointer;
+    background-color: #c0a786;
+    padding: 5px;
+    color: #fff;
+    transition: all 0.5s;
+}
 
-@media(max-width:767px) {
-    .backgroundXS {
-        background-color: red;
-    }
-
-    .servicesContent-w .serviceItem-w p{
-        font-size: 12px;
-    }
-
-    .eventPart-w .event {
-        min-height: 55px !important;
-    }
-
-
-
-    .eventPart-w .event .now{
-        text-align: center;
-
-        font-size: 14px;
-        border: 1px solid #ccc;
-        padding: 10px 0;
-    }
+.allNews:hover {
+    background-color: #007A71;
+    color: #fff;
+    font-weight: bold;
+}
 
-    .eventPart-w .event .next{
-        color: #007A71;
-        border-bottom: 1px solid #ccc;
-        padding: 10px 0;
-    }
 
-}
+/* .carousel-caption {
+    position: fixed;
+    right: 15%;
+    bottom: -30px;
+    left: 0;
+    z-index: 10;
+    right: 0;
+    color: #fff;
+    text-align: center;
+} */
 
-@media(min-width:767px) and (max-width:991px) {
-    .backgroundXS {
-        background-color: red;
-    }
 
-    .servicesContent-w .serviceItem-w p{
-        font-size: 12px;
-    }
-    .eventPart-w .event {
-        min-height: 55px !important;
-    }
 
-}
 
 /* english estyle  */
 
@@ -801,8 +863,10 @@ input,button {
 
 .lectureHeading {
     font-size: 15px;
-    padding: 10px 60px;
+    padding: 10px 0;
     cursor: pointer;
+    text-align: center;
+    padding-right: 30px;
 }
 
 .lectureCalenderImg {
@@ -811,17 +875,21 @@ input,button {
     margin: 0 10px;
 }
 
-.paragraphTemplate-w {
-    width: 100%;
-    min-height: 43px;
-    padding: 10px 0;
-    background-color: #252525;
-    opacity: 0.8;
-    color:#fff;
-    margin: 10px 0;
-}
+
 
 @media(max-width: 767px) {
+    .backgroundXS {
+        background-color: red;
+    }
+
+    .servicesContent-w .serviceItem-w p{
+        font-size: 12px;
+    }
+
+    .eventPart-w .event {
+        min-height: 55px !important;
+    }
+
     .tabs .lastTab-w .menuTab-w ul li {
         border-left: 0;
     }
@@ -844,23 +912,46 @@ input,button {
         font-size:14px;
     }
 
+    .paragraphTemplate-w span {
+        color: red;
+        font-weight: bold;
+    }
+
     .eventPart-w {
         width: 100%;
-        height: 220px;
+        height: 200px;
     }
 
     .eventPart-w .event {
         width: 100%;
-        height: 205px;
+        height: 200px;
+
+    }
 
+    .eventPart-w .event .now{
+        text-align: center;
+        font-size: 14px;
+        padding: 10px 0;
+    }
+
+    .eventPart-w .event .next{
+        color: #007A71;
+        border-bottom: 1px solid #ccc;
+        border-top: 1px solid #ccc;
+        padding: 10px 0;
+        text-align: center;
     }
 
     .lectureHeading {
         font-size: 15px;
         text-align: center;
         cursor: pointer;
-        padding: 10px 0;
-        border-bottom: 1px solid #ccc;
+        padding: 0;
+    }
+
+    .contentsData-w .joinUs-w,
+    .contentsData-w .joinUsEn-w {
+        width: 100%;
     }
 
     .contentsData-w .joinUs-w .dataContent,
@@ -875,9 +966,40 @@ input,button {
         margin-bottom: 10px;
     }
 
+    .contentsData-w .joinUsEn-w .dataContent .joinUs-photo img,
+    .contentsData-w .joinUs-w .dataContent .joinUs-photo img{
+        width: 100% !important;
+        margin: 20px auto;
+        display: block;
+    }
+    .contentsData-w .joinUs-w .dataContent  .profileData-w p,
+    .contentsData-w .joinUsEn-w .dataContent  .profileData-w  p {
+        margin: 10px 0;
+    }
+
+    .sharingEvent-w {
+        width: 100%;
+    }
+
+    .secondServices-w .contentSecondSer-w {
+        width: 100%;
+    }
+
+
 }
 
 @media (min-width:767px) and (max-width:991px){
+    .backgroundXS {
+        background-color: red;
+    }
+
+    .servicesContent-w .serviceItem-w p{
+        font-size: 12px;
+    }
+    .eventPart-w .event {
+        min-height: 55px !important;
+    }
+
     .paragraphTemplate-w {
         font-size: 14px
     }
@@ -888,6 +1010,15 @@ input,button {
         height: 220px;
     }
 
+    .secondServices-w .contentSecondSer-w {
+        width: 100%;
+        float: none;
+    }
+    .secondServices-w .contentSecondSer-w {
+        width: 100%;
+        float: none;
+    }
+
     .eventPart-w .event {
         width: 100%;
         height: 205px;
@@ -899,7 +1030,6 @@ input,button {
         text-align: center;
         cursor: pointer;
         padding: 10px 0;
-        border-bottom: 1px solid #ccc;
     }
 
     .eventPart-w .event {
@@ -910,15 +1040,14 @@ input,button {
 
     .eventPart-w .event .now{
         text-align: center;
-
         font-size: 14px;
-        border: 1px solid #ccc;
         padding: 10px 0;
     }
 
     .eventPart-w .event .next{
         color: #007A71;
         border-bottom: 1px solid #ccc;
+        border-top: 1px solid #ccc;
         padding: 10px 0;
         text-align: center;
     }
@@ -938,7 +1067,89 @@ input,button {
     }
     .tabs .lastTab-w .menuTab-w ul li {
         border-left: 0;
-        padding: 0 43px;
+        padding: 0 15px;
     }
 
 }
+
+.actineTab {
+    background-color: #08726a !important;
+    color: #fff !important;
+}
+
+.active {
+    color: #fff !important;
+    background-color: #bda380;
+}
+
+
+@-webkit-keyframes floating-text {
+    0% {  
+      -webkit-transform: translateY(.1em);
+      text-shadow:0 0 .5em rgba(255,255,255,.4),
+        0 0 .2em rgba(0,0,0,.3),
+        0 .3em .2em rgba(0,0,0,.3);
+  
+    }
+    100% {
+      text-shadow:0 0 .5em rgba(255,255,255,.4),
+        0 0 .2em rgba(0,0,0,.3),
+        0 .5em .5em rgba(0,0,0,.3);
+    }
+  }
+  @-moz-keyframes floating-text {
+    0% {  
+      -moz-transform: translateY(.1em);
+      text-shadow:0 0 .5em rgba(255,255,255,.4),
+        0 0 .2em rgba(0,0,0,.3),
+        0 .3em .2em rgba(0,0,0,.3);
+  
+    }
+    100% {
+      text-shadow:0 0 .5em rgba(255,255,255,.4),
+        0 0 .2em rgba(0,0,0,.3),
+        0 .5em .5em rgba(0,0,0,.3);
+    }
+  }
+  @-ms-keyframes floating-text {
+    0% {  
+      -ms-transform: translateY(.1em);
+      text-shadow:0 0 .5em rgba(255,255,255,.4),
+        0 0 .2em rgba(0,0,0,.3),
+        0 .3em .2em rgba(0,0,0,.3);
+  
+    }
+    100% {
+      text-shadow:0 0 .5em rgba(255,255,255,.4),
+        0 0 .2em rgba(0,0,0,.3),
+        0 .5em .5em rgba(0,0,0,.3);
+    }
+  }
+  @-o-keyframes floating-text {
+    0% {  
+      -o-transform: translateY(.1em);
+      text-shadow:0 0 .5em rgba(255,255,255,.4),
+        0 0 .2em rgba(0,0,0,.3),
+        0 .3em .2em rgba(0,0,0,.3);
+  
+    }
+    100% {
+      text-shadow:0 0 .5em rgba(255,255,255,.4),
+        0 0 .2em rgba(0,0,0,.3),
+        0 .5em .5em rgba(0,0,0,.3);
+    }
+  }
+  @keyframes floating-text {
+    0% {  
+      transform: translateY(.1em);
+      text-shadow:0 0 .5em rgba(255,255,255,.4),
+        0 0 .2em rgba(0,0,0,.3),
+        0 .3em .2em rgba(0,0,0,.3);
+  
+    }
+    100% {
+      text-shadow:0 0 .5em rgba(255,255,255,.4),
+        0 0 .2em rgba(0,0,0,.3),
+        0 .5em .5em rgba(0,0,0,.3);
+    }
+  }

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

@@ -1,112 +1,126 @@
 <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" *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 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>
                             </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['photos'][0]" alt="Random first slide">
-                                            <div class="carousel-caption">
-                                            <p class="paragraphTemplate-w" [innerHTML] = "report.description"></p>
-                                            <span class="extra" (click)="onExtraPage(report.id)" *ngIf="report.description">المزيد</span>
-                                            </div>
-                                        </ng-template>
-                                    </ngb-carousel>
+                            <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">
-                    <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" style="margin-left:20px"/>  يعرض الأن :<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 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>
 
-            <div class="contentsData-w">
-                <div class="container">
-                    <div class="row">
-                        <div class="col-12 col-sm-12 col-md-4">
-                            <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-4">
-                                            <div class="joinUs-photo">
-                                                <img src="{{authSer.pathImg + joinUs.photo}}" />
+                <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>
-                                        <div class="col-12 col-md-12 col-lg-8">
-                                            <div class="profileData-w">
-                                                <p>    الموظف :<span>{{joinUs.name}}</span></p>
-                                                <p>   الإداره :<span>{{joinUs.adminstration_name ? joinUs.adminstration_name : 'لايوجد'}}</span></p>
-                                                <p>   التاريخ :<span>{{joinUs.created_at}}</span></p>
+                                            <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>
+                                            </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>
-                            <div class="col-12 col-md-8">
-                            <div class="sharingEvent-w">
-                                <div class="sharingHeader-w">
-                                    <h2>مشاركه اللحظات</h2>
-                                </div>
-                                <div class="row">
-                                    <div class="col-12 col-md-6">
-                                        <div class="congeratolation">
-                                            <h2>التهانى</h2>
-                                        </div>
-                                        <div class="content">
-                                            <p>الموظف : <span>{{congratulations.created_by_name}}</span></p>
-                                            <p class="event">{{congratulations.name}}</p>
-                                            <p>التاريخ : <span>{{congratulations.event_time ? congratulations.event_time : 'لايوجد'}}</span></p>
-                                        </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-6">
-                                        <div class="sadDead-w">
-                                            <h2>التعازى</h2>
+                                    <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>
-                                        <div class="content">
-                                            <p>الموظف : <span>{{condolences.created_by_name}}</span></p>
-                                            <p class="event">{{condolences.name}}</p>
-                                            <p>التاريخ : <span>{{condolences.event_time ? condolences.event_time : 'لايوجد'}}</span></p>
+                                        <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>
                                     </div>
                                 </div>
@@ -114,25 +128,25 @@
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <div class="secondServices-w">
-                <div class="container" style="height:560px; overflow-y:auto">
-                    <div class="row">
-                        <div class="col-12 col-sm-6 col-md-4" *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 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>
-                                          </a>
                                         </div>
                                     </div>
                                 </div>
@@ -140,51 +154,51 @@
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <div class="tabs">
-                <div class="container">
-                    <div class="row">
-                        <div class="col-12 col-md-12 col-lg-8">
-                            <div class="lastTab-w">
-                                <div class="headerTab-w">
-                                    أخر التعاميم
-                                </div>
-                                <div class="menuTab-w">
-                                    <ul class="list-unstyled">
-                                        <li (click)="onGetData(0)">التعاميم الداخليه</li>
-                                        <li (click)="onGetData(1)">التعاميم الخارجيه</li>
-                                        <li (click)="onGetData(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 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>
                             </div>
-                        </div>
-                        <div class="col-12 col-md-12 col-lg-4">
-                            <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 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>
-                                            </div>
-                                        </li>
-                                    </ol>
+                                            </li>
+                                        </ol>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -192,207 +206,219 @@
                 </div>
             </div>
         </div>
-    </div>
 
-</ng-template>
+    </ng-template>
 
 
 
-
-<ng-template #englishTemplate>
-<div class="container">
-  <div class="contentPage-w">
-    <div class="servicesContent-w" style="direction:ltr">
-      <div class="container">
-        <div class="row">
-
-          <div class="col-12 col-md-4 order-2 order-sm-2 order-md-1">
+ <ng-template #englishTemplate>
+    <div class="container">
+    <div class="contentPage-w">
+        <div class="servicesContent-w" style="direction:ltr">
+        <div class="container">
             <div class="row">
-              <div class="col-6 col-md-6" *ngFor="let service of externalServices">
-                  <a class="hyperLink" href="{{service.link}}">
-                      <div class="serviceItem-w">
-                          <img src="{{authSer.pathImg + service.photo}}" />
-                          <p>{{service.name_en}}</p>
-                      </div>
-                  </a>
-              </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">
+                    <a class="hyperLink" href="{{service.link}}">
+                        <div class="serviceItem-w">
+                            <img src="{{authSer.pathImg + service.photo}}" />
+                            <p>{{service.name_en}}</p>
+                        </div>
+                    </a>
+                </div>
+                </div>
             </div>
-          </div>
 
-          <div class="col-12 col-md-8 order-1 order-sm-1 order-md-2">
-            <div class="slider">
-              <ngb-carousel>
-                <ng-template *ngFor="let report of reportsData" ngbSlide>
-                  <img src="{{authSer.pathImg + report.photo}}" alt="Random first slide">
-                  <div class="carousel-caption">
-                    <p class="paragraphTemplate-w" [innerHTML] = "report.description_en"></p>
-                    <a class="extra" (click)="onExtraPage(report.id)">More</a>
-                  </div>
-                </ng-template>
-              </ngb-carousel>
+            <div class="col-12 col-md-8 order-1 order-sm-1 order-md-2">
+                <div class="slider" *ngIf="reportsData.length > 1">
+                <ngb-carousel>
+                    <ng-template *ngFor="let report of reportsData" ngbSlide>
+                    <img src="{{authSer.pathImg + report.photo.photo}}" alt="Random first slide">
+                    <div class="carousel-caption">
+                        <h4>{{report.title_en}}</h4>
+                        <p class="paragraphTemplate-w" [innerHTML] = "report.description_en"></p>
+                        <a class="extra d-none d-sm-none d-md-block" (click)="onExtraPage(report.id)" style="left:15px;">Read More</a>
+                        <span class="allNews d-none d-sm-none d-md-block" (click)="getAllNews()" *ngIf="report.description"> More From News</span>
+                    </div>
+                    </ng-template>
+                </ngb-carousel>
+                </div>
             </div>
-          </div>
 
+            </div>
+        </div>
         </div>
-      </div>
-    </div>
 
-    <div class="eventPart-w" style="direction:ltr">
-      <div class="container">
-        <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" style="margin-left:20px;"/>   Live Now :<span>{{live_event ? live_event.name : ' now event now '}}</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"> Soon :<span>{{next_lecture ? next_lecture.name : 'now event now'}}</span></p>
+        <div class="eventPart-w" style="direction:ltr">
+            <div class="container" style="padding-left: 5px;">
+                <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"/>   Live Now :<span>{{live_event ? live_event.name : ' now event'}}</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"> Soon :<span>{{next_lecture ? next_lecture.name : 'now event'}}</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" /> Lecture Table</p>
+                        </div>
+                    </div>
+                </div>
             </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" /> Lecture Table</p>
-              </div>
-          </div>
         </div>
-      </div>
-    </div>
 
-    <div class="contentsData-w" style="direction:ltr">
-      <div class="container">
-        <div class="row">
-          <div class="col-12 col-sm-12 col-md-4">
-            <div class="joinUs-w"  [className]=" arabicTemplate ? '' : 'joinUsEn-w' ">
-              <div class="joinHeader-w">
-                Join Us
-              </div>
-              <div class="joinHeading-w">
-                <h2>Welcome to join the medical center</h2>
-              </div>
-              <div class="dataContent">
-                <div class="row">
-                  <div class="col-12 col-md-12 col-lg-4">
-                    <div class="joinUs-photo">
-                      <img src="{{authSer.pathImg + joinUs.photo}}" />
+        <div class="contentsData-w" style="direction:ltr">
+        <div class="container" style="padding-left:5px;">
+            <div class="row">
+            <div class="col-12 col-sm-12 col-md-4 editRowPadding-w">
+                <div class="joinUs-w" style="float:right"  [className]="authSer.arabicTemplate ? '' : 'joinUsEn-w' ">
+                    <div class="joinHeader-w">
+                        Join Us
                     </div>
-                  </div>
-                  <div class="col-12 col-md-12 col-lg-8">
-                    <div class="profileData-w">
-                      <p> Employee : <span>{{joinUs.name_en}}</span></p>
-                      <p> Administration : <span>{{joinUs.adminstration_name_en ? joinUs.adminstration_name_en : 'not found'}}</span></p>
-                      <p> Date : <span>{{joinUs.created_at ? joinUs.created_at : 'not found'}}</span></p>
+                    <div class="joinHeading-w">
+                        <h2>Welcome to join the medical center</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> 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>
+                            </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>
             </div>
-          </div>
-          <div class="col-12 col-md-8">
-            <div class="sharingEvent-w">
-              <div class="sharingHeader-w">
-                <h2>Share moments</h2>
-              </div>
-              <div class="row">
-                <div class="col-12 col-md-6">
-                  <div class="congeratolation">
-                    <h2>Congratulations</h2>
-                  </div>
-                  <div class="content">
-                    <p>Employee : <span>{{congratulations.created_by_name}}</span></p>
-                    <p class="event">{{congratulations.name_en}}</p>
-                    <p>Date : <span>{{congratulations.event_time ? congratulations.event_time : 'not found'}}</span></p>
-                  </div>
-                </div>
-                <div class="col-12 col-md-6">
-                  <div class="sadDead-w">
-                    <h2>Condolences</h2>
-                  </div>
-                  <div class="content">
-                    <p>Empolyee : <span>{{condolences.created_by_name}}</span></p>
-                    <p class="event">{{condolences.name_en}}</p>
-                    <p>Date : <span>{{condolences.event_time ? condolences.event_time : 'not found'}}</span></p>
-                  </div>
+            <div class="col-12 col-md-8 editRowPadding-w">
+                <div class="sharingEvent-w"  style="float:left">
+                    <div class="sharingHeader-w">
+                        <h2>Share moments</h2>
+                    </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>
+                        <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>
+                    </div>
                 </div>
-              </div>
             </div>
-          </div>
 
 
-          <div class="secondServices-w">
-                  <div class="container" style="height:560px; overflow-y:auto">
-                      <div class="row">
-                          <div class="col-12 col-sm-6 col-md-4" *ngFor="let ser of internalServices">
-                              <div class="contentSecondSer-w">
-                                  <div class="headerSer-w">
-                                      {{ser.name_en}}
-                                  </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']">
+            <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="contentSecondSer-w" style="float:left;">
+                                <div class="headerSer-w">
+                                    {{ser.name_en}}
+                                </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_en ? field.name_en : 'إضافه خدمه'}}</p>
-                                              </div>
+                                            <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>
-                                          </div>
-                                      </div>
-                                  </div>
-                              </div>
-                          </div>
-                      </div>
-                  </div>
-              </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
 
-         <div class="tabs">
-            <div class="container">
-              <div class="row">
-                <div class="col-12 col-md-8">
-                  <div class="lastTab-w">
-                    <div class="headerTab-w">
-                        Latest Circulars
+            <div class="tabs">
+                <div class="container" style="float-left:5px;">
+                <div class="row">
+                    <div class="col-12 col-md-8 editRowPadding-w">
+                    <div class="lastTab-w">
+                        <div class="headerTab-w">
+                            Latest Circulars
+                        </div>
+                        <div class="menuTab-w">
+                        <ul class="list-unstyled">
+                            <li (click)="onGetData(0)" [ngClass]="{'active': selectedItem == 0}"> Internal Circulars</li>
+                            <li (click)="onGetData(1)" [ngClass]="{'active': selectedItem == 1}">External Circulars</li>
+                            <li (click)="onGetData(2)" [ngClass]="{'active': selectedItem == 2}">Policies</li>
+                        </ul>
+                        </div>
+                        <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>
+                        </ol>
+                        <button class="btn btn-primary" (click)="onPageCir()" style="margin:0 auto; display:block; background-color:#bda380; width:150px; border:none;">more</button>
+                        </div>
                     </div>
-                    <div class="menuTab-w">
-                      <ul class="list-unstyled">
-                          <li (click)="onGetData(0)"> Internal Circulars</li>
-                          <li (click)="onGetData(1)">External Circulars</li>
-                          <li (click)="onGetData(2)">Policies</li>
-                      </ul>
                     </div>
-                    <div class="menuTabContent-w">
-                      <h2 class="text-center" *ngIf="checkShowData"> no data to show , now </h2>
-                      <ol [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
-                          <li *ngFor="let data of tabsData">{{data.name_en}}</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 class="col-12 col-md-4 editRowPadding-w">
+                    <div class="recods">
+                        <div class="headerRecords-w">
+                            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>
+                                    </div>
+                                </div>
+                            </li>
+                            </ol>
+                        </div>
+                    </div>
                     </div>
-                  </div>
                 </div>
-                <div class="col-12 col-md-4">
-                  <div class="recods">
-                      <div class="headerRecords-w">
-                          General Statistics - Achievements
-                      </div>
-                      <div class="recordsContent-w">
-                        <ol [className]=" 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>
-                                  </div>
-                              </div>
-                          </li>
-                        </ol>
-                      </div>
-                  </div>
                 </div>
-              </div>
             </div>
-          </div>
+            </div>
+        </div>
         </div>
-      </div>
+     </div>
     </div>
-  </div>
-</div>
 </ng-template>

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

@@ -29,6 +29,7 @@ export class InternalPageContentComponent implements OnInit {
        this.config.wrap = false;
       this.config.keyboard = false;
 
+
      }
 
 
@@ -43,9 +44,34 @@ export class InternalPageContentComponent implements OnInit {
     internalServices = [];
     tabsData = [];
     achievements = [];
+    tabCongaData= {
+      employee_name: '',
+      employee_name_en: '',
+      created_at: '',
+      name: '',
+      name_en: '',
+    };
+    tabSadData = {
+      employee_name: '',
+      employee_name_en: '',
+      created_at: '',
+      name: '',
+      name_en: ''
+    };
+    
+    joinTabData = {
+      name: '',
+      name_en: '',
+      adminstration_name: '',
+      adminstration_name_en: '',
+      date_of_employment_hij: '',
+      photo: '',
+    };
+
     checkShowData: boolean;
     tabtype:number = 0;
     expandedIndex:number;
+    selectedItem: any = 0 //check تعاميم active class
     live_event = [];
     next_lecture = [];
     myInnerHeight = window.innerHeight;
@@ -85,10 +111,11 @@ export class InternalPageContentComponent implements OnInit {
       (responce) => {
         console.log('responxce', responce);
         this.reportsData = responce['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,60);
-            this.reportsData[i].description_en = this.reportsData[i].description_en.substr(0,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';
           }
         }
       },
@@ -111,7 +138,10 @@ export class InternalPageContentComponent implements OnInit {
     this.internalService.getJoinUsData().subscribe(
       (responce) => {
         console.log('joooin us', responce);
-        this.joinUs = responce['user'];
+        this.joinUs = responce['users'];
+        console.log(this.joinUs);
+        this.showJoinData(this.joinUs[0]);
+        console.log('zzzzzzzzzzzzzzzzzz', this.showJoinData);
       },
       (error) => {
         console.log(error);
@@ -120,7 +150,8 @@ export class InternalPageContentComponent implements OnInit {
 
     this.internalService.getCongatoration().subscribe(
       (responce) => {
-        this.congratulations = responce['event'];
+        this.congratulations = responce['events'];
+        this.showTabData(this.congratulations[0], 'wedding');
       },
       (error) => {
         console.log(error);
@@ -129,7 +160,8 @@ export class InternalPageContentComponent implements OnInit {
 
     this.internalService.getCondolences().subscribe(
       (responce) => {
-        this.condolences = responce['event'];
+        this.condolences = responce['events'];
+        this.showTabData(this.condolences[0], 'sad');
       },
       (error) => {
         console.log(error);
@@ -185,6 +217,7 @@ export class InternalPageContentComponent implements OnInit {
 
 
   onGetData(numberTab) {
+    this.selectedItem = numberTab;
     this.spinner.show();
     this.tabsData = [];
     this.tabtype = numberTab;
@@ -229,6 +262,66 @@ export class InternalPageContentComponent implements OnInit {
     this.router.navigate(['InternalPage/events']);
   }
 
+  showTabData(tab, typeTab) {
+    console.log(tab);
+    if(typeTab == 'wedding') {
+      
+      this.tabCongaData = {
+        employee_name : tab.employee_name,
+        employee_name_en: tab.employee_name_en,
+        created_at: tab.created_at,
+        name: tab.name,
+        name_en: tab.name_en,
+
+      };
+      for(let i = 0 ; i < this.congratulations.length; i++) {
+        if(this.congratulations[i].id == tab.id) {
+          this.congratulations[i].active = 1;
+        } else {
+          this.congratulations[i].active = 0;
+        }
+      }
+    } else if(typeTab == 'sad') {
+      this.tabSadData = {
+        employee_name : tab.employee_name,
+        employee_name_en: tab.employee_name_en,
+        created_at: tab.created_at,
+        name: tab.name,
+        name_en: tab.name_en
+      };
+      for(let i = 0 ; i < this.condolences.length; i++) {
+        if(this.condolences[i].id == tab.id) {
+          this.condolences[i].active = 1;
+        } else {
+          this.condolences[i].active = 0;
+        }
+      }
+    }
+    
+  }
+
+  showJoinData(join){
+    this.joinTabData = {
+      name : join.name,
+      name_en: join.name_en,
+      adminstration_name: join.adminstration_name,
+      adminstration_name_en: join.adminstration_name,
+      date_of_employment_hij: join.date_of_employment_hij,
+      photo: join.photo,
+    };
+    for(let i = 0 ; i < this.joinUs.length; i++) {
+      if(this.joinUs[i].id == join.id) {
+        this.joinUs[i].active = 1;
+      } else {
+        this.joinUs[i].active = 0;
+      }
+    }
+  }
+
+  getAllNews() {
+    this.router.navigate(['InternalPage/newpages/']);
+  }
+
 
 
 

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

@@ -19,9 +19,22 @@ input,button {
 
 .internalHeader-w .login  {
     color: #00a99d;
-    cursor: pointer;
     text-align: right;
     padding: 0 40px;
+    margin: 5px 0;
+}
+
+
+
+.internalHeader-w .login a {
+    transition: all 0.5s;
+    cursor: pointer;
+}
+
+
+.internalHeader-w .login a:hover {
+    color: #fff;
+    font-weight: bold;
 }
 
 .internalHeader-w .notificationList-w li {
@@ -53,10 +66,15 @@ input,button {
 .internalHeader-w input[type='text'] {
     background-color: #fff;
     border: none;
-    color: #ccc;
+    color: #888;
     padding: 0 5px;
     height: 30px;
     margin-top: 2px;
+    transition: all 0.5s;
+}
+
+.internalHeader-w input[type='text']:focus {
+    border: 2px solid #00a99d;
 }
 
 .internalHeader-w .searchBtn {
@@ -116,7 +134,6 @@ input,button {
 
 .logoHeader-w .rightLogo-w {
     text-align: right;
-    margin-right: 27px;
 }
 
 .logoHeader-w .rightLogo-w img {
@@ -272,6 +289,11 @@ input,button {
 .pagesHeader-w .parentName-w {
     margin: 9px 5px;
     display: inline-block;
+    transition: all 0.5s;
+}
+
+.pagesHeader-w .parentName-w:hover {
+    color: #09d4c5;
 }
 
 .navbar {
@@ -385,6 +407,10 @@ input,button {
     font-weight: bold;
 }
 
+.homeBtn:hover {
+    background-color: #d8cdbd !important;
+}
+
 
 @media(max-width: 767px) {
     .tabs .lastTab-w .menuTab-w ul li {
@@ -418,11 +444,11 @@ input,button {
     }
 
     .internalHeader-w .login {
-        margin-top: 6px;
+        margin-top: 8px;
         color: #00a99d;
         cursor: pointer;
         text-align: right;
-        padding: 0 20px;
+        padding: 0 9px;
         font-size: 13px;
     }
 
@@ -507,4 +533,4 @@ input,button {
     .buttonW {
         margin-right: 0;
     }
-}
+}

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

@@ -19,7 +19,7 @@
                         <!-- <li><span><i class="fas fa-comments"></i></span></li>
                         <li><span><i class="fas fa-bell"></i></span></li> -->
                     </ul>
-                    <p *ngIf="authSer.isAuthenticated()" class="login" (click)="onLogin()"><a>تسجيل دخول </a></p>
+                    <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">
                     <div class="form-group" style="display:flex;text-align:center; justify-content:center">
@@ -66,18 +66,17 @@
         <div class="container">
             <div class="row">
                 <div class="navbar" style="padding:0">
+                    <!-- start navbar mobile -->
                     <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>
+                            <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>
-                                        <!-- <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" /> -->
+                                        <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>
-                                        <!-- <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" /> -->
+                                        <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">
@@ -94,9 +93,12 @@
                                 </div>
                         </div>
                     </div>
+                    <!-- end navbar mobile -->
 
-                    <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">الرئيسيه</span></a>
+                    <!-- 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%">
+                        <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">
@@ -104,8 +106,9 @@
                             <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}} </span> </a>
-                            <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" />
+                            <a href="{{parent.link}}" style="text-decoration:none"> <span class="parentName-w"> {{parent.name}} </span>
+                                <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" />
+                            </a>
                             <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
                         </button>
                         <div class="dropdown-content" *ngIf="parent['childs'].length > 0">
@@ -120,6 +123,7 @@
                             </div>
                         </div>
                     </div>
+                    <!-- end large screen navbar -->
                 </div>
             </div>
         </div>
@@ -147,7 +151,7 @@
                         <!-- <li><span><i class="fas fa-comments"></i></span></li>
                         <li><span><i class="fas fa-bell"></i></span></li> -->
                     </ul>
-                    <p *ngIf="authSer.isAuthenticated()" class="login" (click)="onLogin()"><a>LOG IN</a></p>
+                    <p *ngIf="authSer.isAuthenticated()" class="login"><a (click)="onLogin()">LOG IN</a></p>
                 </div>
                 <div class="col-5 col-sm-5 col-md-4 col-lg-4 backgroundXS">
                     <div class="form-group" style="display:flex;text-align:center; justify-content:center">
@@ -229,8 +233,10 @@
                             <span class="parentName-w"> {{parent.name_en}}  <i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i></span>
                         </button>
                         <button class="dropbtn" *ngIf="parent['childs'].length == 0">
-                            <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" [className]=" arabicTemplate ? '' : 'activeLanguageIcon' " />
-                            <a href="{{parent.link}}" style="text-decoration:none"><span class="parentName-w"> {{parent.name_en}} </span> </a>
+                            <a href="{{parent.link}}" style="text-decoration:none">
+                                <img class="iconMenu" src="{{authSer.pathImg + parent.photo}}" [className]=" arabicTemplate ? '' : 'activeLanguageIcon' " />
+                                <span class="parentName-w"> {{parent.name_en}} </span> 
+                            </a>
                             <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
                         </button>
                         <div class="dropdown-content" *ngIf="parent['childs'].length > 0">

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

@@ -1,3 +1,4 @@
+import { NewsPagesComponent } from './news-pages/news-pages.component';
 import { NewsPageComponent } from './news-page/news-page.component';
 import { InternalPageService } from './../shared/internal-page.service';
 import { InternalPageRoutingModule } from './internal-routing-module';
@@ -10,12 +11,15 @@ import { InternalPageContentComponent } from './internal-page-content/internal-p
 import { HospitalContentComponent } from './hospital-content/hospital-content.component';
 import { CollapsibleModule } from 'angular2-collapsible'; // <-- import the module
 import { CircularsPageComponent } from './circulars-page/circulars-page.component';
-import {NgxPaginationModule} from 'ngx-pagination';
 import { EventsComponent } from '../Internal-Page/events/events.component'; // <-- import the module
 import { FlatpickrModule } from 'angularx-flatpickr';
 import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 import { FormsModule } from '@angular/forms';
+import {NgxPaginationModule} from 'ngx-pagination';
+import { JwSocialButtonsModule } from 'jw-angular-social-buttons';
+import { CeiboShare } from 'ng2-social-share';
+
 
 @NgModule({
     declarations: [
@@ -26,12 +30,15 @@ import { FormsModule } from '@angular/forms';
         NewsPageComponent,
         CircularsPageComponent,
         EventsComponent,
+        NewsPagesComponent,
+        CeiboShare,
     ],
     imports: [
         CommonModule,
         InternalPageRoutingModule,
         CollapsibleModule,
         NgxPaginationModule,
+        JwSocialButtonsModule,
         NgbModule.forRoot(),
         FlatpickrModule.forRoot(),
         CalendarModule.forRoot({

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

@@ -37,7 +37,7 @@ export class InternalPageComponent implements OnInit {
     // expandedIndex:number;
     // live_event = [];
     // next_lecture = [];
-   myInnerHeight = window.innerHeight;
+    myInnerHeight = window.innerHeight;
    externalServices = [];
 
 

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

@@ -1,3 +1,4 @@
+import { NewsPagesComponent } from './news-pages/news-pages.component';
 import { CircularsPageComponent } from './circulars-page/circulars-page.component';
 import { NewsPageComponent } from './news-page/news-page.component';
 import { InternalPageContentComponent } from './internal-page-content/internal-page-content.component';
@@ -17,6 +18,7 @@ const internalPageRoutes: Routes = [
         {path: 'home', component: InternalPageContentComponent},
         {path:'circulars', component: CircularsPageComponent},
         {path: 'events', component: EventsComponent},
+        {path: 'newpages', component: NewsPagesComponent},
         {path: 'news/:reportId', component: NewsPageComponent},
         {path: ':typePage', component: HospitalContentComponent},
     ]},

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

@@ -1,7 +1,6 @@
 .news {
     width: 100%;
     display: inline-block;
-    padding: 40px 0;
 }
 
 .news h2 {
@@ -15,6 +14,7 @@
 .image {
     width: 100%;
     height: 300px;
+    margin: 10px 0;
     border: 1px slid #000;
 }
 
@@ -38,7 +38,6 @@
 
 .achievementsLang-w {
     width: 100%;
-    height: 300px;
     text-align: left;
 }
 
@@ -54,4 +53,86 @@
     margin:  40px 0;
     color: #bda380;
     font-weight: bold;
+}
+
+
+.contentPage-w {
+    width: 95%;
+    display: block;
+    border-top: 0;
+    margin: 0 auto;
+    margin-bottom: 20px;
+    padding: 10px 20px;
+    background: rgba(255, 255, 255, 0.5);
+}
+
+.saredLinks-w {
+    width: 50%;
+    float: left;
+    display: inline-block;
+    padding: 10px 0;
+}
+
+.saredLinks-w li {
+    display: inline-block;
+    margin: 0 5px;
+}
+
+.saredLinks-w li button {
+    width: 30px;
+    height: 30px;
+    background-color: transparent;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    transition: all 0.5s;
+}
+
+.saredLinks-w li button:hover {
+    transform: rotate(180deg);
+}
+
+.saredLinks-w li .facebook {
+    background-color: blue;
+}
+
+.saredLinks-w li .twitter {
+    background-color: #2ecde6;
+}
+
+.saredLinks-w li .linkedin {
+    background-color: #007bff;
+}
+
+.saredLinks-w li .googleplus {
+    background-color: #bb0b0b;
+}
+
+.saredLinks-w li .whatsapp{
+    background-color: green;
+}
+
+.saredLinks-w li .whatsapp a {
+    color: #fff;
+    text-decoration: none;
+}
+
+@media(max-width:767px) {
+    .news h2 {
+        font-size: 11px;
+        margin: 10px 0;
+    }
+    .saredLinks-w li button{
+        margin: 5px 0;
+    }
+}
+
+@media(min-width:767px) and (max-width: 991px) {
+    .news h2 {
+        font-size: 11px;
+        margin: 10px 0;
+    }
+    .saredLinks-w li button{
+        margin: 5px 0;
+    }
 }

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

@@ -1,44 +1,93 @@
 <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">    
-  <div class="news">
-      <div class="container">
-        <div class="row">
-          <div class="col-12">
-            <h2 class="reporTitle-w">{{newsData.title}}</h2>
-          </div>
-          <div class="col-12">
-            <div class="image">
-              <img src="{{authSer.pathImg + newsData.photo}}"/>
-            </div>
-          </div>
-          <div class="col-12">
-            <div class="description">
-                <p [innerHTML]="newsData.description"></p>
+  <div class="news" [style.min-height.px]="myInnerHeight">
+      <div class="contentPage-w">
+        <div class="container">
+            <div class="row">
+              <div class="col-12">
+                <h2 class="reporTitle-w">{{newsData.title}}</h2>
+              </div>
+              <div class="col-12 col-sm-6 col-md-6">
+                <div class="image" *ngIf="image0.photo != ''">
+                  <img src="{{authSer.pathImg + image0['photo'][0].photo}}"/>
+                </div>
+              </div>
+              <div class="col-12">
+                <div class="row">
+                  <div class="col-12 col-sm-12 col-md-6">
+                   <h2  style="color:#00a99d;width:40%;font-size:17px;float:right; margin:17px 0;">{{newsData.created_at}}</h2>
+                   <ul class="list-unstyled saredLinks-w">
+                      <li><button class="facebook" ceiboShare  [facebook]="{u: repoUrl}"><i class="fab fa-facebook-f"></i></button></li>
+                      <li><button class="linkedin" ceiboShare  [linkedIn]="{url:repoUrl}"><i class="fab fa-linkedin-in"></i></button></li>
+                      <li><button class="googleplus" ceiboShare  [googlePlus]="{url:repoUrl}"><i class="fab fa-google-plus-g"></i></button></li>
+                      <li> <button class="whatsapp"> <a href="{{'http://example.org/?test=' + url}}"><i class="fab fa-whatsapp"></i></a></button></li>
+                      <li><button class="twitter" ceiboShare  [twitter]="{url:repoUrl, text:'Checkout this awesome ng2 social share directive', hashtags:'angular2, social, ceiboIT'}"><i class="fab fa-twitter"></i></button></li>
+                    </ul>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-6">
+                   
+                  </div>
+                </div>
+              </div>
+              <div class="col-12">
+                <div class="description">
+                  <h3>{{newsData.title}}</h3>
+                    <p [innerHTML]="newsData.description"></p>
+                </div>
+              </div>
+              <div class="col-12 col-sm-6" *ngFor="let img of newsData['photos'] | slice:1;let i = index; ">
+                  <div class="image">
+                      <img src="{{authSer.pathImg + img.photo}}"/>
+                  </div>
+              </div>
+    
             </div>
           </div>
-        </div>
       </div>
     </div>
 </ng-template>
 
 
 <ng-template #englishTemplate>
-    <div class="news">
+    <div class="news" [style.min-height.px]="myInnerHeight">
         <div class="container">
-          <div class="row">
-            <div class="col-12">
-              <h2 class="reporTitle-w" [className]=" arabicTemplate ? '' : 'achievementsLangHeading-w' ">{{newsData.title_en}}</h2>
-            </div>
-            <div class="col-12">
-              <div class="image">
-                <img src="{{authSer.pathImg + newsData.photo}}"/>
-              </div>
+            <div class="contentPage-w">
+                <div class="row">
+                    <div class="col-12">
+                      <h2 class="reporTitle-w" [className]="authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' ">{{newsData.title_en}}</h2>
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+                      
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-6 col-lg-6" *ngIf="image0.photo != ''">
+                      <div class="image">
+                        <img src="{{authSer.pathImg + image0['photo'][0].photo}}"/>
+                      </div>
+                    </div>
+                    <div class="col-12">
+                        <div class="row">
+                          <div class="col-12 col-sm-12 col-md-6">
+                          
+                          </div>
+                          <div class="col-12 col-sm-12 col-md-6">
+                           <h2  style="color:#00a99d;width:40%;font-size:17px;float:right; margin:17px 0;">{{newsData.created_at}}</h2>
+                           <ul class="list-unstyled saredLinks-w">
+                              <li><button class="facebook" ceiboShare  [facebook]="{u: repoUrl}"><i class="fab fa-facebook-f"></i></button></li>
+                              <li><button class="linkedin" ceiboShare  [linkedIn]="{url:repoUrl}"><i class="fab fa-linkedin-in"></i></button></li>
+                              <li><button class="googleplus" ceiboShare  [googlePlus]="{url:repoUrl}"><i class="fab fa-google-plus-g"></i></button></li>
+                              <li> <button class="whatsapp"> <a href="{{'http://example.org/?test=' + url}}"><i class="fab fa-whatsapp"></i></a></button></li>
+                              <li><button class="twitter" ceiboShare  [twitter]="{url:repoUrl, text:'Checkout this awesome ng2 social share directive', hashtags:'angular2, social, ceiboIT'}"><i class="fab fa-twitter"></i></button></li>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                    <div class="col-12">
+                      <div class="description" [className]="authSer.arabicTemplate ? '' : 'achievementsLang-w' ">
+                          <h3>{{newsData.title_en}}</h3>
+                          <p [innerHTML]="newsData.description_en"></p>
+                      </div>
+                    </div>
+                  </div>
             </div>
-            <div class="col-12">
-              <div class="description" [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
-                  <p [innerHTML]="newsData.description_en"></p>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
 </ng-template>

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

@@ -3,15 +3,17 @@ import { ActivatedRoute, Params } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
 import { InternalPageService } from '../../shared/internal-page.service';
 import { NgxSpinnerService } from 'ngx-spinner';
+import { CeiboShare } from 'ng2-social-share';
 
 
 @Component({
   selector: 'app-news-page',
   templateUrl: './news-page.component.html',
-  styleUrls: ['./news-page.component.css']
+  styleUrls: ['./news-page.component.css'],
 })
 export class NewsPageComponent implements OnInit {
-
+  public repoUrl = '';
+  public imageUrl = '';
   constructor(private route: ActivatedRoute, 
     private authSer:AuthServiceService, 
     private spinner: NgxSpinnerService,
@@ -19,24 +21,35 @@ export class NewsPageComponent implements OnInit {
   
   newsId: number;
   newsData = [];
+  checkLength:boolean = false;
+  myInnerHeight = window.innerHeight;
+  image0 = {
+    photo: ''
+  }
 
+  urlShare: string = '';
 
   ngOnInit() {
 
   this.spinner.show();
-  
+    
     this.route.params.subscribe(
       (params: Params) => {
         this.newsId = params['reportId'];
       }
     );
 
-
+    this.repoUrl = this.authSer.pathApi + '/get_report/' + this.newsId;
     //get news data 
     this.internalService.getNewsData(this.newsId).subscribe(
       (responce) => {
         console.log(responce);
         this.newsData = responce['report'];
+        this.image0 = {
+          photo: this.newsData['photos'].splice( this.newsData['photos'][0].photo , 1)
+        }
+        console.log(this.image0);
+        console.log(this.newsData);
         this.spinner.hide();
       },
       (error) => {

src/app/Internal-Page/news-pages/news-pages.component.css

@@ -0,0 +1,70 @@
+.newsPages-w{
+    width: 100%;
+    display: inline-block;
+}
+
+.newContent {
+    width: 100%;
+    padding: 20px 0;
+    display: inline-block;
+    border-bottom: 1px solid #ccc;
+}
+
+.imgNew-w {
+    width: 100%;
+    height: 200px;
+}
+
+.imgNew-w img {
+    width: 100%;
+    height: 200px;
+}
+
+.content {
+    width: 100%;
+    text-align: right;
+}
+
+.content h1{
+    font-size: 20px;
+    color: #888;
+}
+
+.content p {
+    color: #bda380;
+    font-size: 18px;
+    margin: 10px 0;
+    cursor: pointer;
+}
+
+.content p span {
+    color: red;
+    font-weight: bold;
+}
+
+.englishContent-w {
+    direction: ltr;
+    padding: 40px 0;
+}
+
+.englishContent-w h1 {
+    font-size: 20px;
+    color: #888;
+}
+
+englishContent-w p {
+    color: #bda380;
+    font-size: 18px;
+    margin: 10px 0;
+    cursor: pointer;
+}
+
+.contentPage-w {
+    width: 95%;
+    display: block;
+    border-top: 0;
+    margin: 0 auto;
+    margin-bottom: 20px;
+    padding: 10px 20px;
+    background: rgba(255, 255, 255, 0.5);
+}

src/app/Internal-Page/news-pages/news-pages.component.html

@@ -0,0 +1,58 @@
+<ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">    
+  <div class="newsPages-w" [style.min-height.px]="myInnerHeight">
+      <div class="container">
+          <div class="contentPage-w">
+            <div class="row">
+              <div class="col-12 col-sm-12 col-md-10" *ngFor="let report of dataPagesNews | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }">
+                <div class="newContent">
+                  <div class="row">
+                    <div class="col-12 col-sm-12 col-md-4">
+                      <div class="imgNew-w">
+                        <img src="{{authSer.pathImg + report.photo.photo}}" />
+                      </div>
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-8">
+                      <div class="content">
+                        <h1>{{report.title}}</h1>
+                        <p [innerHTML]="report.description"  (click)="onGetNew(report.id)"></p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <pagination-controls nextLabel="التالي" previousLabel="السابق" (pageChange)="onPageChange($event)"></pagination-controls>
+      </div>
+
+    </div>
+</ng-template>
+
+
+<ng-template #englishTemplate>
+    <div class="newsPages-w" [style.min-height.px]="myInnerHeight"  [className]="authSer.arabicTemplate ? '' : 'englishContent-w' ">
+        <div class="container">
+          <div class="contentPage-w">
+              <div class="row">
+                <div class="col-12 col-sm-12 col-md-10" *ngFor="let report of dataPagesNews | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }">
+                  <div class="newContent">
+                    <div class="row">
+                      <div class="col-12 col-sm-12 col-md-4">
+                        <div class="imgNew-w">
+                            <img src="{{authSer.pathImg + report.photo.photo}}" />
+                        </div>
+                      </div>
+                      <div class="col-12 col-sm-12 col-md-8">
+                        <h1>{{report.title_en}}</h1>
+                        <p [innerHTML]="report.description_en" (click)="onGetNew(report.id)"></p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+          </div>
+          <pagination-controls nextLabel="Next" previousLabel="Prev" (pageChange)="onPageChange($event)"></pagination-controls>
+        </div>
+      </div>
+</ng-template>
+

src/app/Internal-Page/news-pages/news-pages.component.ts

@@ -0,0 +1,73 @@
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+@Component({
+  selector: 'app-news-pages',
+  templateUrl: './news-pages.component.html',
+  styleUrls: ['./news-pages.component.css']
+})
+export class NewsPagesComponent implements OnInit {
+
+  constructor(private http: HttpClient, 
+    private authSer: AuthServiceService,
+    private spinner: NgxSpinnerService, 
+    private router: Router) { }
+
+  myInnerHeight = window.innerHeight;
+
+  dataPagesNews= [];
+  perPagePagenation: number = 10;
+  count: number;
+  currentPage:number = 1;
+
+  ngOnInit() {
+    this.spinner.show();
+    console.log(this.authSer.pathImg);
+    this.http.get(this.authSer.pathApi + '/reports_list_gate/' + this.currentPage + '/' + this.perPagePagenation + '/internal').subscribe(
+      (responce) => {
+        console.log(responce);
+        this.dataPagesNews = responce['reports'];
+        this.count = responce['count'];
+        for(let i = 0 ; i < this.dataPagesNews.length ; i++) {
+          if(this.dataPagesNews[i].description.length > 60) {
+            this.dataPagesNews[i].description = this.dataPagesNews[i].description.substring(0,200) + '........' ;
+            this.dataPagesNews[i].description_en = this.dataPagesNews[i].description_en.substring(0,200) + '......';
+          }
+        }
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);      
+      }
+    )
+  }
+
+      // /change page 
+      onPageChange(pagenationNumber) {
+        this.spinner.show();
+        this.http.get(this.authSer.pathApi + '/reports_list_gate/' + this.currentPage + '/' + this.perPagePagenation + '/internal').subscribe(
+          (responce) => {
+            console.log(responce);
+            this.dataPagesNews = responce['reports'];
+            this.count = responce['count'];
+            for(let i = 0 ; i < this.dataPagesNews.length ; i++) {
+              if(this.dataPagesNews[i].description.length > 60) {
+                this.dataPagesNews[i].description = this.dataPagesNews[i].description.substring(0,200) + '........' ;
+                this.dataPagesNews[i].description_en = this.dataPagesNews[i].description_en.substring(0,200) + '......';
+              }
+            }
+          },
+          (error) => {
+            console.log(error);      
+          }
+        )
+      };
+
+  onGetNew(id) {
+    this.router.navigate(['InternalPage/news/' + id])
+  }
+
+}

src/app/app.module.ts

@@ -1,3 +1,4 @@
+import { ExternalPageModule } from './External-Page/external-page.module';
 import { FooterComponent } from './dashboard/main-footer/footer.component';
 import { HeaderComponent } from './dashboard/header/header.component';
 
@@ -97,6 +98,9 @@ import { ShortenPipe } from './shorten.pipe';
 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 { CeiboShare } from 'ng2-social-share';
+
 
 @NgModule({
   declarations: [
@@ -150,6 +154,7 @@ import { BootstrapModalModule } from 'ngx-modialog/plugins/bootstrap';
     AddJoinUsComponent,
     ShortenPipe,
     HigriDateComponent,
+    //CeiboShare,
   ],
   imports: [
     BrowserModule,
@@ -158,6 +163,7 @@ import { BootstrapModalModule } from 'ngx-modialog/plugins/bootstrap';
     HttpModule,
     HttpClientModule,
     InternalPageModule,
+    ExternalPageModule,
     AppRoutingModule,
     SlideMenuModule,
     NgxSpinnerModule,
@@ -166,6 +172,7 @@ import { BootstrapModalModule } from 'ngx-modialog/plugins/bootstrap';
     AlifeFileToBase64Module,
     BrowserAnimationsModule,  // <-- include required BrowserAnimationsModule
     CollapsibleModule,
+    JwSocialButtonsModule,
     ModalModule.forRoot(),
     BootstrapModalModule,
     ToastrModule.forRoot(), // ToastrModule added

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

@@ -72,7 +72,7 @@ input,select {
     width: 30px;
     font-size: 16px;
     font-weight: 700;
-    color: #252525;
+    color: red;
     display: inline-block;
     border-radius: 0 0 20px 20px;
     position: absolute;
@@ -81,7 +81,7 @@ input,select {
     top: 10px;
     left: 10px;
     cursor: pointer;
-    background: transparent;
+    background: #fff;
     border: 1px solid #ccc;
     transition: all 0.5s;
 }

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

@@ -90,6 +90,7 @@
                       <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>
                     </div>
                   </div>
                 </div>

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

@@ -182,6 +182,23 @@ export class AddNewsComponent implements OnInit {
   }
  }
 
+ deleteImg(index, data) {
+   if(this.typeMode) {
+    this.images.splice(index , 1);
+    this.http.get(this.authSer.pathApi + '/delete_report_photo/' + data.id).subscribe(
+      (responce) => {
+        console.log(responce);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+   } else {
+     this.images.splice(index,1);
+   }
+ 
+ }
+
 
 
   //submitted form

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

@@ -42,8 +42,8 @@ export class AuthServiceService {
   showArabicIcon:boolean;
   showEnglishIcon:boolean;
 
-  pathApi: string = 'http://hospital.rabbittec.com/back_end/api';
-  pathImg: string = "http://hospital.rabbittec.com/back_end/public/";
+  pathApi: string = 'http://kfmc.info/back_end/api';
+  pathImg: string = "http://kfmc.info/back_end/public/";
   myInnerHeight = window.innerHeight;
   imgSrc: string =  '../../assets/image/avatar.png'; //page profile default
   iconImg: string = '../../assets/image/Group 92.png';

src/mg-theme.css

@@ -0,0 +1,142 @@
+.internalHeader-w[_ngcontent-c6]{
+        padding-top: 7px;
+        height: 55px !important;
+    background-color:#a1a1a15e !important; 
+}
+.routerLinkContainer-w[_ngcontent-c2] {
+    background: url(background_login.jpg) no-repeat top center !important;
+    background-size: auto !important;
+        background-attachment: fixed !important;
+}
+.internalHeader-w[_ngcontent-c6] input[type='text'][_ngcontent-c6]::placeholder{
+  color: #BDA380;  
+}
+.internalHeader-w[_ngcontent-c6] input[type='text'][_ngcontent-c6]:-ms-input-placeholder{
+  color: #BDA380;  
+}
+.internalHeader-w[_ngcontent-c6] input[type='text'][_ngcontent-c6]::-ms-input-placeholder{
+  color: #BDA380;  
+}
+.internalHeader-w[_ngcontent-c6] .searchBtn[_ngcontent-c6]{
+    
+        height: 35px !important;
+    width: 55px !important;
+    border: 1px solid #BDA380 !important;
+        margin-right: 10px;
+}
+.pagesHeader-w[_ngcontent-c6]{
+        margin-top: 0px !important;
+    background-color: #926f3f2e !important;
+    height: 70px !important;
+}
+.pagesHeader-w[_ngcontent-c6] .navbar[_ngcontent-c6]{
+    height: 70px !important;
+}
+.pagesHeader-w[_ngcontent-c6] .dropdown[_ngcontent-c6] .dropbtn[_ngcontent-c6]{
+    margin: 0 4px !important;
+}
+.pagesHeader-w[_ngcontent-c6] .dropdown[_ngcontent-c6] .dropbtn[_ngcontent-c6]:hover{
+   background-color: #d8cdbd;
+}
+.pagesHeader-w[_ngcontent-c6] .parentName-w[_ngcontent-c6]{
+        margin: 8px 0px !important;
+}
+.contentPage-w[_ngcontent-c7]{
+    background: rgba(255, 255, 255, 0.22) !important;
+    border: 1px solid #eae9e6 !important;
+    box-shadow: 0px 5px 10px #00000026 !important;
+}
+
+.internalHeader-w[_ngcontent-c6] input[type='text'][_ngcontent-c6]{
+    width: 285px;
+    height: 35px !important;
+    border: 1px solid #BDA380 !important;
+}
+.searchBtn i{
+        color: #BDA380;
+}
+.dateW[_ngcontent-c6]{
+    text-shadow: 0px 0px 0px #fff0 !important;
+    font-size: 13px !important;
+}
+.ar[_ngcontent-c6], .en[_ngcontent-c6]{
+ height: 35px !important;
+    width: 55px !important;
+    text-align: center;
+    background-color: #f1eded !important;
+    padding-top: 4px !important;
+}
+.logoHeader-w[_ngcontent-c6]{
+    background-image: url(bottomBackground0.jpg) !important;
+}
+.en[_ngcontent-c6]:hover{
+        background-color: #c3a58161 !important;
+    color: #fff !important;
+    border: 1px solid #bb9262 !important;
+}
+.contentPage-w[_ngcontent-c7]{
+        padding: 10px 10px !important;
+}
+
+.contentPage-w[_ngcontent-c7]{
+    width:100% !important;
+}
+.eventPart-w[_ngcontent-c7] .event[_ngcontent-c7]{
+    background-color: #eae9e6 !important;
+}
+.eventPart-w[_ngcontent-c7] .event[_ngcontent-c7] .now[_ngcontent-c7]{
+        padding: 9px 0 !important;
+}
+.contentsData-w[_ngcontent-c7] .joinUs-w[_ngcontent-c7] .dataContent[_ngcontent-c7], .contentsData-w[_ngcontent-c7] .joinUsEn-w[_ngcontent-c7] .dataContent[_ngcontent-c7]{
+       box-shadow: 0px 3px 7px #00000029 !important;
+}
+.contentsData-w[_ngcontent-c7] .joinUs-w[_ngcontent-c7] .joinHeading-w[_ngcontent-c7], .contentsData-w[_ngcontent-c7] .joinUsEn-w[_ngcontent-c7] .joinHeading-w[_ngcontent-c7]{
+        box-shadow: 0px 3px 7px #00000029 !important;
+}
+.sharingEvent-w[_ngcontent-c7] .content[_ngcontent-c7], .sharingEvent-w[_ngcontent-c7] .content[_ngcontent-c7]{
+     box-shadow: 0px 3px 7px #00000029 !important;
+}
+.sharingEvent-w[_ngcontent-c7] .congeratolation[_ngcontent-c7], .sharingEvent-w[_ngcontent-c7] .sadDead-w[_ngcontent-c7]{
+     box-shadow: 0px 3px 7px #00000029 !important;
+}
+.secondServices-w[_ngcontent-c7] .contentSecondSer-w[_ngcontent-c7] .contentSer[_ngcontent-c7]{
+        box-shadow: 0px 3px 7px #00000029 !important;
+}
+.contentsData-w[_ngcontent-c7] .joinUs-w[_ngcontent-c7] .dataContent[_ngcontent-c7] .joinUs-photo[_ngcontent-c7], .contentsData-w[_ngcontent-c7] .joinUsEn-w[_ngcontent-c7] .dataContent[_ngcontent-c7] .joinUs-photo[_ngcontent-c7]{
+    height: 130px !important;
+    overflow: hidden !important;
+        border: 1px solid #e0e0e0;
+}
+.contentsData-w[_ngcontent-c7] .joinUs-w[_ngcontent-c7] .dataContent[_ngcontent-c7] .joinUs-photo[_ngcontent-c7] img[_ngcontent-c7], .contentsData-w[_ngcontent-c7] .joinUsEn-w[_ngcontent-c7] .dataContent[_ngcontent-c7] .joinUs-photo[_ngcontent-c7] img[_ngcontent-c7]{
+        height: auto !important;
+    margin: 0 !important;
+    border: 1px solid #ccc0 !important;
+}
+.sharingEvent-w[_ngcontent-c7] .content[_ngcontent-c7] .eventsTab[_ngcontent-c7] li[_ngcontent-c7]{
+        border-radius: 10px !important;
+            width: 25px !important;
+    height: 7px !important;
+        padding: 0px !important;
+}
+.linksSection-w[_ngcontent-c4]{
+        margin-top: 10px !important;
+}
+.footer[_ngcontent-c4]{
+    /*    height: 170px !important;*/
+}
+
+
+
+
+
+
+
+@media screen and (min-width: 1200px) {
+    .container{
+        max-width: 1272px !important;
+}
+}
+@media screen and (min-width: 768px) and (max-width: 1200px) {}
+@media screen and (min-width: 599px) and (max-width:767px) {}
+@media screen and (max-width: 598px) {}
+@media screen and (max-width: 480px) {}

src/styles.css

@@ -404,6 +404,23 @@ input:-webkit-autofill:active  {
     bottom:0;
     color: red
   }
+
+  /* .IN-5c1caa55-0e85-4bb1-925b-96b537f99da5-1G9ISYhSF8XoOmdcl0yKDu,
+  .IN-5c1caa55-0e85-4bb1-925b-96b537f99da5-1G9ISYhSF8XoOmdcl0yKDu.IN-5c1caa55-0e85-4bb1-925b-96b537f99da5-3uCBSbQNVNf2QjqHe1rfb6 {
+    width: 150px;
+  } */
+  .IN-5c1caa55-0e85-4bb1-925b-96b537f99da5-1G9ISYhSF8XoOmdcl0yKDu>xdoor-icon {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+
+  .IN-5c1caa55-0e85-4bb1-925b-96b537f99da5-1G9ISYhSF8XoOmdcl0yKDu>xdoor-icon>svg{
+    margin: 0 10px; 
+  }
+
+  .inlineBlock _2tga _49ve {
+    display: none !important;
+  }
   
   /* Responsive Design */
   @media all and (max-width: 240px) {
@@ -449,6 +466,14 @@ input:-webkit-autofill:active  {
     border-radius: 5px;
   } */
 
+
+.ngx-pagination {
+  display: flex ;
+  justify-content: center ;
+  text-align: center;
+}
+
+
   .ngx-pagination li{
     background-color: #fff;
     border: 2px solid #cab599;
@@ -461,6 +486,17 @@ input:-webkit-autofill:active  {
     color: #fff;
   }
 
+  .editRowPadding-w {
+    padding-left: 5px !important;
+    padding-right: 5px !important;
+  }
+  .containerPaddingEdit-w {
+    padding-right: 5px;
+  }
+  .carousel-control-prev,
+  .carousel-control-next {
+    display: none !important;
+  }
   @media(max-width:767px){
     .butttonCreate {
       width: 130px;
@@ -479,6 +515,9 @@ input:-webkit-autofill:active  {
     .validateImageMsg {
       left: 30%;
     }
+    .containerPaddingEdit-w {
+      padding-right: 15px;
+    }
   }
 
   @media(min-width:767px) and (max-width: 991px){
@@ -496,3 +535,184 @@ input:-webkit-autofill:active  {
       margin: 0 10px;
     }
   }
+
+
+
+
+
+
+
+
+
+  /* Eng Magdy Style */
+  .internalHeader-w{
+    padding-top: 7px;
+    height: 55px !important;
+background-color:#a1a1a15e !important; 
+}
+.routerLinkContainer-w {
+  background: url('../src/assets/image/background_login.jpg') no-repeat top center !important;
+  background-size: auto !important;
+  background-attachment: fixed !important;
+}
+.internalHeader-w[_ngcontent-c6] input[type='text'][_ngcontent-c6]::placeholder{
+color: #BDA380;  
+}
+.internalHeader-w[_ngcontent-c6] input[type='text'][_ngcontent-c6]:-ms-input-placeholder{
+color: #BDA380;  
+}
+.internalHeader-w[_ngcontent-c6] input[type='text'][_ngcontent-c6]::-ms-input-placeholder{
+color: #BDA380;  
+}
+.internalHeader-w[_ngcontent-c6] .searchBtn[_ngcontent-c6]{
+
+    height: 35px !important;
+width: 55px !important;
+border: 1px solid #BDA380 !important;
+    margin-right: 10px;
+}
+.pagesHeader-w[_ngcontent-c6]{
+    margin-top: 0px !important;
+background-color: #926f3f2e !important;
+height: 70px !important;
+}
+.pagesHeader-w[_ngcontent-c6] .navbar[_ngcontent-c6]{
+height: 70px !important;
+}
+.pagesHeader-w[_ngcontent-c6] .dropdown[_ngcontent-c6] .dropbtn[_ngcontent-c6]{
+margin: 0 4px !important;
+}
+.pagesHeader-w[_ngcontent-c6] .dropdown[_ngcontent-c6] .dropbtn[_ngcontent-c6]:hover{
+background-color: #d8cdbd;
+}
+.pagesHeader-w[_ngcontent-c6] .parentName-w[_ngcontent-c6]{
+    margin: 8px 0px !important;
+}
+.contentPage-w[_ngcontent-c7]{
+background: rgba(255, 255, 255, 0.22) !important;
+border: 1px solid #eae9e6 !important;
+box-shadow: 0px 5px 10px #00000026 !important;
+}
+
+.internalHeader-w[_ngcontent-c6] input[type='text'][_ngcontent-c6]{
+width: 285px;
+height: 35px !important;
+border: 1px solid #BDA380 !important;
+}
+.searchBtn i{
+    color: #BDA380;
+}
+.dateW[_ngcontent-c6]{
+text-shadow: 0px 0px 0px #fff0 !important;
+font-size: 13px !important;
+}
+.ar[_ngcontent-c6], .en[_ngcontent-c6]{
+height: 35px !important;
+width: 55px !important;
+text-align: center;
+background-color: #f1eded !important;
+padding-top: 4px !important;
+}
+.logoHeader-w[_ngcontent-c6]{
+background-image: url('../src/assets/image/bottomBackground.jpg') !important;
+}
+.en[_ngcontent-c6]:hover{
+    background-color: #c3a58161 !important;
+color: #fff !important;
+border: 1px solid #bb9262 !important;
+}
+.contentPage-w[_ngcontent-c7]{
+    padding: 10px 10px !important;
+}
+
+.contentPage-w[_ngcontent-c7]{
+width:100% !important;
+}
+.eventPart-w[_ngcontent-c7] .event[_ngcontent-c7]{
+background-color: #eae9e6 !important;
+}
+.eventPart-w[_ngcontent-c7] .event[_ngcontent-c7] .now[_ngcontent-c7]{
+    padding: 9px 0 !important;
+}
+.contentsData-w[_ngcontent-c7] .joinUs-w[_ngcontent-c7] .dataContent[_ngcontent-c7], .contentsData-w[_ngcontent-c7] .joinUsEn-w[_ngcontent-c7] .dataContent[_ngcontent-c7]{
+   box-shadow: 0px 3px 7px #00000029 !important;
+}
+.contentsData-w[_ngcontent-c7] .joinUs-w[_ngcontent-c7] .joinHeading-w[_ngcontent-c7], .contentsData-w[_ngcontent-c7] .joinUsEn-w[_ngcontent-c7] .joinHeading-w[_ngcontent-c7]{
+    box-shadow: 0px 3px 7px #00000029 !important;
+}
+.sharingEvent-w[_ngcontent-c7] .content[_ngcontent-c7], .sharingEvent-w[_ngcontent-c7] .content[_ngcontent-c7]{
+ box-shadow: 0px 3px 7px #00000029 !important;
+}
+.sharingEvent-w[_ngcontent-c7] .congeratolation[_ngcontent-c7], .sharingEvent-w[_ngcontent-c7] .sadDead-w[_ngcontent-c7]{
+ box-shadow: 0px 3px 7px #00000029 !important;
+}
+.secondServices-w[_ngcontent-c7] .contentSecondSer-w[_ngcontent-c7] .contentSer[_ngcontent-c7]{
+    box-shadow: 0px 3px 7px #00000029 !important;
+}
+.contentsData-w .joinUs-w .dataContent .joinUs-photo,
+.contentsData-w .joinUsEn-w .dataContent .joinUs-photo{
+  height: 130px !important;
+  overflow: hidden !important;
+  border: 1px solid #e0e0e0;
+}
+.contentsData-w .joinUs-w .dataContent .joinUs-photo img,
+.contentsData-w .joinUsEn-w .dataContent .joinUs-photo img{
+    height: auto !important;
+margin: 0 !important;
+border: 1px solid #ccc0 !important;
+}
+.sharingEvent-w .content .eventsTab li{
+    border-radius: 10px !important;
+        width: 25px !important;
+height: 7px !important;
+    padding: 0px !important;
+}
+.contentsData-w .joinUs-w .dataContent .eventsTab,
+.contentsData-w .joinUsEn-w .dataContent .eventsTab {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  padding-left: 40px;
+  margin: 10px 0;
+}
+.contentsData-w .joinUs-w .dataContent .eventsTab li,
+.contentsData-w .joinUsEn-w .dataContent .eventsTab li{
+  border-radius: 10px !important;
+      width: 25px !important;
+height: 7px !important;
+  padding: 0px !important;
+  background: #ccc;
+  margin: 0 5px;
+  cursor: pointer;
+}
+
+/* .actineTab {
+  background-color: #08726a !important;
+  color: #fff !important;
+} */
+
+.linksSection-w{
+    margin-top: 10px !important;
+}
+.footer{
+/*    height: 170px !important;*/
+}
+
+
+
+
+
+
+
+@media screen and (min-width: 1200px) {
+.container{
+    max-width: 1272px !important;
+}
+}
+@media screen and (min-width: 768px) and (max-width: 1200px) {}
+@media screen and (min-width: 599px) and (max-width:767px) {}
+@media screen and (max-width: 598px) {}
+@media screen and (max-width: 480px) {}
+
+  /* Eng Magdy Style */