portal: add catalogsearch and link items
authorGalen Charlton <gmc@equinoxOLI.org>
Tue, 3 Aug 2021 14:42:02 +0000 (10:42 -0400)
committerGalen Charlton <gmc@equinoxOLI.org>
Wed, 1 Sep 2021 18:42:30 +0000 (14:42 -0400)
Also make autofocus on the catalog search input work

Signed-off-by: Galen Charlton <gmc@equinoxOLI.org>
Open-ILS/src/eg2/src/app/staff/splash.component.html
Open-ILS/src/eg2/src/app/staff/splash.component.ts
Open-ILS/src/eg2/src/app/staff/staff.module.ts

index 16389b7..620876b 100644 (file)
             <h2 class="panel-title text-center" i18n>{{entry.label()}}</h2>
           </div>
           <div class="list-group-item border-0 p-2" *ngIf="entry.entry_type() === 'menuitem'">
-             <a href="{{entry.target_url()}}" i18n>
-               <img src="{{entry.image_url()}}" alt="" role="presentation"/>
-               {{entry.label()}}
-             </a>
-           </div>
-        </ng-container>
-      </div>
-    </div>
-  </div>
-
-  <div class="row" id="splash-nav">
-    <div class="col-lg-4">
-      <div class="card">
-        <div class="card-header">
-          <h2 class="panel-title text-center" i18n>Circulation and Patrons</h2>
-        </div>
-        <div class="card-body">
-          <div class="list-group">
-            <div class="list-group-item border-0 p-2">
-              <a href="/eg/staff/circ/patron/bcsearch" i18n>
-                <img src="/images/portal/forward.png" alt="" role="presentation"/>
-                Check Out Items
-              </a>
-            </div>
-            <div class="list-group-item border-0 p-2">
-              <a href="/eg/staff/circ/checkin/index" i18n>
-                <img src="/images/portal/back.png" alt="" role="presentation"/>
-                Check In Items
-              </a>
-            </div>
-            <div class="list-group-item border-0 p-2">
-              <a href="/eg/staff/circ/patron/search" i18n>
-                <img src="/images/portal/retreivepatron.png" alt="" role="presentation"/>
-                Search For Patron By Name
-              </a>
-            </div>
+            <a href="{{entry.target_url()}}" i18n>
+              <img src="{{entry.image_url()}}" alt="" role="presentation"/>
+              {{entry.label()}}
+            </a>
           </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="col-lg-4">
-      <div class="card">
-        <div class="card-header">
-          <h2 class="panel-title text-center" i18n>Item Search and Cataloging</h2>
-        </div>
-        <div class="card-body">
-          <div class="list-group">
-            <div class="list-group-item border-0 p-2">
-              <div class="input-group">
-                <input type="text" class="form-control" 
-                  [(ngModel)]="catSearchQuery"
-                  id='catalog-search-input'
-                  (keyup.enter)="searchCatalog()"
-                  i18n-placeholder placeholder="Search for..."
-                  i18n-aria-label aria-label="Search for...">
-                <span class="input-group-btn">
-                  <button class="btn btn-outline-secondary" 
-                    (click)="searchCatalog()" type="button" i18n>
-                    Search Catalog
-                  </button>
-                </span>
-                  <!--
-                  <input focus-me="focus_search" 
-                      class="form-control" ng-model="cat_query" type="text" 
-                      ng-keypress="catalog_search($event)"
-                      placeholder="Search catalog for..."/>
-                  <button class='btn btn-light' ng-click="catalog_search()">
-                      Search
-                  </button>
-                  -->
-              </div>
-            </div>
-            <div class="list-group-item border-0 p-2">
-              <a href="/eg/staff/cat/bucket/record/" i18n>
-                <img src="/images/portal/bucket.png" alt="" role="presentation"/>
-                Record Buckets
-              </a>
-            </div>
-            <div class="list-group-item border-0 p-2">
-              <a href="/eg/staff/cat/bucket/copy/" i18n>
-                <img src="/images/portal/bucket.png" alt="" role="presentation"/>
-                Item Buckets
-              </a>
+          <div class="list-group-item border-0 p-2" *ngIf="entry.entry_type() === 'catalogsearch'">
+            <div class="input-group">
+              <input type="text" class="form-control" 
+                [(ngModel)]="catSearchQuery"
+                id='catalog-search-input'
+                autofocus
+                (keyup.enter)="searchCatalog()"
+                i18n-placeholder placeholder="Search for..."
+                i18n-aria-label aria-label="Search for...">
+              <span class="input-group-btn">
+                <button class="btn btn-outline-secondary" 
+                  (click)="searchCatalog()" type="button" i18n>
+                  {{entry.label()}}
+                </button>
+              </span>
             </div>
           </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="col-lg-4">
-      <div class="card">
-        <div class="card-header">
-          <h2 class="panel-title text-center" i18n>Administration</h2>
-        </div>
-        <div class="card-body">
-          <div class="list-group">
-            <div class="list-group-item border-0 p-2">
-              <a target="_top" href="http://docs.evergreen-ils.org/" i18n>
-                <img src="/images/portal/helpdesk.png" alt="" role="presentation"/>
-                Evergreen Documentation
-              </a>
-            </div>
-            <div class="list-group-item border-0 p-2">
-              <a target="_top" href="/eg/staff/admin/workstation/index" i18n>
-                <img src="/images/portal/helpdesk.png" alt="" role="presentation"/>
-                Workstation Administration
-              </a>
-            </div>
-            <div class="list-group-item border-0 p-2">
-              <a target="_top" href="/eg/staff/reporter/legacy/main" i18n>
-                <img src="/images/portal/reports.png" alt="" role="presentation"/>
-                Reports
-              </a>
-            </div>
+          <div class="list-group-item border-0 p-2" *ngIf="entry.entry_type() === 'link'">
+            <a target="_top" href="{{entry.target_url()}}" i18n>
+              <img src="{{entry.image_url()}}" alt="" role="presentation"/>
+              {{entry.label()}}
+            </a>
           </div>
-        </div>
+        </ng-container>
       </div>
     </div>
   </div>
+
 </div>
 
index a847c3f..78c05ca 100644 (file)
@@ -1,4 +1,4 @@
-import {Component, OnInit, Renderer2} from '@angular/core';
+import {Component, OnInit, AfterViewInit, Directive, ElementRef, Renderer2} from '@angular/core';
 import {PcrudService} from '@eg/core/pcrud.service';
 import {Router} from '@angular/router';
 
@@ -26,9 +26,6 @@ export class StaffSplashComponent implements OnInit {
             }
             this.portalEntries[page_col][item.col_pos()] = item;
         });
-
-        // Focus catalog search form
-        this.renderer.selectRootElement('#catalog-search-input').focus();
     }
 
     searchCatalog(): void {
@@ -41,4 +38,14 @@ export class StaffSplashComponent implements OnInit {
     }
 }
 
+@Directive({
+    selector: '[autofocus]'
+})
+export class AutofocusDirective implements AfterViewInit {
+    constructor(private host: ElementRef) {}
 
+    ngAfterViewInit() {
+        console.log('fo');
+        this.host.nativeElement.focus();
+    }
+}
index dd22f93..34bf589 100644 (file)
@@ -5,7 +5,7 @@ import {StaffComponent} from './staff.component';
 import {StaffRoutingModule} from './routing.module';
 import {StaffNavComponent} from './nav.component';
 import {StaffLoginComponent} from './login.component';
-import {StaffSplashComponent} from './splash.component';
+import {StaffSplashComponent, AutofocusDirective} from './splash.component';
 import {AboutComponent} from './about.component';
 
 @NgModule({
@@ -13,6 +13,7 @@ import {AboutComponent} from './about.component';
     StaffComponent,
     StaffNavComponent,
     StaffSplashComponent,
+    AutofocusDirective,
     StaffLoginComponent,
     AboutComponent
   ],