Added user management and also fixed the bug that Gabe pointed out with the availability on tv shows

pull/3895/head
tidusjar 5 years ago
parent 78a526bed0
commit 9fcc3120bd

@ -1,4 +1,4 @@
version: 3.0.{build}
version: 4.0.{build}
configuration: Release
os: Visual Studio 2017
environment:

@ -140,7 +140,7 @@
<button mat-raised-button class="btn-green btn-spacing" *ngIf="tv.available"> {{
'Common.Available' | translate }}</button>
<button mat-raised-button class="btn-orange btn-spacing" *ngIf="tv.partlyAvailable"> {{
<button mat-raised-button class="btn-orange btn-spacing" *ngIf="tv.partlyAvailable && !tv.available"> {{
'Common.PartlyAvailable' | translate }}</button>
<span *ngIf="tv.available">

@ -21,7 +21,6 @@ export interface IUser {
episodeRequestQuota: IRemainingRequests | null;
movieRequestQuota: IRemainingRequests | null;
musicRequestQuota: IRemainingRequests | null;
checked: boolean;
}
export interface IUserQualityProfiles {

@ -28,7 +28,8 @@ export class MyNavComponent {
public navItems: INavBar[] = [
{ name: "NavigationBar.Discover", icon: "find_replace", link: "/discover" },
{ name: "NavigationBar.Requests", icon: "list", link: "/requests" },
{ name: "NavigationBar.Requests", icon: "list", link: "/requests" },
{ name: "NavigationBar.UserManagement", icon: "account_circle", link: "/usermanagement" },
{ name: "NavigationBar.Settings", icon: "settings", link: "/Settings/About" },
]

@ -5,7 +5,7 @@
<button mat-menu-item [routerLink]="['/Settings/Customization']">Customization</button>
<button mat-menu-item [routerLink]="['/Settings/LandingPage']">Landing Page</button>
<button mat-menu-item [routerLink]="['/Settings/Issues']">Issues</button>
<button mat-menu-item [routerLink]="['/Settings/Usermanagement']">User Management</button>
<button mat-menu-item [routerLink]="['/Settings/UserManagement']">User Management</button>
<button mat-menu-item [routerLink]="['/Settings/Authentication']">Authentication</button>
<button mat-menu-item [routerLink]="['/Settings/Vote']">Vote</button>
</mat-menu>

@ -66,7 +66,6 @@ export class UserManagementUserComponent implements OnInit {
password: "",
userName: "",
userType: UserType.LocalUser,
checked: false,
hasLoggedIn: false,
lastLoggedIn: new Date(),
episodeRequestLimit: 0,

@ -2,139 +2,121 @@
<button type="button" class="btn btn-success-outline" data-test="adduserbtn" [routerLink]="['/usermanagement/user']">Add User To Ombi</button>
<button type="button" mat-raised-button color="primary" data-test="adduserbtn" [routerLink]="['/usermanagement/user']">Add User To Ombi</button>
<button type="button" style="float:right;" class="btn btn-primary-outline"(click)="showBulkEdit = !showBulkEdit" [disabled]="!hasChecked()">Bulk Edit</button>
<button type="button" style="float:right;" mat-raised-button color="primary" (click)="showBulkEdit = !showBulkEdit" [disabled]="this.selection.selected.length <= 0">Bulk Edit</button>
<!-- Table -->
<table class="table table-striped table-hover table-responsive table-condensed table-usermanagement">
<thead>
<tr>
<th style="width:1%">
<a>
<td class="checkbox" data-label="Select:">
<input id="all" type="checkbox" ng-checked="checkAll" (change)="checkAllBoxes()">
<label for="all"></label>
</td>
</a>
</th>
<th class="active" (click)="setOrder('userName', $event)">
<a>
Username
</a>
<span *ngIf="order === 'userName'">
<span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span><span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
</span>
</th>
<th (click)="setOrder('alias', $event)">
<a>
Alias
</a>
<span *ngIf="order === 'alias'">
<span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span><span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
</span>
</th>
<th (click)="setOrder('emailAddress', $event)">
<a>
Email
</a>
<span *ngIf="order === 'emailAddress'">
<span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span>
<span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
</span>
</th>
<th>
Roles
</th>
<th>
Requests Remaining
</th>
<th>
Next Request Due
</th>
<th (click)="setOrder('lastLoggedIn', $event)">
<a> Last Logged In</a>
<span *ngIf="order === 'lastLoggedIn'">
<span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span><span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
</span>
</th>
<th (click)="setOrder('userType', $event)">
<a>
User Type
</a>
<span *ngIf="order === 'userType'">
<span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span><span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
</span>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let u of users | orderBy: order : reverse : 'case-insensitive'">
<td class="checkbox" data-label="Select:">
<input id="{{u.id}}" type="checkbox" [(ngModel)]="u.checked">
<label for="{{u.id}}"></label>
</td>
<td class="td-labelled" data-label="Username:">
{{u.userName}}
</td>
<td class="td-labelled" data-label="Alias:">
{{u.alias}}
</td>
<td class="td-labelled" data-label="Email:">
{{u.emailAddress}}
</td>
<td class="td-labelled" data-label="Roles:">
<div *ngFor="let claim of u.claims">
<table *ngIf="dataSource" mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"
[aria-label]="checkboxLabel()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
[aria-label]="checkboxLabel(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Username </th>
<td mat-cell *matCellDef="let element"> {{element.userName}} </td>
</ng-container>
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
<td mat-cell *matCellDef="let element"> {{element.alias}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
<td mat-cell *matCellDef="let element"> {{element.emailAddress}} </td>
</ng-container>
<ng-container matColumnDef="remainingRequests">
<th mat-header-cell *matHeaderCellDef> Requests Remaining </th>
<td mat-cell *matCellDef="let u">
<div *ngIf="u.movieRequestQuota != null && u.movieRequestQuota.hasLimit">
{{'UserManagment.MovieRemaining' | translate: {remaining: u.movieRequestQuota.remaining, total: u.movieRequestLimit} }}
</div>
<div *ngIf="u.episodeRequestQuota != null && u.episodeRequestQuota.hasLimit">
{{'UserManagment.TvRemaining' | translate: {remaining: u.episodeRequestQuota.remaining, total: u.episodeRequestLimit} }}
</div>
<div *ngIf="u.musicRequestQuota != null && u.musicRequestQuota.hasLimit">
{{'UserManagment.MusicRemaining' | translate: {remaining: u.musicRequestQuota.remaining, total: u.musicRequestLimit} }}
</div>
</td>
</ng-container>
<ng-container matColumnDef="nextRequestDue">
<th mat-header-cell *matHeaderCellDef> Next Request Due </th>
<td mat-cell *matCellDef="let u">
<div *ngIf="u.movieRequestQuota != null && u.movieRequestQuota.remaining != u.movieRequestLimit">
{{'UserManagment.MovieDue' | translate: {date: (u.movieRequestQuota.nextRequest | amLocal | amDateFormat: 'l LT')} }}
</div>
<div *ngIf="u.episodeRequestQuota != null && u.episodeRequestQuota.remaining != u.episodeRequestLimit">
{{'UserManagment.TvDue' | translate: {date: (u.episodeRequestQuota.nextRequest | amLocal | amDateFormat: 'l LT')} }}
</div>
<div *ngIf="u.musicRequestQuota != null && u.musicRequestQuota.remaining != u.musicRequestLimit">
{{'UserManagment.MusicDue' | translate: {date: (u.musicRequestQuota.nextRequest | amLocal | amDateFormat: 'l LT')} }}
</div>
</td>
</ng-container>
<ng-container matColumnDef="lastLoggedIn">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Last Logged In </th>
<td mat-cell *matCellDef="let u">
<span *ngIf="u.lastLoggedIn">
{{u.lastLoggedIn | amLocal | amDateFormat: 'l LT'}}
</span>
<span *ngIf="!u.lastLoggedIn">
Not logged in yet!
</span> </td>
</ng-container>
<ng-container matColumnDef="userType">
<th mat-header-cell *matHeaderCellDef mat-sort-header> User Type </th>
<td mat-cell *matCellDef="let u">
<span *ngIf="u.userType === 1">Local User</span>
<span *ngIf="u.userType === 2">Plex User</span>
<span *ngIf="u.userType === 3">Emby User</span> </td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> Roles </th>
<td mat-cell *matCellDef="let element">
<div *ngFor="let claim of element.claims">
<span *ngIf="claim.enabled">{{claim.value}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> </th>
<td mat-cell *matCellDef="let u">
<button mat-raised-button color="accent" [routerLink]="['/usermanagement/user/' + u.id]">Details/Edit</button>
</td>
<td class="td-labelled" data-label="Requests Remaining">
<div *ngIf="u.movieRequestQuota != null && u.movieRequestQuota.hasLimit">
{{'UserManagment.MovieRemaining' | translate: {remaining: u.movieRequestQuota.remaining, total: u.movieRequestLimit} }}
</div>
<div *ngIf="u.episodeRequestQuota != null && u.episodeRequestQuota.hasLimit">
{{'UserManagment.TvRemaining' | translate: {remaining: u.episodeRequestQuota.remaining, total: u.episodeRequestLimit} }}
</div>
<div *ngIf="u.musicRequestQuota != null && u.musicRequestQuota.hasLimit">
{{'UserManagment.MusicRemaining' | translate: {remaining: u.musicRequestQuota.remaining, total: u.musicRequestLimit} }}
</div>
</td>
<td class="td-labelled" data-label="Request Due">
<div *ngIf="u.movieRequestQuota != null && u.movieRequestQuota.remaining != u.movieRequestLimit">
{{'UserManagment.MovieDue' | translate: {date: (u.movieRequestQuota.nextRequest | amLocal | amDateFormat: 'l LT')} }}
</div>
<div *ngIf="u.episodeRequestQuota != null && u.episodeRequestQuota.remaining != u.episodeRequestLimit">
{{'UserManagment.TvDue' | translate: {date: (u.episodeRequestQuota.nextRequest | amLocal | amDateFormat: 'l LT')} }}
</div>
<div *ngIf="u.musicRequestQuota != null && u.musicRequestQuota.remaining != u.musicRequestLimit">
{{'UserManagment.MusicDue' | translate: {date: (u.musicRequestQuota.nextRequest | amLocal | amDateFormat: 'l LT')} }}
</div>
</td>
<td class="td-labelled" data-label="Last Logged In:">
<!-- {{u.lastLoggedIn | date: 'short'}} -->
<span *ngIf="u.lastLoggedIn">
{{u.lastLoggedIn | amLocal | amDateFormat: 'l LT'}}
</span>
<span *ngIf="!u.lastLoggedIn">
Not logged in yet!
</span>
</ng-container>
<ng-container matColumnDef="welcome">
<th mat-header-cell *matHeaderCellDef> </th>
<td mat-cell *matCellDef="let u">
<button *ngIf="!u.hasLoggedIn" mat-raised-button color="accent" (click)="welcomeEmail(u)" [disabled]="!customizationSettings.applicationUrl">Send Welcome Email</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<!-- Table -->
</td>
<td class="td-labelled" data-label="User Type:">
<span *ngIf="u.userType === 1">Local User</span>
<span *ngIf="u.userType === 2">Plex User</span>
<span *ngIf="u.userType === 3">Emby User</span>
</td>
<td>
<a id="edit{{u.userName}}" [routerLink]="['/usermanagement/user/' + u.id]" class="btn btn-sm btn-info-outline">Details/Edit</a>
</td>
<td *ngIf="customizationSettings">
<button *ngIf="!u.hasLoggedIn" (click)="welcomeEmail(u)" [disabled]="!customizationSettings.applicationUrl" class="btn btn-sm btn-info-outline">Send Welcome Email</button>
</td>
</tr>
</tbody>
</table>
<p-sidebar [(visible)]="showBulkEdit" position="right" styleClass="ui-sidebar-md side-back">

@ -1,21 +1,25 @@
import { Component, OnInit } from "@angular/core";
import { Component, OnInit, ViewChild } from "@angular/core";
import { ICheckbox, ICustomizationSettings, IEmailNotificationSettings, IUser } from "../interfaces";
import { IdentityService, NotificationService, SettingsService } from "../services";
import { MatSort, MatTableDataSource } from "@angular/material";
import { SelectionModel } from "@angular/cdk/collections";
@Component({
templateUrl: "./usermanagement.component.html",
})
export class UserManagementComponent implements OnInit {
public displayedColumns: string[] = ['select', 'username', 'alias', 'email', 'roles', 'remainingRequests',
'nextRequestDue', 'lastLoggedIn', 'userType', 'actions', 'welcome'];
public dataSource: MatTableDataSource<IUser>;
public selection = new SelectionModel<IUser>(true, []);
@ViewChild(MatSort) public sort: MatSort;
public users: IUser[];
public checkAll = false;
public emailSettings: IEmailNotificationSettings;
public customizationSettings: ICustomizationSettings;
public order: string = "userName";
public reverse = false;
public showBulkEdit = false;
public availableClaims: ICheckbox[];
public bulkMovieLimit?: number;
@ -23,15 +27,15 @@ export class UserManagementComponent implements OnInit {
public plexEnabled: boolean;
constructor(private identityService: IdentityService,
private settingsService: SettingsService,
private notificationService: NotificationService,
private plexSettings: SettingsService) { }
public ngOnInit() {
this.users = [];
this.identityService.getUsers().subscribe(x => {
this.users = x;
});
private settingsService: SettingsService,
private notificationService: NotificationService,
private plexSettings: SettingsService) { }
public async ngOnInit() {
this.users = await this.identityService.getUsers().toPromise();
this.dataSource = new MatTableDataSource(this.users);
this.dataSource.sort = this.sort;
this.plexSettings.getPlex().subscribe(x => this.plexEnabled = x.enable);
@ -59,28 +63,12 @@ export class UserManagementComponent implements OnInit {
this.notificationService.success(`Sent a welcome email to ${user.emailAddress}`);
}
public checkAllBoxes() {
this.checkAll = !this.checkAll;
this.users.forEach(user => {
user.checked = this.checkAll;
});
}
public hasChecked(): boolean {
return this.users.some(x => {
return x.checked;
});
}
public bulkUpdate() {
const anyRoles = this.availableClaims.some(x => {
return x.enabled;
});
this.users.forEach(x => {
if (!x.checked) {
return;
}
this.selection.selected.forEach(x => {
if (anyRoles) {
x.claims = this.availableClaims;
}
@ -103,23 +91,24 @@ export class UserManagementComponent implements OnInit {
this.bulkEpisodeLimit = undefined;
}
public setOrder(value: string, el: any) {
el = el.toElement || el.relatedTarget || el.target || el.srcElement;
public isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
if (el.nodeName === "A") {
el = el.parentElement;
}
const parent = el.parentElement;
const previousFilter = parent.querySelector(".active");
public masterToggle() {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row));
}
if (this.order === value) {
this.reverse = !this.reverse;
} else {
previousFilter.className = "";
el.className = "active";
/** The label for the checkbox on the passed row */
public checkboxLabel(row?: IUser): string {
if (!row) {
return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
}
this.order = value;
return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.id + 1}`;
}
}

Loading…
Cancel
Save