Implementation of metadata dialog, service group dialog

smp-angular/package.json

@@ -29,7 +29,7 @@
     "@angular/flex-layout": "^6.0.0-beta.16",
     "@swimlane/ngx-datatable": "^13.0.0",
     "core-js": "^2.5.7",
-    "file-saver": "^1.3.3",
+    "file-saver": "1.3.3",
     "hammerjs": "^2.0.8",
     "rxjs": "^6.3.3",
     "ts-helpers": "^1.1.2",

smp-angular/src/app/app.module.ts

@@ -17,7 +17,10 @@ import {
   MatDatepicker,
   MatCardModule,
   MatDatepickerModule,
-  MatSlideToggleModule, MatTab, MatAccordion, MatTabsModule,
+  MatSlideToggleModule,
+  MatTab,
+  MatAccordion,
+  MatTabsModule,
 } from '@angular/material';
 import "hammerjs";
 
@@ -154,6 +157,7 @@ import {GlobalLookups} from "./common/global-lookups";
     CertificateService,
     RoleService,
     GlobalLookups,
+    DatePipe,
     {
       provide: ExtendedHttpClient,
       useFactory: extendedHttpClientCreator,

smp-angular/src/app/common/confirmation-dialog/confirmation-dialog.component.css

+label:hover, label:active, input:hover + label, input:active + label {
+  color: #3f51b5;
+}
+
+.divTable {
+  display: table;
+  width: 100%;
+}
+
+.divTableRow {
+  display: table-row;
+}
+
+.divTableHeading {
+  background-color: #EEE;
+  display: table-header-group;
+}
+
+.divTableCell, .divTableHead {
+  /*border: 1px solid #999999;*/
+  display: table-cell;
+  padding: 3px 3px;
+  text-align: center;
+}
+
+.divTableHeading {
+  background-color: #EEE;
+  display: table-header-group;
+  font-weight: bold;
+}
+
+.divTableFoot {
+  background-color: #EEE;
+  display: table-footer-group;
+  font-weight: bold;
+}
+
+.divTableBody {
+  display: table-row-group;
+}
+
+

smp-angular/src/app/common/confirmation-dialog/confirmation-dialog.component.html

+<div style="width: 500px;text-align: center">
+  <h1 mat-dialog-title>Do you want to cancel all unsaved operations?</h1>
+
+  <div class="divTable">
+    <div class="divTableBody">
+
+      <div class="divTableRow">
+
+        <div class="divTableCell">
+          <button mat-raised-button color="primary" (click)="dialogRef.close(true)" id="yesbuttondialog_id">
+            <mat-icon>check_circle</mat-icon>
+            <span>Yes</span>
+          </button>
+        </div>
+
+        <div class="divTableCell">
+          <button mat-raised-button color="primary" (click)="dialogRef.close(false)" id="nobuttondialog_id">
+            <mat-icon>cancel</mat-icon>
+            <span>No</span>
+          </button>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</div>

smp-angular/src/app/common/confirmation-dialog/confirmation-dialog.component.ts

+import {Component} from '@angular/core';
+import {MatDialogRef} from '@angular/material';
+
+@Component({
+  selector: 'app-cancel-dialog',
+  templateUrl: './cancel-dialog.component.html',
+  styleUrls: ['./cancel-dialog.component.css']
+})
+export class CancelDialogComponent {
+
+  constructor(public dialogRef: MatDialogRef<CancelDialogComponent>) {
+  }
+
+}

smp-angular/src/app/common/global-lookups.ts

+import {Injectable, OnInit} from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {DomainRo} from "../domain/domain-ro.model";
+import {SearchTableResult} from "./search-table/search-table-result.model";
+import {SmpConstants} from "../smp.constants";
+import {Observable} from "rxjs/internal/Observable";
+import {UserRo} from "../user/user-ro.model";
+
+/**
+ * Purpose of object is to fetch lookups as domains and users
+ */
+
+@Injectable()
+export class GlobalLookups  implements OnInit {
+
+  domainObserver:  Observable< SearchTableResult>
+  userObserver:  Observable< SearchTableResult>
+  cachedDomainList: Array<any> = [];
+  cachedUserList: Array<any> = [];
+
+
+  constructor(protected http: HttpClient){
+    this.refreshDomainLookup();
+    this.refreshUserLookup();
+  }
+
+  ngOnInit() {
+  }
+
+  public refreshDomainLookup(){
+    // init domains
+    this.domainObserver = this.http.get<SearchTableResult>(SmpConstants.REST_DOMAIN);
+    this.domainObserver.subscribe((domains: SearchTableResult) => {
+      let gotList = new Array(domains.serviceEntities.length)
+        .map((v, index) => domains.serviceEntities[index] as DomainRo);
+      this.cachedDomainList = domains.serviceEntities.map(serviceEntity => {
+        return {...serviceEntity}
+
+      });
+    });
+  }
+
+  public refreshUserLookup(){
+    // init users
+    this.userObserver = this.http.get<SearchTableResult>(SmpConstants.REST_USER);
+    this.userObserver.subscribe((users: SearchTableResult) => {
+      let gotList = new Array(users.serviceEntities.length)
+        .map((v, index) => users.serviceEntities[index] as UserRo);
+      this.cachedUserList = users.serviceEntities.map(serviceEntity => {
+        return {...serviceEntity}
+
+      });
+    });
+  }
+
+
+
+
+}

smp-angular/src/app/common/search-table/search-table.component.ts

@@ -189,7 +189,6 @@ export class SearchTableComponent implements OnInit {
   }
 
   changePageSize(newPageLimit: number) {
-    alert("new page size");
     this.page(0, newPageLimit, this.orderBy, this.asc);
   }
 

smp-angular/src/app/domain/domain-details-dialog/domain-details-dialog.component.ts

@@ -4,7 +4,6 @@ import {UserRo} from "../../user/user-ro.model";
 import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
 import {DomainRo} from "../domain-ro.model";
 import {AlertService} from "../../alert/alert.service";
-import {RoleService} from "../../security/role.service";
 import {UserDetailsDialogComponent} from "../../user/user-details-dialog/user-details-dialog.component";
 import {CertificateService} from "../../user/certificate.service";
 import {UserService} from "../../user/user.service";

smp-angular/src/app/login/login.component.html

@@ -5,7 +5,7 @@
         <tr>
           <td>
             <mat-form-field>
-              <input matInput placeholder="Username" name="userName" [(ngModel)]="model.userName" #userName="ngModel"
+              <input matInput placeholder="Username" name="username" [(ngModel)]="model.username" #username="ngModel"
                      required id="username_id">
             </mat-form-field>
           </td>

smp-angular/src/app/security/role.model.ts

@@ -2,13 +2,13 @@ export enum Role {
   /**
    * The system administrator (a.k.a. the "super admin") role
    */
-  SYSTEM_ADMINISTRATOR,
+  SYSTEM_ADMINISTRATOR = 'System Administrator',
   /**
    * The SMP Administrator role. It is assimilable to the {@link SERVICE_GROUP_ADMINISTRATOR} role for now.
     */
-  SMP_ADMINISTRATOR,
+  SMP_ADMINISTRATOR = 'SMP Administrator',
   /**
    * The ServiceGroup administrator role
    */
-  SERVICE_GROUP_ADMINISTRATOR,
+  SERVICE_GROUP_ADMINISTRATOR = 'ServiceGroup Administrator',
 }

smp-angular/src/app/security/role.service.ts

-import {Injectable} from '@angular/core';
-import {Role} from './role.model';
-
-@Injectable()
-export class RoleService {
-
-  /**
-   * Returns a user representation of the role or an empty string if the role is unknown.
-   *
-   * @param role the role for which we need to display the user representation
-   */
-  public getLabel(role: Role): string {
-    switch (role) {
-      case Role.SMP_ADMINISTRATOR:
-        return 'SMP Administrator';
-      case Role.SERVICE_GROUP_ADMINISTRATOR:
-        return 'ServiceGroup Administrator';
-      case Role.SYSTEM_ADMINISTRATOR:
-        return 'System Administrator';
-      default:
-        return '';
-    }
-  }
-
-}

smp-angular/src/app/service-group-edit/service-group-details-dialog/service-extension-edit-ro.model.ts

+
+export interface ServiceGroupExtensionRo  {
+  serviceGroupId: number;
+  extension: string;
+  errorMessage?: string;
+}

smp-angular/src/app/service-group-edit/service-group-domain-edit-ro.model.ts

+import { ServiceMetadataEditRo } from './service-metadata-edit-ro.model';
+import {SearchTableEntity} from "../common/search-table/search-table-entity.model";
+import {UserRo} from "../user/user-ro.model";
+import {DomainRo} from "../domain/domain-ro.model";
+
+export interface ServiceGroupEditRo extends SearchTableEntity {
+  id: number;
+  participantIdentifier: string;
+  participantScheme: string;
+  serviceMetadata: Array<ServiceMetadataEditRo>;
+  serviceGroupDomains: Array<ServiceGroupDomainRo>;
+  users: Array<UserRo>;
+  extension?: string;
+}

smp-angular/src/app/service-group-edit/service-group-extension-wizard-dialog/service-group-extension-wizard-dialog.component.css

+#extensionTextArea {
+  border: none;
+  width: 610px;
+  height:340px;
+  -webkit-box-sizing: border-box; /* <=iOS4, <= Android  2.3 */
+  -moz-box-sizing: border-box; /* FF1+ */
+  box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
+}

smp-angular/src/app/service-group-edit/service-group-extension-wizard-dialog/service-group-extension-wizard-dialog.component.html

+<h2 mat-dialog-title>MetadataService Wizard</h2>
+
+<mat-dialog-content>
+  <form [formGroup]="dialogForm">
+    <mat-card>
+      <mat-card-content>
+        <fieldset style="border: none;">
+
+
+          <mat-form-field  *ngFor="let elmnt of elements;"  style="width:100%">
+            <input matInput
+                   placeholder="{{elmnt.name}} - {{elmnt.description}}"
+                   [name]="elmnt.name"
+                   id="{{elmnt.name}}_id"
+                   [formControl]="dialogForm.controls[elmnt.name]" maxlength="255">
+
+          </mat-form-field >
+
+
+        </fieldset>
+      </mat-card-content>
+    </mat-card>
+  </form>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+  <div class="group-action-button">
+    <button mat-raised-button color="primary" [mat-dialog-close]="true"
+            [disabled]="!dialogForm.valid">
+      <mat-icon>check_circle</mat-icon>
+      <span>OK</span>
+    </button>
+
+    <button mat-raised-button color="primary" mat-dialog-close>
+      <mat-icon>cancel</mat-icon>
+      <span>Cancel</span>
+    </button>
+  </div>
+</mat-dialog-actions>

smp-angular/src/app/service-group-edit/service-group-extension-wizard-dialog/service-group-extension-wizard-dialog.component.ts

+import {ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
+import {Observable} from "rxjs/internal/Observable";
+import {SearchTableResult} from "../common/search-table/search-table-result.model";
+import {HttpClient} from "@angular/common/http";
+import {SmpConstants} from "../smp.constants";
+import {UserRo} from "../user/user-ro.model";
+import {AlertService} from "../alert/alert.service";
+import {DomainDetailsDialogComponent} from "../domain/domain-details-dialog/domain-details-dialog.component";
+import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
+import {SearchTableEntityStatus} from "../common/search-table/search-table-entity-status.model";
+import {DomainRo} from "../domain/domain-ro.model";
+import {ServiceGroupEditRo} from "./service-group-edit-ro.model";
+import {ServiceMetadataEditRo} from "./service-metadata-edit-ro.model";
+import {GlobalLookups} from "../common/global-lookups";
+
+@Component({
+  selector: 'app-messagelog-details',
+  templateUrl: './service-group-metadata-wizard-dialog/service-group-extension-wizard-dialog.component.html',
+  styleUrls: ['./service-group-metadata-wizard-dialog/service-group-extension-wizard-dialog.component.css']
+})
+export class ServiceGroupExtensionWizardDialogComponent  {
+  dialogForm: FormGroup;
+
+  dummyXML: string ="<!-- Custom element is mandatory by OASIS SMP schema.\n    Replace following element with your XML structure. -->\n<ext:example xmlns:ext=\"http://my.namespace.eu\">my mandatory content</ext:example>"
+
+  elements: any[] = [
+    {name:'ExtensionID', description:'An identifier for the Extension assigned by the creator of the extension.'},
+    {name:'ExtensionName', description:'A name for the Extension assigned by the creator of the extension.'},
+    {name:'ExtensionAgencyID', description:'An agency that maintains one or more Extensions.'},
+    {name:'ExtensionAgencyName', description:'The name of the agency that maintains the Extension.'},
+    {name:'ExtensionAgencyURI', description:'A URI for the Agency that maintains the Extension.'},
+    {name:'ExtensionVersionID', description:'The version of the Extension.'},
+    {name:'ExtensionURI', description:'A URI for the Extension.'},
+    {name:'ExtensionReasonCode', description:'A code for reason the Extension is being included.'},
+    {name:'ExtensionReason', description:'A description of the reason for the Extension.'},
+    ];
+
+  constructor(public dialogRef: MatDialogRef<ServiceGroupExtensionWizardDialogComponent>,
+              private dialogFormBuilder: FormBuilder) {
+
+    this.dialogForm = this.dialogFormBuilder.group({ });
+
+    let arrayLength = this.elements.length;
+    for (var i = 0; i < arrayLength; i++) {
+      this.dialogForm.addControl(this.elements[i].name, new FormControl(''));
+    }
+  }
+
+  getExtensionXML(){
+    var xmlString = '<Extension xmlns="http://docs.oasis-open.org/bdxr/ns/SMP/2016/05">'
+    let arrayLength = this.elements.length;
+    for (var i = 0; i < arrayLength; i++) {
+      let str = this.dialogForm.get(this.elements[i].name).value;
+      if (str && 0 !== str.length) {
+        xmlString = xmlString + '\n    <'+this.elements[i].name+'>' + this.xmlSpecialChars(str) + '</'+this.elements[i].name+'>';
+      }
+    }
+    xmlString = xmlString+ '\n' +this.dummyXML+ '\n</Extension>'
+
+    return xmlString;
+  }
+
+  xmlSpecialChars(unsafe) {
+    return unsafe
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;");
+  }
+
+
+
+}

smp-angular/src/app/service-group-edit/service-metadata-wizard-dialog/service-metadata-wizard-dialog.component.css

+#extensionTextArea {
+  border: none;
+  width: 610px;
+  height:340px;
+  -webkit-box-sizing: border-box; /* <=iOS4, <= Android  2.3 */
+  -moz-box-sizing: border-box; /* FF1+ */
+  box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
+}

smp-angular/src/app/service-group-edit/service-metadata-wizard-dialog/service-metadata-wizard-dialog.component.html

+<h2 mat-dialog-title>Extension properties</h2>
+
+<mat-dialog-content>
+  <form [formGroup]="dialogForm">
+    <mat-card>
+      <mat-card-content>
+        <fieldset style="border: none;">
+
+
+          <mat-form-field style="width:100%">
+            <input matInput placeholder="Document identifier schema" name="documentIdentifierScheme" id="documentIdentifierScheme_id"
+                   [formControl]="dialogForm.controls['documentIdentifierScheme']" maxlength="255">
+
+          </mat-form-field>
+
+          <mat-form-field style="width:100%">
+            <input matInput placeholder="Document identifier" name="documentIdentifier" id="documentIdentifier_id"
+                   [formControl]="dialogForm.controls['documentIdentifier']" maxlength="255" required>
+
+            <div *ngIf="(!editMode && dialogForm.controls['documentIdentifier'].touched || editMode) &&  dialogForm.controls['documentIdentifier'].hasError('required')" style="color:red; font-size: 70%">
+              Document identifier must not be empty.
+            </div>
+          </mat-form-field>
+
+          <mat-form-field style="width:100%">
+            <input matInput placeholder="Process schema" name="processSchema" id="processSchema_id"
+                   [formControl]="dialogForm.controls['processSchema']" maxlength="255" required>
+
+            <div *ngIf="(!editMode && dialogForm.controls['processSchema'].touched || editMode) &&  dialogForm.controls['processSchema'].hasError('required')" style="color:red; font-size: 70%">
+              Process identifier must not be empty.
+            </div>
+          </mat-form-field>
+
+          <mat-form-field style="width:100%">
+            <input matInput placeholder="Process identifier" name="processidentifier" id="processidentifier_id"
+                   [formControl]="dialogForm.controls['processIdentifier']" maxlength="255" required>
+
+            <div *ngIf="(!editMode && dialogForm.controls['processIdentifier'].touched || editMode) &&  dialogForm.controls['processIdentifier'].hasError('required')" style="color:red; font-size: 70%">
+              Process identifier must not be empty.
+            </div>
+          </mat-form-field>
+
+          <mat-form-field style="width:100%">
+            <input matInput placeholder="Endpoint Url" name="endpointUrl" id="endpointUrl_id"
+                   [formControl]="dialogForm.controls['endpointUrl']" maxlength="255" required>
+
+            <div *ngIf="(!editMode && dialogForm.controls['endpointUrl'].touched || editMode) &&  dialogForm.controls['endpointUrl'].hasError('required')" style="color:red; font-size: 70%">
+              Endpoint URL must not be empty.
+            </div>
+          </mat-form-field>
+
+
+        </fieldset>
+      </mat-card-content>
+    </mat-card>
+  </form>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+  <div class="group-action-button">
+    <button mat-raised-button color="primary" [mat-dialog-close]="true"
+            [disabled]="!dialogForm.valid">
+      <mat-icon>check_circle</mat-icon>
+      <span>OK</span>
+    </button>
+
+    <button mat-raised-button color="primary" mat-dialog-close>
+      <mat-icon>cancel</mat-icon>
+      <span>Cancel</span>
+    </button>
+  </div>
+</mat-dialog-actions>

smp-angular/src/app/service-group-edit/service-metadata-wizard-dialog/service-metadata-wizard-dialog.component.ts

+import {ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
+import {Observable} from "rxjs/internal/Observable";
+import {SearchTableResult} from "../../common/search-table/search-table-result.model";
+import {HttpClient} from "@angular/common/http";
+import {SmpConstants} from "../../smp.constants";
+import {UserRo} from "../../user/user-ro.model";
+import {AlertService} from "../../alert/alert.service";
+import {DomainDetailsDialogComponent} from "../../domain/domain-details-dialog/domain-details-dialog.component";
+import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
+import {SearchTableEntityStatus} from "../../common/search-table/search-table-entity-status.model";
+import {DomainRo} from "../../domain/domain-ro.model";
+import {ServiceGroupEditRo} from "../service-group-edit-ro.model";
+import {ServiceMetadataEditRo} from "../service-metadata-edit-ro.model";
+import {GlobalLookups} from "../../common/global-lookups";
+
+@Component({
+  selector: 'app-messagelog-details',
+  templateUrl: './service-group-extension-wizard-dialog.component.html',
+  styleUrls: ['./service-group-extension-wizard-dialog.component.css']
+})
+export class ServiceGroupExtensionWizardDialogComponent  {
+  dialogForm: FormGroup;
+
+  dummyXML: string ="<!-- Custom element is mandatory by OASIS SMP schema.\n    Replace following element with your XML structure. -->\n<ext:example xmlns:ext=\"http://my.namespace.eu\">my mandatory content</ext:example>"
+
+
+  constructor(public dialogRef: MatDialogRef<ServiceGroupExtensionWizardDialogComponent>,
+              private dialogFormBuilder: FormBuilder) {
+
+    this.dialogForm = dialogFormBuilder.group({
+
+      'documentIdentifier': new FormControl({value: ''}, [Validators.required]),
+      'documentIdentifierScheme':  new FormControl({value: ''  }, null),
+      'processSchema':  new FormControl({value: ''}, [Validators.required]),
+      'processIdentifier':  new FormControl({value: ''}, [Validators.required]),
+      'endpointUrl':  new FormControl({value: ''}, [Validators.required]),
+      'endpointCertificate':  new FormControl({value: ''}, null),
+
+    });
+  }
+
+  getExtensionXML(){
+    /*
+    var xmlString = '<Extension xmlns="http://docs.oasis-open.org/bdxr/ns/SMP/2016/05">'
+    let arrayLength = this.elements.length;
+    for (var i = 0; i < arrayLength; i++) {
+      let str = this.dialogForm.get(this.elements[i].name).value;
+      if (str && 0 !== str.length) {
+        xmlString = xmlString + '\n    <'+this.elements[i].name+'>' + this.xmlSpecialChars(str) + '</'+this.elements[i].name+'>';
+      }
+    }
+    xmlString = xmlString+ '\n' +this.dummyXML+ '\n</Extension>'
+
+    return xmlString;*/
+  }
+
+  xmlSpecialChars(unsafe) {
+    return unsafe
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;");
+  }
+
+
+
+}

smp-angular/src/app/service-group-edit/service-metadata-wizard-dialog/service-metadata-wizard-edit-ro.model.ts

+
+export interface ServiceGroupExtensionRo  {
+  serviceGroupId: number;
+  extension: string;
+  errorMessage?: string;
+}