feat: TT-430 read activities localhost (#771)

* feature: TT-430 list and edit status of activities

* feature: TT-430 hide add new activity in production

* feat: TT-430 tests added and environment production enabled

* feat: TT-430 column status change in prod or dev mode and delete is managed in backend

* fix: TT-413 show projects when you do not have the latest projects (#770)

* fix: TT-413 show projects when you do not have the latest projects

* fix: TT-413 validate array empty

* chore(release): 1.52.6 [skip ci]nn

* feat: TT-430 tests added and environment production enabled

* fix: TT-430 rebase with master

Co-authored-by: Alexander Rafael Arcos Gómez <[email protected]>
Co-authored-by: semantic-release-bot <[email protected]>

Author: 3 people

package-lock.json

@@ -5,7 +5,7 @@
     "preinstall": "npx npm-force-resolutions",
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
+    "build": "ng build --prod",
     "test": "ng test",
     "test-headless": "ng test --browsers ChromeHeadless",
     "ci-test": "ng test --no-watch --no-progress --browsers ChromeHeadless",

package.json

@@ -4,26 +4,32 @@
       <tr class="d-flex">
         <th class="col-4 text-center">Activity ID</th>
         <th class="col-4 text-center">Activity</th>
-        <th class="col-2 text-center hidden">Options</th>
-        <th class="col-4 text-center">Status</th>
+        <th class="col-2 text-center" *ngIf="showOptionInDevelopment">Options</th>
+        <th scope="col" class="col-2 text-center" *ngIf="showOptionInDevelopment">Status</th>
       </tr>
     </thead>
     <app-loading-bar *ngIf="isLoading$ | async"></app-loading-bar>
     <tbody *ngIf="(isLoading$ | async) === false">
       <tr class="d-flex" *ngFor="let activity of activities">
         <td class="col-4 text-break">{{ activity.id }}</td>
         <td class="col-4">{{ activity.name }}</td>
-        <td class="col-2 text-center hidden">
+        <td class="col-2 text-center" *ngIf="showOptionInDevelopment">
           <button type="button" class="btn btn-sm btn-primary" (click)="updateActivity(activity.id)">
             <i class="fa fa-pencil fa-xs"></i>
           </button>
         </td>
-        <td class="col-4 text-center">
-          <div class="flex justify-center">
+        <div *ngIf="showOptionInDevelopment; then devBlock; else prodBlock"></div>
+        <ng-template #devBlock>
+          <td class="col-2 text-center">
+            <app-dropdown [info]="activity" (updateInfo)="changeOperation($event)"></app-dropdown>
+          </td>
+        </ng-template>
+        <ng-template #prodBlock>
+          <td class="col-4 text-center">
             <em class="fa mr-2 mt-1" [ngClass]="[activity.btnIcon, activity.iconColor]"></em>
-            <p> {{ activity.btnName }}</p>
-          </div>
-        </td>
+            <span>{{ activity.btnName }}</span>
+          </td>
+        </ng-template>
       </tr>
     </tbody>
   </table>

src/app/modules/activities-management/components/activity-list/activity-list.component.html

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { select, Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import { delay, map } from 'rxjs/operators';
@@ -16,6 +16,7 @@ import { ActivityState } from './../../store/activity-management.reducers';
 export class ActivityListComponent implements OnInit {
   @Output() changeValueShowActivityForm = new EventEmitter<boolean>();
   showActivityForm: boolean;
+  @Input() showOptionInDevelopment: boolean;
 
   constructor(private store: Store<ActivityState>) {
     this.isLoading$ = store.pipe(delay(0), select(getIsLoading));

src/app/modules/activities-management/components/activity-list/activity-list.component.ts

@@ -1,8 +1,14 @@
-<div class="col-12 col-md-9 px-0">
-  <div class="hidden">
+<div class="col-12 px-0">
+  <div *ngIf="showOptionInDevelopment">
     <app-create-activity
-    [showActivityForm]="showActivityForm" (changeValueShowActivityForm)="showActivityForm = $event"></app-create-activity>
+      [showActivityForm]="showActivityForm"
+      (changeValueShowActivityForm)="showActivityForm = $event"
+    >
+    </app-create-activity>
   </div>
   <app-activity-list
-  (changeValueShowActivityForm)="showActivityForm = $event"></app-activity-list>
+    [showOptionInDevelopment]="showOptionInDevelopment"
+    (changeValueShowActivityForm)="showActivityForm = $event"
+  >
+  </app-activity-list>
 </div>

src/app/modules/activities-management/pages/activities-management.component.html

@@ -1,4 +1,5 @@
 import { waitForAsync, TestBed, ComponentFixture } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import { ActivitiesManagementComponent } from './activities-management.component';
 
 describe('ActivitiesManagementComponent', () => {
@@ -21,4 +22,13 @@ describe('ActivitiesManagementComponent', () => {
   it('should create the component', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should check if is in development environment', () => {
+    expect(component.showOptionInDevelopment).toBe(true);
+  });
+
+  it('should check if add new entry button is render', () => {
+    const addItemDebugElement = fixture.debugElement.query(By.css('div.col-12.px-0')).childNodes.length;
+    expect(addItemDebugElement).toBe(3);
+  });
 });

src/app/modules/activities-management/pages/activities-management.component.spec.ts

@@ -1,9 +1,22 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { environment } from 'src/environments/environment';
+
 @Component({
   selector: 'app-activities-management',
   templateUrl: './activities-management.component.html',
   styleUrls: ['./activities-management.component.scss'],
 })
-export class ActivitiesManagementComponent {
+export class ActivitiesManagementComponent implements OnInit {
   @Input() showActivityForm: boolean;
+  showOptionInDevelopment = true;
+
+  ngOnInit() {
+    this.showOption();
+  }
+
+  showOption(): void {
+    if (environment.production){
+      this.showOptionInDevelopment = false;
+    }
+  }
 }

src/app/modules/activities-management/pages/activities-management.component.ts

@@ -1,9 +1,32 @@
 import * as keys from './keys';
 
 export const environment = {
-  production: true
+  production: true,
+  timeTrackerApiUrl: 'https://timetracker-api.azurewebsites.net',
+  stackexchangeApiUrl: 'https://api.stackexchange.com',
 };
 
 export const AUTHORITY = keys.AUTHORITY;
 export const CLIENT_ID = keys.CLIENT_ID;
 export const SCOPES = keys.SCOPES;
+export const ITEMS_PER_PAGE = 5;
+export const STACK_EXCHANGE_ID = keys.STACK_EXCHANGE_ID;
+export const STACK_EXCHANGE_ACCESS_TOKEN = keys.STACK_EXCHANGE_ACCESS_TOKEN;
+export const AZURE_APP_CONFIGURATION_CONNECTION_STRING = keys.AZURE_APP_CONFIGURATION_CONNECTION_STRING;
+export const DATE_FORMAT = 'yyyy-MM-dd';
+export const DATE_FORMAT_YEAR = 'YYYY-MM-DD';
+export const GROUPS = {
+  ADMIN: 'time-tracker-admin',
+  TESTER: 'time-tracker-tester',
+};
+
+export const ROLES = {
+  admin: {
+    name: 'admin',
+    value: 'time-tracker-admin',
+  },
+  tester: {
+    name: 'test',
+    value: 'time-tracker-tester',
+  },
+};

src/environments/environment.prod.ts

@@ -5,7 +5,7 @@ import * as keys from './keys';
 
 export const environment = {
   production: false,
-  timeTrackerApiUrl: 'https://timetracker-api.azurewebsites.net',
+  timeTrackerApiUrl: 'http://localhost:7071/api',
   stackexchangeApiUrl: 'https://api.stackexchange.com',
 };