product list refactroed

matsen-tool/src/app/_components/paging/paging.component.html

@@ -1,3 +1,11 @@
+<mat-paginator *ngIf="dataLength > 0" class="rounded-1"
+               [pageSizeOptions]="pageSizeOptions"
+               [length]="dataLength"
+               (page)="handlePageEvent($event)"
+               [pageSize]="pageSize"
+               [pageIndex]="pageIndex"
+               showFirstLastButtons>
+</mat-paginator>
 <ng-content></ng-content>
 <mat-paginator *ngIf="dataLength > 0" class="rounded-1"
                [pageSizeOptions]="pageSizeOptions"

matsen-tool/src/app/_views/contacts/contact-list/contact-list.component.html

@@ -19,9 +19,9 @@
                             </div>
                             <div class="col-4">
                                 <img *ngIf="contact.imageUrl !== null && contact.imageUrl !== undefined"
-                                     ngSrc="{{contact.imageUrl}}" width="247" height="94"
+                                      src="{{contact.imageUrl}}" width="247" height="94"
                                      alt="{{contact.firstName}} {{contact.lastName}}"
-                                     title="{{contact.firstName}} {{contact.lastName}}"/>
+                                     title="{{contact.firstName}} {{contact.lastName}}"  />
                             </div>
                         </div>
                     </div>

matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.html

@@ -15,9 +15,8 @@
                 </dl>
             </div>
             <div class="col-4">
-                <img *ngIf="contact.imageUrl !== null && contact.imageUrl !== undefined" ngSrc="{{contact.imageUrl}}" width="247"
-                     height="94"
-                     alt="{{contact.firstName}} {{contact.lastName}}" title="{{contact.firstName}} {{contact.lastName}}"/>
+                <img *ngIf="contact.imageUrl !== null && contact.imageUrl !== undefined"  src="{{contact.imageUrl}}" width="247" height="94"
+                     alt="{{contact.firstName}} {{contact.lastName}}" title="{{contact.firstName}} {{contact.lastName}}"  />
             </div>
             <span class="position-absolute bi bi-pencil p-2" data-type="user-tool" data-action="edit"
                   (click)="openModalEditContact()">

matsen-tool/src/app/_views/contacts/new-contact/new-contact.component.html

@@ -49,7 +49,7 @@
 
         <div class="mb-3" *ngIf="contactForm.get('imageUrl')?.value !== null">
             <div class="delete-image" (click)="onDeleteImage()">
-                <img src="{{contact.imageUrl}}" width="40" height="40" />
+                <img  src="{{contact.imageUrl}}" width="40" height="40"   />
                 <p class="mb-0 ms-3">{{'system.delete-image' | translate}}</p>
             </div>
         </div>

matsen-tool/src/app/_views/partners/new-partner/new-partner.component.html

@@ -52,7 +52,7 @@
 
         <div class="mb-3" *ngIf="partnerForm.get('logoUrl')?.value !== null">
             <div class="delete-image" (click)="onDeleteImage()">
-                <img src="{{partner.logoUrl}}" width="40" height="40"/>
+                <img  src="{{partner.logoUrl}}" width="40" height="40"  />
                 <p class="mb-0 ms-3">{{ 'system.delete-image' | translate }}</p>
             </div>
         </div>

matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html

@@ -22,8 +22,8 @@
                     {{ 'overview.logo' | translate }}
                 </th>
                 <td mat-cell *matCellDef="let element">
-                    <img role="button" src="{{ element.logoUrl }}" (click)="navigateToPartnerDetails(element)" width="40"
-                         height="40"/>
+                    <img role="button"  src="{{ element.logoUrl }}" (click)="navigateToPartnerDetails(element)" width="40"
+                         height="40"  />
                 </td>
             </ng-container>
 

matsen-tool/src/app/_views/partners/partner-list/partner-list.component.ts

@@ -21,7 +21,7 @@ import TypeEnum = PartnerJsonld.PartnerTypeEnum;
 export class PartnerListComponent implements OnInit, AfterViewInit {
 
     @Input("partnerType") partnerType!: string;
-    @ViewChild(MatSort) partnersSort;
+    @ViewChild(MatSort) sort;
     @ViewChild("pagingComponent", { static: false }) pagingComponent!: PagingComponent;
 
     protected partnersSub: Subscription;
@@ -43,7 +43,7 @@ export class PartnerListComponent implements OnInit, AfterViewInit {
         protected appHelperService: AppHelperService,
     ) {
         this.displayedColumns = ['pos', 'image', 'name', 'address', 'website'];
-        this.partnersSort = new MatSort();
+        this.sort = new MatSort();
         this.partnersSub = new Subscription();
         this.partners = [];
 
@@ -62,7 +62,7 @@ export class PartnerListComponent implements OnInit, AfterViewInit {
     }
 
     ngAfterViewInit() {
-        this.dataSource.sort = this.partnersSort;
+        this.dataSource.sort = this.sort;
         this.dataSource.paginator = this.pagingComponent.paginator;
         this.pagingComponent.getData();
     }

matsen-tool/src/app/_views/partners/partners-detail/partners-detail.component.html

@@ -26,9 +26,9 @@
                 </dl>
             </div>
             <div class="col-4">
-                <img *ngIf="partner.logoUrl !== null && partner.logoUrl !== undefined" src="{{partner.logoUrl}}"
+                <img *ngIf="partner.logoUrl !== null && partner.logoUrl !== undefined"  src="{{partner.logoUrl}}"
                      width="247"
-                     height="94" alt="{{partner.name}}" title="{{partner.name}}"/>
+                     height="94" alt="{{partner.name}}" title="{{partner.name}}"  />
             </div>
             <span class="position-absolute bi p-2"
                   [class.bi-heart]="partnerFollow === null"

matsen-tool/src/app/_views/products/new-product/new-product.component.html

@@ -25,7 +25,7 @@
 
         <div class="mb-3" *ngIf="productForm.get('imageUrl')?.value !== null">
             <div class="delete-image" (click)="onDeleteImage()">
-                <img src="{{product.imageUrl}}" width="40" height="40" />
+                <img  src="{{product.imageUrl}}" width="40" height="40"   />
                 <p class="mb-0 ms-3">{{'system.delete-image' | translate}}</p>
             </div>
         </div>

matsen-tool/src/app/_views/products/product-list/product-list.component.html

@@ -0,0 +1,62 @@
+<div class="spt-container">
+    <div class="d-flex justify-content-between align-items-start">
+        <button class="btn btn-primary" (click)="openModalNewProduct()">{{ 'basic.new-product' | translate }}</button>
+    </div>
+    <app-paging #pagingComponent
+                [getDataFunction]="getData"
+                [dataSource]="dataSource"
+    >
+        <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
+               class="mat-elevation-z8 mb-3">
+
+            <ng-container matColumnDef="pos">
+                <th mat-header-cell *matHeaderCellDef>
+                    {{ 'overview.number' | translate }}
+                </th>
+                <td mat-cell
+                    *matCellDef="let element">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="image">
+                <th mat-header-cell *matHeaderCellDef>
+                    {{ 'overview.image' | translate }}
+                </th>
+                <td mat-cell *matCellDef="let element">
+                    <img role="button" src="{{element.imageUrl}}" (click)="navigateToProductDetails(element)" width="40" height="40"/>
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="name">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header
+                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.productname' | translate }}">
+                    {{ 'overview.productname' | translate }}
+                </th>
+                <td mat-cell *matCellDef="let element">
+                    <span role="button" (click)="navigateToProductDetails(element)">{{ element.name }}</span>
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="storage">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header
+                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.storage' | translate }}">
+                    {{ 'overview.storage' | translate }}
+                </th>
+                <td mat-cell *matCellDef="let element">{{ element.storage }}
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="number">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header
+                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.number-long' | translate }}">
+                    {{ 'overview.number-long' | translate }}
+                </th>
+                <td mat-cell *matCellDef="let element">{{ element.number }}
+                </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        </table>
+    </app-paging>
+</div>

matsen-tool/src/app/_views/products/product-list/product-list.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductListComponent } from './product-list.component';
+
+describe('ProductListComponent', () => {
+  let component: ProductListComponent;
+  let fixture: ComponentFixture<ProductListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ProductListComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ProductListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

matsen-tool/src/app/_views/products/product-list/product-list.component.ts

@@ -0,0 +1,86 @@
+import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
+import {MatSort, Sort} from "@angular/material/sort";
+import {PagingComponent} from "@app/_components/paging/paging.component";
+import {Subscription} from "rxjs";
+import {ProductJsonld, ProductService} from "@app/core/api/v1";
+import {Router} from "@angular/router";
+import {AppHelperService} from "@app/_helpers/app-helper.service";
+import {MatTableDataSource} from "@angular/material/table";
+import {OrderFilter} from "@app/_models/orderFilter";
+import {NewProductComponent} from "@app/_views/products/new-product/new-product.component";
+
+@Component({
+  selector: 'app-product-list',
+  templateUrl: './product-list.component.html',
+  styleUrl: './product-list.component.scss'
+})
+export class ProductListComponent implements OnInit, AfterViewInit {
+
+    @ViewChild(MatSort) sort;
+    @ViewChild("pagingComponent", { static: false }) pagingComponent!: PagingComponent;
+
+    protected displayedColumns: string[];
+
+    protected productsSub: Subscription;
+    protected products: Array<ProductJsonld>;
+    protected dataSource;
+
+    constructor(
+        private router: Router,
+        private productService: ProductService,
+        protected appHelperService: AppHelperService,
+    ) {
+        this.sort = new MatSort();
+        this.displayedColumns = ['pos', 'image', 'name', 'storage', 'number'];
+
+        this.productsSub = new Subscription();
+        this.products = [];
+        this.dataSource = new MatTableDataSource<ProductJsonld>(this.products);
+    }
+
+    ngOnInit(){
+    }
+
+    ngAfterViewInit() {
+        this.dataSource.sort = this.sort;
+        this.dataSource.paginator = this.pagingComponent.paginator;
+        this.pagingComponent.getData();
+    }
+
+    getData = () => {
+        this.productsSub = this.productService.productsGetCollection(
+            this.pagingComponent.getPageIndex(),
+            this.pagingComponent.getPageSize()
+        ).subscribe(
+            data => {
+                this.products = data["hydra:member"];
+                this.dataSource = new MatTableDataSource<ProductJsonld>(this.products);
+                this.pagingComponent.dataLength = Number(data["hydra:totalItems"]);
+            }
+        );
+    }
+
+    onSortChange = (sortState: Sort) => {
+        this.pagingComponent.resetPageIndex()
+
+        let order: OrderFilter;
+        if (sortState.direction === "") {
+            order = OrderFilter.Undefined;
+        } else {
+            order = sortState.direction;
+        }
+        this.pagingComponent.getData();
+    }
+
+    navigateToProductDetails(element: any) {
+        const product: ProductJsonld = element as ProductJsonld;
+        this.router.navigate(['/products', this.appHelperService.extractId(product.id)]);
+    }
+
+    openModalNewProduct() {
+        // TODO: Warum muss ich einen leeren String übergeben, damit es funktioniert?
+        let product: ProductJsonld = {} as ProductJsonld;
+        product.name = "";
+        this.appHelperService.openModal(NewProductComponent, { 'product': product }, this.getData);
+    }
+}

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

@@ -19,8 +19,8 @@
             </div>
             <div class="col-4">
                 <img *ngIf="product.imageUrl !== null && product.imageUrl !== undefined"
-                     ngSrc="{{product.imageUrl}}" width="247" height="94"
-                     alt="{{product.name}}" title="{{product.name}}"/>
+                      src="{{product.imageUrl}}" width="247" height="94"
+                     alt="{{product.name}}" title="{{product.name}}"  />
             </div>
             <span class="position-absolute bi p-2"
                   [class.bi-heart]="userProduct === null"

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

@@ -1,67 +1,8 @@
 <div class="spt-container">
     <div class="d-flex justify-content-between align-items-start">
         <h2>{{ 'basic.products' | translate }}</h2>
-        <button class="btn btn-primary" (click)="openModalNewProduct()">{{ 'basic.new-product' | translate }}</button>
     </div>
-    <table mat-table [dataSource]="productsDataSource" matSort (matSortChange)="onSortChange($event)"
-           class="mat-elevation-z8 mb-3">
+    <app-product-list #productList
 
-        <ng-container matColumnDef="pos">
-            <th mat-header-cell *matHeaderCellDef>
-                {{ 'overview.number' | translate }}
-            </th>
-            <td mat-cell
-                *matCellDef="let element">{{ (productsPageSize * productsPageIndex) + productsDataSource.filteredData.indexOf(element) + 1 }}
-            </td>
-        </ng-container>
-
-        <ng-container matColumnDef="image">
-            <th mat-header-cell *matHeaderCellDef>
-                {{ 'overview.image' | translate }}
-            </th>
-            <td mat-cell *matCellDef="let element">
-                <img role="button" src="{{ element.imageUrl }}" (click)="navigateToProductDetails(element)" width="40"
-                     height="40"/>
-            </td>
-        </ng-container>
-
-        <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header
-                sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.productname' | translate }}">
-                {{ 'overview.productname' | translate }}
-            </th>
-            <td mat-cell *matCellDef="let element"><span role="button"
-                                                         (click)="navigateToProductDetails(element)">{{ element.name }}</span>
-            </td>
-        </ng-container>
-
-        <ng-container matColumnDef="storage">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header
-                sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.storage' | translate }}">
-                {{ 'overview.storage' | translate }}
-            </th>
-            <td mat-cell *matCellDef="let element">{{ element.storage }}
-            </td>
-        </ng-container>
-
-        <ng-container matColumnDef="number">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header
-                sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.number-long' | translate }}">
-                {{ 'overview.number-long' | translate }}
-            </th>
-            <td mat-cell *matCellDef="let element">{{ element.number }}
-            </td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-    </table>
-    <mat-paginator class="rounded-1"
-                   [pageSizeOptions]="[10,25,50]"
-                   [length]="productsLength"
-                   (page)="handlePageEvent($event)"
-                   [pageSize]="productsPageSize"
-                   [pageIndex]="productsPageIndex"
-                   showFirstLastButtons>
-    </mat-paginator>
-</div>
+    ></app-product-list>
+</div>

matsen-tool/src/app/_views/products/products.component.ts

@@ -1,17 +1,5 @@
-import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
-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 {ProductJsonld, ProductService} from "@app/core/api/v1";
-import {OrderFilter} from "@app/_models/orderFilter";
-import {AppHelperService} from "@app/_helpers/app-helper.service";
-import {Router, RouterLink, RouterLinkActive} from "@angular/router";
-import {NgIf} from "@angular/common";
-import {Subscription} from "rxjs";
-import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
-import {NewProductComponent} from "@app/_views/products/new-product/new-product.component";
-import {ModalStatus} from "@app/_helpers/modal.states";
-import {TranslateModule} from "@ngx-translate/core";
+import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
+import {ProductListComponent} from "@app/_views/products/product-list/product-list.component";
 
 @Component({
     selector: 'app-products',
@@ -19,118 +7,18 @@ import {TranslateModule} from "@ngx-translate/core";
     styleUrl: './products.component.scss',
 })
 export class ProductsComponent implements OnInit, AfterViewInit {
-    @ViewChild(MatSort) sort;
-    @ViewChild(MatPaginator) productsPaginator: MatPaginator;
 
-    protected displayedColumns: string[];
-
-    protected productsSub: Subscription;
-    protected products: Array<ProductJsonld>;
-    protected productsDataSource;
-    protected productsLength: number;
-    protected productsPageEvent: PageEvent;
-    protected productsPageSize: number;
-    protected productsPageIndex: number;
-
-    protected modalOptions: NgbModalOptions = {
-        centered: true
-    };
+    @ViewChild("productList", { static: false }) productList!: ProductListComponent;
 
     constructor(
-        private router: Router,
-        private modalService: NgbModal,
-        private productService: ProductService,
-        protected appHelperService: AppHelperService,
     ) {
-        this.sort = new MatSort();
-        this.displayedColumns = ['pos', 'image', 'name', 'storage', 'number'];
-
-        this.productsSub = new Subscription();
-        this.products = [];
-        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.productsPageIndex = 0;
     }
 
-    ngOnInit() {
-        this.getProductsData();
+    ngOnInit(): void {
     }
 
-    ngAfterViewInit() {
-        this.productsDataSource.sort = this.sort;
-        this.productsDataSource.paginator = this.productsPaginator;
+    ngAfterViewInit(): void {
     }
 
-    getProductsData() {
-        this.productsSub = this.productService.productsGetCollection(
-            this.productsPageIndex + 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;
-            }
-        );
-    }
 
-    /** Announce the change in sort state for assistive technology. */
-    onSortChange(sortState: Sort) {
-        // Reset page index to first page
-        this.productsPageIndex = 0;
-
-        let order: OrderFilter;
-        if (sortState.direction === "") {
-            order = OrderFilter.Undefined;
-        } else {
-            order = sortState.direction;
-        }
-
-        // this.nameOrderAsc = OrderFilter.Undefined;
-        // this.cityOrderAsc = OrderFilter.Undefined;
-        // this.websiteOrderAsc = OrderFilter.Undefined;
-        // switch (sortState.active) {
-        //     case "name":
-        //         this.nameOrderAsc = order;
-        //         break;
-        //     case "address":
-        //         this.cityOrderAsc = order;
-        //         break;
-        //     case "website":
-        //         this.websiteOrderAsc = order;
-        //         break;
-        // }
-        this.getProductsData();
-    }
-
-    handlePageEvent(e: PageEvent) {
-        this.productsPageEvent = e;
-        this.productsLength = e.length;
-        this.productsPageIndex = e.pageIndex.valueOf();
-        this.productsPageSize = e.pageSize.valueOf();
-        this.getProductsData();
-    }
-
-    navigateToProductDetails(element: any) {
-        const product: ProductJsonld = element as ProductJsonld;
-        this.router.navigate(['/products', this.appHelperService.extractId(product.id)]);
-    }
-
-    openModalNewProduct() {
-        const modalRefProduct = this.modalService.open(NewProductComponent, this.appHelperService.getModalOptions());
-        // TODO: Warum muss ich einen leeren String übergeben, damit es funktioniert?
-        let product: ProductJsonld = {} as ProductJsonld;
-        product.name = "";
-        modalRefProduct.componentInstance.product = product;
-        modalRefProduct.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
-            if (modalStatus === ModalStatus.Submitted) {
-                modalRefProduct.dismiss();
-                this.getProductsData();
-            }
-        });
-    }
 }

matsen-tool/src/app/_views/sales/new-sale/new-sale.component.html

@@ -73,7 +73,7 @@
 
 <!--        <div class="mb-3" *ngIf="partnerForm.get('logoUrl')?.value !== null">-->
 <!--            <div class="delete-image" (click)="onDeleteImage()">-->
-<!--                <img src="{{partner.logoUrl}}" width="40" height="40"/>-->
+<!--                <img  src="{{partner.logoUrl}}" width="40" height="40"  />-->
 <!--                <p class="mb-0 ms-3">{{ 'system.delete-image' | translate }}</p>-->
 <!--            </div>-->
 <!--        </div>-->

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

@@ -4,8 +4,8 @@
         <div class="navbar-nav">
             <a class="nav-item nav-link" routerLink="/" routerLinkActive="active"
                [routerLinkActiveOptions]="{exact: true}">
-                <img src="./assets/images/specific/matsen_logo.svg" width="210" height="80"
-                     alt="{{'basic.company-name' | translate}}"/>
+                <img  src="./assets/images/specific/matsen_logo.svg" width="210" height="80"
+                     alt="{{'basic.company-name' | translate}}"  />
             </a>
         </div>
         <div class="navbar-nav align-items-center">

matsen-tool/src/app/app.module.ts

@@ -55,6 +55,7 @@ import { TaskListComponent } from './_views/tasks/task-list/task-list.component'
 import { SearchInputComponent } from './_components/search-input/search-input.component';
 import { PagingComponent } from '@app/_components/paging/paging.component';
 import { PartnerListComponent } from './_views/partners/partner-list/partner-list.component';
+import { ProductListComponent } from './_views/products/product-list/product-list.component';
 
 export function apiConfigFactory(): Configuration {
     const params: ConfigurationParameters = {
@@ -131,6 +132,7 @@ export function HttpLoaderFactory(http: HttpClient) {
         SearchInputComponent,
         PagingComponent,
         PartnerListComponent,
+        ProductListComponent,
     ],
     providers: [
         {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},