fix: TT-60 Change the position of the component displaying the latest projects

Author: wilc0519

src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.html

@@ -1,19 +1,14 @@
 
-<form [formGroup]="projectsForm">
-  <div class="form-group">
-    <label>Project:</label>
-    <div class="form-control autocomplete">
-      <ng-select
-        formControlName="project_id"
-        bindLabel="search_field"
-        placeholder="Enter the project name"
-        notFoundText="No projects found"
-        [items]="listProjectsShowed"
-        (search)="onSearch($event)"
-        (change)="onSelect($event)"
-        (close)="loadActiveTimeEntry()">
-
-        <ng-template ng-option-tmp let-item="item">
+<div class="table-responsive">
+  <table class="table table-sm table-striped table-bordered mb-0" aria-hidden="true">
+    <thead class="thead-blue">
+      <tr class="d-flex">
+        <th class="col md-col">Quick selections</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="d-flex" *ngFor="let item of listRecentProjects" >
+        <td class="col md-col">
           <div class="flex flex-wrap flex-row justify-between">
             <div class="p-2 text-xs">
               <span>{{item.customer.name}}</span> -
@@ -23,6 +18,7 @@
               <button
                 *ngIf="showClockIn"
                 class="btn btn-sm btn-primary btn-select"
+                (click)="clockIn(item.id, item.customer.name, item.name)"
               >
                 Clock In
               </button>
@@ -38,22 +34,29 @@
               </button>
             </div>
           </div>
-        </ng-template>
-      </ng-select>
-    </div>
-  </div>
-</form>
-
-<div class="table-responsive">
-  <table class="table table-sm table-striped table-bordered mb-0" aria-hidden="true">
-    <thead class="thead-blue">
-      <tr class="d-flex">
-        <th class="col md-col">Latest projects you worked on</th>
+        </td>
       </tr>
-    </thead>
-    <tbody>
-      <tr class="d-flex" *ngFor="let item of listRecentProjects" >
-        <td class="col md-col">
+    </tbody>
+
+  </table>
+  <br>
+</div>
+
+<form [formGroup]="projectsForm">
+  <div class="form-group">
+    <label>Project:</label>
+    <div class="form-control autocomplete">
+      <ng-select
+        formControlName="project_id"
+        bindLabel="search_field"
+        placeholder="Enter the project name"
+        notFoundText="No projects found"
+        [items]="listProjectsShowed"
+        (search)="onSearch($event)"
+        (change)="onSelect($event)"
+        (close)="loadActiveTimeEntry()">
+
+        <ng-template ng-option-tmp let-item="item">
           <div class="flex flex-wrap flex-row justify-between">
             <div class="p-2 text-xs">
               <span>{{item.customer.name}}</span> -
@@ -63,7 +66,6 @@
               <button
                 *ngIf="showClockIn"
                 class="btn btn-sm btn-primary btn-select"
-                (click)="clockIn(item.id, item.customer.name, item.name)"
               >
                 Clock In
               </button>
@@ -79,10 +81,10 @@
               </button>
             </div>
           </div>
-        </td>
-      </tr>
-    </tbody>
+        </ng-template>
+      </ng-select>
+    </div>
+  </div>
+</form>
+
 
-  </table>
-  <br>
-</div>