From b2593fc4d276af282ac9fc22021d9388c06e6c57 Mon Sep 17 00:00:00 2001 From: Florian Eisenmenger Date: Mon, 12 Feb 2024 12:15:55 +0100 Subject: [PATCH] Partners Sorting --- matsen-tool/openapi.yaml | 42 +++++++++-- matsen-tool/src/app/_models/orderFilter.ts | 6 ++ .../app/core/api/v1/.openapi-generator/FILES | 1 + .../app/core/api/v1/api/partner.service.ts | 28 ++++--- .../src/app/partners/partners.component.html | 10 +-- .../src/app/partners/partners.component.ts | 74 ++++++++++++------- 6 files changed, 116 insertions(+), 45 deletions(-) create mode 100644 matsen-tool/src/app/_models/orderFilter.ts diff --git a/matsen-tool/openapi.yaml b/matsen-tool/openapi.yaml index 046a64b..464096c 100644 --- a/matsen-tool/openapi.yaml +++ b/matsen-tool/openapi.yaml @@ -420,6 +420,32 @@ paths: style: form explode: false allowReserved: false + - + name: type + in: query + description: '' + required: false + deprecated: false + allowEmptyValue: true + schema: + type: string + style: form + explode: false + allowReserved: false + - + name: 'type[]' + in: query + description: '' + required: false + deprecated: false + allowEmptyValue: true + schema: + type: array + items: + type: string + style: form + explode: true + allowReserved: false - name: 'order[name]' in: query @@ -436,7 +462,7 @@ paths: explode: false allowReserved: false - - name: type + name: 'order[city]' in: query description: '' required: false @@ -444,22 +470,26 @@ paths: allowEmptyValue: true schema: type: string + enum: + - asc + - desc style: form explode: false allowReserved: false - - name: 'type[]' + name: 'order[website]' in: query description: '' required: false deprecated: false allowEmptyValue: true schema: - type: array - items: - type: string + type: string + enum: + - asc + - desc style: form - explode: true + explode: false allowReserved: false deprecated: false post: diff --git a/matsen-tool/src/app/_models/orderFilter.ts b/matsen-tool/src/app/_models/orderFilter.ts new file mode 100644 index 0000000..d4c88d1 --- /dev/null +++ b/matsen-tool/src/app/_models/orderFilter.ts @@ -0,0 +1,6 @@ +export type OrderFilter = 'asc' | 'desc' | undefined; +export const OrderFilter = { + Asc: 'asc' as OrderFilter, + Desc: 'desc' as OrderFilter, + Undefined: undefined as OrderFilter +} \ No newline at end of file diff --git a/matsen-tool/src/app/core/api/v1/.openapi-generator/FILES b/matsen-tool/src/app/core/api/v1/.openapi-generator/FILES index 812c87e..1c2dc22 100644 --- a/matsen-tool/src/app/core/api/v1/.openapi-generator/FILES +++ b/matsen-tool/src/app/core/api/v1/.openapi-generator/FILES @@ -1,4 +1,5 @@ .gitignore +.openapi-generator-ignore README.md api.module.ts api/api.ts diff --git a/matsen-tool/src/app/core/api/v1/api/partner.service.ts b/matsen-tool/src/app/core/api/v1/api/partner.service.ts index 365dc54..47e1108 100644 --- a/matsen-tool/src/app/core/api/v1/api/partner.service.ts +++ b/matsen-tool/src/app/core/api/v1/api/partner.service.ts @@ -103,26 +103,24 @@ export class PartnerService { * Retrieves the collection of Partner resources. * Retrieves the collection of Partner resources. * @param page The collection page number - * @param orderName * @param type * @param type2 + * @param orderName + * @param orderCity + * @param orderWebsite * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body. * @param reportProgress flag to report request and response progress. */ - public partnersGetCollection(page?: number, orderName?: 'asc' | 'desc', type?: string, type2?: Array, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext}): Observable; - public partnersGetCollection(page?: number, orderName?: 'asc' | 'desc', type?: string, type2?: Array, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext}): Observable>; - public partnersGetCollection(page?: number, orderName?: 'asc' | 'desc', type?: string, type2?: Array, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext}): Observable>; - public partnersGetCollection(page?: number, orderName?: 'asc' | 'desc', type?: string, type2?: Array, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext}): Observable { + public partnersGetCollection(page?: number, type?: string, type2?: Array, orderName?: 'asc' | 'desc', orderCity?: 'asc' | 'desc', orderWebsite?: 'asc' | 'desc', observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext}): Observable; + public partnersGetCollection(page?: number, type?: string, type2?: Array, orderName?: 'asc' | 'desc', orderCity?: 'asc' | 'desc', orderWebsite?: 'asc' | 'desc', observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext}): Observable>; + public partnersGetCollection(page?: number, type?: string, type2?: Array, orderName?: 'asc' | 'desc', orderCity?: 'asc' | 'desc', orderWebsite?: 'asc' | 'desc', observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext}): Observable>; + public partnersGetCollection(page?: number, type?: string, type2?: Array, orderName?: 'asc' | 'desc', orderCity?: 'asc' | 'desc', orderWebsite?: 'asc' | 'desc', observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext}): Observable { let localVarQueryParameters = new HttpParams({encoder: this.encoder}); if (page !== undefined && page !== null) { localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, page, 'page'); } - if (orderName !== undefined && orderName !== null) { - localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, - orderName, 'order[name]'); - } if (type !== undefined && type !== null) { localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, type, 'type'); @@ -133,6 +131,18 @@ export class PartnerService { element, 'type[]'); }) } + if (orderName !== undefined && orderName !== null) { + localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, + orderName, 'order[name]'); + } + if (orderCity !== undefined && orderCity !== null) { + localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, + orderCity, 'order[city]'); + } + if (orderWebsite !== undefined && orderWebsite !== null) { + localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, + orderWebsite, 'order[website]'); + } let localVarHeaders = this.defaultHeaders; diff --git a/matsen-tool/src/app/partners/partners.component.html b/matsen-tool/src/app/partners/partners.component.html index 6dc35cc..0102830 100644 --- a/matsen-tool/src/app/partners/partners.component.html +++ b/matsen-tool/src/app/partners/partners.component.html @@ -1,11 +1,11 @@ - - + @@ -16,7 +16,7 @@ -
Nr. {{dataSource.filteredData.indexOf(element) + 1}}{{(currentPageSize * currentPageIndex) + dataSource.filteredData.indexOf(element) + 1}} + Adresse {{ element.street }} {{ element.streetNo }} @@ -39,8 +39,8 @@ diff --git a/matsen-tool/src/app/partners/partners.component.ts b/matsen-tool/src/app/partners/partners.component.ts index ec1dc78..0000e22 100644 --- a/matsen-tool/src/app/partners/partners.component.ts +++ b/matsen-tool/src/app/partners/partners.component.ts @@ -7,6 +7,7 @@ import {Subscription} from "rxjs"; import {PartnerJsonld, PartnerService} from "@app/core/api/v1"; import {MatPaginator, MatPaginatorIntl, MatPaginatorModule, PageEvent} from "@angular/material/paginator"; import {NumberInput} from "@angular/cdk/coercion"; +import {OrderFilter} from "@app/_models/orderFilter"; @Component({ selector: 'app-partners', @@ -23,17 +24,18 @@ export class PartnersComponent implements OnInit, AfterViewInit { protected partners: Array; protected length: number; protected pageEvent: PageEvent; - protected pageSize: NumberInput; - protected pageIndex: NumberInput; + protected currentPageSize: number; protected currentPageIndex: number; - protected pageSizeOptions = [10]; + + protected nameOrderAsc: OrderFilter; + protected cityOrderAsc: OrderFilter; + protected websiteOrderAsc: OrderFilter; protected dataType!: string; protected displayedColumns: string[]; protected dataSource; constructor( - private _liveAnnouncer: LiveAnnouncer, private route: ActivatedRoute, private partnerService: PartnerService ) { @@ -44,20 +46,20 @@ export class PartnersComponent implements OnInit, AfterViewInit { this.partners = []; this.displayedColumns = ['pos', 'name', 'address', 'website']; + this.nameOrderAsc = OrderFilter.Asc; + this.cityOrderAsc = OrderFilter.Asc; + this.websiteOrderAsc = OrderFilter.Asc; + this.dataSource = new MatTableDataSource(this.partners); this.pageEvent = new PageEvent(); this.length = 0; - this.pageSize = 10; - this.pageIndex = 0; - this.currentPageIndex = 1; + this.currentPageSize = 10; + this.currentPageIndex = 0; } ngOnInit() { this.dataType = this.route.snapshot.data['dataType']; - console.log('Data Type:', this.dataType); - this.getData(); - console.log(this.dataSource.data); } ngAfterViewInit() { @@ -66,40 +68,62 @@ export class PartnersComponent implements OnInit, AfterViewInit { } /** Announce the change in sort state for assistive technology. */ - announceSortChange(sortState: Sort) { - // This example uses English messages. If your application supports - // multiple language, you would internationalize these strings. - // Furthermore, you can customize the message to add additional - // details about the values being sorted. - console.log(sortState); - if (sortState.direction) { - this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`); + onSortChange(sortState: Sort) { + // Reset page index to first page + this.currentPageIndex = 0; + + let order: OrderFilter; + if (sortState.direction === "") { + order = OrderFilter.Undefined; } else { - this._liveAnnouncer.announce('Sorting cleared'); + 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.getData(); } getData() { - this.partnersSub = this.partnerService.partnersGetCollection(this.currentPageIndex, "asc", this.dataType).subscribe( + // switch over this.dataType (customers, etc.) + this.partnersSub = this.partnerService.partnersGetCollection( + this.currentPageIndex + 1, + this.dataType, + undefined, + this.nameOrderAsc, + this.cityOrderAsc, + this.websiteOrderAsc + ).subscribe( data => { this.partners = data["hydra:member"]; this.dataSource = new MatTableDataSource(this.partners); + console.log(data); this.length = Number(data["hydra:totalItems"]); this.paginator.length = this.length; } ); - console.log(this.dataSource.data); } - handlePageEvent(e: PageEvent) { this.pageEvent = e; this.length = e.length; - this.pageSize = e.pageSize; - this.pageIndex = e.pageIndex; - this.currentPageIndex = this.pageIndex.valueOf() + 1; + this.currentPageIndex = e.pageIndex.valueOf(); + this.currentPageSize = e.pageSize.valueOf(); this.getData(); } + protected readonly Number = Number; }