Added retrieval and set of search options for the Bibles plugin, allowing to change the Bible version from the remote

package.json

@@ -2,14 +2,18 @@
   "name": "@openlp/web-remote",
   "version": "0.9.4",
   "description": "The web remote for OpenLP, written in Angular",
-  "keywords": ["OpenLP", "Angular", "Remote"],
+  "keywords": [
+    "OpenLP",
+    "Angular",
+    "Remote"
+  ],
   "homepage": "https://openlp.org/",
   "bugs": "https://gitlab.com/openlp/web-remote",
   "license": "GPL-3.0-or-later",
   "author": "OpenLP Developers",
   "repository": {
-    "type" : "git",
-    "url" : "https://gitlab.com/openlp/web-remote.git"
+    "type": "git",
+    "url": "https://gitlab.com/openlp/web-remote.git"
   },
   "scripts": {
     "ng": "ng",

src/app/app.module.ts

@@ -24,6 +24,7 @@ import { AppRoutingModule } from './app.routing';
 import { ServiceComponent } from './components/service/service.component';
 import { AlertComponent } from './components/alert/alert.component';
 import { SearchComponent } from './components/search/search.component';
+import { SearchOptionsComponent } from './components/search/search-options/search-options.component';
 import { SlidesComponent } from './components/slides/slides.component';
 import { FormsModule } from '@angular/forms';
 import { ChordViewComponent } from './components/chord-view/chord-view.component';
@@ -45,6 +46,7 @@ import { ThemesComponent } from './components/themes/themes.component';
     ServiceComponent,
     AlertComponent,
     SearchComponent,
+    SearchOptionsComponent,
     SlidesComponent,
     ThemesComponent
   ],

src/app/components/search/search-options/search-options.component.html

@@ -0,0 +1,8 @@
+<mat-form-field >
+  <mat-select [(ngModel)]="selectedSearchOption" (selectionChange)="setSearchOption($event)" name="selectedSearchOption" [placeholder]="searchOptionsTitle">
+    <mat-option *ngFor="let option of searchOptions" name="searchOptions" [value]="option">
+      {{option}}
+    </mat-option>
+  </mat-select>
+</mat-form-field>
+<br>

src/app/components/search/search-options/search-options.component.scss

@@ -0,0 +1,3 @@
+mat-form-field {
+  width: 100%;
+}

src/app/components/search/search-options/search-options.component.ts

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+
+import { OpenLPService } from '../../../openlp.service';
+
+@Component({
+  selector: 'openlp-search-options',
+  templateUrl: './search-options.component.html',
+  styleUrls: ['./search-options.component.scss'],
+  providers: [OpenLPService]
+})
+export class SearchOptionsComponent {
+  public selectedPlugin: string;
+  public searchOptions: Array<string>;
+  public selectedSearchOption: string;
+  public searchOptionsTitle: String = '';
+
+  constructor(private openlpService: OpenLPService) {}
+
+  // Used to display search-options for certain plugins
+  onPluginChange(plugin) {
+    this.selectedPlugin = plugin;
+    if (this.selectedPlugin === 'bibles') {
+      this.searchOptionsTitle = 'Bible version:';
+      this.getSearchOptions();
+    }
+  }
+
+  getSearchOptions() {
+    this.openlpService.getSearchOptions(this.selectedPlugin).subscribe(res => {
+      if (this.selectedPlugin === 'bibles') {
+        this.searchOptions = res['bibles'];
+        this.selectedSearchOption = res['primary'];
+      }
+    });
+  }
+
+  setSearchOption(option) {
+    this.openlpService.setSearchOption(this.selectedPlugin, option.value).subscribe(res => {});
+    this.selectedSearchOption = option.value;
+  }
+}

src/app/components/search/search.component.html

@@ -1,18 +1,21 @@
 <h3>Search</h3>
 <form #searchForm="ngForm">
-<mat-form-field>
-    <mat-select [(ngModel)]="selectedPlugin" name="selectedPlugin" placeholder="Search for:">
-  <mat-option *ngFor="let plugin of searchPlugins" name="searchPlugins" [value]="plugin.key">
-    {{plugin.name}}
-  </mat-option>
-</mat-select>
-</mat-form-field>
-<br>
-<mat-form-field>
-  <input matInput [(ngModel)]="searchText" name="searchText" placeholder="Search Text" required>
-</mat-form-field>
+  <mat-form-field>
+    <mat-select [(ngModel)]="selectedPlugin" (selectionChange)="onPluginChange($event)" name="selectedPlugin" placeholder="Search for:">
+      <mat-option *ngFor="let plugin of searchPlugins" name="searchPlugins" [value]="plugin.key">
+        {{plugin.name}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
   <br>
-<button mat-raised-button id="searchButton" color="primary" [disabled]="!searchForm.form.valid" (click)="onSubmit()">Search</button>
+  <div [hidden]="!displaySearchOptions">
+    <openlp-search-options></openlp-search-options>
+  </div>
+  <mat-form-field>
+    <input matInput [(ngModel)]="searchText" name="searchText" placeholder="Search Text" required>
+  </mat-form-field>
+  <br>
+  <button mat-raised-button id="searchButton" color="primary" [disabled]="!searchForm.form.valid" (click)="onSubmit()">Search</button>
 </form>
 <div *ngIf="searchResults">
   <h3>Search Results:</h3>

src/app/components/search/search.component.ts

@@ -1,8 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 
 import { OpenLPService } from '../../openlp.service';
 import { PageTitleService } from '../../page-title.service';
 import { PluginDescription } from '../../responses';
+import { SearchOptionsComponent } from './search-options/search-options.component';
 
 @Component({
   selector: 'openlp-search',
@@ -16,6 +17,8 @@ export class SearchComponent implements OnInit {
   public searchResults = null;
   public selectedPlugin = 'songs';
   public currentPlugin: string;
+  public displaySearchOptions: Boolean = false;
+  @ViewChild(SearchOptionsComponent, {static: false}) searchOptions: SearchOptionsComponent;
 
   constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService) {
     pageTitleService.changePageTitle('Search');
@@ -26,6 +29,19 @@ export class SearchComponent implements OnInit {
     this.openlpService.search(this.currentPlugin, this.searchText).subscribe(items => this.searchResults = items);
   }
 
+  // Used to display search-options for certain plugins
+  onPluginChange() {
+    if (this.selectedPlugin === 'bibles') {
+      this.searchOptions.onPluginChange(this.selectedPlugin);
+      this.displaySearchOptions = true;
+    }
+    else {
+      if (this.displaySearchOptions) {
+        this.displaySearchOptions = false;
+      }
+    }
+  }
+
   sendLive(id) {
     this.openlpService.sendItemLive(this.currentPlugin, id).subscribe(res => {});
   }

src/app/openlp.service.ts

@@ -82,6 +82,14 @@ export class OpenLPService {
     return this.http.get(`${this.apiURL}/plugins/${plugin}/search?text=${text}`, httpOptions);
   }
 
+  getSearchOptions(plugin): Observable<any> {
+    return this.http.get(`${this.apiURL}/plugins/${plugin}/search-options`, httpOptions);
+  }
+
+  setSearchOption(plugin, option): Observable<any> {
+    return this.http.post(`${this.apiURL}/plugins/${plugin}/search-options`, {'option': option}, httpOptions);
+  }
+
   getServiceItems(): Observable<ServiceItem[]> {
     return this.http.get<ServiceItem[]>(`${this.apiURL}/service/items`, httpOptions);
   }