diff --git a/projects/ars/src/lib/ars.module.ts b/projects/ars/src/lib/ars.module.ts
index 03efa211e66ea89466d009bff2aa9662e512889a..2d6b38838138c8a8952b3399fe009080c073c9de 100644
--- a/projects/ars/src/lib/ars.module.ts
+++ b/projects/ars/src/lib/ars.module.ts
@@ -31,6 +31,8 @@ import { TranslateModule } from '@ngx-translate/core';
import { MatMenuModule } from '@angular/material/menu';
import { MatInputModule } from '@angular/material/input';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { ArsMatPaginatorComponent } from './components/content/paginator/ars-mat-paginator/ars-mat-paginator.component';
+import { MatPaginatorModule } from '@angular/material/paginator';
@NgModule({
declarations: [
@@ -55,20 +57,22 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
MatToggleComponent,
MatChipListComponent,
MatDatePickerComponent,
- MatMenuItemComponent
- ],
- imports:[
- MatIconModule,
- MatButtonModule,
- CommonModule,
- MatChipsModule,
- MatFormFieldModule,
- MatDatepickerModule,
- TranslateModule,
- MatMenuModule,
- MatInputModule,
- MatSlideToggleModule
+ MatMenuItemComponent,
+ ArsMatPaginatorComponent
],
+ imports:[
+ MatIconModule,
+ MatButtonModule,
+ CommonModule,
+ MatChipsModule,
+ MatFormFieldModule,
+ MatDatepickerModule,
+ TranslateModule,
+ MatMenuModule,
+ MatInputModule,
+ MatSlideToggleModule,
+ MatPaginatorModule
+ ],
exports:[
ArsComponent,
FullScreenOverlayComponent,
@@ -85,7 +89,8 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
ButtonWrapperDirective,
ButtonBaseDirective,
MaterialBtnComponent,
- ArsComposeHostDirective
+ ArsComposeHostDirective,
+ ArsMatPaginatorComponent
]
})
export class ArsModule { }
diff --git a/projects/ars/src/lib/components/content/paginator/ars-mat-paginator/ars-mat-paginator.component.html b/projects/ars/src/lib/components/content/paginator/ars-mat-paginator/ars-mat-paginator.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..052cfa9bc1c73d6c1971b8a987b99b6b726fcac7
--- /dev/null
+++ b/projects/ars/src/lib/components/content/paginator/ars-mat-paginator/ars-mat-paginator.component.html
@@ -0,0 +1,11 @@
+<mat-paginator
+ class="paginator"
+ [pageIndex]="pageIndex"
+ [pageSize]="pageSize"
+ (page)="page.emit($event)"
+ [disabled]="disabled"
+ [pageSizeOptions]="pageSizeOptions"
+ [length]="length"
+ [hidePageSize]="hidePageSize"
+ [showFirstLastButtons]="showFirstLastButtons"
+></mat-paginator>
diff --git a/projects/ars/src/lib/components/content/paginator/ars-mat-paginator/ars-mat-paginator.component.scss b/projects/ars/src/lib/components/content/paginator/ars-mat-paginator/ars-mat-paginator.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c375310ba69cc1340600ccf120b5dd4c17bec523
--- /dev/null
+++ b/projects/ars/src/lib/components/content/paginator/ars-mat-paginator/ars-mat-paginator.component.scss
@@ -0,0 +1,25 @@
+:host ::ng-deep{
+ .mat-icon-button.mat-button-disabled.mat-button-disabled{
+ color:var(--on-background);
+ opacity:0.2;//recommend the use of rgba instead of hex in theme config to avoid this
+ }
+ .mat-icon-button{
+ color:var(--on-background);
+ }
+ .mat-select-arrow{
+ color:var(--on-background);
+ }
+ .mat-select-value-text{
+ color:var(--on-background);
+ }
+ .mat-form-field-underline{
+ background-color:var(--on-background);
+ }
+ .mat-paginator-outer-container{
+ color:var(--on-background);
+ }
+ .mat-paginator{
+ background-color:transparent;
+ }
+}
+
diff --git a/projects/ars/src/lib/components/content/paginator/ars-mat-paginator/ars-mat-paginator.component.ts b/projects/ars/src/lib/components/content/paginator/ars-mat-paginator/ars-mat-paginator.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..429e459b9a33cb676bf726e4ed439c3c8b7ee38c
--- /dev/null
+++ b/projects/ars/src/lib/components/content/paginator/ars-mat-paginator/ars-mat-paginator.component.ts
@@ -0,0 +1,77 @@
+import { AfterViewInit, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { MatPaginator, MatPaginatorIntl, PageEvent } from '@angular/material/paginator';
+import { LanguageService } from '../../../../../../../../src/app/services/util/language.service';
+import { HttpClient } from '@angular/common/http';
+
+export interface ArsMatPaginatorTheme{
+ buttonColor: string;
+}
+
+@Component({
+ selector:'ars-mat-paginator',
+ templateUrl:'./ars-mat-paginator.component.html',
+ styleUrls:['./ars-mat-paginator.component.scss']
+})
+export class ArsMatPaginatorComponent implements OnInit, AfterViewInit{
+
+ @Input() pageIndex: number;
+ @Input() pageSize: number;
+ @Input() disabled: boolean;
+ @Input() pageSizeOptions: number[];
+ @Input() length: number;
+ @Input() hidePageSize: boolean;
+ @Input() showFirstLastButtons: boolean;
+ @Output() page: EventEmitter<PageEvent> = new EventEmitter<PageEvent>();
+ currentLang: string;
+
+ @Input() colors: ArsMatPaginatorTheme;
+
+ @ViewChild(MatPaginator) paginator: MatPaginator;
+
+ constructor(
+ public lang: LanguageService,
+ public http: HttpClient
+ ){
+ this.lang.langEmitter.subscribe(lang => {
+ this.setLang(lang);
+ });
+ }
+
+ setLang(lang: string){
+ this.currentLang = lang;
+ this.http.get('/assets/i18n/ars-lib/' + this.currentLang + '.json').subscribe(translation => {
+ const paginatorIntl = new MatPaginatorIntl();
+ paginatorIntl.itemsPerPageLabel = translation['paginator']['itemsPerPageLabel'];
+ paginatorIntl.nextPageLabel = translation['paginator']['nextPageLabel'];
+ paginatorIntl.previousPageLabel = translation['paginator']['previousPageLabel'];
+ paginatorIntl.firstPageLabel = translation['paginator']['firstPageLabel'];
+ paginatorIntl.lastPageLabel = translation['paginator']['lastPageLabel'];
+ paginatorIntl.getRangeLabel = this.createRangeLabel(translation);
+ this.paginator._intl=paginatorIntl;
+ this.paginator._changePageSize(this.pageSize);
+ });
+ }
+
+ ngOnInit(): void{
+ }
+
+ ngAfterViewInit(){
+ this.setLang(localStorage.getItem('currentLang'));
+ }
+
+ private createRangeLabel(translation: any){
+ return (page: number, pageSize: number, length: number) => {
+ if (length === 0 || pageSize === 0){
+ return translation['paginator']['rangePageLabel1'];
+ }
+ length = Math.max(length, 0);
+ const startIndex = page * pageSize;
+ const endIndex = startIndex < length?Math.min(startIndex + pageSize, length):startIndex + pageSize;
+ return translation['paginator']['rangePageLabel2']
+ .replace('%start',startIndex)
+ .replace("%end",endIndex)
+ .replace("%length",length);
+ };
+ }
+
+}
diff --git a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.html b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.html
index 667de875d1b8db7466fa5b949e255b1f1574cc2d..7b52aea060be2052e558992e4682f0bc588f1ea8 100644
--- a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.html
+++ b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.html
@@ -125,6 +125,16 @@
(clickedUserNumber)="clickedUserNumber($event)">
</app-comment>
</div>
+<ars-mat-paginator
+ *ngIf="(hideCommentsList ? filteredComments : commentsFilteredByTime).length>0"
+ [pageSize]="5"
+ (page)="handlePageEvent($event)"
+ [showFirstLastButtons]="showFirstLastButtons"
+ [pageSizeOptions]="pageSizeOptions"
+ [pageIndex]="pageIndex"
+ [length]="(hideCommentsList ? filteredComments : commentsFilteredByTime).length"></ars-mat-paginator>
+<ars-row [height]="64">
+</ars-row>
<div *ngIf="comments && (commentsFilteredByTime.length < 1 && period === 'time-all' || comments.length === 0) && !isLoading"
fxLayout="row"
diff --git a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.ts b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.ts
index b062e1ea34d777f5dcfbd7785adb485c5c9bd8d9..96ad723dc770ba147dde5249889d7451553a3202 100644
--- a/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.ts
+++ b/src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.ts
@@ -22,6 +22,7 @@ import { Export } from '../../../models/export';
import { NotificationService } from '../../../services/util/notification.service';
import { BonusTokenService } from '../../../services/http/bonus-token.service';
import { CommentFilter, Period } from '../../../utils/filter-options';
+import { PageEvent } from '@angular/material/paginator';
@Component({
@@ -66,6 +67,10 @@ export class ModeratorCommentListComponent implements OnInit, OnDestroy {
period: Period = Period.twoWeeks;
fromNow: number;
headerInterface = null;
+ pageIndex = 0;
+ pageSize = 10;
+ pageSizeOptions = [5, 10, 25];
+ showFirstLastButtons = true;
constructor(
private commentService: CommentService,
@@ -83,6 +88,11 @@ export class ModeratorCommentListComponent implements OnInit, OnDestroy {
langService.langEmitter.subscribe(lang => translateService.use(lang));
}
+ handlePageEvent(e:PageEvent){
+ this.pageIndex = e.pageIndex;
+ this.pageSize = e.pageSize;
+ }
+
initNavigation() {
const navigation = {};
const nav = (b, c) => navigation[b] = c;
diff --git a/src/app/components/moderator/moderator.module.ts b/src/app/components/moderator/moderator.module.ts
index 3d17c18bf5b4d765ce070f607cbddbe37660551d..0131f408b1f31611cd5c7da3c6494c6308b01696 100644
--- a/src/app/components/moderator/moderator.module.ts
+++ b/src/app/components/moderator/moderator.module.ts
@@ -10,23 +10,25 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { MarkdownModule } from 'ngx-markdown';
+import { ArsModule } from '../../../../projects/ars/src/lib/ars.module';
@NgModule({
- imports: [
- CommonModule,
- ModeratorRoutingModule,
- EssentialsModule,
- SharedModule,
- TranslateModule.forChild({
- loader: {
- provide: TranslateLoader,
- useFactory: (HttpLoaderFactory),
- deps: [HttpClient]
- },
- isolate: true
- }),
- MarkdownModule
- ],
+ imports:[
+ CommonModule,
+ ModeratorRoutingModule,
+ EssentialsModule,
+ SharedModule,
+ TranslateModule.forChild({
+ loader:{
+ provide:TranslateLoader,
+ useFactory:(HttpLoaderFactory),
+ deps:[HttpClient]
+ },
+ isolate:true
+ }),
+ MarkdownModule,
+ ArsModule
+ ],
declarations: [
RoomModeratorPageComponent,
ModeratorCommentListComponent,
diff --git a/src/app/components/shared/comment-list/comment-list.component.html b/src/app/components/shared/comment-list/comment-list.component.html
index facf1272289e5d4dee4ceff8fc4676fcfb11ad60..28de46839e532382f486ef32f0646a69d7e1ff1f 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -280,14 +280,14 @@
(clickedOnKeyword)="clickedOnKeyword($event)"
(votedComment)="votedComment($event)">
</app-comment>
- <mat-paginator class="mat-paginator"
- [pageSize]="5"
- (page)="handlePageEvent($event)"
- [showFirstLastButtons]="showFirstLastButtons"
- [pageSizeOptions]="pageSizeOptions"
- [pageIndex]="pageIndex"
- [color]="'primary'"
- [length]="(hideCommentsList ? filteredComments : commentsFilteredByTime).length"></mat-paginator>
+ <ars-mat-paginator
+ *ngIf="(hideCommentsList ? filteredComments : commentsFilteredByTime).length>0"
+ [pageSize]="5"
+ (page)="handlePageEvent($event)"
+ [showFirstLastButtons]="showFirstLastButtons"
+ [pageSizeOptions]="pageSizeOptions"
+ [pageIndex]="pageIndex"
+ [length]="(hideCommentsList ? filteredComments : commentsFilteredByTime).length"></ars-mat-paginator>
<ars-row [height]="64">
</ars-row>
diff --git a/src/app/components/shared/comment-list/comment-list.component.scss b/src/app/components/shared/comment-list/comment-list.component.scss
index 95eea764c51b99e2cdf661131e70f2fdc5fb5769..0406d467b2dcac776f2ed43c287f84adbcf72337 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -275,8 +275,3 @@ h3 {
h1 {
color: red;
}
-
-.mat-paginator{
- background-color:transparent;
- color:var(--on-background);
-}
diff --git a/src/assets/i18n/ars-lib/de.json b/src/assets/i18n/ars-lib/de.json
new file mode 100644
index 0000000000000000000000000000000000000000..bbd3038ca3e2432b2a5e15b948833f0b39829284
--- /dev/null
+++ b/src/assets/i18n/ars-lib/de.json
@@ -0,0 +1,11 @@
+{
+ "paginator": {
+ "itemsPerPageLabel": "Anzahl Kommentare",
+ "nextPageLabel": "Nächste",
+ "previousPageLabel": "Vorherige",
+ "firstPageLabel": "Erste",
+ "lastPageLabel": "Letzte",
+ "rangePageLabel1": "null",
+ "rangePageLabel2": "%start - %end von %length"
+ }
+}
diff --git a/src/assets/i18n/ars-lib/en.json b/src/assets/i18n/ars-lib/en.json
new file mode 100644
index 0000000000000000000000000000000000000000..85f1d80c9480ec4ea22a8b7e3cbb66ed828e253f
--- /dev/null
+++ b/src/assets/i18n/ars-lib/en.json
@@ -0,0 +1,12 @@
+{
+ "paginator": {
+ "itemsPerPageLabel": "Number of Comments",
+ "nextPageLabel": "Next",
+ "previousPageLabel": "Previous",
+ "firstPageLabel": "First",
+ "lastPageLabel": "Last",
+ "rangePageLabel1": "null",
+ "rangePageLabel2": "%start - %end of %length"
+ }
+}
+