userpages + filter improvments

src/app/pages/settings/settings.page.html

@@ -19,7 +19,8 @@
         <mat-divider></mat-divider>
         <p>{{'settings.pagesettings' | i18n}}</p>
         <mat-form-field>
-          <button *ngIf="user.settings.gravity || form.get('gravity').value != settings.defaultGravity" matPrefix
+          <button matTooltip="{{'settings.gravity.reset' | i18n:settings.defaultGravity}}"
+            *ngIf="user.settings.gravity || form.get('gravity').value != settings.defaultGravity" matPrefix
             mat-icon-button (click)="resetGravity()">
             <mat-icon>cancel</mat-icon>
           </button>
@@ -33,9 +34,9 @@
           </mat-hint>
         </mat-form-field>
         <mat-form-field>
-          <button
-            *ngIf="user.settings.entryDelay || form.get('entryDelay').value != settings.defaultEntryDelay"
-            matPrefix mat-icon-button (click)="resetEntryDelay()">
+          <button matTooltip="{{'settings.entryDelay.reset' | i18n:settings.defaultEntryDelay}}"
+            *ngIf="user.settings.entryDelay || form.get('entryDelay').value != settings.defaultEntryDelay" matPrefix
+            mat-icon-button (click)="resetEntryDelay()">
             <mat-icon>cancel</mat-icon>
           </button>
           <input type="number" min="0" max="15" step="1" matInput placeholder="{{'settings.entryDelay' | i18n}}"
@@ -48,7 +49,7 @@
           </mat-hint>
         </mat-form-field>
         <mat-form-field>
-          <button
+          <button matTooltip="{{'settings.commentDelay.reset' | i18n:settings.defaultCommentDelay}}"
             *ngIf="user.settings.commentDelay || form.get('commentDelay').value != settings.defaultCommentDelay"
             matPrefix mat-icon-button (click)="resetCommentDelay()">
             <mat-icon>cancel</mat-icon>
@@ -62,6 +63,19 @@
             {{'settings.commentDelay.zero' | i18n}}
           </mat-hint>
         </mat-form-field>
+
+        <mat-form-field>
+          <button matTooltip="{{'settings.pageSize.reset' | i18n:settings.defaultPageSize}}"
+            *ngIf="user.settings.pageSize || form.get('pageSize').value != settings.defaultPageSize" matPrefix
+            mat-icon-button (click)="resetPageSize()">
+            <mat-icon>cancel</mat-icon>
+          </button>
+          <input type="number" min="1" max="100" step="1" matInput placeholder="{{'settings.pageSize' | i18n}}"
+            formControlName="pageSize">
+          <mat-hint *ngIf="form.get('pageSize').value != 0">
+            {{'settings.pageSize.hint' | i18n}}
+          </mat-hint>
+        </mat-form-field>
       </mat-card-content>
       <mat-card-actions>
         <button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">

src/app/pages/settings/settings.page.ts

@@ -1,15 +1,16 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';
 
 import { UserService } from '../../services/user.service';
 import { SettingsService } from 'src/app/services/settings.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'page-settings',
   templateUrl: './settings.page.html',
   styleUrls: [ './settings.page.scss' ]
 })
-export class PageSettings implements OnInit {
+export class PageSettings implements OnInit, OnDestroy {
 
   auth: any;
   user: any;
@@ -18,6 +19,7 @@ export class PageSettings implements OnInit {
   form: FormGroup;
   settings: any;
   @ViewChild('formDirective') private formDirective: NgForm;
+  settingsSubscription: Subscription;
 
   constructor(
     private userService: UserService,
@@ -32,6 +34,7 @@ export class PageSettings implements OnInit {
       gravity: [ '', Validators.nullValidator ],
       entryDelay: [ '', Validators.nullValidator ],
       commentDelay: [ '', Validators.nullValidator ],
+      pageSize: [ '', Validators.nullValidator ],
     });
 
     this.form.get('username').disable();
@@ -45,15 +48,18 @@ export class PageSettings implements OnInit {
       this.form.get('email').setValue(this.user.email);
       this.form.get('about').setValue(this.user.about);
 
-      this.settingsService.settings.subscribe((settings) => {
+      this.settingsSubscription = this.settingsService.settings.subscribe((settings) => {
         this.settings = settings;
         this.form.get('gravity').setValue(this.user.settings.gravity || this.settings.defaultGravity);
         this.form.get('entryDelay').setValue(this.user.settings.entryDelay || this.settings.defaultEntryDelay);
         this.form.get('commentDelay').setValue(this.user.settings.commentDelay || this.settings.defaultCommentDelay);
+        this.form.get('pageSize').setValue(this.user.settings.pageSize || this.settings.defaultPageSize);
       });
     })
+  }
 
-
+  ngOnDestroy(): void {
+    this.settingsSubscription.unsubscribe();
   }
 
   hasError(controlName: string): boolean {
@@ -75,6 +81,11 @@ export class PageSettings implements OnInit {
     this.form.get('commentDelay').setValue(this.settings.defaultCommentDelay);
   }
 
+  resetPageSize(): void {
+    this.user.settings.pageSize = null;
+    this.form.get('pageSize').setValue(this.settings.defaultPageSize);
+  }
+
   save(): void {
     if (this.working) {
       return;
@@ -108,6 +119,12 @@ export class PageSettings implements OnInit {
       this.user.settings.commentDelay = this.form.get('commentDelay').value;
     }
 
+    if (this.form.get('pageSize').value != this.settings.defaultPageSize && !this.user.settings.pageSize) {
+      this.user.settings.pageSize = this.form.get('pageSize').value;
+    } else if (this.user.settings.pageSize) {
+      this.user.settings.pageSize = this.form.get('pageSize').value;
+    }
+
     this.userService.update(this.user).subscribe((data) => {
       this.user = data;
       if (!this.user.settings) {
@@ -115,6 +132,7 @@ export class PageSettings implements OnInit {
       }
       this.working = false;
       this.success = true;
+      this.settingsService.getSettings();
     }, (error) => {
       this.working = false;
       if (error.status == 422) {