From 57d2bf97fb4fd03816a3d44dda32712c32c8ceaf Mon Sep 17 00:00:00 2001
From: _Bastler <_Bastler@bstly.de>
Date: Sun, 6 Jun 2021 17:09:09 +0200
Subject: [PATCH] add search + note

---
 src/app/material/autofocus.ts                 | 11 +++---
 .../form-login-totp.component.html            |  2 +-
 .../form-login/form-login.component.html      |  2 +-
 .../login-totp/login-totp.component.html      |  2 +-
 src/app/pages/login/login.component.html      |  2 +-
 .../pages/register/register.component.html    |  2 +-
 .../pages/services/services.component.html    |  3 +-
 src/app/pages/services/services.component.ts  |  2 +-
 src/app/pages/tokens/tokens.component.html    |  2 +-
 .../urlshortener/urlshortener.component.html  | 12 +++++++
 .../urlshortener/urlshortener.component.ts    | 34 +++++++++++++++----
 .../urlshortener/urlshortener.password.html   |  2 +-
 src/app/services/urlshortener.service.ts      |  4 +--
 src/app/ui/confirm/confirm.component.html     |  2 +-
 14 files changed, 60 insertions(+), 22 deletions(-)

diff --git a/src/app/material/autofocus.ts b/src/app/material/autofocus.ts
index f1df535..592312e 100644
--- a/src/app/material/autofocus.ts
+++ b/src/app/material/autofocus.ts
@@ -1,15 +1,18 @@
-import { Directive, OnInit } from '@angular/core';
+import { Directive, ElementRef, OnInit } from '@angular/core';
 import { MatInput } from '@angular/material/input';
 
 @Directive({
-  selector: '[matInputAutofocus]',
+  selector: '[matAutofocus]',
 })
 export class AutofocusDirective implements OnInit {
 
-  constructor(private matInput: MatInput) { }
+  constructor(private element: ElementRef) { }
 
   ngOnInit() {
-    setTimeout(() => this.matInput.focus());
+    setTimeout(() => {
+      this.element.nativeElement.focus();
+      this.element.nativeElement.scrollIntoView();
+    })
   }
 
 }
\ No newline at end of file
diff --git a/src/app/pages/form-login-totp/form-login-totp.component.html b/src/app/pages/form-login-totp/form-login-totp.component.html
index a09eed1..8e3938b 100644
--- a/src/app/pages/form-login-totp/form-login-totp.component.html
+++ b/src/app/pages/form-login-totp/form-login-totp.component.html
@@ -8,7 +8,7 @@
                 {{'security.2fa.totp.invalid' | i18n}}
             </mat-error>
             <mat-form-field>
-                <input id="code" name="code" matInput placeholder="{{'security.2fa.totp.code' | i18n}}" required matInputAutofocus>
+                <input id="code" name="code" matInput placeholder="{{'security.2fa.totp.code' | i18n}}" required matAutofocus>
                 <mat-error>
                     {{'security.2fa.totp.missing' | i18n}}
                 </mat-error>
diff --git a/src/app/pages/form-login/form-login.component.html b/src/app/pages/form-login/form-login.component.html
index 5d40839..94e232d 100644
--- a/src/app/pages/form-login/form-login.component.html
+++ b/src/app/pages/form-login/form-login.component.html
@@ -8,7 +8,7 @@
                 {{'login.invalid' | i18n}}
             </mat-error>
             <mat-form-field>
-                <input id="username" name="username" matInput placeholder="{{'username' | i18n}}" required matInputAutofocus>
+                <input id="username" name="username" matInput placeholder="{{'username' | i18n}}" required matAutofocus>
                 <mat-error>
                     {{'username.missing' | i18n}}
                 </mat-error>
diff --git a/src/app/pages/login-totp/login-totp.component.html b/src/app/pages/login-totp/login-totp.component.html
index 597807e..0edd1fa 100644
--- a/src/app/pages/login-totp/login-totp.component.html
+++ b/src/app/pages/login-totp/login-totp.component.html
@@ -7,7 +7,7 @@
             </mat-error>
             <mat-form-field>
                 <input id="code" name="code" matInput placeholder="{{'security.2fa.totp.code' | i18n}}" formControlName="code"
-                    required matInputAutofocus>
+                    required matAutofocus>
                 <mat-error>
                     {{'security.2fa.totp.missing' | i18n}}
                 </mat-error>
diff --git a/src/app/pages/login/login.component.html b/src/app/pages/login/login.component.html
index 382c26d..3736222 100644
--- a/src/app/pages/login/login.component.html
+++ b/src/app/pages/login/login.component.html
@@ -7,7 +7,7 @@
             </mat-error>
             <mat-form-field>
                 <input id="username" name="username" matInput placeholder="{{'username' | i18n}}"
-                    formControlName="username" required matInputAutofocus>
+                    formControlName="username" required matAutofocus>
                 <mat-error>
                     {{'username.missing' | i18n}}
                 </mat-error>
diff --git a/src/app/pages/register/register.component.html b/src/app/pages/register/register.component.html
index e4a1f9e..6cd46d7 100644
--- a/src/app/pages/register/register.component.html
+++ b/src/app/pages/register/register.component.html
@@ -7,7 +7,7 @@
             </mat-error>
             <mat-form-field>
                 <input matInput placeholder="{{'username' | i18n}}" formControlName="username"
-                    [(ngModel)]="model.username" required matInputAutofocus>
+                    [(ngModel)]="model.username" required matAutofocus>
                 <mat-error>
                     {{'username.error' | i18n}}
                 </mat-error>
diff --git a/src/app/pages/services/services.component.html b/src/app/pages/services/services.component.html
index ecdbecc..5fee43e 100644
--- a/src/app/pages/services/services.component.html
+++ b/src/app/pages/services/services.component.html
@@ -1,7 +1,8 @@
 <h3>{{'services' | i18n}}</h3>
 
-<p *ngIf="!services || services.length == 0">{{'services.empty' | i18n}}</p>
+<mat-progress-bar *ngIf="!services" mode="indeterminate"></mat-progress-bar>
 
+<p *ngIf="services && services.length == 0">{{'services.empty' | i18n}}</p>
 
 <table *ngIf="services && services.length > 0" mat-table matSort [dataSource]="services" (matSortChange)="sortData($event)" matSortActive="name" matSortDirection="asc">
 
diff --git a/src/app/pages/services/services.component.ts b/src/app/pages/services/services.component.ts
index 3f70fd9..22cb14a 100644
--- a/src/app/pages/services/services.component.ts
+++ b/src/app/pages/services/services.component.ts
@@ -10,7 +10,7 @@ import {I18nService} from '../../services/i18n.service';
 })
 export class ServicesComponent implements OnInit {
 
-  services = [];
+  services;
   serviceColumns = ["icon", "name", "text"];
 
   constructor(private serviceService: ServiceService, private i18n: I18nService) {}
diff --git a/src/app/pages/tokens/tokens.component.html b/src/app/pages/tokens/tokens.component.html
index 92e2bfa..c1b65a1 100644
--- a/src/app/pages/tokens/tokens.component.html
+++ b/src/app/pages/tokens/tokens.component.html
@@ -9,7 +9,7 @@
                 {{'tokens.redeemed' | i18n}}
             </mat-error>
             <mat-form-field>
-                <input matInput placeholder="{{'token' | i18n}}" formControlName="token" matInputAutofocus>
+                <input matInput placeholder="{{'token' | i18n}}" formControlName="token" matAutofocus>
                 <mat-error>
                     {{'tokens.provide-valid' | i18n}}
                 </mat-error>
diff --git a/src/app/pages/urlshortener/urlshortener.component.html b/src/app/pages/urlshortener/urlshortener.component.html
index 3067d62..d495448 100644
--- a/src/app/pages/urlshortener/urlshortener.component.html
+++ b/src/app/pages/urlshortener/urlshortener.component.html
@@ -1,6 +1,9 @@
 <h3>{{'urlshortener' | i18n}}</h3>
 
 <div *ngIf="shortenedUrls">
+  <mat-form-field>
+    <input matInput [formControl]="searchFormControl" placeholder="{{'urlshortener.search' | i18n}}">
+  </mat-form-field>
   <table mat-table matSort [dataSource]="shortenedUrls.content" (matSortChange)="updateSort($event)">
 
     <ng-container matColumnDef="share">
@@ -80,6 +83,14 @@
           </mat-error>
         </mat-form-field>
 
+        <mat-form-field>
+          <textarea matInput type="note" placeholder="{{'urlshortener.note' | i18n}}" formControlName="note"
+            [(ngModel)]="shortenedUrl.note"></textarea>
+          <mat-error>
+            {{'urlshortener.error.note' | i18n}}
+          </mat-error>
+        </mat-form-field>
+
         <mat-expansion-panel>
           <mat-expansion-panel-header>
             <mat-panel-title>
@@ -95,6 +106,7 @@
               </div>
             </mat-error>
           </mat-form-field>
+
           <mat-form-field>
             <input matInput type="password" placeholder="{{'password.confirm' | i18n}}" formControlName="password2"
               [(ngModel)]="shortenedUrl.password2">
diff --git a/src/app/pages/urlshortener/urlshortener.component.ts b/src/app/pages/urlshortener/urlshortener.component.ts
index b0b8793..4a34b34 100644
--- a/src/app/pages/urlshortener/urlshortener.component.ts
+++ b/src/app/pages/urlshortener/urlshortener.component.ts
@@ -1,7 +1,7 @@
 import {Component, OnInit, ViewChild, Inject} from '@angular/core';
 import {MatSnackBar} from '@angular/material/snack-bar';
 import {Sort} from '@angular/material/sort';
-import {FormBuilder, FormGroup, Validators, NgForm} from '@angular/forms';
+import {FormBuilder, FormGroup, Validators, NgForm, FormControl} from '@angular/forms';
 import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
 import {PageEvent} from '@angular/material/paginator';
 import {ActivatedRoute} from '@angular/router';
@@ -12,6 +12,7 @@ import {UrlShortenerService} from '../../services/urlshortener.service';
 import {ConfirmDialog} from '../../ui/confirm/confirm.component';
 import {I18nService} from '../../services/i18n.service';
 import {environment} from '../../../environments/environment';
+import {debounceTime} from 'rxjs/operators';
 
 @Component({
   selector: 'app-urlshortener',
@@ -22,13 +23,14 @@ export class UrlShortenerComponent implements OnInit {
 
   form: FormGroup;
   @ViewChild('formDirective') private formDirective: NgForm;
+  searchFormControl = new FormControl();
   shortenedUrlQuota: number = 0;
   shortenedUrls: any;
   shortenedUrl: any = {};
   success: boolean;
   working: boolean;
   datetimeformat: String;
-  page: any = {page: 0, size: 10, sort: "code", desc: false};
+  page: any = {page: 0, size: 10, sort: "code", desc: false, search: ""};
   pageSizeOptions: number[] = [5, 10, 25, 50];
 
   shortenedUrlColumns = ["share", "link", "note", "url", "expires", "delete"];
@@ -45,6 +47,7 @@ export class UrlShortenerComponent implements OnInit {
 
     this.form = this.formBuilder.group({
       url: ['', Validators.required],
+      note: ['', Validators.nullValidator],
       code: ['', Validators.nullValidator],
       password: ['', Validators.nullValidator],
       password2: ['', Validators.nullValidator],
@@ -53,6 +56,14 @@ export class UrlShortenerComponent implements OnInit {
       validator: MatchingValidator('password', 'password2')
     });
 
+
+    this.searchFormControl.valueChanges.pipe(debounceTime(500)).subscribe(value => {
+      this.page.search = this.searchFormControl.value ? this.searchFormControl.value : "";
+      this.urlShortenerService.get(this.page.page, this.page.size, this.page.sort, this.page.desc, this.page.search).subscribe((data: any) => {
+        this.shortenedUrls = data;
+      })
+    })
+
     this.update();
   }
 
@@ -90,15 +101,25 @@ export class UrlShortenerComponent implements OnInit {
       }
     })
 
-    this.urlShortenerService.get(this.page.page, this.page.size, this.page.sort, this.page.desc).subscribe((data: any) => {
+    this.page.search = this.searchFormControl.value ? this.searchFormControl.value : "";
+
+    this.urlShortenerService.get(this.page.page, this.page.size, this.page.sort, this.page.desc, this.page.search).subscribe((data: any) => {
       this.shortenedUrls = data;
     })
   }
 
+  updateSearch() {
+    this.page.search = this.searchFormControl.value ? this.searchFormControl.value : "";
+    this.urlShortenerService.get(this.page.page, this.page.size, this.page.sort, this.page.desc, this.page.search).subscribe((data: any) => {
+      this.shortenedUrls = data;
+    }, (error) => {})
+  }
+
   updatePages(event: PageEvent) {
     this.page.page = event.pageIndex;
     this.page.size = event.pageSize;
-    this.urlShortenerService.get(this.page.page, this.page.size, this.page.sort, this.page.desc).subscribe((data: any) => {
+    this.page.search = this.searchFormControl.value ? this.searchFormControl.value : "";
+    this.urlShortenerService.get(this.page.page, this.page.size, this.page.sort, this.page.desc, this.page.search).subscribe((data: any) => {
       this.shortenedUrls = data;
     }, (error) => {})
   }
@@ -111,7 +132,8 @@ export class UrlShortenerComponent implements OnInit {
       this.page.sort = sort.active;
       this.page.desc = sort.direction == "desc";
     }
-    this.urlShortenerService.get(this.page.page, this.page.size, this.page.sort, this.page.desc).subscribe((data: any) => {
+    this.page.search = this.searchFormControl.value ? this.searchFormControl.value : "";
+    this.urlShortenerService.get(this.page.page, this.page.size, this.page.sort, this.page.desc, this.page.search).subscribe((data: any) => {
       this.shortenedUrls = data;
     }, (error) => {})
   }
@@ -191,7 +213,7 @@ export class UrlShortenerShareDialog {
 })
 export class UrlShortenerPasswordComponent implements OnInit {
 
-  code : string;
+  code: string;
   apiUrl = environment.apiUrl;
   invalidPassword: boolean = false;
 
diff --git a/src/app/pages/urlshortener/urlshortener.password.html b/src/app/pages/urlshortener/urlshortener.password.html
index 9f3455e..bb3299d 100644
--- a/src/app/pages/urlshortener/urlshortener.password.html
+++ b/src/app/pages/urlshortener/urlshortener.password.html
@@ -4,7 +4,7 @@
       <h2>{{'urlshortener.password' | i18n}}
       </h2>
       <mat-form-field>
-        <input id="password" name="password" matInput type="password" placeholder="{{'password' | i18n}}" required matInputAutofocus>
+        <input id="password" name="password" matInput type="password" placeholder="{{'password' | i18n}}" required matAutofocus>
       </mat-form-field>
       <mat-error *ngIf="invalidPassword">
         {{'urlshortener.password.invalid' | i18n}}
diff --git a/src/app/services/urlshortener.service.ts b/src/app/services/urlshortener.service.ts
index 0c5d71e..25003d7 100644
--- a/src/app/services/urlshortener.service.ts
+++ b/src/app/services/urlshortener.service.ts
@@ -11,8 +11,8 @@ export class UrlShortenerService {
     constructor(private http: HttpClient) {
     }
 
-    get(page: number, size: number, sort: string, desc: boolean) {
-        const httpParams = new HttpParams().set("page", "" + page).set("size", "" + size).set("sort", sort).set("desc", "" + desc);
+    get(page: number, size: number, sort: string, desc: boolean, search: string) {
+        const httpParams = new HttpParams().set("page", "" + page).set("size", "" + size).set("sort", sort).set("desc", "" + desc).set("search", search);
         return this.http.get(environment.apiUrl + "/url/shortener", {params: httpParams});
     }
 
diff --git a/src/app/ui/confirm/confirm.component.html b/src/app/ui/confirm/confirm.component.html
index e2af757..27fc756 100644
--- a/src/app/ui/confirm/confirm.component.html
+++ b/src/app/ui/confirm/confirm.component.html
@@ -2,6 +2,6 @@
   {{text}}
 </mat-dialog-content>
 <mat-dialog-actions>
+  <button mat-raised-button [mat-dialog-close]="true" color="accent" matAutofocus>{{'confirm' | i18n}}</button>
   <button mat-button [mat-dialog-close]="false">{{'cancel' | i18n}}</button>
-  <button mat-raised-button [mat-dialog-close]="true" color="accent">{{'confirm' | i18n}}</button>
 </mat-dialog-actions>
\ No newline at end of file