user Form

-pushing the work of last week

src/app/app.module.ts

@@ -51,6 +51,12 @@ import { FormDialogComponent } from './module/components/customUX/forms/form-dia
 import { AlertComponent } from './module/components/customUX/alert/alert.component'
 import { MatSnackBarModule } from '@angular/material/snack-bar'
 import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import { AdminDashComponent } from './module/pages/admin-dash/admin-dash.component';
+import {MatPaginatorModule} from "@angular/material/paginator";
+import {MatSort, MatSortModule} from "@angular/material/sort";
+import {MatTableModule} from "@angular/material/table";
+import {MatMenuModule} from "@angular/material/menu";
+import { FormUserComponent } from './module/components/customUX/forms/form-user/form-user.component';
 
 const MY_DATE_FORMATS: MatDateFormats = {
     parse: {
@@ -89,33 +95,44 @@ const MY_DATE_FORMATS: MatDateFormats = {
         StationConfigComponent,
         FormDialogComponent,
         AlertComponent,
+        AdminDashComponent,
+        FormUserComponent,
+
+
     ],
-    imports: [
-        BrowserModule,
-        AppRoutingModule,
-        ReactiveFormsModule,
-        HttpClientModule,
-        FormsModule,
-        BrowserAnimationsModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatSelectModule,
-        MatDatepickerModule,
-        MatInputModule,
-        MatNativeDateModule,
-        MatAutocompleteModule,
-        MatCheckboxModule,
-        MatButtonModule,
-        ApiModule,
-        MatSliderModule,
-        MatCardModule,
-        MatDatepickerModule,
-        NativeDateModule,
-        MomentDateModule,
-        MatTreeModule,
-        MatSnackBarModule,
-        MatProgressSpinnerModule,
-    ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    ReactiveFormsModule,
+    HttpClientModule,
+    FormsModule,
+    BrowserAnimationsModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatDatepickerModule,
+    MatInputModule,
+    MatNativeDateModule,
+    MatAutocompleteModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    ApiModule,
+    MatSliderModule,
+    MatCardModule,
+    MatDatepickerModule,
+    NativeDateModule,
+    MomentDateModule,
+    MatTreeModule,
+    MatSnackBarModule,
+    MatProgressSpinnerModule,
+    MatTableModule,
+    MatSortModule,
+    MatProgressSpinnerModule,
+    MatInputModule,
+    MatPaginatorModule,
+    MatMenuModule,
+
+  ],
     //Todo remove old swagger client
     providers: [
         EventEmitterService,

src/app/module/components/customUX/forms/form-user/form-user.component.html

+<div
+  *ngIf='isOpen'
+  class='fixed flex inset-0 flex items-center justify-center z-50 '
+>
+  <div class='bg-white  max-w-lg rounded-lg p-6 sm:px-10  flex-row flex-wrap overflow-y-scroll max-h-[90vh]'>
+    <!-- Modal header -->
+    <div
+      class='flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600  '>
+      <h3 class='text-xl font-semibold text-gray-900'>
+        <ng-container *ngIf="dataSubject.isNew">Add new User</ng-container>
+        <ng-container *ngIf="!dataSubject.isNew">Edit User</ng-container>
+      </h3>
+      <button
+        (click)='closeModal()'
+        class='text-gray-400 bg-transparent  border  border-white hover:border-gray-200  rounded-lg text-sm p-1.5 ml-auto inline-flex items-center'
+        data-modal-hide='staticModal'
+        type='button'
+      >
+        <svg
+          class='w-5 h-5'
+          fill='currentColor'
+          viewBox='0 0 20 20'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <path
+            clip-rule='evenodd'
+            d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z'
+            fill-rule='evenodd'
+          ></path>
+        </svg>
+      </button>
+    </div>
+
+      <main  class="sm:w-96 w-full">
+
+        <form  [formGroup]='userForm'>
+          <div class='relative z-0 w-full mb-6 group '>
+            <mat-form-field appearance='fill' class='w-full'  appearance="outline">
+              <mat-label>Username</mat-label>
+              <input formControlName='username' matInput />
+              <mat-error> Bitte füllen Sie den Usernamen aus</mat-error>
+            </mat-form-field>
+          </div>
+
+          <div class='relative z-0 w-full mb-6 group'>
+            <mat-form-field appearance='fill' class='w-full'  appearance="outline">
+              <mat-label>Passwort</mat-label>
+              <input formControlName='password' matInput />
+              <mat-error> Bitte füllen Sie das Passwort aus</mat-error>
+            </mat-form-field>
+          </div>
+
+          <div class='relative z-0 w-full mb-6 group'>
+            <mat-form-field appearance='fill' class='w-full'  appearance="outline">
+              <mat-label>email</mat-label>
+              <input formControlName='email' matInput />
+              <mat-error> Bitte füllen Sie die email aus</mat-error>
+            </mat-form-field>
+          </div>
+
+          <div class='relative z-0 w-full mb-6 group'>
+            <mat-form-field appearance='fill' class='w-full'  appearance="outline">
+              <mat-label>Rollen</mat-label>
+              <input formControlName='roles' matInput />
+              <mat-error> Bitte füllen Sie die rollen</mat-error>
+            </mat-form-field>
+          </div>
+
+        </form>
+      </main>
+    <button mat-raised-button color="primary" (click)="onSubmit()">Save</button>
+    <ng-container *ngIf="dataSubject.isNew">
+      1
+    </ng-container>
+    2
+    <ng-container *ngIf="!dataSubject.isNew">Edit User</ng-container>
+  </div>
+</div>
+
+<div *ngIf='isOpen' class='fixed inset-0 bg-black opacity-50'></div>
+
+<div  class="fixed top-0 left-1/2 transition duration-500 ease-in-out -translate-x-1/2 z-50">
+  <app-alert *ngIf="toastVisible" message="{{toastMessage}}" type="{{toastType}}"></app-alert>
+</div>

src/app/module/components/customUX/forms/form-user/form-user.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormUserComponent } from './form-user.component';
+
+describe('FormUserComponent', () => {
+  let component: FormUserComponent;
+  let fixture: ComponentFixture<FormUserComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [FormUserComponent]
+    });
+    fixture = TestBed.createComponent(FormUserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/module/components/customUX/forms/form-user/form-user.component.ts

+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Observable} from "rxjs";
+import {userDataSubject} from "../../../../../shared/model/transaktionModels/userDataSubject";
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
+import {UserControllerService} from "../../../../../../../projects/generated-api/src";
+
+@Component({
+  selector: 'app-form-user',
+  templateUrl: './form-user.component.html',
+  styleUrls: ['./form-user.component.css']
+})
+export class FormUserComponent implements OnInit{
+
+  userForm: FormGroup
+
+  //variable for opening and closing the dialog
+  isOpen: boolean = false
+  closeModal(): void {
+    this.isOpen = false
+  }
+
+  openModal(): void {
+    this.isOpen = true
+  }
+
+  //data from the parent
+  // @ts-ignore
+  @Input() events$: Observable<userDataSubject>
+  //this is the current data of the user from the parent
+  public dataSubject: userDataSubject = {
+    isNew: false,
+    id: '',
+    username: '',
+    email: '',
+    roles: ['']
+  }
+
+  toastVisible = false
+  toastType = ''
+  toastMessage = ''
+
+  constructor(  private fb: FormBuilder,
+                private userControllerService:UserControllerService) {
+    this.userForm= this.fb.group({
+      username: ['', Validators.required],
+      password: ['', Validators.required],
+      email: ['', Validators.required],
+      roles: ['', Validators.required],
+    })
+  }
+  ngOnInit(): void {
+
+
+
+    this.events$.subscribe((passedElement) => {
+      this.userForm.controls['username'].setValue(passedElement.username)
+      this.userForm.controls['email'].setValue(passedElement.email)
+      this.userForm.controls['roles'].setValue(passedElement.roles)
+      this.openModal();
+      console.debug(
+        'got subjectData from parent: ',
+        passedElement,
+      )})
+  }
+
+  onSubmit() {
+    const onSuccess = () => {
+      this.toastMessage = 'Erfolgreich: Speichern erfolgreich';
+      this.toastType = "success";
+      this.toastVisible = true;
+      setTimeout(() => {
+        this.toastVisible = false;
+      },3000)
+    };
+
+    //alert Message error
+    const onError = () => {
+      this.toastMessage = 'Fehler: Speichern fehlgeschlagen probieren Sie einen anderen Benutzernamen';
+      this.toastType = "error";
+      this.toastVisible = true;
+      setTimeout(() => {
+        this.toastVisible = false;
+      },3000)
+    };
+
+    if(this.userForm.invalid){
+      this.toastMessage = 'Fehler: Bitte füllen Sie alle Felder aus';
+      this.toastType = "error";
+      this.toastVisible = true;
+      setTimeout(() => {
+        this.toastVisible = false;
+      },3000)
+    }
+    else{
+      this.userControllerService.registerUser(
+        {
+          username: this.userForm.value.username,
+          email: this.userForm.value.email,
+          password: this.userForm.value.password,
+          roles: [this.userForm.value.roles]
+        }
+      )
+        .subscribe(
+          (x) => {
+            onSuccess()
+            this.isOpen= false
+          },
+          (error) => {
+            console.log(error)
+            onError()
+          })
+    }
+
+
+  }
+}

src/app/module/pages/admin-dash/admin-dash.component.html

+<!--
+<table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)"
+       class="mat-elevation-z8">
+
+  <ng-container matColumnDef="position">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by number">
+      No.
+    </th>
+    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+  </ng-container>
+
+
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by name">
+      Name
+    </th>
+    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+  </ng-container>
+
+
+  <ng-container matColumnDef="weight">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by weight">
+      Weight
+    </th>
+    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+  </ng-container>
+
+
+  <ng-container matColumnDef="symbol">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by symbol">
+      Symbol
+    </th>
+    <td mat-cell *matCellDef="let element"> {{element.symbol}}
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="actions">
+    <th mat-header-cell *matHeaderCellDef>
+      Actions
+    </th>
+    <td mat-cell *matCellDef="let element">
+      <button  mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item>Edit <mat-icon>edit</mat-icon> </button>
+        <button mat-menu-item>Delete <mat-icon>delete</mat-icon></button>
+      </mat-menu>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
+-->
+<div class="flex w-full justify-end p-4">
+  <button mat-raised-button color="primary" (click)="this.eventsSubject.next({id:'',username:'',email:'',roles:[],isNew:true})">Add User</button>
+</div>
+<table mat-table [dataSource]="dataSource2" matSort (matSortChange)="announceSortChange($event)"
+       class="mat-elevation-z8">
+
+  <!-- Position Column -->
+  <ng-container matColumnDef="id">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by id">
+      ID
+    </th>
+    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="username">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by username">
+      usrname
+    </th>
+    <td mat-cell *matCellDef="let element"> {{element.username}} </td>
+  </ng-container>
+
+  <!-- Weight Column -->
+  <ng-container matColumnDef="email" >
+    <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by email">
+      email
+    </th>
+    <td mat-cell *matCellDef="let element"> {{element.email}} </td>
+  </ng-container>
+
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="roles">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by roles">
+      roles
+    </th>
+    <td mat-cell *matCellDef="let element"> {{element.roles}}
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="actions">
+    <th mat-header-cell *matHeaderCellDef>
+      Actions
+    </th>
+    <td mat-cell *matCellDef="let element">
+      <button  mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item (click)="  this.eventsSubject.next({id:element.id,username:element.username,email:element.email,roles:element.roles,isNew:true})">Edit <mat-icon>edit</mat-icon> </button>
+        <button mat-menu-item>Delete <mat-icon>delete</mat-icon></button>
+      </mat-menu>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns2"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns2;"></tr>
+</table>
+
+<app-form-user
+[events$]="eventsSubject"
+>
+
+</app-form-user>
+
+<!-- Copyright 2023 Google LLC. All Rights Reserved.
+    Use of this source code is governed by an MIT-style license that
+    can be found in the LICENSE file at https://angular.io/license -->

src/app/module/pages/admin-dash/admin-dash.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminDashComponent } from './admin-dash.component';
+
+describe('AdminDashComponent', () => {
+  let component: AdminDashComponent;
+  let fixture: ComponentFixture<AdminDashComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AdminDashComponent]
+    });
+    fixture = TestBed.createComponent(AdminDashComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/module/pages/admin-dash/admin-dash.component.ts

+import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
+import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator';
+import {MatTableDataSource, MatTableModule} from '@angular/material/table';
+import {Sort} from "@angular/material/sort";
+import {LiveAnnouncer} from "@angular/cdk/a11y";
+import {MatSort} from "@angular/material/sort";
+import {UserModel} from "../admin/userManagment/user.model";
+import {ApiService} from "../../../shared/api.service";
+import {UserControllerService} from "../../../../../projects/generated-api/src";
+import {Subject} from "rxjs";
+import {userDataSubject} from "../../../shared/model/transaktionModels/userDataSubject";
+
+@Component({
+  selector: 'app-admin-dash',
+  templateUrl: './admin-dash.component.html',
+  styleUrls: ['./admin-dash.component.css'],
+
+})
+
+
+
+export class AdminDashComponent implements OnInit {
+
+
+  TABLEDATA: User[] = [
+    {token: 'Hydrogen', id: '1', username: '1.0079', email: 'H', roles: ['H']},
+    {token: 'Hydrogen', id: '2', username: '1.0079', email: 'H', roles: ['H']},
+    {token: 'Hydrogen', id: '3', username: '1.0079', email: 'H', roles: ['H']},
+  ]
+
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol','actions'];
+  displayedColumns2: string[] = ['id', 'username', 'email', 'roles','actions'];
+  dataSource = new MatTableDataSource(ELEMENT_DATA);
+  dataSource2 = new MatTableDataSource(this.TABLEDATA);
+
+
+  eventsSubject: Subject<userDataSubject> = new Subject<userDataSubject>()
+
+
+  constructor(private _liveAnnouncer: LiveAnnouncer,  private api: ApiService,
+              private userController:UserControllerService) {}
+  getAllUsers() {
+  this.userController.getAllUsers().subscribe((res)=>{
+   this.TABLEDATA=res;
+    console.log(this.TABLEDATA)
+    this.dataSource2 = new MatTableDataSource(this.TABLEDATA);
+  })
+  }
+
+  ngOnInit(): void {
+  this.getAllUsers()
+  }
+
+
+//@ts-ignore
+  @ViewChild(MatSort) sort: MatSort;
+
+  ngAfterViewInit() {
+    this.dataSource.sort = this.sort;
+  }
+
+  /** Announce the change in sort state for assistive technology. */
+  announceSortChange(sortState: Sort) {
+    // This example uses English messages. If your application supports
+    // multiple language, you would internationalize these strings.
+    // Furthermore, you can customize the message to add additional
+    // details about the values being sorted.
+    if (sortState.direction) {
+      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
+    } else {
+      this._liveAnnouncer.announce('Sorting cleared');
+    }
+  }
+
+  transaktion(number: number) {
+    console.log(number)
+  }
+
+}
+
+
+
+export interface User{
+  token?: string;
+  id?: string;
+  username?: string;
+  email?: string;
+  roles?: Array<string>;
+}
+
+let ELEMENT_DATA: User[] = [];

src/app/shared/model/transaktionModels/userDataSubject.ts

+export interface userDataSubject{
+  isNew: boolean;
+  id: string;
+  username: string,
+  email: string,
+  roles: string[]
+}

[Zoe Michaela Dietmar Pfister]

Please create a new branch for this feature @csba1652. You can branch of development