refactor: Rework the Plex Settings Page (#4772)

[skip ci]
pull/4774/head^2
Jamie 2 years ago committed by GitHub
parent 9ba50982b0
commit dc98613bb4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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);

@ -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();
});
}

@ -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);
}
}

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

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

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

@ -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>

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

@ -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;
}

@ -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>
<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>
<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-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>

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

@ -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");

@ -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,

Loading…
Cancel
Save