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

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

Browse source
This commit is contained in:
Jan K9f 2025-01-25 18:03:52 +01:00
commit 0dba945ac2
Signed by: jank
GPG key ID: 50620ADD22CD330B
1 changed files with 18 additions and 4 deletions
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 { MatButtonModule } from '@angular/material/button';
import { debounceTime } from 'rxjs';
import { AsyncPipe } from '@angular/common';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-create-link',
@ -32,7 +34,11 @@ export class CreateLinkComponent {
public requestFailed: boolean = false;
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> = {
required: 'This field is required',
@ -50,7 +56,7 @@ export class CreateLinkComponent {
.map(
(errorKey) =>
this.validationErrorMessages[errorKey] ||
`Unknown error: ${errorKey}`
`Unknown error: ${errorKey}`,
)
.join(' ');
}
@ -67,7 +73,7 @@ export class CreateLinkComponent {
link: new FormControl('', [
Validators.required,
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(''),
@ -89,7 +95,15 @@ export class CreateLinkComponent {
link: this.createLinkForm.get('link')?.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(() => {
if (!this.requestFailed) {
this.router.navigate(['dashboard']);