diff --git a/.prettierrc b/.prettierrc
index 9472f59..c55b361 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -7,5 +7,6 @@
"arrowParens": "always",
"trailingComma": "es5",
"bracketSameLine": true,
- "printWidth": 80
+ "printWidth": 80,
+ "htmlWhitespaceSensitivity": "ignore"
}
diff --git a/src/app/series/search/components/results/results.component.html b/src/app/series/search/components/results/results.component.html
index 6cc22cb..f0839a0 100644
--- a/src/app/series/search/components/results/results.component.html
+++ b/src/app/series/search/components/results/results.component.html
@@ -1,4 +1,4 @@
-@if (state() === 'loaded'){
+@if (state() === 'loaded') {
{{ series().length }} items found
@@ -10,7 +10,7 @@
- @if (item.show.image){
+ @if (item.show.image) {
No Poster Found
+ class="series-card__poster-not-found">
+ No Poster Found
+
+
}
+
{{ item.show.name }}
@@ -36,7 +51,7 @@
}
-}@else {
+} @else {
}
diff --git a/src/app/series/search/components/results/results.component.scss b/src/app/series/search/components/results/results.component.scss
index 3bd4324..485aa12 100644
--- a/src/app/series/search/components/results/results.component.scss
+++ b/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;
+ }
}
}
diff --git a/src/app/series/search/components/results/results.component.ts b/src/app/series/search/components/results/results.component.ts
index ead0bff..4807387 100644
--- a/src/app/series/search/components/results/results.component.ts
+++ b/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('idle');
isLoading = computed(() => this.state() === 'loading');
selected = output();
+
+ readonly colorStatusSeriesMap: Record = {
+ Running: 'green',
+ Ended: 'red',
+ ToBeAnnounced: 'blue',
+ };
}
diff --git a/src/app/series/tests/series.mocks.ts b/src/app/series/tests/series.mocks.ts
index 32ae106..255819f 100644
--- a/src/app/series/tests/series.mocks.ts
+++ b/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',
diff --git a/src/app/shared/models.ts b/src/app/shared/models.ts
index 5059ac4..b6aaa7a 100644
--- a/src/app/shared/models.ts
+++ b/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';
diff --git a/src/styles.scss b/src/styles.scss
index dac0007..2fdb14e 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,4 +1,3 @@
-//@import "~ng-zorro-antd/ng-zorro-antd.css";
.inner-content {
background: #fff;
padding: 24px;