Commit 720ef70a authored by Thodoris Nestoridis's avatar Thodoris Nestoridis

Autocomplete prefix(not sendin post)

parent 4f220ffb
......@@ -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
.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
......@@ -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,
......
<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
.example-form {
min-width: 150px;
max-width: 500px;
width: auto;
}
.example-full-width {
width: 100%;
}
\ No newline at end of file
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);
});
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment