fix: #172 Create-time-entries-manually fix view

Author: DiegoTinitana

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

@@ -1,5 +1,5 @@
 <div>
-  <div *ngIf="formType === 'entries'" class="input-group input-group-sm mb-3 flex-nowrap">
+  <div class="input-group input-group-sm mb-3 flex-nowrap">
     <div class="input-group-prepend">
       <span class="input-group-text span-width" id="inputGroup-sizing-sm">Project</span>
     </div>
@@ -126,10 +126,10 @@
       <textarea formControlName="description" class="form-control" id="NotesTextarea" rows="3"></textarea>
     </div>
     <div [ngClass]="{ hidden: formType !== 'entries' }" class="modal-footer">
-      <button #closeModal type="button" class="btn close-button-style" data-dismiss="modal">
+      <button #closeModal type="button" class="btn btn-secondary" data-dismiss="modal">
         Close
       </button>
-      <button type="submit" class="btn save-button-style">Save changes</button>
+      <button type="submit" class="btn btn-primary">Save changes</button>
     </div>
   </form>
 </div>

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

@@ -62,16 +62,14 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
       start_hour: '00:00',
       end_hour: '00:00',
       uri: '',
-      technology: '',
     });
   }
 
   ngOnInit(): void {
     const technologies$ = this.store.pipe(select(allTechnologies));
     technologies$.subscribe((response) => {
       this.isLoading = response.isLoading;
-      const filteredItems = response.technologyList.items.filter(item => !this.selectedTechnology.includes(item.name));
-      this.technology = { items: filteredItems };
+      this.technology = response.technologyList;
     });
 
     this.store.dispatch(new projectActions.LoadProjects());
@@ -90,44 +88,30 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   ngOnChanges(): void {
     if (this.entryToEdit) {
       this.selectedTechnology = this.entryToEdit.technologies;
-<<<<<<< HEAD
       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.entryForm.setValue({
-=======
-      const project = this.listProjects.find((p) => p.id === this.entryToEdit.project_id);
-      const activity = this.activities.find((a) => a.id === this.entryToEdit.activity_id);
-      this.entryForm.setValue({
-        project: project ? project.name : '',
->>>>>>> fix: #172 Create-time-entries-manually
         activity: activity ? activity.name : '',
         description: this.entryToEdit.description,
         start_date: this.entryToEdit.start_date ? formatDate(this.entryToEdit.start_date, 'yyyy-MM-dd', 'en') : '',
         start_hour: this.entryToEdit.start_date ? formatDate(this.entryToEdit.start_date, 'HH:mm', 'en') : '00:00',
         end_date: this.entryToEdit.end_date ? formatDate(this.entryToEdit.end_date, 'yyyy-MM-dd', 'en') : '',
         end_hour: this.entryToEdit.end_date ? formatDate(this.entryToEdit.end_date, 'HH:mm', 'en') : '00:00',
         uri: this.entryToEdit.uri,
-        technology: '',
       });
     } else {
       this.selectedTechnology = [];
-<<<<<<< HEAD
       this.project = '';
       this.projectName = '';
       this.entryForm.setValue({
-=======
-      this.entryForm.setValue({
-        project: '',
->>>>>>> fix: #172 Create-time-entries-manually
         activity: '',
         description: '',
         start_date: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
         start_hour: '00:00',
         end_date: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
         end_hour: '00:00',
         uri: '',
-        technology: '',
       });
     }
   }
@@ -140,28 +124,23 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   }
 
   setTechnology(name: string) {
-    this.selectedTechnology = [...this.selectedTechnology, name];
-    this.showlist = false;
-    this.entryForm.get('technology').reset();
+    const index = this.selectedTechnology.indexOf(name);
+    if (index > -1) {
+      this.removeTag(index);
+    } else if (this.selectedTechnology.length < 10) {
+      this.selectedTechnology = [...this.selectedTechnology, name];
+    }
   }
 
   removeTag(index) {
     this.selectedTechnology.splice(index, 1);
-    this.selectedTechnology = [...this.selectedTechnology, name];
-    this.showlist = false;
-    this.entryForm.get('technology').reset();
   }
 
   onSubmit() {
     const activity = this.activities.find((a) => a.name === this.entryForm.value.activity);
-<<<<<<< HEAD
     this.project = this.projectName.id ? this.projectName : this.project;
     const entry = {
       project_id: this.project.id,
-=======
-    const entry = {
-      project_id: this.entryForm.value.project.id,
->>>>>>> fix: #172 Create-time-entries-manually
       activity_id: activity ? activity.id : null,
       technologies: this.selectedTechnology,
       description: this.entryForm.value.description,

src/app/modules/time-clock/pages/time-clock.component.spec.ts

@@ -11,8 +11,6 @@ import { ProjectListHoverComponent } from '../components';
 import { FilterProjectPipe } from '../../shared/pipes';
 import { AzureAdB2CService } from '../../login/services/azure.ad.b2c.service';
 
-import { ActionsSubject } from '@ngrx/store';
-
 describe('TimeClockComponent', () => {
   let component: TimeClockComponent;
   let fixture: ComponentFixture<TimeClockComponent>;

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

@@ -46,8 +46,11 @@ describe('Actions for Entries', () => {
 
   it('UpdateActiveEntrySuccess type is EntryActionTypes.UDPATE_ACTIVE_ENTRY_SUCCESS', () => {
     const updateActiveEntrySuccess = new actions.UpdateActiveEntrySuccess({
-      project_id: '1',
-      description: 'It is good for learning',
+      id: '1',
+      start_date: new Date(),
+      end_date: new Date(),
+      activity: '',
+      technologies: ['abc', 'abc'],
     });
     expect(updateActiveEntrySuccess.type).toEqual(actions.EntryActionTypes.UPDATE_ACTIVE_ENTRY_SUCCESS);
   });

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

@@ -97,7 +97,7 @@ export class UpdateActiveEntry implements Action {
 export class UpdateActiveEntrySuccess implements Action {
   public readonly type = EntryActionTypes.UPDATE_ACTIVE_ENTRY_SUCCESS;
 
-  constructor(public payload: NewEntry) {}
+  constructor(public payload: Entry) {}
 }
 
 export class UpdateActiveEntryFail implements Action {

src/app/modules/time-clock/store/entry.reducer.spec.ts

@@ -11,6 +11,14 @@ describe('entryReducer', () => {
     technologies: ['angular', 'typescript'],
   };
 
+  const newEntry: Entry = {
+    id: '1',
+    start_date: new Date(),
+    end_date: new Date(),
+    activity: '',
+    technologies: ['abc', 'abc'],
+  };
+
   it('on Default, ', () => {
     const action = new actions.DefaultEntry();
     const state = entryReducer(initialState, action);
@@ -124,7 +132,7 @@ describe('entryReducer', () => {
       isLoading: false,
       message: '',
     };
-    const action = new actions.UpdateActiveEntrySuccess(entry);
+    const action = new actions.UpdateActiveEntrySuccess(newEntry);
     const state = entryReducer(currentState, action);
 
     expect(state.isLoading).toEqual(false);

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

@@ -72,7 +72,7 @@ export const entryReducer = (state: EntryState = initialState, action: EntryActi
       return {
         ...state,
         active: action.payload,
-        entryList: [...state.entryList, action.payload],
+        entryList: [action.payload, ...state.entryList],
         isLoading: false,
         message: 'You clocked-in successfully',
       };
@@ -120,11 +120,12 @@ export const entryReducer = (state: EntryState = initialState, action: EntryActi
     }
 
     case EntryActionTypes.UPDATE_ACTIVE_ENTRY_SUCCESS: {
-      const activeEntry = { ...state.active, ...action.payload };
-
+      const entryList = [...state.entryList];
+      const index = entryList.findIndex((entry) => entry.id === action.payload.id);
+      entryList[index] = action.payload;
       return {
         ...state,
-        active: activeEntry,
+        entryList,
         isLoading: false,
       };
     }

src/app/modules/time-entries/pages/time-entries.component.html

@@ -8,11 +8,10 @@
         data-target="#editRecordsByDate"
         class="btn btn-primary"
       >
-        Add new entry
+        <i class="fa fa-plus-square"></i> New Entry
       </button>
     </div>
   </div>
-<<<<<<< HEAD
   <div class="card">
     <app-month-picker (monthSelected)="getMonth($event)"></app-month-picker>
     <div class="row m-0 header-entries">
@@ -54,7 +53,7 @@
               {{ item.time }}
             </div>
             <div class="col">
-              {{ item.date }}
+              {{ item.start_date | date: 'dd/MM/yyyy' }}
             </div>
             <div class="col-2">
               <button
@@ -68,53 +67,26 @@
               <button
                 class="btn btn-sm btn-small"
                 data-toggle="modal"
-=======
-  <div style="height: 10px;"></div>
-  <app-month-picker (monthSelected)="getMonth($event)"></app-month-picker>
-
-  <div style="height: 10px;"></div>
-
-  <table class="table table-sm table-striped">
-    <thead class="thead-orange">
-      <tr class="d-flex">
-        <th class="col-5">Project</th>
-        <th class="col-5">Duration</th>
-        <th class="col-2"></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        class="d-flex"
-        *ngFor="let item of dataByMonth"
-      >
-        <td class="col-sm-5">{{ item.project_id }}</td>
-        <td class="col-sm-5">{{ item.time }}</td>
-        <td class="col-sm-2 text-center">
-          <button type="button" class="btn btn-sm btn-secondary"
-            data-toggle="modal"
-            data-target="#editRecordsByDate"
-            (click)="editEntry(item.id)">
-            <i class="fa fa-pencil fa-xs"></i>
-          </button>
-          <button type="button" class="btn btn-sm btn-danger ml-2"
-              data-toggle="modal"
->>>>>>> fix: #172 removing old styles
                 data-target="#deleteModal"
-                (click)="openModal(item)">
-            <i class="fas fa-trash-alt fa-xs"></i>
-          </button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-
-
+                (click)="openModal(item)"
+              >
+                <i class="fa fa-trash"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <ng-template #emptyState>
+      <app-empty-state></app-empty-state>
+    </ng-template>
+  </div>
 </div>
 <div class="modal fade" id="editRecordsByDate" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalLongTitle">Edit Entry</h5>
+        <h5 class="modal-title" id="exampleModalLongTitle">{{entryId ? "Edit Entry": "New Entry"}} </h5>
       </div>
       <div class="modal-body">
         <app-details-fields

src/app/modules/time-entries/pages/time-entries.component.ts

@@ -16,7 +16,7 @@ export class TimeEntriesComponent implements OnInit {
   entryId: string;
   entry: Entry;
   entryToDelete: Entry;
-  dataByMonth: Entry[];
+  dataByMonth = [];
   entryList: Entry[];
 
   constructor(private store: Store<EntryState>) {}
@@ -33,7 +33,7 @@ export class TimeEntriesComponent implements OnInit {
             const startDate = moment(entry.start_date, 'YYYY-MM-DD HH:mm:ss');
             const endDate = moment(entry.end_date, 'YYYY-MM-DD HH:mm:ss');
             const duration: any = moment.duration(endDate.diff(startDate));
-            time = `${duration._data.hours} hour and ${duration._data.minutes} minutes`;
+            time = `${duration._data.hours} hh : ${duration._data.minutes} mm`;
           }
           const item = { ...entry, time };
           return [...acc, item];