workshop3

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

@@ -7,7 +7,24 @@ 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,
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

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

@@ -1,6 +1,3 @@
-<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> --><app-header></app-header>
+<router-outlet></router-outlet>

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

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

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

@@ -5,4 +5,34 @@ import { Component } from '@angular/core';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class AppComponent {}
+export class AppComponent {
+  name: string="ayush";
+
+  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.name=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

@@ -9,3 +9,45 @@ <h2>Enter Details</h2>
     </div>
   </form>
 </div>
+<div class="container">
+  <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>
+

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,41 @@
-<p>Header Works</p>
+<div class="header">
+  <img src="" alt="">
+
+
+</div>
+<style>
+nav {
+  background-color: #333;
+}
+
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+li {
+  float: left;
+}
+
+li a {
+  display: block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+li a:hover {
+  background-color: #111;
+}
+</style>
+<nav>
+  <ul>
+    <li><a routerLink="/about-us">About Us</a></li>
+    <li><a routerLink="/contact">Contact</a></li>
+    <li><a routerLink="/create-user">Create User</a></li>
+  </ul>
+</nav>
+

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>
+
+
+
+  <button class="detail-btn" 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,21 @@ 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() phone: string;
+
+@Output() deleteUser = new EventEmitter<Number>();
+
+constructor(private userService: UserService) {}
+
+setUserId(id: number) {
+  this.userService.userId = id;
+}
+
+deleteUserById(id) {
+  this.deleteUser.emit(id);
+}
+}

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

@@ -1,3 +1,18 @@
 <div class="container">
-  <p>User List Works</p>
+  <div class="header">
+    <h2>User List</h2>
+    <button routerLink="create-user">Create User</button>
+  </div>
+
+  <div class="user-card-container">
+    <app-user-card
+      *ngFor="let user of userService.users"
+      [id]="user.id"
+      [name]="user.name"
+      [website]="user.website"
+      [emailId]="user.email"
+      (deleteUser)="deleteUser($event)"
+    ></app-user-card>
+  </div>
 </div>
+

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

@@ -7,4 +7,17 @@ import { UserService } from 'src/app/services/user.service';
   templateUrl: './user-list.component.html',
   styleUrls: ['./user-list.component.scss'],
 })
-export class UserListComponent {}
+export class UserListComponent  {
+  constructor(public userService:UserService){}
+  users:User[]=[];
+  ngOnInit(){
+    //console.log("here")
+     this.userService.getUsers();
+    // this.users = this.userService.users;
+  }
+
+
+
+
+}
+

user-app/src/app/services/user.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { User, UserDetail } from '../model/common.dto';
+import { HttpClient } from '@angular/common/http';
 
 @Injectable({
   providedIn: 'root',
@@ -9,17 +10,33 @@ export class UserService {
   userId: number;
   users: User[] = [];
 
-  constructor() {}
+  constructor(private http: HttpClient) { }
 
   userAleadyAdded(): boolean {
     return true;
   }
 
-  getUsers(): void {}
+  getUsers(): void {
+    this.http.get(this.baseUrl).subscribe(
+      (user: User[]) => {
+        this.users = user;
+        console.log('Users:', this.users); // You can handle the retrieved users here or pass them to another method
+      },
+    );
+  }
+
+
+
+
 
-  getUserDetail(id: number) {}
+  getUserDetail(id: number) {
+    // const url = `${this.baseUrl}/${id}`;
+
+  }
 
   addUser(user: UserDetail): void {}
 
   deleteUser(id: number): void {}
+
 }
+