Feature: Benutzerdaten ändern (inkl. Profilbild)

.prettierrc.json

@@ -4,6 +4,7 @@
   "singleQuote": true,
   "printWidth": 80,
   "tabWidth": 2,
+  "endOfLine": "auto",
   "overrides": [
     { "files": "*.html", "options": { "parser": "html" } },
     { "files": "*.component.html", "options": { "parser": "angular" } }

src/app/app-routing.module.ts

@@ -9,6 +9,7 @@ import { DashboardComponent } from './components/dashboard/dashboard.component';
 import { QrScannerComponent } from './components/qr-scanner/qr-scanner.component';
 import { QuizComponent } from './components/quiz/quiz.component';
 import { UserComponent } from './components/user/user.component';
+import { UserCardComponent } from './components/user-card/user-card.component';
 
 const routes: Routes = [
   {
@@ -25,6 +26,10 @@ const routes: Routes = [
         path: 'admin',
         component: AdminComponent,
       },
+      {
+        path: 'card',
+        component: UserCardComponent,
+      },
       {
         path: 'cards',
         component: CardsComponent,

src/app/app.component.html

@@ -1,7 +1,10 @@
 <div *ngIf="loading$ | async" class="flex h-screen justify-center items-center">
   <app-loader></app-loader>
 </div>
-<div *ngIf="error$ | async" class="flex h-screen items-center p-2">
+<div
+  *ngIf="error$ | async"
+  class="flex h-screen items-center justify-center p-2"
+>
   <app-alert [message]="(error$ | async)!"></app-alert>
 </div>
 <ng-container *ngIf="!((loading$ | async) || (error$ | async))">

src/app/app.module.ts

@@ -1,9 +1,10 @@
-import { NgOptimizedImage, registerLocaleData } from '@angular/common';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import localeDeCh from '@angular/common/locales/de-CH';
 import { LOCALE_ID, NgModule, isDevMode } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { NgOptimizedImage, registerLocaleData } from '@angular/common';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatPaginatorModule } from '@angular/material/paginator';
@@ -54,6 +55,8 @@ import { CardsComponent } from './components/cards/cards.component';
 import { DashboardComponent } from './components/dashboard/dashboard.component';
 import { FieldComponent } from './components/field/field.component';
 import { HeaderComponent } from './components/header/header.component';
+import { EditUserCardComponent } from './components/edit-user-card/edit-user-card.component';
+import { UserCardComponent } from './components/user-card/user-card.component';
 import { LoaderComponent } from './components/loader/loader.component';
 import { NavigationComponent } from './components/navigation/navigation.component';
 import { PanelComponent } from './components/panel/panel.component';
@@ -66,10 +69,12 @@ import { UserComponent } from './components/user/user.component';
 import { CardEffects } from './state/card/card.effects';
 import { DashboardEffects } from './state/dashboard/dashboard.effects';
 import { DistributionEffects } from './state/distribution/distribution.effects';
-import { QuizEffects } from './state/quiz/quiz.effects';
 import { reducers } from './state/reducers';
 import { TransferEffects } from './state/transfer/transfer.effects';
 import { UserEffects } from './state/user/user.effects';
+import { InitialCardCreationDialogComponent } from './components/initial-card-creation-dialog/initial-card-creation.dialog';
+import { QuizEffects } from './state/quiz/quiz.effects';
+import { PictureEffects } from './state/picture/picture.effects';
 
 registerLocaleData(localeDeCh);
 
@@ -143,6 +148,9 @@ export function MSALGuardConfigFactory(): MsalGuardConfiguration {
     FieldComponent,
     AlertComponent,
     AdminComponent,
+    EditUserCardComponent,
+    UserCardComponent,
+    InitialCardCreationDialogComponent,
     QuizComponent,
     QuizQuestionComponent,
   ],
@@ -157,6 +165,9 @@ export function MSALGuardConfigFactory(): MsalGuardConfiguration {
     MatSlideToggleModule,
     MatSelectModule,
     MatPaginatorModule,
+    MatDialogModule,
+    ReactiveFormsModule,
+    FormsModule,
     ServiceWorkerModule.register('ngsw-worker.js', {
       enabled: !isDevMode(),
       // Register the ServiceWorker as soon as the application is stable
@@ -180,6 +191,7 @@ export function MSALGuardConfigFactory(): MsalGuardConfiguration {
       UserEffects,
       TransferEffects,
       QuizEffects,
+      PictureEffects,
     ]),
     MatSliderModule,
     MatSnackBarModule,

src/app/components/button/button.component.html

@@ -1,20 +1,18 @@
 <button
-  class="flex items-center px-2 py-1 space-x-2 border-2 no-tap-highlight"
+  class="flex items-center px-2 py-1 space-x-2 border-2 no-tap-highlight active:brightness-125"
   [disabled]="disabled"
   [ngClass]="{
     'border-light-blue text-light-blue': outlined && color === 'blue',
-    'border-dark-blue bg-dark-blue active:bg-light-blue':
-      !outlined && color === 'blue',
+    'border-dark-blue bg-dark-blue': !outlined && color === 'blue',
     'border-light-green text-light-green': outlined && color === 'green',
-    'border-dark-green bg-dark-green active:bg-light-green':
-      !outlined && color === 'green',
+    'border-dark-green bg-dark-green': !outlined && color === 'green',
     'border-light-pink text-light-pink': outlined && color === 'pink',
-    'border-dark-pink bg-dark-pink active:bg-light-pink':
-      !outlined && color === 'pink',
+    'border-dark-pink bg-dark-pink': !outlined && color === 'pink',
     'border-light-red text-light-red': outlined && color === 'red',
-    'border-dark-red bg-dark-red active:bg-light-red':
-      !outlined && color === 'red',
-    'w-full': fullWidth
+    'border-dark-red bg-dark-red': !outlined && color === 'red',
+    'w-full': fullWidth,
+    'active:brightness-100': disabled,
+    'opacity-60': transparent
   }"
 >
   <span *ngIf="symbol" class="material-symbols-outlined">{{ symbol }}</span>

src/app/components/button/button.component.ts

@@ -12,4 +12,5 @@ export class ButtonComponent {
   @Input() outlined = false;
   @Input() fullWidth = false;
   @Input() centerText = false;
+  @Input() transparent = false;
 }

src/app/components/card-detail/card-detail.component.ts

@@ -1,6 +1,7 @@
 import {
   Component,
   ElementRef,
+  Input,
   OnDestroy,
   OnInit,
   ViewChild,
@@ -22,6 +23,8 @@ import {
   templateUrl: './card-detail.component.html',
 })
 export class CardDetailComponent implements OnInit, OnDestroy {
+  @Input() isInitialUserCreation = false;
+
   @ViewChild('image') image!: ElementRef;
 
   loading$?: Observable<boolean>;

src/app/components/edit-user-card/edit-user-card.component.html

@@ -0,0 +1,117 @@
+<input
+  style="display: none"
+  type="file"
+  id="chooseImage"
+  accept="image"
+  capture
+  height="100%"
+  #chooseImage
+  (change)="uploadPicture($event.target)"
+/>
+
+<div class="w-full aspect-square flex items-center justify-center relative">
+  <img
+    #image
+    [hidden]="pictureLoading$ | async"
+    [src]="picture$ | async"
+    (error)="onImageMissing(image)"
+    class="w-full h-full object-cover absolute"
+    alt="Card image"
+  />
+
+  <button
+    class="absolute right-0 bottom-0 m-4 w-14 h-14 bg-dark-pink rounded-full no-tap-highlight active:bg-light-pink shadow z-20"
+    (click)="chooseImage.click()"
+  >
+    <span class="material-symbols-outlined align-middle text-white">edit</span>
+  </button>
+
+  <div
+    *ngIf="pictureLoading$ | async"
+    class="flex w-full h-full items-center justify-center bg-black bg-opacity-70 z-30"
+  >
+    <app-loader></app-loader>
+  </div>
+
+  <div
+    *ngIf="pictureError$ | async"
+    class="flex w-full h-full items-center justify-center bg-black bg-opacity-70 z-10"
+  >
+    <app-alert [message]="(pictureError$ | async)!"></app-alert>
+  </div>
+</div>
+<p class="text-xs text-light-gray opacity-60 p-2">
+  Es kann ein paar Minütchen dauern bis das Bild auf dem Chärtli erscheint.
+  Eventual consistency!
+</p>
+
+<div *ngIf="cardLoading$ | async" class="flex justify-center">
+  <app-loader></app-loader>
+</div>
+
+<app-alert
+  *ngIf="cardError$ | async"
+  [message]="'Infos konnten nicht geladen werden.'"
+></app-alert>
+
+<form
+  *ngIf="!((cardLoading$ | async) || (cardError$ | async))"
+  class="flex flex-col"
+  [formGroup]="userForm"
+  (ngSubmit)="updateUser()"
+>
+  <mat-form-field>
+    <mat-label>Mein Kürzel</mat-label>
+    <input
+      matInput
+      formControlName="acronymInput"
+      oninput="this.value = this.value.toUpperCase()"
+    />
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Ich bin bei der ipt seit</mat-label>
+    <input matInput type="date" formControlName="startDateInput" />
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Meine Rolle</mat-label>
+    <mat-select formControlName="jobInput">
+      <mat-option></mat-option>
+      @for (job of jobs; track job) {
+      <mat-option [value]="job">{{ job }}</mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Da würde ich am liebsten mal hinreisen</mat-label>
+    <input matInput formControlName="wishDestinationInput" />
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Für einen Tag tauschen würde ich mit</mat-label>
+    <input matInput formControlName="wishPersonInput" />
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Das wollte ich schon immer mal erlernen</mat-label>
+    <input matInput formControlName="wishSkillInput" />
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Der beste Ratschlag</mat-label>
+    <input matInput formControlName="bestAdviceInput" />
+  </mat-form-field>
+
+  <div class="flex justify-center">
+    <app-button
+      [disabled]="isCardInvalid()"
+      [transparent]="isCardInvalid()"
+      text="Update"
+      symbol="save"
+      color="pink"
+      class="text-white"
+    ></app-button>
+  </div>
+</form>