printing

packages/frontend/src/app/components/view-members/view-members.html

@@ -2,11 +2,20 @@
     <h1>Mitglieder & Sportlerübersicht</h1>
 </div>
 <div>
-    <button matButton="filled" class="primary-btn" (click)="newMember()">
+    <button
+        matButton="filled"
+        class="primary-btn .no-print"
+        (click)="newMember()">
         Neues Mitglied
     </button>
+    <button
+        matButton="filled"
+        class="secondary-btn .no-print"
+        (click)="print()">
+        Drucken
+    </button>
 </div>
-<div class="filter-container">
+<div class="filter-container .no-print">
     <mat-form-field>
         <label>Filter:</label>
         <input

packages/frontend/src/app/components/view-members/view-members.ts

@@ -209,4 +209,118 @@ export class ViewMembers implements AfterViewInit {
         this.dataSource.data = members;
         this.changeDetectorRef.markForCheck();
     }
+
+    protected print() {
+        const data = this.dataSource.filteredData;
+        const printWindow = document.createElement('iframe');
+
+        const table = document.createElement('table');
+        const headerRow = document.createElement('tr');
+
+        const firstnameHeader = document.createElement('th');
+        firstnameHeader.innerText = 'Vorname';
+        headerRow.appendChild(firstnameHeader);
+
+        const lastnameHeader = document.createElement('th');
+        lastnameHeader.innerText = 'Nachname';
+        headerRow.appendChild(lastnameHeader);
+
+        const genderHeader = document.createElement('th');
+        genderHeader.innerText = 'Geschlecht';
+        headerRow.appendChild(genderHeader);
+
+        const clubnrHeader = document.createElement('th');
+        clubnrHeader.innerText = 'Passnummer';
+        headerRow.appendChild(clubnrHeader);
+
+        const birthdayHeader = document.createElement('th');
+        birthdayHeader.innerText = 'Geburtsdatum';
+        headerRow.appendChild(birthdayHeader);
+
+        const geburtsortHeader = document.createElement('th');
+        geburtsortHeader.innerText = 'Geburtsort';
+        headerRow.appendChild(geburtsortHeader);
+
+        const cancelDateHeader = document.createElement('th');
+        cancelDateHeader.innerText = 'Kündigungsdatum';
+        headerRow.appendChild(cancelDateHeader);
+
+        table.appendChild(headerRow);
+
+        var docstyle = window.getComputedStyle(document.body);
+        var surface = docstyle.getPropertyValue('--mat-sys-surface');
+        var surfaceVariant = docstyle.getPropertyValue(
+            '--mat-sys-surface-variant',
+        );
+
+        var counter = 0;
+        for (const member of data) {
+            const memberRow = document.createElement('tr');
+            memberRow.style.backgroundColor =
+                counter % 2 === 0 ? surface : surfaceVariant;
+            counter++;
+
+            const firstnameCell = document.createElement('td');
+            firstnameCell.innerText = member.vorname ?? '';
+            memberRow.appendChild(firstnameCell);
+            firstnameCell.style.border = '1px solid darkgray';
+            firstnameCell.style.borderCollapse = 'collapse';
+            // firstnameCell.style.backgroundColor = 'black';
+
+            const lastnameCell = document.createElement('td');
+            lastnameCell.innerText = member.nachname ?? '';
+            memberRow.appendChild(lastnameCell);
+            lastnameCell.style.border = '1px solid darkgray';
+            lastnameCell.style.borderCollapse = 'collapse';
+
+            const genderCell = document.createElement('td');
+            genderCell.innerText = member.geschlecht ?? '';
+            memberRow.appendChild(genderCell);
+            genderCell.style.border = '1px solid darkgray';
+            genderCell.style.borderCollapse = 'collapse';
+
+            const clubnrCell = document.createElement('td');
+            clubnrCell.innerText = member.passnummer ?? '';
+            memberRow.appendChild(clubnrCell);
+            clubnrCell.style.border = '1px solid darkgray';
+            clubnrCell.style.borderCollapse = 'collapse';
+
+            const birthdayCell = document.createElement('td');
+            birthdayCell.innerText =
+                member.geburtsdatum != null
+                    ? (this.datePipe.transform(member.geburtsdatum) ?? '')
+                    : '';
+            memberRow.appendChild(birthdayCell);
+            birthdayCell.style.border = '1px solid darkgray';
+            birthdayCell.style.borderCollapse = 'collapse';
+
+            const geburtsortCell = document.createElement('td');
+            geburtsortCell.innerText = member.geburtsort ?? '';
+            memberRow.appendChild(geburtsortCell);
+            geburtsortCell.style.border = '1px solid darkgray';
+            geburtsortCell.style.borderCollapse = 'collapse';
+
+            const cancelDateCell = document.createElement('td');
+            cancelDateCell.innerText =
+                member.kuendigungzum != null
+                    ? (this.datePipe.transform(member.kuendigungzum) ?? '')
+                    : '';
+            memberRow.appendChild(cancelDateCell);
+            cancelDateCell.style.border = '1px solid darkgray';
+            cancelDateCell.style.borderCollapse = 'collapse';
+
+            table.appendChild(memberRow);
+        }
+
+        // printWindow.contentDocument?.appendChild(table);
+
+        table.style.width = '100%';
+        table.style.borderCollapse = 'collapse';
+        table.style.borderSpacing = '0';
+        // printWindow.style.display = 'none';
+
+        printWindow.srcdoc = table.outerHTML;
+        document.body.appendChild(printWindow);
+        printWindow.contentWindow?.print();
+    }
 }

packages/frontend/src/styles.scss

@@ -102,8 +102,4 @@ body {
         display: none;
         visibility: hidden;
     }
-
-    :not(.no-print) {
-        visibility: visible;
-    }
 }

packages/frontend/tsconfig.app.json

@@ -4,6 +4,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
+    "rootDir": "./src",
     "types": []
   },
   "include": [