search.component.html 1.73 KB
Newer Older
1

Paulo's avatar
Paulo committed
2
  <nb-card>
Paulo's avatar
Paulo committed
3
    <nb-card-body class="example-items-col">
4
      <form [formGroup]="searchForm" (ngSubmit)="simpleSearch(searchForm.value)">
Paulo's avatar
Paulo committed
5
      <label for="search">Search by title or description</label>  
6
7
8
9
10
11
      <input id="search" type="text" 
             nbInput 
             shape="round" 
             placeholder="Search" 
             formControlName="inputSearchTerm"
             required>
Paulo's avatar
Paulo committed
12
      <span>
13
14
15
16
        <button status="info" href="#" 
                nbButton type="submit" 
                value="Search"
                [disabled]="!searchForm.valid">
Paulo's avatar
Paulo committed
17
18
19
          <nb-icon icon="search-outline"></nb-icon> Search 
        </button>
      </span>
20
      <ng-template [ngTemplateOutlet]="results.length > 0 ? dataFound : dataNotFound"></ng-template>
Paulo's avatar
Paulo committed
21
    </form>
22
23
    </nb-card-body>
  </nb-card>
Administrator's avatar
Administrator committed
24

Paulo's avatar
Paulo committed
25
  <div *ngIf="results.length > 0; else notFound" class="w3-container">
Paulo's avatar
Paulo committed
26
    <table class="w3-table-all w3-card-4">    
27
      <thead style="background-color: #3366ff">    
28
        <th style="text-align: center;">Uri (DOI)</th>    
29
30
        <th style="text-align: center;">Title</th>    
        <th style="text-align: center;">Description</th>    
Paulo's avatar
Paulo committed
31
      </thead>    
Paulo's avatar
Paulo committed
32
33
34
35
36
37
      <tbody >
        <tr *ngFor="let result of results">
          <td><a href="{{result.uri.value}}" target="blank">{{result.uri.value}}</a></td>   
          <td>{{result.title.value}}</td>    
          <td>{{result.description.value.substr(0,250)}}</td>    
        </tr>    
Paulo's avatar
Paulo committed
38
    </tbody>
Administrator's avatar
Administrator committed
39
    </table>    
Paulo's avatar
Paulo committed
40
  </div>
Paulo's avatar
Paulo committed
41

42
43
44
45
46
47
  <ng-template #dataFound>
    <p>Found {{results.length}} entries for search term <b><i>{{searchedTerm}}</i></b></p>
  </ng-template>

  <ng-template #dataNotFound>
    <p *ngIf="!firstTime">No results found for search <b><i>{{searchedTerm}}</i></b></p>
Paulo's avatar
Paulo committed
48
  </ng-template>