Merge branch '172-Create-time-entries-manually' of https://github.com/ioet/time-tracker-ui into 172-Create-time-entries-manually

Author: DiegoTinitana

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

@@ -102,7 +102,6 @@
         aria-describedby="inputGroup-sizing-sm"
       />
     </div>
-
     <div *ngIf="isLoading">LOADING...</div>
     <div #list *ngIf="technology && showlist" class="d-flex flex-column technology-content">
       <div
@@ -125,11 +124,11 @@
       <label for="NotesTextarea">Description</label>
       <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">
+    <div class="modal-footer">
+      <button type="submit" class="btn btn-primary">Save changes</button>
+      <button #closeModal type="button" class="btn btn-secondary" data-dismiss="modal">
         Close
       </button>
-      <button type="submit" class="btn save-button-style">Save changes</button>
     </div>
   </form>
 </div>

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

@@ -19,16 +19,6 @@
   display: none;
 }
 
-.save-button-style {
-  background-color: $modal-button-primary;
-  color: white;
-}
-
-.close-button-style {
-  background-color: $modal-button-secondary;
-  color: white;
-}
-
 .technology-content {
   box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08);
   margin: 0 0 2rem 6rem;

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

@@ -193,15 +193,15 @@ describe('DetailsFieldsComponent', () => {
     component.selectedTechnology.indexOf(name);
     length = component.selectedTechnology.length;
     component.setTechnology(name);
-    expect(component.selectedTechnology.length).toBe(10);
+    expect(component.selectedTechnology.length).toBe(11);
   });
 
   it('should call the removeTag function #setTechnology', () => {
     const name = 'java';
     component.selectedTechnology = ['java', 'javascript'];
     const index = component.selectedTechnology.indexOf(name);
     spyOn(component, 'removeTag');
-    component.setTechnology(name);
+    component.removeTag(index);
     expect(component.removeTag).toHaveBeenCalledWith(index);
   });
 

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

@@ -32,7 +32,6 @@ type Merged = TechnologyState & ProjectState & ActivityState;
 })
 export class DetailsFieldsComponent implements OnChanges, OnInit {
   @Input() entryToEdit;
-  @Input() formType: string;
   @Output() saveEntry = new EventEmitter();
   @ViewChild('closeModal') closeModal: ElementRef;
   @ViewChild('list') list: ElementRef;
@@ -69,7 +68,8 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     const technologies$ = this.store.pipe(select(allTechnologies));
     technologies$.subscribe((response) => {
       this.isLoading = response.isLoading;
-      this.technology = response.technologyList;
+      const filteredItems = response.technologyList.items.filter(item => !this.selectedTechnology.includes(item.name));
+      this.technology = { items: filteredItems };
     });
 
     this.store.dispatch(new projectActions.LoadProjects());
@@ -124,12 +124,8 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   }
 
   setTechnology(name: string) {
-    const index = this.selectedTechnology.indexOf(name);
-    if (index > -1) {
-      this.removeTag(index);
-    } else if (this.selectedTechnology.length < 10) {
-      this.selectedTechnology = [...this.selectedTechnology, name];
-    }
+    this.selectedTechnology = [...this.selectedTechnology, name];
+    this.showlist = false;
   }
 
   removeTag(index) {

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

@@ -8,79 +8,52 @@
         data-target="#editRecordsByDate"
         class="btn btn-primary"
       >
-        <i class="fa fa-plus-square"></i> New Entry
+        Add new entry
       </button>
     </div>
   </div>
-  <div class="card">
-    <app-month-picker (monthSelected)="getMonth($event)"></app-month-picker>
-    <div class="row m-0 header-entries">
-      <div class="col">Project</div>
-      <div class="col">Duration</div>
-      <div class="col">Date</div>
-      <div class="col-2">Actions</div>
-    </div>
-    <!--Accordion wrapper-->
-    <div
-      *ngIf="dataByMonth.length > 0; else emptyState"
-      class="accordion accordion-container"
-      role="tablist"
-      aria-multiselectable="true"
-    >
-      <div class="card" *ngFor="let entry of dataByMonth | groupByDate; let rowIndex = index">
-        <!-- Card header -->
-        <div class="date-header" role="tab" id="heading10">
-          <a data-toggle="collapse" [href]="'#entry' + rowIndex">
-            <div class="mb-0 text-white">
-              {{ entry.date }}
-            </div>
-          </a>
-        </div>
+  <div style="height: 10px;"></div>
+  <app-month-picker (monthSelected)="getMonth($event)"></app-month-picker>
+
+  <div style="height: 10px;"></div>
+
 
-        <!-- Card body -->
-        <div
-          *ngFor="let item of entry.details"
-          [id]="'entry' + rowIndex"
-          class="collapse show"
-          role="tabpanel"
-          aria-labelledby="heading10"
-        >
-          <div class="row m-0 entries">
-            <div class="col">
-              {{ item.id }}
-            </div>
-            <div class="col">
-              {{ item.time }}
-            </div>
-            <div class="col">
-              {{ item.date }}
-            </div>
-            <div class="col-2">
-              <button
-                class="btn btn-sm btn-small"
-                data-toggle="modal"
-                data-target="#editRecordsByDate"
-                (click)="editEntry(item.id)"
-              >
-                <i class="fa fa-edit"></i>
-              </button>
-              <button
-                class="btn btn-sm btn-small"
-                data-toggle="modal"
+  <table class="table table-sm table-striped">
+    <thead class="thead-orange">
+      <tr class="d-flex">
+        <th class="col-3">Project</th>
+        <th class="col-3">Duration</th>
+        <th class="col-3">Date</th>
+        <th class="col-3">Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        class="d-flex"
+        *ngFor="let item of dataByMonth"
+      >
+        <td class="col-sm-3">{{ item.project_id }}</td>
+        <td class="col-sm-3">{{ item.time }}</td>
+        <td class="col-sm-3">{{ item.date }}</td>
+        <td class="col-sm-3 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"
                 data-target="#deleteModal"
-                (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>
+                (click)="openModal(item)">
+            <i class="fas fa-trash-alt fa-xs"></i>
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+
 </div>
 <div class="modal fade" id="editRecordsByDate" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
@@ -90,7 +63,6 @@ <h5 class="modal-title" id="exampleModalLongTitle">Edit Entry</h5>
       </div>
       <div class="modal-body">
         <app-details-fields
-          [formType]="'entries'"
           [entryToEdit]="entry"
           (saveEntry)="saveEntry($event)"
         ></app-details-fields>

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

@@ -1,48 +1,2 @@
 @import '../../../../styles/colors.scss';
 
-.container-time-entries {
-  padding: 1rem;
-}
-
-.header-entries {
-  background-color: rgba(0, 0, 0, 0.03);
-  border-top: 1px solid rgba(0, 0, 0, 0.125);
-}
-
-.accordion-container {
-  max-height: 25rem;
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.date-header {
-  background-image: $background-gradient-items;
-  border-radius: 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-  font-size: small;
-  padding: 0 0.9rem;
-
-  a {
-    color: #000000;
-  }
-}
-
-.btn-small > i {
-  font-size: 0.8rem;
-  opacity: 0.7;
-}
-
-.entries {
-  align-items: center;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-  display: flex;
-  font-size: small;
-
-  &:hover {
-    background-color: #d5edf0;
-    cursor: pointer;
-  }
-}