Skip to content

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

UI

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