From cdfe91e3a477f6c9043d0176f443d313091de038 Mon Sep 17 00:00:00 2001 From: Jamie Rees Date: Fri, 15 May 2020 22:39:47 +0100 Subject: [PATCH] More on the issues, we can now work through the issues flow --- .../artist/artist-details.component.html | 123 +++++----- .../src/app/media-details/components/index.ts | 5 +- .../movie/movie-details.component.html | 12 +- .../issues-panel/issues-panel.component.html | 63 ++++++ .../issues-panel/issues-panel.component.scss | 7 + .../issues-panel/issues-panel.component.ts | 63 ++++++ .../shared/new-issue/new-issue.component.html | 38 ++-- .../shared/new-issue/new-issue.component.ts | 1 - .../components/tv/tv-details.component.html | 137 ++++++------ .../components/tv/tv-details.component.ts | 10 +- .../media-details.component.scss | 210 +++++++++--------- .../src/app/services/issues.service.ts | 8 + src/Ombi/Controllers/V1/IssuesController.cs | 8 + src/Ombi/wwwroot/translations/en.json | 9 +- 14 files changed, 434 insertions(+), 260 deletions(-) create mode 100644 src/Ombi/ClientApp/src/app/media-details/components/shared/issues-panel/issues-panel.component.html create mode 100644 src/Ombi/ClientApp/src/app/media-details/components/shared/issues-panel/issues-panel.component.scss create mode 100644 src/Ombi/ClientApp/src/app/media-details/components/shared/issues-panel/issues-panel.component.ts diff --git a/src/Ombi/ClientApp/src/app/media-details/components/artist/artist-details.component.html b/src/Ombi/ClientApp/src/app/media-details/components/artist/artist-details.component.html index d086edfdd..46c5b97c9 100644 --- a/src/Ombi/ClientApp/src/app/media-details/components/artist/artist-details.component.html +++ b/src/Ombi/ClientApp/src/app/media-details/components/artist/artist-details.component.html @@ -1,44 +1,40 @@
- + -
-
+
+
-
+
- + - -
+ +
- + -
+
-
+
- - - - - - - - @@ -81,41 +77,50 @@ -
-
+
+
-
+
-
- - - - - - +
+ + + + + -
-
-
-
- - - {{artist.overview}} - - -
-
+
-
-
- -
-
+
+
+
+ + + {{artist.overview}} + + +
+
-
- +
@@ -109,7 +109,11 @@
- +
+ +
+ + @@ -117,7 +121,7 @@ -
+
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/issues-panel/issues-panel.component.html b/src/Ombi/ClientApp/src/app/media-details/components/shared/issues-panel/issues-panel.component.html new file mode 100644 index 000000000..e7d54765d --- /dev/null +++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/issues-panel/issues-panel.component.html @@ -0,0 +1,63 @@ + + + + + {{'Issues.Title' | translate}} + + + {{issuesCount}} error_outline + {{issuesCount}} + + + + + + + + + + {{ 'Issues.Subject' | translate}}: {{issue.subject}} + + + {{ 'Issues.ReportedBy' | translate}}: {{issue.userReported.userAlias}} + + + {{'Issues.Category' | translate}}: {{issue.issueCategory.value}} + + + +
+ +
+ {{'Issues.Description' | translate}}: {{issue.description}} +
+
+ {{'Issues.Status' | translate}}: {{IssueStatus[issue.status] | humanize}} +
+
+ {{'Issues.ResolvedDate' | translate}}: {{issue.resolvedDate}} +
+
+ {{'Issues.CreatedDate' | translate}}: {{issue.createdDate}} +
+ + +
+
+
+ +
+
+ +
+
+ +
+
+ + + + + + + \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/issues-panel/issues-panel.component.scss b/src/Ombi/ClientApp/src/app/media-details/components/shared/issues-panel/issues-panel.component.scss new file mode 100644 index 000000000..4bcaff470 --- /dev/null +++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/issues-panel/issues-panel.component.scss @@ -0,0 +1,7 @@ +.action-buttons { + padding-top: 1%; +} + +.button-padding { + padding: 1%; +} \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/issues-panel/issues-panel.component.ts b/src/Ombi/ClientApp/src/app/media-details/components/shared/issues-panel/issues-panel.component.ts new file mode 100644 index 000000000..2245a07bc --- /dev/null +++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/issues-panel/issues-panel.component.ts @@ -0,0 +1,63 @@ +import { Component, Input, OnInit } from "@angular/core"; +import { IssuesService, NotificationService, SettingsService } from "../../../../services"; +import { RequestType, IIssues, IssueStatus, IIssueSettings } from "../../../../interfaces"; +import { TranslateService } from "@ngx-translate/core"; + +@Component({ + selector: "issues-panel", + templateUrl: "./issues-panel.component.html", + styleUrls: ["./issues-panel.component.scss"] +}) +export class IssuesPanelComponent implements OnInit { + + @Input() public requestId: number; + @Input() public isAdmin: boolean; + + public issuesCount: number; + public issues: IIssues[]; + public IssueStatus = IssueStatus; + public isOutstanding: boolean; + public loadingFlag: boolean; + public settings: IIssueSettings; + + constructor(private issuesService: IssuesService, private notificationService: NotificationService, + private translateService: TranslateService, private settingsService: SettingsService) { + + } + + public async ngOnInit() { + this.issues = await this.issuesService.getIssuesByRequestId(this.requestId); + this.issuesCount = this.issues.length; + this.calculateOutstanding(); + this.settings = await this.settingsService.getIssueSettings().toPromise(); + } + + public resolve(issue: IIssues) { + this.issuesService.updateStatus({issueId: issue.id, status: IssueStatus.Resolved}).subscribe(x => { + this.notificationService.success(this.translateService.instant("Issues.MarkedAsResolved")); + issue.status = IssueStatus.Resolved; + this.calculateOutstanding(); + }); + } + + public inProgress(issue: IIssues) { + this.issuesService.updateStatus({issueId: issue.id, status: IssueStatus.InProgress}).subscribe(x => { + this.notificationService.success(this.translateService.instant("Issues.MarkedAsInProgress")); + issue.status = IssueStatus.InProgress; + }); + } + + public async delete(issue: IIssues) { + await this.issuesService.deleteIssue(issue.id); + this.notificationService.success(this.translateService.instant("Issues.DeletedIssue")); + this.issues = this.issues.filter((el) => { return el.id !== issue.id; }); + this.issuesCount = this.issues.length; + this.calculateOutstanding(); + } + + private calculateOutstanding() { + this.isOutstanding = this.issues.some((i) => { + return i.status !== IssueStatus.Resolved; + }); + } +} diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/new-issue/new-issue.component.html b/src/Ombi/ClientApp/src/app/media-details/components/shared/new-issue/new-issue.component.html index 0bbcbe8c0..e3f8220d6 100644 --- a/src/Ombi/ClientApp/src/app/media-details/components/shared/new-issue/new-issue.component.html +++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/new-issue/new-issue.component.html @@ -1,29 +1,27 @@

{{ 'Issues.IssueDialog.Title' | translate}}

-
- - {{'Issues.IssueDialog.SelectCategory' | translate}} - - - {{cat.value}} - - - +
+ + {{'Issues.IssueDialog.SelectCategory' | translate}} + + + {{cat.value}} + + + - - - + + + - - - -
+ + + +
- - + +
\ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/new-issue/new-issue.component.ts b/src/Ombi/ClientApp/src/app/media-details/components/shared/new-issue/new-issue.component.ts index 3baf1fd57..223d1a4a3 100644 --- a/src/Ombi/ClientApp/src/app/media-details/components/shared/new-issue/new-issue.component.ts +++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/new-issue/new-issue.component.ts @@ -41,7 +41,6 @@ export class NewIssueComponent implements OnInit { this.issueCategories = await this.issueService.getCategories().toPromise(); } - public async createIssue() { const result = await this.issueService.createIssue(this.issue).toPromise(); if(result) { diff --git a/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html b/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html index eb37fa3d5..8bacf6f4e 100644 --- a/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html +++ b/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html @@ -1,105 +1,110 @@
- + -
-
-
+
+
+
- + - -
+ +
- - + + -
+
-
+
- - - -
-
-
-
+ - - - - - - -
- - -
-
-
- - - {{tv.overview}} - - +
-
- + +
+
+ + + + + + + +
+ + +
+
+
+ + + {{tv.overview}} + + +
+
+ +
+ +
+
-
-
-
+
+
-
-
+ - -
+
-
- - - - - Requests - - - - +
+
+ +
+ + + + + Requests + + + + - + -
+
-
+
-
+
-
-
-
+
+
+
\ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.ts b/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.ts index 438df619f..f48ee36e6 100644 --- a/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.ts +++ b/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.ts @@ -6,8 +6,9 @@ import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2"; import { MatDialog } from "@angular/material"; import { YoutubeTrailerComponent } from "../shared/youtube-trailer.component"; import { EpisodeRequestComponent } from "../../../shared/episode-request/episode-request.component"; -import { IChildRequests } from "../../../interfaces"; +import { IChildRequests, RequestType } from "../../../interfaces"; import { AuthService } from "../../../auth/auth.service"; +import { NewIssueComponent } from "../shared/new-issue/new-issue.component"; @Component({ templateUrl: "./tv-details.component.html", @@ -58,6 +59,13 @@ export class TvDetailsComponent implements OnInit { public async request() { this.dialog.open(EpisodeRequestComponent, { width: "800px", data: this.tv, panelClass: 'modal-panel' }) } + + public async issue() { + const dialogRef = this.dialog.open(NewIssueComponent, { + width: '500px', + data: {requestId: this.tvRequest ? this.tv.requestId : null, requestType: RequestType.tvShow, imdbid: this.tv.theTvDbId, title: this.tv.title} + }); + } public openDialog() { debugger; diff --git a/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss b/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss index 0fa9f9351..cd27990ae 100644 --- a/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss +++ b/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss @@ -1,30 +1,26 @@ @import "~@angular/material/theming"; @import "~styles/variables.scss"; - //MINE @media (max-width: 570px) { - h1 { - font-size: 1.5rem; - } - - .mobile-poster { - display: block; - position: absolute; - width: 70px; - left: 12px; - bottom: 2px; - } - - - #info-wrapper .sidebar-poster { - margin-top: -126px !important; - } + h1 { + font-size: 1.5rem; + } + .mobile-poster { + display: block; + position: absolute; + width: 70px; + left: 12px; + bottom: 2px; + } + #info-wrapper .sidebar-poster { + margin-top: -126px !important; + } } @media (max-width: 767px) { - #summary-wrapper { - height: 350px !important; - } + #summary-wrapper { + height: 350px !important; + } } #summary-wrapper .full-screenshot, @@ -32,190 +28,190 @@ #watching-wrapper .full-screenshot, .hero-wrapper .full-screenshot, #statics-top-wrapper .full-screenshot { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-size: cover; - background-position: center; - background-position: 50% 10%; - opacity: 0; - transition: all 1s; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-size: cover; + background-position: center; + background-position: 50% 10%; + opacity: 0; + transition: all 1s; } #summary-wrapper, .summary-wrapper { - background-color: #000; - background-size: cover; - background-position: 50% 10%; - transition: all .5s; - height: 450px; - color: #fff; - position: relative; + background-color: #000; + background-size: cover; + background-position: 50% 10%; + transition: all .5s; + height: 450px; + color: #fff; + position: relative; } - #summary-wrapper .full-screenshot.enabled, .summary-wrapper .full-screenshot.enabled, #watching-wrapper .full-screenshot.enabled, .hero-wrapper .full-screenshot.enabled, #statics-top-wrapper .full-screenshot.enabled { - opacity: 1; + opacity: 1; } #summary-wrapper .shadow-base, .summary-wrapper .shadow-base { - bottom: 0; - background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%); - background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%); - background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 100%); - background-repeat: repeat-x; + bottom: 0; + background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%); + background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%); + background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 100%); + background-repeat: repeat-x; } .shadow-base { - height: 75px; - width: 100%; - position: absolute; - bottom: 0; - left: 0; - background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%); - background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%); - background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#4D000000', GradientType=0); + height: 75px; + width: 100%; + position: absolute; + bottom: 0; + left: 0; + background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%); + background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%); + background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%); + background-repeat: repeat-x; + // filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#4D000000', GradientType=0); } .available-bottom-border { - border-bottom: solid 8px #1DE9B6; + border-bottom: solid 8px #1DE9B6; } #summary-wrapper .summary .container, .summary-wrapper .summary .container { - position: absolute; - bottom: 0; - left: 0; - right: 0; + position: absolute; + bottom: 0; + left: 0; + right: 0; } #summary-wrapper, .summary-wrapper { - background-color: #000; - background-size: cover; - background-position: 50% 10%; - transition: all .5s; - height: 550px; - color: #fff; - position: relative; + background-color: #000; + background-size: cover; + background-position: 50% 10%; + transition: all .5s; + height: 550px; + color: #fff; + position: relative; } - .grey-text { - color: #999; + color: #999; } - - #summary-wrapper .summary .container h1, .summary-wrapper .summary .container h1 { - margin: 0; - text-shadow: 1px 1px 5px #000; - line-height: 1.2; + margin: 0; + text-shadow: 1px 1px 5px #000; + line-height: 1.2; } #info-wrapper { - min-height: 600px; + min-height: 600px; } - #info-wrapper .sidebar.affixable.affix-top { - position: relative !important; + position: relative !important; } #info-wrapper .sidebar-poster { - margin-top: -280px; - width: 250px; + margin-top: -280px; + width: 250px; } #info-wrapper .sidebar .poster { - border: solid 3px #fff; - position: relative; - -webkit-box-shadow: 0 0 20px 0 #666; - box-shadow: 0 0 20px 0 #666; + border: solid 3px #fff; + position: relative; + -webkit-box-shadow: 0 0 20px 0 #666; + box-shadow: 0 0 20px 0 #666; } #info-wrapper .sidebar .poster img { - width: 100%; + width: 100%; } .full-width { - width: 100%; + width: 100%; } #info-wrapper .sidebar .poster .real { - height: 100%; - top: 0; - left: 0; + height: 100%; + top: 0; + left: 0; } .card-spacer { - padding-top: 1%; + padding-top: 1%; } .card-full { - height: 100%; + height: 100%; } .imdb-color { - color: black; - background-color: #f5de50; + color: black; + background-color: #f5de50; } .btn-spacing { - margin-right: 10px !important; + margin-right: 10px !important; } .spacing-below { - margin-bottom: 15px !important; + margin-bottom: 15px !important; } .left-seperator { - margin-left: 40px; + margin-left: 40px; } .tagline { - margin-top: 10px; - margin-left: 10px; - text-shadow: 1px 1px 5px #000; + margin-top: 10px; + margin-left: 10px; + text-shadow: 1px 1px 5px #000; } .preview-poster { - width: 173px; + width: 173px; } .media-icons { - color: mat-color($ombi-app-primary) !important; - padding: 1%; + color: mat-color($ombi-app-primary) !important; + padding: 1%; } .media-row { - padding-top: 2%; + padding-top: 2%; } .cast-profile-img { - border-radius: 10%; - width: 170px; + border-radius: 10%; + width: 170px; } .small-middle-container { - margin: auto; - width: 95%; + margin: auto; + width: 95%; } .keywords-panel { - margin-top: 8%; + margin-top: 8%; } .medium-font { - font-size: 16px; + font-size: 16px; } + +.issuesPanel { + padding-top: 1%; + padding-bottom: 1%; +} \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/services/issues.service.ts b/src/Ombi/ClientApp/src/app/services/issues.service.ts index 4500fb90c..db9a749ff 100644 --- a/src/Ombi/ClientApp/src/app/services/issues.service.ts +++ b/src/Ombi/ClientApp/src/app/services/issues.service.ts @@ -29,6 +29,10 @@ export class IssuesService extends ServiceHelpers { return this.http.get(this.url, {headers: this.headers}); } + public getIssuesByRequestId(requestId: number): Promise { + return this.http.get(`${this.url}request/${requestId}`, {headers: this.headers}).toPromise(); + } + public getIssuesPage(take: number, skip: number, status: IssueStatus): Observable { return this.http.get(`${this.url}${take}/${skip}/${status}`, {headers: this.headers}); } @@ -60,4 +64,8 @@ export class IssuesService extends ServiceHelpers { public deleteComment(id: number): Observable { return this.http.delete(`${this.url}comments/${id}`, { headers: this.headers }); } + + public deleteIssue(id: number): Promise { + return this.http.delete(`${this.url}${id}`, { headers: this.headers }).toPromise(); + } } diff --git a/src/Ombi/Controllers/V1/IssuesController.cs b/src/Ombi/Controllers/V1/IssuesController.cs index 7f3c901d8..e15e23d4d 100644 --- a/src/Ombi/Controllers/V1/IssuesController.cs +++ b/src/Ombi/Controllers/V1/IssuesController.cs @@ -168,6 +168,14 @@ namespace Ombi.Controllers.V1 .Include(x => x.UserReported) .FirstOrDefaultAsync(); } + + [HttpGet("request/{id}")] + public async Task GetIssueByRequestId([FromRoute] int id) + { + return new OkObjectResult(await _issues.GetAll().Where(x => x.RequestId == id) + .Include(x => x.IssueCategory) + .Include(x => x.UserReported).ToListAsync()); + } /// /// Get's all the issue comments by id diff --git a/src/Ombi/wwwroot/translations/en.json b/src/Ombi/wwwroot/translations/en.json index ac70e7c6f..00961492f 100644 --- a/src/Ombi/wwwroot/translations/en.json +++ b/src/Ombi/wwwroot/translations/en.json @@ -188,7 +188,14 @@ "TitlePlaceholder": "Short title of your issue", "SelectCategory": "Select Category", "IssueCreated": "Issue has been created" - } + }, + "Outstanding": "There are outstanding issues", + "ResolvedDate": "Resolved date", + "CreatedDate": "Raised on", + "MarkedAsResolved": "This issue has now been marked as resolved!", + "MarkedAsInProgress": "This issue has now been marked as in progress!", + "Delete": "Delete issue", + "DeletedIssue": "Issue has been deleted" }, "Filter": { "ClearFilter": "Clear Filter",