From 07452cdb8354dc00f0e9dc66a6460af6f077b5f1 Mon Sep 17 00:00:00 2001
From: Lukas Haase <lukas.haase@mni.thm.de>
Date: Fri, 8 Oct 2021 15:21:58 +0200
Subject: [PATCH] add i18n, set style
---
projects/ars/src/lib/ars.module.ts | 33 ++++----
.../ars-mat-paginator.component.html | 11 +++
.../ars-mat-paginator.component.scss | 25 ++++++
.../ars-mat-paginator.component.ts | 77 +++++++++++++++++++
.../moderator-comment-list.component.html | 10 +++
.../moderator-comment-list.component.ts | 10 +++
.../components/moderator/moderator.module.ts | 32 ++++----
.../comment-list/comment-list.component.html | 16 ++--
.../comment-list/comment-list.component.scss | 5 --
src/assets/i18n/ars-lib/de.json | 11 +++
src/assets/i18n/ars-lib/en.json | 12 +++
11 files changed, 200 insertions(+), 42 deletions(-)
create mode 100644 projects/ars/src/lib/components/content/paginator/ars-mat-paginator/ars-mat-paginator.component.html
create mode 100644 projects/ars/src/lib/components/content/paginator/ars-mat-paginator/ars-mat-paginator.component.scss
create mode 100644 projects/ars/src/lib/components/content/paginator/ars-mat-paginator/ars-mat-paginator.component.ts
create mode 100644 src/assets/i18n/ars-lib/de.json
create mode 100644 src/assets/i18n/ars-lib/en.json
diff --git a/projects/ars/src/lib/ars.module.ts b/projects/ars/src/lib/ars.module.ts
index 03efa211e..2d6b38838 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 000000000..052cfa9bc
--- /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 000000000..c375310ba
--- /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 000000000..429e459b9
--- /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 667de875d..7b52aea06 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 b062e1ea3..96ad723dc 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 3d17c18bf..0131f408b 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 facf12722..28de46839 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 95eea764c..0406d467b 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 000000000..bbd3038ca
--- /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 000000000..85f1d80c9
--- /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"
+ }
+}
+
--
GitLab