refactor: Rework the Plex Settings Page (#4772)

[skip ci]

src/Ombi.Api.Discord/DiscordApi.cs

@@ -14,12 +14,12 @@ namespace Ombi.Api.Discord
             Api = api;
         }
         
-        private const string BaseUrl = "https://discordapp.com/api/";
+        private const string _baseUrl = "https://discordapp.com/api/";
         private IApi Api { get; }
         
         public async Task SendMessage(DiscordWebhookBody body, string webhookId, string webhookToken)
         {
-            var request = new Request($"webhooks/{webhookId}/{webhookToken}", BaseUrl, HttpMethod.Post);
+            var request = new Request($"webhooks/{webhookId}/{webhookToken}", _baseUrl, HttpMethod.Post);
 
             request.AddJsonBody(body);
 

src/Ombi.Schedule/Jobs/Sonarr/SonarrSync.cs

@@ -67,11 +67,9 @@ namespace Ombi.Schedule.Jobs.Sonarr
                     var strat = _ctx.Database.CreateExecutionStrategy();
                     await strat.ExecuteAsync(async () =>
                     {
-                        using (var tran = await _ctx.Database.BeginTransactionAsync())
-                        {
-                            await _ctx.Database.ExecuteSqlRawAsync("DELETE FROM SonarrCache");
-                            tran.Commit();
-                        }
+                        using var tran = await _ctx.Database.BeginTransactionAsync();
+                        await _ctx.Database.ExecuteSqlRawAsync("DELETE FROM SonarrCache");
+                        tran.Commit();
                     });
 
                     var sonarrCacheToSave = new HashSet<SonarrCache>();
@@ -97,11 +95,9 @@ namespace Ombi.Schedule.Jobs.Sonarr
                     strat = _ctx.Database.CreateExecutionStrategy();
                     await strat.ExecuteAsync(async () =>
                     {
-                        using (var tran = await _ctx.Database.BeginTransactionAsync())
-                        {
-                            await _ctx.Database.ExecuteSqlRawAsync("DELETE FROM SonarrEpisodeCache");
-                            tran.Commit();
-                        }
+                        using var tran = await _ctx.Database.BeginTransactionAsync();
+                        await _ctx.Database.ExecuteSqlRawAsync("DELETE FROM SonarrEpisodeCache");
+                        tran.Commit();
                     });
 
                     foreach (var s in ids)
@@ -111,7 +107,7 @@ namespace Ombi.Schedule.Jobs.Sonarr
                             continue;
                         }
 
-                        _log.LogDebug("Syncing series: {0}", s.Title);
+                        _log.LogDebug($"Syncing series: {s.Title}");
                         var episodes = await _api.GetEpisodes(s.Id, settings.ApiKey, settings.FullUri);
                         var monitoredEpisodes = episodes.Where(x => x.monitored || x.hasFile);
 
@@ -156,13 +152,11 @@ namespace Ombi.Schedule.Jobs.Sonarr
                         strat = _ctx.Database.CreateExecutionStrategy();
                         await strat.ExecuteAsync(async () =>
                         {
-                            using (var tran = await _ctx.Database.BeginTransactionAsync())
-                            {
-                                await _ctx.SonarrEpisodeCache.AddRangeAsync(episodesToAdd);
-                                _log.LogDebug("Commiting the transaction");
-                                await _ctx.SaveChangesAsync();
-                                tran.Commit();
-                            }
+                            using var tran = await _ctx.Database.BeginTransactionAsync();
+                            await _ctx.SonarrEpisodeCache.AddRangeAsync(episodesToAdd);
+                            _log.LogDebug("Commiting the transaction");
+                            await _ctx.SaveChangesAsync();
+                            tran.Commit();
                         });
                     }
 

src/Ombi/ClientApp/src/app/settings/plex/components/form-field/plex-form-field.component.ts

@@ -0,0 +1,43 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+
+@Component({
+    selector: "settings-plex-form-field",
+    template: `
+    <div class="row">
+        <div class="col-2 align-self-center">
+            {{label}}
+
+            <br>
+            <!-- Content Below the label -->
+            <ng-content></ng-content>
+        </div>
+        <div class="md-form-field col-10">
+            <mat-form-field appearance="outline" floatLabel=auto *ngIf="type === 'input' || type === 'password'">
+                <input matInput placeholder={{placeholder}} [attr.type]="type" id="{{id}}" name="{{id}}" [ngModel]="value" (ngModelChange)="change($event)" value="{{value}}">
+            </mat-form-field>
+
+            <mat-slide-toggle *ngIf="type === 'checkbox'" id="{{id}}" [ngModel]="value" (ngModelChange)="change($event)" [checked]="value"></mat-slide-toggle>
+
+            <ng-content select="[below]"></ng-content>
+        </div>
+
+        <div class="col-12">
+            <ng-content select="[bottom]"></ng-content>
+        </div>
+    </div>
+    `
+})
+export class PlexFormFieldComponent {
+
+    @Input() public label: string;
+    @Input() public value: any;
+    @Output() public valueChange = new EventEmitter();
+    @Input() public id: string;
+    @Input() public placeholder: string;
+    @Input() public type: "input" | "checkbox" | "password" = "input"
+
+    public change(newValue: string) {
+        this.value = newValue;
+        this.valueChange.emit(newValue);
+      }
+}

src/Ombi/ClientApp/src/app/settings/plex/components/models/PlexCreds.ts

@@ -0,0 +1,4 @@
+export interface PlexCreds {
+    username: string;
+    password: string;
+}

src/Ombi/ClientApp/src/app/settings/plex/components/models/PlexSyncType.ts

@@ -0,0 +1,6 @@
+export enum PlexSyncType {
+    Full = 0,
+    RecentlyAdded = 1,
+    ClearAndReSync = 2,
+    WatchlistImport = 3,
+}

src/Ombi/ClientApp/src/app/settings/plex/components/models/index.ts

@@ -0,0 +1,2 @@
+export * from './PlexSyncType';
+export * from './PlexCreds';

src/Ombi/ClientApp/src/app/settings/plex/components/plex-form/plex-form.component.html

@@ -0,0 +1,154 @@
+<div>
+
+    <div class="md-form-field">
+        <label for="username" class="control-label">
+            <h3>Plex Credentials</h3>
+            <small>These fields are optional to automatically fill in your Plex server settings. <br>
+            This will pass your username and password to the Plex.tv API to grab the servers associated with this user.
+        <br>
+        If you have 2FA enabled on your account, you need to append the 2FA code to the end of your password.</small>
+        </label>
+    </div>
+
+    <settings-plex-form-field [label]="'Username'" [id]="'username'" [(value)]="username"></settings-plex-form-field>
+    <settings-plex-form-field [label]="'Password'" [id]="'password'" [type]="'password'" [(value)]="password"></settings-plex-form-field>
+
+    <div class="md-form-field">
+        <div class="right">
+            <button mat-raised-button id="loadServers" (click)="loadServers.emit({username, password})"
+                class="mat-stroked-button">Load Servers
+                <i class="fas fa-key"></i>
+            </button>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-2 align-self-center">
+            Please select the server:
+        </div>
+        <div class="md-form-field col-10">
+            <div *ngIf="!loadedServers">
+                <mat-form-field appearance="outline" floatLabel=auto>
+                    <input disabled  matInput placeholder="No Servers Loaded" id="selectServer-noservers">
+                </mat-form-field>
+            </div>
+
+            <div *ngIf="loadedServers">
+                <mat-form-field appearance="outline">
+                    <mat-select placeholder="Servers Loaded! Please Select">
+                        <mat-option (click)="selectServer.emit(s)"
+                            *ngFor="let s of loadedServers.servers.server" [value]="s.server">
+                            {{s.name}}</mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 md-form-field">
+            <div>
+                <button mat-raised-button (click)="loadLibraries.emit()"
+                    class="mat-focus-indicator mat-stroked-button mat-button-base">Load Libraries
+                    <i class="fas fa-film"></i>
+                </button>
+            </div>
+        </div>
+
+        <div class="col-2 align-self-center">
+            Please select the libraries you want Ombi to monitor
+            <br>
+            <small>Note: if nothing is selected, we will monitor all libraries</small>
+        </div>
+        <div class="md-form-field col-10">
+            <div *ngIf="server.plexSelectedLibraries">
+                <div *ngFor="let lib of server.plexSelectedLibraries">
+                    <div class="md-form-field">
+                        <div class="checkbox">
+                            <mat-slide-toggle [(ngModel)]="lib.enabled" [checked]="lib.enabled"
+                                for="{{lib.title}}">{{lib.title}}</mat-slide-toggle>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <hr class="hr-margin">
+
+    <settings-plex-form-field [label]="'Server Name'" [id]="'name'" [(value)]="server.name"></settings-plex-form-field>
+    <settings-plex-form-field [label]="'Hostname or IP'" [id]="'ip'" [(value)]="server.ip"></settings-plex-form-field>
+    <settings-plex-form-field [label]="'Port'" [id]="'port'" [(value)]="server.port"></settings-plex-form-field>
+
+    <settings-plex-form-field [label]="'SSL'" [type]="'checkbox'" [id]="'ssl'" [(value)]="server.ssl"></settings-plex-form-field>
+
+    <settings-plex-form-field [label]="'Plex Authorization Token'" [id]="'authToken'" [(value)]="server.plexAuthToken"></settings-plex-form-field>
+    <settings-plex-form-field [label]="'Machine Identifier'" [id]="'MachineIdentifier'" [(value)]="server.machineIdentifier"></settings-plex-form-field>
+    <settings-plex-form-field
+        [label]="'Externally Facing Hostname'"
+        [placeholder]="'e.g. https://app.plex.tv'"
+        [id]="'hostname'"
+        [(value)]="server.serverHostname">
+
+        <small>This will be the external address that users will navigate to when they press the 'View On Plex' button</small>
+        <small below>
+            <span *ngIf="server.serverHostname">Current URL: "{{server.serverHostname}}/web/app#!/server/{{server.machineIdentifier}}/details?key=%2flibrary%2Fmetadata%2F53334"</span>
+            <span *ngIf="!server.serverHostname">Current URL: "https://app.plex.tv/web/app#!/server/{{server.machineIdentifier}}/details?key=%2flibrary%2Fmetadata%2F53334"</span>
+        </small>
+    </settings-plex-form-field>
+
+    <settings-plex-form-field
+        *ngIf="advancedEnabled"
+        [label]="'Episode Batch Size'"
+        [id]="'episodeBatchSize'"
+        [(value)]="server.episodeBatchSize">
+        <small>This is used when we cache the episodes, we cache in batches of 150 by default, you can configure how many we do at a time here</small>
+    </settings-plex-form-field>
+
+
+    <br>
+    <br>
+    <br>
+</div>
+
+
+
+
+
+
+<!-- Second section -->
+
+<div class="row">
+
+    <br />
+
+        <div class="form-group col-12">
+            <button mat-raised-button id="testPlex" type="button" (click)="test.emit()"
+                class="mat-focus-indicator mat-stroked-button mat-button-base">
+                Test Connectivity
+                <div id="spinner"></div>
+            </button>
+        </div>
+        <div class="form-group col-1">
+            <button mat-raised-button (click)="runSync.emit(PlexSyncType.Full)" type="button" id="fullSync"
+                class="mat-focus-indicator mat-stroked-button mat-button-base">Full
+                Sync</button><br />
+        </div>
+        <div class="form-group col-1">
+            <button mat-raised-button (click)="runSync.emit(PlexSyncType.RecentlyAdded)" type="button" id="recentlyAddedSync"
+                class="mat-focus-indicator mat-stroked-button mat-button-base">Partial Sync</button>
+        </div>
+        <div class="form-group col-1">
+            <button mat-raised-button (click)="runSync.emit(PlexSyncType.ClearAndReSync)" type="button" id="clearData"
+                class="mat-focus-indicator mat-stroked-button mat-button-base">
+                Clear Data And Resync
+            </button>
+        </div>
+        <div class="form-group col-12">
+            <button mat-raised-button (click)="runSync.emit(PlexSyncType.WatchlistImport)" type="button" id="watchlistImport"
+                class="mat-focus-indicator mat-stroked-button mat-button-base">
+                Run Watchlist Import
+            </button>
+        </div>
+</div>

src/Ombi/ClientApp/src/app/settings/plex/components/plex-form/plex-form.component.scss

@@ -0,0 +1,8 @@
+.hr-margin {
+    margin-bottom: 2rem;
+    margin-top: 2rem;
+}
+
+.right {
+    text-align: right;
+}

src/Ombi/ClientApp/src/app/settings/plex/components/plex-form/plex-form.component.ts

@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { IPlexServer, IPlexServerResponse, IPlexServerViewModel } from "app/interfaces";
+import { PlexCreds, PlexSyncType } from "../models";
+
+@Component({
+    templateUrl: "./plex-form.component.html",
+    styleUrls: ["./plex-form.component.scss"],
+    selector: "settings-plex-form"
+})
+export class PlexFormComponent {
+
+    @Input() public server: IPlexServer;
+    @Input() public advancedEnabled: boolean = false;
+    @Input() public loadedServers: IPlexServerViewModel;
+
+    @Output() public loadLibraries = new EventEmitter();
+    @Output() public loadServers = new EventEmitter<PlexCreds>();
+    @Output() public selectServer = new EventEmitter<IPlexServerResponse>();
+    @Output() public test = new EventEmitter();
+    @Output() public runSync = new EventEmitter<PlexSyncType>();
+
+    public username: string;
+    public password: string;
+    public PlexSyncType = PlexSyncType;
+}

src/Ombi/ClientApp/src/app/settings/plex/plex.component.html

@@ -2,206 +2,43 @@
 <div class="small-middle-container" *ngIf="settings">
     <fieldset style="width:100%;">
         <legend>Plex Configuration</legend>
-        <div class="row">
-            <div class="col-md-6 col-12">
-                <div class="md-form-field">
-                    <mat-slide-toggle [(ngModel)]="settings.enable" [checked]="settings.enable">Enable
-                    </mat-slide-toggle>
-                </div>
-                <div class="md-form-field">
-                    <mat-slide-toggle [(ngModel)]="settings.enableWatchlistImport" [checked]="settings.enableWatchlistImport">Enable User Watchlist Requests
-                    </mat-slide-toggle>
-                    <p>When a Plex User adds something to their watchlist in Plex, it will turn up in Ombi as a Request if enabled. This <b>only</b> applies to users that are logging in with their Plex Account</p>
-                    <p>Request limits if set are all still applied etc.</p>
-                </div>
-                <div class="md-form-field">
-                    <mat-slide-toggle [(ngModel)]="advanced">Advanced</mat-slide-toggle>
-                </div>
- 
-            </div>
-            <div class="col-md-6 col-12">
-                <div class="md-form-field align-right">
-                    <button (click)="openWatchlistUserLog()" type="button" class="mat-focus-indicator mat-flat-button mat-button-base mat-accent">Watchlist User Errors</button>
-                </div>
- 
-            </div>
-        </div>
+
+        <settings-plex-form-field [label]="'Enable'" [type]="'checkbox'" [id]="'enable'" [(value)]="settings.enable"></settings-plex-form-field>
+
+        <settings-plex-form-field [label]="'Enable User Watchlist Requests'" [type]="'checkbox'" [id]="'enable'" [(value)]="settings.enableWatchlistImport">
+            <small bottom>When a Plex User adds something to their watchlist in Plex, it will turn up in Ombi as a Request if enabled. This <b>only</b> applies to users that are logging in with their Plex Account
+                <br>Request limits if set are all still applied
+            </small>
+        </settings-plex-form-field>
+
+        <settings-plex-form-field [label]="'Advanced Options'" [type]="'checkbox'" [id]="'advanced'" [(value)]="advanced"></settings-plex-form-field>
+
+        <hr>
+
         <div class="row">
             <mat-tab-group #tabGroup [selectedIndex]="selected.value" (selectedTabChange)="addTab($event)"
                 (selectedIndexChange)="selected.setValue($event)" animationDuration="0ms" style="width:100%;">
                 <mat-tab *ngFor="let server of settings.servers" [label]="server.name">
+
                     <div class="col-md-6 col-6 col-sm-6 align-right">
                         <button type="button" (click)="removeServer(server)"
                             class="mat-focus-indicator mat-flat-button mat-button-base mat-warn">Remove Server</button>
                     </div>
                     <br />
                     <br />
-                    <div class="col-md-7 col-8 col-sm-12">
-                        <!-- Main Content -->
-                        <label for="username" class="control-label">
-                            <h3>Plex Server Configuration</h3>
-                        </label>
-                        <div class="md-form-field">
-                            <mat-form-field appearance="outline" floatLabel=auto>
-                                <mat-label>Server Name</mat-label>
-                                <input matInput id="name" name="name" 
-                                    [(ngModel)]="server.name" value="{{server.name}}">
-                            </mat-form-field>
-                        </div>
 
-                        <div class="md-form-field">
-                            <mat-form-field appearance="outline" floatLabel=auto>
-                                <mat-label>Hostname or IP</mat-label>
-                                <input matInput id="Ip" name="Ip" [(ngModel)]="server.ip"
-                                    value="{{server.ip}}">
-                            </mat-form-field>
+                    <settings-plex-form
+                        [server]="server"
+                        [advancedEnabled]="advanced"
+                        [loadedServers]="loadedServers"
+                        (loadLibraries)="loadLibraries(server)"
+                        (loadServers)="requestServers($event)"
+                        (test)="testPlex(server)"
+                        (runSync)="runSync($event)"
+                        (selectServer)="selectServer($event, server)"
+                        >
+                    </settings-plex-form>
 
-                            <mat-form-field appearance="outline" floatLabel=auto>
-                                <mat-label>Port</mat-label>
-                                <input matInput id="portNumber" name="Port" 
-                                    [(ngModel)]="server.port" value="{{server.port}}">
-                            </mat-form-field>
-
-                            <mat-slide-toggle id="ssl" [(ngModel)]="server.ssl" [checked]="server.ssl">
-                                SSL
-                            </mat-slide-toggle>
-                        </div>
-                        <div class="md-form-field">
-                            <mat-form-field appearance="outline" floatLabel=auto>
-                                <mat-label>Plex Authorization Token</mat-label>
-                                <input matInput id="authToken"
-                                    [(ngModel)]="server.plexAuthToken" value="{{server.plexAuthToken}}">
-                            </mat-form-field>
-
-                            <mat-form-field appearance="outline" floatLabel=auto>
-                                <mat-label>Machine Identifier</mat-label>
-                                <input matInput id="MachineIdentifier" name="MachineIdentifier"
-                                    [(ngModel)]="server.machineIdentifier" value="{{server.machineIdentifier}}">
-                            </mat-form-field>
-                        </div>
-                        <div class="md-form-field">
-                            <mat-form-field appearance="outline" floatLabel=auto>
-                                <mat-label>Externally Facing Hostname</mat-label>
-                                <input matInput placeholder="e.g. https://app.plex.tv" [(ngModel)]="server.serverHostname" value="{{server.serverHostname}}" matTooltip="This will be the external address that users will navigate to when they press the 'View On Plex' button">
-                            </mat-form-field>
-                            <small>
-                                <span *ngIf="server.serverHostname">Current URL: "{{server.serverHostname}}/web/app#!/server/{{server.machineIdentifier}}/details?key=%2flibrary%2Fmetadata%2F53334"</span>
-                                <span *ngIf="!server.serverHostname">Current URL: "https://app.plex.tv/web/app#!/server/{{server.machineIdentifier}}/details?key=%2flibrary%2Fmetadata%2F53334"</span>
-                            </small>
-                        </div>
-                        <div class="md-form-field">
-                            <div class="md-form-field" *ngIf="advanced">
-                                <mat-form-field appearance="outline" floatLabel=auto>
-                                    <mat-label for="episodeBatchSize" class="control-label">Episode Batch Size</mat-label>
-                                    <input matInput type="number" id="episodeBatchSize" name="episodeBatchSize"
-                                        [(ngModel)]="server.episodeBatchSize" value="{{server.episodeBatchSize}}"
-                                        matTooltip="This is used when we cache the episodes, we cache in batches of 150 by default, you can configure how many we do at a time here"
-                                        matTooltipPosition="right">
-                                </mat-form-field>
-                            </div>
-                        </div>
-                        <div class="md-form-field" *ngIf="loadedServers">
-                            <label for="username" class="control-label">Please select the server</label>
-                            <br />
-                            <div class="btn-group">
-                                <div class="btn-group">
-                                    <mat-form-field appearance="outline">
-                                        <mat-label>Server</mat-label>
-                                        <mat-select>
-                                            <mat-option (click)="selectServer(s,server)"
-                                                *ngFor="let s of loadedServers.servers.server" [value]="s.server">
-                                                {{s.name}}</mat-option>
-                                        </mat-select>
-                                    </mat-form-field>
-                                </div>
-                            </div>
-                        </div>
-                        <label>Please select the libraries you want Ombi to look in for content</label>
-                        <br />
-                        <small>Note: if nothing is selected, we will monitor all libraries</small>
-                        <div class="md-form-field">
-                            <div>
-                                <button mat-raised-button (click)="loadLibraries(server)"
-                                    class="mat-focus-indicator mat-stroked-button mat-button-base">Load Libraries
-                                    <i class="fas fa-film"></i>
-                                </button>
-                            </div>
-                        </div>
-                        <br />
-                        <div *ngIf="server.plexSelectedLibraries">
-                            <div *ngFor="let lib of server.plexSelectedLibraries">
-                                <div class="md-form-field">
-                                    <div class="checkbox">
-                                        <mat-slide-toggle [(ngModel)]="lib.enabled" [checked]="lib.enabled"
-                                            for="{{lib.title}}">{{lib.title}}</mat-slide-toggle>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-md-5 col-4 col-sm-12">
-                        <div class="md-form-field">
-                            <label for="username" class="control-label">
-                                <h3>Plex Credentials</h3>
-                                <small>These fields are optional to automatically fill in your Plex server settings</small>
-                            </label>
-                            <div>
-                                <mat-form-field appearance="outline" floatLabel=auto>
-                                    <mat-label>Username</mat-label>
-                                    <input matInput id="username"  [(ngModel)]="username"
-                                        value="{{username}}">
-                                </mat-form-field>
-                            </div>
-                            <div>
-                                <mat-form-field appearance="outline" floatLabel=auto>
-                                    <mat-label>Password</mat-label>
-                                    <input matInput type="password" id="password" 
-                                        [(ngModel)]="password" value="{{password}}">
-                                </mat-form-field>
-                            </div>
-                        </div>
-                        <div class="md-form-field">
-                            <div>
-                                <button mat-raised-button id="requestToken" (click)="requestServers(server)"
-                                    class="mat-stroked-button">Load Servers
-                                    <i class="fas fa-key"></i>
-                                </button>
-                            </div>
-                        </div>
-                        <br />
-
-                        <div class="form-group">
-                            <div class="form-group">
-                                <button mat-raised-button id="testPlex" type="button" (click)="testPlex(server)"
-                                    class="mat-focus-indicator mat-stroked-button mat-button-base">
-                                    Test Connectivity
-                                    <div id="spinner"></div>
-                                </button>
-                            </div>
-                            <div class="form-group">
-                                <button mat-raised-button (click)="runCacher()" type="button" id="fullSync"
-                                    class="mat-focus-indicator mat-stroked-button mat-button-base">Manually Run Full
-                                    Sync</button><br />
-                            </div>
-                            <div class="form-group">
-                                <button mat-raised-button (click)="runRecentlyAddedCacher()" type="button" id="recentlyAddedSync"
-                                    class="mat-focus-indicator mat-stroked-button mat-button-base">Manually Run Recently
-                                    Added Sync</button>
-                            </div>
-                            <div class="form-group">
-                                <button mat-raised-button (click)="clearDataAndResync()" type="button" id="clearData"
-                                    class="mat-focus-indicator mat-stroked-button mat-button-base">
-                                    Clear Data And Resync
-                                </button>
-                            </div>
-                            <div class="form-group">
-                                <button mat-raised-button (click)="runWatchlistImport()" type="button" id="watchlistImport"
-                                    class="mat-focus-indicator mat-stroked-button mat-button-base">
-                                    Run Watchlist Import
-                                </button>
-                            </div>
-                        </div>
-                    </div>
                 </mat-tab>
                 <mat-tab label="" disabled=true> </mat-tab>
                 <mat-tab label="Add Server" position=100> </mat-tab>

src/Ombi/ClientApp/src/app/settings/plex/plex.component.scss

@@ -17,4 +17,8 @@
     float: right;
     width:100%;
     text-align:right;
+}
+
+::ng-deep div .mat-tab-body-content {
+    overflow: hidden;
 }

src/Ombi/ClientApp/src/app/settings/plex/plex.component.ts

@@ -8,6 +8,7 @@ import { MatTabChangeEvent, MatTabGroup } from "@angular/material/tabs";
 import {UntypedFormControl} from '@angular/forms';
 import { MatDialog } from "@angular/material/dialog";
 import { PlexWatchlistComponent } from "./components/watchlist/plex-watchlist.component";
+import { PlexCreds, PlexSyncType } from "./components/models";
 
 @Component({
     templateUrl: "./plex.component.html",
@@ -16,8 +17,6 @@ import { PlexWatchlistComponent } from "./components/watchlist/plex-watchlist.co
 export class PlexComponent implements OnInit, OnDestroy {
     public settings: IPlexSettings;
     public loadedServers: IPlexServerViewModel; // This comes from the api call for the user to select a server
-    public username: string;
-    public password: string;
     public serversButton = false;
     selected = new UntypedFormControl(0);
     @ViewChild("tabGroup", {static: false}) public tagGroup: MatTabGroup;
@@ -40,8 +39,8 @@ export class PlexComponent implements OnInit, OnDestroy {
         });
     }
 
-    public requestServers(server: IPlexServer) {
-        this.plexService.getServers(this.username, this.password).pipe(
+    public requestServers({ username, password }: PlexCreds) {
+        this.plexService.getServers(username, password).pipe(
             takeUntil(this.subscriptions),
         ).subscribe(x => {
             if (x.success) {
@@ -151,7 +150,24 @@ export class PlexComponent implements OnInit, OnDestroy {
         });
     }
 
-    public runCacher(): void {
+    public runSync(type: PlexSyncType) {
+        switch (type) {
+            case PlexSyncType.Full:
+                this.runCacher();
+                return;
+            case PlexSyncType.RecentlyAdded:
+                this.runRecentlyAddedCacher();
+                return;
+            case PlexSyncType.ClearAndReSync:
+                this.clearDataAndResync();
+                return;
+            case PlexSyncType.WatchlistImport:
+                this.runWatchlistImport();
+                return;
+        }
+    }
+
+    private runCacher(): void {
         this.jobService.runPlexCacher().subscribe(x => {
             if (x) {
                 this.notificationService.success("Triggered the Plex Full Sync");
@@ -159,7 +175,7 @@ export class PlexComponent implements OnInit, OnDestroy {
         });
     }
 
-    public runRecentlyAddedCacher(): void {
+    private runRecentlyAddedCacher(): void {
         this.jobService.runPlexRecentlyAddedCacher().subscribe(x => {
             if (x) {
                 this.notificationService.success("Triggered the Plex Recently Added Sync");
@@ -167,7 +183,7 @@ export class PlexComponent implements OnInit, OnDestroy {
         });
     }
 
-    public clearDataAndResync(): void {
+    private clearDataAndResync(): void {
         this.jobService.clearMediaserverData().subscribe(x => {
             if (x) {
                 this.notificationService.success("Triggered the Clear MediaServer Resync");
@@ -175,7 +191,7 @@ export class PlexComponent implements OnInit, OnDestroy {
         });
     }
 
-    public runWatchlistImport(): void {
+    private runWatchlistImport(): void {
         this.jobService.runPlexWatchlistImport().subscribe(x => {
             if (x) {
                 this.notificationService.success("Triggered the Watchlist Import");

src/Ombi/ClientApp/src/app/settings/settings.module.ts

@@ -84,6 +84,8 @@ import { WebhookComponent } from "./notifications/webhook.component";
 import { WhatsAppComponent } from "./notifications/twilio/whatsapp.component";
 import { WikiComponent } from "./wiki.component";
 import { PlexWatchlistComponent } from "./plex/components/watchlist/plex-watchlist.component";
+import { PlexFormComponent } from "./plex/components/plex-form/plex-form.component";
+import { PlexFormFieldComponent } from "./plex/components/form-field/plex-form-field.component";
 
 const routes: Routes = [
     { path: "Ombi", component: OmbiComponent, canActivate: [AuthGuard] },
@@ -191,6 +193,8 @@ const routes: Routes = [
         CloudMobileComponent,
         UpdateDialogComponent,
         PlexWatchlistComponent,
+        PlexFormComponent,
+        PlexFormFieldComponent,
     ],
     exports: [
         RouterModule,