fix(ui): limit pagination count, add filters on add consumer modal

ovh · Jan 10, 2020 · 6b76c90 · 6b76c90
1 parent 3b7e55c
commit 6b76c90
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 11 deletions.
diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts
@@ -64,6 +64,7 @@ import { ScrollviewComponent } from './scrollview/scrollview.component';
 import { SharedService } from './shared.service';
 import { StatusIconComponent } from './status/status.component';
 import { DataTableComponent, SelectorPipe, SelectPipe } from './table/data-table.component';
+import { PaginationComponent } from './table/pagination.component';
 import { TabsComponent } from './tabs/tabs.component';
 import { ToastService } from './toast/ToastService';
 import { UsageApplicationsComponent } from './usage/applications/usage.applications.component';
@@ -148,6 +149,7 @@ import { ZoneComponent } from './zone/zone.component';
         ConfirmModalComponent,
         CutPipe,
         DataTableComponent,
+        PaginationComponent,
         DeleteButtonComponent,
         DeleteModalComponent,
         DiffItemComponent,
@@ -327,6 +329,7 @@ import { ZoneComponent } from './zone/zone.component';
         SelectorPipe,
         SelectPipe,
         DataTableComponent,
+        PaginationComponent,
         WorkflowTemplateApplyFormComponent,
         WorkflowTemplateApplyModalComponent,
         WorkflowTemplateBulkModalComponent,

diff --git a/ui/src/app/shared/table/data-table.html b/ui/src/app/shared/table/data-table.html
@@ -71,7 +71,9 @@
                             {{ c.selector.value }}
                         </div>
                     </div>
-                    <ng-container *ngSwitchCase="'text-html'"><pre [innerHTML]="c.selector"></pre></ng-container>
+                    <ng-container *ngSwitchCase="'text-html'">
+                        <pre [innerHTML]="c.selector"></pre>
+                    </ng-container>
                     <ng-container *ngSwitchCase="'time-ago'"> {{c.selector | amTimeAgo}} </ng-container>
                     <ng-container *ngSwitchCase="'date'"> {{c.selector | amCalendar}} </ng-container>
                     <button class="ui primary button small" *ngSwitchCase="'button'" (click)="c.selector.click()">{{c.selector.title
@@ -80,7 +82,8 @@
                         [color]="c.selector.color ? c.selector.color : 'primary'" (event)="c.selector.click()"
                         [title]="c.selector.title">
                     </app-confirm-button>
-                    <span class="ui label" [ngClass]="c.selector.class" *ngSwitchCase="'label'">{{c.selector.value | translate}}</span>
+                    <span class="ui label" [ngClass]="c.selector.class"
+                        *ngSwitchCase="'label'">{{c.selector.value | translate}}</span>
                     <ng-container *ngSwitchCase="'router-link-with-icons'">
                         <a class="ui" [routerLink]="c.selector.link">{{c.selector.value}}</a>
                         <span *ngFor="let i of c.selector.icons" suiPopup [popupText]="i.label | translate">
@@ -102,7 +105,8 @@
                     </span>
                     <span *ngSwitchCase="'text-icons'">
                         {{c.selector.value | translate}}
-                        <span *ngFor="let i of c.selector.icons" suiPopup [popupText]="i.label | translate" popupTrigger="{{i.trigger ? i.trigger : 'hover'}}">
+                        <span *ngFor="let i of c.selector.icons" suiPopup [popupText]="i.label | translate"
+                            popupTrigger="{{i.trigger ? i.trigger : 'hover'}}">
                             {{' '}}<i [ngClass]="i.class" title="{{i.title | translate }}"></i>
                         </span>
                     </span>
@@ -121,11 +125,10 @@
     <tfoot tfoot *ngIf="nbElementsByPage && pagesCount > 1">
         <tr>
             <td [colSpan]="columnsCount">
-                <sui-pagination class="ui right floated" [collectionSize]="filteredData.length"
-                    [pageSize]="nbElementsByPage" [maxSize]="20" [hasEllipses]="true" (pageChange)="pageChange($event)"
-                    [page]="currentPage">
-                </sui-pagination>
+                <app-pagination [collectionSize]="filteredData.length" [pageSize]="nbElementsByPage" [maxSize]="20"
+                    [hasEllipses]="true" (pageChange)="pageChange($event)" [page]="currentPage">
+                </app-pagination>
             </td>
         </tr>
     </tfoot>
-</table>
+</table>
diff --git a/ui/src/app/shared/table/pagination.component.ts b/ui/src/app/shared/table/pagination.component.ts
@@ -0,0 +1,59 @@
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    ElementRef,
+    EventEmitter,
+    HostListener,
+    Input,
+    OnChanges,
+    Output,
+    ViewChild
+} from '@angular/core';
+
+@Component({
+    selector: 'app-pagination',
+    templateUrl: './pagination.html',
+    styleUrls: ['./pagination.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PaginationComponent implements OnChanges, AfterViewInit {
+    @ViewChild('paginationWrapper', { static: false }) paginationWrapper: ElementRef;
+    @Input() collectionSize: number;
+    @Input() pageSize: number;
+    @Input() page: number;
+    @Output() pageChange = new EventEmitter<number>();
+
+    maxSize = 10;
+
+    constructor(public _cd: ChangeDetectorRef) { }
+
+    ngAfterViewInit() {
+        this.resize();
+    }
+
+    ngOnChanges() {
+        this.resize();
+    }
+
+    onPageChange(n: number) {
+        this.pageChange.emit(n);
+    }
+
+    @HostListener('window:resize', ['$event'])
+    onResize(event) {
+        this.resize();
+    }
+
+    resize() {
+        if (this.paginationWrapper) {
+            let wrapperWidth = this.paginationWrapper.nativeElement.clientWidth;
+            // 75px is approximately the size of a button, 4 buttons are removed (left, right and ellipsis)
+            let maxPage = Math.trunc(wrapperWidth / 65) - 4;
+            this.maxSize = maxPage < 10 ? maxPage : 10;
+            this.maxSize = this.maxSize < 1 ? 1 : this.maxSize;
+            this._cd.detectChanges();
+        }
+    }
+}
diff --git a/ui/src/app/shared/table/pagination.html b/ui/src/app/shared/table/pagination.html
@@ -0,0 +1,5 @@
+<div #paginationWrapper>
+    <sui-pagination class="ui right floated" [collectionSize]="collectionSize" [pageSize]="pageSize" [maxSize]="maxSize"
+        [hasEllipses]="true" (pageChange)="onPageChange($event)" [page]="page">
+    </sui-pagination>
+</div>
diff --git a/ui/src/app/shared/table/pagination.scss b/ui/src/app/shared/table/pagination.scss
@@ -0,0 +1 @@
+@import '../../../common';
diff --git a/ui/src/app/views/settings/user/consumer-create-modal/consumer-create-modal.component.ts b/ui/src/app/views/settings/user/consumer-create-modal/consumer-create-modal.component.ts
@@ -172,4 +172,18 @@ export class ConsumerCreateModalComponent {
     confirmCopy() {
         this._toast.success('', this._translate.instant('auth_value_copied'));
     }
+
+    filterGroups(f: string) {
+        const lowerFilter = f.toLowerCase();
+        return (g: Group) => {
+            return g.name.toLowerCase().indexOf(lowerFilter) !== -1;
+        }
+    }
+
+    filterScopes(f: string) {
+        const lowerFilter = f.toLowerCase();
+        return (s: AuthScope) => {
+            return s.value.toLowerCase().indexOf(lowerFilter) !== -1;
+        }
+    }
 }
diff --git a/ui/src/app/views/settings/user/consumer-create-modal/consumer-create-modal.html b/ui/src/app/views/settings/user/consumer-create-modal/consumer-create-modal.html
@@ -20,14 +20,14 @@
                         <div class="fields">
                             <div class="eight wide field">
                                 <label>{{'user_auth_groups' | translate}}</label>
-                                <app-data-table [withSelect]="selectGroupFunc"
+                                <app-data-table [withFilter]="filterGroups" [withSelect]="selectGroupFunc"
                                     (selectChange)="selectGroupChange($event)" [withPagination]="5"
                                     [columns]="columnsGroups" [data]="groups" [loading]="loadingGroups">
                                 </app-data-table>
                             </div>
                             <div class="eight wide field">
                                 <label>{{'user_auth_scopes' | translate}}</label>
-                                <app-data-table [withSelect]="selectScopeFunc"
+                                <app-data-table [withFilter]="filterScopes" [withSelect]="selectScopeFunc"
                                     (selectChange)="selectScopeChange($event)" [withPagination]="5"
                                     [columns]="columnsScopes" [data]="scopes" [loading]="loadingScopes">
                                 </app-data-table>
@@ -49,4 +49,4 @@
             </div>
         </div>
     </div>
-</ng-template>
+</ng-template>