#12 change structure of settings.json to conform with backend structure

apps/client/src/app/pages/dashboard/dashboard.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { Observable } from 'rxjs';
+import { Observable, tap } from 'rxjs';
 import { UserService } from '../../services/user.service';
 import { User } from '@money-sprouts/shared/domain';
 
@@ -42,9 +42,9 @@ export class DashboardComponent implements OnInit {
     const urlSegments = this.router.url.split('/');
     this.username = urlSegments[2];
     this.user$ = this.settings.fetchUser(this.username).pipe(
-      tap((user) => {
+      tap((user: User) => {
         if (user) {
-          this.username = user.username;
+          this.username = user.name;
           console.log('User data:', user);
         } else {
           console.error('User data not available');

apps/client/src/app/services/user.service.ts

@@ -33,7 +33,8 @@ export class UserService {
 
   fetchUser(username: string): Observable<User | null> {
     const currentUser = this.userSubject.getValue();
-    if (currentUser && currentUser.username === username) {
+    if (currentUser && currentUser.name === username) {
+      console.log('currentUser.name')
       // Return the current user without making a network request if the user is already present
       return of(currentUser);
     }

apps/client/src/assets/settings.json

@@ -1,10 +1,40 @@
 [
   {
-    "username": "THEA",
-    "avatar": "assets/images/avatar_female.png"
+    "@id": "/api/users/1",
+    "@type": "User",
+    "id": 1,
+    "email": "[email protected]",
+    "name": "THEA",
+    "roles": ["ROLE_USER"],
+    "password": "$2y$13$oPKDGHh.3nTCe0ZKHzGVIuIihrx90RMgCtoX7.b1mvZCFD60L9TWq",
+    "allowance": 310,
+    "avatar": "/build/assets/images/avatar_female.png",
+    "transactions": [
+      "/api/transactions/1",
+      "/api/transactions/4",
+      "/api/transactions/6",
+      "/api/transactions/7",
+      "/api/transactions/8",
+      "/api/transactions/10"
+    ],
+    "userIdentifier": "[email protected]"
   },
   {
-    "username": "ROBERT",
-    "avatar": "assets/images/avatar_male.png"
+    "@id": "/api/users/2",
+    "@type": "User",
+    "id": 2,
+    "email": "[email protected]",
+    "name": "ROBERT",
+    "roles": ["ROLE_USER"],
+    "password": "$2y$13$VNdZsI6clow.zdau7OErJOcp/HFEYwPWtEuIuNoTYYIdXD7pgZX7G",
+    "allowance": 921,
+    "avatar": "/build/assets/images/avatar_male.png",
+    "transactions": [
+      "/api/transactions/2",
+      "/api/transactions/3",
+      "/api/transactions/5",
+      "/api/transactions/9"
+    ],
+    "userIdentifier": "[email protected]"
   }
-]
+]

apps/client/src/shared/page-header/page-header.component.ts

@@ -1,71 +1,71 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { UserService } from '../../app/services/user.service';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { User } from '@money-sprouts/shared/domain';
 
 @Component({
-    selector: 'money-sprouts-page-header',
-    templateUrl: './page-header.component.html',
-    styleUrls: ['./page-header.component.scss'],
+  selector: 'money-sprouts-page-header',
+  templateUrl: './page-header.component.html',
+  styleUrls: ['./page-header.component.scss'],
 })
 export class PageHeaderComponent implements OnInit {
-    childClass: string;
-    username: string;
-    user$: Observable<User | null>;
-    urlSegments: string;
-    logout = 'Logout';
+  childClass: string;
+  username: string;
+  user$: Observable<User | null>;
+  urlSegments: string;
+  logout = 'Logout';
 
-    constructor(private router: Router, private settings: UserService) {}
+  constructor(private router: Router, private settings: UserService) {}
 
-    ngOnInit() {
-        const urlSegments = this.router.url.split('/');
-        this.username = urlSegments[2];
+  ngOnInit() {
+    const urlSegments = this.router.url.split('/');
+    this.username = urlSegments[2];
 
-        this.settings.user$.subscribe((user: User | null) => {
-            // Only fetch the user if no user is present or the username has changed
-            if (!user || user.username !== this.username) {
-                this.settings
-                    .fetchUser(this.username)
-                    .subscribe((fetchedUser: User | null) => {
-                        this.user$ = of(fetchedUser);
-                    });
-            } else {
-                // Assign the user to this.user$
-                this.user$ = of(user);
-            }
-        });
-    }
+    this.settings.user$.subscribe((user: User | null) => {
+      // Only fetch the user if no user is present or the username has changed
+      if (!user || user.name !== this.username) {
+        this.settings
+          .fetchUser(this.username)
+          .subscribe((fetchedUser: User | null) => {
+            this.user$ = of(fetchedUser);
+          });
+      } else {
+        // Assign the user to this.user$
+        this.user$ = of(user);
+      }
+    });
+  }
 
-    backToDashboard() {
-        if (this.urlSegments !== 'dashboard') {
-            this.router.navigate([`user/${this.username}/dashboard`]);
-        } else {
-            return;
-        }
+  backToDashboard() {
+    if (this.urlSegments !== 'dashboard') {
+      this.router.navigate([`user/${this.username}/dashboard`]);
+    } else {
+      return;
     }
+  }
 
-    backToSelection() {
-        this.router.navigate(['userselection']);
-    }
+  backToSelection() {
+    this.router.navigate(['userselection']);
+  }
 
-    get pageTitle(): string {
-        const pageName = this.router.url.split('/')[3];
-        switch (pageName) {
-            case 'dashboard':
-                return 'Dashboard';
-            case 'overview':
-                return 'Overview';
-            case 'history':
-                return 'History';
-            case 'plan':
-                return 'Plan';
-            default:
-                return '';
-        }
+  get pageTitle(): string {
+    const pageName = this.router.url.split('/')[3];
+    switch (pageName) {
+      case 'dashboard':
+        return 'Dashboard';
+      case 'overview':
+        return 'Overview';
+      case 'history':
+        return 'History';
+      case 'plan':
+        return 'Plan';
+      default:
+        return '';
     }
+  }
 
-    handleClassChange(cssClass: string) {
-        this.childClass = cssClass;
-    }
+  handleClassChange(cssClass: string) {
+    this.childClass = cssClass;
+  }
 }

docker-compose.yml

@@ -46,7 +46,7 @@ services:
       - symfony_net
 
   db_admin:
-    image: arm64v8/phpmyadmin:5.2
+    image: phpmyadmin/phpmyadmin:5.2
     container_name: '${APP_NAME}-db-admin'
     ports:
       - '${APP_DB_ADMIN_PORT}:80'

package.json

@@ -6,7 +6,7 @@
     "start-all": "nx run-many --target=serve --projects=client,server",
     "start-client": "nx serve client",
     "start-server": "nx serve server",
-    "build:dev": "nx run client:build --configuration=development",
+    "build:dev": "nx run client:build:development --watch",
     "generate:interfaces": "npm init @api-platform/client http://localhost:8101/api/ libs/shared/domain/src/ -- --generator typescript"
   },
   "private": true,

src/Controller/HomeController.php

@@ -14,7 +14,11 @@ class HomeController extends AbstractController
     #[Route(
         '/{page}',
         name: 'app_frontend',
-        condition: "params['page'] not in ['admin','login','logout']"
+        condition: "params['page'] not in ['admin','login','logout', 'api']"
+    )]
+    #[Route(
+        '/user/{user}/{page}',
+        name: 'app_user_page'
     )]
     public function index(): Response
     {