Update UserEditForm

.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+    "eslint.validate": [
+      "javascript",
+      "javascriptvue",
+      "vue"
+    ],
+    "eslint.format.enable": true,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit"
+    },
+    //"editor.fontFamily": "Cascadia Code",
+    "editor.fontWeight": 200,
+    "editor.fontSize": 15,
+  }

src/app/app-routing.module.ts

@@ -8,6 +8,8 @@ import { ProfileComponent } from './secure/profile/profile.component';
 import { DashboardComponent } from './secure/dashboard/dashboard.component';
 import { PasswordComponent } from './secure/password/password.component';
 import { UsersComponent } from './secure/users/users.component';
+import { UserCreateComponent } from './secure/users/user-create/user-create.component';
+import { UserEditComponent } from './secure/users/user-edit/user-edit.component';
 
 const routes: Routes = [
   {
@@ -17,7 +19,9 @@ const routes: Routes = [
       { path: 'profile', component: ProfileComponent },
       { path: 'password', component: PasswordComponent },
       { path: 'dashboard', component: DashboardComponent },
-      { path: 'users', component: UsersComponent }
+      { path: 'users', component: UsersComponent },
+      { path: 'user-create', component: UserCreateComponent },
+      { path: 'user/:id/edit', component: UserEditComponent },
     ]
   },
   {

src/app/app.module.ts

@@ -14,7 +14,7 @@ import { LogoComponent } from './share/logo/logo.component';
 @NgModule({
   declarations: [
     AppComponent,
-    LogoComponent
+    LogoComponent,
   ],
   imports: [
     BrowserModule,

src/app/classes/auth.ts

@@ -1,6 +1,6 @@
-import { EventEmitter } from '@angular/core';
 import { User } from '../interfaces/user';
+import { BehaviorSubject } from "rxjs";
 
 export class Auth {
-    static userEmitter = new EventEmitter<User>();
+    static userEmitter = new BehaviorSubject<User | undefined>(undefined);
 }

src/app/interfaces/user.ts

@@ -5,5 +5,11 @@ export interface User {
     first_name: string;
     last_name: string;
     email: string;
+    address: string;
+    city: string;
+    zipcode: string;
+    country: string;
+    phone: number;
+    birthday: number;
     role: Role;
 }

src/app/public/public.component.html

@@ -5,7 +5,7 @@
         <div class="row justify-content-center">
           <div class="col-lg-6 col-md-8 d-flex flex-column align-items-center justify-content-center">
             <div class="d-flex justify-content-center py-4">
-              <a href="index.html" class="logo d-flex align-items-center w-auto">
+              <a href="/" class="logo d-flex align-items-center w-auto">
                 <img src="assets/img/logo.png" alt="" />
                 <span class="d-none d-lg-block">Administration</span>
               </a>

src/app/secure/edituser/edituser.component.html

@@ -0,0 +1 @@
+<p>edituser works!</p>

src/app/secure/edituser/edituser.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-edituser',
+  templateUrl: './edituser.component.html',
+  styleUrls: ['./edituser.component.css']
+})
+export class EdituserComponent {
+
+}

src/app/secure/menu/menu.component.css

@@ -1,3 +1,10 @@
 .active {
     text-decoration: underline;
+}
+
+.sidebar_show {
+    left: 0px !important;
+}
+.sidebar_hide {
+    left: -300 !important;
 }

src/app/secure/menu/menu.component.html

@@ -1,5 +1,5 @@
 <!-- ======= Sidebar ======= -->
-<aside id="sidebar" class="sidebar">
+<aside id="sidebar" class="sidebar" [ngClass]="status ? 'sidebar_hide' : 'sidebar_show'">
 
   <ul class="sidebar-nav" id="sidebar-nav">
 
@@ -13,7 +13,7 @@
     <li class="nav-item">
       <a class="nav-link collapsed" routerLink="/profile">
         <i class="bi bi-person"></i>
-        <span>Benutzerprofil</span>
+        <span>Administrator</span>
       </a>
     </li>
 
@@ -37,14 +37,7 @@
         <span>Abmelden</span>
       </a>
     </li>
-
-    <!-- <li class="nav-item">
-      <a class="nav-link collapsed" href="pages-contact.html">
-        <i class="bi bi-envelope"></i>
-        <span>Contact</span>
-      </a>
-    </li>
-
+<!-- 
     <li class="nav-item">
       <a class="nav-link collapsed" href="pages-register.html">
         <i class="bi bi-card-list"></i>

src/app/secure/menu/menu.component.ts

@@ -1,8 +1,12 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Injectable } from '@angular/core';
 import { AuthService } from '../../services/auth.service';
 import { User } from 'src/app/interfaces/user';
 import { Auth } from './../../classes/auth';
 
+@Injectable({
+  providedIn: 'root'
+})
+
 @Component({
   selector: 'app-menu',
   templateUrl: './menu.component.html',
@@ -11,6 +15,12 @@ import { Auth } from './../../classes/auth';
 export class MenuComponent implements OnInit {
 
   user?: User;
+  status: boolean = false;
+
+  public visible() {
+   this.status = !this.status;
+    //return alert('alerto');
+  }
 
   constructor(
     private authService: AuthService,

src/app/secure/nav/nav.component.html

@@ -4,7 +4,7 @@
     <a routerLink="/dashboard" class="logo d-flex align-items-center">
       <span class="d-none d-lg-block">Administrator</span>
     </a>
-<!--     <i class="bi bi-list toggle-sidebar-btn"></i> -->
+<i class="bi bi-list toggle-sidebar-btn" (click)="sidebar.visible()">TOGG</i>
   </div><!-- End Logo -->
 
   <!-- <div class="search-bar">
@@ -14,7 +14,7 @@
     </form>
   </div> --><!-- End Search Bar -->
 
-  <!-- <nav class="header-nav ms-auto">
+  <nav class="header-nav ms-auto">
     <ul class="d-flex align-items-center">
 
       <li class="nav-item d-block d-lg-none">
@@ -163,13 +163,12 @@ <h4>David Muldon</h4>
         </ul>
 
       </li>
-      </li>
 
       <li class="nav-item dropdown pe-3">
 
         <a class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
-          <img src="assets/img/profile-img.jpg" alt="Profile" class="rounded-circle">
-          <span class="d-none d-md-block dropdown-toggle ps-2">K. Anderson</span>
+          <img src="./assets/img/profile-img.jpg" alt="Profile" class="rounded-circle">
+          <span class="d-none d-md-block dropdown-toggle ps-2">Almir</span>
         </a>
 
         <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
@@ -222,6 +221,6 @@ <h6>Kevin Anderson</h6>
       </li>
 
     </ul>
-  </nav> -->
+  </nav>
 
 </header>

src/app/secure/nav/nav.component.ts

@@ -1,18 +1,21 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Injectable, OnInit, inject } from '@angular/core';
 import { AuthService } from '../../services/auth.service';
+import { MenuComponent } from '../menu/menu.component';
 
 @Component({
   selector: 'app-nav',
   templateUrl: './nav.component.html',
   styleUrls: ['./nav.component.css']
 })
 export class NavComponent implements OnInit {
+  status: boolean = false;
 
   constructor(
     private authService: AuthService,
+    public sidebar: MenuComponent,
   ) {}
-
-  ngOnInit() {
 
+  ngOnInit() {
+
   }
 }

src/app/secure/profile/profile.component.html

@@ -1,5 +1,5 @@
 <div class="pagetitle">
-  <h1>Benutzerprofil</h1>
+  <h1>Administrator</h1>
   <nav>
     <ol class="breadcrumb">
       <li class="breadcrumb-item" routerLink="/dashboard"><a href="/">Benutzerdaten</a></li>
@@ -11,21 +11,45 @@ <h1>Benutzerprofil</h1>
     <div class="col-lg-12">
     <div class="card">
     <div class="card-body">
-      <h5 class="card-title">Daten ändern</h5>
+      <h5 class="card-title">Benutzerdaten</h5>
       <form class="row g-3" [formGroup]="profileForm" (submit)="profileSubmit()">
-        <div class="col-12">
+        <div class="col-12 col-sm-6">
           <label for="first_name" class="form-label">Vorname</label>
           <input formControlName="first_name" type="text" class="form-control" id="first_name">
         </div>
-        <div class="col-12">
+        <div class="col-12 col-sm-6">
           <label for="last_name" class="form-label">Nachname</label>
           <input formControlName="last_name" type="text" class="form-control" id="last_name">
         </div>
-        <div class="col-12 mb-3">
+        <div class="col-12 col-sm-6">
+          <label for="birthday" class="form-label">Geburtstag</label>
+          <input formControlName="birthday" type="date" class="form-control" id="birthday">
+        </div>
+        <div class="col-12 col-sm-6">
           <label for="email" class="form-label">E-Mail Adresse</label>
           <input formControlName="email" type="email" class="form-control" id="email">
         </div>
-        <div>
+        <div class="col-12">
+          <label for="phone" class="form-label">Phone</label>
+          <input formControlName="phone" type="text" class="form-control" id="phone">
+        </div>
+        <div class="col-12">
+          <label for="address" class="form-label">Adresse</label>
+          <input formControlName="address" type="text" class="form-control" id="address">
+        </div>
+        <div class="col-12 col-sm-3">
+          <label for="country" class="form-label">Land</label>
+          <input formControlName="country" type="text" class="form-control" id="country">
+        </div>
+        <div class="col-12 col-sm-3">
+          <label for="zipcode" class="form-label">PLZ</label>
+          <input formControlName="zipcode" type="text" class="form-control" id="zipcode">
+        </div>
+        <div class="col-12 col-sm-6">
+          <label for="city" class="form-label">Ort</label>
+          <input formControlName="city" type="text" class="form-control" id="city">
+        </div>
+        <div class="mt-4">
           <button type="submit" class="btn btn-primary">Speichern</button>
         </div>
       </form>

src/app/secure/profile/profile.component.ts

@@ -3,9 +3,6 @@ import { FormGroup } from '@angular/forms';
 import { FormBuilder } from '@angular/forms';
 import { AuthService } from './../../services/auth.service';
 import { Auth } from './../../classes/auth';
-import { Observable } from 'rxjs';
-import { User } from 'src/app/interfaces/user';
-import { BehaviorSubject } from 'rxjs';
 
 @Component({
   selector: 'app-profile',
@@ -25,19 +22,26 @@ export class ProfileComponent implements OnInit {
     this.profileForm = this.formBuilder.group({
       first_name: '',
       last_name: '',
-      email: ''
+      birthday: '',
+      email: '',
+      phone: '',
+      address: '',
+      country: '',
+      zipcode: '',
+      city: '',
+      role: '',
     });
 
-    Auth.userEmitter.subscribe(
-      user => {
+    Auth.userEmitter.subscribe(user => {
+      if(user){
         this.profileForm.patchValue(user);
+        }
       }
     );
   }
 
   profileSubmit(): void {
     this.authService.updateProfile(this.profileForm.getRawValue())
-    .subscribe(user => Auth.userEmitter.emit(user));
+    .subscribe(user => Auth.userEmitter.next(user));
   }
-
 }

src/app/secure/secure.component.ts

@@ -24,5 +24,5 @@ export class SecureComponent implements OnInit {
           this.router.navigate(['/login']);
           return of(err);
         })
-      ).subscribe(user => Auth.userEmitter.emit(user));
-}}
+      ).subscribe(user => Auth.userEmitter.next(user));
+}}

src/app/secure/secure.module.ts

@@ -12,6 +12,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { UsersComponent } from './users/users.component';
 import { UserCreateComponent } from './users/user-create/user-create.component';
 import { FooterComponent } from './footer/footer.component';
+import { UserEditComponent } from './users/user-edit/user-edit.component';
 
 @NgModule({
   declarations: [
@@ -24,7 +25,8 @@ import { FooterComponent } from './footer/footer.component';
     PasswordComponent,
     UsersComponent,
     UserCreateComponent,
-    FooterComponent
+    FooterComponent,
+    UserEditComponent,
   ],
   imports: [
     CommonModule,