fix: #428 show required fields in form

Author: enriquezrene

src/app/modules/shared/components/details-fields/details-fields.component.html

@@ -8,7 +8,7 @@
       <span class="input-group-text span-width">Project</span>
     </div>
     <select
-      [class.is-invalid]="project_id.invalid && project_id.touched"
+      [class.is-invalid]="project_id.invalid"
       required
       id="project_id"
       class="custom-select"
@@ -25,7 +25,7 @@
       <span class="input-group-text span-width">Activity</span>
     </div>
     <select
-      [class.is-invalid]="activity_id.invalid && activity_id.touched"
+      [class.is-invalid]="activity_id.invalid"
       required
       id="activity_id"
       class="custom-select"
@@ -122,7 +122,7 @@
               rows="3"></textarea>
   </div>
   <div class="modal-footer">
-    <button type="submit" class="btn btn-primary" [disabled]="!entryForm.valid">Save</button>
+    <button type="submit" class="btn btn-primary">Save</button>
     <button #closeModal type="button" class="btn btn-secondary" data-dismiss="modal">
       Close
     </button>

src/app/modules/shared/components/details-fields/details-fields.component.spec.ts

@@ -106,6 +106,14 @@ describe('DetailsFieldsComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('if form is invalid then no save is emited', () => {
+    spyOn(component.saveEntry, 'emit');
+
+    component.onSubmit();
+
+    expect(component.saveEntry.emit).toHaveBeenCalledTimes(0);
+  });
+
   [
     {actionType: EntryActionTypes.CREATE_ENTRY_SUCCESS},
     {actionType: EntryActionTypes.UPDATE_ENTRY_SUCCESS},

src/app/modules/shared/components/details-fields/details-fields.component.ts

@@ -2,7 +2,7 @@ import { EntryActionTypes } from './../../../time-clock/store/entry.actions';
 import { filter } from 'rxjs/operators';
 import { NumberFormatter } from './../../formatters/number.formatter';
 import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild, } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActionsSubject, select, Store } from '@ngrx/store';
 import { formatDate } from '@angular/common';
 
@@ -36,10 +36,11 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   goingToWorkOnThis = false;
   shouldRestartEntry = false;
 
-  constructor(private formBuilder: FormBuilder, private store: Store<Merged>, private actionsSubject$: ActionsSubject) {
+  constructor(private formBuilder: FormBuilder, private store: Store<Merged>,
+              private actionsSubject$: ActionsSubject) {
     this.entryForm = this.formBuilder.group({
-      project_id: '',
-      activity_id: '',
+      project_id: ['', Validators.required],
+      activity_id: ['', Validators.required],
       description: '',
       entry_date: '',
       start_hour: '',
@@ -150,6 +151,9 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   }
 
   onSubmit() {
+    if (this.entryForm.invalid) {
+      return;
+    }
     // start&end date same for now
     const entryDate = this.entryForm.value.entry_date;
     const entry = {