fix: #150 Get active entry and update entry

src/app/app.module.ts

@@ -29,6 +29,7 @@ import { ActivityListComponent } from './modules/activities-management/component
 import { CreateActivityComponent } from './modules/activities-management/components/create-activity/create-activity.component';
 import { FilterProjectPipe } from './modules/shared/pipes/filter-project/filter-project.pipe';
 import { SearchComponent } from './modules/shared/components/search/search.component';
+import { EntryFieldsComponent } from './modules/time-clock/components/entry-fields/entry-fields.component';
 import { HomeComponent } from './modules/home/home.component';
 import { LoginComponent } from './modules/login/login.component';
 import { ActivityEffects } from './modules/activities-management/store/activity-management.effects';
@@ -86,6 +87,7 @@ import { InjectTokenInterceptor } from './modules/shared/interceptors/inject.tok
     ProjectListComponent,
     ProjectTypeListComponent,
     CreateProjectTypeComponent,
+    EntryFieldsComponent,
   ],
   imports: [
     CommonModule,

src/app/modules/shared/models/entry.model.ts

@@ -6,10 +6,13 @@ export interface Entry {
   activity: string;
   technologies: string[];
   comments?: string;
-  ticket?: string;
+  uri?: string;
 }
 
 export interface NewEntry {
   project_id: string;
-  start_date: string;
+  start_date?: string;
+  description?: string;
+  technologies?: string[];
+  uri?: string;
 }

src/app/modules/time-clock/components/entry-fields/entry-fields.component.html

@@ -0,0 +1,58 @@
+<form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
+  <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">Activity</span>
+    </div>
+    <select id="activitiesSelect" (blur)="onSubmit()" class="form-control">
+      <option *ngFor="let activity of activities">{{ activity.name }}</option>
+    </select>
+  </div>
+  <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 URI</span>
+    </div>
+    <input (blur)="onSubmit()" type="text" id="uri" formControlName="uri" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
+  </div>
+
+  <div class="input-group input-group-sm">
+    <div class="input-group-prepend">
+      <span class="input-group-text span-width" id="inputGroup-sizing-sm">Technology</span>
+    </div>
+    <input
+      (keypress)="getTechnologies($event.target.value)"
+      type="text"
+      class="form-control"
+      aria-label="Small"
+      aria-describedby="inputGroup-sizing-sm"
+    />
+  </div>
+
+  <div *ngIf="isLoading">LOADING...</div>
+  <div #list *ngIf="technology && showlist" class="d-flex flex-column technology-content">
+    <div
+      *ngFor="let item of technology.items"
+      (click)="setTechnology(item.name)"
+      class="technology-list"
+      [ngClass]="{ active: selectedTechnology && selectedTechnology.includes(item.name) }"
+    >
+      {{ item.name }}
+    </div>
+  </div>
+  <div class="tags-content d-flex flex-wrap">
+    <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 text-left">
+    <label for="NotesTextarea">Description</label>
+    <textarea
+      (blur)="onSubmit()"
+      formControlName="description"
+      class="form-control"
+      id="NotesTextarea"
+      rows="3"
+    ></textarea>
+  </div>
+</form>

src/app/modules/time-clock/components/entry-fields/entry-fields.component.scss

@@ -0,0 +1,91 @@
+@import '../../../../../styles/colors.scss';
+
+@mixin tagTechnology() {
+  background-color: $modal-button-secondary;
+  color: #ffffff;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.span-width {
+  width: 6rem;
+  background-image: $background-pantone;
+  color: white;
+}
+
+.hidden {
+  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;
+  max-height: 7.5rem;
+  overflow-y: auto;
+
+  .technology-list {
+    cursor: pointer;
+    font-size: 0.8rem;
+    margin-bottom: 0.1rem;
+    padding: 0.2rem 0.5rem;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+
+  .active {
+    background-color: #efefef;
+  }
+}
+
+.tags-content {
+  margin: 2rem 0;
+
+  div {
+    @include tagTechnology();
+
+    border-radius: 0.2rem;
+    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
+    font-size: 0.8rem;
+    padding: 0.1rem 1rem 0.2rem 1.5rem;
+    position: relative;
+    margin: 0 0.5rem 0.5rem 0;
+
+    i {
+      cursor: pointer;
+    }
+  }
+}
+
+.ng-autocomplete {
+  width: 100%;
+}
+
+.autocomplete::ng-deep .autocomplete-container {
+  border: 1px solid #ced4da;
+  border-radius: 0 0.25rem 0.25rem 0;
+  box-shadow: none;
+  height: 2rem;
+
+  .input-container {
+    height: 100%;
+
+    input {
+      border-radius: 0.25rem;
+      height: 100%;
+    }
+  }
+}