feat(dashboard): add link confirmation dialog before navigation
This commit is contained in:
parent
8b08c6616c
commit
4c77b4f139
7 changed files with 77 additions and 2 deletions
|
@ -14,7 +14,7 @@
|
||||||
<ng-container matColumnDef="id">
|
<ng-container matColumnDef="id">
|
||||||
<th mat-header-cell *matHeaderCellDef> ID </th>
|
<th mat-header-cell *matHeaderCellDef> ID </th>
|
||||||
<td mat-cell *matCellDef="let element">
|
<td mat-cell *matCellDef="let element">
|
||||||
<a href="{{element.id}}">
|
<a (click)="goToLink(element)" class="link">
|
||||||
{{element.id}}
|
{{element.id}}
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
|
|
|
@ -7,6 +7,8 @@ import { MatRow, MatTableModule } from '@angular/material/table';
|
||||||
import { MatCardModule } from '@angular/material/card';
|
import { MatCardModule } from '@angular/material/card';
|
||||||
import { Link } from '../models/link';
|
import { Link } from '../models/link';
|
||||||
import { MatButtonModule } from '@angular/material/button';
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
|
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
|
||||||
|
import { VisitLinkConfirmationComponent } from '../visit-link-confirmation/visit-link-confirmation.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-dashboard',
|
selector: 'app-dashboard',
|
||||||
|
@ -18,7 +20,7 @@ export class DashboardComponent {
|
||||||
public links: Link[] = [];
|
public links: Link[] = [];
|
||||||
displayedColumns: string[] = ['id', 'name', 'link', 'shortLink', 'actions'];
|
displayedColumns: string[] = ['id', 'name', 'link', 'shortLink', 'actions'];
|
||||||
|
|
||||||
constructor(private linkService: LinkService, private router: Router) { };
|
constructor(private linkService: LinkService, private router: Router, private dialog: MatDialog) { };
|
||||||
|
|
||||||
copyLink(id: string) {
|
copyLink(id: string) {
|
||||||
navigator.clipboard.writeText(this.getShortLink(id));
|
navigator.clipboard.writeText(this.getShortLink(id));
|
||||||
|
@ -28,10 +30,21 @@ export class DashboardComponent {
|
||||||
return "https://" + window.location.hostname + '/' + id;
|
return "https://" + window.location.hostname + '/' + id;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
goToLink(link: Link) {
|
||||||
|
this.dialog.open(VisitLinkConfirmationComponent, {
|
||||||
|
data: link.link,
|
||||||
|
}).afterClosed().subscribe((accepted: Boolean) => {
|
||||||
|
if (accepted) {
|
||||||
|
this.router.navigate([link.id]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.linkService.getLinks().then(links => {
|
this.linkService.getLinks().then(links => {
|
||||||
this.links = links;
|
this.links = links;
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
createLink() {
|
createLink() {
|
||||||
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
<h2 mat-dialog-title>Are you sure?</h2>
|
||||||
|
<mat-dialog-content>Are you sure you would like to visit {{link}} now?</mat-dialog-content>
|
||||||
|
<mat-dialog-actions>
|
||||||
|
<button mat-flat-button color="warn" (click)="close()">No</button>
|
||||||
|
<button mat-flat-button (click)="accept()">Yes</button>
|
||||||
|
</mat-dialog-actions>
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { VisitLinkConfirmationComponent } from './visit-link-confirmation.component';
|
||||||
|
|
||||||
|
describe('VisitLinkConfirmationComponent', () => {
|
||||||
|
let component: VisitLinkConfirmationComponent;
|
||||||
|
let fixture: ComponentFixture<VisitLinkConfirmationComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [VisitLinkConfirmationComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(VisitLinkConfirmationComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { Component, inject } from '@angular/core';
|
||||||
|
import {
|
||||||
|
MatDialog,
|
||||||
|
MAT_DIALOG_DATA,
|
||||||
|
MatDialogTitle,
|
||||||
|
MatDialogContent,
|
||||||
|
MatDialogActions,
|
||||||
|
MatDialogRef,
|
||||||
|
} from '@angular/material/dialog';
|
||||||
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-visit-link-confirmation',
|
||||||
|
imports: [MatDialogTitle, MatDialogContent, MatDialogActions, MatButtonModule],
|
||||||
|
templateUrl: './visit-link-confirmation.component.html',
|
||||||
|
styleUrl: './visit-link-confirmation.component.css'
|
||||||
|
})
|
||||||
|
export class VisitLinkConfirmationComponent {
|
||||||
|
public link: string = inject(MAT_DIALOG_DATA);
|
||||||
|
constructor(private dialogRef: MatDialogRef<VisitLinkConfirmationComponent>) {}
|
||||||
|
|
||||||
|
close() {
|
||||||
|
this.dialogRef.close(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
accept() {
|
||||||
|
this.dialogRef.close(true);
|
||||||
|
}
|
||||||
|
}
|
|
@ -11,6 +11,10 @@ html {
|
||||||
@include mat.color-variants-backwards-compatibility($theme);
|
@include mat.color-variants-backwards-compatibility($theme);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
@apply underline text-blue-500 cursor-pointer;
|
||||||
|
}
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
Loading…
Add table
Reference in a new issue