Socks shop

.gitignore

@@ -1,2 +1,3 @@
 ~$*.pptx
 node_modules
+.idea

itenium-socks/angular.json

@@ -32,6 +32,7 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/rose-red.css",
               "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
               "src/styles.scss",
               "public/bootstrap.css"
@@ -93,12 +94,16 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/rose-red.css",
               "src/styles.scss"
             ],
             "scripts": []
           }
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

itenium-socks/package.json

@@ -11,10 +11,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^18.0.0",
+    "@angular/cdk": "^18.0.1",
     "@angular/common": "^18.0.0",
     "@angular/compiler": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@angular/forms": "^18.0.0",
+    "@angular/material": "^18.0.1",
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
@@ -37,4 +39,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.4.2"
   }
-}
+}

itenium-socks/src/app/app.config.ts

@@ -3,11 +3,13 @@ import { provideRouter } from '@angular/router';
 import { provideHttpClient, withFetch } from '@angular/common/http';
 
 import { routes } from './app.routes';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
     provideHttpClient(withFetch()),
+    provideAnimationsAsync(),
   ]
 };

itenium-socks/src/app/socks/shop.component.html

@@ -6,7 +6,7 @@ <h2>
       </h2>
     </div>
     <div class="row">
-      <div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let sock of socks$ | async">
+      <div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let sock of socks">
         <div class="box">
           <a href="/socks/{{ sock.id }}">
             <div class="img-box">
@@ -22,6 +22,7 @@ <h6><span>{{ sock.price }}</span></h6>
           </a>
         </div>
       </div>
+      <mat-paginator [length]="totalItems" [pageSize]="pageSize" [pageIndex]="currentPage" (page)="pageChanged($event)"></mat-paginator>
     </div>
   </div>
 </section>

itenium-socks/src/app/socks/shop.component.ts

@@ -1,21 +1,44 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import { SocksService } from './socks.service';
-import { Observable } from 'rxjs';
+import {last, Observable} from 'rxjs';
 import { Sock } from './sock.model';
 import { AsyncPipe, NgFor } from '@angular/common';
+import {MatPaginator, PageEvent} from "@angular/material/paginator";
 
 @Component({
   selector: 'app-shop',
   standalone: true,
-  imports: [NgFor, AsyncPipe],
+  imports: [NgFor, AsyncPipe, MatPaginator],
   templateUrl: './shop.component.html'
 })
-export class ShopComponent {
+export class ShopComponent implements OnInit{
+  totalItems = 100;
+  pageSize = 8;
+  currentPage = 0;
   socks$!: Observable<Sock[]>;
+  socks: Sock[] = [];
 
   constructor(private socksService: SocksService) {}
 
   ngOnInit(): void {
     this.socks$ = this.socksService.get();
+    this.socks$.pipe(last())
+      .subscribe(allSocks => {
+        this.socks = this.getSocksPage(allSocks, this.currentPage, this.pageSize)
+        this.totalItems = allSocks.length
+      })
+  }
+
+  pageChanged(event: PageEvent) {
+    this.currentPage = event.pageIndex;
+    this.socks$.pipe(last())
+      .subscribe(allSocks => {
+        this.socks = this.getSocksPage(allSocks, this.currentPage, this.pageSize)
+      })
+  }
+
+  private getSocksPage(allSocks: Sock[], currentPage: number, pageSize: number) {
+    const index = currentPage * pageSize
+    return allSocks.slice(index, index + pageSize);
   }
 }

itenium-socks/src/index.html

@@ -7,6 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.png">
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

itenium-socks/src/styles.scss

@@ -943,3 +943,6 @@ a:focus {
       max-width: 1170px;
   }
 }
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }