Add field link click callback

- Add support for setting a link click callback
- Link callbacks override regular link re-direction
- Add metadata to base ViewFieldDefinition
- Add needed link styling for a tags without href

core/app/fields/field.component.html

@@ -1,5 +1,5 @@
-<ng-container *ngIf="isLink()">
+<ng-container *ngIf="hasOnClick()">
-    <a [routerLink]="getLink()">
+    <a (click)="onClick()" class="clickable field-link">
         <ndc-dynamic
             [ndcDynamicComponent]="componentType"
             [ndcDynamicInputs]="{
@@ -10,7 +10,19 @@
         ></ndc-dynamic>
     </a>
 </ng-container>
-<ng-container *ngIf="!isLink()">
+<ng-container *ngIf="isLink() && !hasOnClick()">
+    <a [routerLink]="getLink()" class="field-link">
+        <ndc-dynamic
+            [ndcDynamicComponent]="componentType"
+            [ndcDynamicInputs]="{
+                'field': field,
+                'klass': klass,
+                'record': record
+            }"
+        ></ndc-dynamic>
+    </a>
+</ng-container>
+<ng-container *ngIf="!isLink() && !hasOnClick()">
     <ndc-dynamic
         [ndcDynamicComponent]="componentType"
         [ndcDynamicInputs]="{

core/app/fields/field.component.ts

@@ -5,6 +5,7 @@ import {Record} from '@app-common/record/record.model';
 import {Field} from '@app-common/record/field.model';
 import {ModuleNameMapper} from '@services/navigation/module-name-mapper/module-name-mapper.service';
 import {StringMap} from '@app-common/types/StringMap';
+import {Router} from '@angular/router';
 
 @Component({
     selector: 'scrm-field',
@@ -20,7 +21,11 @@ export class FieldComponent {
 
     map = viewFieldsMap;
 
-    constructor(protected navigation: ModuleNavigation, private moduleNameMapper: ModuleNameMapper) {
+    constructor(
+        protected navigation: ModuleNavigation,
+        protected moduleNameMapper: ModuleNameMapper,
+        protected router: Router
+    ) {
     }
 
     get componentType(): any {
@@ -42,13 +47,17 @@ export class FieldComponent {
             return false;
         }
 
-        if (this.type === 'relate') {
+        if (this.type === 'relate' && this.field.metadata && this.field.metadata.link !== false) {
             return true;
         }
 
         return !!(this.field.metadata && this.field.metadata.link);
     }
 
+    hasOnClick(): boolean {
+        return !!(this.field.metadata && this.field.metadata.onClick);
+    }
+
     isEdit(): boolean {
         return this.mode === 'edit' || this.mode === 'filter';
     }
@@ -84,4 +93,14 @@ export class FieldComponent {
     getMessageLabelKey(item: any): string {
         return (item && item.message && item.message.labelKey) || '';
     }
+
+    onClick(): boolean {
+        if (this.field.metadata.onClick) {
+            this.field.metadata.onClick(this.field, this.record);
+            return;
+        }
+
+        this.router.navigateByUrl(this.getLink()).then();
+        return false;
+    }
 }

core/app/src/app-common/metadata/metadata.model.ts

@@ -1,4 +1,4 @@
-import {FieldDefinition} from '@app-common/record/field.model';
+import {FieldDefinition, FieldMetadata} from '@app-common/record/field.model';
 
 export interface ViewFieldDefinition {
     name?: string;
@@ -6,6 +6,7 @@ export interface ViewFieldDefinition {
     link?: boolean;
     type?: string;
     fieldDefinition?: FieldDefinition;
+    metadata?: FieldMetadata;
 }
 
 export interface Panel {

core/app/src/app-common/record/field.model.ts

@@ -1,6 +1,7 @@
 import {SearchCriteriaFieldFilter} from '@app-common/views/list/search-criteria.model';
 import {Observable} from 'rxjs';
 import {AsyncValidatorFn, FormControl, ValidatorFn} from '@angular/forms';
+import {Record} from '@app-common/record/record.model';
 
 export interface Option {
     value: string;
@@ -42,6 +43,8 @@ export interface FieldDefinition {
     template?: string;
 }
 
+export declare type FieldClickCallback = (field: Field, record: Record) => void;
+
 export interface FieldMetadata {
     format?: boolean;
     target?: string;
@@ -50,6 +53,7 @@ export interface FieldMetadata {
     cols?: number;
     digits?: number;
     options$?: Observable<Option[]>;
+    onClick?: FieldClickCallback;
 }
 
 export interface FieldMap {

core/app/themes/suite8/css/base/_base.scss

@@ -2,6 +2,16 @@ a {
   color: $coral-pink;
 }
 
+a.clickable {
+  color: $coral-pink;
+  cursor: pointer;
+}
+
+a.clickable:hover {
+  color: $coral-pink;
+  text-decoration: underline;
+}
+
 .textarea {
   background: #ffffff
 }