fixed problem about user.id in new user creation

db.json

@@ -2,7 +2,7 @@
   "users": [
     {
       "id": "b5be",
-      "name": "Simone",
+      "name": "Sofia",
       "lastname": "Ventura",
       "email": "bisc@gmail.com",
       "fiscalcode": "RSAHRN72M22Z444S",
@@ -11,14 +11,24 @@
       "age": 12
     },
     {
-      "id": 0,
-      "name": "Giulia",
+      "id": "3",
+      "name": "Antonio",
       "lastname": "Diomede",
       "email": "flavio.bonta@gmail.com",
       "fiscalcode": "675t967t6g",
       "province": "pe",
       "phone": "23453453454",
       "age": 34
+    },
+    {
+      "id": "7tc",
+      "name": "Manto",
+      "lastname": "Diomede",
+      "email": "flavio.bonta@gmail.com",
+      "fiscalcode": "8976543",
+      "province": "pe",
+      "phone": "23453453454",
+      "age": 18
     }
   ]
 }

src/app/classes/user.ts

@@ -2,7 +2,7 @@ import { UserInterface } from "../interfaces/user";
 
 export class User implements UserInterface{
 
-    id:number;
+    id:string;
     name: string;
     lastname: string;
     email: string;
@@ -11,7 +11,7 @@ export class User implements UserInterface{
     phone: string;
     age: number;
     constructor(){
-        this.id = 0;
+        this.id = '0';
         this.name = '';
         this.lastname = '';
         this.email = '';

src/app/interfaces/user.ts

@@ -1,5 +1,5 @@
 export interface UserInterface {
-    id:number
+    id:string
     name: string;
     lastname: string;
     email: string;

src/app/nav/nav.component.html

@@ -9,9 +9,7 @@
         <li class="nav-item active">
           <a class="nav-link" href="#" routerLink="/">Home <span class="sr-only">(current)</span></a>
         </li>
-        <li class="nav-item active">
-            <a class="nav-link" href="#" routerLink="users">Home <span class="sr-only">(current)</span></a>
-          </li>
+        
         <li class="nav-item active">
           <a  href="#"  class="nav-link" routerLink="users/new" >New User</a>
         </li>

src/app/services/user.service.ts

@@ -28,9 +28,21 @@ export  class UserService{
       return this.http.put<User[]>(this.apiurl + '/' + user.id, user);
 
     }
+    makeString(): string {
+      let outString: string = '';
+      let inOptions: string = 'abcdefghijklmnopqrstuvwxyz0123456789';
+      
+      for (let i = 0; i < 4; i++) {
+      
+      outString += inOptions.charAt(Math.floor(Math.random() * inOptions.length));
+      
+      }
+      
+      
+      return outString;
+      }
 
     deleteUser(user: User){
-      alert(user.id);
       return this.http.delete<User[]>(this.apiurl + '/' + user.id);
 
 

src/app/user-data/user-data.component.html

@@ -1 +1,14 @@
-<p>{{user | json}}</p>
+<div class="col-lg-6 col-xxl-4 my-5 mx-auto">
+    <div class="d-grid gap-2">
+      <button class="btn btn-outline-secondary" type="button" >{{user.name}}</button>
+      <button class="btn btn-outline-secondary" type="button" >{{user.lastname}}</button>
+      <button class="btn btn-outline-secondary" type="button" >{{user.email}}</button>
+      <button class="btn btn-outline-secondary" type="button" >{{user.fiscalcode}}</button>
+      <button class="btn btn-outline-secondary" type="button" >{{user.province}}</button>
+      <button class="btn btn-outline-secondary" type="button" >{{user.phone}}</button>
+      <button class="btn btn-outline-secondary" type="button" >{{user.age}}</button>
+
+
+      <button class="btn btn-primary" type="button" routerLink="../">Back to Home</button>
+    </div>
+  </div>

src/app/user-data/user-data.component.ts

@@ -11,18 +11,21 @@ import { UserInterface } from '../interfaces/user';
   styleUrl: './user-data.component.css'
 })
 export class UserDataComponent implements OnInit {
-  public user: UserInterface | undefined;
+  public user = new User;
 
   constructor(private userService: UserService, private route: ActivatedRoute){
 
   }
   ngOnInit(): void {
-    this.route.params.subscribe((param) => {
-      const id = Number(param['id']);
+    this.route.params.subscribe( param => {
+      if(param['id']){
+        const id = (param['id']);
         this.userService.getUser(id)
-        .subscribe(user=> this.user = user)
+        .subscribe(user => this.user = user);
+        
       }
-    )
+     } )
+    
   }
 
 }

src/app/user-detail/user-detail.component.ts

@@ -10,6 +10,7 @@ import { Router } from '@angular/router';
   selector: 'app-user-detail',
   templateUrl: './user-detail.component.html',
   styleUrl: './user-detail.component.css'
+
 })
 export class UserDetailComponent implements OnInit {
   private usercopy= new User ;
@@ -32,7 +33,7 @@ export class UserDetailComponent implements OnInit {
     
     this.route.params.subscribe( param => {
       if(param['id']){
-        const id = Number(param['id']);
+        const id = (param['id']);
         this.userService.getUser(id)
         .subscribe(user => this.user = user);
         
@@ -43,10 +44,12 @@ export class UserDetailComponent implements OnInit {
   }
   saveUser(){    
     let obs;
-    if(this.user.id >0){
+    const zero = '0';
+    if(this.user.id !=zero){
       obs=this.userService.updateUser(this.user);
     }
     else{
+      this.user.id=this.userService.makeString();
       obs=this.userService.createUser(this.user);      
     }
     obs.subscribe(resp => {
@@ -54,7 +57,8 @@ export class UserDetailComponent implements OnInit {
     })
   }
   resetForm(form: { reset: () => void; }){
-    if(this.user.id === 0){
+    const zero = '0';
+    if(this.user.id ===zero){
       this.user = new User();
     }
     else{

src/app/user/user.component.html

@@ -9,7 +9,7 @@
     <div class="row">
         <div class="col-sm-6">    <button class="btn btn-primary btn-sm" (click)="updateUser()"><fa-icon [icon]="faPen">ciao</fa-icon></button>
         </div>
-        <div class="col-sm-6">    <button class="btn btn-primary btn-sm" routerLink="{{user.id}}"><fa-icon [icon]="faSearch"></fa-icon></button>
+        <div class="col-sm-6">    <button class="btn btn-primary btn-sm" (click)="showUser()"><fa-icon [icon]="faSearch"></fa-icon></button>
         </div>
         <div class="col-sm-6">    <button class="btn btn-danger btn-sm" (click)="deleteUser()"><fa-icon [icon]="faTrash"></fa-icon></button>
         </div>

src/app/user/user.component.ts

@@ -23,7 +23,7 @@ export class UserComponent implements OnInit {
  faSearch=faSearch;
   constructor(private userService:UserService, private route: Router){
     this.user = {
-          id:0,
+          id:'0',
           name: '',
           lastname: '',
           email: '',
@@ -43,10 +43,15 @@ export class UserComponent implements OnInit {
     
     this.userDeleted.emit(this.user);
 
+  }
+  showUser(){
+    this.route.navigateByUrl('/users/' + this.user.id )
+   // this.userSelected.emit(this.user);
+
   }
   updateUser(){
     this.route.navigateByUrl('/users/' + this.user.id + '/edit')
-    this.userSelected.emit(this.user);
+   // this.userSelected.emit(this.user);
 
   }