fix: #172 removing old styles

Author: enriquezrene

package-lock.json

@@ -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.scss

@@ -62,14 +62,16 @@ 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;
-      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());
@@ -106,6 +108,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
         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 = [];
@@ -124,6 +127,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
         end_date: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
         end_hour: '00:00',
         uri: '',
+        technology: '',
       });
     }
   }
@@ -136,16 +140,16 @@ 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;
+    this.entryForm.get('technology').reset();
   }
 
   removeTag(index) {
     this.selectedTechnology.splice(index, 1);
+    this.selectedTechnology = [...this.selectedTechnology, name];
+    this.showlist = false;
+    this.entryForm.get('technology').reset();
   }
 
   onSubmit() {

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

@@ -8,10 +8,11 @@
         data-target="#editRecordsByDate"
         class="btn btn-primary"
       >
-        <i class="fa fa-plus-square"></i> New Entry
+        Add 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">
@@ -67,20 +68,47 @@
               <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="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">

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

@@ -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;
-  }
-}