#64 get, create and edit projects

src/app/app.module.ts

@@ -32,7 +32,9 @@ import { SearchProjectComponent } from './modules/shared/components/search-proje
 import { HomeComponent } from './modules/home/home.component';
 import { LoginComponent } from './modules/login/login.component';
 import { ActivityEffects } from './modules/activities-management/store/activity-management.effects';
-import { activityManagementReducer } from './modules/activities-management/store';
+import { ProjectEffects } from './modules/project-management/store/project.effects';
+import { reducers, metaReducers } from './reducers';
+import { environment } from '../environments/environment';
 
 @NgModule({
   declarations: [
@@ -68,11 +70,15 @@ import { activityManagementReducer } from './modules/activities-management/store
     FormsModule,
     ReactiveFormsModule,
     HttpClientModule,
-    StoreModule.forRoot({ activities: activityManagementReducer }),
-    EffectsModule.forRoot([ActivityEffects]),
-    StoreDevtoolsModule.instrument({
-      maxAge: 15, // Retains last 15 states
+    StoreModule.forRoot(reducers, {
+      metaReducers,
     }),
+    !environment.production
+      ? StoreDevtoolsModule.instrument({
+          maxAge: 15, // Retains last 15 states
+        })
+      : [],
+    EffectsModule.forRoot([ProjectEffects, ActivityEffects]),
   ],
   providers: [],
   bootstrap: [AppComponent],

src/app/modules/project-management/components/create-project/create-project.component.html

@@ -18,40 +18,23 @@ <h1 class="card-title">Project</h1>
     </div>
 
     <div class="form-group">
-      <label for="details">Details:</label>
+      <label for="description">Description:</label>
       <textarea
         class="form-control"
         rows="3"
-        id="details"
+        id="description"
         type="text"
-        formControlName="details"
-        [class.is-invalid]="details.invalid && details.touched"
+        formControlName="description"
+        [class.is-invalid]="description.invalid && description.touched"
         required
       ></textarea>
-      <p class="text-danger" *ngIf="(details.dirty || details.touched) && details.invalid && details.errors.required">
-        Project details are required.
+      <p
+        class="text-danger"
+        *ngIf="(description.dirty || description.touched) && description.invalid && description.errors.required"
+      >
+        Project description is required.
       </p>
     </div>
-
-    <div class="form-group">
-      <label for="status">Status:</label>
-      <select class="form-control" formControlName="status">
-        <option
-          *ngFor="let status of projectStatus"
-          [class.is-invalid]="status.invalid && status.touched"
-          [value]="status"
-          >{{ status }}</option
-        >
-      </select>
-      <p class="text-danger" *ngIf="(status.dirty || status.touched) && status.invalid && status.errors.required">
-        Project status is required.
-      </p>
-    </div>
-
-    <div class="form-group form-check" [hidden]="!projectToEdit">
-      <input type="checkbox" class="form-check-input" id="completedProject" formControlName="completed" />
-      <label class="form-check-label" for="completedProject">Completed project</label>
-    </div>
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group mr-2" role="group">
         <button class="btn save-button-style mb-2" type="submit" [disabled]="!projectForm.valid">Save</button>

src/app/modules/project-management/components/create-project/create-project.component.spec.ts

@@ -1,70 +1,109 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
+import { FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
 
+import { ProjectState } from '../../store/project.reducer';
 import { CreateProjectComponent } from './create-project.component';
+import * as actions from '../../store/project.actions';
 
 describe('CreateProjectComponent', () => {
   let component: CreateProjectComponent;
   let fixture: ComponentFixture<CreateProjectComponent>;
+  let store: MockStore<ProjectState>;
+
+  const state = {
+    projectList: [{ id: 'id', name: 'name', description: 'description' }],
+    isLoading: false,
+  };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ CreateProjectComponent ],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule
-      ]
-    })
-    .compileComponents();
+      declarations: [CreateProjectComponent],
+      imports: [FormsModule, ReactiveFormsModule],
+      providers: [FormBuilder, provideMockStore({ initialState: state })],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(CreateProjectComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    store = TestBed.inject(MockStore);
+    store.setState(state);
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should send the form data on onSubmit buton #onSubmit', () => {
+  it('should emit ngOnChange with projectToEdit', () => {
+    const newData = {
+      id: 'acf6a6c7-a24e-423c-8d1d-08505a82feae',
+      name: 'Project Test 13',
+      description: 'description',
+    };
+
+    component.projectToEdit = newData;
+    component.ngOnChanges();
+    expect(component.projectForm.value.name).toEqual(newData.name);
+    expect(component.projectForm.value.description).toEqual(newData.description);
+    expect(component.isUpdating).toEqual(true);
+  });
+
+  it('should emit ngOnChange and reset ProjectForm', () => {
+    component.projectToEdit = null;
+    component.ngOnChanges();
+
+    expect(component.projectForm.value.name).toEqual(null);
+    expect(component.projectForm.value.description).toEqual(null);
+    expect(component.isUpdating).toEqual(false);
+  });
+
+  it('should dispatch CreateProject action #onSubmit', () => {
+    const project = {
+      id: '1',
+      name: 'app 4',
+      description: 'It is a good app',
+    };
+
+    component.isUpdating = false;
+    spyOn(store, 'dispatch');
+    component.onSubmit(project);
+    expect(store.dispatch).toHaveBeenCalledWith(new actions.CreateProject(project));
+  });
+
+  it('should dispatch UpdateProject action #onSubmit', () => {
     const project = {
+      id: '1',
       name: 'app 4',
-      details: 'It is a good app',
-      status: 'inactive',
-      completed: true
+      description: 'It is a good app',
     };
 
-    spyOn(component.savedProject, 'emit');
+    component.isUpdating = true;
+    spyOn(store, 'dispatch');
     component.onSubmit(project);
-    expect(component.savedProject.emit).toHaveBeenCalled();
+    expect(store.dispatch).toHaveBeenCalledWith(new actions.UpdateProject(project));
   });
 
   it('should clean the form and send a cancelForm event #reset', () => {
     const project = {
       name: 'app 4',
-      details: 'It is a good app',
-      status: 'inactive',
-      completed: true
+      description: 'It is a good app',
     };
 
     component.projectForm.setValue(project);
     spyOn(component.cancelForm, 'emit');
     component.reset();
     expect(component.projectForm.value.name).toEqual(null);
-    expect(component.projectForm.value.details).toEqual(null);
-    expect(component.projectForm.value.status).toEqual(null);
-    expect(component.projectForm.value.completed).toEqual(null);
-
+    expect(component.projectForm.value.description).toEqual(null);
     expect(component.cancelForm.emit).toHaveBeenCalled();
   });
 
   it('form invalid when empty', () => {
     expect(component.projectForm.valid).toBeFalsy();
   });
 
-  it('name field validity', () => {
+  it('checks if name field is valid', () => {
     const name = component.projectForm.controls.name;
     expect(name.valid).toBeFalsy();
 
@@ -75,8 +114,8 @@ describe('CreateProjectComponent', () => {
     expect(name.hasError('required')).toBeFalsy();
   });
 
-  it('details field validity', () => {
-    const details = component.projectForm.controls.details;
+  it('checks if description field is valid', () => {
+    const details = component.projectForm.controls.description;
     expect(details.valid).toBeFalsy();
 
     details.setValue('');
@@ -85,16 +124,4 @@ describe('CreateProjectComponent', () => {
     details.setValue('A');
     expect(details.hasError('required')).toBeFalsy();
   });
-
-  it('status field validity', () => {
-    const status = component.projectForm.controls.status;
-    expect(status.valid).toBeFalsy();
-
-    status.setValue('');
-    expect(status.hasError('required')).toBeTruthy();
-
-    status.setValue('A');
-    expect(status.hasError('required')).toBeFalsy();
-  });
-
 });

src/app/modules/project-management/components/create-project/create-project.component.ts

@@ -1,66 +1,62 @@
-import {
-  Component,
-  Input,
-  OnChanges,
-  Output,
-  EventEmitter
-} from '@angular/core';
+import { Component, Input, OnChanges, OnInit, Output, EventEmitter } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
 import { Project } from '../../../shared/models';
+import { ProjectState } from '../../store/project.reducer';
+import * as actions from '../../store/project.actions';
 
 @Component({
   selector: 'app-create-project',
   templateUrl: './create-project.component.html',
-  styleUrls: ['./create-project.component.scss']
+  styleUrls: ['./create-project.component.scss'],
 })
-export class CreateProjectComponent implements OnChanges {
-
+export class CreateProjectComponent implements OnChanges, OnInit {
   projectForm;
   editProjectId;
-  projectStatus = ['', 'Active', 'Inactive'];
+  isUpdating = false;
 
   @Input() projectToEdit: Project;
-  @Output() savedProject = new EventEmitter();
   @Output() cancelForm = new EventEmitter();
 
-  constructor(private formBuilder: FormBuilder) {
+  constructor(private formBuilder: FormBuilder, private store: Store<ProjectState>) {
     this.projectForm = this.formBuilder.group({
       name: ['', Validators.required],
-      details: ['', Validators.required],
-      status: ['', Validators.required],
-      completed: [false]
+      description: ['', Validators.required],
     });
   }
 
+  ngOnInit(): void {}
+
   ngOnChanges(): void {
     if (this.projectToEdit) {
-      this.editProjectId = this.projectToEdit.id;
-      this.projectForm.setValue({
-        name: this.projectToEdit.name, details: this.projectToEdit.details,
-        status: this.projectToEdit.status, completed: this.projectToEdit.completed
-      });
+      this.projectForm.patchValue(this.projectToEdit);
+      this.isUpdating = true;
+    } else {
+      this.projectForm.reset();
+      this.isUpdating = false;
     }
   }
 
   get name() {
     return this.projectForm.get('name');
   }
 
-  get details() {
-    return this.projectForm.get('details');
-  }
-
-  get status() {
-    return this.projectForm.get('status');
+  get description() {
+    return this.projectForm.get('description');
   }
 
-  onSubmit(projectData) {
+  onSubmit(formData) {
+    const projectData = { ...this.projectToEdit, ...formData };
+    if (this.isUpdating) {
+      this.store.dispatch(new actions.UpdateProject(projectData));
+    } else {
+      this.store.dispatch(new actions.CreateProject(projectData));
+    }
     this.reset();
-    this.savedProject.emit(projectData);
   }
+
   reset() {
     this.projectForm.reset();
     this.cancelForm.emit();
   }
-
 }

src/app/modules/project-management/components/project-list/project-list.component.html

@@ -16,7 +16,7 @@ <h2 class="mb-0">
                 {{ project.name }}
               </a>
               <div class="btn-group float-right" role="group">
-                <i (click)="editProject.emit(project.id)" class="far fa-edit btn btn-link text-white"></i>
+                <i (click)="editProject.emit(project)" class="far fa-edit btn btn-link text-white"></i>
                 <i
                   (click)="openModal(project)"
                   data-toggle="modal"
@@ -29,12 +29,8 @@ <h2 class="mb-0">
 
           <div [id]="'row' + rowIndex" class="collapse" data-parent="#accordionProject">
             <div class="card-body">
-              <h5>Details:</h5>
-              <p>{{ project.details }}</p>
-              <h5>Status:</h5>
-              <p>{{ project.status }}</p>
-              <h5>Completed project:</h5>
-              <p>{{ project.completed ? 'Yes' : 'No' }}</p>
+              <h5>Description:</h5>
+              <p>{{ project.description }}</p>
             </div>
           </div>
         </div>