4 configuration form validation

citrus-admin-client/pom.xml

@@ -56,6 +56,21 @@
           </execution>
         </executions>
       </plugin>
+      <plugin>
+        <artifactId>maven-clean-plugin</artifactId>
+        <version>3.0.0</version>
+        <configuration>
+          <filesets>
+            <fileset>
+              <directory>src/main/resources</directory>
+              <includes>
+                <include>static/dist/**</include>
+                <include>static/node_modules/**</include>
+              </includes>
+            </fileset>
+          </filesets>
+        </configuration>
+      </plugin>
     </plugins>
     <resources>
       <resource>

citrus-admin-client/src/main/resources/static/src/app/components/configuration/configuration-routing.module.ts

@@ -1,7 +1,6 @@
 import {NgModule} from "@angular/core";
 import {RouterModule, Routes} from "@angular/router";
 import {ConfigurationComponent} from "./configuration.component";
-import {EndpointsComponent} from "./endpoints/endpoints.component";
 import {FunctionLibraryComponent} from "./function-library/function.library.component";
 import {ValidationMatcherComponent} from "./validation-matcher/validation.matcher.component";
 import {DataDictionaryComponent} from "./data-dictionary/data.dictionary.component";
@@ -12,23 +11,24 @@ import {GlobalVariablesComponent} from "./global-variables/global.variables.comp
 import {ServiceModule} from "../../service/service.module";
 import {CanActivateRoutes} from "../../service/can-activate-routes";
 import {routes as schemaRepositoryRoutes} from './schema-repository/schema-repository.module';
+import {endpointRoutes} from "./endpoints/endpoint.module";
 
 const configurationRoutes:Routes = [
     {
         path: 'configuration',
         component: ConfigurationComponent,
         canActivate: [CanActivateRoutes],
         children: [
-            { path: '', redirectTo: 'endpoints', pathMatch: 'full'},
-            { path: 'endpoints', component: EndpointsComponent},
+            { path: '', redirectTo:'endpoint', pathMatch:'full'},
             { path: 'spring-beans', component: SpringBeansComponent},
             { path: 'spring-context', component: SpringContextComponent},
             { path: 'function-library', component: FunctionLibraryComponent},
             { path: 'validation-matcher', component: ValidationMatcherComponent},
             { path: 'data-dictionary', component: DataDictionaryComponent},
             { path: 'namespace-context', component: NamespaceContextComponent},
             { path: 'global-variables', component: GlobalVariablesComponent},
-            ...schemaRepositoryRoutes
+            ...schemaRepositoryRoutes,
+            ...endpointRoutes
         ]
     },
 ]

citrus-admin-client/src/main/resources/static/src/app/components/configuration/configuration.module.ts

@@ -10,10 +10,11 @@ import {SpringContextComponent} from "./spring-context/spring.context.component"
 import {ValidationMatcherComponent} from "./validation-matcher/validation.matcher.component";
 import {UtilComponentsModule} from "../util/util.module";
 import {ConfigurationRoutingModule} from "./configuration-routing.module";
-import {FormsModule} from "@angular/forms";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {CommonModule} from "@angular/common";
 import {UtilModule} from "../../util/util.module";
 import {SchemaRepositoryModule} from "./schema-repository/schema-repository.module";
+import {EndPointModule} from "./endpoints/endpoint.module";
 
 @NgModule({
     imports: [
@@ -22,12 +23,13 @@ import {SchemaRepositoryModule} from "./schema-repository/schema-repository.modu
         FormsModule,
         CommonModule,
         ConfigurationRoutingModule,
-        SchemaRepositoryModule
+        SchemaRepositoryModule,
+        EndPointModule,
+        ReactiveFormsModule
     ],
     declarations: [
         ConfigurationComponent,
         DataDictionaryComponent,
-        EndpointsComponent,
         FunctionLibraryComponent,
         GlobalVariablesComponent,
         NamespaceContextComponent,

citrus-admin-client/src/main/resources/static/src/app/components/configuration/data-dictionary/data-dictionary.html

@@ -13,7 +13,7 @@ <h1 class="page-header">
 <p>Your project defines <span class="badge badge-emphasis badge-citrus">{{dictionaries.length}}</span> custom data dictionaries. See all available dictionaries listed below:</p>
 
 <br/>
-
+<!--
 <form *ngIf="newDictionary" class="form-horizontal">
   <h3>New Dictionary</h3>
 
@@ -27,7 +27,7 @@ <h3>New Dictionary</h3>
   <div class="form-group">
     <label class="col-sm-2 control-label">Type <em>*</em></label>
     <div class="col-sm-10">
-      <select [(ngModel)]="newDictionaryType" class="form-control" name="type">
+      <select [(ngModel)]="dictionaryType" class="form-control" name="type">
         <option value="xpath">xpath</option>
         <option value="xml">xml</option>
         <option value="json">json</option>
@@ -84,48 +84,65 @@ <h3>New Dictionary</h3>
     </div>
   </div>
 </form>
-
-<form *ngIf="selectedDictionary" class="form-horizontal">
+-->
+<form *ngIf="selectedDictionary" [formGroup]="form" (ngSubmit)="submitForm()" class="form-horizontal">
   <h3>Edit Dictionary</h3>
 
-  <div class="form-group">
-    <label class="col-sm-2 control-label">Name <em>*</em></label>
-    <div class="col-sm-10">
-      <input [(ngModel)]="selectedDictionary.id" type="text" class="form-control" name="selectedId"/>
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label class="col-sm-2 control-label">Global scope <em>*</em></label>
-    <div class="col-sm-10">
-      <select [(ngModel)]="selectedDictionary.globalScope" class="form-control" placeholder="GlobalScope" name="selectedGlobalScope">
-        <option value="true">true</option>
-        <option value="false">false</option>
+  <form-group
+      label="Name *"
+      [control]="form.get('id')"
+  >
+    <input-with-addon
+      [(ngModel)]="selectedDictionary.id"
+      formControlName="id"
+      [autofocus]="true"
+      [message]="form.get('id').errors ? 'Field is required' : ''"
+    >
+    </input-with-addon>
+  </form-group>
+  <form-group
+    label="Type *"
+    [control]="form.get('type')"
+    *ngIf="EditorMode.NEW === mode"
+  >
+    <select formControlName="type" [(ngModel)]="dictionaryType" class="form-control" name="type">
+      <option value="xpath">xpath</option>
+      <option value="xml">xml</option>
+      <option value="json">json</option>
+    </select>
+  </form-group>
+
+  <form-group
+      label="Global scope *"
+      [control]="form.get('globalScope')"
+  >
+      <select formControlName="globalScope" [(ngModel)]="selectedDictionary.globalScope" class="form-control" placeholder="GlobalScope" name="selectedGlobalScope">
+        <option [ngValue]="true">true</option>
+        <option [ngValue]="false">false</option>
       </select>
-    </div>
-  </div>
+  </form-group>
 
-  <div class="form-group">
-    <label class="col-sm-2 control-label">Mapping Strategy <em>*</em></label>
-    <div class="col-sm-10">
-      <select [(ngModel)]="selectedDictionary.mappingStrategy" class="form-control" placeholder="MappingStrategy" name="selectedMappingStrategy">
+  <form-group
+      label="Mapping Strategy *"
+      [control]="form.get('mappingStrategy')"
+  >
+      <select formControlName="mappingStrategy" [(ngModel)]="selectedDictionary.mappingStrategy" class="form-control" placeholder="MappingStrategy" name="selectedMappingStrategy">
         <option value="EXACT_MATCH">EXACT_MATCH</option>
         <option value="STARTS_WITH">STARTS_WITH</option>
         <option value="ENDS_WITH">ENDS_WITH</option>
       </select>
-    </div>
-  </div>
+  </form-group>
 
   <div class="form-group">
     <label class="col-sm-2 control-label">Mappings</label>
     <div class="col-sm-3">
-      <input [(ngModel)]="newMapping.path" placeholder="Path expression" type="text" class="form-control" name="newPath"/>
+      <input [(ngModel)]="newMapping.path" [ngModelOptions]="{standalone: true}" placeholder="Path expression" type="text" class="form-control" name="newPath"/>
     </div>
     <div class="col-sm-6">
-      <input [(ngModel)]="newMapping.value" placeholder="Value" type="text" class="form-control" name="newValue"/>
+      <input [(ngModel)]="newMapping.value" [ngModelOptions]="{standalone: true}" placeholder="Value" type="text" class="form-control" name="newValue"/>
     </div>
     <div class="col-sm-1">
-      <button (click)="addMapping()" class="btn btn-primary"><i class="fa fa-plus"></i></button>
+      <button [disabled]="!newMapping.path || !newMapping.value" (click)="addMapping()" class="btn btn-primary"><i class="fa fa-plus"></i></button>
     </div>
   </div>
 
@@ -139,13 +156,13 @@ <h3>Edit Dictionary</h3>
 
   <div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
-      <button class="btn btn-primary" (click)="saveDictionary()" type="submit">Save</button>
+      <button class="btn btn-primary" [disabled]="form.invalid" type="submit">Save</button>
       <button class="btn btn-default" (click)="cancel()" type="reset">Close</button>
     </div>
   </div>
 </form>
 
-<div *ngIf="!newDictionary && !selectedDictionary" class="list-group">
+<div *ngIf="!selectedDictionary" class="list-group">
   <div *ngIf="dictionaries.length == 0" class="list-group-item"><i class="fa fa-times"></i> No data dictionaries defined</div>
 
   <div *ngFor="let dictionary of dictionaries" class="list-group-item clickable" (click)="selectDictionary(dictionary)">

citrus-admin-client/src/main/resources/static/src/app/components/configuration/data-dictionary/data.dictionary.component.ts

@@ -3,6 +3,8 @@ import {ConfigService} from '../../../service/config.service';
 import {DataDictionary, Mapping} from "../../../model/data.dictionary";
 import {Alert} from "../../../model/alert";
 import {AlertService} from "../../../service/alert.service";
+import {EditorMode} from "../editor-mode.enum";
+import {FormGroup, FormBuilder, Validators} from "@angular/forms";
 
 @Component({
     selector: 'data-dictionary',
@@ -12,22 +14,35 @@ import {AlertService} from "../../../service/alert.service";
 export class DataDictionaryComponent implements OnInit {
 
     constructor(private _configService: ConfigService,
+                private fb:FormBuilder,
                 private _alertService: AlertService) {
         this.dictionaries = [];
         this.newMapping = new Mapping();
-        this.newDictionaryType = "xpath";
+        this.dictionaryType = "xpath";
     }
 
+    EditorMode = EditorMode;
+    mode: EditorMode;
+    form:FormGroup;
     newMapping: Mapping;
-    newDictionaryType: string;
-    newDictionary: DataDictionary;
+    dictionaryType = 'xpath';
     selectedDictionary: DataDictionary;
     dictionaries: DataDictionary[];
 
     ngOnInit() {
         this.getDictionaries();
     }
 
+    initForm(mode:EditorMode) {
+        this.mode = mode;
+        this.form = this.fb.group({
+            id: [this.selectedDictionary.id, Validators.required],
+            globalScope: [this.selectedDictionary.globalScope, Validators.required],
+            type: [{value:this.dictionaryType, disabled: EditorMode.EDIT === mode}, Validators.required],
+            mappingStrategy: [this.selectedDictionary.mappingStrategy, Validators.required],
+        })
+    }
+
     getDictionaries() {
         this._configService.getDataDictionaries()
             .subscribe(
@@ -37,6 +52,7 @@ export class DataDictionaryComponent implements OnInit {
 
     selectDictionary(endpoint: DataDictionary) {
         this.selectedDictionary = endpoint;
+        this.initForm(EditorMode.EDIT)
     }
 
     removeDictionary(library: DataDictionary, event:MouseEvent) {
@@ -53,33 +69,27 @@ export class DataDictionaryComponent implements OnInit {
     }
 
     removeMapping(selected: Mapping) {
-        if (this.selectedDictionary) {
-            this.selectedDictionary.mappings.mappings.splice(this.selectedDictionary.mappings.mappings.indexOf(selected), 1);
-        } else {
-            this.newDictionary.mappings.mappings.splice(this.newDictionary.mappings.mappings.indexOf(selected), 1);
-        }
+        this.selectedDictionary.mappings.mappings.splice(this.selectedDictionary.mappings.mappings.indexOf(selected), 1);
     }
 
     addMapping() {
-        if (this.selectedDictionary) {
-            this.selectedDictionary.mappings.mappings.push(this.newMapping);
-        } else {
-            this.newDictionary.mappings.mappings.push(this.newMapping);
-        }
-
+        this.selectedDictionary.mappings.mappings.push(this.newMapping);
         this.newMapping = new Mapping();
     }
 
     initDictionary() {
-        this.newDictionary = new DataDictionary();
+        this.selectedDictionary = new DataDictionary();
+        this.selectedDictionary.globalScope = true;
+        this.selectedDictionary.mappingStrategy = 'EXACT_MATCH';
+        this.initForm(EditorMode.NEW)
     }
 
     createDictionary() {
-        this._configService.createDataDictionary(this.newDictionaryType, this.newDictionary)
+        this._configService.createDataDictionary(this.dictionaryType, this.selectedDictionary)
             .subscribe(
                 response => {
-                    this.notifySuccess("Created new data dictionary '" + this.newDictionary.id + "'");
-                    this.dictionaries.push(this.newDictionary); this.newDictionary = undefined;
+                    this.notifySuccess("Created new data dictionary '" + this.selectedDictionary.id + "'");
+                    this.dictionaries.push(this.selectedDictionary); this.reset();
                 },
                 error => this.notifyError(<any>error));
     }
@@ -89,25 +99,39 @@ export class DataDictionaryComponent implements OnInit {
             .subscribe(
                 response => {
                     this.notifySuccess("Successfully saved data dictionary '" + this.selectedDictionary.id + "'");
-                    this.selectedDictionary = undefined;
+                    this.reset();
                 },
                 error => this.notifyError(<any>error));
     }
 
-    cancel() {
-        if (this.selectedDictionary) {
-            this.selectedDictionary = undefined;
-            this.getDictionaries();
-        } else {
-            this.newDictionary = undefined;
+    submitForm() {
+        if(EditorMode.EDIT === this.mode) {
+            console.log('Save Edit')
+            this.saveDictionary();
+        }
+        if(EditorMode.NEW === this.mode) {
+            console.log('Save New')
+            this.createDictionary();
         }
     }
 
+    cancel() {
+        this.reset();
+        this.getDictionaries();
+    }
+
     notifySuccess(message: string) {
         this._alertService.add(new Alert("success", message, true));
     }
 
     notifyError(error: any) {
         this._alertService.add(new Alert("danger", error.message, false));
     }
+
+    private reset() {
+        this.mode = null;
+        this.form = null;
+        this.selectedDictionary = null;
+        this.dictionaryType = 'xpath';
+    }
 }