all internal [age logic

package-lock.json

@@ -793,6 +793,15 @@
         "@types/jasmine": "*"
       }
     },
+    "@types/jquery": {
+      "version": "3.3.29",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.29.tgz",
+      "integrity": "sha512-FhJvBninYD36v3k6c+bVk1DSZwh7B5Dpb/Pyk3HKVsiohn0nhbefZZ+3JXbWQhFyt0MxSl2jRDdGQPHeOHFXrQ==",
+      "dev": true,
+      "requires": {
+        "@types/sizzle": "*"
+      }
+    },
     "@types/jwt-decode": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@types/jwt-decode/-/jwt-decode-2.2.1.tgz",
@@ -821,6 +830,12 @@
       "integrity": "sha512-rI0LGoMiZGUM+tjDakQpwZOvcmQoubiJ7hxqrYU12VRxBuGGvOThxrBOU/QmJKlKg1WG6FMzuvcEyLffvVSsmw==",
       "dev": true
     },
+    "@types/sizzle": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
+      "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==",
+      "dev": true
+    },
     "@webassemblyjs/ast": {
       "version": "1.7.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.6.tgz",

package.json

@@ -57,9 +57,10 @@
     "@angular/cli": "~7.0.6",
     "@angular/compiler-cli": "~7.0.0",
     "@angular/language-service": "~7.0.0",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/jquery": "^3.3.29",
+    "@types/node": "~8.9.4",
     "codelyzer": "~4.5.0",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",

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

@@ -0,0 +1,101 @@
+.lastTab-w {
+    width: 100%;
+    display: inline-block;
+    padding: 40px 0;
+}
+.headerTab-w {
+    background-color: transparent;
+    text-align: right;
+    border-bottom: 1px solid #dac4a6;
+    padding: 10px 0;
+    margin: 10px 0;
+    color: #dac4a6;
+    font-size: 18px;
+    font-weight: bold;
+}
+
+
+
+
+ .lastTab-w .menuTab-w {
+    width: 100%;
+    padding: 10px 0;
+    background-color: #bda380;
+}
+
+.lastTab-w .menuTab-w ul {
+    width: 100%;
+    display: inline-block;
+    padding: 5px 0;
+    text-align: center;
+}
+
+ .lastTab-w .menuTab-w ul li {
+    display: inline-block;
+    margin: 0 10px;
+    padding: 0 60px;
+    border-left: 1px solid #fff;
+    cursor: pointer;
+    color: #fff;
+    text-shadow: 0 0 1px;
+}
+
+.menuTabContent-w {
+    width: 100%;
+}
+
+.menuTabContent-w ol {
+    width: 100%;
+    display: block;
+    padding: 0 40px;
+    text-align: right;
+}
+
+.menuTabContent-w ol li {
+    border-bottom: 1px solid #bda380;
+    padding: 10px 0;
+}
+
+/* .lastTab-w .menuTabContent-w {
+    width: 100%;
+    display: inline-block;
+    height: 290px;
+    box-shadow: 0 0 6px #ccc;
+}
+
+.lastTab-w .menuTabContent-w h2 {
+    font-size: 18px;
+    padding: 20px 0;
+}
+
+.lastTab-w .menuTabContent-w ol {
+    width: 100%;
+    padding: 20px 0;
+}
+
+.tabs .lastTab-w .menuTabContent-w ol li {
+    text-align: right;
+    margin: 0 20px;
+    padding: 10px 0;
+    border-bottom: 1px solid #ccc;
+} */
+
+.lastTab-w .menuTab-w ul li:last-child{
+    border-left: none;
+}
+
+.pagenation {
+    width: 100%;
+    display: inline-block;
+    padding: 20px 0;
+    margin: 20px 0;
+}
+
+.pagenation .spanSelect-w {
+    color: #bda380;
+}
+
+.ngx-pagination {
+    text-align: center;
+}
+

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

@@ -0,0 +1,44 @@
+  
+  
+<div class="lastTab-w">
+  <div class="container">
+    <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)">التعاميم الداخليه</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 tab of data">{{tab.name}}</li>
+              </ol>
+              <!-- <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls> -->
+          </div>
+          
+        </div>
+      </div>
+    </div>
+</div>

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

@@ -0,0 +1,105 @@
+import { InternalPageService } from './../../shared/internal-page.service';
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { Component, OnInit } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+
+@Component({
+  selector: 'app-circulars-page',
+  templateUrl: './circulars-page.component.html',
+  styleUrls: ['./circulars-page.component.css']
+})
+export class CircularsPageComponent implements OnInit {
+
+  constructor(private authSer: AuthServiceService, 
+    private spinner: NgxSpinnerService,
+    private internalService: InternalPageService) { }
+   
+    count: number;
+    perPagePagenation: number = 10;
+    dataTableNumber:number = 5;
+    data = [];
+    //p: number[] = [];
+    currentPage:number = 1;
+
+    typeCircu:number = 0;
+  
+    ngOnInit() {
+      this.spinner.show();
+    this.internalService.getCircularsData(this.currentPage, this.perPagePagenation, 0).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.data = responce['tabs'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
+  };
+
+    // /change page 
+    onPageChange(pagenationNumber) {
+      this.spinner.show();
+      this.currentPage = pagenationNumber;
+      this.data = [];
+      //console.log(pagenationNumber);
+      //console.log(this.pageId);
+      this.internalService.getCircularsData(this.currentPage, this.perPagePagenation, this.typeCircu).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.data = responce['tabs'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          //console.log(this.tabsList);
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+          this.spinner.hide();
+        }
+      );
+    };
+
+  onGetData(id) {
+    this.spinner.show();
+    this.typeCircu = id;
+    this.internalService.getCircularsData(this.currentPage, this.perPagePagenation, id).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.data = responce['tabs'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+
+  }
+
+    //determine the list count from select element 
+    onGetValue(event) {
+      this.spinner.show();
+      this.data = [];
+      this.dataTableNumber = event.target.value;
+      this.internalService.getCircularsData(this.currentPage, this.perPagePagenation, this.typeCircu).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.data = responce['tabs'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+          this.spinner.hide();
+        }
+      );
+    }
+
+}

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

@@ -22,10 +22,24 @@
 
 .information {
     width: 100%;
-    padding: 20px 0;
+    height: 400px;
+    padding: 20px;
     border: 1px solid #ccc;
     border-radius: 5px 0;
-    margin: 10px 0;
+    margin: 45px 0;
+    text-align: right;
+}
+
+.information h2 {
+    color: #dac4a6;
+    font-weight: 600;
+    margin: 10px;
+}
+
+.information p {
+    color: #a9a8a8;
+    font-size: 16px;
+    margin: 10px;
 }
 
 .active {
@@ -34,11 +48,71 @@
     border-bottom: 1px solid #03887f;
 }
 
-.collapseStyle {
+.recordsContent-w {
+    width: 100%;
+    display: inline-block;
+    padding: 40px 0;
+}
+
+.recordsContent-w ul {
+    width: 100%;
+    text-align: center;
+}
+
+.recordsContent-w ul li{
+    cursor: pointer;
+    background-color: #bda380;
+    text-align: center;
+    margin: 5px 0;
+    color: #fff;
+    font-weight: bold;
+    padding: 10px 0;
+}
+
+.recordsContent-w ul .nestedMenu {
+    width: 100%;
     text-align: right;
+    direction: ltr;
 }
 
-.collapseHeader-w{
-    background-color: #dac4a6;
-    border-bottom: 1px solid #dac4a6;
+.recordsContent-w ul .nestedMenu li {
+    text-align: right;
+    background-color: #efefef;
+    text-align: center;
+    color: #888;
+    transition: all 0.5s;
+}
+
+.recordsContent-w ul .nestedMenu li:hover {
+    color: #bda380;
+}
+
+.containetttt {
+    width: 100%;
+    display: inline-block;
+}
+
+
+/* start english style  */
+
+.achievementsLang-w {
+    width: 100%;
+    height: 400px;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 5px 0;
+    margin: 45px 0;
+    text-align: left;
+}
+
+.achievementsLang-w h2 {
+    color: #dac4a6;
+    font-weight: 600;
+    margin: 10px;
+}
+
+.achievementsLang-w p {
+    color: #a9a8a8;
+    font-size: 16px;
+    margin: 0 10px;
 }

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

@@ -1,28 +1,63 @@
 <div class="hospitalContent-w">
   <div class="container">
     <div class="row">
-      <div class="col-6 col-md-4">
-        <!-- <ul class="list-unstyled sideMenu-w">
-          <li *ngFor="let hospital of hospitalCenters" [ngClass]="hospital.active == 0 ? '' : 'active'" (click)="getInformationData(hospital)">{{hospital.name}}</li>
-        </ul> -->
-        <collapsible-list [type]="'accordion'" class="collapseStyle">
-          <collapsible-list-item *ngFor="let hospital of hospitalCenters">
-              <collapsible-header class="waves-effect" [ngClass]="hospital.active == 0 ? '' : 'collapseHeader-w'" (click)="getInformationData(hospital)">
-                {{hospital.name}}
-              </collapsible-header>
-              <collapsible-body [expanded]="false">
-                <p *ngFor="let field of hospital['fields']">{{field.title}}</p>
-              </collapsible-body>
-          </collapsible-list-item> 
-        </collapsible-list>
-      </div>
-      <div class="col-6 col-md-8">
-        <div class="information">
 
-        </div>
-      </div> 
-      <!---->
+        <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="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;">  
+                          <!-- <img src="../../../assets/image/Path 148.png" *ngIf="topArrow"/>
+                          <img src="../../../assets/image/Path 147.png" *ngIf="bottomArrow"/>   -->
+                          {{hospital.name}}
+                          <div *ngIf="i == expandedIndex">  
+                              <div class="containetttt" *ngFor="let field of hospital['fields']">
+                                <ul class="list-unstyled nestedMenu">
+                                  <li (click)="showDescriptionDetails(field)" [ngClass]="">
+                                    {{field.title}} 
+                                  </li>
+                                </ul>
+                              </div>  
+                          </div>                                  
+                      </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="col-6 col-md-9">
+              <div class="information">
+                <h2>{{detailsField.title}}</h2>
+                <p>{{detailsField.description}}</p>
+              </div>
+            </div> 
+        </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>
+            </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> 
+        </ng-template>
+
     </div>
   </div>
- 
 </div>

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

@@ -1,3 +1,4 @@
+import { AuthServiceService } from './../../shared/auth-service.service';
 import { Component, OnInit } from '@angular/core';
 import { InternalPageService } from '../../shared/internal-page.service';
 
@@ -6,18 +7,41 @@ import { InternalPageService } from '../../shared/internal-page.service';
   templateUrl: './hospital-content.component.html',
   styleUrls: ['./hospital-content.component.css']
 })
+
 export class HospitalContentComponent implements OnInit {
 
-  constructor(private internalService: InternalPageService) { }
+  constructor(private internalService: InternalPageService, 
+              private authSer:AuthServiceService) { }
 
   hospitalCenters = [];
+  detailsField = [];
+
+  expandedIndex:number;
+  topArrow:boolean = true;
+  bottomArrow:boolean = false;
+  
+  flag: boolean = false;
+  
+  catchEvent(event) {
+    this.flag = true
+    console.log(event)
+  }
+
+  hide(event) {
+    this.flag = false;
+  }
+  
+
 
   ngOnInit() {
 
+    this.expandedIndex = 0;
+
     this.internalService.getHospitalCenterList().subscribe(
       (responce) => {
         console.log(responce);
         this.hospitalCenters = responce['hospitals_centers'];
+        this.showDescriptionDetails(this.hospitalCenters[0].fields[0]);
         console.log(this.hospitalCenters);
       },
       (error) => {
@@ -29,12 +53,31 @@ export class HospitalContentComponent implements OnInit {
   getInformationData(data) {
     for(let i = 0; i < this.hospitalCenters.length; i++) {
       if(data.id == this.hospitalCenters[i].id) {
-        this.hospitalCenters[i].id = 1;
-        alert(this.hospitalCenters[i].id);
-      } else{
-        this.hospitalCenters[i].id = 0;
+        this.hospitalCenters[i].active = 1;
+      } else if(data.id != this.hospitalCenters[i].id) {
+        this.hospitalCenters[i].active = 0;
+      }
+       else{
+        this.hospitalCenters[i].active = 0;
       }
     }
   }
 
+
+  //show detail description 
+  showDescriptionDetails(deatilData) {
+    this.detailsField = deatilData;
+  }
+
+  open(data,i) {
+    console.log(data);
+    this.expandedIndex = i;
+  }
+
+  closeCollapse(i) {
+    this.expandedIndex = -1;
+  }
+
+
+
 }

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

@@ -278,6 +278,13 @@ input,button {
     height: 500px;
 }
 
+.slider p .extra {
+    color: #bda380;
+    font-weight: bold;
+    font-size: 18px;
+    cursor: pointer;
+}
+
 .servicesContent-w .serviceItem-w {
     width: 100%;
     height: 150px;
@@ -593,7 +600,7 @@ input,button {
 .tabs .lastTab-w .menuTabContent-w {
     width: 100%;
     display: inline-block;
-    height: 200px;
+    height: 290px;
     box-shadow: 0 0 6px #ccc;
 }
 
@@ -636,6 +643,7 @@ input,button {
     width: 100%;
     display: inline-block;
     box-shadow: 0 0 6px #ccc;
+    height: 360px;
 } 
 
 .tabs .recods .recordsContent-w ol {

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

@@ -1,136 +1,134 @@
 
 
     <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">    
-                <div class="servicesContent-w">
-                    <div class="container">
+        <div class="servicesContent-w">
+            <div class="container">
+                <div class="row">
+                    
+                    <div class="col-12 col-md-4">
                         <div class="row">
-                            
-                            <div class="col-12 col-md-4">
-                                <div class="row">
-                                    <div class="col-12 col-md-6" *ngFor="let service of externalServices">
-                                        <div class="serviceItem-w">
-                                            <a href="{{service.link}}" target="_blank">
-                                                <img src="{{authSer.pathImg + service.photo}}" />
-                                                <p>{{service.name}}</p>
-                                            </a>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-            
-                            <div class="col-12 col-md-8">
-                                <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>{{report.description}}</p>
-                                            </div>
-                                        </ng-template>
-                                    </ngb-carousel>
+                            <div class="col-12 col-md-6" *ngFor="let service of externalServices">
+                                <div class="serviceItem-w">
+                                    <a href="{{service.link}}" target="_blank">
+                                            onExtraPage         <img src="{{authSer.pathImg + service.photo}}" />
+                                        <p>{{service.name}}</p>
+                                    </a>
                                 </div>
                             </div>
-            
                         </div>
                     </div>
+    
+                    <div class="col-12 col-md-8">
+                        <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>{{report.description}} <a class="extra" (click)="onExtraPage(report.id)">المزيد</a></p>
+                                    </div>
+                                </ng-template>
+                            </ngb-carousel>
+                        </div>
+                    </div>
+    
                 </div>
+            </div>
+        </div>
             
-                <div class="eventPart-w hide">
-                    <div class="container">
-                        <div class="event">
-                            <div class="row">
-                                <div class="col-12 col-sm-12 ol-md-4">
-                                </div>
-                                <div class="col-12 col-sm-12 col-md-4">
-                                    <p class="now"> <img src="../../../assets/image/live.png" />  يعرض الأن :<span>{{live_event.name ? live_event.name : 'لايوجد حدث حاليا'}}</span></p>
-                                </div>
-                                <div class="col-12 col-sm-12 col-md-4">
-                                    <p class="next"> <img src="../../../assets/image/back.png"> يعرض لاحقاً :<span>{{next_lecture.name ? next_lecture.name : 'لايوجد حدث حاليا'}}</span></p>
-                                </div>
-                            </div>
+        <div class="eventPart-w">
+            <div class="container">
+                <div class="event">
+                    <div class="row">
+                        <div class="col-12 col-sm-12 ol-md-4">
+                        </div>
+                        <div class="col-12 col-sm-12 col-md-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-4">
+                            <p class="next"> <img src="../../../assets/image/back.png"> يعرض لاحقاً :<span>{{next_lecture ? next_lecture.name : 'لايوجد حدث حاليا'}}</span></p>
                         </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 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-4">
+                                        <div class="joinUs-photo">
+                                            <img src="{{authSer.pathImg + joinUs.photo}}" /> 
+                                        </div>
                                     </div>
-                                    <div class="dataContent">
-                                        <div class="row">
-                                            <div class="col-12 col-md-4">
-                                                <div class="joinUs-photo">
-                                                    <img src="{{authSer.pathImg + joinUs.photo}}" /> 
-                                                </div>
-                                            </div>
-                                            <div class="col-12 col-md-8">
-                                                <div class="profileData-w">
-                                                    <p>    الموظف :<span>{{joinUs.name}}</span></p>
-                                                    <p>   الإداره :<span>{{joinUs.adminstration_name ? joinUs.adminstration_name : 'لايوجد'}}</span></p>
-                                                    <p>   التاريخ :<span>{{joinUs.date}}</span></p>
-                                                </div>
-                                            </div>
+                                    <div class="col-12 col-md-8">
+                                        <div class="profileData-w">
+                                            <p>    الموظف :<span>{{joinUs.name}}</span></p>
+                                            <p>   الإداره :<span>{{joinUs.adminstration_name ? joinUs.adminstration_name : 'لايوجد'}}</span></p>
+                                            <p>   التاريخ :<span>{{joinUs.date}}</span></p>
                                         </div>
                                     </div>
                                 </div>
-                             </div>
-                             <div class="col-12 col-md-8">
-                                <div class="sharingEvent-w">
-                                    <div class="sharingHeader-w">
-                                        <h2>مشاركه اللحظات</h2>
+                            </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="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>
-                                        <div class="col-12 col-md-6">
-                                            <div class="sadDead-w">
-                                                <h2>التعازي</h2>
-                                            </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>
-                                        </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>
+                                <div class="col-12 col-md-6">
+                                    <div class="sadDead-w">
+                                        <h2>التعازي</h2>
+                                    </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>
                                 </div>
-                             </div>
+                            </div>
                         </div>
-                       
                     </div>
                 </div>
+                
+            </div>
+        </div>
             
-                <div class="secondServices-w">
-                    <div class="container">
-                        <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">
-                                        <div class="row">
-                                            <div class="col-6 col-md-3"  *ngFor="let field of ser['fields']">
-                                                <div class="fieldData-w text-center">
-                                                    <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" />
-                                                    <p>{{field.name ? field.name : 'إضافه خدمه'}}</p>
-                                                </div>
-                                            </div>
+        <div class="secondServices-w">
+            <div class="container">
+                <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">
+                                <div class="row">
+                                    <div class="col-6 col-md-3"  *ngFor="let field of ser['fields']">
+                                        <div class="fieldData-w text-center">
+                                            <img src="{{authSer.pathImg ? authSer.pathImg + field.photo : authSer.iconImg}}" />
+                                            <p>{{field.name ? field.name : 'إضافه خدمه'}}</p>
                                         </div>
                                     </div>
                                 </div>
@@ -138,55 +136,58 @@
                         </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">
-                                        أخر التعاميم
-                                    </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>
-                                    </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">
+                                أخر التعاميم
                             </div>
-                            <div class="col-12 col-md-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>  
-                                                    </div>  
-                                                </div>                                  
-                                            </li>
-                                        </ol>
-                                    </div>
-                                </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">المزيد</button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-12 col-md-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>  
+                                            </div>  
+                                        </div>                                  
+                                    </li>
+                                </ol>
                             </div>
                         </div>
                     </div>
                 </div>
+            </div>
+        </div>
     </ng-template>
 
 
@@ -214,7 +215,7 @@
                                 <ng-template *ngFor="let report of reportsData" ngbSlide>
                                     <img src="{{authSer.pathImg + report.photo}}" alt="Random first slide">
                                     <div class="carousel-caption">
-                                    <p>{{report.description_en}}</p>
+                                    <p>{{report.description_en}} <a class="extra" (click)="onExtraPage(report.id)">المزيد</a></p>
                                     </div>
                                 </ng-template>
                             </ngb-carousel>
@@ -232,10 +233,10 @@
                         <div class="col-12 col-sm-12 ol-md-4">
                         </div>
                         <div class="col-12 col-sm-12 col-md-4">
-                            <p class="now"> <img src="../../../assets/image/live.png" />   Live Now :<span>{{live_event.name ? live_event.name : ' now event now '}}</span></p>
+                            <p class="now"> <img src="../../../assets/image/live.png" />   Live Now :<span>{{live_event ? live_event.name : ' now event now '}}</span></p>
                         </div>
                         <div class="col-12 col-sm-12 col-md-4">
-                            <p class="next"> <img src="../../../assets/image/back.png"> Soon :<span>{{next_lecture.name ? next_lecture.name : 'now event now'}}</span></p>
+                            <p class="next"> <img src="../../../assets/image/back.png"> Soon :<span>{{next_lecture ? next_lecture.name : 'now event now'}}</span></p>
                         </div>
                     </div>
                 </div>
@@ -349,6 +350,7 @@
                                 <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">more</button>
                             </div>
                         </div>
                     </div>
@@ -379,3 +381,4 @@
         </div>
     </ng-template>
 
+    

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

@@ -1,5 +1,5 @@
 import { UserService } from './../../shared/user.service';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import { AuthServiceService } from './../../shared/auth-service.service';
 import { Component, OnInit } from '@angular/core';
 import { InternalPageService } from '../../shared/internal-page.service';
@@ -16,6 +16,7 @@ export class InternalPageContentComponent implements OnInit {
     private router:Router, 
     private userservice: UserService, 
     private internalService: InternalPageService,
+    private route: ActivatedRoute,
     private spinner: NgxSpinnerService,) { }
 
     joinUs = [];
@@ -160,12 +161,14 @@ export class InternalPageContentComponent implements OnInit {
       (responce) => {
         console.log( 'liiiiiiiiive', responce);
         this.live_event = responce['live_lecture'];
+        console.log('liiiiiiiiive eveeeeeeeeeeent' , this.live_event);
         this.next_lecture = responce['next_lecture'];
+        console.log('nexxxxte_lecture' , this.next_lecture);
       },
       (error) => {
         console.log(error);
       }
-    )
+    );
 
   }
 
@@ -220,6 +223,10 @@ export class InternalPageContentComponent implements OnInit {
     )
   }
 
+  onExtraPage(reportId) {
+    this.router.navigate(['InternalPage/news/' + reportId]);
+  }
+
   open(data,i) {
     console.log(data);
     this.expandedIndex = i;
@@ -233,4 +240,8 @@ export class InternalPageContentComponent implements OnInit {
     this.router.navigate(['InternalPage']);
   }
 
+  onPageCir() {
+    this.router.navigate(['InternalPage/circulars']);
+  }
+
 }

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

@@ -13,7 +13,7 @@
                                     <div class="dropdown-menu" style="text-align:right" ngbDropdownMenu>
                                         <button class="dropdown-item" style="cursor: pointer;" (click)="onGetProfile()">صفحتي</button>
                                         <button class="dropdown-item" style="cursor: pointer;" (click)="onDashBoard()"> لوحه التحكم</button>
-                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onLogout()">تسجيل الدخول</button>
+                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onLogout()">تسجيل الخروج</button>
                                     </div>
                                 </div>
                             </li>

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

@@ -53,6 +53,10 @@ export class InternalPageHeaderComponent implements OnInit {
     this.router.navigate(['dashboard/' + this.authSer.dataLoginUser['id']]);
   }
 
+  goToHome() {
+    this.router.navigate(['InternalPage/home']);
+  }
+
 
   
 

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

@@ -1,3 +1,4 @@
+import { NewsPageComponent } from './news-page/news-page.component';
 import { InternalPageService } from './../shared/internal-page.service';
 import { InternalPageRoutingModule } from './internal-routing-module';
 import { InternalPageComponent } from './internal-page/internal-page.component';
@@ -8,6 +9,8 @@ import { InternalPageHeaderComponent } from './internal-page-header/internal-pag
 import { InternalPageContentComponent } from './internal-page-content/internal-page-content.component';
 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';
 
 
 @NgModule({
@@ -16,11 +19,14 @@ import { CollapsibleModule } from 'angular2-collapsible'; // <-- import the modu
         InternalPageHeaderComponent,
         InternalPageContentComponent,
         HospitalContentComponent,
+        NewsPageComponent,
+        CircularsPageComponent,
     ],
     imports: [
         CommonModule,
         InternalPageRoutingModule,
         CollapsibleModule,
+        NgxPaginationModule,
         NgbModule.forRoot(),
     ],
     providers: [

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

@@ -68,7 +68,7 @@ export class InternalPageComponent implements OnInit {
     this.spinner.hide();
     //get parent and child data
     this.internalService.getParentData();
-    this.router.navigate(['InternalPage/home']);
+    //this.router.navigate(['InternalPage/home']);
 
     // //get slider data
     // this.internalService.getSliderData().subscribe(

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

@@ -1,3 +1,5 @@
+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';
 import { NgModule } from '@angular/core';
 // import { AuthGuardService as AuthGuard } from './../shared/auth-guard.service';
@@ -8,10 +10,12 @@ import { HospitalContentComponent } from './hospital-content/hospital-content.co
 import { LoginComponent } from './../login/login.component';
 
 const internalPageRoutes: Routes = [
-        {path: '' , redirectTo: '/InternalPage', pathMatch: 'full'},
+        {path: '' , redirectTo: '/InternalPage/home', pathMatch: 'full'},
         {path: 'InternalPage' , component: InternalPageComponent, children:[
         {path: 'home', component: InternalPageContentComponent},
         {path: 'hospital', component: HospitalContentComponent},
+        {path: 'news/:reportId', component: NewsPageComponent},
+        {path:'circulars', component: CircularsPageComponent},
     ]},
 ];
 

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

@@ -0,0 +1,57 @@
+.news {
+    width: 100%;
+    display: inline-block;
+    padding: 40px 0;
+}
+
+.news h2 {
+    text-align: right;
+    font-size: 20px;
+    margin:  40px 0;
+    color: #bda380;
+    font-weight: bold;
+}
+
+.image {
+    width: 100%;
+    height: 300px;
+    border: 1px slid #000;
+}
+
+.image img {
+    width: 100%;
+    height: 300px;
+    border: 3px solid #bda380;
+}
+
+.description {
+    width: 100%;
+    height: 300px;
+    text-align: right;
+}
+
+.description p {
+    color: #252525;
+    margin: 30px 0;
+    font-size: 16px;
+}
+
+.achievementsLang-w {
+    width: 100%;
+    height: 300px;
+    text-align: left;
+}
+
+.achievementsLang-w p {
+    color: #252525;
+    margin: 30px 0;
+    font-size: 16px;
+}
+
+.achievementsLangHeading-w{
+    text-align: left !important;
+    font-size: 20px;
+    margin:  40px 0;
+    color: #bda380;
+    font-weight: bold;
+}

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

@@ -0,0 +1,46 @@
+<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>{{newsData.description}}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+</ng-template>
+
+
+<ng-template #englishTemplate>
+    <div class="news">
+        <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>
+            <div class="col-12">
+              <div class="description" [className]=" arabicTemplate ? '' : 'achievementsLang-w' ">
+                  <p>{{newsData.description_en}}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+</ng-template>
+
+

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

@@ -0,0 +1,46 @@
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { InternalPageService } from '../../shared/internal-page.service';
+
+@Component({
+  selector: 'app-news-page',
+  templateUrl: './news-page.component.html',
+  styleUrls: ['./news-page.component.css']
+})
+export class NewsPageComponent implements OnInit {
+
+  constructor(private route: ActivatedRoute, 
+    private authSer:AuthServiceService, 
+    private internalService: InternalPageService) { }
+  
+  newsId: number;
+  newsData = [];
+
+
+  ngOnInit() {
+
+  this.authSer.arabicTemplate = true;
+  this.authSer.arabicLanguage = true;
+  this.authSer.englishLanguage = false;
+  
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.newsId = params['reportId'];
+      }
+    );
+
+
+    //get news data 
+    this.internalService.getNewsData(this.newsId).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.newsData = responce['report'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
+  }
+
+}

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

@@ -28,7 +28,7 @@ export class EventsComponent implements OnInit {
     eventsListIds = [];
     count: number;
     perPagePagenation: number;
-    p: number[] = [];
+    //p: number[] = [];
     currentPage:number = 1;
     filtterStatus = '';
     selectedAll: any;

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

@@ -48,7 +48,7 @@ export class HeaderComponent implements OnInit {
   }
 
   onInternalPage() {
-    this.router.navigate(['/InternalPage']);
+    this.router.navigate(['/InternalPage/home']);
   }
 
 

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

@@ -64,4 +64,13 @@ export class InternalPageService {
     return this.http.get(this.authSer.pathApi + '/hospitals_centers_list');
   }
 
+  //get news data 
+  getNewsData(id) {
+    return this.http.get(this.authSer.pathApi + '/get_report/' + id);
+  }
+
+  //get Cir data 
+  getCircularsData(currentPage: number, perPage: number, index: number) {
+    return this.http.get(this.authSer.pathApi + '/tabs_list_internal_gate/' + currentPage + '/' + perPage + '/' + index);
+  }
 }

src/styles.css

@@ -4,7 +4,7 @@
 @import '~quill/dist/quill.snow.css';
 
 @import "../node_modules/angular-calendar/css/angular-calendar.css";
-/* @import '~materialize-css/dist/css/materialize.min.css'; */
+/* @import '~materialize-css/dist/css/materialize.min.css';
 
 
 /* You can add global styles to this file, and also import other style files */