mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-22 14:13:36 -07:00
feat(discover): ✨ Admins can now approve the Recently Requested list
This commit is contained in:
parent
b0b1764f38
commit
6e7303fb3b
9 changed files with 132 additions and 62 deletions
|
@ -1,18 +0,0 @@
|
|||
.detailed-container {
|
||||
width: 400px;
|
||||
|
||||
|
||||
|
||||
|
||||
::ng-deep .poster {
|
||||
border-radius: 10px;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transition: .5s ease;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@ import { MatButtonModule } from "@angular/material/button";
|
|||
@Input() public text: string;
|
||||
|
||||
@Input() public id: string;
|
||||
@Input() public type: string;
|
||||
@Input() public type: string = "primary";
|
||||
@Input() public class: string;
|
||||
@Input('data-toggle') public dataToggle: string;
|
||||
@Input('data-target') public dataTarget: string;
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<div id="detailed-{{request.mediaId}}" class="detailed-container" (click)="click()" [style.background-image]="background">
|
||||
<div id="detailed-{{request.mediaId}}" class="detailed-container" [style.background-image]="background">
|
||||
<div class="row">
|
||||
<div class="col-xl-5 col-lg-5 col-md-5 col-sm-12 posterColumn">
|
||||
<ombi-image [src]="request.posterPath" [type]="request.type" class="poster" alt="{{request.title}}">
|
||||
<ombi-image (click)="click()" [src]="request.posterPath" [type]="request.type" class="poster" alt="{{request.title}}">
|
||||
</ombi-image>
|
||||
</div>
|
||||
<div class="col-xl-7 col-lg-7 col-md-7 col-sm-12">
|
||||
|
@ -20,6 +20,11 @@
|
|||
<p id="detailed-request-status-{{request.mediaId}}">{{'MediaDetails.Status' | translate}} <span class="badge badge-{{getClass(request)}}">{{getStatus(request) | translate}}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row action-items">
|
||||
<div class="col-12" *ngIf="isAdmin">
|
||||
<button *ngIf="!request.approved" id="approve-{{request.mediaId}}" color="accent" mat-raised-button (click)="approve()">{{'Common.Approve' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.detailed-container {
|
||||
width: 400px;
|
||||
height: auto;
|
||||
height: 250px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
|
@ -10,6 +10,7 @@
|
|||
|
||||
@media (max-width:768px) {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
background-color: $ombi-background-accent;
|
||||
|
@ -36,12 +37,19 @@
|
|||
border-radius: 10px;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
height: 225px;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
transition: .5s ease;
|
||||
backface-visibility: hidden;
|
||||
border: 1px solid #35465c;
|
||||
}
|
||||
|
||||
.action-items {
|
||||
@media (min-width:768px) {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
z-index: 0i;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -67,6 +67,7 @@ NewMovieRequest.args = {
|
|||
overview: 'The Matrix is a movie about a group of people who are forced to fight against a powerful computer system that controls them.',
|
||||
releaseDate: new Date(2020, 1, 1),
|
||||
} as IRecentlyRequested,
|
||||
isAdmin: false,
|
||||
};
|
||||
|
||||
export const MovieNoUsername = Template.bind({});
|
||||
|
@ -206,4 +207,60 @@ TvNoUsername.args = {
|
|||
mediaId: '603',
|
||||
releaseDate: new Date(2020, 1, 1),
|
||||
} as IRecentlyRequested,
|
||||
};
|
||||
|
||||
export const AdminNewMovie = Template.bind({});
|
||||
// More on args: https://storybook.js.org/docs/angular/writing-stories/args
|
||||
AdminNewMovie.args = {
|
||||
request: {
|
||||
title: 'The Matrix',
|
||||
approved: false,
|
||||
available: false,
|
||||
tvPartiallyAvailable: false,
|
||||
requestDate: new Date(2022, 1, 1),
|
||||
username: 'John Doe',
|
||||
userId: '12345',
|
||||
type: RequestType.movie,
|
||||
mediaId: '603',
|
||||
overview: 'The Matrix is a movie about a group of people who are forced to fight against a powerful computer system that controls them.',
|
||||
releaseDate: new Date(2020, 1, 1),
|
||||
} as IRecentlyRequested,
|
||||
isAdmin: true,
|
||||
};
|
||||
|
||||
export const AdminTvShow = Template.bind({});
|
||||
// More on args: https://storybook.js.org/docs/angular/writing-stories/args
|
||||
AdminTvShow.args = {
|
||||
request: {
|
||||
title: 'For All Mankind',
|
||||
approved: false,
|
||||
available: false,
|
||||
tvPartiallyAvailable: true,
|
||||
requestDate: new Date(2022, 1, 1),
|
||||
userId: '12345',
|
||||
type: RequestType.tvShow,
|
||||
mediaId: '603',
|
||||
username: 'John Doe',
|
||||
releaseDate: new Date(2020, 1, 1),
|
||||
} as IRecentlyRequested,
|
||||
isAdmin: true,
|
||||
};
|
||||
|
||||
export const AdminApprovedMovie = Template.bind({});
|
||||
// More on args: https://storybook.js.org/docs/angular/writing-stories/args
|
||||
AdminApprovedMovie.args = {
|
||||
request: {
|
||||
title: 'The Matrix',
|
||||
approved: true,
|
||||
available: false,
|
||||
tvPartiallyAvailable: false,
|
||||
requestDate: new Date(2022, 1, 1),
|
||||
username: 'John Doe',
|
||||
userId: '12345',
|
||||
type: RequestType.movie,
|
||||
mediaId: '603',
|
||||
overview: 'The Matrix is a movie about a group of people who are forced to fight against a powerful computer system that controls them.',
|
||||
releaseDate: new Date(2020, 1, 1),
|
||||
} as IRecentlyRequested,
|
||||
isAdmin: true,
|
||||
};
|
|
@ -7,14 +7,14 @@ import { DomSanitizer, SafeStyle } from "@angular/platform-browser";
|
|||
@Component({
|
||||
standalone: false,
|
||||
selector: 'ombi-detailed-card',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
templateUrl: './detailed-card.component.html',
|
||||
styleUrls: ['./detailed-card.component.scss']
|
||||
})
|
||||
export class DetailedCardComponent implements OnInit, OnDestroy {
|
||||
@Input() public request: IRecentlyRequested;
|
||||
|
||||
@Input() public isAdmin: boolean = false;
|
||||
@Output() public onClick: EventEmitter<void> = new EventEmitter<void>();
|
||||
@Output() public onApprove: EventEmitter<void> = new EventEmitter<void>();
|
||||
|
||||
public RequestType = RequestType;
|
||||
public loading: false;
|
||||
|
@ -62,6 +62,10 @@ import { DomSanitizer, SafeStyle } from "@angular/platform-browser";
|
|||
this.onClick.emit();
|
||||
}
|
||||
|
||||
public approve() {
|
||||
this.onApprove.emit();
|
||||
}
|
||||
|
||||
public getClass(request: IRecentlyRequested) {
|
||||
if (request.available || request.tvPartiallyAvailable) {
|
||||
return "success";
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<p-carousel #carousel [value]="requests" [numVisible]="3" [numScroll]="1" [responsiveOptions]="responsiveOptions" [page]="0">
|
||||
<p-carousel #carousel [value]="requests$ | async" [numVisible]="3" [numScroll]="1" [responsiveOptions]="responsiveOptions" [page]="0">
|
||||
<ng-template let-result pTemplate="item">
|
||||
<ombi-detailed-card [request]="result" (onClick)="navigate(result)"></ombi-detailed-card>
|
||||
<ombi-detailed-card [request]="result" [isAdmin]="isAdmin" (onClick)="navigate(result)" (onApprove)="approve(result)"></ombi-detailed-card>
|
||||
</ng-template>
|
||||
</p-carousel>
|
|
@ -1,15 +1,13 @@
|
|||
import { Component, OnInit, Input, ViewChild, Output, EventEmitter, OnDestroy } from "@angular/core";
|
||||
import { DiscoverOption, IDiscoverCardResult } from "../../interfaces";
|
||||
import { IRecentlyRequested, ISearchMovieResult, ISearchTvResult, RequestType } from "../../../interfaces";
|
||||
import { SearchV2Service } from "../../../services";
|
||||
import { StorageService } from "../../../shared/storage/storage-service";
|
||||
import { MatButtonToggleChange } from '@angular/material/button-toggle';
|
||||
import { Component, OnInit, Input, ViewChild, OnDestroy } from "@angular/core";
|
||||
import { IRecentlyRequested, IRequestEngineResult, RequestType } from "../../../interfaces";
|
||||
import { Carousel } from 'primeng/carousel';
|
||||
import { FeaturesFacade } from "../../../state/features/features.facade";
|
||||
import { ResponsiveOptions } from "../carousel.options";
|
||||
import { RequestServiceV2 } from "app/services/requestV2.service";
|
||||
import { Subject, takeUntil } from "rxjs";
|
||||
import { finalize, map, Observable, Subject, takeUntil, tap } from "rxjs";
|
||||
import { Router } from "@angular/router";
|
||||
import { AuthService } from "app/auth/auth.service";
|
||||
import { NotificationService, RequestService } from "app/services";
|
||||
import { TranslateService } from "@ngx-translate/core";
|
||||
|
||||
export enum DiscoverType {
|
||||
Upcoming,
|
||||
|
@ -30,21 +28,22 @@ export class RecentlyRequestedListComponent implements OnInit, OnDestroy {
|
|||
@Input() public isAdmin: boolean;
|
||||
@ViewChild('carousel', {static: false}) carousel: Carousel;
|
||||
|
||||
|
||||
public requests: IRecentlyRequested[];
|
||||
public requests$: Observable<IRecentlyRequested[]>;
|
||||
|
||||
public responsiveOptions: any;
|
||||
public RequestType = RequestType;
|
||||
public loadingFlag: boolean;
|
||||
public DiscoverType = DiscoverType;
|
||||
public is4kEnabled = false;
|
||||
|
||||
private $loadSub = new Subject<void>();
|
||||
|
||||
constructor(private requestService: RequestServiceV2,
|
||||
private featureFacade: FeaturesFacade,
|
||||
private router: Router) {
|
||||
Carousel.prototype.onTouchMove = () => {},
|
||||
constructor(private requestServiceV2: RequestServiceV2,
|
||||
private requestService: RequestService,
|
||||
private router: Router,
|
||||
private authService: AuthService,
|
||||
private notificationService: NotificationService,
|
||||
private translateService: TranslateService) {
|
||||
Carousel.prototype.onTouchMove = () => {};
|
||||
this.responsiveOptions = ResponsiveOptions;
|
||||
}
|
||||
|
||||
|
@ -54,14 +53,43 @@ export class RecentlyRequestedListComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
|
||||
public ngOnInit() {
|
||||
this.loading();
|
||||
this.loadData();
|
||||
this.isAdmin = this.authService.isAdmin();
|
||||
}
|
||||
|
||||
public navigate(request: IRecentlyRequested) {
|
||||
this.router.navigate([this.generateDetailsLink(request), request.mediaId]);
|
||||
}
|
||||
|
||||
public approve(request: IRecentlyRequested) {
|
||||
switch(request.type) {
|
||||
case RequestType.movie:
|
||||
this.requestService.approveMovie({id: request.requestId, is4K: false}).pipe(
|
||||
map((res) => this.handleApproval(res, request))
|
||||
).subscribe();
|
||||
break;
|
||||
case RequestType.tvShow:
|
||||
this.requestService.approveChild({id: request.requestId}).pipe(
|
||||
tap((res) => this.handleApproval(res, request))
|
||||
).subscribe();
|
||||
break;
|
||||
case RequestType.album:
|
||||
this.requestService.approveAlbum({id: request.requestId}).pipe(
|
||||
tap((res) => this.handleApproval(res, request))
|
||||
).subscribe();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private handleApproval(result: IRequestEngineResult, request: IRecentlyRequested) {
|
||||
if (result.result) {
|
||||
this.notificationService.success(this.translateService.instant("Requests.SuccessfullyApproved"));
|
||||
request.approved = true;
|
||||
} else {
|
||||
this.notificationService.error(result.errorMessage);
|
||||
}
|
||||
}
|
||||
|
||||
private generateDetailsLink(request: IRecentlyRequested): string {
|
||||
switch (request.type) {
|
||||
case RequestType.movie:
|
||||
|
@ -74,13 +102,13 @@ export class RecentlyRequestedListComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
|
||||
private loadData() {
|
||||
this.requestService.getRecentlyRequested().pipe(takeUntil(this.$loadSub)).subscribe(x => {
|
||||
this.requests = x;
|
||||
this.finishLoading();
|
||||
});
|
||||
this.requests$ = this.requestServiceV2.getRecentlyRequested().pipe(
|
||||
tap(() => this.loading()),
|
||||
takeUntil(this.$loadSub),
|
||||
finalize(() => this.finishLoading())
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
private loading() {
|
||||
this.loadingFlag = true;
|
||||
}
|
||||
|
|
|
@ -1,14 +0,0 @@
|
|||
{
|
||||
"OmbiDatabase": {
|
||||
"Type": "MySQL",
|
||||
"ConnectionString": "Server=192.168.68.118;Port=3306;Database=Ombi;User=ombi;"
|
||||
},
|
||||
"SettingsDatabase": {
|
||||
"Type": "MySQL",
|
||||
"ConnectionString": "Server=192.168.68.118;Port=3306;Database=Ombi;User=ombi;"
|
||||
},
|
||||
"ExternalDatabase": {
|
||||
"Type": "MySQL",
|
||||
"ConnectionString": "Server=192.168.68.118;Port=3306;Database=Ombi;User=ombi;"
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue