Skip to content

Commit

Permalink
Merge pull request #99 from RandyInVictoria/search
Browse files Browse the repository at this point in the history 
MEM-577 Use new search API calls: Displaying X out of Y Results
  • Loading branch information
@marklise
marklise authored Nov 3, 2017
2 parents 2f1891c + ea96821 commit 30d6ab1
Show file tree
Hide file tree
Showing 3 changed files with 167 additions and 157 deletions.
293 changes: 147 additions & 146 deletions src/app/search/search.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,157 +1,158 @@
<div class="spinner-container full-screen" *ngIf="loading" [@visibility]>
<div class="spinner-new rotating"></div>
<div class="spinner-new rotating"></div>
</div>

<div class="hero-banner search-banner">
<div class="container">
<div class="container__inner-container">
<div class="hero-banner__content">
<h1 id="pgTitle">Find Documents...</h1>

<form #f="ngForm" class="search-form ui form" (ngSubmit)="onSubmit()">

<div class="search-form__basic-search-fields">
<div class="form-group mb-0">
<input class="form-control" type="text" placeholder="Enter Keywords..." name="keywordInput" id="keywordInput"
[disabled]="protoSearchActive" [(ngModel)]="terms.keywords"/>
</div>
</div>

<div class="search-form__advanced-search-fields mt-4" id="advancedSearchFields" [hidden]="!showAdvancedFields">
<div class="form-group mb-4">
<label for="projects">Project</label>
<tag-input class="form-control" name='projectInput'
[secondaryPlaceholder]="'Enter a Project Name'"
[identifyBy]="'_id'"
[displayBy]="'name'"
[(ngModel)]="terms.projects">
<tag-input-dropdown
[identifyBy]="'_id'"
[displayBy]="'name'"
[autocompleteItems]="projects">
</tag-input-dropdown>
</tag-input>
</div>
<div class="form-group mb-4">
<label for="operatorInput">Operator</label>
<tag-input class="form-control" name='operatorInput'
[secondaryPlaceholder]="'Enter an Operator Name'"
[identifyBy]="'_id'"
[displayBy]="'company'"
[(ngModel)]="terms.proponents">
<tag-input-dropdown
[identifyBy]="'_id'"
[displayBy]="'company'"
[autocompleteItems]="proponents">
</tag-input-dropdown>
</tag-input>
</div>
<div class="form-group mb-4">
<label for="ownerInput">Owner</label>
<tag-input class="form-control" name='ownerInput'
[secondaryPlaceholder]="'Enter an Owner Name'"
[identifyBy]="'_id'"
[displayBy]="'company'"
[(ngModel)]="terms.ownerships">
<tag-input-dropdown
[identifyBy]="'_id'"
[displayBy]="'company'"
[autocompleteItems]="proponents">
</tag-input-dropdown>
</tag-input>
</div>
<div class="form-group mb-0">
<label>Date Range</label>
<div class="form-inline">
<label class="sr-only" for="dateRangeStart">Start Date</label>
<input class="form-control" type="text" placeholder="Start Date" name="dateRangeStartInput" id="dateRangeStart"
#dateRangeStart="ngbDatepicker"
ngbDatepicker
readonly
[disabled]="protoSearchActive"
(click)="dateRangeStart.toggle();dateRangeEnd.close();"
[(ngModel)]="terms.dateStart"/>
<span class="date-range__spacer"> &nbsp;&nbsp; - &nbsp;&nbsp; </span>
<label class="sr-only" for="dateRangeEnd">End Date</label>
<input class="form-control" type="text" placeholder="End Date" name="dateRangeEndInput" id="dateRangeEnd"
#dateRangeEnd="ngbDatepicker"
ngbDatepicker
readonly
[disabled]="protoSearchActive"
(click)="dateRangeEnd.toggle();dateRangeStart.close();"
[(ngModel)]="terms.dateEnd"/>
</div>
</div>
</div>

<div class="search-form__btn-container">
<button class="search-form__search-btn btn btn-primary slide-l-btn"
[hidden]="protoSearchActive"
type="submit">
<i class="material-icons">search</i><span>Search</span>
</button>

<button class="search-form__search-btn btn btn-primary slide-l-btn"
[hidden]="!protoSearchActive"
disabled>
<i class="material-icons">search</i><span>Searching...</span>
</button>

<button class="search-form__toggle-advanced-btn btn btn-link" type="button" (click)="toggleAdvancedSearch()">
<span *ngIf="!showAdvancedFields">
<i class="material-icons">add_box</i> Show Advanced
</span>
<span *ngIf="showAdvancedFields">
<i class="material-icons">indeterminate_check_box</i> Hide Advanced
</span>
</button>
</div>

</form>
<div class="container">
<div class="container__inner-container">
<div class="hero-banner__content">
<h1 id="pgTitle">Find Documents...</h1>

<form #f="ngForm" class="search-form ui form" (ngSubmit)="onSubmit()">

<div class="search-form__basic-search-fields">
<div class="form-group mb-0">
<input class="form-control" type="text" placeholder="Enter Keywords..." name="keywordInput" id="keywordInput"
[disabled]="protoSearchActive" [(ngModel)]="terms.keywords"/>
</div>
</div>

<div class="search-form__advanced-search-fields mt-4" id="advancedSearchFields" [hidden]="!showAdvancedFields">
<div class="form-group mb-4">
<label for="projects">Project</label>
<tag-input class="form-control" name='projectInput'
[secondaryPlaceholder]="'Enter a Project Name'"
[identifyBy]="'_id'"
[displayBy]="'name'"
[(ngModel)]="terms.projects">
<tag-input-dropdown
[identifyBy]="'_id'"
[displayBy]="'name'"
[autocompleteItems]="projects">
</tag-input-dropdown>
</tag-input>
</div>
<div class="form-group mb-4">
<label for="operatorInput">Operator</label>
<tag-input class="form-control" name='operatorInput'
[secondaryPlaceholder]="'Enter an Operator Name'"
[identifyBy]="'_id'"
[displayBy]="'company'"
[(ngModel)]="terms.proponents">
<tag-input-dropdown
[identifyBy]="'_id'"
[displayBy]="'company'"
[autocompleteItems]="proponents">
</tag-input-dropdown>
</tag-input>
</div>
<div class="form-group mb-4">
<label for="ownerInput">Owner</label>
<tag-input class="form-control" name='ownerInput'
[secondaryPlaceholder]="'Enter an Owner Name'"
[identifyBy]="'_id'"
[displayBy]="'company'"
[(ngModel)]="terms.ownerships">
<tag-input-dropdown
[identifyBy]="'_id'"
[displayBy]="'company'"
[autocompleteItems]="proponents">
</tag-input-dropdown>
</tag-input>
</div>
<div class="form-group mb-0">
<label>Date Range</label>
<div class="form-inline">
<label class="sr-only" for="dateRangeStart">Start Date</label>
<input class="form-control" type="text" placeholder="Start Date" name="dateRangeStartInput" id="dateRangeStart"
#dateRangeStart="ngbDatepicker"
ngbDatepicker
readonly
[disabled]="protoSearchActive"
(click)="dateRangeStart.toggle();dateRangeEnd.close();"
[(ngModel)]="terms.dateStart"/>
<span class="date-range__spacer"> &nbsp;&nbsp; - &nbsp;&nbsp; </span>
<label class="sr-only" for="dateRangeEnd">End Date</label>
<input class="form-control" type="text" placeholder="End Date" name="dateRangeEndInput" id="dateRangeEnd"
#dateRangeEnd="ngbDatepicker"
ngbDatepicker
readonly
[disabled]="protoSearchActive"
(click)="dateRangeEnd.toggle();dateRangeStart.close();"
[(ngModel)]="terms.dateEnd"/>
</div>
</div>
</div>
</div>

<div class="search-form__btn-container">
<button class="search-form__search-btn btn btn-primary slide-l-btn"
[hidden]="protoSearchActive"
type="submit">
<i class="material-icons">search</i><span>Search</span>
</button>

<button class="search-form__search-btn btn btn-primary slide-l-btn"
[hidden]="!protoSearchActive"
disabled>
<i class="material-icons">search</i><span>Searching...</span>
</button>

<button class="search-form__toggle-advanced-btn btn btn-link" type="button" (click)="toggleAdvancedSearch()">
<span *ngIf="!showAdvancedFields">
<i class="material-icons">add_box</i> Show Advanced
</span>
<span *ngIf="showAdvancedFields">
<i class="material-icons">indeterminate_check_box</i> Hide Advanced
</span>
</button>
</div>

</form>

</div>
</div>
</div>
</div>

<div class="container" id="anchor-point">
<main>

<!-- SEARCH RESULTS TEMPLATE -->
<section class="add-spacer" *ngIf="ranSearch">
<h2 class="search-results__title" *ngIf="ranSearch && results && results.length > 0">Showing {{results.length}} Document<span *ngIf="results.length > 1">s</span></h2>
<ul class="search-results list-group">
<li *ngFor="let item of results" class="list-group-item search-results-item">
<h3 class="search-results-item__project-name"
*ngIf="item.project.name">{{item.project.name}}
</h3>
<a class="search-results-item__title mb-0" href="{{item.hostname}}/api/document/{{item._id}}/fetch"
target="_blank">{{item.displayName}}</a>
<div class="search-results-item__meta">{{item.documentDate | date:'yyyy-MM-dd'}}</div>
<div class="search-results-item__description mt-3"
*ngIf="item.description">{{item.description}}
</div>
</li>
</ul>

<section class="search-results__no-results" *ngIf="results && results.length < 1" >
<h2>No Documents Found</h2>
<p class="mb-0">Sorry, we were unable to locate any documents matching your search criteria.</p>
</section>

<div class="search-results__footer mt-3" *ngIf="ranSearch && noMoreResults">
<button class="btn content-btn-alt" disabled>No More Results</button>
</div>

<div class="search-results__footer mt-3" *ngIf="ranSearch && results && results.length > 0 && !noMoreResults">
<button class="btn content-btn-alt" (click)="loadMore()">Show More</button>
</div>

</section>

<section>
<h2>How to use this page...</h2>
<p>You can use this tool to search for documents available on the BC Mine Information website. The advanced search feature allows you to narrow your search results by mine, proponent/operator, and/or a specific date range. At this time, search results generated by this tool do not include the contents of individual documents.</p>
</section>
</main>
<main>

<!-- SEARCH RESULTS TEMPLATE -->
<section class="add-spacer" *ngIf="ranSearch">
<h2 class="search-results__title" *ngIf="ranSearch && results && results.length > 0">Showing {{results.length}} out of {{count}} Document<span *ngIf="count != 1">s</span></h2>
<ul class="search-results list-group">
<li *ngFor="let item of results" class="list-group-item search-results-item">
<h3 class="search-results-item__project-name"
*ngIf="item.project.name">{{item.project.name}}
</h3>
<a class="search-results-item__title mb-0" href="{{item.hostname}}/api/document/{{item._id}}/fetch"
target="_blank">{{item.displayName}}</a>
<div class="search-results-item__meta">{{item.documentDate | date:'yyyy-MM-dd'}}</div>
<div class="search-results-item__description mt-3"
*ngIf="item.description">{{item.description}}
</div>
</li>
</ul>

<section class="search-results__no-results" *ngIf="results && results.length < 1" >
<h2>No Documents Found</h2>
<p class="mb-0">Sorry, we were unable to locate any documents matching your search criteria.</p>
</section>

<div class="search-results__footer mt-3" *ngIf="ranSearch && noMoreResults">
<button class="btn content-btn-alt" disabled>No More Results</button>
</div>

<div class="search-results__footer mt-3" *ngIf="ranSearch && results && results.length > 0 && !noMoreResults">
<button class="btn content-btn-alt" (click)="loadMore()">Show More</button>
</div>

<h2 class="search-results__title" *ngIf="ranSearch && results && results.length > 0">Showing {{results.length}} out of {{count}} Document<span *ngIf="count != 1">s</span></h2>
</section>

<section>
<h2>How to use this page...</h2>
<p>You can use this tool to search for documents available on the BC Mine Information website. The advanced search feature allows you to narrow your search results by mine, proponent/operator, and/or a specific date range. At this time, search results generated by this tool do not include the contents of individual documents.</p>
</section>
</main>
</div>
11 changes: 8 additions & 3 deletions src/app/search/search.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export class SearchComponent implements OnInit {
results: Search[];
page: number;
limit: number;
count: number;
noMoreResults: boolean;
ranSearch: boolean;
projects: Array<Project>;
Expand Down Expand Up @@ -161,18 +162,22 @@ export class SearchComponent implements OnInit {
doSearch() {
this.ranSearch = true;
this.loading = true;
this.count = 0;
this.documentService.get(this.terms, this.projects, this.proponents, this.page, this.limit).subscribe(
data => {
// Push in 1st call
data[0].forEach(i => {
data[0].results.forEach(i => {
this.results.push(i);
});
// push in 2nd call
data[1].forEach(i => {
data[1].results.forEach(i => {
this.results.push(i);
});

this.count = data[0].count + data[1].count;

this.loading = false;
this.noMoreResults = (data[0].length === 0 && data[1].length === 0);
this.noMoreResults = (data[0].results.length === 0 && data[1].results.length === 0);

// Needed in development mode - not required in prod.
this._changeDetectionRef.detectChanges();
Expand Down
20 changes: 12 additions & 8 deletions src/app/services/document.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,20 +125,24 @@ export class DocumentService {

// Field selection
query += '&fields=_id project displayName documentDate description datePosted documentCategories collections keywords inspectionReport';
const mem = this.api.getMEM(query + memProjectQuery)
const mem = this.api.getMEM(`v2/${query}${memProjectQuery}`)
.map((res: Response) => {
const data = res.text() ? res.json() : [];
data.forEach(i => {
const data = res.text() ? res.json() : { count: 0, results: [] };
if (data.results) {
data.results.forEach(i => {
i.hostname = this.api.hostnameMEM;
});
});
}
return data;
});
const epic = this.api.getEPIC(`v2/${query}${epicProjectQuery}`)
const epic = this.api.getEPIC(`v3/${query}${epicProjectQuery}`)
.map((res: Response) => {
const data = res.text() ? res.json() : [];
data.forEach(i => {
const data = res.text() ? res.json() : { count: 0, results: [] };
if (data && data.results) {
data.results.forEach(i => {
i.hostname = this.api.hostnameEPIC;
});
});
}
return data;
});

Expand Down

0 comments on commit 30d6ab1

Please sign in to comment.