Feature/enhancements

src/app/home/_admin/dead-letters/dead-letter-view.component.ts

@@ -39,7 +39,7 @@ import {DeadLettersService} from './dead-letters.service';
 
         <hr />
 
-        <div class="json-box">
+        <div class="json-box text-white">
           <pre id="json-data">{{ deadLetter.body }}</pre>
         </div>
       </div>

src/app/home/_admin/organisations/organisation-edit/organisation-edit-users/organisation-user-add-modal.component.ts

@@ -54,8 +54,6 @@ export class OrganisationUserAddModalComponent {
   activeModal = inject(NgbActiveModal);
   #organisationUsersState = inject(OrganisationUsersService);
 
-  entityId!: number;
-
   form = inject(FormBuilder).nonNullable.group(
     {
       emailAddresses: [new Array<{label: string}>()],

src/app/home/_admin/organisations/organisation-edit/organisation-edit-users/organisation-users-settings.component.ts

@@ -160,8 +160,7 @@ export class OrganisationUsersSettingsComponent {
   }
 
   onCreateOrganisationUser(): void {
-    const modalRef = this.modal.open(OrganisationUserAddModalComponent, {ariaLabelledBy: 'modal-title-org-user-add', size: 'lg'});
-    modalRef.componentInstance.entityId = this.selectedOrganisationId();
+    this.modal.open(OrganisationUserAddModalComponent, {ariaLabelledBy: 'modal-title-org-user-add', size: 'lg'});
   }
 
   onDeleteOrganisationUser(model: OrganisationUserResponse): void {

src/app/home/_shared/components/question-dialog.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, inject, input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core';
 
 import {NgbActiveModal, NgbModal} from '@ng-bootstrap/ng-bootstrap';
 import {TranslocoPipe} from '@jsverse/transloco';
@@ -9,16 +9,20 @@ import {BiComponent, BiName} from 'dfx-bootstrap-icons';
 @Component({
   template: `
     <div class="modal-header border-bottom-0">
-      <h1 class="modal-title fs-5">{{ (title() ? title() : question()) | transloco }}</h1>
+      <h1 class="modal-title fs-5" id="modal-question-title">
+        @if (title(); as title) {
+          {{ title | transloco }}
+        } @else if (question()) {
+          {{ question() | transloco }}
+        }
+      </h1>
       <button type="button" class="btn-close btn-close-white" aria-label="Close" (mousedown)="activeModal.close()"></button>
     </div>
     <div class="modal-body py-0">
-      @if (question() || info()) {
-        @if (info()) {
-          <div [innerHTML]="info()"></div>
-        } @else {
-          <strong>{{ question() | transloco }}</strong>
-        }
+      @if (info(); as info) {
+        <div [innerHTML]="info"></div>
+      } @else if (question()) {
+        <strong>{{ question() | transloco }}</strong>
       }
     </div>
     <div class="modal-footer">
@@ -56,12 +60,12 @@ export class QuestionDialogComponent {
     },
   ];
 
-  question = input<string>();
-  info = input<string>();
+  question = signal<string | undefined>(undefined);
+  info = signal<string | undefined>(undefined);
 
-  answers = input<answerType[]>(QuestionDialogComponent.YES_NO_ANSWERS);
+  answers = signal<answerType[]>(QuestionDialogComponent.YES_NO_ANSWERS);
 
-  title = input<string>();
+  title = signal<string | undefined>(undefined);
 
   lumber = loggerOf('QuestionDialogComponent');
 
@@ -82,11 +86,8 @@ export function injectConfirmDialog(): (title: string, info?: string) => Promise
 
   return (title: string, info?: string): Promise<boolean> => {
     const modalRef = modal.open(QuestionDialogComponent, {ariaLabelledBy: 'modal-question-title', size: 'md'});
-    modalRef.componentInstance.title = title;
-
-    if (info) {
-      modalRef.componentInstance.info = info;
-    }
+    modalRef.componentInstance.title.set(title);
+    modalRef.componentInstance.info.set(info);
 
     return new Promise((resolve) => {
       modalRef.result

src/app/home/printers/mediators.component.ts

@@ -70,7 +70,7 @@ import {MediatorsService} from './_services/mediators.service';
       }
       @if (table.isEmpty()) {
         <app-blankslate icon="wifi-off" [description]="'Keine Mediators verbunden'">
-          <a class="btn btn-success" type="button" href="https://help.kellner.team/mediator.html" rel="noopener" target="_blank">
+          <a class="btn btn-success" type="button" href="https://help.kellner.team/desktop.html" rel="noopener" target="_blank">
             {{ 'LEARN_MORE' | transloco }}
           </a>
         </app-blankslate>

src/app/home/start/start.component.html

@@ -1,5 +1,5 @@
-<div class="d-flex flex-column flex-lg-row justify-content-start gap-2">
-  <div class="col-12 col-lg-7 d-flex flex-column gap-2">
+<div class="d-flex flex-column flex-md-row justify-content-between gap-2">
+  <div class="col-12 col-md-6 col-xl-5 col-xxl-4 d-flex flex-column gap-2">
     <div class="card p-2">
       <div class="card-body">
         <h5 class="card-title">{{ 'HOME_START_SETUP' | transloco }}</h5>
@@ -36,7 +36,28 @@ <h5 class="card-title">{{ 'ABOUT_APP_DISCOVER' | transloco }}</h5>
       </div>
     </div>
 
-    @if (myUser()?.isAdmin) {
+    @if (unusedPrinters(); as unusedPrinters) {
+    <div class="card p-2">
+      <div class="card-body">
+        <h5 class="card-title d-flex justify-content-between align-items-center">
+          {{ 'Ungekoppelte Drucker' | transloco }}
+          <bi name="info-circle-fill" />
+        </h5>
+
+        <div class="list-group mb-3">
+          @for (printer of unusedPrinters; track printer.id) {
+          <a
+            class="list-group-item list-group-item-action list-group-item-warning d-flex align-items-center gap-2"
+            [routerLink]="'o/organisationId/e/eventId/printers/' + printer.id"
+          >
+            {{printer.name}}
+          </a>
+          }
+        </div>
+        <a href="#" class="card-link" routerLink="o/organisationId/e/eventId/printers/mediators/all">Zu den Mediators</a>
+      </div>
+    </div>
+    } @if (myUser()?.isAdmin) {
     <div class="card p-2">
       <div
         class="card-body d-inline-flex align-items-center gap-2 clickable"
@@ -56,7 +77,7 @@ <h5 class="card-title">{{ 'ABOUT_APP_DISCOVER' | transloco }}</h5>
   </div>
 
   @if (event()) {
-  <div class="col-12 col-lg-5 d-flex flex-column gap-2">
+  <div class="col-12 col-md-6 col-xl-5 col-xxl-4 d-flex flex-column gap-2">
     <div class="card p-2">
       <div class="card-body">
         <h5 class="card-title">{{ 'Neue Bestellungen' | transloco }}</h5>

src/app/home/start/start.component.ts

@@ -16,11 +16,13 @@ import {BiComponent} from 'dfx-bootstrap-icons';
 import {StopPropagationDirective} from 'dfx-helper';
 import {deriveLoading} from 'ngxtension/derive-loading';
 
-import {catchError, filter, map, of, startWith, switchMap, timer} from 'rxjs';
+import {catchError, combineLatest, filter, map, of, startWith, switchMap, timer} from 'rxjs';
 import {SelectedEventService} from '../_admin/events/_services/selected-event.service';
 import {MyUserService} from '../_shared/services/user/my-user.service';
 import {AppOrderStateBadgeComponent} from '../orders/_components/app-order-state-badge.component';
 import {OrdersService} from '../orders/orders.service';
+import {MediatorsService} from '../printers/_services/mediators.service';
+import {PrintersService} from '../printers/_services/printers.service';
 
 @Component({
   selector: 'app-start',
@@ -43,6 +45,8 @@ export class StartComponent {
   #httpClient = inject(HttpClient);
   #authService = inject(AuthService);
   #ordersService = inject(OrdersService);
+  #mediatorsService = inject(MediatorsService);
+  #printersService = inject(PrintersService);
 
   isProduction = EnvironmentHelper.getProduction();
   type = EnvironmentHelper.getType();
@@ -73,10 +77,21 @@ export class StartComponent {
     map((it) => it.data),
   );
 
-  orders = toSignal(this.#orders$);
+  orders = toSignal(this.#orders$, {initialValue: []});
 
   showOrdersLoading = toSignal(this.#orders$.pipe(deriveLoading({threshold: 0, loadingTime: 0})), {requireSync: true});
 
+  unusedPrinters = toSignal(
+    timer(0, 3 * 60000).pipe(
+      switchMap(() => combineLatest([this.#mediatorsService.getAll$(), this.#printersService.getAll$()])),
+      map(([mediators, printers]) => {
+        const allUsedPrinters = mediators.map((mediator) => mediator.printers.map((printer) => printer.id)).flat();
+        return printers.filter((printer) => !allUsedPrinters.includes(printer.id));
+      }),
+      map((printers) => (printers.length > 0 ? printers : undefined)),
+    ),
+  );
+
   logout(): void {
     this.#authService.logout();
   }

src/app/home/tables/tables-print-qr-codes.modal.ts

@@ -1,5 +1,5 @@
 import {AsyncPipe} from '@angular/common';
-import {ChangeDetectionStrategy, Component, inject, input, signal} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core';
 
 import {ScrollableToolbarComponent} from '@home-shared/components/scrollable-toolbar.component';
 import {MobileLinkService} from '@home-shared/services/mobile-link.service';
@@ -104,7 +104,7 @@ export class TablesPrintQrCodesModal {
   activeModal = inject(NgbActiveModal);
   #mobileLink = inject(MobileLinkService);
 
-  tables = input<GetTableWithGroupResponse[]>();
+  tables = signal<GetTableWithGroupResponse[]>([]);
 
   qrCodeSize: 'SM' | 'MD' = 'MD';
   generating = false;

src/app/home/tables/tables.component.ts

@@ -118,12 +118,12 @@ import {TablesPrintQrCodesModal} from './tables-print-qr-codes.modal';
                   <div class="position-relative">
                     <div class="position-absolute" style="bottom: -25px; left: 0px">
                       <a
-                        class="badge text-bg-warning d-inline-flex align-items-center gap-2"
+                        class="badge text-bg-info d-inline-flex align-items-center gap-2"
                         [routerLink]="'../t/create'"
                         [queryParams]="{group: table.group.id, number: table.number + 1}"
                         (click)="$event.stopPropagation()"
                       >
-                        <bi name="exclamation-octagon-fill" />
+                        <bi name="sort-numeric-down" />
                         Unvollständige Reihenfolge
                       </a>
                     </div>
@@ -208,7 +208,7 @@ import {TablesPrintQrCodesModal} from './tables-print-qr-codes.modal';
   `,
   styles: `
     .thick-bottom-border {
-      border-bottom: #ffc107;
+      border-bottom: #5dc7eb;
       border-bottom-style: dashed;
       border-bottom-width: 2px;
     }
@@ -281,8 +281,8 @@ export class TablesComponent {
       ariaLabelledBy: 'app-tables-qr-codes-title',
       size: 'lg',
     });
-    modalRef.componentInstance.tables = this.selection
-      .selection()
-      .selected.sort((a, b) => a.group.name.localeCompare(b.group.name) || a.number - b.number);
+    (modalRef.componentInstance as TablesPrintQrCodesModal).tables.set(
+      this.selection.selection().selected.sort((a, b) => a.group.name.localeCompare(b.group.name) || a.number - b.number),
+    );
   }
 }