refactor: Modal in own component

client/package.json

@@ -23,6 +23,7 @@
     "bootstrap": "^5.3.8",
     "bootstrap-icons": "^1.13.1",
     "ng-qrcode": "^21.0.0",
+    "qr-scanner": "^1.4.2",
     "qrcode": "^1.5.4",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"

client/src/app/components/modal/modal.html

@@ -0,0 +1,7 @@
+    <div class="modal-header">
+        <h4 class="modal-title" id="modal-basic-title">{{ title }}</h4>
+        <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss()"></button>
+    </div>
+    <div class="modal-body text-center">
+        <ng-container *ngTemplateOutlet="body"></ng-container>
+    </div>

client/src/app/components/modal/modal.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Modal } from './modal';
+
+describe('Modal', () => {
+  let component: Modal;
+  let fixture: ComponentFixture<Modal>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Modal],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Modal);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/components/modal/modal.ts

@@ -0,0 +1,19 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, Input, TemplateRef } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-modal',
+  imports: [NgTemplateOutlet],
+  templateUrl: './modal.html',
+  styleUrl: './modal.less',
+})
+export class Modal {
+  @Input({required: true}) title!: string;
+  @Input({required: true}) body!: TemplateRef<any>;
+  
+  constructor(
+    public activeModal: NgbActiveModal
+  ){}
+  
+}

client/src/app/screens/screen-receive/screen-receive.html

@@ -38,19 +38,13 @@
 
           <!-- Share Button -->
       
-        <ng-template #content let-modal>
-            <div class="modal-header">
-                <h4 class="modal-title" id="modal-basic-title">Pay {{ amount}} to {{ this.api.currentUser.id }}</h4>
-                <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
-            </div>
-            <div class="modal-body text-center">
-                      <qr-code [value]="shareableLink" 
-                             size="300" 
-                             errorCorrectionLevel="M" />
-            </div>
+        <ng-template #qrTemplate>
+          <qr-code [value]="shareableLink" 
+                 size="300" 
+                 errorCorrectionLevel="M" />
         </ng-template>
           <div class="d-grid gap-2">
-            <button class="btn btn-primary btn-lg" (click)="open(content)">
+            <button class="btn btn-primary btn-lg" (click)="openModal()">
               <i class="bi bi-qr-code-scan me-2"></i> Show QR Code
             </button>
           </div>

client/src/app/screens/screen-receive/screen-receive.ts

@@ -1,8 +1,9 @@
-import { Component, inject, TemplateRef } from '@angular/core';
+import { Component, inject, TemplateRef, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { QrCodeComponent } from 'ng-qrcode';
 import { APIService } from '../../services/api';
+import { Modal } from '../../components/modal/modal';
 
 @Component({
   selector: 'app-screen-receive',
@@ -13,6 +14,7 @@ import { APIService } from '../../services/api';
 export class ScreenReceive {
   private modalService = inject(NgbModal);
   api = inject(APIService);
+  @ViewChild('qrTemplate') qrTemplate !: TemplateRef<any>;
 
   amount: number = 0;
   get shareableLink(): string {
@@ -23,7 +25,9 @@ export class ScreenReceive {
   copyLink() {
     navigator.clipboard.writeText(this.shareableLink);
   }
-  open(content: TemplateRef<any>) {
-    this.modalService.open(content)
+  openModal() {
+    const modalRef = this.modalService.open(Modal);
+    modalRef.componentInstance.title = `Pay ${this.amount} to ${this.api.currentUser.id}`
+    modalRef.componentInstance.body = this.qrTemplate;
   }
 }

client/src/app/screens/screen-send/screen-send.html

@@ -31,6 +31,7 @@
                 placeholder="username"
                 [(ngModel)]="recipient"
               />
+              <button (click)="openScanner()" class="btn btn-primary"><i class="bi bi-qr-code-scan"></i></button>
             </div>
           </div>
 
@@ -55,3 +56,7 @@
   </div>
 </div>
 
+<ng-template #qrScanner>
+  Abc
+</ng-template>
+

client/src/app/screens/screen-send/screen-send.ts

@@ -1,11 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { APIService } from '../../services/api';
 import { NotificationService } from '../../services/notification';
+import  QrScanner from 'qr-scanner';
+import { NgbModal, NgbSlide } from '@ng-bootstrap/ng-bootstrap';
+import { Modal } from '../../components/modal/modal';
 
 @Component({
   selector: 'app-screen-send',
-  imports: [FormsModule],
+  imports: [FormsModule, NgbSlide],
   templateUrl: './screen-send.html',
   styleUrl: './screen-send.less',
 })
@@ -13,10 +16,13 @@ export class ScreenSend {
   amount: number = 0;
   recipient: string = '';
   reference: string = '';
+  scanner!: QrScanner;
+  @ViewChild('qrScanner') templScanner!: TemplateRef<any>;
 
   constructor(
     private api: APIService,
     private notify: NotificationService,
+    private modalService: NgbModal,
   ){}
 
   sendMoney() {
@@ -44,4 +50,12 @@ export class ScreenSend {
     this.recipient = '';
     this.reference = '';
   }
+  openScanner(){
+    const modalRef = this.modalService.open(Modal);
+    modalRef.componentInstance.title = 'Scan a QR Code';
+    modalRef.componentInstance.body = this.templScanner;
+
+
+  }
+  closeScanner(){}
 }

package-lock.json

@@ -34,6 +34,7 @@
         "bootstrap": "^5.3.8",
         "bootstrap-icons": "^1.13.1",
         "ng-qrcode": "^21.0.0",
+        "qr-scanner": "^1.4.2",
         "qrcode": "^1.5.4",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0"
@@ -4391,6 +4392,12 @@
         "undici-types": "~7.18.0"
       }
     },
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.3",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
+      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
+      "license": "MIT"
+    },
     "node_modules/@types/pg": {
       "version": "8.16.0",
       "resolved": "https://registry.npmjs.org/@types/pg/-/pg-8.16.0.tgz",
@@ -9237,6 +9244,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/qr-scanner": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/qr-scanner/-/qr-scanner-1.4.2.tgz",
+      "integrity": "sha512-kV1yQUe2FENvn59tMZW6mOVfpq9mGxGf8l6+EGaXUOd4RBOLg7tRC83OrirM5AtDvZRpdjdlXURsHreAOSPOUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/offscreencanvas": "^2019.6.4"
+      }
+    },
     "node_modules/qrcode": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",