products and products detail

matsen-tool/src/app/products/products-detail/products-detail.component.html

@@ -1,7 +1,8 @@
 <div class="card">
     <div class="card-body row">
         <div class="col-8">
-            <h1>Azelainsäure</h1>
+            <h1>{{ product.name }}</h1>
+            <p>{{ product.description }}</p>
             <dl>
                 <dt>Lagerbestand:</dt>
                 <dd>376512 KG</dd>
@@ -16,8 +17,9 @@
             </dl>
         </div>
         <div class="col-4">
-<!--            <img *ngIf="partner.logoUrl !== null" src="{{environment.basePath}}{{partner.logoUrl}}" width="247" height="94"-->
-<!--                 alt="{{partner.name}}" title="{{partner.name}}" />-->
+            <img *ngIf="product.imageUrl !== null && product.imageUrl !== undefined"
+                 ngSrc="{{product.imageUrl}}" width="247" height="94"
+                 alt="{{product.name}}" title="{{product.name}}"/>
         </div>
     </div>
 </div>

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);
+            }
+        );
     }
 }

matsen-tool/src/app/products/products.component.html

@@ -2,7 +2,7 @@
     <h2>Produkte</h2>
     <button (click)="openModalNewProduct()">Neues Produkt</button>
 </div>
-<table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
+<table mat-table [dataSource]="productsDataSource" matSort (matSortChange)="onSortChange($event)"
        class="mat-elevation-z8">
 
     <ng-container matColumnDef="pos">
@@ -10,7 +10,16 @@
             Nr.
         </th>
         <td mat-cell
-            *matCellDef="let element">{{ (pageSize * pageIndex) + dataSource.filteredData.indexOf(element) + 1 }}
+            *matCellDef="let element">{{ (productsPageSize * productPageIndex) + productsDataSource.filteredData.indexOf(element) + 1 }}
+        </td>
+    </ng-container>
+
+    <ng-container matColumnDef="image">
+        <th mat-header-cell *matHeaderCellDef>
+            Logo
+        </th>
+        <td mat-cell *matCellDef="let element">
+            <img src="{{ element.imageUrl }}" (click)="navigateToProductDetails(element)" width="40" height="40" />
         </td>
     </ng-container>
 
@@ -34,7 +43,7 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Nummer sortieren">
             Nummer
         </th>
-        <td mat-cell *matCellDef="let element"><a href="{{ element.number }}" target="_blank">{{ element.website }}</a>
+        <td mat-cell *matCellDef="let element">{{ element.number }}
         </td>
     </ng-container>
 
@@ -45,9 +54,9 @@
 <span (click)="navigateToProductDetails('a')">Go to product detail</span>
 <mat-paginator class="mb-4"
                [pageSizeOptions]="[10,25,50]"
-               [length]="length"
+               [length]="productsLength"
                (page)="handlePageEvent($event)"
-               [pageSize]="pageSize"
-               [pageIndex]="pageIndex"
+               [pageSize]="productsPageSize"
+               [pageIndex]="productPageIndex"
                showFirstLastButtons>
 </mat-paginator>

matsen-tool/src/app/products/products.component.scss

@@ -0,0 +1,7 @@
+table {
+  width: 100%;
+  img {
+    width: 40px;
+    height: auto;
+  }
+}

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<PartnerJsonld>; //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<ProductJsonld>;
+    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; //<ProductJsonld>(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<ProductJsonld>(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<ProductJsonld>(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<ProductJsonld>(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() {