Index: src/app/app.routes.ts =================================================================== --- src/app/app.routes.ts (revision 95b0e0e553b2e5d068b676bf2d8319b7a5f018f9) +++ src/app/app.routes.ts (revision ad8677eb617edc12ae20cfebe194aa233db190a9) @@ -20,5 +20,4 @@ import { AddManagerComponent } from './admin/add-manager/add-manager.component'; - export const routes: Routes = [ // CUSTOMER ROUTES @@ -30,5 +29,4 @@ }, { - path: 'customer/orders', component: CustomerOrdersComponent, @@ -37,5 +35,5 @@ }, { - path: 'customer/orders/add', + path: 'customer/orders/create', component: CreateOrderComponent, canActivate: [authGuard], Index: src/app/customer/create-order/create-order.component.html =================================================================== --- src/app/customer/create-order/create-order.component.html (revision 95b0e0e553b2e5d068b676bf2d8319b7a5f018f9) +++ src/app/customer/create-order/create-order.component.html (revision ad8677eb617edc12ae20cfebe194aa233db190a9) @@ -4,8 +4,12 @@ -
+
- -
+
- -
+
- +
-
+ @@ -38,5 +49,6 @@ class="scrollable-cards row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 mb-4" > -
+
+
{{ a.name }}
-

- Manufacturer: {{ a.manufacturer }}
- Price: ${{ a.price.toFixed(2) }}
- In Stock: {{ a.quantity }} -

+
@@ -61,4 +69,22 @@
+
+ +
+ + Page {{ currentPage + 1 }} of {{ totalPages }} +
Index: src/app/customer/create-order/create-order.component.ts =================================================================== --- src/app/customer/create-order/create-order.component.ts (revision 95b0e0e553b2e5d068b676bf2d8319b7a5f018f9) +++ src/app/customer/create-order/create-order.component.ts (revision ad8677eb617edc12ae20cfebe194aa233db190a9) @@ -7,4 +7,5 @@ import { Category, Manufacturer, Article, OrderItem } from '../../models'; import { OrderService } from '../../services/order.service'; +import { PagedModel } from '../../models/paged-model'; @Component({ @@ -16,9 +17,11 @@ export class CreateOrderComponent implements OnInit { form!: FormGroup; + displayed: Article[] = []; + currentPage = 0; + totalPages = 0; + pageSize = 50; + orderItems: OrderItem[] = []; categories: Category[] = []; manufacturers: Manufacturer[] = []; - articles: Article[] = []; - displayed: Article[] = []; - orderItems: OrderItem[] = []; totalSum = 0; proForma = false; @@ -33,31 +36,41 @@ ngOnInit() { this.form = this.fb.group({ - category: [''], - manufacturer: [''], + category: [null], + manufacturer: [null], search: [''], }); - this.svc.listCategories().subscribe((c) => (this.categories = c)); - this.svc.listManufacturers().subscribe((m) => (this.manufacturers = m)); - this.svc.listArticles().subscribe((a) => { - this.articles = a; - this.applyFilter(); - }); + this.form.valueChanges.subscribe(() => this.loadPage(0)); - this.form.valueChanges.subscribe(() => this.applyFilter()); + this.loadPage(0); + + this.svc.listCategories().subscribe((cats) => (this.categories = cats)); + this.svc + .listManufacturers() + .subscribe((mans) => (this.manufacturers = mans)); } - applyFilter() { + loadPage(page: number) { const { category, manufacturer, search } = this.form.value; + this.svc + .listArticles(category, manufacturer, search, page, this.pageSize) + .subscribe((resp: PagedModel
) => { + const listKey = Object.keys(resp._embedded)[0]; + this.displayed = resp._embedded[listKey]; + this.currentPage = resp.page.number; + this.totalPages = resp.page.totalPages; + }); + } - const term = (search || '').toLowerCase(); + prevPage() { + if (this.currentPage > 0) this.loadPage(this.currentPage - 1); + } - this.displayed = this.articles.filter((a) => { - return ( - (!category || a.categoryId === +category) && - (!manufacturer || a.manufacturerId === +manufacturer) && - (!term || a.name.toLowerCase().includes(term)) - ); - }); + nextPage() { + if (this.currentPage + 1 < this.totalPages) + this.loadPage(this.currentPage + 1); + } + trackByArticle(_: number, a: Article) { + return a.id; } Index: src/app/models/page-response.model.ts =================================================================== --- src/app/models/page-response.model.ts (revision ad8677eb617edc12ae20cfebe194aa233db190a9) +++ src/app/models/page-response.model.ts (revision ad8677eb617edc12ae20cfebe194aa233db190a9) @@ -0,0 +1,7 @@ +export interface PageResponse { + content: T[]; + totalElements: number; + totalPages: number; + number: number; + size: number; +} Index: src/app/models/paged-model.ts =================================================================== --- src/app/models/paged-model.ts (revision ad8677eb617edc12ae20cfebe194aa233db190a9) +++ src/app/models/paged-model.ts (revision ad8677eb617edc12ae20cfebe194aa233db190a9) @@ -0,0 +1,10 @@ +export interface PagedModel { + _embedded: { [collectionName: string]: T[] }; + _links: any; + page: { + size: number; + totalElements: number; + totalPages: number; + number: number; + }; +} Index: src/app/navbar/navbar.component.html =================================================================== --- src/app/navbar/navbar.component.html (revision 95b0e0e553b2e5d068b676bf2d8319b7a5f018f9) +++ src/app/navbar/navbar.component.html (revision ad8677eb617edc12ae20cfebe194aa233db190a9) @@ -7,46 +7,45 @@ data-bs-toggle="collapse" data-bs-target="#nav" + aria-controls="nav" + aria-expanded="false" + aria-label="Toggle navigation" > +