fixed new sample material group/supplier autocomplete, template refresh after changes, template array input

src/app/app.component.html

@@ -32,7 +32,7 @@
         <rb-icon-button icon="mail" mode="primary" (mouseup)="closeBugReport(close)">Send report</rb-icon-button>
       </a>
     </ng-template>
-<!--    <span class="dev-label" *ngIf="devMode">DEVELOPMENT</span>-->
+    <span class="dev-label" *ngIf="devMode">DEVELOPMENT</span>
     DeFinMa
   </div>
 </rb-full-header>

src/app/sample/sample.component.html

@@ -19,16 +19,17 @@
     <div class="material shaded-container" *ngIf="newMaterial" [@inOut]>
       <h4>Material properties</h4>
       <rb-form-input name="supplier" label="supplier"
-                     [rbFormInputAutocomplete]="autocomplete.bind(this, d.arr.materialSupplier)"
+                     [rbFormInputAutocomplete]="autocomplete.bind(this, d.arr.materialSuppliers)"
                      [rbDebounceTime]="0" [rbInitialOpen]="true" appValidate="string" required
                      [(ngModel)]="material.supplier" #supplierInput="ngModel"
-                     (focusout)="checkTypo('materialSuppliers', 'supplier', modalWarning)">
+                     (focusout)="checkTypo($event, 'materialSuppliers', 'supplier', modalWarning)">
         <ng-template rbFormValidationMessage="failure">{{supplierInput.errors.failure}}</ng-template>
       </rb-form-input>
-      <rb-form-input name="group" label="group" [rbFormInputAutocomplete]="autocomplete.bind(this, d.arr.materialGroup)"
+      <rb-form-input name="group" label="group"
+                     [rbFormInputAutocomplete]="autocomplete.bind(this, d.arr.materialGroups)"
                      [rbDebounceTime]="0" [rbInitialOpen]="true" appValidate="string" required
                      [(ngModel)]="material.group" #groupInput="ngModel"
-                     (focusout)="checkTypo('materialGroups', 'group', modalWarning)">
+                     (focusout)="checkTypo($event, 'materialGroups', 'group', modalWarning)">
         <ng-template rbFormValidationMessage="failure">{{groupInput.errors.failure}}</ng-template>
       </rb-form-input>
       <ng-template #modalWarning>

src/app/sample/sample.component.ts

@@ -434,8 +434,11 @@ export class SampleComponent implements OnInit, AfterContentChecked {
     }
   }
 
-  checkTypo(list, mKey, modal: TemplateRef<any>) {
-    if (this.d.arr[list].indexOf(this.material[list]) < 0) {  // entry is not in list
+  checkTypo(event, list, mKey, modal: TemplateRef<any>) {
+    // user did not click on suggestion and entry is not in list
+    if (!(event.relatedTarget && (event.relatedTarget.className.indexOf('rb-dropdown-item') >= 0 ||
+        event.relatedTarget.className.indexOf('close-btn rb-btn rb-passive-link') >= 0)) &&
+      this.d.arr[list].indexOf(this.material[mKey]) < 0) {
       this.modalText.list = mKey;
       this.modalText.suggestion = this.d.arr[list]  // find possible entry from list
         .map(e => ({v: e, s: strCompare.sorensenDice(e, this.material[mKey])}))

src/app/services/validation.service.ts

@@ -122,6 +122,7 @@ export class ValidationService {
     const {ignore, error} = Joi.string()
       .max(128)
       .invalid('condition_template', 'material_template')
+      .allow('')
       .pattern(/^[^.]+$/)
       .required()
       .messages({'string.pattern.base': 'name must not contain a dot'})

src/app/templates/templates.component.html

@@ -55,7 +55,8 @@
             <rb-icon-button icon="edit" mode="secondary" (click)="group.edit = !group.edit">
               Edit template
             </rb-icon-button>
-            <rb-icon-button icon="save" mode="primary" (click)="saveTemplate(group.first_id)" *ngIf="group.edit">
+            <rb-icon-button icon="save" mode="primary" (click)="saveTemplate(group.first_id)" *ngIf="group.edit"
+                            [disabled]="templateForm.invalid">
               Save template
             </rb-icon-button>
           </form>

src/app/templates/templates.component.ts

@@ -5,6 +5,7 @@ import {animate, style, transition, trigger} from '@angular/animations';
 import {ValidationService} from '../services/validation.service';
 import cloneDeep from 'lodash/cloneDeep';
 import omit from 'lodash/omit';
+import {DataService} from '../services/data.service';
 
 @Component({
   selector: 'app-templates',
@@ -36,7 +37,8 @@ export class TemplatesComponent implements OnInit {
 
   constructor(
     private api: ApiService,
-    private validate: ValidationService
+    private validate: ValidationService,
+    public d: DataService
   ) { }
 
   ngOnInit(): void {
@@ -44,8 +46,8 @@ export class TemplatesComponent implements OnInit {
   }
 
   loadTemplates() {
-    this.api.get<TemplateModel[]>(`/template/${this.collection}s`, data => {
-      this.templates = data;
+    this.d.load(this.collection + 'Templates', () => {
+      this.templates = this.d.arr[this.collection + 'Templates'];
       this.templateFormat();
     });
   }
@@ -99,6 +101,7 @@ export class TemplatesComponent implements OnInit {
             this.templates.push(data);
           }
           this.templateFormat();
+          this.d.idReload(this.collection + 'Templates');
         });
       }
       else {
@@ -107,6 +110,7 @@ export class TemplatesComponent implements OnInit {
             this.templates.push(data);
           }
           this.templateFormat();
+          this.d.idReload(this.collection + 'Templates');
         });
       }
     }