_Bastler/we_bstly-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

add search + note

Browse Source
This commit is contained in:
_Bastler 2021-06-06 17:09:09 +02:00
parent a69647ffde
commit 57d2bf97fb
14 changed files with 60 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/material/autofocus.ts
View File

@ -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();
})
}
}

2
src/app/pages/form-login-totp/form-login-totp.component.html
View File

@ -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>

2
src/app/pages/form-login/form-login.component.html
View File

@ -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>

2
src/app/pages/login-totp/login-totp.component.html
View File

@ -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>

2
src/app/pages/login/login.component.html
View File

@ -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>

2
src/app/pages/register/register.component.html
View File

@ -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>

3
src/app/pages/services/services.component.html
View File

@ -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">

2
src/app/pages/services/services.component.ts
View File

@ -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) {}

2
src/app/pages/tokens/tokens.component.html
View File

@ -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>

12
src/app/pages/urlshortener/urlshortener.component.html
View File

@ -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">

32
src/app/pages/urlshortener/urlshortener.component.ts
View File

@ -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) => {})
}

2
src/app/pages/urlshortener/urlshortener.password.html
View File

@ -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}}

4
src/app/services/urlshortener.service.ts
View File

@ -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});
}

2
src/app/ui/confirm/confirm.component.html
View File

@ -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>