New pages added

.AMEYE

@@ -19,4 +19,13 @@
 ionic serve --external       
 git remote add origin https://gitlab.chiefsoft.net/IONIC/eRx.git
 
-ionic generate page users/dash
+ionic generate page users/dash
+ionic generate page users/schedule
+
+
+ionic generate component CardTiles
+
+ionic generate component component/ItemCardTiles
+ionic generate component component/PracticeHeader
+ionic generate component component/FooterMenu
+

src/app/card-tiles/card-tiles.component.html

@@ -0,0 +1,3 @@
+<p>
+  card-tiles works!
+</p>

src/app/card-tiles/card-tiles.component.scss

@@ -0,0 +1,3 @@
+ion-card{
+    border-radius: 10px;
+}

src/app/card-tiles/card-tiles.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { CardTilesComponent } from './card-tiles.component';
+
+describe('CardTilesComponent', () => {
+  let component: CardTilesComponent;
+  let fixture: ComponentFixture<CardTilesComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CardTilesComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CardTilesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/card-tiles/card-tiles.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-card-tiles',
+  templateUrl: './card-tiles.component.html',
+  styleUrls: ['./card-tiles.component.scss'],
+})
+export class CardTilesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/component/footer-menu/footer-menu.component.html

@@ -0,0 +1,30 @@
+<ion-toolbar class="footer-box">
+  <ion-grid>
+   <ion-row>
+     <ion-col class="footer-col">
+       <ion-icon class="foot-icon" name="calendar-outline"></ion-icon>
+       <div class="foot-text">
+         Schedule
+       </div>
+     </ion-col>
+     <ion-col class="footer-col">
+       <ion-icon class="foot-icon" name="albums-outline"></ion-icon>
+       <div class="foot-text">
+         Orders
+       </div>
+     </ion-col>
+     <ion-col class="footer-col">
+       <ion-icon class="foot-icon" name="people-outline"></ion-icon>
+       <div class="foot-text">
+         Encounters
+       </div>
+     </ion-col>
+     <ion-col class="footer-col">
+       <ion-icon class="foot-icon" name="cog-outline"></ion-icon>
+       <div class="foot-text">
+         Settings
+       </div>
+     </ion-col>
+   </ion-row>
+  </ion-grid>
+ </ion-toolbar>

src/app/component/footer-menu/footer-menu.component.scss

@@ -0,0 +1,16 @@
+.footer-box{
+    padding: 0px;
+    ion-grid{
+        margin: 0px;
+    }
+}
+.foot-text{
+    font-size: 12px;
+    font-weight: bold;
+}
+.foot-icon{
+    font-size: 28px;
+}
+.footer-col{
+    text-align: center;
+}

src/app/component/footer-menu/footer-menu.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { FooterMenuComponent } from './footer-menu.component';
+
+describe('FooterMenuComponent', () => {
+  let component: FooterMenuComponent;
+  let fixture: ComponentFixture<FooterMenuComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FooterMenuComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FooterMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/component/footer-menu/footer-menu.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer-menu',
+  templateUrl: './footer-menu.component.html',
+  styleUrls: ['./footer-menu.component.scss'],
+})
+export class FooterMenuComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/component/item-card-tiles/item-card-tiles.component.html

@@ -0,0 +1,10 @@
+<ion-card>
+  <ion-card-header>
+    <ion-card-subtitle>{{subTitle}}</ion-card-subtitle>
+    <ion-card-title>Card Title</ion-card-title>
+  </ion-card-header>
+
+  <ion-card-content>
+    Keep close to Nature's heart... and break 
+  </ion-card-content>
+</ion-card>

src/app/component/item-card-tiles/item-card-tiles.component.scss

@@ -0,0 +1,3 @@
+ion-card{
+    border-radius: 15px;
+}

src/app/component/item-card-tiles/item-card-tiles.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ItemCardTilesComponent } from './item-card-tiles.component';
+
+describe('ItemCardTilesComponent', () => {
+  let component: ItemCardTilesComponent;
+  let fixture: ComponentFixture<ItemCardTilesComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ItemCardTilesComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ItemCardTilesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/component/item-card-tiles/item-card-tiles.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-item-card-tiles',
+  templateUrl: './item-card-tiles.component.html',
+  styleUrls: ['./item-card-tiles.component.scss'],
+})
+export class ItemCardTilesComponent implements OnInit {
+
+  constructor() { }
+  subTitle:string =  'Olusesan Ameye';
+  ngOnInit() {}
+
+}

src/app/component/practice-header/practice-header.component.html

@@ -0,0 +1,12 @@
+<ion-text color="primary">
+  <h1>Best Medical Center</h1>
+  <p>
+    <ion-text color="warning">
+      <ion-icon name="medkit-outline"></ion-icon>
+    </ion-text>
+    <ion-text>
+      Dr. Bob Marley
+    </ion-text>
+
+  </p>
+</ion-text>

src/app/component/practice-header/practice-header.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { PracticeHeaderComponent } from './practice-header.component';
+
+describe('PracticeHeaderComponent', () => {
+  let component: PracticeHeaderComponent;
+  let fixture: ComponentFixture<PracticeHeaderComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PracticeHeaderComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PracticeHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/component/practice-header/practice-header.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-practice-header',
+  templateUrl: './practice-header.component.html',
+  styleUrls: ['./practice-header.component.scss'],
+})
+export class PracticeHeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/users/dash/dash.module.ts

@@ -8,6 +8,9 @@ import { DashPageRoutingModule } from './dash-routing.module';
 
 import { DashPage } from './dash.page';
 
+import {ItemCardTilesComponent} from '../../component/item-card-tiles/item-card-tiles.component';
+import {PracticeHeaderComponent} from '../../component/practice-header/practice-header.component';
+import { FooterMenuComponent } from '../../component/footer-menu/footer-menu.component';
 @NgModule({
   imports: [
     CommonModule,
@@ -15,6 +18,6 @@ import { DashPage } from './dash.page';
     IonicModule,
     DashPageRoutingModule
   ],
-  declarations: [DashPage]
+  declarations: [DashPage,ItemCardTilesComponent,PracticeHeaderComponent,FooterMenuComponent]
 })
 export class DashPageModule {}

src/app/users/dash/dash.page.html

@@ -1,59 +1,48 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>[Icon] Practice Manager</ion-title>
+    <ion-title><img class='header-icon' src='../../../assets/automedsys-icon.png'> Practice Manager</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-  <ion-text color="primary">
+  <div class="head-sesction-wrapper">
-    <h1>Best Medical Center</h1>
+    <app-practice-header></app-practice-header>
-    <p>
+  </div>
-      <ion-text color="warning">
-        <ion-icon name="medkit-outline"></ion-icon>
-      </ion-text>
-      <ion-text>
-        Dr. Bob Marley
-      </ion-text>
-
-    </p>
-  </ion-text>
 
   <ion-grid>
-
     <ion-row>
       <ion-col>
-        ion-col
+        <app-item-card-tiles
+          tileCardData="{tileCardData}"
+        ></app-item-card-tiles>
       </ion-col>
       <ion-col>
-        ion-col
+        <app-item-card-tiles></app-item-card-tiles>
       </ion-col>
     </ion-row>
 
     <ion-row>
       <ion-col>
-        ion-col
+        <app-item-card-tiles></app-item-card-tiles>
       </ion-col>
       <ion-col>
-        ion-col
+        <app-item-card-tiles></app-item-card-tiles>
       </ion-col>
     </ion-row>
 
     <ion-row>
       <ion-col>
-        ion-col
+        <app-item-card-tiles></app-item-card-tiles>
       </ion-col>
       <ion-col>
-        ion-col
+        <app-item-card-tiles></app-item-card-tiles>
       </ion-col>
     </ion-row>
-
   </ion-grid>
-
 </ion-content>
 
 <!-- Fade Footer -->
 <ion-footer collapse="fade">
-  <ion-toolbar>
+<app-footer-menu></app-footer-menu>
-    <ion-title>Footer</ion-title>
+ 
-  </ion-toolbar>
+</ion-footer>
-</ion-footer>

src/app/users/dash/dash.page.scss

@@ -0,0 +1,19 @@
+ion-grid{
+    background-color: beige;
+    padding: 0px;
+    ion-row{
+        padding: 0px;
+        ion-col{
+            padding: 0px;
+        }
+    }
+}
+.head-sesction-wrapper{
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-bottom: 0px;
+}
+.header-icon{
+    height: 30px; width: auto;
+}
+

src/app/users/dash/dash.page.ts

@@ -9,6 +9,11 @@ export class DashPage implements OnInit {
 
   constructor() { }
 
+  tileCardData:any = {
+    title:'My New Tit',
+    subt:'subtitle n',
+    desc: 'I am sending description'
+  }
   ngOnInit() {
   }