feat: add dialog

Author: ibuioli

src/app/afip/afip.component.html

@@ -12,7 +12,7 @@
     </div>
 </div>
 
-<button mat-raised-button color="primary" class="w-100" (click)="test()">TEST</button>
+<!--button mat-raised-button color="primary" class="w-100" (click)="test()">TEST</button-->
 
 <div *ngIf="invoices.length > 0" class="row">
     <div class="col-12">

src/app/afip/afip.component.ts

@@ -1,6 +1,7 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, Inject } from '@angular/core';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import { MatTable } from '@angular/material/table';
+import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { BarcodeScanner } from '@awesome-cordova-plugins/barcode-scanner/ngx';
 
 export interface InvoiceElement {
@@ -32,7 +33,7 @@ export class AfipComponent implements OnInit {
   expandedElement: InvoiceElement | null | undefined;
   @ViewChild(MatTable) table: MatTable<InvoiceElement> | undefined;
 
-  constructor(private barcodeScanner: BarcodeScanner) { }
+  constructor(private barcodeScanner: BarcodeScanner, public dialog: MatDialog) { }
 
   ngOnInit(): void {
     let inv = localStorage.getItem('invoices');
@@ -80,7 +81,7 @@ export class AfipComponent implements OnInit {
         this.table!.renderRows();
       }
     } else {
-      alert('El QR escaneado no es de AFIP');
+      this.openDialog('El QR escaneado no es de AFIP');
     }
   }
 
@@ -181,4 +182,20 @@ export class AfipComponent implements OnInit {
     link.click();
   }
 
+  openDialog(msg: string) {
+    const dialogRef = this.dialog.open(DialogContent, {
+      data: msg,
+    });
+
+    dialogRef.afterClosed().subscribe(result => {});
+  }
+
 }
+
+@Component({
+  selector: 'dialog-data',
+  templateUrl: './dialog.html',
+})
+export class DialogContent {
+  constructor(@Inject(MAT_DIALOG_DATA) public data: string) {}
+}

src/app/afip/dialog.html

@@ -0,0 +1,7 @@
+<h2 mat-dialog-title>Advertencia</h2>
+<mat-dialog-content class="mat-typography">
+    {{data}}
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Aceptar</button>
+</mat-dialog-actions>

src/app/app.module.ts

@@ -20,6 +20,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatDialogModule } from '@angular/material/dialog';
 
 import { AfipComponent } from './afip/afip.component';
+import { DialogContent } from './afip/afip.component';
 
 const routes: Routes = [
   { path: 'home', component: AfipComponent },
@@ -32,7 +33,8 @@ const routes: Routes = [
 @NgModule({
   declarations: [
     AppComponent,
-    AfipComponent
+    AfipComponent,
+    DialogContent
   ],
   imports: [
     BrowserModule,