Userform component and html for user creation

CodeURJC-DAW-2019-20 · Mar 26, 2020 · c7883c3 · c7883c3
1 parent c18eef1
commit c7883c3
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 28 deletions.
diff --git a/AngularAnimalShelter/src/app/models/WebUser/webUser.model.ts b/AngularAnimalShelter/src/app/models/WebUser/webUser.model.ts
@@ -1,15 +1,15 @@
 export interface WebUser{
-    id:number;
-    photo?:string;
-	name:string;
-	dni:string;
-	age:number;
-	adress:string;
-	houseSize:string;
-	garden:string;
-	numChildren:number;
-	numPeopleInHouse:number;
-	email:string;
-	capacity?:number;
-	password:string;
+    idUser?:number;
+    userphoto?:string;
+	userName:string;
+	userDni:string;
+	userAge:number;
+	userAdress:string;
+	userHouseSize:string;
+	userGarden:string;
+	userNumChildren:number;
+	userNumPeopleInHouse:number;
+	userEmail:string;
+	userCapacity?:number;
+	userPassword:string;
 }
diff --git a/AngularAnimalShelter/src/app/userform/userform.component.html b/AngularAnimalShelter/src/app/userform/userform.component.html
@@ -31,30 +31,30 @@ <h1 class="mb-20">User data:</h1>
 				class="col-lg-9">
 				<div class="form-group">
 					<label for="image">Photo:</label><br> <input type="file"
-						name="userPhoto" accept=".jpg, .jpeg" required>
+						name="userPhoto" accept=".jpg, .jpeg" (change)="loadImage($event)" required>
 				</div>
 				<div class="form-group">
-					<label for="name">Name:</label> <input type="text" name="userName"
+					<label for="name">Name:</label> <input [(ngModel)]="user.userName" type="text" name="userName"
 						class="form-control" placeholder="Name" required>
 				</div>
 				<div class="form-group">
-					<label for="name">DNI:</label> <input type="text" placeholder="nif"
+					<label for="name">DNI:</label> <input [(ngModel)]="user.userDni" type="text" placeholder="nif"
 						class="form-control" name="userDni" pattern="[0-9]{8}[A-Za-z]{1}"
 						required>
 				</div>
 				<div class="form-group">
-					<label for="name">Age:</label> <input type="number"
+					<label for="name">Age:</label> <input [(ngModel)]="user.userAge" type="number"
 						class="form-control" name="userAge" min="1" placeholder="20"
 						required>
 				</div>
 				<div class="form-group">
-					<label for="name">Address:</label> <input type="text"
+					<label for="name">Address:</label> <input [(ngModel)]="user.userAdress" type="text"
 						class="form-control" placeholder="Address" name="userAdress"
 						required>
 				</div>
 				<div class="form-group">
 					<label for="name">House size (without the garden):</label> <select
-						name="userHouseSize">
+						name="userHouseSize" [(ngModel)]="user.userHouseSize">
 						<!-- values for the special-filter algorith -->
 						<option value="xs" selected>Apartment</option>
 						<!-- 0 -->
@@ -69,7 +69,7 @@ <h1 class="mb-20">User data:</h1>
 					</select>
 				</div>
 				<div class="form-group">
-					<label for="name">Garden:</label> <select name="userGarden">
+					<label for="name">Garden:</label> <select name="userGarden" [(ngModel)]="user.userGarden">
 						<!-- values for the special-filter algorith -->
 						<option value="no" selected>No</option>
 						<!-- 0 -->
@@ -85,25 +85,25 @@ <h1 class="mb-20">User data:</h1>
 				</div>
 				<div class="form-group">
 					<label for="children">Number of children in your home:</label> <input
-						type="number" class="form-control" name="userNumChildren" min="0"
+					[(ngModel)]="user.userNumChildren" type="number" class="form-control" name="userNumChildren" min="0"
 						placeholder="Age lower than 14" required>
 				</div>
 				<div class="form-group">
 					<label for="people">Number of people in your home:</label> <input
-						type="number" class="form-control" name="userNumPeopleInHouse"
+					[(ngModel)]="user.userNumPeopleInHouse" type="number" class="form-control" name="userNumPeopleInHouse"
 						min="1" placeholder="Including you" min=1 required>
 				</div>
 				<div class="form-group">
 					<label for="email">E-mail (it will be your user):</label> <input
-						type="email" class="form-control" placeholder="User e-mail"
+					[(ngModel)]="user.userEmail" type="email" class="form-control" placeholder="User e-mail"
 						name="userEmail" required>
 				</div>
 				<div class="form-group">
-					<label for="password">Password:</label> <input type="password"
+					<label for="password">Password:</label> <input [(ngModel)]="user.userPassword" type="password"
 						class="form-control" placeholder="Password" name="userPassword"
 						required>
 				</div>
-				<button type="submit" class="genric-btn primary circle">Create
+				<button (click)="createWebUser()" type="submit" class="genric-btn primary circle">Create
 					User</button>
 			</form>
 		</div>

diff --git a/AngularAnimalShelter/src/app/userform/userform.component.ts b/AngularAnimalShelter/src/app/userform/userform.component.ts
@@ -1,15 +1,49 @@
 import { Component, OnInit } from '@angular/core';
+import { WebUser } from '../models/WebUser/webUser.model';
+import { UserformService } from './userform.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-userform',
   templateUrl: './userform.component.html',
   styleUrls: ['./userform.component.css']
 })
-export class UserformComponent implements OnInit {
+export class UserformComponent {
 
-  constructor() { }
+  data: FormData;
+  user: WebUser;
 
-  ngOnInit(): void {
+  constructor(private router: Router, private userFormService: UserformService) { 
+    this.data = new FormData;
+    this.user = {
+      userName:'',
+      userDni:'',
+      userAge:0,
+      userAdress:'',
+      userHouseSize:'',
+      userGarden:'',
+      userNumChildren:0,
+      userNumPeopleInHouse:0,
+      userEmail:'',
+      userPassword:''
+    }
+  }
+
+  loadImage(event){
+    const file = event.target.files;
+    this.data.append('userPhoto', file[0]);
+  }
+
+  createWebUser(){
+    this.data.append('jsondata',JSON.stringify(this.user));
+    this.data.append('password',this.user.userPassword);
+
+    this.userFormService.createWebUser(this.data).subscribe(
+      shelter => this.router.navigate(['/']),
+      error => this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
+        this.router.navigate(['/userform']);
+      })
+    );
   }
 
 }
diff --git a/AngularAnimalShelter/src/app/userform/userform.service.spec.ts b/AngularAnimalShelter/src/app/userform/userform.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UserformService } from './userform.service';
+
+describe('UserformService', () => {
+  let service: UserformService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UserformService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});