friend list to edit

amirhakim · Oct 15, 2020 · 98c49ce · 98c49ce
1 parent 380b06d
commit 98c49ce
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 9 deletions.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -12,7 +12,7 @@ const routes: Routes = [
     loadChildren: () =>
       import('./friend/friend.module').then(m => m.FriendModule) 
   },
-  { path: '**', redirectTo: 'home'},
+  // { path: '**', redirectTo: 'home'},
 ];
 
 @NgModule({

diff --git a/src/app/friend/friend-view/friend-view.component.html b/src/app/friend/friend-view/friend-view.component.html
@@ -5,6 +5,9 @@ <h4>List of Friends</h4>
     <p matLine>
       <span> {{i+1}} .</span>
       <span > {{friend.name}} </span>
+      <button mat-icon-button (click)="edit(friend)">
+        <mat-icon>edit</mat-icon>
+     </button>
       <button mat-icon-button (click)="delete(friend)">
         <mat-icon>delete_forever</mat-icon>
      </button>

diff --git a/src/app/friend/friend-view/friend-view.component.ts b/src/app/friend/friend-view/friend-view.component.ts
@@ -5,6 +5,8 @@ import { FriendState } from '../store/reducer/friend.reducer';
 import {select, Store} from '@ngrx/store';
 import { selectFriend } from '../store/selector/friend.selectors';
 import { deleteFriends } from '../store/action/friend.actions';
+import { Router } from '@angular/router';
+
 
 @Component({
   selector: 'app-friend-view',
@@ -15,7 +17,10 @@ export class FriendViewComponent implements OnInit {
 
   friends$: Observable<Friend[]>;
 
-  constructor(private store: Store<FriendState>) {
+  constructor(
+    private store: Store<FriendState>,
+    private router: Router
+    ) {
     this.friends$ = this.store.pipe(select(selectFriend))
   }
 
@@ -27,4 +32,8 @@ export class FriendViewComponent implements OnInit {
     this.store.dispatch(deleteFriends(friend))
   }
 
+  edit(friend: Friend) {
+    this.router.navigate([friend.id,'detail']);
+  }
+
 }
diff --git a/src/app/friend/friend/friend.component.html b/src/app/friend/friend/friend.component.html
@@ -1 +1,36 @@
-<p>friend works!</p>
+<div class="add-frnd-conrainer">
+    <div class="add-frnd-form-cont">
+        <form [formGroup]="addFrndForm" (submit)="submit()" > 
+            <mat-form-field class="form-field" appearance="outline">
+                <mat-label>Name</mat-label>
+                <input matInput formControlName="name" required>
+                <mat-error *ngIf="addFrndForm.controls.name.touched && addFrndForm.controls.name.invalid">
+                  <span *ngIf="addFrndForm.controls.name.errors.required">This field is mandatory.</span>
+                  <span *ngIf="addFrndForm.controls.name.errors.pattern">This field is invalid.</span>
+                </mat-error>
+            </mat-form-field>
+            <mat-form-field class="form-field" appearance="outline">
+                <mat-label>Friends</mat-label>
+                <input matInput formControlName="friends" type="friends">
+                <mat-error *ngIf="addFrndForm.controls.friends.touched && addFrndForm.controls.friends.invalid">
+                  <span *ngIf="addFrndForm.controls.friends.errors.required">This field is mandatory.</span>
+                </mat-error>
+            </mat-form-field>
+            <mat-form-field class="form-field" appearance="outline">
+                <mat-label>Age</mat-label>
+                <input matInput formControlName="age" type="age">
+                <mat-error *ngIf="addFrndForm.controls.age.touched && addFrndForm.controls.age.invalid">
+                  <span *ngIf="addFrndForm.controls.age.errors.required">This field is mandatory.</span>
+                </mat-error>
+            </mat-form-field>
+            <mat-form-field class="form-field" appearance="outline">
+                <mat-label>Weight</mat-label>
+                <input matInput formControlName="weight" type="weight">
+                <mat-error *ngIf="addFrndForm.controls.weight.touched && addFrndForm.controls.weight.invalid">
+                  <span *ngIf="addFrndForm.controls.weight.errors.required">This field is mandatory.</span>
+                </mat-error>
+            </mat-form-field>
+            <button mat-raised-button color="primary" type="submit">Save</button>
+        </form>
+    </div>
+</div>
diff --git a/src/app/friend/friend/friend.component.ts b/src/app/friend/friend/friend.component.ts
@@ -1,6 +1,13 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Friend, FriendResolved } from 'src/app/models/friend/friend.model';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import {Store} from '@ngrx/store';
+import { FriendState } from '../store/reducer/friend.reducer';
+import { addFriends } from '../store/action/friend.actions';
+
+
+
 
 
 @Component({
@@ -12,19 +19,40 @@ export class FriendComponent implements OnInit {
 
   friend: Friend;
   error: string;
+  addFrndForm: FormGroup;
+  nameRegex = /^[a-zA-Z]/;
 
-  constructor(private route: ActivatedRoute) { 
-    console.log("Friend Comp crx")
-  }
+  constructor(
+    private route: ActivatedRoute,
+    private formBuilder: FormBuilder,
+    private store: Store<FriendState>
+    ) { }
 
   ngOnInit(): void {
-    console.log("Friend Comp init")
-
+    this.addFrndForm = this.formBuilder.group({
+      name: [null, [Validators.required, Validators.pattern(this.nameRegex)]],
+      friends: [null, [Validators.required]],
+      age: [null, [Validators.required]],
+      weight: [null, [Validators.required]]
+    });
     const resolvedData: FriendResolved = this.route.snapshot.data['resolvedFriend'];
     this.friend = resolvedData.friend;
     this.error = resolvedData.error;
+    if(this.friend) {
+      this.addFrndForm.get('name').setValue(this.friend.name);
+      this.addFrndForm.get('friends').setValue(this.friend.name);
+      this.addFrndForm.get('age').setValue(this.friend.name);
+      this.addFrndForm.get('weight').setValue(this.friend.name);
+    }
+  }
 
-    console.log(this.friend, this.error);
+  submit() {
+    if(!this.addFrndForm.valid){
+      return;
+    }
+    console.log(this.addFrndForm.value);
+    const newFriend = this.addFrndForm.value;
+    this.store.dispatch(addFriends(newFriend))
   }
 
 }