fix: #227 Enhance entries modal

Author: DiegoTinitana

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

@@ -3,12 +3,13 @@
     <div class="input-group-prepend">
       <span class="input-group-text span-width" id="inputGroup-sizing-sm">Project</span>
     </div>
-    <div class="ng-autocomplete">
+    <div class="ng-autocomplete" [ngClass]="{'validation': projectError}" >
       <ng-autocomplete
         class="autocomplete"
         name="projectName"
         ngDefaultControl
-        [(ngModel)]="projectName"
+        [ngModel]="projectName"
+        (selected)='selectEvent($event)'
         [data]="listProjects && listProjects"
         [searchKeyword]="keyword"
         [itemTemplate]="itemTemplate"
@@ -28,7 +29,13 @@
       <div class="input-group-prepend">
         <span class="input-group-text span-width" id="inputGroup-sizing-sm">Activity</span>
       </div>
-      <select id="activitiesSelect" class="form-control" formControlName="activity">
+      <select
+        [class.is-invalid]="activity.invalid && activity.touched"
+        required
+        id="activity"
+        class="form-control"
+        formControlName="activity"
+      >
         <option *ngFor="let activity of activities">{{ activity.name }}</option>
       </select>
     </div>
@@ -39,6 +46,7 @@
       </div>
       <input
         formControlName="uri"
+        id="uri"
         type="text"
         class="form-control"
         aria-label="Small"
@@ -52,19 +60,25 @@
       </div>
       <input
         formControlName="start_date"
+        id="start_date"
         type="date"
         class="form-control"
         aria-label="Small"
         aria-describedby="inputGroup-sizing-sm"
+        [class.is-invalid]="start_date.invalid && start_date.touched"
+        required
       />
       <div class="input-group-prepend">
         <span class="input-group-text span-width" id="inputGroup-sizing-sm">Start/Hour</span>
       </div>
       <input
         formControlName="start_hour"
+        id="start_hour"
         type="text"
         class="form-control"
         aria-label="Small"
+        [class.is-invalid]="start_hour.invalid && start_hour.touched"
+        required
         aria-describedby="inputGroup-sizing-sm"
       />
     </div>
@@ -74,9 +88,12 @@
       </div>
       <input
         formControlName="end_date"
+        id="end_date"
         type="date"
         class="form-control"
         aria-label="Small"
+        [class.is-invalid]="end_date.invalid && end_date.touched"
+        required
         aria-describedby="inputGroup-sizing-sm"
       />
       <div class="input-group-prepend">
@@ -85,8 +102,11 @@
       <input
         formControlName="end_hour"
         type="text"
+        id="end_hour"
         class="form-control"
         aria-label="Small"
+        [class.is-invalid]="end_hour.invalid && end_hour.touched"
+        required
         aria-describedby="inputGroup-sizing-sm"
       />
     </div>
@@ -126,7 +146,7 @@
       <textarea formControlName="description" class="form-control" id="NotesTextarea" rows="3"></textarea>
     </div>
     <div class="modal-footer">
-      <button type="submit" class="btn btn-primary">Save</button>
+      <button type="submit" class="btn btn-primary" [disabled]="!entryForm.valid && !projectError">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.scss

@@ -80,6 +80,13 @@
   }
 }
 
+.validation::ng-deep {
+  .autocomplete .autocomplete-container {
+    border: 1px solid red;
+  }
+}
+
+
 input[type="date"]::-webkit-calendar-picker-indicator {
   position: absolute;
   top: 0;
@@ -98,5 +105,5 @@ input[type="date"]::-webkit-inner-spin-button {
 }
 
 input[type="date"]::-webkit-clear-button {
-   z-index: 1;
+  display: none;
 }

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

@@ -9,15 +9,18 @@ import { DetailsFieldsComponent } from './details-fields.component';
 import * as actions from '../../store/technology.actions';
 import { ProjectState } from '../../../customer-management/components/projects/components/store/project.reducer';
 import { getCustomerProjects } from '../../../customer-management/components/projects/components/store/project.selectors';
+import { EntryState } from '../../../time-clock/store/entry.reducer';
+import { getUpdateError, getCreateError } from 'src/app/modules/time-clock/store/entry.selectors';
 
 describe('DetailsFieldsComponent', () => {
-  type Merged = TechnologyState & ProjectState;
+  type Merged = TechnologyState & ProjectState & EntryState;
   let component: DetailsFieldsComponent;
   let fixture: ComponentFixture<DetailsFieldsComponent>;
   let store: MockStore<Merged>;
   let mockTechnologySelector;
   let mockProjectsSelector;
-  let length;
+  let mockEntriesUpdateErrorSelector;
+  let mockEntriesCreateErrorSelector;
 
   const state = {
     projects: {
@@ -37,6 +40,10 @@ describe('DetailsFieldsComponent', () => {
       message: 'Data fetch successfully!',
       activityIdToEdit: '',
     },
+    Entries: {
+      createError: null,
+      updateError: null,
+    },
   };
 
   const initialData = {
@@ -58,6 +65,8 @@ describe('DetailsFieldsComponent', () => {
     store = TestBed.inject(MockStore);
     mockTechnologySelector = store.overrideSelector(allTechnologies, state.technologies);
     mockProjectsSelector = store.overrideSelector(getCustomerProjects, state.projects);
+    mockEntriesUpdateErrorSelector = store.overrideSelector(getUpdateError, state.Entries.updateError);
+    mockEntriesCreateErrorSelector = store.overrideSelector(getCreateError, state.Entries.createError);
   }));
 
   beforeEach(() => {
@@ -238,7 +247,7 @@ describe('DetailsFieldsComponent', () => {
       end_hour: '00:00',
       description: '',
     });
-    component.projectName = { id: 'abc', name: 'name' };
+    component.project = { id: 'abc', name: 'name' };
     component.activities = [
       { id: 'fc5fab41-a21e-4155-9d05-511b956ebd05', tenant_id: 'ioet', name: 'activity1', description: '' },
     ];

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

@@ -22,8 +22,11 @@ import { TechnologyState } from '../../store/technology.reducers';
 import { LoadActivities, ActivityState, allActivities } from '../../../activities-management/store';
 import { getProjects } from '../../../customer-management/components/projects/components/store/project.selectors';
 import * as projectActions from '../../../customer-management/components/projects/components/store/project.actions';
+import { EntryState } from '../../../time-clock/store/entry.reducer';
+import * as entryActions from '../../../time-clock/store/entry.actions';
+import { getUpdateError, getCreateError } from 'src/app/modules/time-clock/store/entry.selectors';
 
-type Merged = TechnologyState & ProjectState & ActivityState;
+type Merged = TechnologyState & ProjectState & ActivityState & EntryState;
 
 @Component({
   selector: 'app-details-fields',
@@ -45,7 +48,8 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   keyword = 'name';
   showlist: boolean;
   project: any = {};
-  projectName: any = {};
+  projectName: string;
+  projectError: boolean;
 
   constructor(private formBuilder: FormBuilder, private store: Store<Merged>, private renderer: Renderer2) {
     this.renderer.listen('window', 'click', (e: Event) => {
@@ -66,6 +70,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   }
 
   ngOnInit(): void {
+    this.projectError = true;
     const technologies$ = this.store.pipe(select(allTechnologies));
     technologies$.subscribe((response) => {
       this.isLoading = response.isLoading;
@@ -83,6 +88,21 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     activities$.subscribe((response) => {
       this.activities = response;
     });
+
+    const updateError$ = this.store.pipe(select(getUpdateError));
+    updateError$.subscribe((updateError) => {
+      if (updateError != null && !updateError) {
+        this.closeEntryModal();
+        this.store.dispatch(new entryActions.CleanEntryUpdateError(null));
+      }
+    });
+    const createError$ = this.store.pipe(select(getCreateError));
+    createError$.subscribe((createError) => {
+      if (createError != null && !createError) {
+        this.closeEntryModal();
+        this.store.dispatch(new entryActions.CleanEntryCreateError(null));
+      }
+    });
   }
 
   ngOnChanges(): void {
@@ -91,6 +111,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
       this.project = this.listProjects.find((p) => p.id === this.entryToEdit.project_id);
       const activity = this.activities.find((a) => a.id === this.entryToEdit.activity_id);
       this.projectName = this.project.name;
+      this.projectError = false;
       this.entryForm.setValue({
         activity: activity ? activity.name : '',
         description: this.entryToEdit.description,
@@ -136,9 +157,43 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     this.selectedTechnology.splice(index, 1);
   }
 
+  get uri() {
+    return this.entryForm.get('uri');
+  }
+
+  get activity() {
+    return this.entryForm.get('activity');
+  }
+
+  get start_date() {
+    return this.entryForm.get('start_date');
+  }
+  get start_hour() {
+    return this.entryForm.get('start_hour');
+  }
+  get end_date() {
+    return this.entryForm.get('end_date');
+  }
+  get end_hour() {
+    return this.entryForm.get('end_hour');
+  }
+
+  selectEvent($event) {
+    this.projectError = false;
+    this.project = $event;
+    this.projectName = this.project.name;
+  }
+
+  closeEntryModal() {
+    this.selectedTechnology = [];
+    this.project = '';
+    this.projectName = '';
+    this.entryForm.reset();
+    this.closeModal.nativeElement.click();
+  }
+
   onSubmit() {
     const activity = this.activities.find((a) => a.name === this.entryForm.value.activity);
-    this.project = this.projectName.id ? this.projectName : this.project;
     const entry = {
       project_id: this.project.id,
       activity_id: activity ? activity.id : null,
@@ -149,7 +204,5 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
       uri: this.entryForm.value.uri,
     };
     this.saveEntry.emit(entry);
-    this.ngOnChanges();
-    this.closeModal.nativeElement.click();
   }
 }

src/app/modules/time-clock/store/entry.actions.ts

@@ -21,6 +21,8 @@ export enum EntryActionTypes {
   STOP_TIME_ENTRY_RUNNING_SUCCESS = '[Entry] STOP_TIME_ENTRIES_RUNNING_SUCCESS',
   STOP_TIME_ENTRY_RUNNING_FAILED = '[Entry] STOP_TIME_ENTRIES_RUNNING_FAILED',
   DEFAULT_ENTRY = '[Entry] DEFAULT_ENTRY',
+  CLEAN_ENTRY_CREATE_ERROR = '[Entry] CLEAN_ENTRY_CREATE_ERROR',
+  CLEAN_ENTRY_UPDATE_ERROR = '[Entry] CLEAN_ENTRY_UPDATE_ERROR',
 }
 
 export class LoadActiveEntry implements Action {
@@ -120,6 +122,16 @@ export class StopTimeEntryRunningFail implements Action {
   public readonly type = EntryActionTypes.STOP_TIME_ENTRY_RUNNING_FAILED;
   constructor(public error: string) {}
 }
+
+export class CleanEntryCreateError implements Action {
+  public readonly type = EntryActionTypes.CLEAN_ENTRY_CREATE_ERROR;
+  constructor(public error: boolean) {}
+}
+
+export class CleanEntryUpdateError implements Action {
+  public readonly type = EntryActionTypes.CLEAN_ENTRY_UPDATE_ERROR;
+  constructor(public error: boolean) {}
+}
 export class DefaultEntry implements Action {
   public readonly type = EntryActionTypes.DEFAULT_ENTRY;
 }
@@ -143,4 +155,6 @@ export type EntryActions =
   | StopTimeEntryRunning
   | StopTimeEntryRunningSuccess
   | StopTimeEntryRunningFail
+  | CleanEntryCreateError
+  | CleanEntryUpdateError
   | DefaultEntry;

src/app/modules/time-clock/store/entry.effects.ts

@@ -2,13 +2,14 @@ import { Injectable } from '@angular/core';
 import { ofType, Actions, Effect } from '@ngrx/effects';
 import { Action } from '@ngrx/store';
 import { of, Observable } from 'rxjs';
+import { ToastrService } from 'ngx-toastr';
 import { catchError, map, mergeMap } from 'rxjs/operators';
 import { EntryService } from '../services/entry.service';
 import * as actions from './entry.actions';
 
 @Injectable()
 export class EntryEffects {
-  constructor(private actions$: Actions, private entryService: EntryService) {}
+  constructor(private actions$: Actions, private entryService: EntryService, private toastrService: ToastrService) {}
 
   @Effect()
   loadActiveEntry$: Observable<Action> = this.actions$.pipe(
@@ -41,9 +42,13 @@ export class EntryEffects {
     mergeMap((entry) =>
       this.entryService.createEntry(entry).pipe(
         map((entryData) => {
+          this.toastrService.success('Entry was saved successfully');
           return new actions.CreateEntrySuccess(entryData);
         }),
-        catchError((error) => of(new actions.CreateEntryFail(error.error.message)))
+        catchError((error) => {
+          this.toastrService.error(error.error.message);
+          return of(new actions.CreateEntryFail(error.error.message));
+        })
       )
     )
   );
@@ -67,9 +72,13 @@ export class EntryEffects {
     mergeMap((project) =>
       this.entryService.updateActiveEntry(project).pipe(
         map((projectData) => {
+          this.toastrService.success('Entry was updated successfully');
           return new actions.UpdateActiveEntrySuccess(projectData);
         }),
-        catchError((error) => of(new actions.UpdateActiveEntryFail(error)))
+        catchError((error) => {
+          this.toastrService.error(error.error.message);
+          return of(new actions.UpdateActiveEntryFail(error));
+        })
       )
     )
   );