Merge pull request #15 from oidacra/add-details-to-card

feat(series): add score and status to card

.prettierrc

@@ -7,5 +7,6 @@
   "arrowParens": "always",
   "trailingComma": "es5",
   "bracketSameLine": true,
-  "printWidth": 80
+  "printWidth": 80,
+  "htmlWhitespaceSensitivity": "ignore"
 }

src/app/series/search/components/results/results.component.html

@@ -1,4 +1,4 @@
-@if (state() === 'loaded'){
+@if (state() === 'loaded') {
 <span nz-typography nzType="secondary">{{ series().length }} items found</span>
 
 <div class="series-card__wrapper">
@@ -10,7 +10,7 @@
 
   <!-- Cover template for the card -->
   <ng-template #coverTemplate>
-    @if (item.show.image){
+    @if (item.show.image) {
     <img
       data-testId="poster-image"
       loading="lazy"
@@ -21,22 +21,37 @@
     } @else {
     <span
       data-testId="poster-image-not-found"
-      class="series-card__poster-not-found"
-      >No Poster Found</span
-    >
+      class="series-card__poster-not-found">
+      No Poster Found
+    </span>
+
     }
   </ng-template>
 
   <!-- Title template for the card -->
   <ng-template #cardTitle>
+    <div class="series-card__header-hints">
+      @if (item.show.rating.average) {
+      <span>
+        <span nz-icon nzType="star" nzTheme="fill"></span>
+        {{ item.show.rating.average }}
+      </span>
+      }@else{
+      <span nz-icon nzType="star" nzTheme="outline"></span>
+      } @if (item.show.status) {
+      <nz-tag [nzColor]="colorStatusSeriesMap[item.show.status]">
+        {{ item.show.status }}
+      </nz-tag>
+      }
+    </div>
     <span data-testId="poster-title">{{ item.show.name }}</span>
   </ng-template>
 
   } @empty {
   <nz-empty nzNotFoundContent="No TV Series found"></nz-empty>
   }
 </div>
-}@else {
+} @else {
 <nz-empty
   nzNotFoundContent="Use the search for find you favorite TV Show"></nz-empty>
 }

src/app/series/search/components/results/results.component.scss

@@ -19,6 +19,11 @@
     gap: 2rem;
   }
 
+  .series-card__header-hints {
+    display: flex;
+    justify-content: space-between;
+  }
+
   ::ng-deep {
     [nz-card] {
       width: 210px;
@@ -28,5 +33,13 @@
     [nz-typography] {
       text-align: right;
     }
+
+    .ant-tag {
+      margin: 0;
+    }
+
+    .anticon-star {
+      color: #f5c518;
+    }
   }
 }

src/app/series/search/components/results/results.component.ts

@@ -9,9 +9,12 @@ import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { NzEmptyComponent } from 'ng-zorro-antd/empty';
 import { NzCardComponent, NzCardMetaComponent } from 'ng-zorro-antd/card';
 import { NzPaginationComponent } from 'ng-zorro-antd/pagination';
-import { ComponentState, Serie } from '../../../../shared/models';
+import { ComponentState, Serie, SeriesStatus } from '../../../../shared/models';
 import { NzTypographyComponent } from 'ng-zorro-antd/typography';
 
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzTagComponent } from 'ng-zorro-antd/tag';
+
 @Component({
   selector: 'app-results',
   standalone: true,
@@ -23,6 +26,8 @@ import { NzTypographyComponent } from 'ng-zorro-antd/typography';
     NzPaginationComponent,
     NgOptimizedImage,
     NzTypographyComponent,
+    NzIconModule,
+    NzTagComponent,
   ],
   templateUrl: './results.component.html',
   styleUrl: './results.component.scss',
@@ -33,4 +38,10 @@ export class ResultsComponent {
   state = input<ComponentState>('idle');
   isLoading = computed(() => this.state() === 'loading');
   selected = output<Serie>();
+
+  readonly colorStatusSeriesMap: Record<SeriesStatus, string> = {
+    Running: 'green',
+    Ended: 'red',
+    ToBeAnnounced: 'blue',
+  };
 }

src/app/series/tests/series.mocks.ts

@@ -6,6 +6,8 @@ export const SeriesMock: Serie[] = [
     show: {
       id: 169,
       name: 'Breaking Bad',
+      rating: { average: 9.3 },
+      status: 'Ended',
       image: {
         medium:
           'https://static.tvmaze.com/uploads/images/medium_portrait/501/1253519.jpg',

src/app/shared/models.ts

@@ -5,11 +5,14 @@ export interface Serie {
   score: number;
   show: SerieDetail;
 }
+
 interface SerieDetail {
   id: number;
   name: string;
   summary: string;
   image: { medium: string; original: string };
+  rating: { average: number };
+  status: SeriesStatus;
 }
 
 // Store state related
@@ -24,3 +27,5 @@ export interface ViewModelComponent {
   series: Serie[];
   state: ComponentState;
 }
+
+export type SeriesStatus = 'Running' | 'Ended' | 'ToBeAnnounced';

src/styles.scss

@@ -1,4 +1,3 @@
-//@import "~ng-zorro-antd/ng-zorro-antd.css";
 .inner-content {
   background: #fff;
   padding: 24px;