fix: #172 removing old styles

Author: enriquezrene

package-lock.json

@@ -6,7 +6,6 @@
     <div class="ng-autocomplete">
       <ng-autocomplete
         class="autocomplete"
-
         [data]="listProjects && listProjects"
         [searchKeyword]="keyword"
         [itemTemplate]="itemTemplate"
@@ -32,7 +31,7 @@
 
   <div class="input-group input-group-sm mb-3">
     <div class="input-group-prepend">
-      <span class="input-group-text span-width" id="inputGroup-sizing-sm">Ticket</span>
+      <span class="input-group-text span-width" id="inputGroup-sizing-sm">Ticket URI</span>
     </div>
     <input
       formControlName="uri"
@@ -92,11 +91,13 @@
       <span class="input-group-text span-width" id="inputGroup-sizing-sm">Technology</span>
     </div>
     <input
-      (keypress)="getTechnologies($event.target.value)"
+      (keyup)="getTechnologies($event.target.value)"
       type="text"
       class="form-control"
       aria-label="Small"
       aria-describedby="inputGroup-sizing-sm"
+      id="technology"
+      formControlName="technology"
     />
   </div>
 
@@ -111,21 +112,23 @@
       {{ item.name }}
     </div>
   </div>
-  <div class="tags-content d-flex flex-wrap">
+  <div class="tags-content d-flex flex-wrap" *ngIf="selectedTechnology.length">
     <div *ngFor="let technology of selectedTechnology; let tagIndex = index" class="tag">
       <span class="mr-3">{{ technology }}</span>
       <i class="fas fa-times text-white" (click)="removeTag(tagIndex)"></i>
     </div>
   </div>
-
+  <div class="form-group" *ngIf="selectedTechnology.length === 0">
+    <!-- empty-space -->
+  </div>
   <div class="form-group text-left">
     <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">
+    <button #closeModal type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">
       Close
     </button>
-    <button type="submit" class="btn save-button-style">Save changes</button>
+    <button type="submit" class="btn btn-sm btn-primary mb-2 ml-2 mt-2">Save changes</button>
   </div>
 </form>

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

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

@@ -61,14 +61,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());
@@ -98,6 +100,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 = [];
@@ -110,6 +113,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
         end_date: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
         end_hour: '00:00',
         uri: '',
+        technology: '',
       });
     }
   }
@@ -122,16 +126,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

@@ -7,7 +7,7 @@ export interface TechnologyState {
 }
 
 export const initialState = {
-  technologyList: null,
+  technologyList: { items: []},
   isLoading: false,
 };
 

src/app/modules/shared/store/technology.reducers.ts

@@ -8,75 +8,49 @@
         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-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-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-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"
                 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;
-  }
-}