added to the UI

src/Ombi/ClientApp/package.json

@@ -81,8 +81,6 @@
     "@storybook/addon-links": "^6.5.9",
     "@storybook/angular": "^6.5.9",
     "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/cli": "^6.5.9",
-    "@storybook/jest": "^0.0.10",
     "@storybook/manager-webpack5": "^6.5.9",
     "@storybook/testing-library": "^0.0.13",
     "@storybook/preset-scss": "^1.0.3",

src/Ombi/ClientApp/src/app/components/detailed-card/detailed-card.component.html

@@ -48,7 +48,7 @@
 
 <div class="detailed-container">
     <div class="row">
-        <div class="col-5">
+        <div class="col-5 posterColumn">
             <ombi-image [src]="request.posterPath" [type]="request.requestType" class="poster" alt="{{request.title}}">
             </ombi-image>
         </div>
@@ -57,21 +57,16 @@
                 <div class="col-12 title">
                     <h3>{{request.title}}</h3>
                 </div>
-                <div class="col-12 overview">
+                <div class="col-12">
-                    <p>{{request.overview}}</p>
+                    <p>Requested By: {{request.username}}</p>
                 </div>
                 <div class="col-12">
-                    <span>Requested By: {{request.userName}}</span>
+                    <p>On: {{request.requestDate | amFromUtc | amLocal | amUserLocale | amDateFormat: 'l LT'}}</p>
                 </div>
                 <div class="col-12">
-                    <span>On: {{request.requestDate | amFromUtc | amLocal | amUserLocale | amDateFormat: 'l LT'}}</span>
+                    <p>Status: <span class="badge badge-{{getClass(request)}}">{{getStatus(request) | translate}}</span></p>
                 </div>
             </div>
         </div>
     </div>
-    <div class="row">
-        <div class="col-4">
-            <button>Request</button>
-        </div>
-    </div>
 </div>

src/Ombi/ClientApp/src/app/components/detailed-card/detailed-card.component.scss

@@ -1,7 +1,30 @@
+@import "~styles/variables.scss";
+
 .detailed-container {
     width: 400px;
+    height: auto;
+    margin: 10px;
+    padding: 10px;
+    border-radius: 10px;
+    border: 1px solid $ombi-background-primary-accent;
 
+    background-color: $ombi-background-accent;
 
+    .top-spacing {
+        margin-top: 20px;
+    }
+
+    .overview {
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .posterColumn {
+        width: 100%
+    }
 
 
     ::ng-deep .poster {

src/Ombi/ClientApp/src/app/components/detailed-card/detailed-card.component.ts

@@ -1,16 +1,11 @@
-import { OmbiCommonModules } from "../modules";
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from "@angular/core";
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation } from "@angular/core";
 import { IRecentlyRequested, RequestType } from "../../interfaces";
-import { ImageComponent } from "../image/image.component";
 import { ImageService } from "app/services";
 import { Subject, takeUntil } from "rxjs";
-import { PipeModule } from "app/pipes/pipe.module";
 
 @Component({
-    standalone: true,
+    standalone: false,
     selector: 'ombi-detailed-card',
-    imports: [...OmbiCommonModules, ImageComponent, PipeModule],
-    providers: [ImageService],
     changeDetection: ChangeDetectionStrategy.OnPush,
     templateUrl: './detailed-card.component.html',
     styleUrls: ['./detailed-card.component.scss']
@@ -34,11 +29,31 @@ import { PipeModule } from "app/pipes/pipe.module";
         }
       }
 
-
       public submitRequest(is4k: boolean) {
         this.onRequest.emit(is4k);
       }
 
+      public getStatus(request: IRecentlyRequested) {
+        if (request.available) {
+          return "Common.Available";
+        }
+        if (request.approved) {
+          return "Common.Approved";
+        } else {
+          return "Common.Pending";
+        }
+      }
+
+      public getClass(request: IRecentlyRequested) {
+        if (request.available) {
+          return "success";
+        }
+        if (request.approved) {
+          return "primary";
+        } else {
+          return "info";
+        }
+      }
 
       public ngOnDestroy() {
         this.$imageSub.next();

src/Ombi/ClientApp/src/app/components/modules.ts

@@ -1,5 +1,4 @@
 import { CommonModule } from "@angular/common";
-import { HttpClientModule } from "@angular/common/http";
 import { MomentModule } from "ngx-moment";
 
-export const OmbiCommonModules = [ CommonModule, HttpClientModule, MomentModule ];
+export const OmbiCommonModules = [ CommonModule, MomentModule ];

src/Ombi/ClientApp/src/app/discover/components/index.ts

@@ -11,6 +11,7 @@ import { RecentlyRequestedListComponent } from "./recently-requested-list/recent
 import { MatDialog } from "@angular/material/dialog";
 import { RequestServiceV2 } from "../../services/requestV2.service";
 import { Routes } from "@angular/router";
+import { DetailedCardComponent } from "app/components";
 
 export const components: any[] = [
     DiscoverComponent,
@@ -20,6 +21,7 @@ export const components: any[] = [
     DiscoverSearchResultsComponent,
     CarouselListComponent,
     RecentlyRequestedListComponent,
+    DetailedCardComponent,
 ];
 
 export const providers: any[] = [

src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.html

@@ -1,5 +1,5 @@
-<p-carousel #carousel [numVisible]="7" [numScroll]="0" [page]="0" [value]="requests" [responsiveOptions]="responsiveOptions">
+<p-carousel #carousel [numVisible]="4" [numScroll]="7" [page]="0" [value]="requests" [responsiveOptions]="responsiveOptions">
     <ng-template let-result pTemplate="item">
-        {{result.title}}
+        <ombi-detailed-card [request]="result"></ombi-detailed-card>
     </ng-template>
 </p-carousel>

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

@@ -8,7 +8,7 @@ import { PipeModule } from "../pipes/pipe.module";
 import { RouterModule } from "@angular/router";
 import { SharedModule } from "../shared/shared.module";
 import { SkeletonModule } from 'primeng/skeleton';
-import { DetailedCardComponent, ImageComponent } from 'app/components';
+import { ImageComponent } from 'app/components';
 
 @NgModule({
     imports: [
@@ -20,7 +20,6 @@ import { DetailedCardComponent, ImageComponent } from 'app/components';
         InfiniteScrollModule,
         SkeletonModule,
         ImageComponent,
-        DetailedCardComponent,
     ],
     declarations: [
         ...fromComponents.components

src/Ombi/ClientApp/src/app/interfaces/IRecentlyRequested.ts

@@ -4,7 +4,7 @@ export interface IRecentlyRequested {
     requestId: number;
     requestType: RequestType;
     userId: string;
-    userName: string;
+    username: string;
     available: boolean;
     tvPartiallyAvailable: boolean;
     requestDate: Date;