status icons in song list

src/app/modules/songs/song-list/list-item/list-item.component.html

@@ -1,8 +1,22 @@
 <div class="list-item">
   <div class="number">{{song.number}}</div>
+  <div>{{song.title}}</div>
   <div>
-    <span *ngIf="song.legalType==='open'" class="warning"><fa-icon [icon]="faLegal"></fa-icon> &nbsp;</span>
-    {{song.title}}</div>
+    <ng-container *appRole="['contributor']">
+      <span *ngIf="song.status==='draft' || !song.status" class="warning" matTooltip="Entwurf"
+            matTooltipPosition="before">
+        <fa-icon [icon]="faDraft"></fa-icon> &nbsp;
+      </span>
+      <span *ngIf="song.status==='set'" class="neutral" matTooltip="Entwurf" matTooltipPosition="before">
+        <fa-icon [icon]="faDraft"></fa-icon> &nbsp;
+      </span>
+      <span *ngIf="song.status==='final'" class="success" matTooltip="Final" matTooltipPosition="before">
+        <fa-icon [icon]="faFinal"></fa-icon> &nbsp;
+      </span>
+    </ng-container>
+    <span *ngIf="song.legalType==='open'" class="warning" matTooltip="rechtlicher Status ist ungeklärt"
+          matTooltipPosition="before"><fa-icon [icon]="faLegal"></fa-icon> &nbsp;</span>
+  </div>
   <div>{{song.key}}</div>
 
 </div>

src/app/modules/songs/song-list/list-item/list-item.component.less

@@ -3,7 +3,7 @@
 .list-item {
   padding: 5px 20px;
   display: grid;
-  grid-template-columns: 50px auto 30px;
+  grid-template-columns: 50px auto 60px 30px;
 
   & > div {
     display: flex;
@@ -28,6 +28,14 @@
   text-align: right;
 }
 
+.neutral {
+  color: #888;
+}
+
 .warning {
   color: #ba3500;
 }
+
+.success {
+  color: #307501;
+}

src/app/modules/songs/song-list/list-item/list-item.component.ts

@@ -1,6 +1,8 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {Song} from '../../services/song';
 import {faBalanceScaleRight} from '@fortawesome/free-solid-svg-icons/faBalanceScaleRight';
+import {faPencilRuler} from '@fortawesome/free-solid-svg-icons/faPencilRuler';
+import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck';
 
 @Component({
   selector: 'app-list-item',
@@ -10,6 +12,8 @@ import {faBalanceScaleRight} from '@fortawesome/free-solid-svg-icons/faBalanceSc
 export class ListItemComponent implements OnInit {
   @Input() public song: Song;
   public faLegal = faBalanceScaleRight;
+  public faDraft = faPencilRuler;
+  public faFinal = faCheck;
 
   constructor() {
   }

src/app/modules/songs/song-list/song-list.module.ts

@@ -13,6 +13,8 @@ import {ReactiveFormsModule} from '@angular/forms';
 import {MatSelectModule} from '@angular/material/select';
 import {SongTypeTranslaterModule} from '../../../widget-modules/pipes/song-type-translater/song-type-translater.module';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {RoleModule} from '../../../services/user/role.module';
 
 
 @NgModule({
@@ -30,7 +32,9 @@ import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
     ReactiveFormsModule,
     MatSelectModule,
     SongTypeTranslaterModule,
-    FontAwesomeModule
+    FontAwesomeModule,
+    MatTooltipModule,
+    RoleModule
   ]
 })
 export class SongListModule {