Merge pull request #7 from oidacra/add-basic-layout

Layout base

package.json

@@ -19,6 +19,7 @@
     "@angular/router": "17.1.0",
     "@ngrx/component-store": "^17.0.1",
     "@nx/angular": "17.2.8",
+    "ng-zorro-antd": "^17.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "0.14.2"
@@ -34,6 +35,7 @@
     "@angular/compiler-cli": "17.1.0",
     "@angular/language-service": "17.1.0",
     "@nx/devkit": "17.2.8",
+    "@nx/eslint": "17.2.8",
     "@nx/eslint-plugin": "17.2.8",
     "@nx/jest": "17.2.8",
     "@nx/js": "17.2.8",
@@ -56,8 +58,6 @@
     "prettier": "^2.6.2",
     "ts-jest": "^29.1.0",
     "ts-node": "10.9.1",
-    "typescript": "5.2.2",
-    "@nx/eslint": "17.2.8"
+    "typescript": "5.2.2"
   }
 }
-

project.json

@@ -15,8 +15,16 @@
         "main": "./src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "./tsconfig.app.json",
-        "assets": ["./src/favicon.ico", "./src/assets"],
-        "styles": ["./src/styles.scss"],
+        "assets": [
+          "./src/favicon.ico",
+          "./src/assets",
+          {
+            "glob": "**/*",
+            "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
+            "output": "/assets/"
+          }
+        ],
+        "styles": ["src/theme.less", "./src/styles.scss"],
         "scripts": []
       },
       "configurations": {
@@ -25,7 +33,7 @@
             {
               "type": "initial",
               "maximumWarning": "500kb",
-              "maximumError": "1mb"
+              "maximumError": "2mb"
             },
             {
               "type": "anyComponentStyle",

src/app/app.component.html

@@ -1 +1,16 @@
-<router-outlet></router-outlet>
+<nz-layout class="layout">
+  <nz-header>
+    <div class="logo"></div>
+    <ul nz-menu nzMode="horizontal" nzTheme="dark">
+      <li nz-menu-item>nav 1</li>
+      <li nz-menu-item>nav 2</li>
+      <li nz-menu-item>nav 3</li>
+    </ul>
+  </nz-header>
+  <nz-content>
+    <div class="inner-content">
+      <router-outlet></router-outlet>
+    </div>
+  </nz-content>
+  <nz-footer>Series Demo ©2024 Arcadio Quintero</nz-footer>
+</nz-layout>

src/app/app.component.scss

@@ -0,0 +1,40 @@
+.layout {
+  min-height: 100vh;
+}
+
+.logo {
+  width: 120px;
+  height: 31px;
+  background: rgba(255, 255, 255, 0.2);
+  margin: 16px 24px 16px 0;
+  float: left;
+}
+
+nz-header {
+  position: fixed;
+  width: 100%;
+  z-index: 1;
+}
+
+[nz-menu] {
+  line-height: 64px;
+}
+
+nz-content {
+  padding: 0 50px;
+  margin-top: 64px;
+}
+
+nz-breadcrumb {
+  margin: 16px 0;
+}
+
+.inner-content {
+  background: #fff;
+  padding: 24px;
+  min-height: 380px;
+}
+
+nz-footer {
+  text-align: center;
+}

src/app/app.component.ts

@@ -1,9 +1,26 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import {
+  NzContentComponent,
+  NzFooterComponent,
+  NzHeaderComponent,
+  NzLayoutComponent,
+} from 'ng-zorro-antd/layout';
+import { NzBreadCrumbComponent } from 'ng-zorro-antd/breadcrumb';
+import { NzMenuDirective, NzMenuItemComponent } from 'ng-zorro-antd/menu';
 
 @Component({
   standalone: true,
-  imports: [RouterModule],
+  imports: [
+    RouterModule,
+    NzContentComponent,
+    NzBreadCrumbComponent,
+    NzFooterComponent,
+    NzHeaderComponent,
+    NzLayoutComponent,
+    NzMenuDirective,
+    NzMenuItemComponent,
+  ],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],

src/app/app.config.ts

@@ -5,10 +5,21 @@ import {
 } from '@angular/router';
 import { appRoutes } from './app.routes';
 import { HttpClientModule } from '@angular/common/http';
+import { en_US, provideNzI18n } from 'ng-zorro-antd/i18n';
+import { registerLocaleData } from '@angular/common';
+import en from '@angular/common/locales/en';
+import { FormsModule } from '@angular/forms';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+registerLocaleData(en);
 
 export const appConfig: ApplicationConfig = {
   providers: [
     importProvidersFrom(HttpClientModule),
     provideRouter(appRoutes, withEnabledBlockingInitialNavigation()),
+    provideNzI18n(en_US),
+    importProvidersFrom(FormsModule),
+    importProvidersFrom(HttpClientModule),
+    provideAnimations(),
   ],
 };

src/app/series/series.component.html

@@ -1,12 +1,28 @@
 <h1>Series</h1>
-@if (vm().isLoading){
+@if (vm().isLoading) {
 <p>Loading...</p>
-} @else{
-<ul>
-  @for (item of vm().series; track item.id;) {
-  <li>{{ item.name }}</li>
+} @else {
+<div class="series-card__wrapper">
+  @for (item of vm().series; track item.id; ) {
+
+  <nz-card nzHoverable [nzCover]="coverTemplate">
+    <nz-card-meta [nzTitle]="item.name" />
+  </nz-card>
+
+  <ng-template #coverTemplate>
+    <img
+      loading="lazy"
+      width="210"
+      height="295"
+      [alt]="item.name"
+      [ngSrc]="item.image.medium"
+    />
+  </ng-template>
+
   } @empty {
-  <li>No series found</li>
+  <nz-empty></nz-empty>
   }
-</ul>
+
+  <nz-pagination [nzPageIndex]="1" [nzTotal]="50"></nz-pagination>
+</div>
 }

src/app/series/series.component.scss

@@ -0,0 +1,14 @@
+.series-card__wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: space-around;
+  gap: 2rem;
+}
+
+:host ::ng-deep {
+  nz-card {
+    width: 210px;
+    flex: 0 0 auto;
+  }
+}

src/app/series/series.component.ts

@@ -6,14 +6,33 @@ import {
   Signal,
 } from '@angular/core';
 import { SeriesStore } from './store/series.store';
-import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
+import { AsyncPipe, NgForOf, NgIf, NgOptimizedImage } from '@angular/common';
 import { SeriesService } from './services/series.service';
 import { ViewModelComponent } from './shared/series.models';
+import { NzCardComponent, NzCardMetaComponent } from 'ng-zorro-antd/card';
+import { NzColDirective, NzRowDirective } from 'ng-zorro-antd/grid';
+import { NzPaginationComponent } from 'ng-zorro-antd/pagination';
+import { NzSpaceItemDirective } from 'ng-zorro-antd/space';
+import { NzImageDirective } from 'ng-zorro-antd/image';
+import { NzEmptyComponent } from 'ng-zorro-antd/empty';
 
 @Component({
   selector: 'app-series',
   standalone: true,
-  imports: [AsyncPipe, NgForOf, NgIf],
+  imports: [
+    AsyncPipe,
+    NgForOf,
+    NgIf,
+    NzCardComponent,
+    NzCardMetaComponent,
+    NgOptimizedImage,
+    NzRowDirective,
+    NzColDirective,
+    NzPaginationComponent,
+    NzSpaceItemDirective,
+    NzImageDirective,
+    NzEmptyComponent,
+  ],
   templateUrl: './series.component.html',
   styleUrls: ['./series.component.scss'],
   providers: [SeriesStore, SeriesService],

src/app/series/services/series.service.ts

@@ -1,19 +1,17 @@
 import { inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { delay, Observable, tap } from 'rxjs';
+import { Observable, tap } from 'rxjs';
 import { Serie } from '../shared/series.models';
 
 const TVMAZE_ENDPOINT = 'https://api.tvmaze.com/';
-const DELAY_MS = 1000;
 
 @Injectable()
 export class SeriesService {
   private httpClient = inject(HttpClient);
 
   getSeries(): Observable<Serie[]> {
-    return this.httpClient.get<Serie[]>(`${TVMAZE_ENDPOINT}shows`).pipe(
-      delay(DELAY_MS),
-      tap((s) => console.log(s))
-    );
+    return this.httpClient
+      .get<Serie[]>(`${TVMAZE_ENDPOINT}shows`)
+      .pipe(tap((s) => console.log(s)));
   }
 }

src/app/series/shared/series.models.ts

@@ -1,10 +1,11 @@
 export type ComponentState = 'idle' | 'loading' | 'loaded' | 'error';
 
+// We will add more here
 export interface Serie {
   id: number;
   name: string;
-  description: string;
-  thumbnail: string;
+  summary: string;
+  image: { medium: string; original: string };
 }
 
 // Store state related

src/styles.scss

@@ -1 +1 @@
-/* You can add global styles to this file, and also import other style files */
+//@import "~ng-zorro-antd/ng-zorro-antd.css";

src/theme.less

@@ -0,0 +1,25 @@
+// For more information: https://ng.ant.design/docs/customize-theme/en
+// -------- import official less file -----------
+@import '/node_modules/ng-zorro-antd/ng-zorro-antd.less';
+
+@imdb-yellow: #f5c518; // Color amarillo de IMDB
+@imdb-black: #000000; // Negro
+@imdb-grey: #f4f4f4; // Gris claro para fondos
+
+// -------- override less variables -----------
+// View all variables: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/style/themes/default.less
+
+// Sobrescribir variables de NG-ZORRO
+@primary-color: @imdb-yellow; // Color primario
+@layout-header-background: @imdb-black; // Color de fondo del header
+@layout-body-background: @imdb-grey; // Color de fondo del contenido
+@text-color: darken(@imdb-grey, 70%); // Color del texto
+@heading-color: @imdb-black; // Color de los encabezados
+@border-radius-base: 4px; // Radio de borde
+@link-color: @imdb-yellow; // Color de los enlaces
+
+// Otros colores de estado
+@success-color: #52c41a; // Verde para éxitos
+@warning-color: #faad14; // Amarillo para advertencias
+@error-color: #f5222d; // Rojo para errores
+@info-color: @primary-color; // Color para información, usa el color primario