Add hyperlink database column type

src/app/components/components.module.ts

@@ -42,6 +42,7 @@ import {DateTimeFilterComponent} from './editor/database/filters/date-time.filte
 import {DatabasePageComponent} from './editor/database/database-page.component';
 import {PageLinkRendererComponent} from './editor/database/renderers/page-link-renderer.component';
 import {PageLinkEditorComponent} from './editor/database/editors/page-link/page-link-editor.component';
+import {LinkRendererComponent} from './editor/database/renderers/link-renderer.component';
 import {FormInputComponent} from './nodes/form-input/form-input.component';
 import {FormInputOptionsComponent} from './nodes/form-input/options/form-input-options.component';
 import {DatabaseLinkComponent} from './editor/forms/database-link.component';
@@ -79,6 +80,7 @@ import {DatabaseLinkComponent} from './editor/forms/database-link.component';
     DateTimeFilterComponent,
     DatabasePageComponent,
     PageLinkRendererComponent,
+    LinkRendererComponent,
     PageLinkEditorComponent,
     FormInputComponent,
     FormInputOptionsComponent,
@@ -130,6 +132,7 @@ import {DatabaseLinkComponent} from './editor/forms/database-link.component';
     DateTimeFilterComponent,
     DatabasePageComponent,
     PageLinkRendererComponent,
+    LinkRendererComponent,
     PageLinkEditorComponent,
     FormInputComponent,
     FormInputOptionsComponent,
@@ -167,6 +170,7 @@ import {DatabaseLinkComponent} from './editor/forms/database-link.component';
     DateTimeFilterComponent,
     DatabasePageComponent,
     PageLinkRendererComponent,
+    LinkRendererComponent,
     PageLinkEditorComponent,
     FormInputComponent,
     FormInputOptionsComponent,

src/app/components/editor/database/columns/columns.component.html

@@ -36,6 +36,7 @@
             <ion-select-option value="currency">Currency</ion-select-option>
             <ion-select-option value="index">Incrementing Index</ion-select-option>
             <ion-select-option value="page_link">Link to Page</ion-select-option>
+            <ion-select-option value="link">Hyperlink</ion-select-option>
 <!--            <ion-select-option value="person">Person</ion-select-option>-->
 <!--            <ion-select-option value="url">URL</ion-select-option>-->
 <!--            <ion-select-option value="email">E-Mail</ion-select-option>-->

src/app/components/editor/database/database.component.ts

@@ -19,6 +19,7 @@ import {debounce, debug} from '../../../utility';
 import {DateTimeFilterComponent} from './filters/date-time.filter';
 import {DatabasePageComponent} from './database-page.component';
 import {PageLinkRendererComponent} from './renderers/page-link-renderer.component';
+import {LinkRendererComponent} from './renderers/link-renderer.component';
 import {PageLinkEditorComponent} from './editors/page-link/page-link-editor.component';
 
 @Component({
@@ -145,7 +146,7 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
 
     const modal = await this.modals.create({
       component: ColumnsComponent,
-      componentProps: {columnSets: this.columnDefs},
+      componentProps: {columnSets: this.columnDefs.slice(1)},
       cssClass: 'modal-med',
     });
 
@@ -309,6 +310,10 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
 
         x.cellEditorParams._pagesData = this.pages;
         x.cellRendererParams._pagesData = this.pages;
+      } else if ( x.Type === 'link' ) {
+        x.cellRendererFramework = LinkRendererComponent;
+        x.editor = 'agTextCellEditor';
+        x.filter = 'agTextColumnFilter';
       }
 
       return x;

src/app/components/editor/database/renderers/link-renderer.component.ts

@@ -0,0 +1,55 @@
+import {ICellRendererAngularComp} from 'ag-grid-angular';
+import {Component, HostListener} from '@angular/core';
+import {ICellRendererParams} from 'ag-grid-community';
+import {NavigationService} from '../../../../service/navigation.service';
+import {NodeTypeIcons} from '../../../../structures/node-types';
+
+@Component({
+    selector: 'editor-link-renderer',
+    template: `
+    <div (click)="onClick($event)" *ngIf="href" style="display: flex">
+        <div class="text">{{ href }}</div>
+        <div class="btn" [title]="href" (click)="onClick($event, true)">
+            <i class="fa fa-external-link-alt" style="margin-right: 2px;"></i> Open
+        </div>
+    </div>`,
+    styles: [`
+        .text {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            padding-right: 5px;
+            flex: 1;
+        }
+
+        .btn:hover {
+            cursor: pointer;
+            font-weight: bold;
+        }
+    `]
+})
+export class LinkRendererComponent implements ICellRendererAngularComp {
+    public params: ICellRendererParams;
+    public href?: string;
+
+    constructor(
+        protected readonly nav: NavigationService,
+    ) { }
+
+    agInit(params: ICellRendererParams): void {
+        this.params = params;
+        this.href = params.value;
+    }
+
+    onClick(event, force = false) {
+        if ( event.ctrlKey || force ) {
+            event.stopPropagation();
+            event.preventDefault();
+            window.open(this.href, '_blank');
+        }
+    }
+
+    refresh(params: any): boolean {
+        return false;
+    }
+}