Skip to content

Commit

Permalink
Merge pull request #15 from oidacra/add-details-to-card
Browse files Browse the repository at this point in the history
feat(series): add score and status to card
  • Loading branch information
oidacra authored Apr 7, 2024
2 parents 52b0585 + 80b4a7a commit 2ce628f
Show file tree
Hide file tree
Showing 7 changed files with 55 additions and 9 deletions.
3 changes: 2 additions & 1 deletion .prettierrc
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,6 @@
"arrowParens": "always",
"trailingComma": "es5",
"bracketSameLine": true,
"printWidth": 80
"printWidth": 80,
"htmlWhitespaceSensitivity": "ignore"
}
27 changes: 21 additions & 6 deletions src/app/series/search/components/results/results.component.html
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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"
Expand All @@ -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>
}
13 changes: 13 additions & 0 deletions src/app/series/search/components/results/results.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@
gap: 2rem;
}

.series-card__header-hints {
display: flex;
justify-content: space-between;
}

::ng-deep {
[nz-card] {
width: 210px;
Expand All @@ -28,5 +33,13 @@
[nz-typography] {
text-align: right;
}

.ant-tag {
margin: 0;
}

.anticon-star {
color: #f5c518;
}
}
}
13 changes: 12 additions & 1 deletion src/app/series/search/components/results/results.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -23,6 +26,8 @@ import { NzTypographyComponent } from 'ng-zorro-antd/typography';
NzPaginationComponent,
NgOptimizedImage,
NzTypographyComponent,
NzIconModule,
NzTagComponent,
],
templateUrl: './results.component.html',
styleUrl: './results.component.scss',
Expand All @@ -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',
};
}
2 changes: 2 additions & 0 deletions src/app/series/tests/series.mocks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
5 changes: 5 additions & 0 deletions src/app/shared/models.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -24,3 +27,5 @@ export interface ViewModelComponent {
series: Serie[];
state: ComponentState;
}

export type SeriesStatus = 'Running' | 'Ended' | 'ToBeAnnounced';
1 change: 0 additions & 1 deletion src/styles.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
//@import "~ng-zorro-antd/ng-zorro-antd.css";
.inner-content {
background: #fff;
padding: 24px;
Expand Down

0 comments on commit 2ce628f

Please sign in to comment.