Add QR Scanner component

package.json

@@ -37,6 +37,7 @@
     "ngx-skeleton-loader": "^2.4.2",
     "ngx-webcam": "^0.4.1",
     "popper.js": "^1.16.1",
+    "qr-scanner": "^1.4.2",
     "rxjs": "~7.8.0",
     "textfit": "^2.4.0",
     "tslib": "^2.3.0",

src/app/app.module.ts

@@ -60,6 +60,7 @@ import {
 import {
   ZoneRequestAllocationAllocatedComponent
 } from './zone-request-allocation-allocated/zone-request-allocation-allocated.component';
+import {QrScannerComponent} from "./qr-scanner/qr-scanner.component";
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, '/assets/i18n/', '.json?v=20240415180851');
@@ -106,7 +107,8 @@ export function HttpLoaderFactory(http: HttpClient) {
     ZoneRequestFormFormComponent,
     ZoneRequestAllocationPendingComponent,
     ZoneRequestAllocationAllocatedComponent,
-    BaseComponent
+    BaseComponent,
+    QrScannerComponent
   ],
   imports: [
     BrowserModule,

src/app/qr-scanner/qr-scanner.component.html

@@ -0,0 +1,12 @@
+<ng-container *ngIf="!scanning">
+  <div class="row my-5">
+    <div class="col-md-12">
+      <button class="btn btn-primary" (click)="scanBadge()" (touchend)="scanBadge()">Scan</button>
+    </div>
+  </div>
+</ng-container>
+
+<ng-container [style.visibility]="!scanning">
+  <video style="width: 350px; height: auto; object-fit: contain;" #videoElement></video>
+  <button class="btn btn-sm btn-danger" (click)="cancel()">X</button>
+</ng-container>

src/app/qr-scanner/qr-scanner.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QrScannerComponent } from './qr-scanner.component';
+
+describe('QrScannerComponent', () => {
+  let component: QrScannerComponent;
+  let fixture: ComponentFixture<QrScannerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ QrScannerComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(QrScannerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/qr-scanner/qr-scanner.component.ts

@@ -0,0 +1,58 @@
+import {Component, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
+import QrScanner from "qr-scanner";
+import {WsComponent} from "@worldskills/worldskills-angular-lib";
+import {AppService} from "../../services/app/app.service";
+
+@Component({
+  selector: 'app-qr-scanner',
+  templateUrl: './qr-scanner.component.html',
+  styleUrls: ['./qr-scanner.component.css']
+})
+export class QrScannerComponent extends WsComponent implements OnInit, OnDestroy {
+
+  @Output() scanResult: EventEmitter<string> = new EventEmitter<string>();
+  @ViewChild('videoElement') videoElement: ElementRef;
+
+  scanning = false;
+  qrScanner: QrScanner;
+
+  constructor(private ngZone: NgZone) {
+    super();
+  }
+
+  ngOnInit(): void {
+  }
+
+  ngAfterViewInit(): void {
+    this.qrScanner = new QrScanner(
+      this.videoElement.nativeElement,
+      result => {
+        // this.qrScanner.stop();
+        // this.scanning = false;
+        this.ngZone.run(() => {
+          console.log(result.data);
+          this.scanResult.emit(result.data);
+        });
+      },
+      {
+        highlightScanRegion: true,
+      },
+    );
+    this.scanBadge();
+  }
+
+  scanBadge() {
+    this.scanning = true;
+    this.qrScanner.start();
+  }
+
+  cancel() {
+    this.qrScanner.stop();
+    this.scanning = false;
+  }
+
+  override ngOnDestroy() {
+    super.ngOnDestroy();
+    this.qrScanner.destroy();
+  }
+}