LP#626157 Ang2 experiments / nav
authorBill Erickson <berickxx@gmail.com>
Mon, 20 Nov 2017 00:55:07 +0000 (19:55 -0500)
committerBill Erickson <berickxx@gmail.com>
Mon, 11 Dec 2017 17:39:51 +0000 (12:39 -0500)
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Open-ILS/webby-src/package.json
Open-ILS/webby-src/src/app/base.module.ts
Open-ILS/webby-src/src/app/staff/circ/patron/bcsearch/bcsearch-routing.module.ts
Open-ILS/webby-src/src/app/staff/circ/patron/bcsearch/bcsearch.component.ts
Open-ILS/webby-src/src/app/staff/nav.component.html [new file with mode: 0644]
Open-ILS/webby-src/src/app/staff/nav.component.ts [new file with mode: 0644]
Open-ILS/webby-src/src/app/staff/staff.component.html
Open-ILS/webby-src/src/app/staff/staff.module.ts
Open-ILS/webby-src/src/app/welcome.component.html
Open-ILS/webby-src/src/index.html

index 19672bd..69892f8 100644 (file)
@@ -21,6 +21,7 @@
     "@angular/platform-browser": "^5.0.0",
     "@angular/platform-browser-dynamic": "^5.0.0",
     "@angular/router": "^5.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
     "core-js": "^2.4.1",
     "jquery": "^3.2.1",
     "rxjs": "^5.5.2",
index b944757..df83aa8 100644 (file)
@@ -6,6 +6,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule }      from '@angular/core';
 import { Router }        from '@angular/router'; // Debugging
+import { NgbModule }     from '@ng-bootstrap/ng-bootstrap';
 
 import { EgBaseComponent }     from './base.component';
 import { EgBaseRoutingModule } from './base-routing.module';
@@ -18,7 +19,8 @@ import { WelcomeComponent }    from './welcome.component';
   ],
   imports: [
     EgBaseRoutingModule,
-    BrowserModule
+    BrowserModule,
+    NgbModule.forRoot()
   ],
   providers: [],
   bootstrap: [EgBaseComponent]
index 6245d24..25d8a57 100644 (file)
@@ -3,6 +3,9 @@ import { RouterModule, Routes } from '@angular/router';
 import { EgBcSearchComponent }  from './bcsearch.component';
 
 const routes: Routes = [
+  { path: '',
+    component: EgBcSearchComponent
+  },
   { path: ':barcode',
     component: EgBcSearchComponent
   },
index 958f522..7105905 100644 (file)
@@ -41,7 +41,7 @@ export class EgBcSearchComponent implements OnInit {
         ).subscribe(
             x => console.log(x), 
             e => console.log('echo event: ' + e),
-            () => console.log('done');
+            () => console.log('done')
         )
 
     }
diff --git a/Open-ILS/webby-src/src/app/staff/nav.component.html b/Open-ILS/webby-src/src/app/staff/nav.component.html
new file mode 100644 (file)
index 0000000..299c96a
--- /dev/null
@@ -0,0 +1,33 @@
+<!--
+loads new page
+href="./stuff"
+direct routing
+routerLink="/suff"
+-->
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <div class="collapse navbar-collapse">
+    <ul class="navbar-nav">
+      <li class="nav-item active">
+        <a i18n class="nav-link" routerLink="/staff">Home</a>
+      </li>
+      <li ngbDropdown class="nav-item dropdown">
+        <a ngbDropdownToggle i18n class="nav-link dropdown-toggle">
+          Dropdown link
+        </a>
+        <div class="dropdown-menu" ngbDropdownMenu>
+          <a i18n class="dropdown-item" routerLink="/staff">Action</a>
+          <a i18n class="dropdown-item" routerLink="/staff">Another action</a>
+
+          <a i18n class="dropdown-item" 
+            href="./staff/circ/patron/bcsearch">
+            <!--
+            routerLink="/staff/circ/patron/bcsearch/">
+            -->
+            Checkout
+          </a>
+        </div>
+      </li>
+    </ul>
+  </div>
+</nav>
+
diff --git a/Open-ILS/webby-src/src/app/staff/nav.component.ts b/Open-ILS/webby-src/src/app/staff/nav.component.ts
new file mode 100644 (file)
index 0000000..06f17e4
--- /dev/null
@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+    selector: 'eg-staff-nav-bar';
+  templateUrl: 'nav.component.html'
+})
+
+export class EgStaffNavComponent implements OnInit {
+    constructor(private route: ActivatedRoute) {}
+
+    ngOnInit() {
+
+    }
+}
+
+
index e8bfeba..36ae852 100644 (file)
@@ -1,6 +1,6 @@
-<h1>Nav Bar Goes Here</h1>
-
-<h2>Staff Module</h2>
+<!-- top navigation bar -->
+<eg-staff-nav-bar></eg-staff-nav-bar>
 
+<!-- page content -->
 <router-outlet></router-outlet>
 
index 232634f..f7dd6b1 100644 (file)
@@ -1,17 +1,21 @@
 import { CommonModule } from '@angular/common';
 import { NgModule }     from '@angular/core';
-//import { FormsModule }  from '@angular/forms';
+import { FormsModule }  from '@angular/forms';
+import { NgbModule }     from '@ng-bootstrap/ng-bootstrap';
 
 import { EgStaffComponent }     from './staff.component';
 import { EgStaffRoutingModule } from './staff-routing.module';
+import { EgStaffNavComponent }  from './nav.component';
 
 @NgModule({
   declarations: [
-    EgStaffComponent
+    EgStaffComponent,
+    EgStaffNavComponent
   ],
   imports: [
     EgStaffRoutingModule,
-    //FormsModule,
+    FormsModule,
+    NgbModule
   ],
   providers: []
 })
index 0526829..8ec7fbb 100644 (file)
@@ -1,14 +1,11 @@
-<div style="text-align: center; margin-top: 50px;">
-
-    <h1 i18n="Welcome Message">Welcome to Webby</h1>
-
-    <strong i18n="Welcome Status OK">
-        If you see this page, you're probably in good shape...
-    </strong>
-
-    <p i18n="Welcome Recommendations">
-        But maybe you meant to go to the <a routerLink="/staff">staff page</a>
-        or <a routerLink="/catalog">the catalog.</a>
-    </p>
+<div class="jumbotron">
+  <h1 i18n class="display-3">Welcome to Webby</h1>
+  <p i18n class="lead">
+    If you see this page, you're probably in good shape...
+  </p>
+  <hr class="my-4"/>
+  <p i18n>
+    But maybe you meant to go to the <a routerLink="/staff">staff page</a>
+    or <a routerLink="/catalog">the catalog.</a>
+  </p>
 </div>
-
index 3bb7d5f..b1d2497 100644 (file)
@@ -7,6 +7,12 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <!-- link to bootstrap manually for the time being.  With 
+        ng-bootstrap, we only need the CSS, not the JS -->
+  <link rel="stylesheet" 
+    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" 
+    integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" 
+    crossorigin="anonymous">
 </head>
 <body>
   <eg-root></eg-root>