Workshop 3

user-app/src/app/app-routing.module.ts

@@ -7,10 +7,37 @@ import { UserDetailComponent } from './pages/user-detail/user-detail.component';
 import { CreateUserComponent } from './pages/create-user/create-user.component';
 import { AuthGuard } from './guards/auth.guard';
 
-const routes: Routes = [];
+const routes: Routes = [{
+  path:"",
+  component:UserListComponent,
+},
+{
+  path: 'about-us',
+  component: AboutUsComponent,
+},
+
+{
+  path: 'contact',
+  component: ContactComponent,
+},
+
+{
+  path: 'create-user',
+  component: CreateUserComponent,
+  canActivate:[AuthGuard]
+},
+{
+  path: 'user-detail',
+  component: UserDetailComponent,
+},
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule],
 })
+
+
+
+
 export class AppRoutingModule {}

user-app/src/app/guards/auth.guard.ts

@@ -11,6 +11,6 @@ import {
 })
 export class AuthGuard implements CanActivate {
   canActivate(): boolean {
-    return true;
+    return false;
   }
 }

user-app/src/app/interceptors/log.interceptor.ts

@@ -16,6 +16,7 @@ export class LogInterceptor implements HttpInterceptor {
     next: HttpHandler
   ): Observable<HttpEvent<unknown>> {
     const requestCopy = request.clone();
+    console.log("request intercepted!!");
     return next.handle(requestCopy);
   }
 }

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

@@ -1,6 +1,2 @@
-<h2>
-  Congratulations! Angular set up is complete.
-  <br />
-  <br />
-  You are ready to begin the workshop3.
-</h2>
+<app-header [title]="name" (changeValue)="changeName()"></app-header>
+<router-outlet></router-outlet>

user-app/src/app/pages/app/app.component.scss

@@ -1 +1,9 @@
+.normal {
+    font-size: 15px;
+    color: blue;
 
+}
+.error{
+    font-size: 18px;
+    color: red;
+}

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

@@ -5,4 +5,27 @@ import { Component } from '@angular/core';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class AppComponent {}
+export class AppComponent {
+  name:string ="Deonne";
+  show: boolean =false;
+  names = ['Arun', 'Mark', 'Smith', 'Jack'];
+  isError: boolean=true;
+  userName:string="";
+
+constructor() {
+  console.log('Constructor called');
+}
+changeName(){
+  this.name="Steve";
+  console.log(this.userName)
+}
+ngOnChanges() {
+  console.log('on changes called');
+}
+ngOnInit() {
+  console.log('on init called');
+}
+ngOnDestroy() {
+  console.log('on destroy called');
+}
+}

user-app/src/app/pages/create-user/create-user.component.html

@@ -1,11 +1,43 @@
 <div class="container">
-  <form>
-    <div class="form">
-      <h2>Enter Details</h2>
-      <div class="input-form">
-        <label>Name </label>
-        <input placeholder="Enter the name" formControlName="name" />
-      </div>
+  <form [formGroup]="userFormBuilder" (keydown.enter)="addUser()">
+  <div class="form">
+    <h2>Enter Details</h2>
+    <div class="input-form">
+      <label>Name </label>
+      <input placeholder="Enter the name"  formControlName="name" />
     </div>
+    <div class="input-form">
+      <label>Email</label>
+      <input placeholder="Enter the email id"  formControlName="emailId" />
+    </div>
+    <div class="input-form">
+      <label>Phone</label>
+      <input placeholder="Enter the phone number"  formControlName="phoneNumber" />
+    </div>
+    <div class="input-form">
+      <label>Company</label>
+      <input placeholder="Enter the company name" formControlName="companyName" />
+    </div>
+    <div class="input-form">
+      <label>Street</label>
+      <input placeholder="Enter the street" formControlName="street" />
+    </div>
+    <div class="input-form">
+      <label>City</label>
+      <input placeholder="Enter the city" formControlName="city" />
+    </div>
+    <div class="input-form">
+      <label>Zipcode</label>
+      <input placeholder="Enter the zipcode" formControlName="zipCode" />
+    </div>
+    <div class="error" *ngIf="hasError">
+      <span>Please enter all the details</span>
+    </div>
+    <div class="form-btn">
+      <button (click)="addUser()">Add User</button>
+    </div>
+  </div>
   </form>
-</div>
+  </div>
+
+

user-app/src/app/pages/create-user/create-user.component.ts

@@ -7,4 +7,38 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
   templateUrl: './create-user.component.html',
   styleUrls: ['./create-user.component.scss'],
 })
-export class CreateUserComponent {}
+export class CreateUserComponent {
+  hasError: boolean = false;
+  userFormBuilder: FormGroup;
+
+  constructor(private readonly formBuilder: FormBuilder,private userService: UserService) {
+  this.userFormBuilder = this.formBuilder.group({
+    emailId: formBuilder.control("", [Validators.required, Validators.email]),
+    name: formBuilder.control("", [Validators.required]),
+    phoneNumber: formBuilder.control("", [Validators.required]),
+    companyName: formBuilder.control("", [Validators.required]),
+    city: formBuilder.control("", [Validators.required]),
+    street: formBuilder.control("", [Validators.required]),
+    zipCode: formBuilder.control("", [Validators.required]),
+    });
+  }
+
+    addUser() {
+      this.hasError = false;
+      if (this.userFormBuilder.valid) {
+        this.userService.addUser({
+          id: Math.floor(Math.random() * 10),
+          name: this.userFormBuilder.controls['name'].value,
+          emailId: this.userFormBuilder.controls['emailId'].value,
+          phoneNumber: this.userFormBuilder.controls['phoneNumber'].value,
+          companyName: this.userFormBuilder.controls['companyName'].value,
+          street: this.userFormBuilder.controls['street'].value,
+          city: this.userFormBuilder.controls['city'].value,
+          zipCode: this.userFormBuilder.controls['zipCode'].value,
+        });
+      } else {
+        this.hasError = true;
+      }
+    }
+
+}

user-app/src/app/pages/header/header.component.html

@@ -1 +1,13 @@
-<p>Header Works</p>
+<div class="header">
+    <img
+    routerLink=""
+    src="../../../assets/unicourt-logo.png"
+    alt="logo"
+    height="54"
+    />
+    <div class="menu">
+        <label routerLink="/">Home</label>
+        <label routerLink="/about-us">About Us</label>
+        <label routerLink="/contact">Contact</label>
+    </div>
+</div>

user-app/src/app/pages/header/header.component.ts

@@ -1,8 +1,15 @@
-import { Component } from '@angular/core';
+import { Component ,Input,Output,EventEmitter} from '@angular/core';
 
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss'],
 })
-export class HeaderComponent {}
+export class HeaderComponent {
+@Input() title:string;
+@Output() changeValue =new EventEmitter<any>
+
+onClick(){
+  this.changeValue.emit();
+}
+}

user-app/src/app/pages/user-card/user-card.component.html

@@ -1,3 +1,12 @@
+
 <div class="user-card">
-  <p>User Card works</p>
+  <label>{{ name }}</label> <br /><br/>
+  <span>{{ emailId }}</span> <br /> <br>
+  <span>{{ city }}</span> <br />
+  <button class="detail-btn" (click)="setUserId(id)" routerLink="user-detail" >
+    DETAIL
+  </button>
+  <button class="delete-btn" >DELETE</button>
 </div>
+
+

user-app/src/app/pages/user-card/user-card.component.ts

@@ -6,4 +6,15 @@ import { UserService } from 'src/app/services/user.service';
   templateUrl: './user-card.component.html',
   styleUrls: ['./user-card.component.scss'],
 })
-export class UserCardComponent {}
+export class UserCardComponent {
+  @Input() id: number;
+  @Input() name: string;
+  @Input() emailId: string;
+  @Input() city: string;
+
+constructor(public userService:UserService){}
+
+setUserId(id:number){
+  this.userService.userId=id
+}
+}

user-app/src/app/pages/user-detail/user-detail.component.html

@@ -1,3 +1,24 @@
 <div class="user-detail">
   <p>User Detail Works</p>
 </div>
+<div class="user-detail">
+  <div *ngIf="!hasError" class="card">
+    <h2>{{ userDetail.name }}</h2>
+    <label>Emaild Id : {{ userDetail.emailId }}</label>
+    <label> Phone Number : {{ userDetail.phone }}</label>
+    <label>Company Name : {{ userDetail.companyName }}</label>
+    <div>
+      <h3>Address</h3>
+      <label>{{ userDetail.street }}</label
+      ><br />
+      <label>{{ userDetail.city }}</label
+      ><br />
+      <label>{{ userDetail.zipCode }}</label
+      ><br />
+    </div>
+  </div>
+  <div *ngIf="hasError" class="error">
+    <span>Unable to show the data</span>
+  </div>
+</div>
+

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

@@ -7,4 +7,41 @@ import { UserService } from 'src/app/services/user.service';
   templateUrl: './user-detail.component.html',
   styleUrls: ['./user-detail.component.scss'],
 })
-export class UserDetailComponent {}
+export class UserDetailComponent {
+  userDetail: UserDetail = {
+    id: this.userService.userId,
+    name: '',
+    city: '',
+    companyName: '',
+    emailId: '',
+    phoneNumber: '',
+    street: '',
+    zipCode: '',
+  };
+
+  hasError: boolean = false;
+
+  constructor(private userService: UserService) {}
+
+  ngOnInit() {
+    this.hasError = false;
+    this.userService.getUserDetail(this.userService.userId).subscribe({
+      next: (response: any) => {
+        console.log('user detail response', response);
+        this.userDetail.name = response.name;
+        this.userDetail.emailId = response.email;
+        this.userDetail.city = response.address.city;
+        this.userDetail.companyName = response.company.name;
+        this.userDetail.phoneNumber = response.phone;
+        this.userDetail.zipCode = response.address.zipcode;
+        this.userDetail.street = response.address.street;
+      },
+      error: (error) => {
+        this.hasError = true;
+        console.log('user detail error', error);
+      },
+    });
+  }
+
+
+}

user-app/src/app/pages/user-list/user-list.component.html

@@ -1,3 +1,10 @@
-<div class="container">
+<div class="user-card">
   <p>User List Works</p>
+  <button routerLink="create-user"> create user</button>
+  <app-user-card *ngFor ="let item of userService.users"
+  [id]="item.id"
+  [name]="item.username"
+  [emailId]="item.email">
+</app-user-card>
+
 </div>

user-app/src/app/pages/user-list/user-list.component.ts

@@ -7,4 +7,25 @@ import { UserService } from 'src/app/services/user.service';
   templateUrl: './user-list.component.html',
   styleUrls: ['./user-list.component.scss'],
 })
-export class UserListComponent {}
+export class UserListComponent {
+  // users : User[]=[
+  //   {
+  //     name:'Deonne',
+  //     city:'gfyg',
+  //     emailId:'marylyn@gmail.com',
+  //     id:1,
+  //   },
+  //   {
+  //     name:'Fahad',
+  //     city:'idk',
+  //     emailId:'mrAhmed838@gmail.com',
+  //     id:2,
+  //   }
+  // ]
+  constructor(public userService:UserService){}
+  ngOnInit(){
+    console.log("random");
+    this.userService.getUsers();
+  }
+}
+