Merge branch 'master' of https://github.com/ioet/time-tracker-ui into Time-Clock-Timer-Component

Author: daros10

.github/workflows/master_time-tracker-ui.yml

@@ -0,0 +1,35 @@
+# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
+# More GitHub Actions for Azure: https://github.com/Azure/actions
+
+name: Build and deploy Node.js app to Azure Web App - time-tracker-ui
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@master
+
+    - name: Set up Node.js version
+      uses: actions/setup-node@v1
+      with:
+        node-version: '12.x'
+
+    - name: npm install, build, and test
+      run: |
+        npm install
+        npm run build --if-present
+#        npm run test --if-present
+
+    - name: 'Deploy to Azure Web App'
+      uses: azure/webapps-deploy@v1
+      with:
+        app-name: 'time-tracker-ui'
+        slot-name: 'production'
+        publish-profile: ${{ secrets.AzureAppService_PublishProfile_728dc744f9384bf38e8a0446aaaee29d }}
+        package: dist/time-tracker

karma.conf.js

@@ -18,7 +18,13 @@ module.exports = function (config) {
     coverageIstanbulReporter: {
       dir: require('path').join(__dirname, './coverage/time-tracker'),
       reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
+      fixWebpackSourcePaths: true,
+      thresholds: {
+        statements: 80,
+        lines: 80,
+        branches: 80,
+        functions: 80
+      }
     },
     reporters: ['progress', 'kjhtml'],
     port: 9876,

src/app/app.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
 
@@ -16,8 +17,7 @@ import { ProjectListComponent } from './components/shared/project-list/project-l
 import { CreateProjectComponent } from './components/shared/create-project/create-project.component';
 import { DetailsFieldsComponent } from './components/shared/details-fields/details-fields.component';
 import { ProjectListHoverComponent } from './components/shared/project-list-hover/project-list-hover.component';
-
-
+import { ModalComponent } from './components/shared/modal/modal.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -32,13 +32,15 @@ import { ProjectListHoverComponent } from './components/shared/project-list-hove
     TimeClockComponent,
     DetailsFieldsComponent,
     ProjectListHoverComponent,
+    ModalComponent
   ],
   imports: [
     CommonModule,
     BrowserModule,
     AppRoutingModule,
     FormsModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/options-sidebar/project-management/project-management.component.html

@@ -11,6 +11,7 @@
   <app-project-list class="item"
   [projects] = "projects"
   (editProject) = "editProject($event)"
+  (deleteProject) = "deleteProject($event)"
   >
   </app-project-list>
 </div>

src/app/components/options-sidebar/project-management/project-management.component.spec.ts

@@ -1,11 +1,15 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
 
 import { ProjectManagementComponent } from './project-management.component';
 import { Project } from '../../../interfaces/project';
+import { ProjectService } from '../../../services/project.service';
+import { of } from 'rxjs';
 
 describe('ProjectManagementComponent', () => {
   let component: ProjectManagementComponent;
   let fixture: ComponentFixture<ProjectManagementComponent>;
+  let projectService: ProjectService;
+
   const projects: Project[] = [{
     id: 1,
     name: 'app 1',
@@ -29,9 +33,17 @@ describe('ProjectManagementComponent', () => {
   }
   ];
 
+  const projectServiceStub = {
+    getProjects() {
+      const projectsMock = projects;
+      return of(projectsMock);
+    }
+  };
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ProjectManagementComponent ]
+      declarations: [ ProjectManagementComponent ],
+      providers: [ { provide: ProjectService, useValue: projectServiceStub }]
     })
     .compileComponents();
   }));
@@ -40,9 +52,18 @@ describe('ProjectManagementComponent', () => {
     fixture = TestBed.createComponent(ProjectManagementComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+
+    projectService = TestBed.inject(ProjectService);
     component.projects = projects;
   });
 
+
+  it('Service injected via inject(...) and TestBed.get(...) should be the same instance',
+    inject([ProjectService], (injectService: ProjectService) => {
+      expect(injectService).toBe(projectService);
+    })
+  );
+
   it('should create', () => {
     expect(component).toBeTruthy();
   });
@@ -97,4 +118,34 @@ describe('ProjectManagementComponent', () => {
     component.cancelForm();
     expect(component.project).toBe(null);
   });
+
+  it('should call getProjects method on init', () => {
+    const preojectServiceSpy = spyOn(projectService, 'getProjects').and.callThrough();
+    const componentSpy = spyOn(component, 'getProjects').and.callThrough();
+
+    expect(preojectServiceSpy).not.toHaveBeenCalled();
+    expect(componentSpy).not.toHaveBeenCalled();
+
+    component.ngOnInit();
+
+    expect(preojectServiceSpy).toHaveBeenCalledTimes(1);
+    expect(componentSpy).toHaveBeenCalledTimes(1);
+  });
+
+
+  it('should call getProjects and return a list of projects', async(() => {
+
+    spyOn(projectService, 'getProjects').and.returnValue(of(projects));
+
+    component.ngOnInit();
+
+    expect(component.projects).toEqual(projects);
+  }));
+
+  it('should delete a project #deleteProject', () => {
+    const projectId = 1;
+
+    component.deleteProject(projectId);
+    expect(component.projects.length).toEqual(2);
+  });
 });

src/app/components/options-sidebar/project-management/project-management.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Project } from '../../../interfaces/project';
-import { Input } from '@angular/core';
-import { Output, EventEmitter } from '@angular/core';
+import { ProjectService } from '../../../services/project.service';
+
 @Component({
   selector: 'app-project-management',
   templateUrl: './project-management.component.html',
@@ -13,14 +13,13 @@ export class ProjectManagementComponent implements OnInit {
 
   project: Project;
 
-  projects: Project[] = [
-    { id: 1, name: 'GoSpace', details: 'Improve workspaces', status: 'Active', completed: false},
-    { id: 2, name: 'MidoPlay', details: 'Lottery', status: 'Inactive', completed: true}
-  ];
+  projects: Project[] = [];
 
-  constructor() { }
+  constructor(private projectService: ProjectService) {
+  }
 
   ngOnInit(): void {
+    this.getProjects();
   }
 
   updateProject(projectData): void {
@@ -44,7 +43,17 @@ export class ProjectManagementComponent implements OnInit {
     this.project = this.projects.filter((project) => project.id === projectId)[0];
   }
 
+  deleteProject(projectId): void {
+    this.projects = this.projects.filter((project) => project.id !== projectId);
+  }
+
   cancelForm() {
     this.project = null;
   }
+
+   getProjects() {
+    this.projectService.getProjects().subscribe(data => {
+      this.projects = data;
+    });
+  }
 }

src/app/components/shared/modal/modal.component.css

@@ -0,0 +1,17 @@
+<div class="modal-dialog" role="document">
+  <div class="modal-content" *ngIf="project">
+    <div class="modal-header">
+      <h5 class="modal-title" id="exampleModalLabel">Delete Project</h5>
+      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+    <div class="modal-body">
+      Are you sure you want to delete {{project.name}} project?
+    </div>
+    <div class="modal-footer">
+      <button #cancelDeleteModal type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+      <button (click)="removedProject(project.id)" type="button" class="btn btn-primary">Delete</button>
+    </div>
+  </div>
+</div>

src/app/components/shared/modal/modal.component.html

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalComponent } from './modal.component';
+
+describe('ModalComponent', () => {
+  let component: ModalComponent;
+  let fixture: ComponentFixture<ModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/shared/modal/modal.component.spec.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Output, EventEmitter } from '@angular/core';
+import { Input } from '@angular/core';
+import { Project } from '../../../interfaces/project'
+@Component({
+  selector: 'app-modal',
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.css']
+})
+export class ModalComponent implements OnInit {
+
+  @Input() project: Project;
+  @Output() removeProject = new EventEmitter();
+
+  @ViewChild('cancelDeleteModal') cancelDeleteModal: ElementRef;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  removedProject(projectId) {
+    this.removeProject.emit(projectId);
+    this.cancelDeleteModal.nativeElement.click();
+  }
+}