feat: TT-337 "Add new activity button" implementation (#754)

* code-smell: TT-337 Deleting unused variables and fixing code smells

* feat: TT-337 Add new activity button implementation

* code-smell: TT-337 Fixing code smells

Co-authored-by: Edgar Guaman <[email protected]>

Author: edgardavid2015

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,8 @@ export class ActivityListComponent implements OnInit {
 
   updateActivity(activityId: string): void {
     this.store.dispatch(new SetActivityToEdit(activityId));
+    this.showActivityForm = true;
+    this.changeValueShowActivityForm.emit(this.showActivityForm);
   }
 
   unarchiveActivity(): void {

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>
@@ -21,7 +18,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>

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, 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);
   }
 }

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>

src/app/modules/activities-management/pages/activities-management.component.spec.ts

@@ -1,24 +1,46 @@
 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();
   }));
 
   beforeEach(() => {
     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);
+  });
+
+
 });

src/app/modules/activities-management/pages/activities-management.component.ts

@@ -1,10 +1,24 @@
-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',
   templateUrl: './activities-management.component.html',
   styleUrls: ['./activities-management.component.scss'],
 })
 export class ActivitiesManagementComponent {
-  constructor() {}
+  @Output() closeActivityForm = new EventEmitter<boolean>();
+  showActivityForm = false;
+  constructor(private store: Store<Activity>) {}
+
+  activateActivityForm() {
+    this.store.dispatch(new SetActivityToEdit(null));
+    this.showActivityForm = true;
+  }
+
+  closeFormActivity(event) {
+    this.showActivityForm = event;
+  }
 }