jank/jklink
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat(create-link): Add snackbar notification for slug conflict

Browse source
This commit is contained in:
Jan Gleytenhoover 2025-01-25 18:03:52 +01:00
parent 8e1832416b
commit 0dba945ac2
Signed by: jank
GPG key ID: 50620ADD22CD330B
1 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/app/create-link/create-link.component.ts
View file

@ -13,6 +13,8 @@ import { MatInputModule, MatLabel } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { debounceTime } from 'rxjs'; import { debounceTime } from 'rxjs';
import { AsyncPipe } from '@angular/common';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({ @Component({
selector: 'app-create-link', selector: 'app-create-link',
@ -32,7 +34,11 @@ export class CreateLinkComponent {
public requestFailed: boolean = false; public requestFailed: boolean = false;
public errorMessages: Record<string, string> = {}; public errorMessages: Record<string, string> = {};
constructor(private linkService: LinkService, private router: Router) {} constructor(
private linkService: LinkService,
private router: Router,
private snackBar: MatSnackBar,
) {}
private validationErrorMessages: Record<string, string> = { private validationErrorMessages: Record<string, string> = {
required: 'This field is required', required: 'This field is required',
@ -50,7 +56,7 @@ export class CreateLinkComponent {
.map( .map(
(errorKey) => (errorKey) =>
this.validationErrorMessages[errorKey] || this.validationErrorMessages[errorKey] ||
`Unknown error: ${errorKey}` `Unknown error: ${errorKey}`,
) )
.join(' '); .join(' ');
} }
@ -67,7 +73,7 @@ export class CreateLinkComponent {
link: new FormControl('', [ link: new FormControl('', [
Validators.required, Validators.required,
Validators.pattern( Validators.pattern(
/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/ /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/,
), ),
]), ]),
slug: new FormControl(''), slug: new FormControl(''),
@ -89,7 +95,15 @@ export class CreateLinkComponent {
link: this.createLinkForm.get('link')?.value, link: this.createLinkForm.get('link')?.value,
slug: this.createLinkForm.get('slug')?.value, slug: this.createLinkForm.get('slug')?.value,
}) })
.catch(() => (this.requestFailed = true)) .catch(() => {
this.requestFailed = true;
const notification = this.snackBar.open(
'The slug is already used please use another slug.',
);
setTimeout(() => {
notification.dismiss();
}, 5000);
})
.finally(() => { .finally(() => {
if (!this.requestFailed) { if (!this.requestFailed) {
this.router.navigate(['dashboard']); this.router.navigate(['dashboard']);