feat(pagination): support pagination custom suffix unit(#INFR-12336)

atinc · May 23, 2024 · d32fb90 · d32fb90
1 parent 8045354
commit d32fb90
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 7 deletions.
diff --git a/src/pagination/examples/total/total.component.html b/src/pagination/examples/total/total.component.html
@@ -1,17 +1,37 @@
 <h5>Default</h5>
-<thy-pagination [thySize]="'sm'" [(thyPageIndex)]="currentIndex" [thyPageSize]="10" [thyTotal]="203" [thyShowTotal]="true"></thy-pagination>
+<thy-pagination
+  [thySize]="'sm'"
+  [(thyPageIndex)]="currentIndex"
+  [thyPageSize]="10"
+  [thyTotal]="203"
+  [thyShowTotal]="true"
+  [thyShowSizeChanger]="true"></thy-pagination>
 <br />
 <br />
+
 <h5>Custom Template</h5>
 <thy-pagination
   [thySize]="'sm'"
   [(thyPageIndex)]="currentIndex"
   [thyPageSize]="10"
   [thyTotal]="203"
+  thySuffixUnit="组"
   [thyShowTotal]="totalTemplate"
-></thy-pagination>
+  [thyShowSizeChanger]="true"></thy-pagination>
 <ng-template #totalTemplate let-range="range" let-total>
   <div>
-    {{ range.from }}-{{ range.to }} of {{ total }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 共<span class="text-primary"> {{ total }} </span>条
+    {{ range.from }}-{{ range.to }} of {{ total }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 共<span class="text-primary"> {{ total }} </span>组
   </div>
 </ng-template>
+<br />
+<br />
+
+<h5>Custom Suffix Unit</h5>
+<thy-pagination
+  [thySize]="'sm'"
+  [thyPageIndex]="5"
+  [thyPageSize]="10"
+  [thyTotal]="203"
+  [thyShowSizeChanger]="true"
+  [thyShowTotal]="true"
+  thySuffixUnit="个"></thy-pagination>
diff --git a/src/pagination/pagination.class.ts b/src/pagination/pagination.class.ts
@@ -84,6 +84,11 @@ export interface ThyPaginationConfigModel {
     showSizeChanger?: boolean;
 
     pageSizeOptions?: number[];
+
+    /**
+     * 设置后缀单位
+     */
+    suffixUnit?: string;
 }
 
 export interface ThyPaginationChangedEvent {

diff --git a/src/pagination/pagination.component.html b/src/pagination/pagination.component.html
@@ -3,10 +3,10 @@
     <ng-container *ngIf="!isTemplateRef(showTotal); else totalTemplate">
       <ng-container *ngIf="total > 0">
         <div class="mr-3">
-          第<span class="number"> {{ range.from }}-{{ range.to }} </span>条
+          第<span class="number"> {{ range.from }}-{{ range.to }} </span>{{ config.suffixUnit }}
         </div>
         <div>
-          共<span class="number"> {{ total }} </span>条
+          共<span class="number"> {{ total }} </span>{{ config.suffixUnit }}
         </div>
       </ng-container>
     </ng-container>
@@ -21,7 +21,7 @@
           class="page-size-option"
           *ngFor="let option of config.pageSizeOptions"
           [thyValue]="option"
-          [thyLabelText]="option + ' 条/页'"></thy-option>
+          [thyLabelText]="option + ' ' + config.suffixUnit + '/页'"></thy-option>
       </thy-select>
     </div>
     <ul class="thy-pagination-pages">

diff --git a/src/pagination/pagination.component.ts b/src/pagination/pagination.component.ts
@@ -177,6 +177,17 @@ export class ThyPagination implements OnInit {
      */
     @Input({ alias: 'thyHideOnSinglePage', transform: booleanAttribute }) hideOnSinglePage: boolean;
 
+    /**
+     * 分页器单位
+     * @default 条
+     */
+    @Input('thySuffixUnit')
+    set suffixUnit(value: string) {
+        if (value) {
+            this.config.suffixUnit = value;
+        }
+    }
+
     /**
      * 页码改变的回调
      */

diff --git a/src/pagination/pagination.config.ts b/src/pagination/pagination.config.ts
@@ -21,7 +21,8 @@ export const PaginationDefaultConfig: ThyPaginationConfigModel = {
     nextIcon: 'angle-right',
     totalPagesFormat: '共{total}页',
     showSizeChanger: false,
-    pageSizeOptions: [10, 20, 50, 100]
+    pageSizeOptions: [10, 20, 50, 100],
+    suffixUnit: '条'
 };
 export interface ThyPaginationConfig {
     main?: ThyPaginationConfigModel;

diff --git a/src/pagination/test/pagination.spec.ts b/src/pagination/test/pagination.spec.ts
@@ -50,6 +50,7 @@ class PaginationBasicComponent {
             [thyShowQuickJumper]="canQuickJump"
             (thyPageIndexChange)="pageIndexChange($event)"
             [thyShowSizeChanger]="showSizeChanger"
+            [thySuffixUnit]="suffixUnit"
             [thySize]="size"
             [thyPageSizeOptions]="[10, 20, 50, 100]"
             (thyPageSizeChanged)="pageSizeChanged($event)"></thy-pagination>
@@ -68,6 +69,8 @@ class PaginationTestComponent {
 
     size = '';
 
+    suffixUnit = '';
+
     pageIndexChange = jasmine.createSpy('pageIndexChange callback');
 
     pageSizeChanged = jasmine.createSpy('pageSizeChanged callback');
@@ -181,6 +184,25 @@ describe('ThyPagination', () => {
             expect(pagination.pageIndex).toEqual(3);
             expect(inputElement.value).toEqual('');
         }));
+
+        it('should suffixUnit can works', fakeAsync(() => {
+            componentInstance.showSizeChanger = true;
+            componentInstance.pagination.pageSize = 50;
+            fixture.detectChanges();
+            expect(paginationElement.querySelectorAll('.thy-pagination-size').length).toEqual(1);
+
+            (paginationElement.querySelectorAll('.form-control-custom')[0] as HTMLElement).click();
+            fixture.detectChanges();
+            const el = document.querySelector('.thy-select-dropdown-options') as HTMLElement;
+            expect(el.querySelectorAll('.thy-option-item')[0]?.querySelectorAll('.text-truncate')[0]?.innerHTML).toEqual('10 条/页');
+
+            componentInstance.suffixUnit = '组';
+            fixture.detectChanges();
+            (paginationElement.querySelectorAll('.form-control-custom')[0] as HTMLElement).click();
+            fixture.detectChanges();
+            const option = document.querySelector('.thy-select-dropdown-options') as HTMLElement;
+            expect(option.querySelectorAll('.thy-option-item')[0]?.querySelectorAll('.text-truncate')[0]?.innerHTML).toEqual('10 组/页');
+        }));
     });
 
     describe('total', () => {