fix: multiple usage of app header (#48)

Remove multiple usage of app header component and use the shell component
to route with shell, loading the header only once initially.

Fixes #47
This commit is contained in:
Abhay Chawla
2018-06-15 00:21:22 +05:30
committed by GitHub
parent 6be70d6cb4
commit 052568bba6
9 changed files with 74 additions and 74 deletions
@@ -1,10 +1,13 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Route, extract } from '@app/core';
import { AccountingComponent } from './accounting.component';
const routes: Routes = [
{ path: 'accounting', component: AccountingComponent},
Route.withShell([
{ path: 'accounting', component: AccountingComponent}
])
];
@NgModule({
+1 -2
View File
@@ -1,4 +1,3 @@
<app-header> </app-header>
<div class="fluid-container">
<div class="container">
<div class="card-body">
@@ -47,4 +46,4 @@
</div>
</div>
</div>
</div>
</div>
+7 -5
View File
@@ -1,17 +1,19 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { extract } from '@app/core';
import { Route, extract } from '@app/core';
import { ClientsComponent } from './clients.component';
import { CreateClientComponent} from './create-client/create-client.component';
import { ViewClientComponent } from './view-client/view-client.component';
import { ViewLoanComponent } from './view-loan/view-loan.component';
const routes: Routes = [
{ path: 'clients', component: ClientsComponent},
{ path: 'clients/create', component: CreateClientComponent},
{ path: 'clients/view', component: ViewClientComponent},
{ path: 'clients/viewloan', component: ViewLoanComponent}
Route.withShell([
{ path: 'clients', component: ClientsComponent},
{ path: 'clients/create', component: CreateClientComponent},
{ path: 'clients/view', component: ViewClientComponent},
{ path: 'clients/viewloan', component: ViewLoanComponent}
])
];
@NgModule({
+2 -3
View File
@@ -1,4 +1,3 @@
<app-header> </app-header>
<div class="fluid-container">
<div class="container">
<div class="card mt-5">
@@ -98,5 +97,5 @@
</div>
</div>
</div>
</div>
</div>
</div>
@@ -1,9 +1,8 @@
<app-header> </app-header>
<div class="container">
<aw-wizard class="mt-5" #wizard [navBarLayout]="'large-empty-symbols'">
<aw-wizard-step stepTitle="Title of step 1" [navigationSymbol]="{ symbol: '1' }">
<div class="col-sm-6 mx-auto">
<div class="card mt-5">
<div class="card-body">
@@ -13,41 +12,41 @@
<input class="form-control" id="disabledInput" placeholder="Disabled input here..." disabled="" type="text">
</fieldset>
</div>
<div class="form-group">
<fieldset>
<label class="control-label" for="readOnlyInput">Readonly input</label>
<input class="form-control" id="readOnlyInput" placeholder="Readonly input here…" readonly="" type="text">
</fieldset>
</div>
<div class="form-group has-success">
<label class="form-control-label" for="inputSuccess1">Valid input</label>
<input value="correct value" class="form-control is-valid" id="inputValid" type="text">
<div class="valid-feedback">Success! You've done it.</div>
</div>
<div class="form-group has-danger">
<label class="form-control-label" for="inputDanger1">Invalid input</label>
<input value="wrong value" class="form-control is-invalid" id="inputInvalid" type="text">
<div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
</div>
<div class="form-group">
<label class="col-form-label col-form-label-lg" for="inputLarge">Large input</label>
<input class="form-control form-control-lg" placeholder=".form-control-lg" id="inputLarge" type="text">
</div>
<div class="form-group">
<label class="col-form-label" for="inputDefault">Default input</label>
<input class="form-control" placeholder="Default input" id="inputDefault" type="text">
</div>
<div class="form-group">
<label class="col-form-label col-form-label-sm" for="inputSmall">Small input</label>
<input class="form-control form-control-sm" placeholder=".form-control-sm" id="inputSmall" type="text">
</div>
<div class="form-group">
<label class="control-label">Input addons</label>
<div class="form-group">
@@ -68,7 +67,7 @@
</div>
</div>
</aw-wizard-step>
<aw-wizard-step stepTitle="Title of step 2" [navigationSymbol]="{ symbol: '2' }" >
<div class="col-sm-6 mx-auto">
@@ -77,7 +76,7 @@
--> <div class="card-body">
<form>
<fieldset>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
@@ -1,4 +1,3 @@
<app-header> </app-header>
<div class="fluid-container">
<div class="container">
<div class="row">
@@ -46,11 +45,11 @@
<th>Country</th>
<th>City</th>
<th>Position</th>
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<tr>
@@ -60,7 +59,7 @@
<td>Italy</td>
<td>Bari</td>
<td>Editor-in-chief</td>
</tr>
<tr>
<th scope="row">5</th>
@@ -69,7 +68,7 @@
<td>Poland</td>
<td>Warsaw</td>
<td>Video Maker</td>
</tr>
<tr>
<th scope="row">6</th>
@@ -78,7 +77,7 @@
<td>Germany</td>
<td>Berlin</td>
<td>Photographer</td>
</tr>
<tr>
<th scope="row">7</th>
@@ -87,7 +86,7 @@
<td>USA</td>
<td>San Francisco</td>
<td>Teacher</td>
</tr>
<tr>
<th scope="row">8</th>
@@ -96,7 +95,7 @@
<td>France</td>
<td>Paris</td>
<td>Actor</td>
</tr>
<tr>
<th scope="row">9</th>
@@ -105,7 +104,7 @@
<td>Germany</td>
<td>Munich</td>
<td>Singer</td>
</tr>
<tr>
<th scope="row">9</th>
@@ -114,7 +113,7 @@
<td>Germany</td>
<td>Munich</td>
<td>Singer</td>
</tr>
<tr>
<th scope="row">9</th>
@@ -123,7 +122,7 @@
<td>Germany</td>
<td>Munich</td>
<td>Singer</td>
</tr>
<tr>
<th scope="row">9</th>
@@ -132,7 +131,7 @@
<td>Germany</td>
<td>Munich</td>
<td>Singer</td>
</tr>
<tr>
<th scope="row">9</th>
@@ -141,7 +140,7 @@
<td>Germany</td>
<td>Munich</td>
<td>Singer</td>
</tr>
<tr>
<th scope="row">9</th>
@@ -150,11 +149,11 @@
<td>Germany</td>
<td>Munich</td>
<td>Singer</td>
</tr>
</tbody>
<!--Table body-->
</table>
</div>
</div>
@@ -166,4 +165,4 @@
</div>
</div>
</div>
@@ -1,5 +1,3 @@
<app-header></app-header>
<div class="fluid-container">
<div class="container">
<div class="col text-center">
@@ -362,4 +360,4 @@
</ngb-tabset>
</div>
</div>
</div>
</div>
@@ -1,10 +1,13 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Route, extract } from '@app/core';
import { NavigationComponent } from './navigation.component';
const routes: Routes = [
{ path: 'navigation', component: NavigationComponent},
Route.withShell([
{ path: 'navigation', component: NavigationComponent}
])
];
@NgModule({
+30 -32
View File
@@ -1,15 +1,14 @@
<app-header></app-header>
<div class="fluid-container">
<div class="container">
<!-- <div class="card card-header">
<h4 class="col-sm-3 font-weight-bold">Navigation</h4> -->
<div class="col-sm-4 mt-5 mb-3 mx-auto">
<input class="form-control mr-sm-2" placeholder="Filter by Name" type="text">
</div>
<ngb-tabset justify="center">
<ngb-tab title="Client">
@@ -25,32 +24,32 @@
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<tr>
<th scope="row">4</th>
<td>Jerry</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Janis</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Gary</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Angie</td>
</tr>
<tr>
<th scope="row">8</th>
@@ -66,23 +65,23 @@
<th scope="row">9</th>
<td>Otto</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Otto</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Otto</td>
</tr>
</tbody>
<!--Table body-->
</table>
</div>
</ng-template>
@@ -93,7 +92,7 @@
<ng-template ngbTabContent>
<div class="card col-sm-4 mx-auto">
<table class="table table-hover table-responsive-md table-fixed">
<!--Table head-->
<thead>
<tr>
@@ -102,49 +101,49 @@
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<tr>
<th scope="row">4</th>
<td>Jerry</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Janis</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Jerry</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Janis</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Jerry</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Janis</td>
</tr>
</tbody>
<!--Table body-->
</table>
</div>
</ng-template>
@@ -163,4 +162,3 @@
</ngb-tabset>
</div>
</div>