fix: #229 fix general observations

src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.html

@@ -30,8 +30,8 @@
         >Customer description is required</span
       >
     </div>
-      <button type="submit" class="btn btn-sm btn-primary" [disabled]="!customerForm.valid">Save</button>
-      <button (click)="resetCustomerForm()" id="cancel" type="button" class="btn btn-sm btn-secondary mb-2 ml-2 mt-2">
+      <button type="submit" class="btn btn-primary" [disabled]="!customerForm.valid">Save</button>
+      <button (click)="resetCustomerForm()" id="cancel" type="button" class="btn btn-secondary mb-2 ml-2 mt-2">
         Cancel
       </button>
   </form>

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html

@@ -12,11 +12,11 @@
     >
       <td class="col-sm-9">{{ customer.name }}</td>
       <td class="col-sm-3 text-center">
-        <button (click)="editCustomer(customer.id)" type="button" class="btn btn-sm btn-secondary">
+        <button (click)="editCustomer(customer.id)" type="button" class="btn btn-sm btn-primary">
           <i class="fa fa-pencil fa-xs"></i>
         </button>
-        <button (click)="deleteCustomer(customer.id)" type="button" class="btn btn-sm btn-danger ml-2">
-          <i class="fas fa-trash-alt fa-xs"></i>
+        <button (click)="deleteCustomer(customer.id)" type="button" class="btn btn-sm btn-secondary ml-2">
+          <i class="fa fa-trash-alt fa-xs"></i>
         </button>
       </td>
     </tr>

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

@@ -10,10 +10,10 @@
     <textarea class="form-control form-control-sm mt-2" id="descriptionTextArea" rows="3" placeholder="Description"
       formControlName="description"></textarea>
   </div>
-  <button type="submit" class="btn btn-sm btn-primary" [disabled]="!projectTypeForm.valid">
+  <button type="submit" class="btn btn-primary" [disabled]="!projectTypeForm.valid">
     Save
   </button>
-  <button class="btn btn-sm btn-secondary mb-2 ml-2 mt-2" type="reset" [hidden]="!projectTypeToEdit"
+  <button class="btn btn-secondary mb-2 ml-2 mt-2" type="reset" [hidden]="!projectTypeToEdit"
     (click)="cancelButton()">
     Cancel
   </button>

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

@@ -14,8 +14,8 @@
     >
       <td class="col-sm-9">{{ projectType.name }}</td>
       <td class="col-sm-3 text-center">
-        <button type="button" class="btn btn-sm btn-secondary"  (click)="updateProjectType(projectType.id)"><i class="fa fa-pencil fa-xs"></i></button>
-        <button type="button" class="btn btn-sm btn-danger ml-2" (click)="deleteProjectType(projectType.id)"><i class="fas fa-trash-alt fa-xs"></i></button>
+        <button type="button" class="btn btn-sm btn-primary"  (click)="updateProjectType(projectType.id)"><i class="fa fa-pencil fa-xs"></i></button>
+        <button type="button" class="btn btn-sm btn-secondary ml-2" (click)="deleteProjectType(projectType.id)"><i class="fas fa-trash-alt fa-xs"></i></button>
       </td>
     </tr>
   </tbody>

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

@@ -23,12 +23,12 @@
       <option *ngFor="let type of projectsTypes" [value]="type.id">{{ type.name }}</option>
     </select>
   </div>
-  <button type="submit" [disabled]="!projectForm.valid" class="btn btn-sm btn-primary">Save</button>
+  <button type="submit" [disabled]="!projectForm.valid" class="btn btn-primary">Save</button>
   <button
     type="reset"
     [hidden]="!projectToEdit"
     (click)="cancelButton()"
-    class="btn btn-sm btn-secondary mb-2 ml-2 mt-2"
+    class="btn btn-secondary mb-2 ml-2 mt-2"
   >
     Cancel
   </button>

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

@@ -16,11 +16,11 @@
     >
       <td class="col-sm-9">{{ project.name }}</td>
       <td class="col-sm-3 text-center">
-        <button type="button" class="btn btn-sm btn-secondary" (click)="updateProject(project)">
+        <button type="button" class="btn btn-sm btn-primary" (click)="updateProject(project)">
           <i class="fa fa-pencil fa-xs"></i>
         </button>
-        <button type="button" class="btn btn-sm btn-danger ml-2" (click)="deleteProject(project.id)">
-          <i class="fas fa-trash-alt fa-xs"></i>
+        <button type="button" class="btn btn-sm btn-secondary ml-2" (click)="deleteProject(project.id)">
+          <i class="fa fa-trash-alt fa-xs"></i>
         </button>
       </td>
     </tr>

src/app/modules/login/login.component.html

@@ -4,11 +4,11 @@
     <img src="../../../assets/img/ioet.png" />
   </div>
   <div class="login-body">
-    <h3>Please login</h3>
+    <h3>Please log in</h3>
   </div>
 
   <div class="login-controls">
     <button (click)="login()" class="btn btn-primary">login</button>
   </div>
 
-</div>
+</div>

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

@@ -128,7 +128,7 @@
     <div class="modal-footer">
       <button type="submit" class="btn btn-primary">Save</button>
       <button #closeModal type="button" class="btn btn-secondary" data-dismiss="modal">
-        Close
+        Cancel
       </button>
     </div>
   </form>

src/app/modules/shared/components/sidebar/sidebar.component.ts

@@ -16,11 +16,11 @@ export class SidebarComponent implements OnInit {
 
   getItemsSidebar() {
     this.itemsSidebar = [
-      { route: '/time-clock', icon: 'far fa-clock', text: 'Time Clock' },
-      { route: '/time-entries', icon: 'far fa-list-alt', text: 'Time Entries' },
+      { route: '/time-clock', icon: 'fas fa-clock', text: 'Time Clock' },
+      { route: '/time-entries', icon: 'fas fa-list-alt', text: 'Time Entries' },
       { route: '/reports', icon: 'fas fa-chart-pie', text: 'Reports' },
-      { route: '/activities-management', icon: 'far fa-file-alt', text: 'Activities' },
-      { route: '/customers-management', icon: 'fas fa-users-cog', text: 'Customers' },
+      { route: '/activities-management', icon: 'fas fa-file-alt', text: ' Activities' },
+      { route: '/customers-management', icon: 'fas fa-user', text: 'Customers' },
     ];
   }
 }

src/app/modules/time-clock/models/time.entry.summary.ts

@@ -0,0 +1,11 @@
+export interface TimeEntriesSummary {
+  day: TimeDetails;
+  week: TimeDetails;
+  month: TimeDetails;
+}
+
+export interface TimeDetails {
+  hours: string;
+  minutes: string;
+  seconds: string;
+}

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

@@ -1,49 +1,46 @@
-<div class="text-center mt-3">
+<h6 class="text-left"><strong>Summary</strong></h6>
+<hr />
+<div class="row pb-4">
+  <div class="col-4">
+    <h6>Day</h6>
+    <h3>4:22</h3>
+  </div>
+  <div class="col-4">
+    <h6>Week</h6>
+    <h3>14:25</h3>
+  </div>
+  <div class="col-4">
+    <h6>Month</h6>
+    <h3>49:32</h3>
+  </div>
+</div>
+<div style="width: 60%;">
 
-      <h6 class="text-left"><strong>Summary</strong></h6>
-      <hr />
-      <div class="row pb-4">
-        <div class="col-4">
-          <h6>Day</h6>
-          <h3>4:22</h3>
-        </div>
-        <div class="col-4">
-          <h6>Week</h6>
-          <h3>14:25</h3>
-        </div>
-        <div class="col-4">
-          <h6>Month</h6>
-          <h3>49:32</h3>
-        </div>
-      </div>
-      <div class="row pb-4">
-        <div class="col-12">
-          <p *ngIf="areFieldsVisible" class="card-title text-left">
-            <strong>{{ username }}</strong> clocked <strong class="text-clock-in-color">in</strong> at
-            <strong>{{ activeTimeEntry?.start_date | date:'shortTime' }}</strong>
-          </p>
-          <p *ngIf="!areFieldsVisible" class="card-title text-left">
-            <strong>{{ username }}</strong> you did not clock-in yet.
-          </p>
-        </div>
+  <div class="row pb-4">
+    <div class="col-12">
+      <p *ngIf="areFieldsVisible" class="card-title text-left">
+        You clocked in at
+        <strong>{{ activeTimeEntry?.start_date | date:'shortTime' }}</strong>
+      </p>
+      <p *ngIf="!areFieldsVisible" class="card-title text-left">
+        Hi <strong>{{ username }}</strong>, please select a project to clock-in.
+      </p>
+    </div>
+
+  </div>
+  <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>
+    <app-project-list-hover class="w-100"></app-project-list-hover>
+  </div>
+  <div *ngIf="areFieldsVisible">
+    <app-entry-fields></app-entry-fields>
+  </div>
 
-      </div>
-      <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>
-        <app-project-list-hover class="w-100"></app-project-list-hover>
-      </div>
-      <div *ngIf="areFieldsVisible">
-        <app-entry-fields></app-entry-fields>
-      </div>
-      <div class="container">
-        <div class="row">
-          <div class="col text-right">
-            <button *ngIf="areFieldsVisible" class="btn btn-primary" type="button" (click)="clockOut()">
-              Clock Out
-            </button>
-          </div>
-        </div>
+  <div class="form-group" style="text-align: right;">
+    <button *ngIf="areFieldsVisible" class="btn btn-primary" type="button" (click)="clockOut()">
+      Clock Out
+    </button>
   </div>
 </div>

src/app/modules/time-clock/services/entry.service.spec.ts

@@ -45,6 +45,15 @@ describe('EntryService', () => {
     });
   });
 
+  it('loads summary with get /summary', () => {
+    service.baseUrl = 'time-entries';
+
+    service.summary().subscribe((response) => {
+      const loadEntryRequest = httpMock.expectOne(`${service.baseUrl}/summary`);
+      expect(loadEntryRequest.request.method).toBe('GET');
+    });
+  });
+
   it('loads all Entries', () => {
     service.baseUrl = 'time-entries';
     service.loadEntries().subscribe((response) => {

src/app/modules/time-clock/services/entry.service.ts

@@ -1,3 +1,4 @@
+import { TimeEntriesSummary } from './../models/time.entry.summary';
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
@@ -38,4 +39,10 @@ export class EntryService {
     const url = `${this.baseUrl}/${idEntry}/stop`;
     return this.http.post(url, null);
   }
+
+  summary(): Observable<TimeEntriesSummary> {
+    const summaryUrl = `${this.baseUrl}/summary`;
+    return this.http.get<TimeEntriesSummary>(summaryUrl);
+  }
+
 }

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

@@ -35,20 +35,20 @@
           <td class="col"> {{ entry.uri }} </td>
           <td class="col">
             <button
-                class="btn btn-sm btn-secondary"
+                class="btn btn-sm btn-primary"
                 data-toggle="modal"
                 data-target="#editRecordsByDate"
                 (click)="editEntry(entry.id)"
               >
-                <i class="fa fa-edit"></i>
+                <i class="fa fa-edit fa-xs"></i>
               </button>
               <button
-                class="btn btn-sm btn-danger ml-2"
+                class="btn btn-sm btn-secondary ml-2"
                 data-toggle="modal"
                 data-target="#deleteModal"
                 (click)="openModal(entry)"
               >
-                <i class="fa fa-trash"></i>
+                <i class="fa fa-trash fa-xs"></i>
               </button>
           </td>