UI

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

@@ -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

@@ -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

@@ -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

 .example-card {
-  width: 350px;
-  height: 250px;
   margin-right: 5px;
   margin-top: 10px;
   }

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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]='';}
+    }
+  }
 }