diff --git a/matsen-tool/src/app/_components/paging/paging.component.html b/matsen-tool/src/app/_components/paging/paging.component.html index 068a1db..34c9148 100644 --- a/matsen-tool/src/app/_components/paging/paging.component.html +++ b/matsen-tool/src/app/_components/paging/paging.component.html @@ -1,3 +1,11 @@ + +
{{contact.firstName}} {{contact.lastName}} + title="{{contact.firstName}} {{contact.lastName}}" />
diff --git a/matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.html b/matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.html index 5a173ac..1134dba 100644 --- a/matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.html +++ b/matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.html @@ -15,9 +15,8 @@
- {{contact.firstName}} {{contact.lastName}} + {{contact.firstName}} {{contact.lastName}}
diff --git a/matsen-tool/src/app/_views/contacts/new-contact/new-contact.component.html b/matsen-tool/src/app/_views/contacts/new-contact/new-contact.component.html index 41c0492..05276ae 100644 --- a/matsen-tool/src/app/_views/contacts/new-contact/new-contact.component.html +++ b/matsen-tool/src/app/_views/contacts/new-contact/new-contact.component.html @@ -49,7 +49,7 @@
- +

{{'system.delete-image' | translate}}

diff --git a/matsen-tool/src/app/_views/partners/new-partner/new-partner.component.html b/matsen-tool/src/app/_views/partners/new-partner/new-partner.component.html index 3733ea8..8a676a1 100644 --- a/matsen-tool/src/app/_views/partners/new-partner/new-partner.component.html +++ b/matsen-tool/src/app/_views/partners/new-partner/new-partner.component.html @@ -52,7 +52,7 @@
- +

{{ 'system.delete-image' | translate }}

diff --git a/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html b/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html index dbde17f..77e4028 100644 --- a/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html +++ b/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html @@ -22,8 +22,8 @@ {{ 'overview.logo' | translate }} - + diff --git a/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.ts b/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.ts index 91a6b1c..e474167 100644 --- a/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.ts +++ b/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(); } diff --git a/matsen-tool/src/app/_views/partners/partners-detail/partners-detail.component.html b/matsen-tool/src/app/_views/partners/partners-detail/partners-detail.component.html index b01470a..dcb4e1a 100644 --- a/matsen-tool/src/app/_views/partners/partners-detail/partners-detail.component.html +++ b/matsen-tool/src/app/_views/partners/partners-detail/partners-detail.component.html @@ -26,9 +26,9 @@
- {{partner.name}} + height="94" alt="{{partner.name}}" title="{{partner.name}}" />
- +

{{'system.delete-image' | translate}}

diff --git a/matsen-tool/src/app/_views/products/product-list/product-list.component.html b/matsen-tool/src/app/_views/products/product-list/product-list.component.html new file mode 100644 index 0000000..4b1fe63 --- /dev/null +++ b/matsen-tool/src/app/_views/products/product-list/product-list.component.html @@ -0,0 +1,62 @@ +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ {{ 'overview.number' | translate }} + {{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }} + + {{ 'overview.image' | translate }} + + + + {{ 'overview.productname' | translate }} + + {{ element.name }} + + {{ 'overview.storage' | translate }} + {{ element.storage }} + + {{ 'overview.number-long' | translate }} + {{ element.number }} +
+ +
diff --git a/matsen-tool/src/app/_views/products/product-list/product-list.component.scss b/matsen-tool/src/app/_views/products/product-list/product-list.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/matsen-tool/src/app/_views/products/product-list/product-list.component.spec.ts b/matsen-tool/src/app/_views/products/product-list/product-list.component.spec.ts new file mode 100644 index 0000000..b147980 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ProductListComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ProductListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/matsen-tool/src/app/_views/products/product-list/product-list.component.ts b/matsen-tool/src/app/_views/products/product-list/product-list.component.ts new file mode 100644 index 0000000..de80190 --- /dev/null +++ b/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; + 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(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(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); + } +} diff --git a/matsen-tool/src/app/_views/products/products-detail/products-detail.component.html b/matsen-tool/src/app/_views/products/products-detail/products-detail.component.html index b9c3255..63fa144 100644 --- a/matsen-tool/src/app/_views/products/products-detail/products-detail.component.html +++ b/matsen-tool/src/app/_views/products/products-detail/products-detail.component.html @@ -19,8 +19,8 @@
{{product.name}} + src="{{product.imageUrl}}" width="247" height="94" + alt="{{product.name}}" title="{{product.name}}" />

{{ 'basic.products' | translate }}

-
- + - - - - - - - - - - - - - - - - - - - - - - - - - - -
- {{ 'overview.number' | translate }} - {{ (productsPageSize * productsPageIndex) + productsDataSource.filteredData.indexOf(element) + 1 }} - - {{ 'overview.image' | translate }} - - - - {{ 'overview.productname' | translate }} - {{ element.name }} - - {{ 'overview.storage' | translate }} - {{ element.storage }} - - {{ 'overview.number-long' | translate }} - {{ element.number }} -
- - - + > + \ No newline at end of file diff --git a/matsen-tool/src/app/_views/products/products.component.ts b/matsen-tool/src/app/_views/products/products.component.ts index 6b8e53a..db1352f 100644 --- a/matsen-tool/src/app/_views/products/products.component.ts +++ b/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; - 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(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(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(); - } - }); - } } diff --git a/matsen-tool/src/app/_views/sales/new-sale/new-sale.component.html b/matsen-tool/src/app/_views/sales/new-sale/new-sale.component.html index 2e42519..f4c7f8b 100644 --- a/matsen-tool/src/app/_views/sales/new-sale/new-sale.component.html +++ b/matsen-tool/src/app/_views/sales/new-sale/new-sale.component.html @@ -73,7 +73,7 @@ - + diff --git a/matsen-tool/src/app/app.component.html b/matsen-tool/src/app/app.component.html index 3109f46..11cd4e1 100644 --- a/matsen-tool/src/app/app.component.html +++ b/matsen-tool/src/app/app.component.html @@ -4,8 +4,8 @@
- {{'basic.company-name' | translate}} + {{'basic.company-name' | translate}}
diff --git a/matsen-tool/src/app/app.module.ts b/matsen-tool/src/app/app.module.ts index 71a1d84..f5c2e90 100644 --- a/matsen-tool/src/app/app.module.ts +++ b/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},