Partners Sorting

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:

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

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

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<string>, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext}): Observable<ApiPartnersGetCollection200Response>;
-    public partnersGetCollection(page?: number, orderName?: 'asc' | 'desc', type?: string, type2?: Array<string>, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext}): Observable<HttpResponse<ApiPartnersGetCollection200Response>>;
-    public partnersGetCollection(page?: number, orderName?: 'asc' | 'desc', type?: string, type2?: Array<string>, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext}): Observable<HttpEvent<ApiPartnersGetCollection200Response>>;
-    public partnersGetCollection(page?: number, orderName?: 'asc' | 'desc', type?: string, type2?: Array<string>, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/ld+json' | 'application/json' | 'text/html' | 'application/hal+json', context?: HttpContext}): Observable<any> {
+    public partnersGetCollection(page?: number, type?: string, type2?: Array<string>, 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<ApiPartnersGetCollection200Response>;
+    public partnersGetCollection(page?: number, type?: string, type2?: Array<string>, 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<HttpResponse<ApiPartnersGetCollection200Response>>;
+    public partnersGetCollection(page?: number, type?: string, type2?: Array<string>, 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<HttpEvent<ApiPartnersGetCollection200Response>>;
+    public partnersGetCollection(page?: number, type?: string, type2?: Array<string>, 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<any> {
 
         let localVarQueryParameters = new HttpParams({encoder: this.encoder});
         if (page !== undefined && page !== null) {
           localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
             <any>page, 'page');
         }
-        if (orderName !== undefined && orderName !== null) {
-          localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
-            <any>orderName, 'order[name]');
-        }
         if (type !== undefined && type !== null) {
           localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
             <any>type, 'type');
@@ -133,6 +131,18 @@ export class PartnerService {
                   <any>element, 'type[]');
             })
         }
+        if (orderName !== undefined && orderName !== null) {
+          localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
+            <any>orderName, 'order[name]');
+        }
+        if (orderCity !== undefined && orderCity !== null) {
+          localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
+            <any>orderCity, 'order[city]');
+        }
+        if (orderWebsite !== undefined && orderWebsite !== null) {
+          localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
+            <any>orderWebsite, 'order[website]');
+        }
 
         let localVarHeaders = this.defaultHeaders;
 

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

@@ -1,11 +1,11 @@
-<table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)"
+<table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
        class="mat-elevation-z8">
 
     <ng-container matColumnDef="pos">
         <th mat-header-cell *matHeaderCellDef>
             Nr.
         </th>
-        <td mat-cell *matCellDef="let element">{{dataSource.filteredData.indexOf(element) + 1}}</td>
+        <td mat-cell *matCellDef="let element">{{(currentPageSize * currentPageIndex) + dataSource.filteredData.indexOf(element) + 1}}</td>
     </ng-container>
 
     <ng-container matColumnDef="name">
@@ -16,7 +16,7 @@
     </ng-container>
 
     <ng-container matColumnDef="address">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="street" sortActionDescription="Nach Adresse sortieren">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="address" sortActionDescription="Nach Adresse sortieren">
             Adresse
         </th>
         <td mat-cell *matCellDef="let element">{{ element.street }} {{ element.streetNo }}
@@ -39,8 +39,8 @@
 <mat-paginator [pageSizeOptions]="[10]"
                [length]="length"
                (page)="handlePageEvent($event)"
-               [pageSize]="pageSize"
-               [pageIndex]="pageIndex"
+               [pageSize]="currentPageSize"
+               [pageIndex]="currentPageIndex"
                showFirstLastButtons
                aria-label="Select page of periodic elements">
 </mat-paginator>

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<PartnerJsonld>;
     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<PartnerJsonld>(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<PartnerJsonld>(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;
 }