inserted CCLI link

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 smuddy
+Copyright (c) 2019 Benjamin Ifland
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

src/app/modules/songs/song/edit/edit-song/edit-song.component.html

@@ -74,6 +74,13 @@
       <mat-form-field appearance="outline">
         <mat-label>Rechteinhaber ID (z.B. CCLI Liednummer)</mat-label>
         <input formControlName="legalOwnerId" matInput>
+        <a *ngIf="form.value.legalOwner==='CCLI'" class="link-ccli"
+           href="https://songselect.ccli.com/Songs/{{form.value.legalOwnerId}}"
+           matSuffix
+           matTooltip="CCLI Link: https://songselect.ccli.com/Songs/{{form.value.legalOwnerId}}"
+           matTooltipPosition="before" target="_blank">
+          <fa-icon [icon]="faLink"></fa-icon>
+        </a>
       </mat-form-field>
 
       <mat-form-field appearance="outline">

src/app/modules/songs/song/edit/edit-song/edit-song.component.less

@@ -25,3 +25,9 @@
     font-family: 'Ubuntu Mono', monospace;
   }
 }
+
+.link-ccli {
+  top: -18px;
+  right: 0;
+  position: absolute;
+}

src/app/modules/songs/song/edit/edit-song/edit-song.component.ts

@@ -10,6 +10,7 @@ import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import {MatChipInputEvent} from '@angular/material/chips';
 import {faTimesCircle} from '@fortawesome/free-solid-svg-icons/faTimesCircle';
 import {faSave} from '@fortawesome/free-solid-svg-icons/faSave';
+import {faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons/faExternalLinkAlt';
 
 @Component({
   selector: 'app-edit-song',
@@ -28,6 +29,7 @@ export class EditSongComponent implements OnInit {
   readonly separatorKeysCodes: number[] = [ENTER, COMMA];
   public faRemove = faTimesCircle;
   public faSave = faSave;
+  public faLink = faExternalLinkAlt;
 
   constructor(
     private activatedRoute: ActivatedRoute,

src/app/modules/songs/song/edit/edit.module.ts

@@ -21,6 +21,7 @@ import {MatChipsModule} from '@angular/material/chips';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {StatusTranslaterModule} from '../../../../widget-modules/pipes/status-translater/status-translater.module';
 import {ButtonModule} from '../../../../widget-modules/components/button/button.module';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 
 @NgModule({
@@ -47,6 +48,7 @@ import {ButtonModule} from '../../../../widget-modules/components/button/button.
     FontAwesomeModule,
     StatusTranslaterModule,
     ButtonModule,
+    MatTooltipModule,
 
   ]
 })

src/app/modules/songs/song/song.component.html

@@ -8,7 +8,12 @@
           <div>Tempo: {{song.tempo}}</div>
           <div>Status: {{(song.status|status) || 'entwurf'}}</div>
           <div *ngIf="song.legalOwner">Rechteinhaber: {{song.legalOwner|legalOwner}}</div>
-          <div *ngIf="song.legalOwnerId">Rechteinhaber ID: {{song.legalOwnerId}}</div>
+          <div *ngIf="song.legalOwnerId && song.legalOwner==='CCLI'">
+            <a href="https://songselect.ccli.com/Songs/{{song.legalOwnerId}}" target="_blank">
+              CCLI Nummer: {{song.legalOwnerId}}
+            </a>
+          </div>
+          <div *ngIf="song.legalOwnerId && song.legalOwner!=='CCLI'">Rechteinhaber ID: {{song.legalOwnerId}}</div>
           <div *ngIf="song.artist">Künstler: {{song.artist}}</div>
           <div *ngIf="song.label">Verlag: {{song.label}}</div>
           <div *ngIf="song.origin">Quelle: {{song.origin}}</div>