From 4bcd3a1eca246150b4244299e967090faafb4c4d Mon Sep 17 00:00:00 2001 From: Florian Eisenmenger Date: Thu, 7 Mar 2024 10:52:02 +0100 Subject: [PATCH] products and products detail --- .../products-detail.component.html | 8 +- .../products-detail.component.ts | 23 ++--- .../src/app/products/products.component.html | 21 +++-- .../src/app/products/products.component.scss | 7 ++ .../src/app/products/products.component.ts | 94 +++++++++---------- 5 files changed, 82 insertions(+), 71 deletions(-) diff --git a/matsen-tool/src/app/products/products-detail/products-detail.component.html b/matsen-tool/src/app/products/products-detail/products-detail.component.html index 42abaa2..bccd24a 100644 --- a/matsen-tool/src/app/products/products-detail/products-detail.component.html +++ b/matsen-tool/src/app/products/products-detail/products-detail.component.html @@ -1,7 +1,8 @@
-

Azelainsäure

+

{{ product.name }}

+

{{ product.description }}

Lagerbestand:
376512 KG
@@ -16,8 +17,9 @@
- - + {{product.name}}
\ No newline at end of file diff --git a/matsen-tool/src/app/products/products-detail/products-detail.component.ts b/matsen-tool/src/app/products/products-detail/products-detail.component.ts index f40405f..1cf37db 100644 --- a/matsen-tool/src/app/products/products-detail/products-detail.component.ts +++ b/matsen-tool/src/app/products/products-detail/products-detail.component.ts @@ -2,7 +2,7 @@ import {AfterViewInit, Component, OnInit} from '@angular/core'; import {environment} from "@environments/environment"; import {ActivatedRoute} from "@angular/router"; import {Subscription} from "rxjs"; -import {PartnerJsonld, PartnerService} from "@app/core/api/v1"; +import {ProductJsonld, ProductService} from "@app/core/api/v1"; @Component({ selector: 'app-products-detail', @@ -14,15 +14,15 @@ export class ProductsDetailComponent implements OnInit, AfterViewInit { protected id: string; protected productDetailSub: Subscription; - protected product;//: ProductJsonld; + protected product: ProductJsonld; constructor( private route: ActivatedRoute, - // private productService: ProductService, + private productService: ProductService, ) { this.id = ""; this.productDetailSub = new Subscription(); - this.product = {}// as ProductJsonld; + this.product = {} as ProductJsonld; } ngOnInit() { @@ -37,12 +37,13 @@ export class ProductsDetailComponent implements OnInit, AfterViewInit { } getProductData() { - // this.productDetailSub = this.productService.partnersIdGet( - // this.id - // ).subscribe( - // data => { - // this.product = data; - // } - // ); + this.productDetailSub = this.productService.productsIdGet( + this.id + ).subscribe( + data => { + this.product = data; + console.log(this.product); + } + ); } } diff --git a/matsen-tool/src/app/products/products.component.html b/matsen-tool/src/app/products/products.component.html index 6ae5626..8d249aa 100644 --- a/matsen-tool/src/app/products/products.component.html +++ b/matsen-tool/src/app/products/products.component.html @@ -2,7 +2,7 @@

Produkte

- @@ -10,7 +10,16 @@ Nr. + + + + + @@ -34,7 +43,7 @@ - @@ -45,9 +54,9 @@ Go to product detail diff --git a/matsen-tool/src/app/products/products.component.scss b/matsen-tool/src/app/products/products.component.scss index e69de29..64ae330 100644 --- a/matsen-tool/src/app/products/products.component.scss +++ b/matsen-tool/src/app/products/products.component.scss @@ -0,0 +1,7 @@ +table { + width: 100%; + img { + width: 40px; + height: auto; + } +} diff --git a/matsen-tool/src/app/products/products.component.ts b/matsen-tool/src/app/products/products.component.ts index 183d415..9fe0781 100644 --- a/matsen-tool/src/app/products/products.component.ts +++ b/matsen-tool/src/app/products/products.component.ts @@ -2,7 +2,7 @@ import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@a import {MatSort, MatSortModule, Sort} from "@angular/material/sort"; import {MatPaginator, MatPaginatorIntl, MatPaginatorModule, PageEvent} from "@angular/material/paginator"; import {MatTableDataSource, MatTableModule} from "@angular/material/table"; -import {PartnerJsonld} from "@app/core/api/v1"; +import {PartnerJsonld, ProductJsonld, ProductService} from "@app/core/api/v1"; import {OrderFilter} from "@app/_models/orderFilter"; import {ApiConverter} from "@app/_helpers/api.converter"; import {Router, RouterLink, RouterLinkActive} from "@angular/router"; @@ -21,71 +21,64 @@ import {NewProductComponent} from "@app/products/new-product/new-product.compone }) export class ProductsComponent implements OnInit, AfterViewInit { @ViewChild(MatSort) sort; - @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatPaginator) productsPaginator: MatPaginator; - protected productsSub: Subscription; - protected products: Array; //TODO: ProductJsonld - protected dataType!: string; - - protected dataSource; protected displayedColumns: string[]; - protected length: number; - protected pageEvent: PageEvent; - protected pageSize: number; - protected pageIndex: number; + protected productsSub: Subscription; + protected products: Array; + protected productsDataSource; + protected productsLength: number; + protected productsPageEvent: PageEvent; + protected productsPageSize: number; + protected productPageIndex: number; constructor( private router: Router, - private modalService: NgbModal + private modalService: NgbModal, + private productService: ProductService ) { this.sort = new MatSort(); - this.paginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype); - this.dataSource = new MatTableDataSource; //(this.products) - this.displayedColumns = ['pos', 'name', 'storage', 'number']; + this.displayedColumns = ['pos', 'image', 'name', 'storage', 'number']; this.productsSub = new Subscription(); this.products = []; - - this.length = 0; - this.pageEvent = new PageEvent(); - this.pageSize = 10; - this.pageIndex = 0; + this.productsPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype); + this.productsDataSource = new MatTableDataSource(this.products); + this.productsLength = 0; + this.productsPageEvent = new PageEvent(); + this.productsPageSize = 10; + this.productPageIndex = 0; } ngOnInit() { - this.getData(); + this.getProductData(); } ngAfterViewInit() { - this.dataSource.sort = this.sort; - this.dataSource.paginator = this.paginator; + this.productsDataSource.sort = this.sort; + this.productsDataSource.paginator = this.productsPaginator; } - getData() { - // this.productsSub = this.productService.productsGetCollection( - // this.pageIndex + 1, - // this.pageSize, - // this.dataType, - // undefined, - // this.nameOrderAsc, - // this.storageOrderAsc, - // this.numberOrderAsc - // ).subscribe( - // data => { - // this.products = data["hydra:member"]; - // this.dataSource = new MatTableDataSource(this.products); - // console.log(data); - // this.length = Number(data["hydra:totalItems"]); - // this.paginator.length = this.length; - // } - // ); + getProductData() { + this.productsSub = this.productService.productsGetCollection( + this.productPageIndex + 1, + this.productsPageSize + ).subscribe( + data => { + this.products = data["hydra:member"]; + this.productsDataSource = new MatTableDataSource(this.products); + this.productsLength = Number(data["hydra:totalItems"]); + this.productsPaginator.length = this.productsLength; + console.log(this.products); + } + ); } /** Announce the change in sort state for assistive technology. */ onSortChange(sortState: Sort) { // Reset page index to first page - this.pageIndex = 0; + this.productPageIndex = 0; let order: OrderFilter; if (sortState.direction === "") { @@ -108,23 +101,22 @@ export class ProductsComponent implements OnInit, AfterViewInit { // this.websiteOrderAsc = order; // break; // } - this.getData(); + this.getProductData(); } handlePageEvent(e: PageEvent) { - this.pageEvent = e; - this.length = e.length; - this.pageIndex = e.pageIndex.valueOf(); - this.pageSize = e.pageSize.valueOf(); - this.getData(); + this.productsPageEvent = e; + this.productsLength = e.length; + this.productPageIndex = e.pageIndex.valueOf(); + this.productsPageSize = e.pageSize.valueOf(); + this.getProductData(); } navigateToProductDetails(element: any) { - const product: PartnerJsonld = element as PartnerJsonld; //Todo: ProductJsonld + const product: ProductJsonld = element as ProductJsonld; console.log(product.type); console.log(ApiConverter.extractId(product.id)); - // this.router.navigate(['/products', ApiConverter.extractId(product.id)]); - this.router.navigate(['/products', '1']); + this.router.navigate(['/products', ApiConverter.extractId(product.id)]); } openModalNewProduct() {
{{ (pageSize * pageIndex) + dataSource.filteredData.indexOf(element) + 1 }} + *matCellDef="let element">{{ (productsPageSize * productPageIndex) + productsDataSource.filteredData.indexOf(element) + 1 }} + + Logo + + Nummer {{ element.website }} + {{ element.number }}