From 5e4a39d4a590ab3246b7cef2c328973a65828a8f Mon Sep 17 00:00:00 2001
From: Edgar Guaman <edgar.guaman@ioet.com>
Date: Mon, 20 Sep 2021 18:10:58 -0500
Subject: [PATCH 1/3] feat: TT-337 Add new activity button implementation

---
 .../activity-list/activity-list.component.ts  |  6 ++++-
 .../create-activity.component.html            |  2 +-
 .../create-activity.component.ts              |  8 ++++---
 .../activities-management.component.html      | 13 ++++++++--
 .../activities-management.component.spec.ts   | 24 ++++++++++++++++++-
 .../pages/activities-management.component.ts  | 21 ++++++++++++++--
 6 files changed, 64 insertions(+), 10 deletions(-)

diff --git a/src/app/modules/activities-management/components/activity-list/activity-list.component.ts b/src/app/modules/activities-management/components/activity-list/activity-list.component.ts
index cf4df9b94..9eb4c680f 100644
--- a/src/app/modules/activities-management/components/activity-list/activity-list.component.ts
+++ b/src/app/modules/activities-management/components/activity-list/activity-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { select, Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import { delay, map } from 'rxjs/operators';
@@ -14,6 +14,9 @@ import { ActivityState } from './../../store/activity-management.reducers';
   styleUrls: ['./activity-list.component.scss'],
 })
 export class ActivityListComponent implements OnInit {
+  @Input() showActivityForm: boolean;
+  @Output() changeValueShowActivityForm = new EventEmitter<boolean>();
+
   constructor(private store: Store<ActivityState>) {
     this.isLoading$ = store.pipe(delay(0), select(getIsLoading));
   }
@@ -66,6 +69,7 @@ export class ActivityListComponent implements OnInit {
 
   updateActivity(activityId: string): void {
     this.store.dispatch(new SetActivityToEdit(activityId));
+    this.changeValueShowActivityForm.emit(this.showActivityForm = true);
   }
 
   unarchiveActivity(): void {
diff --git a/src/app/modules/activities-management/components/create-activity/create-activity.component.html b/src/app/modules/activities-management/components/create-activity/create-activity.component.html
index daec24118..fa4951272 100644
--- a/src/app/modules/activities-management/components/create-activity/create-activity.component.html
+++ b/src/app/modules/activities-management/components/create-activity/create-activity.component.html
@@ -21,7 +21,7 @@ <h4>Activities</h4>
 
     <div class="form-group" style="text-align: right;">
       <button class="btn btn-primary" type="submit" [disabled]="!activityForm.valid">Save</button>
-      <button class="btn btn-secondary mb-2 ml-2 mt-2" type="reset" [hidden]="!activityToEdit" (click)="cancelButton()">
+      <button class="btn btn-secondary mb-2 ml-2 mt-2" type="button" (click)="cancelButton()">
         Cancel
       </button>
     </div>
diff --git a/src/app/modules/activities-management/components/create-activity/create-activity.component.ts b/src/app/modules/activities-management/components/create-activity/create-activity.component.ts
index 7460cfa5f..20cb3bc7a 100644
--- a/src/app/modules/activities-management/components/create-activity/create-activity.component.ts
+++ b/src/app/modules/activities-management/components/create-activity/create-activity.component.ts
@@ -1,7 +1,6 @@
 import { FormBuilder, Validators, FormGroup } from '@angular/forms';
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Store, select } from '@ngrx/store';
-
 import { Activity } from '../../../shared/models';
 import { ActivityState } from './../../store/activity-management.reducers';
 import { CreateActivity, UpdateActivity, getActivityById, ResetActivityToEdit } from '../../store';
@@ -12,9 +11,9 @@ import { CreateActivity, UpdateActivity, getActivityById, ResetActivityToEdit }
   styleUrls: ['./create-activity.component.scss'],
 })
 export class CreateActivityComponent implements OnInit {
+  @Output() closeActivityForm = new EventEmitter<boolean>();
   activityForm: FormGroup;
   activityToEdit: Activity;
-
   constructor(private formBuilder: FormBuilder, private store: Store<ActivityState>) {
     this.activityForm = this.formBuilder.group({
       name: ['', Validators.required],
@@ -60,9 +59,12 @@ export class CreateActivityComponent implements OnInit {
       this.store.dispatch(new CreateActivity(activityData));
       this.activityForm.get('description').setValue('');
     }
+    this.closeActivityForm.emit(false);
   }
 
   cancelButton() {
+    this.activityForm.reset();
     this.store.dispatch(new ResetActivityToEdit());
+    this.closeActivityForm.emit(false);
   }
 }
diff --git a/src/app/modules/activities-management/pages/activities-management.component.html b/src/app/modules/activities-management/pages/activities-management.component.html
index 92f75b9bf..9abbb4cfc 100644
--- a/src/app/modules/activities-management/pages/activities-management.component.html
+++ b/src/app/modules/activities-management/pages/activities-management.component.html
@@ -1,4 +1,13 @@
 <div class="col-12 col-md-9 px-0">
-  <app-create-activity></app-create-activity>
-  <app-activity-list></app-activity-list>
+  <div class="row">
+    <div style="padding: 15px;">
+      <button (click)="activateActivityForm()" class="btn btn-primary">Add new Activity</button>
+    </div>
+  </div>
+  <div *ngIf="showActivityForm">
+    <app-create-activity
+    (closeActivityForm)="closeFormActivity($event)"></app-create-activity>
+  </div>
+  <app-activity-list
+  (changeValueShowActivityForm)="showActivityForm = $event"></app-activity-list>
 </div>
diff --git a/src/app/modules/activities-management/pages/activities-management.component.spec.ts b/src/app/modules/activities-management/pages/activities-management.component.spec.ts
index 92f8a918a..af4ae32cc 100644
--- a/src/app/modules/activities-management/pages/activities-management.component.spec.ts
+++ b/src/app/modules/activities-management/pages/activities-management.component.spec.ts
@@ -1,14 +1,19 @@
 import { waitForAsync, TestBed, ComponentFixture } from '@angular/core/testing';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { ActivitiesManagementComponent } from './activities-management.component';
+import { SetActivityToEdit } from '../store';
+import { Activity } from '../../shared/models';
 
 describe('ActivitiesManagementComponent', () => {
   let component: ActivitiesManagementComponent;
   let fixture: ComponentFixture<ActivitiesManagementComponent>;
+  let store: MockStore<Activity>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [],
-      declarations: [ActivitiesManagementComponent]
+      declarations: [ActivitiesManagementComponent],
+      providers: [provideMockStore({ initialState: {} })],
     }).compileComponents();
   }));
 
@@ -16,9 +21,26 @@ describe('ActivitiesManagementComponent', () => {
     fixture = TestBed.createComponent(ActivitiesManagementComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    store = TestBed.inject(MockStore);
   });
 
   it('should create the component', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should dispatch an action on activateActivityForm', () => {
+    spyOn(store, 'dispatch');
+
+    component.activateActivityForm();
+
+    expect(store.dispatch).toHaveBeenCalledWith(new SetActivityToEdit(null));
+  });
+
+  it('should call closeActivityForm function', () => {
+    component.closeFormActivity(false);
+
+    expect(component.showActivityForm).toBe(false);
+  });
+
+
 });
diff --git a/src/app/modules/activities-management/pages/activities-management.component.ts b/src/app/modules/activities-management/pages/activities-management.component.ts
index 94c1de433..cc375ad44 100644
--- a/src/app/modules/activities-management/pages/activities-management.component.ts
+++ b/src/app/modules/activities-management/pages/activities-management.component.ts
@@ -1,4 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Output } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Activity } from '../../shared/models';
+import { SetActivityToEdit } from '../store';
 
 @Component({
   selector: 'app-activities-management',
@@ -6,5 +9,19 @@ import { Component } from '@angular/core';
   styleUrls: ['./activities-management.component.scss'],
 })
 export class ActivitiesManagementComponent {
-  constructor() {}
+  @Output() sendChanges = new EventEmitter<boolean>();
+  @Output() closeActivityForm = new EventEmitter<boolean>();
+  showActivityForm = false;
+  hasChangeComponent = false;
+  hasChanged: boolean;
+  constructor(private store: Store<Activity>) {}
+
+  activateActivityForm() {
+    this.store.dispatch(new SetActivityToEdit(null));
+    this.showActivityForm === false ? this.showActivityForm = true : this.showActivityForm = false;
+  }
+
+  closeFormActivity(event) {
+    this.showActivityForm = event;
+  }
 }

From 5ab32aaa1aedd9bce1c3edd0b639dbd316852289 Mon Sep 17 00:00:00 2001
From: Edgar Guaman <edgar.guaman@ioet.com>
Date: Mon, 20 Sep 2021 13:24:37 -0500
Subject: [PATCH 2/3] code-smell: TT-337 Fixing code smells

---
 .../components/activity-list/activity-list.component.ts        | 3 ++-
 .../components/create-activity/create-activity.component.html  | 3 ---
 .../components/create-activity/create-activity.component.ts    | 2 +-
 .../pages/activities-management.component.ts                   | 2 +-
 4 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/app/modules/activities-management/components/activity-list/activity-list.component.ts b/src/app/modules/activities-management/components/activity-list/activity-list.component.ts
index 9eb4c680f..3da790a52 100644
--- a/src/app/modules/activities-management/components/activity-list/activity-list.component.ts
+++ b/src/app/modules/activities-management/components/activity-list/activity-list.component.ts
@@ -69,7 +69,8 @@ export class ActivityListComponent implements OnInit {
 
   updateActivity(activityId: string): void {
     this.store.dispatch(new SetActivityToEdit(activityId));
-    this.changeValueShowActivityForm.emit(this.showActivityForm = true);
+    this.showActivityForm = true;
+    this.changeValueShowActivityForm.emit(this.showActivityForm);
   }
 
   unarchiveActivity(): void {
diff --git a/src/app/modules/activities-management/components/create-activity/create-activity.component.html b/src/app/modules/activities-management/components/create-activity/create-activity.component.html
index fa4951272..6af39d04d 100644
--- a/src/app/modules/activities-management/components/create-activity/create-activity.component.html
+++ b/src/app/modules/activities-management/components/create-activity/create-activity.component.html
@@ -1,7 +1,4 @@
-<h4>Activities</h4>
-<hr/>
 <div>
-
   <form [formGroup]="activityForm" (ngSubmit)="onSubmit(activityForm.value)">
     <div class="form-group">
       <label>Name:</label>
diff --git a/src/app/modules/activities-management/components/create-activity/create-activity.component.ts b/src/app/modules/activities-management/components/create-activity/create-activity.component.ts
index 20cb3bc7a..af4b2d8c6 100644
--- a/src/app/modules/activities-management/components/create-activity/create-activity.component.ts
+++ b/src/app/modules/activities-management/components/create-activity/create-activity.component.ts
@@ -1,5 +1,5 @@
 import { FormBuilder, Validators, FormGroup } from '@angular/forms';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { Store, select } from '@ngrx/store';
 import { Activity } from '../../../shared/models';
 import { ActivityState } from './../../store/activity-management.reducers';
diff --git a/src/app/modules/activities-management/pages/activities-management.component.ts b/src/app/modules/activities-management/pages/activities-management.component.ts
index cc375ad44..19cd27e01 100644
--- a/src/app/modules/activities-management/pages/activities-management.component.ts
+++ b/src/app/modules/activities-management/pages/activities-management.component.ts
@@ -18,7 +18,7 @@ export class ActivitiesManagementComponent {
 
   activateActivityForm() {
     this.store.dispatch(new SetActivityToEdit(null));
-    this.showActivityForm === false ? this.showActivityForm = true : this.showActivityForm = false;
+    !this.showActivityForm ? this.showActivityForm = true : this.showActivityForm = false;
   }
 
   closeFormActivity(event) {

From 3dbbbad038c9f3926c3181ee52f275e8ff12bd6d Mon Sep 17 00:00:00 2001
From: Edgar Guaman <edgar.guaman@ioet.com>
Date: Mon, 20 Sep 2021 13:36:38 -0500
Subject: [PATCH 3/3] code-smell: TT-337 Deleting unused variables and fixing
 code smells

---
 .../pages/activities-management.component.ts                 | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/app/modules/activities-management/pages/activities-management.component.ts b/src/app/modules/activities-management/pages/activities-management.component.ts
index 19cd27e01..1c8ef9676 100644
--- a/src/app/modules/activities-management/pages/activities-management.component.ts
+++ b/src/app/modules/activities-management/pages/activities-management.component.ts
@@ -9,16 +9,13 @@ import { SetActivityToEdit } from '../store';
   styleUrls: ['./activities-management.component.scss'],
 })
 export class ActivitiesManagementComponent {
-  @Output() sendChanges = new EventEmitter<boolean>();
   @Output() closeActivityForm = new EventEmitter<boolean>();
   showActivityForm = false;
-  hasChangeComponent = false;
-  hasChanged: boolean;
   constructor(private store: Store<Activity>) {}
 
   activateActivityForm() {
     this.store.dispatch(new SetActivityToEdit(null));
-    !this.showActivityForm ? this.showActivityForm = true : this.showActivityForm = false;
+    this.showActivityForm = true;
   }
 
   closeFormActivity(event) {