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

package.json

@@ -2,7 +2,11 @@
   "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",

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,13 +1,16 @@
 <h3>Search</h3>
 <form #searchForm="ngForm">
   <mat-form-field>
-    <mat-select [(ngModel)]="selectedPlugin" name="selectedPlugin" placeholder="Search for:">
+    <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>
+  <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>

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);
   }