public-search: complete brief view

* Adds documents and person filters
* Adds detailed display of search results

Co-Authored-by: Alicia Zangger <alicia.zangger@rero.ch>

projects/public-search/src/app/app-routing.module.ts

@@ -18,6 +18,7 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { RecordSearchComponent, DetailComponent } from '@rero/ng-core';
 import { DocumentBriefComponent } from './document-brief/document-brief.component';
+import { PersonBriefComponent } from './person-brief/person-brief.component';
 
 const routes: Routes = [
   {
@@ -27,7 +28,7 @@ const routes: Routes = [
       { path: ':type/detail/:pid', component: DetailComponent }
     ],
     data: {
-      showSearchInput: true,
+      showSearchInput: false,
       adminMode: false,
       linkPrefix: '/global/search',
       detailUrl: '/global/:type/:pid',
@@ -36,17 +37,23 @@ const routes: Routes = [
           key: 'documents',
           component: DocumentBriefComponent,
           label: 'Documents'
+        },
+        {
+          key: 'persons',
+          component: PersonBriefComponent,
+          label: 'Persons'
         }
       ]
     }
-  }, {
+  },
+  {
     path: 'highlands/search',
     children: [
       { path: ':type', component: RecordSearchComponent },
       { path: ':type/detail/:pid', component: DetailComponent }
     ],
     data: {
-      showSearchInput: true,
+      showSearchInput: false,
       adminMode: false,
       linkPrefix: '/highlands/search',
       detailUrl: '/highlands/:type/:pid',
@@ -58,17 +65,23 @@ const routes: Routes = [
           preFilters: {
             view: 'highlands'
           }
+        },
+        {
+          key: 'persons',
+          component: PersonBriefComponent,
+          label: 'Persons'
         }
       ]
     }
-  }, {
+  },
+  {
     path: 'aoste/search',
     children: [
       { path: ':type', component: RecordSearchComponent },
       { path: ':type/detail/:pid', component: DetailComponent }
     ],
     data: {
-      showSearchInput: true,
+      showSearchInput: false,
       adminMode: false,
       linkPrefix: '/aoste/search',
       detailUrl: '/aoste/:type/:pid',
@@ -80,6 +93,11 @@ const routes: Routes = [
           preFilters: {
             view: 'aoste'
           }
+        },
+        {
+          key: 'persons',
+          component: PersonBriefComponent,
+          label: 'Persons'
         }
       ]
     }

projects/public-search/src/app/app.module.ts

@@ -18,26 +18,33 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 
-import { CoreConfigService, RecordModule, CoreModule } from '@rero/ng-core';
+import { CoreConfigService, RecordModule, CoreModule, SharedModule } from '@rero/ng-core';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { AppConfigService } from './app-config.service';
 import { DocumentBriefComponent } from './document-brief/document-brief.component';
-import { TranslatePipe } from '@ngx-translate/core';
+import { PersonBriefComponent } from './person-brief/person-brief.component';
+import { MefTitlePipe } from './pipes/mef-title.pipe';
+import { BirthDatePipe } from './pipes/birth-date.pipe';
+import { BioInformationsPipe } from './pipes/bio-informations.pipe';
 
 @NgModule({
   declarations: [
     AppComponent,
-    DocumentBriefComponent
+    DocumentBriefComponent,
+    PersonBriefComponent,
+    MefTitlePipe,
+    BirthDatePipe,
+    BioInformationsPipe
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
     CoreModule,
     RecordModule,
-    TranslatePipe
+    SharedModule
   ],
   providers: [
     {
@@ -46,7 +53,8 @@ import { TranslatePipe } from '@ngx-translate/core';
     }
   ],
   entryComponents: [
-    DocumentBriefComponent
+    DocumentBriefComponent,
+    PersonBriefComponent
   ],
   bootstrap: [AppComponent]
 })

projects/public-search/src/app/document-brief/document-brief.component.html

@@ -15,6 +15,58 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<ng-container *ngIf="record">
-<h4 *ngIf="record.metadata.title">{{ record.metadata.title }}</h4>
-</ng-container>
+<article *ngIf="record" class="card flex-row border-0">
+    <div class="align-self-start d-flex justify-content-center">
+      <figure class="mb-0 thumb-brief">
+        <img class="img-responsive border border-light " [src]="coverUrl">
+        <figcaption class="text-center">{{ record.metadata.type | translate }}</figcaption>
+      </figure>
+    </div>
+    <div class="card-body w-100 py-0">
+      <h4 class="card-title mb-1">
+        <a target="_self" href="/{{ view }}/documents/{{ record.metadata.pid }}">{{ record.metadata.title }}</a>
+      </h4>
+      <article class="card-text">
+        <!-- author -->
+        <ul class="list-inline mb-0" *ngIf="record.metadata.authors && record.metadata.authors.length > 0">
+          <li class="list-inline-item" *ngFor="let author of record.metadata.authors.slice(0,3); let last = last">
+            <span *ngIf="!author.pid">
+              {{ authorName(author) }}
+              {{ author.qualifier ? author.qualifier : '' }}
+              {{ author.date ? author.date : '' }}
+            </span>
+            <a *ngIf="author.pid" href="/{{ view }}/persons/{{ author.pid }}">
+              {{ authorName(author) }}
+              {{ author.qualifier ? author.qualifier : '' }}
+              {{ author.date ? author.date : '' }}
+            </a>
+            {{ last ? '' : '; ' }}
+
+          </li>
+          <li *ngIf="record.metadata.authors && record.metadata.authors.length > 3">; …</li>
+        </ul>
+
+        <!-- is_part_of -->
+        <span *ngIf="record.metadata.is_part_of">{{ record.metadata.is_part_of }}</span>
+
+        <!-- publisher_statements -->
+        <span *ngIf="record.metadata.publisherStatement">
+          {{ record.metadata.publisherStatement[0] }}
+        </span>
+
+        <div *ngIf="record.metadata.type !== 'ebook'">
+          <i class="fa fa-circle text-{{ record.metadata.available ? 'success' : 'danger' }}" aria-hidden="true"></i>&nbsp;
+          <span translate *ngIf="record.metadata.available">available</span>
+          <span translate *ngIf="!record.metadata.available">not available</span>
+        </div>
+        <div *ngIf="record.explanation">
+          <a class="badge badge-info collapsed"
+              data-toggle="collapse" href="#{{'score'+record.metadata.pid }}"
+              aria-expanded="false">
+              score: {{ record.explanation.value }}
+          </a>
+          <pre class="collapse border border-secondary mt-1" id="{{'score'+record.metadata.pid }}">{{record.explanation|json}}</pre>
+        </div>
+      </article>
+    </div>
+</article>

projects/public-search/src/app/document-brief/document-brief.component.scss

@@ -0,0 +1,37 @@
+/*
+
+  RERO ILS
+  Copyright (C) 2019 RERO
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as published by
+  the Free Software Foundation, version 3 of the License.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU Affero General Public License for more details.
+
+  You should have received a copy of the GNU Affero General Public License
+  along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+ */
+
+ .thumb-brief
+  img {
+    max-height: 90px;
+    width: 58px;
+  }
+
+@media (max-width: 960px) {
+  .thumb-brief
+    img {
+      max-width: 48px;
+    }
+  }
+
+pre {
+  white-space: pre-wrap;
+  max-height: 300px;
+  font-size: 0.7em;
+}

projects/public-search/src/app/document-brief/document-brief.component.spec.ts

@@ -16,16 +16,22 @@
  */
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { CoreModule, SharedModule } from '@rero/ng-core';
 
+import { MefTitlePipe } from './../pipes/mef-title.pipe';
+import { BirthDatePipe } from './../pipes/birth-date.pipe';
+import { BioInformationsPipe } from './../pipes/bio-informations.pipe';
 import { DocumentBriefComponent } from './document-brief.component';
+import { HttpClientModule } from '@angular/common/http';
 
 describe('DocumentBriefComponent', () => {
   let component: DocumentBriefComponent;
   let fixture: ComponentFixture<DocumentBriefComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DocumentBriefComponent ]
+      declarations: [ DocumentBriefComponent, MefTitlePipe, BirthDatePipe, BioInformationsPipe ],
+      imports: [ CoreModule, SharedModule, HttpClientModule ]
     })
     .compileComponents();
   }));

projects/public-search/src/app/document-brief/document-brief.component.ts

@@ -16,17 +16,76 @@
  */
 
 import { Component, Input } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { RecordService as LocalRecordService } from '../record.service';
 
 @Component({
   selector: 'public-search-document-brief',
-  templateUrl: './document-brief.component.html'
+  templateUrl: './document-brief.component.html',
+  styleUrls: ['./document-brief.component.scss']
 })
 export class DocumentBriefComponent {
 
-  @Input()
-  record: any;
+  // TODO: adapt following line when issue #23 of ng-core is closed
+  private pathArray = window.location.pathname.split('/');
 
   @Input()
-  type: string;
+  set record(value) {
+    if (value !== undefined) {
+      this.Record = value;
+      this.coverUrl = `/static/images/icon_${value.metadata.type}.png`;
+      if (value.metadata.cover_art) {
+        this.coverUrl = value.metadata.cover_art;
+      } else if (value.metadata.identifiedBy) {
+        let isbn;
+        for (const identifier of value.metadata.identifiedBy) {
+          if (identifier.type === 'bf:Isbn') {
+            isbn = identifier.value;
+          }
+        }
+        if (isbn) {
+          this.getCover(isbn);
+        }
+      }
+    }
+  }
+
+  get record() {
+    return this.Record;
+  }
+
+  private Record: any;
+
+  coverUrl: string;
+
+  // TODO: adapt following line when issue #23 of ng-core is closed
+  public view = this.pathArray[1];
+
+  constructor(
+    private translate: TranslateService,
+    private localRecordService: LocalRecordService
+  ) {  }
+
+    /**
+     * Get author name
+     */
+  authorName(author) {
+    const nameIndex = `name_${this.translate.currentLang}`;
+    let nameLng = author[nameIndex];
+    if (!nameLng) {
+      nameLng = author.name;
+    }
+    return nameLng;
+  }
 
+    /**
+     * Load cover image
+     */
+  getCover(isbn: string) {
+    this.localRecordService.getCover(isbn).subscribe(result => {
+      if (result.success) {
+        this.coverUrl = result.image;
+      }
+    });
+  }
 }

projects/public-search/src/app/person-brief/person-brief.component.html

@@ -0,0 +1,28 @@
+<!--
+ RERO ILS UI
+ Copyright (C) 2019 RERO
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, version 3 of the License.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+<div *ngIf="record">
+<h5 class="card-title mb-0 rero-ils-person">
+  <a href="{{'/'+ view +'/persons/'+record.metadata.pid}}">{{record.metadata | mefTitle}}</a>
+  <small *ngIf="record.metadata.rero" class="badge badge-secondary ml-1">RERO</small>
+  <small *ngIf="record.metadata.gnd" class="badge badge-secondary ml-1">GND</small>
+  <small *ngIf="record.metadata.bnf" class="badge badge-secondary ml-1">BNF</small>
+</h5>
+<div class="card-text px-2">
+  <p class="mb-0" *ngIf="record.metadata | birthDate">{{ record.metadata | birthDate }}</p>
+  <p class="mb-0" *ngIf="record.metadata | bioInformations">{{ record.metadata | bioInformations }}</p>
+</div>
+</div>