Autocomplete prefix(not sendin post)

reqtool/ReqmanAngular11/src/app/components/boilerplate-details/boilerplate-details.component.html

@@ -12,16 +12,17 @@
             name="title"
           />
         </div>
-        <div class="form-group">
-            <label for="has_prefix">Prefix</label>
-            <input
-              type="checkbox"
-              class="form-control"
-              id="has_prefix"
-              [(ngModel)]="currentboilerplate.has_prefix"
-              name="has_prefix"
-            />
-          </div>
+        <div style="display: flex; flex-grow: grow">
+          <form class="example-form form-inline">
+              <mat-checkbox class="example-full-width"
+                [(ngModel)]="currentboilerplate.has_prefix"
+                name="has_prefix"
+              >Prefix
+              </mat-checkbox>
+          </form>
+          
+            <app-prefix-details></app-prefix-details>
+        </div>
         <div class="form-group">
           <label for="has_main">Main</label>
           <input
@@ -58,12 +59,10 @@
       <p>{{ message }}</p>
     </div>
     <!---->
-    <app-prefix-details></app-prefix-details>
-    <app-prefix-list></app-prefix-list>
+    <!--<app-prefix-list></app-prefix-list>-->
     <!---->
     <div *ngIf="!currentboilerplate.id">
-      <br />
-      <p>Cannot access this Boilerplate...</p>
+      <mat-spinner style="margin: auto;"></mat-spinner>
     </div>
   </div>
   
\ No newline at end of file

reqtool/ReqmanAngular11/src/app/components/boilerplate-details/boilerplate-details.component.scss

 .edit-form {
-    max-width: 400px;
+    max-width: 90%;
     margin: auto;
   }
-  
\ No newline at end of file
+
+  .example-form {
+    min-width: 150px;
+    max-width: 90%;
+    width: auto;
+  }
+  
+  .example-full-width {
+    width: auto;
+  }
\ No newline at end of file

reqtool/ReqmanAngular11/src/app/components/boilerplate-details/boilerplate-details.component.ts

@@ -9,6 +9,7 @@ import { BoilerplateService } from 'src/app/services/boilerplate.service';
   styleUrls: ['./boilerplate-details.component.scss']
 })
 export class BoilerplateDetailsComponent implements OnInit {
+  
 
   currentboilerplate: Boilerplate = {
     has_prefix: false,
@@ -16,6 +17,7 @@ export class BoilerplateDetailsComponent implements OnInit {
     has_suffix: false
   };
   message = '';
+  
 
   constructor(
     private boilerplateService: BoilerplateService,

reqtool/ReqmanAngular11/src/app/components/prefix-details/prefix-details.component.html

-<p>prefix-details works!</p>
+<form class="form-group form-inline">
+  <mat-form-field class="example-full-width">
+    <mat-label>Prefix</mat-label>
+    <input type="text"
+           placeholder="Pick one"
+           aria-label="Number"
+           matInput
+           [formControl]="simpleprefixControl"
+           [matAutocomplete]="autosimpleprefix"
+           >
+    <mat-autocomplete autoActiveFirstOption #autosimpleprefix="matAutocomplete">
+      <mat-option *ngFor="let option of simpleprefixfilteredOptions  | async" [value]="option">
+        {{option}}
+      </mat-option>
+    </mat-autocomplete>
+  </mat-form-field>
+</form>
+<form class="example-form form-inline">
+  <mat-form-field>
+    <mat-label>Subject</mat-label>
+    <input type="text"
+           placeholder="Pick one"
+           aria-label="Number"
+           matInput
+           [formControl]="subjectsControl"
+           [matAutocomplete]="autosub"
+           >
+    <mat-autocomplete autoActiveFirstOption #autosub="matAutocomplete">
+      <mat-option *ngFor="let option of subjectsfilteredOptions  | async" [value]="option">
+        {{option}}
+      </mat-option>
+    </mat-autocomplete>
+  </mat-form-field>
+</form>
+
+
+<!--
 <ng-container *ngFor= "let prefix of simpleprefix">
     <ul>
       <li>{{prefix[1]}}</li>
-    </ul>
\ No newline at end of file
+    </ul>
+  -->
\ No newline at end of file

reqtool/ReqmanAngular11/src/app/components/prefix-details/prefix-details.component.scss

+.example-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: auto;
+  }
+  
+  .example-full-width {
+    width: 100%;
+  }
\ No newline at end of file

reqtool/ReqmanAngular11/src/app/components/prefix-details/prefix-details.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Prefix } from 'src/app/models/prefix.model';
 import { PrefixService } from 'src/app/services/prefix.service';
+import {FormControl} from '@angular/forms';
+import {Observable} from 'rxjs';
+import {map, startWith} from 'rxjs/operators';
 
 @Component({
   selector: 'app-prefix-details',
@@ -9,6 +12,17 @@ import { PrefixService } from 'src/app/services/prefix.service';
   
 })
 export class PrefixDetailsComponent implements OnInit {
+  simpleprefixControl = new FormControl();
+  simpleprefix:string[] = [];
+  simpleprefixfilteredOptions: Observable<string[]>;
+  
+  subjectsControl = new FormControl();
+  subjects:string[] = [];
+  subjectsfilteredOptions: Observable<string[]>;
+  
+  verbs = [];
+  objects = [];
+  logic_con = [];
 
   //for the moment only one prefix can showed/updates
   currentprefix: Prefix  = {
@@ -21,22 +35,30 @@ export class PrefixDetailsComponent implements OnInit {
     simple_prefix: "",
   };
   message = '';
-  simpleprefix = [];
-  subjects = [];
-  verbs = [];
-  objects = [];
-  logic_con = [];
+  
 
+  constructor(private prefixService: PrefixService) {
+      this.simpleprefixfilteredOptions = this.simpleprefixControl.valueChanges.pipe(
+        startWith(""),
+        map(value => this._filter(this.simpleprefix, value))
+      );
+      this.subjectsfilteredOptions = this.subjectsControl.valueChanges.pipe(
+        startWith(""),
+        map(value => this._filter(this.subjects, value))
+      );
+     }
 
+  ngOnInit(): void { this.getchoices(); }
+   
+  private _filter(data:string[], value: string): string[] {
+    const filterValue = value.toLowerCase();
 
-  constructor(
-    private prefixService: PrefixService) { }
+    return data.filter(option => option.toLowerCase().indexOf(filterValue) === 0);
+  }
 
-  ngOnInit(): void { this.getchoices();
-   }
 
-  getPrefix(boilerplate: any, id: string): void {
-    this.prefixService.get(boilerplate, id)
+  getPrefix(prefix: any, id: string): void {
+    this.prefixService.get(prefix, id)
       .subscribe(
         data => {
           this.currentprefix = data;
@@ -47,11 +69,28 @@ export class PrefixDetailsComponent implements OnInit {
         });
   }
 
+// to be done
+  updateBoilerplate(): void {
+    //this.simpleprefix = 
+    /*this.prefixService.update()
+      .subscribe(
+        response => {
+          console.log(response);
+          this.message = response.message;
+        },
+        error => {
+          console.log(error);
+        });*/
+  }
+  
+
   getchoices(): void{
   this.prefixService.getsimpleprefix()
     .subscribe(
       data => {
-        this.simpleprefix = data;
+        for (let x=0; x < data.length; x++ ){
+        this.simpleprefix.push(data[x][1]);}
+        //this.simpleprefix = data;
       },
       error => {
         console.log(error);
@@ -75,7 +114,9 @@ export class PrefixDetailsComponent implements OnInit {
   this.prefixService.getsubject()
     .subscribe(
       data => {
-        this.subjects = data;
+        for (let x=0; x < data.length; x++ ){
+          this.subjects.push(data[x][1]);}
+        //this.subjects = data;
       },
       error => {
         console.log(error);
@@ -89,5 +130,4 @@ export class PrefixDetailsComponent implements OnInit {
         console.log(error);
       });
   }
-
 }