Skip to content

R
Requirement Formalization Tool
Commit 32b8bb89 authored by Thodoris Nestoridis's avatar Thodoris Nestoridis
Browse files
Options

UI

parent a784914a
Show whitespace changes
Inline Side-by-side
Showing with 130 additions and 76 deletions
reqtool/ReqmanAngular11/src/app/components/boilerplate-details/boilerplate-details.component.html
View file @ 32b8bb89
......@@ -11,9 +11,9 @@
<mat-grid-list cols="2">
<div class="first">
<div *ngIf="get_metrics(currentboilerplate.title)"
style="display:flex; flex-direction: row; align-items: center;margin-bottom: 50px;">
style="display:flex; flex-direction: row; align-items: center;margin-bottom: 50px;" >
<mat-accordion>
<mat-expansion-panel *ngFor="let msection of mes_list" class="alert alert-warning" role="alert">
<mat-expansion-panel class="note note-light" *ngFor="let msection of mes_list" [ngStyle]="{'border-left-color': (msection.type.includes('Opaque') || msection.type.includes('Noisy')) ? '#ffc107' : '#dc3545'}">
<mat-expansion-panel-header>
<mat-panel-title [innerHTML]='msection.Description'>
</mat-panel-title>
......
reqtool/ReqmanAngular11/src/app/components/boilerplate-details/boilerplate-details.component.scss
View file @ 32b8bb89
......@@ -18,11 +18,11 @@
}
.first{
width: 65%;
width: 60%;
}
.second{
width: 35%;
width: 40%;
position: absolute;
top: 1%;
right: 0px;
......@@ -34,3 +34,12 @@
overflow-x: auto;
white-space: nowrap;
}
.note-light {
background-color: #f5f5f5;
border-color: #8c8c8c;
}
.note {
border-left: 6px solid;
margin-bottom:2px;
}
\ No newline at end of file
reqtool/ReqmanAngular11/src/app/components/boilerplate-details/boilerplate-details.component.ts
View file @ 32b8bb89
......@@ -174,15 +174,16 @@ export class BoilerplateDetailsComponent implements OnInit {
let description = ""
let information = ""
if (obj[i][0][this.currentboilerplate.title]?.length > 0) {
console.log(i)
title = '<b>Description : </b>' + obj[i][0]['Comment']
description = 'Invalid instances: ' + '<b>' + obj[i][0][this.currentboilerplate.title] + '</b>'
description = 'Property: <i>' + i + '</i>' +'&nbsp was activated by the instance(s): &nbsp' + '<b>' + obj[i][0][this.currentboilerplate.title] + '</b>'
for (let instances of obj[i][0][this.currentboilerplate.title]) {
information += 'Above there are presented the DSO properties for the instance : <b>' + instances + '</b>'
for (let info of obj[i][0][instances]) { information += '<ul><li>' + info + '</ul></li>' }
}
}
if (title != '' && description != "" && information != "") {
this.mes_list.push({ 'Title': title, 'Description': description, 'Info': information })
this.mes_list.push({ 'Title': title, 'Description': description, 'Info': information, 'type': i })
}
}
}
......
reqtool/ReqmanAngular11/src/app/components/groupboil/groupboil.component.scss
View file @ 32b8bb89
.example-card {
width: 350px;
height: 250px;
margin-right: 5px;
margin-top: 10px;
}
......
reqtool/ReqmanAngular11/src/app/components/main-details/main-details.component.html
View file @ 32b8bb89
......@@ -12,10 +12,10 @@
<mat-label *ngIf="this.subjectsControl.value !=null">Subject :
{{this.subjectsControl.value.split(':')[0]}}:{{this.subjectsControl.value.split(':')[1]}}</mat-label>
<input type="text" placeholder="Pick one" aria-label="Subject" matInput [formControl]="subjectsControl"
required [matAutocomplete]="automainsub" style="width: 100%;">
required [matAutocomplete]="automainsub" style="width: 100%;" (blur)="closed($event, this.subjectsControl)">
<mat-autocomplete autoActiveFirstOption #automainsub="matAutocomplete" showPanel="true"
[displayWith]="displayFn">
<mat-option *ngFor="let option of subjectsfilteredOptions | async" [value]="option">
[displayWith]="displayFn" panelWidth="string" panelWidth="string" >
<mat-option *ngFor="let option of subjectsfilteredOptions | async" [value]="option" >
{{option.split(" : ").pop()}}
</mat-option>
</mat-autocomplete>
......@@ -24,14 +24,14 @@
</div>
<div class="col">
<form class="form-group form-inline"
[ngStyle]="(stateitemControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
[ngStyle]="(stateitemControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden', 'width':'0%'}">
<mat-form-field class="example-full-width">
<mat-label *ngIf="this.stateitemControl.value !=null">State or Item :
{{this.stateitemControl.value.split(':')[0]}}:{{this.stateitemControl.value.split(':')[1]}} </mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="stateitemControl"
[matAutocomplete]="autostateitem">
[matAutocomplete]="autostateitem" (blur)="closed($event, this.stateitemControl)">
<mat-autocomplete autoActiveFirstOption #autostateitem="matAutocomplete" showPanel="true"
[displayWith]="displayFn">
[displayWith]="displayFn" panelWidth="string" panelWidth="string">
<mat-option *ngFor="let option of stateitemfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......@@ -41,14 +41,14 @@
</div>
<div class="col">
<form class="form-group form-inline"
[ngStyle]="(statevalueControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
[ngStyle]="(statevalueControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden', 'width':'0%'}">
<mat-form-field class="example-full-width">
<mat-label *ngIf="statevalueControl.value !=null">State Value :
{{this.statevalueControl.value.split(':')[0]}}:{{this.statevalueControl.value.split(':')[1]}}</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="statevalueControl"
[matAutocomplete]="autostatevalue">
<input type="text" placeholder="Pick one" aria-label="StateValue" matInput [formControl]="statevalueControl"
[matAutocomplete]="autostatevalue" (blur)="closed($event, this.statevalueControl)">
<mat-autocomplete autoActiveFirstOption #autostatevalue="matAutocomplete" showPanel="true"
[displayWith]="displayFn">
[displayWith]="displayFn" panelWidth="string">
<mat-option *ngFor="let option of statevaluefilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......@@ -62,8 +62,8 @@
<form class="form-group form-inline">
<mat-form-field class="example-full-width">
<mat-label>Shall/shall not</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="shallControl" required
[matAutocomplete]="autoshall">
<input type="text" placeholder="Pick one" aria-label="Shall" matInput [formControl]="shallControl" required
[matAutocomplete]="autoshall" (blur)="closed($event, this.shallControl)">
<mat-autocomplete autoActiveFirstOption #autoshall="matAutocomplete">
<mat-option *ngFor="let option of shallfilteredOptions | async" [value]="option">
{{option}}
......@@ -74,14 +74,14 @@
</div>
<div class="col">
<form class="form-group form-inline"
[ngStyle]="(verbControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
[ngStyle]="(verbControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden', 'width':'0%'}">
<mat-form-field class="example-full-width">
<mat-label *ngIf="verbControl.value !=null">Verb :
{{this.verbControl.value.split(':')[0]}}:{{this.verbControl.value.split(':')[1]}}</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="verbControl" required
[matAutocomplete]="autoverb">
<input type="text" placeholder="Pick one" aria-label="Verb" matInput [formControl]="verbControl" required
[matAutocomplete]="autoverb" (blur)="closed($event, this.verbControl)">
<mat-autocomplete autoActiveFirstOption #autoverb="matAutocomplete" showPanel="true"
[displayWith]="displayFn">
[displayWith]="displayFn" panelWidth="string">
<mat-option *ngFor="let option of verbfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......@@ -91,13 +91,14 @@
</div>
<div class="col">
<form class="form-group form-inline"
[ngStyle]="(quantifierControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
[ngStyle]="(quantifierControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden', 'width':'0%'}">
<mat-form-field class="example-full-width">
<mat-label>Quantifier</mat-label>
<input placeholder="Pick one" aria-label="Number" matInput [formControl]="quantifierControl" type="text"
[matAutocomplete]="autoquantifier">
<mat-label *ngIf="quantifierControl.value !=null">Quantifier :
{{this.quantifierControl.value.split(':')[1]}}</mat-label>
<input placeholder="Pick one" aria-label="Quantifier" matInput [formControl]="quantifierControl" type="text"
[matAutocomplete]="autoquantifier" (blur)="closed($event, this.quantifierControl)">
<mat-autocomplete autoActiveFirstOption #autoquantifier="matAutocomplete" showPanel="true"
[displayWith]="displayFn">
[displayWith]="displayFn" panelWidth="string">
<mat-option *ngFor="let option of quantifierfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......@@ -106,9 +107,10 @@
</form>
</div>
<!--NUmber Value-->
<div class="form-row">
<div class="col">
<form class="form-group form-inline"
[ngStyle]="(numericalisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
[ngStyle]="(numericalisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden', 'width':'0%'}">
<mat-form-field class="example-full-width">
<mat-label>Numerical Value</mat-label>
<input type="text" matInput [(ngModel)]="currentmain.numerical" name="numerical">
......@@ -117,13 +119,13 @@
</div>
<div class="col">
<form class="form-group form-inline"
[ngStyle]="(numunitControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
[ngStyle]="(numunitControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden', 'width':'0%'}">
<mat-form-field class="example-full-width">
<mat-label>Number Unit</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="numunitControl"
[matAutocomplete]="autonumunit">
[matAutocomplete]="autonumunit" (blur)="closed($event, this.numunitControl)">
<mat-autocomplete autoActiveFirstOption #autonumunit="matAutocomplete" showPanel="true"
[displayWith]="displayFn">
[displayWith]="displayFn" panelWidth="string">
<mat-option *ngFor="let option of numunitfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......@@ -132,6 +134,7 @@
</form>
</div>
</div>
</div>
<!-- <mat-label *ngIf=".value !=null">State or Item : {{.value.slice(0, .value.indexOf(':'))}}</mat-label> -->
<div class="form-row">
<div class="col">
......@@ -140,10 +143,11 @@
<mat-label *ngIf="fifuintsysstatsetControl.value !=null">Object :
{{this.fifuintsysstatsetControl.value.split(':')[0]}}:{{this.fifuintsysstatsetControl.value.split(':')[1]}}
</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput
[formControl]="fifuintsysstatsetControl" required [matAutocomplete]="autofifuintsysstatset">
<input type="text" placeholder="Pick one" aria-label="Item" matInput
[formControl]="fifuintsysstatsetControl" required [matAutocomplete]="autofifuintsysstatset"
(blur)="closed($event, this.fifuintsysstatsetControl)">
<mat-autocomplete autoActiveFirstOption #autofifuintsysstatset="matAutocomplete" showPanel="true"
[displayWith]="displayFn">
[displayWith]="displayFn" panelWidth="string">
<mat-option *ngFor="let option of fifuintsysstatsetfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......@@ -153,15 +157,15 @@
</div>
<div class="col">
<form class="form-group form-inline"
[ngStyle]="(stsysconsetControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
[ngStyle]="(stsysconsetControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden', 'width':'0%'}">
<mat-form-field class="example-full-width">
<mat-label *ngIf="stsysconsetControl.value !=null">StateSet or StateValue or System or Connection :
{{this.stsysconsetControl.value.split(':')[0]}}:{{this.stsysconsetControl.value.split(':')[1]}}
</mat-label>
<input placeholder="Pick one" aria-label="Number" type="text" matInput [formControl]="stsysconsetControl"
[matAutocomplete]="autostsysconset">
<input placeholder="Pick one" aria-label="stsysconset" type="text" matInput [formControl]="stsysconsetControl"
[matAutocomplete]="autostsysconset" (blur)="closed($event, this.stsysconsetControl)">
<mat-autocomplete autoActiveFirstOption #autostsysconset="matAutocomplete" showPanel="true"
[displayWith]="displayFn">
[displayWith]="displayFn" panelWidth="string">
<mat-option *ngFor="let option of stsysconsetfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......
reqtool/ReqmanAngular11/src/app/components/main-details/main-details.component.ts
View file @ 32b8bb89
......@@ -7,6 +7,7 @@ import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
import { NotifierService } from "angular-notifier";
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
export const statesetfordialog: string[] = [];
export const systemfordialog: string[] = [];
......@@ -95,6 +96,7 @@ export class MainDetailsComponent implements OnInit {
main = '';
color_badge = 'danger'
spinner = true
filter:any;
constructor(
private mainService: MainService,
......@@ -214,6 +216,7 @@ export class MainDetailsComponent implements OnInit {
private _filter(data: string[], value: string): string[] {
const filterValue = value.toLowerCase();
this.filter=data.filter(option => option.toLowerCase().includes(filterValue));
return data.filter(option => option.toLowerCase().includes(filterValue));
}
......@@ -423,6 +426,18 @@ export class MainDetailsComponent implements OnInit {
console.log(error);
});
}
//autocomplete the first element of the autocomplete list
closed(event:any, data :any){
if(data.value && this.filter[0]==''){data.setValue(data.value)}
if (event.relatedTarget && event.relatedTarget?.tagName !== 'MAT-OPTION') {
if(data?.value!='' && !this.filter.includes(data?.value)){
data.setValue(this.filter[0])
this.filter[0]='';
}
if(data.value || data?.value=='' || event.relatedTarget?.tagName === 'MAT-OPTION'){this.filter[0]='';}
}
}
}
reqtool/ReqmanAngular11/src/app/components/prefix-details/prefix-details.component.html
View file @ 32b8bb89
......@@ -3,8 +3,9 @@
<form class="form-group form-inline" ngNativeValidate>
<mat-form-field class="example-full-width">
<mat-label>Prefix</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput required
[formControl]="simpleprefixControl" [matAutocomplete]="autosimpleprefix">
<input type="text" placeholder="Pick one" aria-label="SPrefix" matInput required
[formControl]="simpleprefixControl" [matAutocomplete]="autosimpleprefix"
(blur)="closed($event, this.simpleprefixControl)">
<mat-autocomplete autoActiveFirstOption #autosimpleprefix="matAutocomplete">
<mat-option *ngFor="let option of simpleprefixfilteredOptions | async" [value]="option">
{{option}}
......@@ -18,9 +19,9 @@
<mat-form-field class="example-full-width">
<mat-label *ngIf="subjectsControl.value !=null">Subject :
{{this.subjectsControl.value.split(':')[0]}}:{{this.subjectsControl.value.split(':')[1]}}</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="subjectsControl" required
[matAutocomplete]="autosub">
<mat-autocomplete autoActiveFirstOption #autosub="matAutocomplete" showPanel="true" [displayWith]="displayFn">
<input type="text" placeholder="Pick one" aria-label="SubC" matInput [formControl]="subjectsControl" required
[matAutocomplete]="autosub" (blur)="closed($event, this.subjectsControl)">
<mat-autocomplete autoActiveFirstOption #autosub="matAutocomplete" showPanel="true" [displayWith]="displayFn" panelWidth="string" panelWidth="string">
<mat-option *ngFor="let option of subjectsfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......@@ -35,9 +36,9 @@
<mat-form-field class="example-full-width">
<mat-label>Verb or State</mat-label>
<mat-label *ngIf="verbsControl.value !=null">Subject : {{this.verbsControl.value.split(':')[0]}}</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput required [formControl]="verbsControl"
[matAutocomplete]="autoverb">
<mat-autocomplete autoActiveFirstOption #autoverb="matAutocomplete" showPanel="true" [displayWith]="displayFn">
<input type="text" placeholder="Pick one" aria-label="Verb" matInput required [formControl]="verbsControl"
[matAutocomplete]="autoverb" (blur)="closed($event, this.verbsControl)">
<mat-autocomplete autoActiveFirstOption #autoverb="matAutocomplete" showPanel="true" [displayWith]="displayFn" panelWidth="string">
<mat-option *ngFor="let option of verbsfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......@@ -46,14 +47,14 @@
</form>
</div>
<div class="col" [ngStyle]="(numericalisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
<div class="col" [ngStyle]="(numericalisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden', 'width':'0%'}">
<form class="form-group form-inline">
<mat-form-field class="example-full-width">
<mat-label>Quantifier</mat-label>
<input placeholder="Pick one" aria-label="Number" matInput [formControl]="prefix_quantifierControl" type="text"
[matAutocomplete]="autoprefix_quantifier">
<input placeholder="Pick one" aria-label="PrefixQ" matInput [formControl]="prefix_quantifierControl" type="text"
[matAutocomplete]="autoprefix_quantifier" (blur)="closed($event, this.prefix_quantifierControl)">
<mat-autocomplete autoActiveFirstOption #autoprefix_quantifier="matAutocomplete" showPanel="true"
[displayWith]="displayFn">
[displayWith]="displayFn" panelWidth="string">
<mat-option *ngFor="let option of prefix_quantifierfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......@@ -63,7 +64,7 @@
</div>
<div class="col">
<form class="form-group form-inline"
[ngStyle]="(numericalisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
[ngStyle]="(numericalisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden', 'width':'0%'}">
<mat-form-field class="example-full-width">
<mat-label>Numerical Value</mat-label>
<input type="text" matInput [(ngModel)]="currentprefix.prefix_numerical" name="numerical">
......@@ -72,13 +73,13 @@
</div>
<div class="col">
<form class="form-group form-inline"
[ngStyle]="(numericalisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
[ngStyle]="(numericalisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden', 'width':'0%'}">
<mat-form-field class="example-full-width">
<mat-label>Number Unit</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput
<input type="text" placeholder="Pick one" aria-label="PNumUnit" matInput
[formControl]="prefix_mumerical_unitsControl" [matAutocomplete]="autoprefix_mumerical_units">
<mat-autocomplete autoActiveFirstOption #autoprefix_mumerical_units="matAutocomplete" showPanel="true"
[displayWith]="displayFn">
[displayWith]="displayFn" panelWidth="string" (blur)="closed($event, this.prefix_mumerical_unitsControl)">
<mat-option *ngFor="let option of prefix_mumerical_unitsfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......@@ -94,10 +95,10 @@
<mat-form-field class="example-full-width">
<mat-label *ngIf="objectsControl.value !=null">Object :
{{this.objectsControl.value.split(':')[0]}}:{{this.objectsControl.value.split(':')[1]}}</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput required [formControl]="objectsControl"
[matAutocomplete]="autobjects">
<input type="text" placeholder="Pick one" aria-label="PreObj" matInput required [formControl]="objectsControl"
[matAutocomplete]="autobjects" (blur)="closed($event, this.objectsControl)">
<mat-autocomplete autoActiveFirstOption #autobjects="matAutocomplete" showPanel="true"
[displayWith]="displayFn">
[displayWith]="displayFn" panelWidth="string">
<mat-option *ngFor="let option of objectsfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......@@ -110,8 +111,8 @@
<fieldset disabled>
<mat-form-field class="example-full-width">
<mat-label>Logic connectivity</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="logic_conControl"
[matAutocomplete]="autolog_con">
<input type="text" placeholder="Pick one" aria-label="PreLogic_c" matInput [formControl]="logic_conControl"
[matAutocomplete]="autolog_con" (blur)="closed($event, this.logic_conControl)">
<mat-autocomplete autoActiveFirstOption #autolog_con="matAutocomplete">
<mat-option *ngFor="let option of logic_confilteredOptions | async" [value]="option">
{{option}}
......
reqtool/ReqmanAngular11/src/app/components/prefix-details/prefix-details.component.ts
View file @ 32b8bb89
......@@ -64,6 +64,8 @@ export class PrefixDetailsComponent implements OnInit {
};
message = '';
numericalisDivVisible = false
filter:any;
constructor(private prefixService: PrefixService, private route: ActivatedRoute,
......@@ -126,6 +128,7 @@ export class PrefixDetailsComponent implements OnInit {
private _filter(data: string[], value: string): string[] {
const filterValue = value.toLowerCase();
this.filter=data.filter(option => option.toLowerCase().includes(filterValue));
return data.filter(option => option.toLowerCase().includes(filterValue));
}
......@@ -274,4 +277,16 @@ export class PrefixDetailsComponent implements OnInit {
}
}
//autocomplete the first element of the autocomplete list
closed(event:any, data :any){
if(data.value && this.filter[0]==''){data.setValue(data.value)}
if (event.relatedTarget && event.relatedTarget?.tagName !== 'MAT-OPTION') {
if(data?.value!='' && !this.filter.includes(data?.value)){
data.setValue(this.filter[0])
this.filter[0]='';
}
if(data.value || data?.value=='' || event.relatedTarget?.tagName === 'MAT-OPTION'){this.filter[0]='';}
}
}
}
\ No newline at end of file
reqtool/ReqmanAngular11/src/app/components/suffix-details/suffix-details.component.html
View file @ 32b8bb89
......@@ -3,10 +3,10 @@
<form class="form-group form-inline" ngNativeValidate>
<mat-form-field class="example-full-width">
<mat-label *ngIf="this.suffixControl.value !=null">Suffix : {{this.suffixControl.value.split(':')[0]}}:{{this.suffixControl.value.split(':')[1]}}</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="suffixControl" required
[matAutocomplete]="autosuffix">
<input type="text" placeholder="Pick one" aria-label="Suf" matInput [formControl]="suffixControl" required
[matAutocomplete]="autosuffix" (blur)="closed($event, this.suffixControl)">
<mat-autocomplete autoActiveFirstOption #autosuffix="matAutocomplete" showPanel="true"
[displayWith]="displayFn">
[displayWith]="displayFn" panelWidth="string">
<mat-option *ngFor="let option of suffixfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......@@ -27,10 +27,10 @@
<mat-form-field class="example-full-width">
<mat-label *ngIf="this.mumerical_unitsControl.value !=null">Numerical Value
: {{this.mumerical_unitsControl.value.split(':')[0]}}:{{this.mumerical_unitsControl.value.split(':')[1]}}</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="mumerical_unitsControl"
[matAutocomplete]="autonumsuffix">
<input type="text" placeholder="Pick one" aria-label="SufNum" matInput [formControl]="mumerical_unitsControl"
[matAutocomplete]="autonumsuffix" (blur)="closed($event, this.mumerical_unitsControl)">
<mat-autocomplete autoActiveFirstOption #autonumsuffix="matAutocomplete" showPanel="true"
[displayWith]="displayFn">
[displayWith]="displayFn" panelWidth="string">
<mat-option *ngFor="let option of mumerical_unitsfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......@@ -43,9 +43,9 @@
[ngStyle]=" showflow(this.suffixControl.value) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
<mat-form-field class="example-full-width">
<mat-label *ngIf="flowControl.value !=null">Flow or Function : {{this.flowControl.value.split(':')[0]}}:{{this.flowControl.value.split(':')[1]}}</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="flowControl" required
[matAutocomplete]="autoflow">
<mat-autocomplete autoActiveFirstOption #autoflow="matAutocomplete" showPanel="true" [displayWith]="displayFn">
<input type="text" placeholder="Pick one" aria-label="SufFlow" matInput [formControl]="flowControl" required
[matAutocomplete]="autoflow" (blur)="closed($event, this.flowControl)" >
<mat-autocomplete autoActiveFirstOption #autoflow="matAutocomplete" showPanel="true" [displayWith]="displayFn" panelWidth="string" panelWidth="string">
<mat-option *ngFor="let option of flowfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......
reqtool/ReqmanAngular11/src/app/components/suffix-details/suffix-details.component.ts
View file @ 32b8bb89
......@@ -39,6 +39,7 @@ export class SuffixDetailsComponent implements OnInit {
flow: "",
};
message = '';
filter:any;
constructor(
private suffixService: SuffixService,
......@@ -64,7 +65,7 @@ export class SuffixDetailsComponent implements OnInit {
ngOnInit(): void {
//this.getchoices();
this.getflowchoices(this.route.snapshot.params.gb);
console.log('aaa', this.route.snapshot.params.gb);
//console.log('aaa', this.route.snapshot.params.gb);
this.getAllSuffix(this.route.snapshot.params.id);
}
......@@ -91,6 +92,7 @@ export class SuffixDetailsComponent implements OnInit {
private _filter(data: string[], value: string): string[] {
const filterValue = value.toLowerCase();
this.filter=data.filter(option => option.toLowerCase().includes(filterValue));
return data.filter(option => option.toLowerCase().includes(filterValue));
}
......@@ -185,8 +187,17 @@ export class SuffixDetailsComponent implements OnInit {
}
}
//autocomplete the first element of the autocomplete list
closed(event:any, data :any){
if(data.value && this.filter[0]==''){data.setValue(data.value)}
if (event.relatedTarget && event.relatedTarget?.tagName !== 'MAT-OPTION') {
if(data?.value!='' && !this.filter.includes(data?.value)){
data.setValue(this.filter[0])
this.filter[0]='';
}
if(data.value || data?.value=='' || event.relatedTarget?.tagName === 'MAT-OPTION'){this.filter[0]='';}
}
}
}
......
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