#29 Get Technologies

.github/workflows/CD-time-tracker-ui.yml

@@ -29,6 +29,8 @@ jobs:
         SCOPES: ${{ secrets.scopes }}
         CLIENT_ID: ${{ secrets.client_id }}
         AUTHORITY: ${{ secrets.authority }}
+        STACK_EXCHANGE_ID: ${{ secrets.stack_exchange_id }}
+        STACK_EXCHANGE_ACCESS_TOKEN: ${{ secrets.stack_exchange_access_token }}
       run: |
         chmod +x ./scripts/populate-keys.sh
         sh ./scripts/populate-keys.sh

.github/workflows/CI-mutation-tests.yml

@@ -26,6 +26,8 @@ jobs:
           SCOPES: ${{ secrets.scopes }}
           CLIENT_ID: ${{ secrets.client_id }}
           AUTHORITY: ${{ secrets.authority }}
+          STACK_EXCHANGE_ID: ${{ secrets.stack_exchange_id }}
+          STACK_EXCHANGE_ACCESS_TOKEN: ${{ secrets.stack_exchange_access_token }}
         run:  sudo sh scripts/populate-keys.sh
 
       - name: Run the test

.github/workflows/CI-time-tracker-ui.yml

@@ -44,12 +44,14 @@ jobs:
         SCOPES: ${{ secrets.scopes }}
         CLIENT_ID: ${{ secrets.client_id }}
         AUTHORITY: ${{ secrets.authority }}
+        STACK_EXCHANGE_ID: ${{ secrets.stack_exchange_id }}
+        STACK_EXCHANGE_ACCESS_TOKEN: ${{ secrets.stack_exchange_access_token }}
       run:  sudo sh scripts/populate-keys.sh
 
     - name: Run the test
       run: npm run ci-test --if-present
 
     - name: Generate coverage report
-      env: 
+      env:
         CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
       run: bash <(curl -s https://codecov.io/bash)

README.md

@@ -40,6 +40,8 @@ Create a file keys.ts with the content pinned in our slack channel:
 export const AUTHORITY = 'XXX';
 export const CLIENT_ID = 'XXX';
 export const SCOPES = ['XXX'];
+export const STACK_EXCHANGE_ID = 'XXX';
+export const STACK_EXCHANGE_ACCESS_TOKEN = 'XXX';
 ```
 
 ### Prepare your environment for vscode

scripts/populate-keys.sh

@@ -4,4 +4,6 @@
 echo 'export const AUTHORITY = "'$AUTHORITY'";' >> src/environments/keys.ts
 echo 'export const CLIENT_ID = "'$CLIENT_ID'";' >> src/environments/keys.ts
 echo 'export const SCOPES = ["'$SCOPES'"];' >> src/environments/keys.ts
+echo 'export const STACK_EXCHANGE_ID = "'$STACK_EXCHANGE_ID'";' >> src/environments/keys.ts
+echo 'export const STACK_EXCHANGE_ACCESS_TOKEN = "'$STACK_EXCHANGE_ACCESS_TOKEN'";' >> src/environments/keys.ts
 cat src/environments/keys.ts

src/app/app.module.ts

@@ -32,6 +32,7 @@ import { HomeComponent } from './modules/home/home.component';
 import { LoginComponent } from './modules/login/login.component';
 import { ActivityEffects } from './modules/activities-management/store/activity-management.effects';
 import { ProjectEffects } from './modules/project-management/store/project.effects';
+import { TechnologyEffects } from './modules/shared/store/technology.effects';
 import { reducers, metaReducers } from './reducers';
 import { environment } from '../environments/environment';
 import { CustomerComponent } from './modules/customer-managment/pages/customer.component';
@@ -99,7 +100,7 @@ import { CreateProjectTypeComponent } from './modules/customer-managment/compone
           maxAge: 15, // Retains last 15 states
         })
       : [],
-    EffectsModule.forRoot([ProjectEffects, ActivityEffects]),
+    EffectsModule.forRoot([ProjectEffects, ActivityEffects, TechnologyEffects]),
   ],
   providers: [],
   bootstrap: [AppComponent],

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

@@ -36,18 +36,38 @@
       aria-describedby="inputGroup-sizing-sm"
     />
   </div>
-  <div class="input-group input-group-sm mb-3">
+
+  <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
-      formControlName="technology"
+      (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 *ngIf="technology" class="d-flex flex-column technology-content">
+    <div
+      *ngFor="let item of technology.items"
+      (click)="setTechnology(item.name)"
+      class="technology-list"
+      [ngClass]="{ active: 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">
     <label for="NotesTextarea">Notes</label>
     <textarea formControlName="comments" class="form-control" id="NotesTextarea" rows="3"></textarea>

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

@@ -1,4 +1,14 @@
 @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;
@@ -18,3 +28,44 @@
   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;
+    }
+  }
+}

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

@@ -1,35 +1,47 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
+import { TechnologyState } from '../../store/technology.reducers';
+import { allTechnologies } from '../../store/technology.selectors';
 import { DetailsFieldsComponent } from './details-fields.component';
+import { FilterProjectPipe } from '../../../shared/pipes';
+import * as actions from '../../store/technology.actions';
 
 describe('DetailsFieldsComponent', () => {
   let component: DetailsFieldsComponent;
   let fixture: ComponentFixture<DetailsFieldsComponent>;
+  let store: MockStore<TechnologyState>;
+  let mockTechnologySelector;
+  let length;
+
+  const state = {
+    technologyList: { items: [{ name: 'java' }] },
+    isLoading: false,
+  };
+
   const initialData = {
     project: '',
     activity: '',
     ticket: '',
-    technology: '',
-    comments: ''
+    comments: '',
   };
 
   const newData = {
     project: 'Ernst&Young',
     activity: 'development',
     ticket: 'WA-15',
-    technology: 'Angular',
-    comments: 'No notes'
+    comments: 'No notes',
   };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [DetailsFieldsComponent],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule
-      ],
+      declarations: [DetailsFieldsComponent, FilterProjectPipe],
+      providers: [provideMockStore({ initialState: state })],
+      imports: [FormsModule, ReactiveFormsModule],
     }).compileComponents();
+    store = TestBed.inject(MockStore);
+    mockTechnologySelector = store.overrideSelector(allTechnologies, state);
   }));
 
   beforeEach(() => {
@@ -42,12 +54,6 @@ describe('DetailsFieldsComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should emit saveEntry event', () => {
-    spyOn(component.saveEntry, 'emit');
-    component.onSubmit();
-    expect(component.saveEntry.emit).toHaveBeenCalledWith(initialData);
-  });
-
   it('should emit ngOnChange without data', () => {
     component.entryToEdit = null;
     component.ngOnChanges();
@@ -59,4 +65,73 @@ describe('DetailsFieldsComponent', () => {
     component.ngOnChanges();
     expect(component.entryForm.value).toEqual(newData);
   });
+
+  it('should dispatch FindTechnology action #getTechnologies', () => {
+    const value = 'java';
+    spyOn(store, 'dispatch');
+    length = value.length;
+    component.getTechnologies(value);
+
+    expect(store.dispatch).toHaveBeenCalledWith(new actions.FindTechnology(value));
+  });
+
+  it('should NOT dispatch FindTechnology action #getTechnologies', () => {
+    const value = 'j';
+    spyOn(store, 'dispatch');
+    length = value.length;
+    component.getTechnologies(value);
+
+    expect(store.dispatch).not.toHaveBeenCalledWith(new actions.FindTechnology(value));
+  });
+
+  it('should add a new tag #setTechnology', () => {
+    const name = 'ngrx';
+    component.selectedTechnology = ['java', 'javascript'];
+    component.selectedTechnology.indexOf(name);
+    length = component.selectedTechnology.length;
+    component.setTechnology(name);
+    expect(component.selectedTechnology.length).toBe(3);
+  });
+
+  it('should NOT add a new tag #setTechnology', () => {
+    const name = 'ngrx';
+    component.selectedTechnology = [
+      'java',
+      'javascript',
+      'angular',
+      'angular-ui',
+      'typescript',
+      'scss',
+      'bootstrap',
+      'jasmine',
+      'karme',
+      'github',
+    ];
+    component.selectedTechnology.indexOf(name);
+    length = component.selectedTechnology.length;
+    component.setTechnology(name);
+    expect(component.selectedTechnology.length).toBe(10);
+  });
+
+  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);
+    expect(component.removeTag).toHaveBeenCalledWith(index);
+  });
+
+  it('should call the removeTag() function #removeTag', () => {
+    const index = 1;
+    component.selectedTechnology = ['java', 'angular'];
+    component.removeTag(index);
+    expect(component.selectedTechnology.length).toBe(1);
+  });
+
+  it('should emit saveEntry event', () => {
+    spyOn(component.saveEntry, 'emit');
+    component.onSubmit();
+    expect(component.saveEntry.emit).toHaveBeenCalledWith(initialData);
+  });
 });