Refactor status translation into a dedicated pipe

src/Ombi/ClientApp/src/app/media-details/components/movie/panels/movie-information-panel.component.html

@@ -27,7 +27,7 @@
     <hr>
     <div>
         <span class="label">{{'MediaDetails.Status' | translate }}</span>
-        <span id="status">{{ getMovieStatusLabel()}}</span>
+        <span id="status">{{ this.movie.status | translateStatus }}</span>
     </div>
     <div>
         <span class="label">{{'MediaDetails.Availability' | translate }}</span>

src/Ombi/ClientApp/src/app/media-details/components/movie/panels/movie-information-panel.component.ts

@@ -1,5 +1,4 @@
 import { Component, ViewEncapsulation, Input, OnInit, Inject } from "@angular/core";
-import { TranslateService } from "@ngx-translate/core";
 import { ISearchMovieResultV2 } from "../../../../interfaces/ISearchMovieResultV2";
 import { IMovieRequests } from "../../../../interfaces";
 import { SearchV2Service } from "../../../../services/searchV2.service";
@@ -14,8 +13,7 @@ import { IStreamingData } from "../../../../interfaces/IStreams";
 })
 export class MovieInformationPanelComponent implements OnInit {
 
-    constructor(private searchService: SearchV2Service, @Inject(APP_BASE_HREF) public internalBaseUrl: string,
-        private translate: TranslateService) { }
+    constructor(private searchService: SearchV2Service, @Inject(APP_BASE_HREF) public internalBaseUrl: string) { }
 
     @Input() public movie: ISearchMovieResultV2;
     @Input() public request: IMovieRequests;
@@ -35,14 +33,4 @@ export class MovieInformationPanelComponent implements OnInit {
 
             this.searchService.getMovieStreams(this.movie.id).subscribe(x => this.streams = x);
     }
-
-    public getMovieStatusLabel() {
-        const textKey = 'MediaDetails.StatusValues.' + this.movie.status;
-        const text = this.translate.instant(textKey);
-         if (text !== textKey) {
-            return text;
-         } else {
-             return this.movie.status;
-         }
-    }
 }

src/Ombi/ClientApp/src/app/media-details/components/tv/panels/tv-information-panel/tv-information-panel.component.html

@@ -22,7 +22,7 @@
         <hr>
         <div *ngIf="tv.status">
             <span  class="label">{{'MediaDetails.Status' | translate }}</span>
-                <span id="status">{{ getTVStatusLabel()}}</span>
+                <span id="status">{{ this.tv.status | translateStatus }}</span>
         </div>
         <span class="label">{{'MediaDetails.FirstAired' | translate }}</span>
             {{tv.firstAired | localizedDate: 'mediumDate'}}

src/Ombi/ClientApp/src/app/media-details/components/tv/panels/tv-information-panel/tv-information-panel.component.ts

@@ -1,6 +1,5 @@
 import { APP_BASE_HREF } from "@angular/common";
 import { Component, ViewEncapsulation, Input, OnInit, Inject } from "@angular/core";
-import { TranslateService } from "@ngx-translate/core";
 import { ITvRequests } from "../../../../../interfaces";
 import { ITvRatings } from "../../../../../interfaces/IRatings";
 import { ISearchTvResultV2 } from "../../../../../interfaces/ISearchTvResultV2"; 
@@ -15,8 +14,7 @@ import { SearchV2Service } from "../../../../../services";
 })
 export class TvInformationPanelComponent implements OnInit {
 
-    constructor(private searchService: SearchV2Service, @Inject(APP_BASE_HREF) public internalBaseUrl: string, 
-        private translate: TranslateService) { }
+    constructor(private searchService: SearchV2Service, @Inject(APP_BASE_HREF) public internalBaseUrl: string) { }
 
     @Input() public tv: ISearchTvResultV2;
     @Input() public request: ITvRequests;
@@ -46,14 +44,4 @@ export class TvInformationPanelComponent implements OnInit {
     public sortBy(prop: string) {
         return this.streams.sort((a, b) => a[prop] > b[prop] ? 1 : a[prop] === b[prop] ? 0 : -1);
     }
-
-    public getTVStatusLabel() {
-        const textKey = 'MediaDetails.StatusValues.' + this.tv.status;
-        const text = this.translate.instant(textKey);
-        if (text !== textKey) {
-            return text;
-        } else {
-            return this.tv.status;
-        }
-    }
 }

src/Ombi/ClientApp/src/app/pipes/TranslateStatus.ts

@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+@Pipe({
+    name: 'translateStatus'
+  })
+export class TranslateStatusPipe implements PipeTransform {
+  constructor(private translateService: TranslateService) {}
+
+  transform(value: string): string {
+    const textKey = 'MediaDetails.StatusValues.' + value;
+    const text = this.translateService.instant(textKey);
+    if (text !== textKey) {
+        return text;
+    } else {
+        return value;
+    }
+  }
+}

src/Ombi/ClientApp/src/app/pipes/pipe.module.ts

@@ -1,6 +1,7 @@
 import { ModuleWithProviders, NgModule } from "@angular/core";
 import { HumanizePipe } from "./HumanizePipe";
 import { LocalizedDatePipe } from "./LocalizedDate";
+import { TranslateStatusPipe } from "./TranslateStatus";
 import { ThousandShortPipe } from "./ThousandShortPipe";
 import { SafePipe } from "./SafePipe";
 import { QualityPipe } from "./QualityPipe";
@@ -8,8 +9,8 @@ import { UserLocalePipe } from "./UserLocalePipe";
 
 @NgModule({
     imports:        [],
-    declarations:   [HumanizePipe, ThousandShortPipe, SafePipe, QualityPipe, UserLocalePipe, LocalizedDatePipe ],
-    exports:        [HumanizePipe, ThousandShortPipe, SafePipe, QualityPipe, UserLocalePipe, LocalizedDatePipe ],
+    declarations:   [HumanizePipe, ThousandShortPipe, SafePipe, QualityPipe, UserLocalePipe, LocalizedDatePipe, TranslateStatusPipe ],
+    exports:        [HumanizePipe, ThousandShortPipe, SafePipe, QualityPipe, UserLocalePipe, LocalizedDatePipe, TranslateStatusPipe ],
 })
 export class PipeModule {
 

src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.html

@@ -63,7 +63,7 @@
 
         <ng-container matColumnDef="status">
             <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> {{ 'Requests.Status' | translate}} </th>
-            <td mat-cell id="status{{element.id}}"  *matCellDef="let element"> {{element.status}} </td>
+            <td mat-cell id="status{{element.id}}"  *matCellDef="let element"> {{element.status |translateStatus }} </td>
         </ng-container>
 
 

src/Ombi/ClientApp/src/app/requests-list/components/tv-grid/tv-grid.component.html

@@ -56,7 +56,7 @@
         <ng-container matColumnDef="status">
             <th mat-header-cell *matHeaderCellDef> {{'Requests.Status' | translate}} </th>
             <td mat-cell id="status{{element.id}}" *matCellDef="let element">
-                {{element.parentRequest.status}}
+                {{element.parentRequest.status | translateStatus }}
             </td>
         </ng-container>