Merge branch 'development' into bugfix/EDELIVERY-11674-alerts-ui-improvements

# Conflicts:
#	smp-angular/src/assets/i18n/en.json

changelog.txt

 eDelivery SMP 5.1
 - added new HTTP headers when creating a new resource:
-    'Resource-Owner' as alternative to ServiceGroup-Owner
+    'Resource-Admin' as alternative to ServiceGroup-Owner
     'Resource-Group': the name of the group: to define to which group in domain the resource belongs to. The group must be in one of the admin's groups. If not given the first group from the list is used.
     'Resource-Visibility': The visibility of the resource: PUBLIC, PRIVATE. The default value is PUBLIC. Resource visibility can be set only at creation time. To change value of the existing resource it must be done via the UI.
 - added new properties:

domismp-tests/domismp-docker/compose/domismp-tomcat-mysql/docker-compose.local.yml

@@ -4,7 +4,7 @@
 services:
   domismp-service:
     ports:
-#      - "3908:3306"
+      - "3908:3306"
       - "8982:8080"
 #      - "6902:6901"
 #      - "8953:53"

domismp-tests/domismp-docker/images/domismp-springboot-mysql/entrypoint.sh

@@ -108,6 +108,7 @@ init_smp() {
   # set smp data/security folder
   mkdir -p "${SMP_HOME}/smp/"
   mkdir -p  "${SMP_HOME}/smp-libs"
+  mkdir -p ${DATA_DIR}/smp/locales
   # copy smp keystore with sml authorized sml certificates
   cp /tmp/artefacts/shared-artefacts/smp-logback.xml "${SMP_HOME}/logback.xml"
   cp "/tmp/artefacts/shared-artefacts/smp-keystore-docker-demo.p12" "${SMP_HOME}/smp/smp-keystore-docker-demo.p12"
@@ -127,7 +128,7 @@ init_smp_properties() {
     echo "# SMP init parameters"
     echo "smp.security.folder=${SMP_HOME}/smp/"
     echo "smp.libraries.folder=${SMP_HOME}/smp-libs"
-    echo "smp.locale.folder=${SMP_HOME}/locales"
+    echo "smp.locale.folder=${SMP_HOME}/smp/locales"
     echo "smp.automation.authentication.external.tls.clientCert.enabled=true"
     echo "bdmsl.integration.enabled=false"
     echo "bdmsl.participant.multidomain.enabled=false"

domismp-tests/domismp-docker/images/domismp-tomcat-mysql/entrypoint.sh

@@ -85,7 +85,7 @@ init_tomcat() {
   rm -rf ${TOMCAT_HOME}/classes
   ln -sf ${TOMCAT_DIR}/classes ${TOMCAT_HOME}/
   # set smp data/security folder
-  mkdir ${DATA_DIR}/smp/
+  mkdir -p ${DATA_DIR}/smp/locales
 
   # sleep a little to avoid mv issues
   sleep 5s
@@ -103,6 +103,8 @@ init_mysql() {
     sleep 3s
     mv /var/lib/mysql ${DATA_DIR}
   fi
+  # set mysql authentication plugin to mysql_native_password
+  printf "\n[mysqld]\nbind-address =  0.0.0.0\ndefault_authentication_plugin = mysql_native_password\n" | tee -a /etc/mysql/my.cnf
 
   rm -rf /var/lib/mysql
   ln -sf ${MYSQL_DATA_DIR} /var/lib/mysql
@@ -119,7 +121,7 @@ init_mysql() {
     echo "[INFO] MySQL ${SMP_DB_SCHEMA}  not found, creating initial DBs"
 
     echo 'Create smp database'
-    mysql -h localhost -u root -e "ALTER USER 'root'@'localhost' IDENTIFIED BY '$MYSQL_ROOT_PASSWORD';drop schema if exists $SMP_DB_SCHEMA;DROP USER IF EXISTS $SMP_DB_USER;  create schema $SMP_DB_SCHEMA;alter database $SMP_DB_SCHEMA charset=utf8; create user $SMP_DB_USER identified by '$SMP_DB_USER_PASSWORD';grant all on $SMP_DB_SCHEMA.* to $SMP_DB_USER;"
+    mysql -h localhost -u root -e "ALTER USER 'root'@'localhost' IDENTIFIED BY '$MYSQL_ROOT_PASSWORD';CREATE USER 'root'@'%' IDENTIFIED BY '$MYSQL_ROOT_PASSWORD';GRANT ALL PRIVILEGES ON *.* TO 'root'@'%';drop schema if exists $SMP_DB_SCHEMA;DROP USER IF EXISTS $SMP_DB_USER;  create schema $SMP_DB_SCHEMA;alter database $SMP_DB_SCHEMA charset=utf8; create user $SMP_DB_USER identified by '$SMP_DB_USER_PASSWORD';grant all on $SMP_DB_SCHEMA.* to $SMP_DB_USER;"
 
     if [ -f "/tmp/custom-data/mysql5innodb.sql" ]; then
       echo "Use custom database script! "
@@ -241,7 +243,7 @@ init_smp_properties() {
     echo "# SMP init parameters"
     echo "smp.security.folder=${DATA_DIR}/smp/"
     echo "smp.libraries.folder=$SMP_HOME/apache-tomcat-$TOMCAT_VERSION/smp-libs"
-    echo "smp.locale.folder=$SMP_HOME/apache-tomcat-$TOMCAT_VERSION/locales"
+    echo "smp.locale.folder=$SMP_HOME/apache-tomcat-$TOMCAT_VERSION/smp/locales"
     echo "bdmsl.integration.logical.address=${SMP_LOGICAL_ADDRESS:-http://localhost:8080/smp/}"
     echo "smp.automation.authentication.external.tls.clientCert.enabled=true"
     echo "bdmsl.integration.enabled=true"

domismp-tests/domismp-docker/images/domismp-weblogic122/properties/init/smp.config.properties

 
 smp.security.folder=/data/smp/security
+smp.locale.folder=/data/smp/locales
 smp.jdbc.hibernate.dialect=org.hibernate.dialect.Oracle10gDialect
 smp.datasource.jndi=jdbc/eDeliverySmpDs
 smp.automation.authentication.external.tls.clientCert.enabled=true

domismp-tests/domismp-docker/images/domismp-weblogic141/properties/init/smp.config.properties

 
 smp.security.folder=/data/smp/security
+smp.locale.folder=/data/smp/locales
 smp.jdbc.hibernate.dialect=org.hibernate.dialect.Oracle10gDialect
 smp.datasource.jndi=jdbc/eDeliverySmpDs
 smp.automation.authentication.external.tls.clientCert.enabled=true

pom.xml

@@ -289,6 +289,11 @@ See the Licence for the specific language governing permissions and limitations
                 <artifactId>spring-core</artifactId>
                 <version>${spring.version}</version>
             </dependency>
+            <dependency>
+                <groupId>org.springframework</groupId>
+                <artifactId>spring-webmvc</artifactId>
+                <version>${spring.version}</version>
+            </dependency>
             <dependency>
                 <groupId>org.springframework</groupId>
                 <artifactId>spring-oxm</artifactId>

smp-angular/src/_smp-all-themes.scss

@@ -6,6 +6,7 @@
 @use 'app/window/sidenav/nav-tree/_nav-tree.component-theme' as nav-tree;
 @use 'app/common/search-table/_search-table.component-theme' as search-table;
 @use 'app/user-settings/user-access-tokens/access-token-panel/_access-token-panel.component-theme' as access-token-panel;
+@use 'app/common/panels/expandable-panel-component/expandable-panel.component' as expandable-panel;
 
 @mixin all-component-colors($theme) {
   @include toolbar.set-component-colors($theme);
@@ -13,11 +14,9 @@
   @include nav-tree.set-component-colors($theme);
   @include search-table.set-component-colors($theme);
   @include access-token-panel.set-component-colors($theme);
-
+  @include expandable-panel.set-component-colors($theme);
   /* shared classes*/
-  .smp-data-panel:hover {
-    background-color: smp.get-theme-color($theme, primary, 300);
-  }
+
 
   .datatable-row-odd {
     background-color: smp.get-theme-color($theme, primary, 50, 0.2) !important;

smp-angular/src/_smp-theme-helper.scss

@@ -2,7 +2,10 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-
+@function get-theme-type($smp-theme ) {
+  $color-config: mat.get-color-config($smp-theme);
+  @return map.get($color-config, type);
+}
 
 @function get-theme-color($smp-theme, $color: primary, $hue: null,  $opacity: null ) {
   $color-config: mat.get-color-config($smp-theme);

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

@@ -101,7 +101,6 @@ import {NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS,NGX_MAT_MOMENT_FORMATS, NgxMatMoment
 import {MembershipPanelComponent} from "./common/panels/membership-panel/membership-panel.component";
 import {MemberDialogComponent} from "./common/dialogs/member-dialog/member-dialog.component";
 import {MatAutocompleteModule} from "@angular/material/autocomplete";
-import {MembershipService} from "./common/panels/membership-panel/membership.service";
 import {AdminUserComponent} from "./system-settings/admin-users/admin-user.component";
 import {AdminUserService} from "./system-settings/admin-users/admin-user.service";
 import {UserProfilePanelComponent} from "./common/panels/user-settings-panel/user-profile-panel.component";
@@ -189,9 +188,17 @@ import {
   ReviewDocumentPanelComponent
 } from "./common/panels/review-tasks-panel/review-document-panel/review-document-panel.component";
 import {
-  DocumentMetadataPanelComponent
-} from "./common/panels/document-edit-panel/document-metadata-panel/document-metadata-panel.component";
+  DocumentConfigurationPanelComponent
+} from "./common/panels/document-edit-panel/document-configuration-panel/document-configuration-panel.component";
 
+import {MembershipService} from "./common/services/membership.service";
+import {
+  ReferenceDocumentDialogComponent
+} from "./common/dialogs/reference-document-dialog/reference-document-dialog.component";
+import {
+  ReferenceDocumentService
+} from "./common/services/reference-document.service";
+import {MatButtonToggleModule} from "@angular/material/button-toggle";
 
 @NgModule({
   declarations: [
@@ -225,9 +232,9 @@ import {
     DocumentWizardDialogComponent,
     DocumentEditPanelComponent,
     DocumentEventsPanelComponent,
+    DocumentConfigurationPanelComponent,
     DocumentPropertiesPanelComponent,
     DocumentPropertyDialogComponent,
-    DocumentMetadataPanelComponent,
     DocumentVersionsPanelComponent,
     DomainGroupComponent,
     DomainPanelComponent,
@@ -267,6 +274,7 @@ import {
     RowLimiterComponent,
     SaveDialogComponent,
     SearchTableComponent,
+    ReferenceDocumentDialogComponent,
     ReviewDocumentPanelComponent,
     ReviewTasksComponent,
     ReviewTasksPanelComponent,
@@ -323,6 +331,7 @@ import {
     MatToolbarModule,
     MatTooltipModule,
     MatTreeModule,
+    MatButtonToggleModule,
     NgxDatatableModule,
     NgxMatDatetimePickerModule,
     NgxMatMomentModule,
@@ -355,6 +364,7 @@ import {
     MembershipService,
     NavigationService,
     PropertyController,
+    ReferenceDocumentService,
     ResourceFilterOptionsService,
     SecurityEventService,
     SecurityService,

smp-angular/src/app/common/dialogs/credential-dialog/credential-dialog.component.ts

@@ -205,7 +205,23 @@ export class CredentialDialogComponent {
     }
     if (this.isCertificateType) {
       credential.certificate = this.certificateData;
+    } else {
+      let dateFrom = this.credentialForm.controls['activeFrom'].value;
+      if (dateFrom) {
+        // make date mutable and the modification
+        dateFrom = new Date(dateFrom);
+        dateFrom.setHours(0, 0, 0, 0);
+      }
+      credential.activeFrom = dateFrom
+      let dateTo = this.credentialForm.controls['expireOn'].value;
+      if (dateTo) {
+        // make date mutable and the modification
+        dateTo = new Date(dateTo);
+        dateTo.setHours(23, 59, 59, 999);
+      }
+      credential.expireOn = dateTo
     }
+
     return credential;
   }
 

smp-angular/src/app/common/dialogs/manage-members-dialog/manage-members-dialog.component.ts

@@ -4,7 +4,6 @@ import {FormBuilder, FormControl, FormGroup} from "@angular/forms";
 import {MembershipRoleEnum} from "../../enums/membership-role.enum";
 import {lastValueFrom, Observable} from "rxjs";
 import {SearchUserRo} from "../../model/search-user-ro.model";
-import {MembershipService} from "../../panels/membership-panel/membership.service";
 import {MemberRo} from "../../model/member-ro.model";
 import {DomainRo} from "../../model/domain-ro.model";
 import {MemberTypeEnum} from "../../enums/member-type.enum";
@@ -12,6 +11,7 @@ import {AlertMessageService} from "../../alert-message/alert-message.service";
 import {GroupRo} from "../../model/group-ro.model";
 import {ResourceRo} from "../../model/resource-ro.model";
 import {TranslateService} from "@ngx-translate/core";
+import {MembershipService} from "../../services/membership.service";
 
 
 @Component({
@@ -98,11 +98,9 @@ export class ManageMembersDialogComponent implements OnInit {
       } else {
         this.memberForm.controls['member-user'].disable();
       }
-
       this.memberForm.controls['member-fullName'].setValue(value.fullName);
       this.memberForm.controls['member-memberOf'].setValue(value.memberOf);
       this.memberForm.controls['member-roleType'].setValue(value.roleType);
-
     } else {
       this.memberForm.controls['member-user'].setValue("");
       this.memberForm.controls['member-fullName'].setValue("");

smp-angular/src/app/common/dialogs/member-dialog/member-dialog.component.css

-.form-field-full-width {
-  width: 100%;
-}
 
 .empty-field-label {
   color: gray;

smp-angular/src/app/common/dialogs/member-dialog/member-dialog.component.html

@@ -31,8 +31,8 @@
       <mat-hint>{{ "member.dialog.hint.choose.role" | translate }}</mat-hint>
     </mat-form-field>
 
-    <mat-form-field class="form-field-full-width" >
-      <mat-checkbox  *ngIf="isResourceMember" formControlName="member-can-review" id="member-user-can-review"
+    <mat-form-field *ngIf="isResourceMember"  class="form-field-full-width" >
+      <mat-checkbox  formControlName="member-can-review" id="member-user-can-review"
                      matTooltip="{{ 'member.dialog.tooltip.permission.review' | translate }}"
       >{{ "member.dialog.label.permission.review" | translate }}
         <!-- This input is used to make the mat-checkbox as form filed   -->

smp-angular/src/app/common/dialogs/member-dialog/member-dialog.component.ts

@@ -4,7 +4,6 @@ import {FormBuilder, FormControl, FormGroup} from "@angular/forms";
 import {MembershipRoleEnum} from "../../enums/membership-role.enum";
 import {lastValueFrom, Observable} from "rxjs";
 import {SearchUserRo} from "../../model/search-user-ro.model";
-import {MembershipService} from "../../panels/membership-panel/membership.service";
 import {MemberRo} from "../../model/member-ro.model";
 import {DomainRo} from "../../model/domain-ro.model";
 import {MemberTypeEnum} from "../../enums/member-type.enum";
@@ -12,6 +11,7 @@ import {AlertMessageService} from "../../alert-message/alert-message.service";
 import {GroupRo} from "../../model/group-ro.model";
 import {ResourceRo} from "../../model/resource-ro.model";
 import {TranslateService} from "@ngx-translate/core";
+import {MembershipService} from "../../services/membership.service";
 
 
 @Component({
@@ -24,9 +24,7 @@ export class MemberDialogComponent implements OnInit {
 
   message: string;
   messageType: string = "alert-error";
-
   formTitle = "";
-
   currentFilter: string;
 
   _currentMember: MemberRo;

smp-angular/src/app/common/dialogs/property-details-dialog/property-details-dialog.component.html

@@ -49,8 +49,7 @@
     <mat-icon>check_circle</mat-icon>
     <span>{{ "property.details.dialog.button.ok" | translate }}</span>
   </button>
-  <button mat-raised-button color="primary" mat-dialog-close
-      [disabled]="!isDirty" >
+  <button mat-raised-button color="primary" mat-dialog-close>
     <mat-icon>cancel</mat-icon>
     <span>{{ "property.details.dialog.button.cancel" | translate }}</span>
   </button>

smp-angular/src/app/common/dialogs/property-details-dialog/property-details-dialog.component.ts

@@ -11,13 +11,13 @@ import {
 } from "@angular/forms";
 import {
   AlertMessageService
-} from "../../../common/alert-message/alert-message.service";
-import {EntityStatus} from "../../../common/enums/entity-status.enum";
+} from "../../alert-message/alert-message.service";
+import {EntityStatus} from "../../enums/entity-status.enum";
 import {SmpConstants} from "../../../smp.constants";
 import {HttpClient} from "@angular/common/http";
 import {
   HttpErrorHandlerService
-} from "../../../common/error/http-error-handler.service";
+} from "../../error/http-error-handler.service";
 import {
   PropertyRo
 } from "../../../system-settings/admin-properties/property-ro.model";
@@ -57,7 +57,7 @@ export class PropertyDetailsDialogComponent implements OnInit {
     this.editMode = data.edit;
     this.propertyType = data.propertyType;
     this.propertyType = !data.propertyType ? PropertySourceEnum.SYSTEM : data.propertyType;
-    (async () => await this.updateFormTitle()) ();
+    (async () => await this.updateFormTitle())();
 
     this.current = this.editMode
       ? {
@@ -80,13 +80,12 @@ export class PropertyDetailsDialogComponent implements OnInit {
       'value': new UntypedFormControl({value: ''}),
       'valuePattern': new UntypedFormControl({value: ''}),
       'errorMessage': new UntypedFormControl({value: ''}),
-      'systemDefault': new UntypedFormControl({value: 'true'}),
+      'systemDefault': new UntypedFormControl({value: false}),
     });
 
     this.propertyForm.controls['property'].setValue(this.current.property);
     this.propertyForm.controls['desc'].setValue(this.current.desc);
     this.propertyForm.controls['type'].setValue(this.current.type);
-    this.propertyForm.controls['value'].setValue(this.valueFromPropertyStringValue(this.current.value, this.current.type));
     this.propertyForm.controls['valuePattern'].setValue(this.current.valuePattern);
     this.propertyForm.controls['systemDefault'].setValue(this.current.systemDefault);
 
@@ -96,8 +95,8 @@ export class PropertyDetailsDialogComponent implements OnInit {
 
   async updateFormTitle() {
     this.formTitle = this.editMode
-        ? await lastValueFrom(this.translateService.get("property.details.dialog.title.edit.mode", {type: this.capitalize(this.propertyType)}))
-        : await lastValueFrom(this.translateService.get("property.details.dialog.title.new.mode", {type: this.capitalize(this.propertyType)}));
+      ? await lastValueFrom(this.translateService.get("property.details.dialog.title.edit.mode", {type: this.capitalize(this.propertyType)}))
+      : await lastValueFrom(this.translateService.get("property.details.dialog.title.new.mode", {type: this.capitalize(this.propertyType)}));
   }
 
   ngOnInit() {
@@ -124,7 +123,6 @@ export class PropertyDetailsDialogComponent implements OnInit {
     let validationObservable = this.http
       .post<PropertyValidationRo>(SmpConstants.REST_INTERNAL_PROPERTY_VALIDATE, request);
 
-
     this.showSpinner = true;
 
     try {
@@ -164,25 +162,32 @@ export class PropertyDetailsDialogComponent implements OnInit {
 
   /**
    * Method casts string value to correct property type for dialog component used for editing.
-   * @param value
-   * @param propertyType
+   * At the moment only BOOLEAN needs to be updated, other types are returned as is.
+   * @param value - string value
+   * @param propertyType - property type
    */
-  public valueFromPropertyStringValue(value: string, propertyType: string) {
-    switch (propertyType) {
-      case 'BOOLEAN':
-        return value === 'true';
-      default:
-        return value;
+  public valueFromPropertyStringValue(value: any, propertyType: string) {
+
+    if (propertyType === 'BOOLEAN') {
+      // make sure that the value is lower case string!
+      const valToString = value?.toString().toLowerCase();
+      return valToString === 'true' || valToString === '1' || valToString === 'yes';
     }
+    return value;
   }
 
+  /**
+   * Method casts value to string for property value. At the moment only BOOLEAN needs to be updated.
+   * @param value - value
+   * @param propertyType - property type
+   */
   public valueToPropertyStringValue(value: string, propertyType: string) {
-    switch (propertyType) {
-      case 'BOOLEAN':
-        return value === 'true';
-      default:
-        return value;
+    if (propertyType === 'BOOLEAN') {
+      // make sure that the value is lower case string!
+      const valToString = value?.toString().toLowerCase();
+      return valToString === 'true' || valToString === '1' || valToString === 'yes' ? 'true' : 'false';
     }
+    return value;
   }
 
   getInputType(propertyType: string) {
@@ -235,7 +240,7 @@ export class PropertyDetailsDialogComponent implements OnInit {
 
   public getCurrent(): PropertyRo {
     this.current.status = EntityStatus.UPDATED;
-    this.current.value = this.propertyForm.value['value'];
+    this.current.value = this.valueToPropertyStringValue(this.propertyForm.value['value'], this.current.type);
     this.current.systemDefault = this.propertyForm.value['systemDefault'];
     return this.current;
   }
@@ -245,21 +250,22 @@ export class PropertyDetailsDialogComponent implements OnInit {
   }
 
   get isSystemDefault(): boolean {
-    let systemDefault = this.propertyForm.value['systemDefault'];
-    return systemDefault;
+    return this.propertyForm.value['systemDefault'];
   }
 
   /**
    * Method updates the state of the value field based on the system default checkbox.
    */
   updateValueState(): void {
+    let value;
     if (!this.isDomainProperty || !this.isSystemDefault) {
+      value = this.valueFromPropertyStringValue(this.current.value, this.current.type);
       this.propertyForm.controls['value'].enable();
-      this.propertyForm.controls['value'].setValue(this.current.value);
     } else {
-      this.propertyForm.controls['value'].setValue(this.current.systemDefaultValue);
+      value = this.valueFromPropertyStringValue(this.current.systemDefaultValue, this.current.type);
       this.propertyForm.controls['value'].disable();
     }
+    this.propertyForm.controls['value'].setValue(value);
   }
 
   get isDomainProperty(): boolean {

smp-angular/src/app/common/dialogs/reference-document-dialog/reference-document-dialog.component.css

+
+.empty-field-label {
+  color: gray;
+}
+
+#custom-file-upload {
+  display: none;
+}
+
+.custom-file-upload {
+  display: inline-block;
+  cursor: pointer;
+}
+#member-user-can-review {
+  max-height: 1.5em
+}

smp-angular/src/app/common/dialogs/reference-document-dialog/reference-document-dialog.component.html

+<h2 mat-dialog-title>{{ dialogTitle }}</h2>
+<mat-dialog-content style="width:1080px;height: 600px">
+  <form [formGroup]="filterForm">
+    <div class="panel" style="flex-direction: column">
+      <div style="display: flex;flex-direction: row;width: 100%">
+        <mat-form-field class="smp-data-panel-field">
+          <mat-label>{{ "reference.document.dialog.label.resource.value" | translate }}</mat-label>
+          <input matInput id="resource-value_id"
+                 formControlName="resourceValue">
+        </mat-form-field>
+        <mat-form-field class="smp-data-panel-field">
+          <mat-label>{{ "reference.document.dialog.label.resource.scheme" | translate }}</mat-label>
+          <input matInput id="resource-scheme_id"
+                 formControlName="resourceScheme">
+        </mat-form-field>
+
+        <mat-form-field  *ngIf="showSubresourceFields"
+          class="smp-data-panel-field">
+          <mat-label>{{ "reference.document.dialog.label.subresource.value" | translate }}</mat-label>
+          <input matInput id="subresource-value_id"
+                 formControlName="subresourceValue">
+        </mat-form-field>
+        <mat-form-field *ngIf="showSubresourceFields"
+          class="smp-data-panel-field">
+          <mat-label>{{ "reference.document.dialog.label.subresource.scheme" | translate }}</mat-label>
+          <input matInput id="subresource-scheme_id"
+                 formControlName="subresourceScheme">
+        </mat-form-field>
+
+      </div>
+      <mat-toolbar-row class="smp-toolbar-row">
+        <button mat-raised-button color="primary" id="searchbutton_id"
+                (click)="onSearchButtonClicked()"
+        >
+          <mat-icon>search</mat-icon>
+          <span>{{ "reference.document.dialog.button.search" | translate }}</span>
+        </button>
+        <button mat-raised-button  id="resetbutton_id"
+                [disabled]="filterForm"
+                (click)="onResetButtonClicked()"
+        >
+          <mat-icon>reset</mat-icon>
+          <span>{{ "reference.document.dialog.button.reset" | translate }}</span>
+        </button>
+      </mat-toolbar-row>
+    </div>
+    <table mat-table style="width: 100%"
+           [dataSource]="dataSource"
+    >
+      <!-- Name Column -->
+      <ng-container matColumnDef="resourceValue">
+        <th mat-header-cell
+            *matHeaderCellDef>{{ "reference.document.dialog.column.resource.value" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let row">{{ row.resourceValue }}</td>
+      </ng-container>
+
+      <!-- Weight Column -->
+      <ng-container matColumnDef="resourceScheme">
+        <th mat-header-cell
+            *matHeaderCellDef>{{ "reference.document.dialog.column.resource.value" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let row">{{ row.resourceScheme }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="subresourceValue">
+        <th mat-header-cell
+            *matHeaderCellDef>{{ "reference.document.dialog.column.subresource.value" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let row">{{ row.subresourceValue }}</td>
+      </ng-container>
+
+      <!-- Weight Column -->
+      <ng-container matColumnDef="subresourceScheme">
+        <th mat-header-cell
+            *matHeaderCellDef>{{ "reference.document.dialog.column.subresource.scheme" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let row">{{ row.subresourceScheme }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="urlLinkAction">
+        <th mat-header-cell
+            *matHeaderCellDef>{{ "reference.document.dialog.column.open.url" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let row">
+          <a *ngIf="row.referenceUrl"
+             target="_blank"
+             href="{{createURL(row)}}">{{ "reference.document.dialog.column.open.url" | translate }}</a>
+        </td>
+      </ng-container>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let odd = odd; let row; columns: displayedColumns;"
+          (click)="onRowClicked(row)"
+          [ngClass]="{'datatable-row-selected': row==selectedRow,'datatable-row-odd': odd}"
+      ></tr>
+    </table>
+    <mat-paginator class="mat-elevation-z2" id="tokens-paginator"
+                   [hidePageSize]="true"
+                   [pageSize]="10"
+                   attr.aria-label="{{ 'reference.document.dialog.label.select.page' | translate }}"></mat-paginator>
+
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button id="closeDialogButton" mat-raised-button color="primary"
+          (click)="closeDialog()">
+    <mat-icon>cancel</mat-icon>
+    <span>{{ "reference.document.dialog.button.close" | translate }}</span>
+  </button>
+  <button id="saveButton" mat-raised-button (click)="onSaveButtonClicked()"
+          color="primary"
+          [disabled]="submitButtonDisabled">
+    <mat-icon>save</mat-icon>
+    <span>{{ "reference.document.dialog.button.save" | translate }}</span>
+  </button>
+</mat-dialog-actions>
+

smp-angular/src/app/common/dialogs/reference-document-dialog/reference-document-dialog.component.ts

+import {Component, Inject, OnInit, ViewChild} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {FormBuilder, FormControl, FormGroup} from "@angular/forms";
+import {AlertMessageService} from "../../alert-message/alert-message.service";
+import {TranslateService} from "@ngx-translate/core";
+import {lastValueFrom, Observer} from "rxjs";
+import {MatTableDataSource} from "@angular/material/table";
+import {
+  SearchReferenceDocument
+} from "../../model/search-reference-document-ro.model";
+import {MatPaginator} from "@angular/material/paginator";
+import {
+  ReferenceDocumentService
+} from "../../services/reference-document.service";
+import {
+  EditResourceService
+} from "../../../edit/edit-resources/edit-resource.service";
+import {ResourceRo} from "../../model/resource-ro.model";
+import {DocumentReferenceType} from "../../enums/documetn-reference-type.enum";
+import {TableResult} from "../../model/table-result.model";
+import {SubresourceRo} from "../../model/subresource-ro.model";
+
+/**
+ * Dialog component for searching reference documents
+ *
+ * @since 5.1
+ * @author Joze RIHTARSIC
+ */
+@Component({
+  templateUrl: './reference-document-dialog.component.html',
+  styleUrls: ['./reference-document-dialog.component.css']
+})
+export class ReferenceDocumentDialogComponent implements OnInit {
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  filterForm: FormGroup;
+  dialogTitle = "Search Reference Document";
+  domainList: string[];
+  _resourceDisplayedColumns: string[] = ['resourceValue', 'resourceScheme', 'urlLinkAction'];
+  _subresourceDisplayedColumns: string[] = ['resourceValue', 'resourceScheme', 'subresourceValue', 'subresourceScheme', 'urlLinkAction'];
+  dataSource: MatTableDataSource<SearchReferenceDocument> = new MatTableDataSource();
+  _contextPath: string = location.pathname.substring(0, location.pathname.length - 3); // remove /ui s
+  targetResource: ResourceRo
+  targetSubresource: SubresourceRo
+  targetType: DocumentReferenceType = DocumentReferenceType.RESOURCE;
+  selectedRow: SearchReferenceDocument;
+
+  // ----
+  // defined observers
+  loadReferenceDocumentsObserver: Partial<Observer<TableResult<SearchReferenceDocument>>> = {
+    next: (data) => {
+      this.dataSource.data = data.serviceEntities;
+      this.dataSource.paginator.length = data.count;
+    },
+    error: (error) => {
+      this.alertService.error("Error while searching reference documents");
+    }
+  }
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any,
+              private referenceDocumentService: ReferenceDocumentService,
+              public dialogRef: MatDialogRef<ReferenceDocumentDialogComponent>,
+              private alertService: AlertMessageService,
+              private formBuilder: FormBuilder,
+              private translateService: TranslateService,
+              private editResourceService: EditResourceService
+  ) {
+    dialogRef.disableClose = true;//disable default close operation
+    this.filterForm = this.formBuilder.group({
+      'resourceValue': new FormControl({value: null}),
+      'resourceScheme': new FormControl({value: null}),
+      'subresourceValue': new FormControl({value: null}),
+      'subresourceScheme': new FormControl({value: null}),
+    });
+
+    this.filterForm.controls['resourceValue'].setValue("");
+    this.filterForm.controls['resourceScheme'].setValue("");
+    this.filterForm.controls['subresourceValue'].setValue("");
+    this.filterForm.controls['subresourceScheme'].setValue("");
+
+    this.targetResource = data.targetResource
+    this.targetSubresource = data.targetSubresource
+    this.targetType = data.targetType
+  }
+
+  async updateDialogTitle() {
+    this.dialogTitle = await lastValueFrom(this.translateService.get("reference.document.dialog.title"))
+  }
+
+  async ngOnInit() {
+    await this.updateDialogTitle();
+
+  }
+
+  get isDirty(): boolean {
+    return this.filterForm.dirty;
+  }
+
+  get displayedColumns(): string[] {
+    return this.showSubresourceFields ? this._subresourceDisplayedColumns : this._resourceDisplayedColumns;
+  }
+
+  get showSubresourceFields(): boolean {
+    return this.targetType === DocumentReferenceType.SUBRESOURCE;
+  }
+
+  createURL(row: SearchReferenceDocument) {
+    return this._contextPath + row.referenceUrl;
+  }
+
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
+  }
+
+  onResetButtonClicked() {
+    this.filterForm.reset();
+  }
+
+  onSearchButtonClicked() {
+    // submit form data as a filter.
+    let filter = this.filterForm.value;
+    if (this.targetType === DocumentReferenceType.RESOURCE) {
+      this.referenceDocumentService.getSearchResourceDocumentReferencesObservable$(filter, this.targetResource)
+        .subscribe(this.loadReferenceDocumentsObserver);
+    } else {
+      this.referenceDocumentService.getSearchSubresourceDocumentReferencesObservable$(filter, this.targetResource, this.targetSubresource)
+        .subscribe(this.loadReferenceDocumentsObserver);
+    }
+  }
+
+  closeDialog() {
+    this.dialogRef.close();
+  }
+
+  onSaveButtonClicked() {
+    this.dialogRef.close(this.selectedRow);
+  }
+
+  get submitButtonDisabled(): boolean {
+    return !this.selectedRow
+  }
+
+  public onRowClicked(row: SearchReferenceDocument) {
+    this.selectedRow = row;
+  }
+
+}