20-06-2019

src/app/app-routing.module.ts

@@ -26,7 +26,10 @@ const routes: Routes = [
   { 
     path: 'details',
     loadChildren: './details/details.module#DetailsPageModule'
-  }
+  },
+  { 
+    path: 'medicalauthorization',
+    loadChildren: './medicalauthorization/medicalauthorization.module#MedicalauthorizationPageModule' }
 ];
 
 @NgModule({

src/app/app.scss

@@ -320,7 +320,7 @@ button{
 .nav_title{
     width: calc(100% - 50px);
     color: #292929;
-    padding: 15px;
+    padding: 10px;
     font-weight: 400;
     img{
         width: 135px;
@@ -329,13 +329,16 @@ button{
         margin: 0px;
         font-weight: 400;
         padding:0px;
-        font-size: 28px;
+        font-size: 20px;
     }
 }
 
+.button-text{
+    display: none;
+}
 .nav_btn{
     width: 50px;
-    height: 60px;
+    height: 40px;
     background-repeat: no-repeat !important;
     background-position: center !important;
     background-size: 20px !important;

src/app/details/details.page.html

@@ -48,47 +48,47 @@
     </div>
     <div class="detail_listing">
       <ul>
-        <li>
+        <li (click)="goToPage('medicalauthorization')">
           <img src="../../assets/imgs/m1.png">
           <p>Students<br> Profile</p>
         </li>
-        <li>
+        <li (click)="goToPage('medicalauthorization')">
             <img src="../../assets/imgs/m2.png">
             <p>Health care<br> form</p>
           </li>
-          <li>
+          <li (click)="goToPage('medicalauthorization')">
               <img src="../../assets/imgs/m3.png">
               <p>Medication <br>Authorization</p>
             </li>
-            <li>
+            <li (click)="goToPage('medicalauthorization')">
                 <img src="../../assets/imgs/m4.png">
                 <p>Treatment<br> Authorization</p>
               </li>
-              <li>
+              <li (click)="goToPage('medicalauthorization')">
                   <img src="../../assets/imgs/m5.png">
                   <p>Medication<br>Trackings</p>
                 </li>
-                <li>
+                <li (click)="goToPage('medicalauthorization')">
                     <img src="../../assets/imgs/m6.png">
                     <p>Treatment<br>Trackings</p>
                   </li>
-                  <li>
+                  <li (click)="goToPage('medicalauthorization')">
                       <img src="../../assets/imgs/m7.png">
                       <p>Screenings</p>
                     </li>
-                    <li>
+                    <li (click)="goToPage('medicalauthorization')">
                         <img src="../../assets/imgs/m1.png">
                         <p>Chart Visits</p>
                       </li>
-                      <li>
+                      <li (click)="goToPage('medicalauthorization')">
                           <img src="../../assets/imgs/m8.png">
                           <p>Immunizations</p>
                         </li>
-                        <li>
+                        <li (click)="goToPage('medicalauthorization')">
                             <img src="../../assets/imgs/m9.png">
                             <p>Medical History</p>
                           </li>
-                          <li>
+                          <li (click)="goToPage('medicalauthorization')">
                               <img src="../../assets/imgs/m10.png">
                               <p>Health History</p>
                             </li>

src/app/details/details.page.ts

@@ -20,16 +20,20 @@ import { Router,ActivatedRoute } from '@angular/router';
   ]
 })
 export class DetailsPage implements OnInit {
-  navCtrl: any;
   isToggle = false;
 
-  constructor() { }
+  constructor(private router: Router,private route: ActivatedRoute) { }
 
   ngOnInit() {
   }
 
-
   popToggle(){
     this.isToggle = !this.isToggle;
   }
+
+  
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
 }

src/app/medicalauthorization/medicalauthorization.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { MedicalauthorizationPage } from './medicalauthorization.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MedicalauthorizationPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [MedicalauthorizationPage]
+})
+export class MedicalauthorizationPageModule {}

src/app/medicalauthorization/medicalauthorization.page.html

+<ion-header>
+  <button class="nav_btn nav_back floatLeft">
+      <ion-back-button>
+      </ion-back-button>
+  </button>
+  <div class="nav_title floatLeft">
+    <h4>Medical Authorizations</h4>
+  </div>
+  <div class="clear"></div>
+</ion-header>
+<ion-content>
+  <div class="list_wrapper">
+    <ul>
+      <li>
+        <div class="list_main" (click)="toggleGroup(0)" [ngClass]="{active:isGroupShown(0)}">
+          <div class="col floatLeft">
+              <p>Name</p>
+              <h3><strong>Medication Authorizations</strong></h3>
+          </div>
+          <div class="col floatLeft borderNone">
+              <p>Expiry Date</p>
+              <h3>06/12/2019</h3>
+          </div>
+          <div class="clear"></div>
+        </div>
+        <div class="list_sub" *ngIf="isGroupShown(0)">
+          <div class="list_bar">
+              <div class="col floatLeft">
+                  <p>Name of medicine</p>
+                  <h3>Potassium Chloride</h3>
+              </div>
+              <div class="col floatLeft borderNone">
+                  <p>Times Per Day</p>
+                  <h3>2 Days</h3>
+              </div>
+              <div class="clear"></div>
+          </div>
+          <div class="list_bar">
+              <div class="col floatLeft">
+                  <p>Tme of first medication</p>
+                  <h3>06/11/2019 11:00 AM</h3>
+              </div>
+              <div class="col floatLeft borderNone">
+                  <p>Quantity Available</p>
+                  <h3>20</h3>
+              </div>
+              <div class="clear"></div>
+          </div>
+        </div>
+      </li>
+      <li>
+          <div class="list_main" (click)="toggleGroup(1)" [ngClass]="{active:isGroupShown(1)}">
+            <div class="col floatLeft">
+                <p>Name</p>
+                <h3><strong>Medication Authorizations</strong></h3>
+            </div>
+            <div class="col floatLeft borderNone">
+                <p>Expiry Date</p>
+                <h3>06/12/2019</h3>
+            </div>
+            <div class="clear"></div>
+          </div>
+          <div class="list_sub" *ngIf="isGroupShown(1)">
+            <div class="list_bar">
+                <div class="col floatLeft">
+                    <p>Name of medicine</p>
+                    <h3>Potassium Chloride</h3>
+                </div>
+                <div class="col floatLeft borderNone">
+                    <p>Times Per Day</p>
+                    <h3>2 Days</h3>
+                </div>
+                <div class="clear"></div>
+            </div>
+            <div class="list_bar">
+                <div class="col floatLeft">
+                    <p>Tme of first medication</p>
+                    <h3>06/11/2019 11:00 AM</h3>
+                </div>
+                <div class="col floatLeft borderNone">
+                    <p>Quantity Available</p>
+                    <h3>20</h3>
+                </div>
+                <div class="clear"></div>
+            </div>
+          </div>
+        </li>
+    </ul>
+  </div>
+</ion-content>

src/app/medicalauthorization/medicalauthorization.page.scss

+.nav_title{
+    width: calc(100% - 50px);
+    padding-left: 0px;
+}
+
+.list_wrapper{
+    ul{
+        margin:0px;
+        padding:10px;
+        li{
+            list-style: none;
+            
+            margin-bottom: 10px;
+            
+            .list_main{
+                padding: 10px;
+                background-color: #e8effa !important;
+            border-left:3px solid #1b4077;
+                background-image: url("../../assets/imgs/asset_drop_btn_right.png");
+                background-position: right 15px top 17px;
+                background-repeat: no-repeat;
+                background-size: 20px;
+                padding-right: 40px;
+                p{
+                    margin:0px;
+                    padding:0px;
+                    color: #0d0d0d;
+                    font-weight: 300;
+                    padding-bottom: 5px;
+                    font-size: 13px;
+                }
+    
+                h3{
+                    margin:0px;
+                    padding:0px;
+                    color: #0d0d0d;
+                    font-size: 14px;
+                    font-weight: 400;
+                }
+
+                .col{
+                    padding-right: 10px;
+                    margin-right: 10px;
+                    border-right:1px solid #686868;
+                }
+            }
+            .active{
+                background: url("../../assets/imgs/asset_drop_btn.png");
+                background-position: right 15px top 17px;
+                background-repeat: no-repeat;
+                background-size: 20px;
+            }
+            .list_sub{
+                padding: 10px; 
+                background: #e8effa;
+            border-left:3px solid #1b4077;       
+                border-top: 1px solid #c7c7c7;
+                .list_bar{
+                    padding-bottom: 10px;
+                }
+
+                p{
+                    margin:0px;
+                    padding:0px;
+                    color: #0d0d0d;
+                    font-weight: 300;
+                    padding-bottom: 5px;
+                    font-size: 13px;
+                }
+    
+                h3{
+                    margin:0px;
+                    padding:0px;
+                    color: #0d0d0d;
+                    font-size: 14px;
+                    font-weight: 400;
+                }
+                .col{
+                    padding-right: 10px;
+                    width: calc(50% - 10px);
+                    margin-right: 10px;
+                    border-right:1px solid #686868;
+
+                }
+            }
+            
+        }
+    }
+}
\ No newline at end of file

src/app/medicalauthorization/medicalauthorization.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MedicalauthorizationPage } from './medicalauthorization.page';
+
+describe('MedicalauthorizationPage', () => {
+  let component: MedicalauthorizationPage;
+  let fixture: ComponentFixture<MedicalauthorizationPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MedicalauthorizationPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MedicalauthorizationPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/medicalauthorization/medicalauthorization.page.ts

+import {Component,OnInit, ElementRef, NgZone, ViewChild} from '@angular/core';
+import { trigger, transition, animate, style } from '@angular/animations';
+
+@Component({
+  selector: 'app-medicalauthorization',
+  templateUrl: './medicalauthorization.page.html',
+  styleUrls: ['./medicalauthorization.page.scss']
+})
+export class MedicalauthorizationPage implements OnInit {
+
+  shownGroup = null;
+
+  constructor() {
+    this.shownGroup = 0;
+   }
+
+  ngOnInit() {
+  }
+
+  isGroupShown(group) {
+    return this.shownGroup === group;
+  }
+
+  toggleGroup(group) {
+    if (this.isGroupShown(group)) {
+        this.shownGroup = null;
+    } else {
+        this.shownGroup = group;
+    }
+  }
+
+
+}