From 1ca70b8c4a6d1c0c5b4f1aed72a00254e9a054e3 Mon Sep 17 00:00:00 2001 From: daros10 Date: Wed, 11 Mar 2020 23:09:21 -0500 Subject: [PATCH 01/21] time clock in UI --- .../time-clock/time-clock.component.html | 74 ++++++++++++++++++- 1 file changed, 72 insertions(+), 2 deletions(-) diff --git a/src/app/components/optionsSidebar/time-clock/time-clock.component.html b/src/app/components/optionsSidebar/time-clock/time-clock.component.html index 80644640c..27f5d3e3f 100644 --- a/src/app/components/optionsSidebar/time-clock/time-clock.component.html +++ b/src/app/components/optionsSidebar/time-clock/time-clock.component.html @@ -1,5 +1,75 @@
-

time-clock works!

+
+
+
+
+ Time clock +
+
+ +
+
+
-
\ No newline at end of file +
+

Dario clocked out at hh:mm:ss

+
Totals
+
+
+
+
Current
+

-

+
+
+
Day
+

4:22

+ +
+
+
Week
+

14:00

+
+
+
Projects
+
+
+ +
+
+

Top

+
    +
  • + Customer › ernst-and-young + +
    • +
  • + Customer + + +
    • +
  • + Training + +
    • +
+
+ +
+
+
+ +
+
+ +
+ +
+ +
+ +
+ +
\ No newline at end of file From c656f2c7553585a5852ab86e01453fd3431dc48d Mon Sep 17 00:00:00 2001 From: daros10 Date: Sun, 15 Mar 2020 21:42:46 -0500 Subject: [PATCH 02/21] added code coverage dependecies --- angular.json | 240 +++++++++--------- .../time-clock/time-clock.component.html | 27 +- .../time-clock/time-clock.component.ts | 12 +- 3 files changed, 155 insertions(+), 124 deletions(-) diff --git a/angular.json b/angular.json index d51457a0a..c6bb80e94 100644 --- a/angular.json +++ b/angular.json @@ -1,128 +1,126 @@ { - "$schema": "./node_modules/@angular/cli/lib/config/schema.json", - "version": 1, - "newProjectRoot": "projects", - "projects": { - "time-tracker": { - "projectType": "application", - "schematics": {}, - "root": "", - "sourceRoot": "src", - "prefix": "app", - "architect": { - "build": { - "builder": "@angular-devkit/build-angular:browser", - "options": { - "outputPath": "dist/time-tracker", - "index": "src/index.html", - "main": "src/main.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.app.json", - "aot": true, - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.css" - ], - "scripts": [] - }, - "configurations": { - "production": { - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" - } - ], - "optimization": true, - "outputHashing": "all", - "sourceMap": false, - "extractCss": true, - "namedChunks": false, - "extractLicenses": true, - "vendorChunk": false, - "buildOptimizer": true, - "budgets": [ - { - "type": "initial", - "maximumWarning": "2mb", - "maximumError": "5mb" + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "time-tracker": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/time-tracker", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.app.json", + "aot": true, + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [{ + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + }], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [{ + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "6kb", + "maximumError": "10kb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "time-tracker:build" + }, + "configurations": { + "production": { + "browserTarget": "time-tracker:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "time-tracker:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "codeCoverage": true, + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + } }, - { - "type": "anyComponentStyle", - "maximumWarning": "6kb", - "maximumError": "10kb" + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "tsconfig.app.json", + "tsconfig.spec.json", + "e2e/tsconfig.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + }, + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "time-tracker:serve" + }, + "configurations": { + "production": { + "devServerTarget": "time-tracker:serve:production" + } + } } - ] - } - } - }, - "serve": { - "builder": "@angular-devkit/build-angular:dev-server", - "options": { - "browserTarget": "time-tracker:build" - }, - "configurations": { - "production": { - "browserTarget": "time-tracker:build:production" - } - } - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "browserTarget": "time-tracker:build" - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "main": "src/test.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.spec.json", - "karmaConfig": "karma.conf.js", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.css" - ], - "scripts": [] - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "tsconfig.app.json", - "tsconfig.spec.json", - "e2e/tsconfig.json" - ], - "exclude": [ - "**/node_modules/**" - ] - } - }, - "e2e": { - "builder": "@angular-devkit/build-angular:protractor", - "options": { - "protractorConfig": "e2e/protractor.conf.js", - "devServerTarget": "time-tracker:serve" - }, - "configurations": { - "production": { - "devServerTarget": "time-tracker:serve:production" } - } } - } + }, + "defaultProject": "time-tracker", + "cli": { + "analytics": false } - }, - "defaultProject": "time-tracker", - "cli": { - "analytics": false - } } \ No newline at end of file diff --git a/src/app/components/optionsSidebar/time-clock/time-clock.component.html b/src/app/components/optionsSidebar/time-clock/time-clock.component.html index 27f5d3e3f..8e406950c 100644 --- a/src/app/components/optionsSidebar/time-clock/time-clock.component.html +++ b/src/app/components/optionsSidebar/time-clock/time-clock.component.html @@ -24,7 +24,6 @@

-

Day

4:22

-
Week
@@ -55,6 +54,30 @@
Projects

+ +
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+
@@ -63,7 +86,7 @@
Projects
- +
diff --git a/src/app/components/optionsSidebar/time-clock/time-clock.component.ts b/src/app/components/optionsSidebar/time-clock/time-clock.component.ts index f34bb7b11..c1d7dc2c8 100644 --- a/src/app/components/optionsSidebar/time-clock/time-clock.component.ts +++ b/src/app/components/optionsSidebar/time-clock/time-clock.component.ts @@ -7,7 +7,17 @@ import { Component, OnInit } from '@angular/core'; }) export class TimeClockComponent implements OnInit { - constructor() { } + isClockIn: boolean; + + constructor() { + this.isClockIn = false; + } + + employeClockIn(): boolean { + this.isClockIn = true; + console.log('valor es' + this.isClockIn); + return this.isClockIn; + } ngOnInit(): void { } From aeb6fbad280d83101daa7f4b69ddb3f59a0f03ac Mon Sep 17 00:00:00 2001 From: daros10 Date: Mon, 16 Mar 2020 09:22:11 -0500 Subject: [PATCH 03/21] clockIn/out --- src/app/app.module.ts | 3 +++ .../time-clock/time-clock.component.html | 15 ++++----------- .../time-clock/time-clock.component.ts | 10 +++------- 3 files changed, 10 insertions(+), 18 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5bf489d58..90e7011ee 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,6 +7,8 @@ import { NavbarComponent } from './components/shared/navbar/navbar.component'; import { UserComponent } from './components/shared/user/user.component'; import { SidebarComponent } from './components/shared/sidebar/sidebar.component'; import { ClockComponent } from './components/shared/clock/clock.component'; +import { TimeClockComponent } from './components/optionsSidebar/time-clock/time-clock.component'; + @NgModule({ declarations: [ @@ -15,6 +17,7 @@ import { ClockComponent } from './components/shared/clock/clock.component'; UserComponent, SidebarComponent, ClockComponent, + TimeClockComponent ], imports: [ BrowserModule, diff --git a/src/app/components/optionsSidebar/time-clock/time-clock.component.html b/src/app/components/optionsSidebar/time-clock/time-clock.component.html index 8e406950c..3e43c39ef 100644 --- a/src/app/components/optionsSidebar/time-clock/time-clock.component.html +++ b/src/app/components/optionsSidebar/time-clock/time-clock.component.html @@ -1,4 +1,4 @@ -
+
@@ -53,9 +53,7 @@
Projects

- - -
+
@@ -75,9 +73,7 @@
Projects
-
-
@@ -86,13 +82,10 @@
Projects
- + +
-
-
-
-
\ No newline at end of file diff --git a/src/app/components/optionsSidebar/time-clock/time-clock.component.ts b/src/app/components/optionsSidebar/time-clock/time-clock.component.ts index c1d7dc2c8..99e8a2ea0 100644 --- a/src/app/components/optionsSidebar/time-clock/time-clock.component.ts +++ b/src/app/components/optionsSidebar/time-clock/time-clock.component.ts @@ -5,21 +5,17 @@ import { Component, OnInit } from '@angular/core'; templateUrl: './time-clock.component.html', styleUrls: ['./time-clock.component.css'] }) -export class TimeClockComponent implements OnInit { +export class TimeClockComponent { isClockIn: boolean; constructor() { - this.isClockIn = false; + this.isClockIn = true; } employeClockIn(): boolean { - this.isClockIn = true; + this.isClockIn = !this.isClockIn; console.log('valor es' + this.isClockIn); return this.isClockIn; } - - ngOnInit(): void { - } - } From 490a689ade1e1b06db84826f32917190fbae387a Mon Sep 17 00:00:00 2001 From: daros10 Date: Mon, 16 Mar 2020 09:30:10 -0500 Subject: [PATCH 04/21] update folders --- src/app/app-routing.module.ts | 10 +++++----- src/app/app.module.ts | 2 +- .../getting-started/getting-started.component.css | 0 .../getting-started/getting-started.component.html | 0 .../getting-started/getting-started.component.spec.ts | 0 .../getting-started/getting-started.component.ts | 0 .../reports/reports.component.css | 0 .../reports/reports.component.html | 0 .../reports/reports.component.spec.ts | 0 .../reports/reports.component.ts | 0 .../time-clock/time-clock.component.css | 0 .../time-clock/time-clock.component.html | 0 .../time-clock/time-clock.component.spec.ts | 0 .../time-clock/time-clock.component.ts | 0 .../time-entries/time-entries.component.css | 0 .../time-entries/time-entries.component.html | 0 .../time-entries/time-entries.component.spec.ts | 0 .../time-entries/time-entries.component.ts | 0 .../time-off/time-off.component.css | 0 .../time-off/time-off.component.html | 0 .../time-off/time-off.component.spec.ts | 0 .../time-off/time-off.component.ts | 0 22 files changed, 6 insertions(+), 6 deletions(-) rename src/app/components/{optionsSidebar => options-sidebar}/getting-started/getting-started.component.css (100%) rename src/app/components/{optionsSidebar => options-sidebar}/getting-started/getting-started.component.html (100%) rename src/app/components/{optionsSidebar => options-sidebar}/getting-started/getting-started.component.spec.ts (100%) rename src/app/components/{optionsSidebar => options-sidebar}/getting-started/getting-started.component.ts (100%) rename src/app/components/{optionsSidebar => options-sidebar}/reports/reports.component.css (100%) rename src/app/components/{optionsSidebar => options-sidebar}/reports/reports.component.html (100%) rename src/app/components/{optionsSidebar => options-sidebar}/reports/reports.component.spec.ts (100%) rename src/app/components/{optionsSidebar => options-sidebar}/reports/reports.component.ts (100%) rename src/app/components/{optionsSidebar => options-sidebar}/time-clock/time-clock.component.css (100%) rename src/app/components/{optionsSidebar => options-sidebar}/time-clock/time-clock.component.html (100%) rename src/app/components/{optionsSidebar => options-sidebar}/time-clock/time-clock.component.spec.ts (100%) rename src/app/components/{optionsSidebar => options-sidebar}/time-clock/time-clock.component.ts (100%) rename src/app/components/{optionsSidebar => options-sidebar}/time-entries/time-entries.component.css (100%) rename src/app/components/{optionsSidebar => options-sidebar}/time-entries/time-entries.component.html (100%) rename src/app/components/{optionsSidebar => options-sidebar}/time-entries/time-entries.component.spec.ts (100%) rename src/app/components/{optionsSidebar => options-sidebar}/time-entries/time-entries.component.ts (100%) rename src/app/components/{optionsSidebar => options-sidebar}/time-off/time-off.component.css (100%) rename src/app/components/{optionsSidebar => options-sidebar}/time-off/time-off.component.html (100%) rename src/app/components/{optionsSidebar => options-sidebar}/time-off/time-off.component.spec.ts (100%) rename src/app/components/{optionsSidebar => options-sidebar}/time-off/time-off.component.ts (100%) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 28cc3b06d..495f9a184 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,10 +1,10 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; -import { GettingStartedComponent } from './components/optionsSidebar/getting-started/getting-started.component'; -import { ReportsComponent } from './components/optionsSidebar/reports/reports.component'; -import { TimeClockComponent } from './components/optionsSidebar/time-clock/time-clock.component'; -import { TimeEntriesComponent } from './components/optionsSidebar/time-entries/time-entries.component'; -import { TimeOffComponent } from './components/optionsSidebar/time-off/time-off.component'; +import { GettingStartedComponent } from './components/options-sidebar/getting-started/getting-started.component'; +import { ReportsComponent } from './components/options-sidebar/reports/reports.component'; +import { TimeClockComponent } from './components/options-sidebar/time-clock/time-clock.component'; +import { TimeEntriesComponent } from './components/options-sidebar/time-entries/time-entries.component'; +import { TimeOffComponent } from './components/options-sidebar/time-off/time-off.component'; const routes: Routes = [ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 90e7011ee..b4a5fd970 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,7 +7,7 @@ import { NavbarComponent } from './components/shared/navbar/navbar.component'; import { UserComponent } from './components/shared/user/user.component'; import { SidebarComponent } from './components/shared/sidebar/sidebar.component'; import { ClockComponent } from './components/shared/clock/clock.component'; -import { TimeClockComponent } from './components/optionsSidebar/time-clock/time-clock.component'; +import { TimeClockComponent } from './components/options-sidebar/time-clock/time-clock.component'; @NgModule({ diff --git a/src/app/components/optionsSidebar/getting-started/getting-started.component.css b/src/app/components/options-sidebar/getting-started/getting-started.component.css similarity index 100% rename from src/app/components/optionsSidebar/getting-started/getting-started.component.css rename to src/app/components/options-sidebar/getting-started/getting-started.component.css diff --git a/src/app/components/optionsSidebar/getting-started/getting-started.component.html b/src/app/components/options-sidebar/getting-started/getting-started.component.html similarity index 100% rename from src/app/components/optionsSidebar/getting-started/getting-started.component.html rename to src/app/components/options-sidebar/getting-started/getting-started.component.html diff --git a/src/app/components/optionsSidebar/getting-started/getting-started.component.spec.ts b/src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts similarity index 100% rename from src/app/components/optionsSidebar/getting-started/getting-started.component.spec.ts rename to src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts diff --git a/src/app/components/optionsSidebar/getting-started/getting-started.component.ts b/src/app/components/options-sidebar/getting-started/getting-started.component.ts similarity index 100% rename from src/app/components/optionsSidebar/getting-started/getting-started.component.ts rename to src/app/components/options-sidebar/getting-started/getting-started.component.ts diff --git a/src/app/components/optionsSidebar/reports/reports.component.css b/src/app/components/options-sidebar/reports/reports.component.css similarity index 100% rename from src/app/components/optionsSidebar/reports/reports.component.css rename to src/app/components/options-sidebar/reports/reports.component.css diff --git a/src/app/components/optionsSidebar/reports/reports.component.html b/src/app/components/options-sidebar/reports/reports.component.html similarity index 100% rename from src/app/components/optionsSidebar/reports/reports.component.html rename to src/app/components/options-sidebar/reports/reports.component.html diff --git a/src/app/components/optionsSidebar/reports/reports.component.spec.ts b/src/app/components/options-sidebar/reports/reports.component.spec.ts similarity index 100% rename from src/app/components/optionsSidebar/reports/reports.component.spec.ts rename to src/app/components/options-sidebar/reports/reports.component.spec.ts diff --git a/src/app/components/optionsSidebar/reports/reports.component.ts b/src/app/components/options-sidebar/reports/reports.component.ts similarity index 100% rename from src/app/components/optionsSidebar/reports/reports.component.ts rename to src/app/components/options-sidebar/reports/reports.component.ts diff --git a/src/app/components/optionsSidebar/time-clock/time-clock.component.css b/src/app/components/options-sidebar/time-clock/time-clock.component.css similarity index 100% rename from src/app/components/optionsSidebar/time-clock/time-clock.component.css rename to src/app/components/options-sidebar/time-clock/time-clock.component.css diff --git a/src/app/components/optionsSidebar/time-clock/time-clock.component.html b/src/app/components/options-sidebar/time-clock/time-clock.component.html similarity index 100% rename from src/app/components/optionsSidebar/time-clock/time-clock.component.html rename to src/app/components/options-sidebar/time-clock/time-clock.component.html diff --git a/src/app/components/optionsSidebar/time-clock/time-clock.component.spec.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts similarity index 100% rename from src/app/components/optionsSidebar/time-clock/time-clock.component.spec.ts rename to src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts diff --git a/src/app/components/optionsSidebar/time-clock/time-clock.component.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.ts similarity index 100% rename from src/app/components/optionsSidebar/time-clock/time-clock.component.ts rename to src/app/components/options-sidebar/time-clock/time-clock.component.ts diff --git a/src/app/components/optionsSidebar/time-entries/time-entries.component.css b/src/app/components/options-sidebar/time-entries/time-entries.component.css similarity index 100% rename from src/app/components/optionsSidebar/time-entries/time-entries.component.css rename to src/app/components/options-sidebar/time-entries/time-entries.component.css diff --git a/src/app/components/optionsSidebar/time-entries/time-entries.component.html b/src/app/components/options-sidebar/time-entries/time-entries.component.html similarity index 100% rename from src/app/components/optionsSidebar/time-entries/time-entries.component.html rename to src/app/components/options-sidebar/time-entries/time-entries.component.html diff --git a/src/app/components/optionsSidebar/time-entries/time-entries.component.spec.ts b/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts similarity index 100% rename from src/app/components/optionsSidebar/time-entries/time-entries.component.spec.ts rename to src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts diff --git a/src/app/components/optionsSidebar/time-entries/time-entries.component.ts b/src/app/components/options-sidebar/time-entries/time-entries.component.ts similarity index 100% rename from src/app/components/optionsSidebar/time-entries/time-entries.component.ts rename to src/app/components/options-sidebar/time-entries/time-entries.component.ts diff --git a/src/app/components/optionsSidebar/time-off/time-off.component.css b/src/app/components/options-sidebar/time-off/time-off.component.css similarity index 100% rename from src/app/components/optionsSidebar/time-off/time-off.component.css rename to src/app/components/options-sidebar/time-off/time-off.component.css diff --git a/src/app/components/optionsSidebar/time-off/time-off.component.html b/src/app/components/options-sidebar/time-off/time-off.component.html similarity index 100% rename from src/app/components/optionsSidebar/time-off/time-off.component.html rename to src/app/components/options-sidebar/time-off/time-off.component.html diff --git a/src/app/components/optionsSidebar/time-off/time-off.component.spec.ts b/src/app/components/options-sidebar/time-off/time-off.component.spec.ts similarity index 100% rename from src/app/components/optionsSidebar/time-off/time-off.component.spec.ts rename to src/app/components/options-sidebar/time-off/time-off.component.spec.ts diff --git a/src/app/components/optionsSidebar/time-off/time-off.component.ts b/src/app/components/options-sidebar/time-off/time-off.component.ts similarity index 100% rename from src/app/components/optionsSidebar/time-off/time-off.component.ts rename to src/app/components/options-sidebar/time-off/time-off.component.ts From 7ca2d8545bef38de3c73ed2a96068b08dcca6cfb Mon Sep 17 00:00:00 2001 From: daros10 Date: Mon, 16 Mar 2020 09:47:36 -0500 Subject: [PATCH 05/21] resize button --- .../options-sidebar/time-clock/time-clock.component.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.html b/src/app/components/options-sidebar/time-clock/time-clock.component.html index 3e43c39ef..f384b5d96 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.html +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.html @@ -1,5 +1,4 @@
-
@@ -82,8 +81,8 @@
Projects
- - + +
From 6b20923f3634f6e0e4ae6d2d131704b8d46c5cff Mon Sep 17 00:00:00 2001 From: daros10 Date: Mon, 16 Mar 2020 18:50:07 -0500 Subject: [PATCH 06/21] added coverage to sidebar --- angular.json | 248 +++++++++--------- .../getting-started.component.spec.ts | 18 ++ .../reports/reports.component.spec.ts | 17 ++ .../time-clock/time-clock.component.spec.ts | 17 ++ .../time-entries.component.spec.ts | 17 ++ .../time-off/time-off.component.spec.ts | 16 ++ 6 files changed, 208 insertions(+), 125 deletions(-) diff --git a/angular.json b/angular.json index 98e35a34a..09f0ed075 100644 --- a/angular.json +++ b/angular.json @@ -1,132 +1,130 @@ { - "$schema": "./node_modules/@angular/cli/lib/config/schema.json", - "version": 1, - "newProjectRoot": "projects", - "projects": { - "time-tracker": { - "projectType": "application", - "schematics": {}, - "root": "", - "sourceRoot": "src", - "prefix": "app", - "architect": { - "build": { - "builder": "@angular-devkit/build-angular:browser", - "options": { - "outputPath": "dist/time-tracker", - "index": "src/index.html", - "main": "src/main.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.app.json", - "aot": true, - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "./node_modules/bootstrap/dist/css/bootstrap.min.css", - "src/styles.css" - ], - "scripts": [ - "./node_modules/jquery/dist/jquery.min.js", - "./node_modules/bootstrap/dist/js/bootstrap.min.js" - ] - }, - "configurations": { - "production": { - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" - } - ], - "optimization": true, - "outputHashing": "all", - "sourceMap": false, - "extractCss": true, - "namedChunks": false, - "extractLicenses": true, - "vendorChunk": false, - "buildOptimizer": true, - "budgets": [ - { - "type": "initial", - "maximumWarning": "2mb", - "maximumError": "5mb" + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "time-tracker": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/time-tracker", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.app.json", + "aot": true, + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "./node_modules/bootstrap/dist/css/bootstrap.min.css", + "src/styles.css" + ], + "scripts": [ + "./node_modules/jquery/dist/jquery.min.js", + "./node_modules/bootstrap/dist/js/bootstrap.min.js" + ] + }, + "configurations": { + "production": { + "fileReplacements": [{ + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + }], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "extractCss": true, + "namedChunks": false, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true, + "budgets": [{ + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "6kb", + "maximumError": "10kb" + } + ] + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "time-tracker:build" + }, + "configurations": { + "production": { + "browserTarget": "time-tracker:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "time-tracker:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "codeCoverage": true, + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + } }, - { - "type": "anyComponentStyle", - "maximumWarning": "6kb", - "maximumError": "10kb" + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "tsconfig.app.json", + "tsconfig.spec.json", + "e2e/tsconfig.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + }, + "e2e": { + "builder": "@angular-devkit/build-angular:protractor", + "options": { + "protractorConfig": "e2e/protractor.conf.js", + "devServerTarget": "time-tracker:serve" + }, + "configurations": { + "production": { + "devServerTarget": "time-tracker:serve:production" + } + } } - ] - } - } - }, - "serve": { - "builder": "@angular-devkit/build-angular:dev-server", - "options": { - "browserTarget": "time-tracker:build" - }, - "configurations": { - "production": { - "browserTarget": "time-tracker:build:production" - } - } - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "browserTarget": "time-tracker:build" - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "main": "src/test.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.spec.json", - "karmaConfig": "karma.conf.js", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.css" - ], - "scripts": [] - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "tsconfig.app.json", - "tsconfig.spec.json", - "e2e/tsconfig.json" - ], - "exclude": [ - "**/node_modules/**" - ] - } - }, - "e2e": { - "builder": "@angular-devkit/build-angular:protractor", - "options": { - "protractorConfig": "e2e/protractor.conf.js", - "devServerTarget": "time-tracker:serve" - }, - "configurations": { - "production": { - "devServerTarget": "time-tracker:serve:production" } - } } - } + }, + "defaultProject": "time-tracker", + "cli": { + "analytics": false } - }, - "defaultProject": "time-tracker", - "cli": { - "analytics": false - } } \ No newline at end of file diff --git a/src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts b/src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts index d36756064..5bb8ecb36 100644 --- a/src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts +++ b/src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts @@ -6,6 +6,13 @@ describe('GettingStartedComponent', () => { let component: GettingStartedComponent; let fixture: ComponentFixture; + function setup() { + // tslint:disable-next-line: no-shadowed-variable + const fixture = TestBed.createComponent(GettingStartedComponent); + const app = fixture.debugElement.componentInstance; + return { fixture, app }; + } + beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ GettingStartedComponent ] @@ -22,4 +29,15 @@ describe('GettingStartedComponent', () => { it('should be created', () => { expect(component).toBeTruthy(); }); + + it('should have p tag as \'getting-started works!\'', async(() => { + // tslint:disable-next-line: no-shadowed-variable + const { app, fixture } = setup(); + fixture.detectChanges(); + const compile = fixture.debugElement.nativeElement; + const h1tag = compile.querySelector('p'); + expect(h1tag.textContent).toBe('getting-started works!'); + })); + + }); diff --git a/src/app/components/options-sidebar/reports/reports.component.spec.ts b/src/app/components/options-sidebar/reports/reports.component.spec.ts index 8b8ed574f..45b9dbdf9 100644 --- a/src/app/components/options-sidebar/reports/reports.component.spec.ts +++ b/src/app/components/options-sidebar/reports/reports.component.spec.ts @@ -6,6 +6,13 @@ describe('ReportsComponent', () => { let component: ReportsComponent; let fixture: ComponentFixture; + function setup() { + // tslint:disable-next-line: no-shadowed-variable + const fixture = TestBed.createComponent(ReportsComponent); + const app = fixture.debugElement.componentInstance; + return { fixture, app }; + } + beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ ReportsComponent ] @@ -22,4 +29,14 @@ describe('ReportsComponent', () => { it('should be created', () => { expect(component).toBeTruthy(); }); + + it('should have p tag as \'reports works!\'', async(() => { + // tslint:disable-next-line: no-shadowed-variable + const { app, fixture } = setup(); + fixture.detectChanges(); + const compile = fixture.debugElement.nativeElement; + const h1tag = compile.querySelector('p'); + expect(h1tag.textContent).toBe('reports works!'); + })); + }); diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts index 1c55547bb..5d211697d 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts @@ -6,6 +6,13 @@ describe('TimeClockComponent', () => { let component: TimeClockComponent; let fixture: ComponentFixture; + function setup() { + // tslint:disable-next-line: no-shadowed-variable + const fixture = TestBed.createComponent(TimeClockComponent); + const app = fixture.debugElement.componentInstance; + return { fixture, app }; + } + beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ TimeClockComponent ] @@ -22,4 +29,14 @@ describe('TimeClockComponent', () => { it('should be created', () => { expect(component).toBeTruthy(); }); + + it('should have p tag as \'time-clock works!\'', async(() => { + // tslint:disable-next-line: no-shadowed-variable + const { app, fixture } = setup(); + fixture.detectChanges(); + const compile = fixture.debugElement.nativeElement; + const h1tag = compile.querySelector('p'); + expect(h1tag.textContent).toBe('time-clock works!'); + })); + }); diff --git a/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts b/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts index 2ed82ad2e..ee057a38e 100644 --- a/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts +++ b/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts @@ -6,6 +6,13 @@ describe('TimeEntriesComponent', () => { let component: TimeEntriesComponent; let fixture: ComponentFixture; + function setup() { + // tslint:disable-next-line: no-shadowed-variable + const fixture = TestBed.createComponent(TimeEntriesComponent); + const app = fixture.debugElement.componentInstance; + return { fixture, app }; + } + beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ TimeEntriesComponent ] @@ -22,4 +29,14 @@ describe('TimeEntriesComponent', () => { it('should be created', () => { expect(component).toBeTruthy(); }); + + it('should have p tag as \'time-entries works!\'', async(() => { + // tslint:disable-next-line: no-shadowed-variable + const { app, fixture } = setup(); + fixture.detectChanges(); + const compile = fixture.debugElement.nativeElement; + const h1tag = compile.querySelector('p'); + expect(h1tag.textContent).toBe('time-entries works!'); + })); + }); diff --git a/src/app/components/options-sidebar/time-off/time-off.component.spec.ts b/src/app/components/options-sidebar/time-off/time-off.component.spec.ts index dfa074f03..4035649cd 100644 --- a/src/app/components/options-sidebar/time-off/time-off.component.spec.ts +++ b/src/app/components/options-sidebar/time-off/time-off.component.spec.ts @@ -6,6 +6,13 @@ describe('TimeOffComponent', () => { let component: TimeOffComponent; let fixture: ComponentFixture; + function setup() { + // tslint:disable-next-line: no-shadowed-variable + const fixture = TestBed.createComponent(TimeOffComponent); + const app = fixture.debugElement.componentInstance; + return { fixture, app }; + } + beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ TimeOffComponent ] @@ -22,4 +29,13 @@ describe('TimeOffComponent', () => { it('should be created', () => { expect(component).toBeTruthy(); }); + + it('should have p tag as \'time-off works!\'', async(() => { + // tslint:disable-next-line: no-shadowed-variable + const { app, fixture } = setup(); + fixture.detectChanges(); + const compile = fixture.debugElement.nativeElement; + const h1tag = compile.querySelector('p'); + expect(h1tag.textContent).toBe('time-off works!'); + })); }); From e0ed4b8036ba5f5e4293474e5c8699d0329d9b41 Mon Sep 17 00:00:00 2001 From: daros10 Date: Mon, 16 Mar 2020 19:42:50 -0500 Subject: [PATCH 07/21] change tags name --- .../getting-started.component.spec.ts | 4 ++-- .../reports/reports.component.spec.ts | 21 +++++++++++++++++-- .../time-clock/time-clock.component.spec.ts | 4 ++-- .../time-entries.component.spec.ts | 4 ++-- .../time-off/time-off.component.spec.ts | 18 +++++++++++++++- 5 files changed, 42 insertions(+), 9 deletions(-) diff --git a/src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts b/src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts index 5bb8ecb36..bff58d1a2 100644 --- a/src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts +++ b/src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts @@ -35,8 +35,8 @@ describe('GettingStartedComponent', () => { const { app, fixture } = setup(); fixture.detectChanges(); const compile = fixture.debugElement.nativeElement; - const h1tag = compile.querySelector('p'); - expect(h1tag.textContent).toBe('getting-started works!'); + const ptag = compile.querySelector('p'); + expect(ptag.textContent).toBe('getting-started works!'); })); diff --git a/src/app/components/options-sidebar/reports/reports.component.spec.ts b/src/app/components/options-sidebar/reports/reports.component.spec.ts index 0c7a3d220..f2f2f33e7 100644 --- a/src/app/components/options-sidebar/reports/reports.component.spec.ts +++ b/src/app/components/options-sidebar/reports/reports.component.spec.ts @@ -6,6 +6,13 @@ describe('ReportsComponent', () => { let component: ReportsComponent; let fixture: ComponentFixture; + function setup() { + // tslint:disable-next-line: no-shadowed-variable + const fixture = TestBed.createComponent(ReportsComponent); + const app = fixture.debugElement.componentInstance; + return { fixture, app }; + } + beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ ReportsComponent ] @@ -19,7 +26,17 @@ describe('ReportsComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it('should be created', () => { expect(component).toBeTruthy(); }); -}); + + it('should have p tag as \'reports works!\'', async(() => { + // tslint:disable-next-line: no-shadowed-variable + const { app, fixture } = setup(); + fixture.detectChanges(); + const compile = fixture.debugElement.nativeElement; + const ptag = compile.querySelector('p'); + expect(ptag.textContent).toBe('reports works!'); + })); + +}); \ No newline at end of file diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts index 5d211697d..dd751df08 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts @@ -35,8 +35,8 @@ describe('TimeClockComponent', () => { const { app, fixture } = setup(); fixture.detectChanges(); const compile = fixture.debugElement.nativeElement; - const h1tag = compile.querySelector('p'); - expect(h1tag.textContent).toBe('time-clock works!'); + const ptag = compile.querySelector('p'); + expect(ptag.textContent).toBe('time-clock works!'); })); }); diff --git a/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts b/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts index 6d98e2515..304646888 100644 --- a/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts +++ b/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts @@ -35,8 +35,8 @@ describe('TimeEntriesComponent', () => { const { app, fixture } = setup(); fixture.detectChanges(); const compile = fixture.debugElement.nativeElement; - const h1tag = compile.querySelector('p'); - expect(h1tag.textContent).toBe('time-entries works!'); + const ptag = compile.querySelector('p'); + expect(ptag.textContent).toBe('time-entries works!'); })); }); \ No newline at end of file diff --git a/src/app/components/options-sidebar/time-off/time-off.component.spec.ts b/src/app/components/options-sidebar/time-off/time-off.component.spec.ts index 66b7d9fd0..8aa6ed544 100644 --- a/src/app/components/options-sidebar/time-off/time-off.component.spec.ts +++ b/src/app/components/options-sidebar/time-off/time-off.component.spec.ts @@ -6,6 +6,13 @@ describe('TimeOffComponent', () => { let component: TimeOffComponent; let fixture: ComponentFixture; + function setup() { + // tslint:disable-next-line: no-shadowed-variable + const fixture = TestBed.createComponent(TimeOffComponent); + const app = fixture.debugElement.componentInstance; + return { fixture, app }; + } + beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ TimeOffComponent ] @@ -19,7 +26,16 @@ describe('TimeOffComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it('should be created', () => { expect(component).toBeTruthy(); }); + + it('should have p tag as \'time-off works!\'', async(() => { + // tslint:disable-next-line: no-shadowed-variable + const { app, fixture } = setup(); + fixture.detectChanges(); + const compile = fixture.debugElement.nativeElement; + const ptag = compile.querySelector('p'); + expect(ptag.textContent).toBe('time-off works!'); + })); }); From 26554fbeb282c10167310a402730ad0a7fbd2ed1 Mon Sep 17 00:00:00 2001 From: daros10 Date: Mon, 16 Mar 2020 20:54:25 -0500 Subject: [PATCH 08/21] added validations in form --- .../time-clock/time-clock.component.html | 11 +++++++--- .../time-clock/time-clock.component.ts | 22 ++++++++++++++++++- 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.html b/src/app/components/options-sidebar/time-clock/time-clock.component.html index f384b5d96..eb7b7e4dc 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.html +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.html @@ -1,4 +1,8 @@
+ +
@@ -12,7 +16,8 @@
-

Dario clocked out at hh:mm:ss

+

Dario clocked in at hh:mm:ss

+

Dario clocked out at hh:mm:ss

Totals
@@ -68,7 +73,7 @@
Projects
- +
@@ -82,7 +87,7 @@
Projects
- +
diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.ts index 99e8a2ea0..3c2134aed 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.ts +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.ts @@ -8,14 +8,34 @@ import { Component, OnInit } from '@angular/core'; export class TimeClockComponent { isClockIn: boolean; + isEnterTechnology: boolean; + showAlertEnterTecnology: boolean; constructor() { this.isClockIn = true; + this.isEnterTechnology = false; } employeClockIn(): boolean { this.isClockIn = !this.isClockIn; - console.log('valor es' + this.isClockIn); return this.isClockIn; } + + employeClockOut() { + if ( this.isEnterTechnology === false ) { + this.isClockIn = false; + this.showAlertEnterTecnology = true; + } else { + this.isClockIn = true; + this.showAlertEnterTecnology = false; + } + } + + enterTechnology(data: string) { + if ( data.length > 0 ) { + this.isEnterTechnology = true; + } else { + this.isEnterTechnology = false; + } + } } From 7a87d471904dfcafe219952bad31253e363f42e3 Mon Sep 17 00:00:00 2001 From: daros10 Date: Mon, 16 Mar 2020 21:04:50 -0500 Subject: [PATCH 09/21] added interpolation in vars --- .../options-sidebar/time-clock/time-clock.component.html | 4 ++-- .../options-sidebar/time-clock/time-clock.component.ts | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.html b/src/app/components/options-sidebar/time-clock/time-clock.component.html index eb7b7e4dc..dde0a1bf2 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.html +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.html @@ -16,8 +16,8 @@
-

Dario clocked in at hh:mm:ss

-

Dario clocked out at hh:mm:ss

+

{{ username }} clocked in at {{ clockInUsername }}

+

{{ username }} clocked out at {{ clockOutUsername }}

Totals
diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.ts index 3c2134aed..85106481a 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.ts +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.ts @@ -7,6 +7,10 @@ import { Component, OnInit } from '@angular/core'; }) export class TimeClockComponent { + username = 'Dario'; + clockInUsername = 'hh:mm:ss'; + clockOutUsername = 'hh:mm:ss'; + isClockIn: boolean; isEnterTechnology: boolean; showAlertEnterTecnology: boolean; From b402f4057a2a45b7b5642bb6a6962114998d351d Mon Sep 17 00:00:00 2001 From: daros10 Date: Mon, 16 Mar 2020 21:07:06 -0500 Subject: [PATCH 10/21] added validation clock out --- .../options-sidebar/time-clock/time-clock.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.ts index 85106481a..c152e0ee6 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.ts +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.ts @@ -31,6 +31,7 @@ export class TimeClockComponent { this.showAlertEnterTecnology = true; } else { this.isClockIn = true; + this.isEnterTechnology = false; this.showAlertEnterTecnology = false; } } From c34f9fafe346e0dcb334745971962c4b64e3ab4e Mon Sep 17 00:00:00 2001 From: daros10 Date: Mon, 16 Mar 2020 21:21:49 -0500 Subject: [PATCH 11/21] added unit test --- .../options-sidebar/time-clock/time-clock.component.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts index dd751df08..3487ccce0 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts @@ -30,13 +30,13 @@ describe('TimeClockComponent', () => { expect(component).toBeTruthy(); }); - it('should have p tag as \'time-clock works!\'', async(() => { + it('should have p tag as \'Dario clocked out at hh:mm:ss\'', async(() => { // tslint:disable-next-line: no-shadowed-variable const { app, fixture } = setup(); fixture.detectChanges(); const compile = fixture.debugElement.nativeElement; const ptag = compile.querySelector('p'); - expect(ptag.textContent).toBe('time-clock works!'); + expect(ptag.textContent).toBe('Dario clocked out at hh:mm:ss'); })); }); From 65b5195447ebbc509497bfdc3ea8be9d250d46f9 Mon Sep 17 00:00:00 2001 From: daros10 Date: Mon, 16 Mar 2020 22:34:54 -0500 Subject: [PATCH 12/21] added timer --- .../time-clock/time-clock.component.html | 2 +- .../time-clock/time-clock.component.ts | 41 +++++++++++++++++-- .../shared/clock/clock.component.ts | 16 ++++++-- 3 files changed, 51 insertions(+), 8 deletions(-) diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.html b/src/app/components/options-sidebar/time-clock/time-clock.component.html index dde0a1bf2..706c4eae5 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.html +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.html @@ -23,7 +23,7 @@
Totals
Current
-

-

+

{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}

Day
diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.ts index c152e0ee6..042df381c 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.ts +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.ts @@ -1,27 +1,38 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { interval, timer } from 'rxjs'; + @Component({ selector: 'app-time-clock', templateUrl: './time-clock.component.html', styleUrls: ['./time-clock.component.css'] }) -export class TimeClockComponent { +export class TimeClockComponent implements OnInit { username = 'Dario'; clockInUsername = 'hh:mm:ss'; clockOutUsername = 'hh:mm:ss'; - isClockIn: boolean; isEnterTechnology: boolean; showAlertEnterTecnology: boolean; + hour: number; + minute: number; + seconds: number; + + public timer; + constructor() { this.isClockIn = true; this.isEnterTechnology = false; + this.hour = 0; + this.minute = 0; + this.seconds = 0; } employeClockIn(): boolean { this.isClockIn = !this.isClockIn; + this.enableTimer(); return this.isClockIn; } @@ -33,6 +44,7 @@ export class TimeClockComponent { this.isClockIn = true; this.isEnterTechnology = false; this.showAlertEnterTecnology = false; + console.log('Disble Timer'); } } @@ -43,4 +55,27 @@ export class TimeClockComponent { this.isEnterTechnology = false; } } + + enableTimer() { + this.timer = interval(1000); + this.timer.subscribe( (data) => { + this.seconds += 1; + if ( this.seconds === 59 ) { + this.minute += 1; + this.seconds = 0; + if ( this.minute === 59 ) { + this.hour += 1; + this.minute = 0; + } + } + // console.log(this.hour + ' : ' + this.minute + ' : ' + this.seconds); + }); + + } + + + ngOnInit(): void { + } + + } diff --git a/src/app/components/shared/clock/clock.component.ts b/src/app/components/shared/clock/clock.component.ts index cf8f474d4..02ecb96ef 100644 --- a/src/app/components/shared/clock/clock.component.ts +++ b/src/app/components/shared/clock/clock.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { interval, timer } from 'rxjs'; @Component({ selector: 'app-clock', @@ -14,16 +15,23 @@ export class ClockComponent implements OnInit { displayTime: boolean; constructor() { - this.currentDate = new Date(); - this.hour = this.currentDate.getHours(); - this.minutes = this.currentDate.getMinutes(); - this.seconds = this.currentDate.getSeconds(); + this.showClcok(); this.displayTime = false; setTimeout(() => { this.displayTime = true; }, 3000); } + showClcok() { + const timer = interval(1000); + timer.subscribe( (data) => { + this.currentDate = new Date(); + this.hour = this.currentDate.getHours(); + this.minutes = this.currentDate.getMinutes(); + this.seconds = this.currentDate.getSeconds(); + } ); + } + ngOnInit(): void { } From 747e09f2c385ec32b96c63b59bf73f3b2f3cd426 Mon Sep 17 00:00:00 2001 From: Jorge Flores Date: Thu, 12 Mar 2020 15:33:59 -0500 Subject: [PATCH 13/21] Add Clock In --- src/app/app.module.ts | 11 ++++- .../time-clock/time-clock.component.css | 10 +++++ .../time-clock/time-clock.component.html | 25 ++++++++--- .../time-clock/time-clock.component.spec.ts | 19 +++++--- .../time-clock/time-clock.component.ts | 24 +++++++--- .../details-fields.component.css | 3 ++ .../details-fields.component.html | 44 +++++++++++++++++++ .../details-fields.component.spec.ts | 25 +++++++++++ .../details-fields.component.ts | 15 +++++++ .../project-list-hover.component.css | 15 +++++++ .../project-list-hover.component.html | 17 +++++++ .../project-list-hover.component.spec.ts | 38 ++++++++++++++++ .../project-list-hover.component.ts | 25 +++++++++++ 13 files changed, 251 insertions(+), 20 deletions(-) create mode 100644 src/app/components/shared/details-fields/details-fields.component.css create mode 100644 src/app/components/shared/details-fields/details-fields.component.html create mode 100644 src/app/components/shared/details-fields/details-fields.component.spec.ts create mode 100644 src/app/components/shared/details-fields/details-fields.component.ts create mode 100644 src/app/components/shared/project-list-hover/project-list-hover.component.css create mode 100644 src/app/components/shared/project-list-hover/project-list-hover.component.html create mode 100644 src/app/components/shared/project-list-hover/project-list-hover.component.spec.ts create mode 100644 src/app/components/shared/project-list-hover/project-list-hover.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6365744e7..4aeaf92c6 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,3 +1,4 @@ +import { CommonModule } from '@angular/common'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @@ -11,6 +12,10 @@ import { ClockComponent } from './components/shared/clock/clock.component'; import { ProjectManagementComponent } from './components/options-sidebar/project-management/project-management.component'; import { ProjectListComponent } from './components/shared/project-list/project-list.component'; import { CreateProjectComponent } from './components/shared/create-project/create-project.component'; +import { TimeClockComponent } from './components/options-sidebar/time-clock/time-clock.component'; +import { DetailsFieldsComponent } from './components/shared/details-fields/details-fields.component'; +import { ProjectListHoverComponent } from './components/shared/project-list-hover/project-list-hover.component'; + @NgModule({ declarations: [ AppComponent, @@ -20,9 +25,13 @@ import { CreateProjectComponent } from './components/shared/create-project/creat ClockComponent, ProjectManagementComponent, ProjectListComponent, - CreateProjectComponent + CreateProjectComponent, + TimeClockComponent, + DetailsFieldsComponent, + ProjectListHoverComponent, ], imports: [ + CommonModule, BrowserModule, AppRoutingModule, FormsModule, diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.css b/src/app/components/options-sidebar/time-clock/time-clock.component.css index e69de29bb..0e808f74e 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.css +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.css @@ -0,0 +1,10 @@ +.content-ClockIn { + padding: 2.1rem 1rem; +} + +.timer { + align-items: center; + display: flex; + height: 100%; + justify-content: center; +} diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.html b/src/app/components/options-sidebar/time-clock/time-clock.component.html index 80644640c..1474cef3e 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.html +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.html @@ -1,5 +1,20 @@ -
- -

time-clock works!

- -
\ No newline at end of file +
+
+
+
PROJECTS
+ +
+
+ +
+
+
+
+
Timer Here!
+
+
+
+
diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts index 5d211697d..58a5d0186 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts @@ -1,8 +1,8 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { TimeClockComponent } from './time-clock.component'; +import { TimeClockComponent } from "./time-clock.component"; -describe('TimeClockComponent', () => { +describe("TimeClockComponent", () => { let component: TimeClockComponent; let fixture: ComponentFixture; @@ -15,9 +15,8 @@ describe('TimeClockComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ TimeClockComponent ] - }) - .compileComponents(); + declarations: [TimeClockComponent] + }).compileComponents(); })); beforeEach(() => { @@ -26,7 +25,7 @@ describe('TimeClockComponent', () => { fixture.detectChanges(); }); - it('should be created', () => { + it("should be created", () => { expect(component).toBeTruthy(); }); @@ -39,4 +38,10 @@ describe('TimeClockComponent', () => { expect(h1tag.textContent).toBe('time-clock works!'); })); + it("should set showfileds as true", () => { + const show = true; + component.showFields = show; + component.setShowFields(show); + expect(component.showFields).toBe(true); + }); }); diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.ts index f34bb7b11..1a9be2774 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.ts +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.ts @@ -1,15 +1,25 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit } from "@angular/core"; @Component({ - selector: 'app-time-clock', - templateUrl: './time-clock.component.html', - styleUrls: ['./time-clock.component.css'] + selector: "app-time-clock", + templateUrl: "./time-clock.component.html", + styleUrls: ["./time-clock.component.css"] }) export class TimeClockComponent implements OnInit { + projects = [ + { id: "P1", name: "Project 1" }, + { id: "P2", name: "Project 2" }, + { id: "P3", name: "Project 3" }, + { id: "P4", name: "Project 4" } + ]; - constructor() { } + showFields: boolean; - ngOnInit(): void { - } + constructor() {} + + ngOnInit(): void {} + setShowFields(show: boolean) { + this.showFields = show; + } } diff --git a/src/app/components/shared/details-fields/details-fields.component.css b/src/app/components/shared/details-fields/details-fields.component.css new file mode 100644 index 000000000..82869783c --- /dev/null +++ b/src/app/components/shared/details-fields/details-fields.component.css @@ -0,0 +1,3 @@ +.span-width { + width: 6rem; +} diff --git a/src/app/components/shared/details-fields/details-fields.component.html b/src/app/components/shared/details-fields/details-fields.component.html new file mode 100644 index 000000000..7365bc192 --- /dev/null +++ b/src/app/components/shared/details-fields/details-fields.component.html @@ -0,0 +1,44 @@ +
+
+
+ +
+ +
+
+
+ Jira Ticket +
+ +
+
+
+ Technology +
+ +
+
+ + +
+
+ diff --git a/src/app/components/shared/details-fields/details-fields.component.spec.ts b/src/app/components/shared/details-fields/details-fields.component.spec.ts new file mode 100644 index 000000000..18266ca45 --- /dev/null +++ b/src/app/components/shared/details-fields/details-fields.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DetailsFieldsComponent } from './details-fields.component'; + +describe('DetailsFieldsComponent', () => { + let component: DetailsFieldsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DetailsFieldsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DetailsFieldsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/shared/details-fields/details-fields.component.ts b/src/app/components/shared/details-fields/details-fields.component.ts new file mode 100644 index 000000000..eea5de70b --- /dev/null +++ b/src/app/components/shared/details-fields/details-fields.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-details-fields', + templateUrl: './details-fields.component.html', + styleUrls: ['./details-fields.component.css'] +}) +export class DetailsFieldsComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/components/shared/project-list-hover/project-list-hover.component.css b/src/app/components/shared/project-list-hover/project-list-hover.component.css new file mode 100644 index 000000000..4bdee70fe --- /dev/null +++ b/src/app/components/shared/project-list-hover/project-list-hover.component.css @@ -0,0 +1,15 @@ +.content-projects { + max-height: 10rem; + overflow-x: auto; +} + +.content-projects > li { + cursor: pointer; + font-size: 0.8rem; + padding: 0.5rem 0.8rem; +} + +.button-clockIn { + font-size: 0.7rem; + padding: 0 0.3rem; +} diff --git a/src/app/components/shared/project-list-hover/project-list-hover.component.html b/src/app/components/shared/project-list-hover/project-list-hover.component.html new file mode 100644 index 000000000..212bf4d2d --- /dev/null +++ b/src/app/components/shared/project-list-hover/project-list-hover.component.html @@ -0,0 +1,17 @@ +
    +
  • + {{ item.name }} + Clock In +
    • +
diff --git a/src/app/components/shared/project-list-hover/project-list-hover.component.spec.ts b/src/app/components/shared/project-list-hover/project-list-hover.component.spec.ts new file mode 100644 index 000000000..85024d03a --- /dev/null +++ b/src/app/components/shared/project-list-hover/project-list-hover.component.spec.ts @@ -0,0 +1,38 @@ +import { async, ComponentFixture, TestBed } from "@angular/core/testing"; + +import { ProjectListHoverComponent } from "./project-list-hover.component"; + +describe("ProjectListHoverComponent", () => { + let component: ProjectListHoverComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ProjectListHoverComponent] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ProjectListHoverComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); + + it("should set selectedId with Id", () => { + const id: string = "P1"; + component.clockIn(id); + expect(component.selectedId).toBe(id); + }); + + it("should emit showFields event", () => { + const id: string = "P1"; + component.showFields.subscribe((showFields: boolean) => + expect(showFields).toEqual(true) + ); + component.clockIn(id); + }); +}); diff --git a/src/app/components/shared/project-list-hover/project-list-hover.component.ts b/src/app/components/shared/project-list-hover/project-list-hover.component.ts new file mode 100644 index 000000000..caf0c8b4c --- /dev/null +++ b/src/app/components/shared/project-list-hover/project-list-hover.component.ts @@ -0,0 +1,25 @@ +import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core"; + +@Component({ + selector: "app-project-list-hover", + templateUrl: "./project-list-hover.component.html", + styleUrls: ["./project-list-hover.component.css"] +}) +export class ProjectListHoverComponent implements OnInit { + @Input() projects: any; + @Output() showFields = new EventEmitter(); + + selectedId: string; + showButton: number; + + constructor() { + this.showButton = -1; + } + + ngOnInit(): void {} + + clockIn(id: string) { + this.selectedId = id; + this.showFields.emit(true); + } +} From 12a95bb0dd2117e73cc9f256500252d4274650cd Mon Sep 17 00:00:00 2001 From: Jorge Flores Date: Tue, 17 Mar 2020 10:53:23 -0500 Subject: [PATCH 14/21] Add new tests --- .../time-clock/time-clock.component.spec.ts | 30 +++++++++++++++---- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts index 58a5d0186..a6f8761a5 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts @@ -1,10 +1,14 @@ import { async, ComponentFixture, TestBed } from "@angular/core/testing"; +import { By } from "@angular/platform-browser"; +import { DebugElement } from "@angular/core"; import { TimeClockComponent } from "./time-clock.component"; +import { ProjectListHoverComponent } from "../../shared/project-list-hover/project-list-hover.component"; describe("TimeClockComponent", () => { let component: TimeClockComponent; let fixture: ComponentFixture; + let de: DebugElement; function setup() { // tslint:disable-next-line: no-shadowed-variable @@ -15,13 +19,14 @@ describe("TimeClockComponent", () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [TimeClockComponent] + declarations: [TimeClockComponent, ProjectListHoverComponent] }).compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(TimeClockComponent); component = fixture.componentInstance; + de = fixture.debugElement; fixture.detectChanges(); }); @@ -29,19 +34,34 @@ describe("TimeClockComponent", () => { expect(component).toBeTruthy(); }); - it('should have p tag as \'time-clock works!\'', async(() => { + it("should have p tag as 'time-clock works!'", async(() => { // tslint:disable-next-line: no-shadowed-variable const { app, fixture } = setup(); fixture.detectChanges(); const compile = fixture.debugElement.nativeElement; - const h1tag = compile.querySelector('p'); - expect(h1tag.textContent).toBe('time-clock works!'); + const h1tag = compile.querySelector("p"); + expect(h1tag.textContent).toBe("time-clock works!"); })); it("should set showfileds as true", () => { const show = true; - component.showFields = show; component.setShowFields(show); expect(component.showFields).toBe(true); }); + + it('should be called the setShowFields event #1', () => { + spyOn(component, 'setShowFields'); + const showFields = de.query(By.directive(ProjectListHoverComponent)); + const cmp = showFields.componentInstance; + cmp.showFields.emit(true); + expect(component.setShowFields).toHaveBeenCalledWith(true); + }); + + it('should be called the setShowFields event #2', () => { + spyOn(component, 'setShowFields'); + const showFields = de.query(By.directive(ProjectListHoverComponent)); + const li = showFields.query(By.css('li')); + li.nativeElement.click(); + expect(component.setShowFields).toHaveBeenCalledWith(true); + }); }); From ec2d162081c491ac91efa2af4cd3cdfd721ef694 Mon Sep 17 00:00:00 2001 From: daros10 Date: Tue, 17 Mar 2020 11:08:13 -0500 Subject: [PATCH 15/21] added test for clock --- .../time-clock/time-clock.component.ts | 26 ------------------- .../shared/clock/clock.component.spec.ts | 12 +++++++++ .../shared/clock/clock.component.ts | 8 +++--- 3 files changed, 16 insertions(+), 30 deletions(-) diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.ts index 042df381c..cbba5580d 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.ts +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.ts @@ -1,6 +1,4 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; -import { interval, timer } from 'rxjs'; - @Component({ selector: 'app-time-clock', @@ -15,13 +13,10 @@ export class TimeClockComponent implements OnInit { isClockIn: boolean; isEnterTechnology: boolean; showAlertEnterTecnology: boolean; - hour: number; minute: number; seconds: number; - public timer; - constructor() { this.isClockIn = true; this.isEnterTechnology = false; @@ -32,7 +27,6 @@ export class TimeClockComponent implements OnInit { employeClockIn(): boolean { this.isClockIn = !this.isClockIn; - this.enableTimer(); return this.isClockIn; } @@ -44,7 +38,6 @@ export class TimeClockComponent implements OnInit { this.isClockIn = true; this.isEnterTechnology = false; this.showAlertEnterTecnology = false; - console.log('Disble Timer'); } } @@ -56,26 +49,7 @@ export class TimeClockComponent implements OnInit { } } - enableTimer() { - this.timer = interval(1000); - this.timer.subscribe( (data) => { - this.seconds += 1; - if ( this.seconds === 59 ) { - this.minute += 1; - this.seconds = 0; - if ( this.minute === 59 ) { - this.hour += 1; - this.minute = 0; - } - } - // console.log(this.hour + ' : ' + this.minute + ' : ' + this.seconds); - }); - - } - - ngOnInit(): void { } - } diff --git a/src/app/components/shared/clock/clock.component.spec.ts b/src/app/components/shared/clock/clock.component.spec.ts index 22d176fcc..761908de4 100644 --- a/src/app/components/shared/clock/clock.component.spec.ts +++ b/src/app/components/shared/clock/clock.component.spec.ts @@ -6,6 +6,7 @@ describe('ClockComponent', () => { let component: ClockComponent; let fixture: ComponentFixture; + beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ ClockComponent ] @@ -22,4 +23,15 @@ describe('ClockComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + it('should show the current hour of day', () => { + const currentHour = 11; + expect(component.currentDate.getHours()).toEqual(currentHour); + }); + + it('should show the current minutes of day', () => { + const currenMinutes = 5; + expect(component.currentDate.getMinutes()).toEqual(currenMinutes); + }); + }); diff --git a/src/app/components/shared/clock/clock.component.ts b/src/app/components/shared/clock/clock.component.ts index 02ecb96ef..0eea6b977 100644 --- a/src/app/components/shared/clock/clock.component.ts +++ b/src/app/components/shared/clock/clock.component.ts @@ -8,7 +8,7 @@ import { interval, timer } from 'rxjs'; }) export class ClockComponent implements OnInit { - currentDate: Date; + currentDate: Date = new Date(); hour: number; minutes: number; seconds: number; @@ -23,13 +23,13 @@ export class ClockComponent implements OnInit { } showClcok() { - const timer = interval(1000); - timer.subscribe( (data) => { + const timenInterval = interval(1000); + timenInterval.subscribe( (data) => { this.currentDate = new Date(); this.hour = this.currentDate.getHours(); this.minutes = this.currentDate.getMinutes(); this.seconds = this.currentDate.getSeconds(); - } ); + }); } ngOnInit(): void { From 8556927416dce08962a418ccd82b7a483600c251 Mon Sep 17 00:00:00 2001 From: daros10 Date: Tue, 17 Mar 2020 11:21:43 -0500 Subject: [PATCH 16/21] use back-ticks --- src/app/app.module.ts | 1 - .../time-clock/time-clock.component.spec.ts | 17 ++++++++--------- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1c7f95523..d211b1109 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -14,7 +14,6 @@ import { TimeClockComponent } from './components/options-sidebar/time-clock/time import { ProjectManagementComponent } from './components/options-sidebar/project-management/project-management.component'; import { ProjectListComponent } from './components/shared/project-list/project-list.component'; import { CreateProjectComponent } from './components/shared/create-project/create-project.component'; -import { TimeClockComponent } from './components/options-sidebar/time-clock/time-clock.component'; import { DetailsFieldsComponent } from './components/shared/details-fields/details-fields.component'; import { ProjectListHoverComponent } from './components/shared/project-list-hover/project-list-hover.component'; diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts index ba434e059..4927e4433 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts @@ -1,11 +1,10 @@ -import { async, ComponentFixture, TestBed } from "@angular/core/testing"; -import { By } from "@angular/platform-browser"; -import { DebugElement } from "@angular/core"; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; +import { TimeClockComponent } from './time-clock.component'; +import { ProjectListHoverComponent } from '../../shared/project-list-hover/project-list-hover.component'; -import { TimeClockComponent } from "./time-clock.component"; -import { ProjectListHoverComponent } from "../../shared/project-list-hover/project-list-hover.component"; - -describe("TimeClockComponent", () => { +describe('TimeClockComponent', () => { let component: TimeClockComponent; let fixture: ComponentFixture; let de: DebugElement; @@ -30,7 +29,7 @@ describe("TimeClockComponent", () => { fixture.detectChanges(); }); - it("should be created", () => { + it('should be created', () => { expect(component).toBeTruthy(); }); @@ -43,7 +42,7 @@ describe("TimeClockComponent", () => { expect(ptag.textContent).toBe('Dario clocked out at hh:mm:ss'); })); - it("should set showfileds as true", () => { + it('should set showfileds as true', () => { const show = true; component.setShowFields(show); expect(component.showFields).toBe(true); From f0c823d8af99164ef5a5ea6d3b11a73553372d40 Mon Sep 17 00:00:00 2001 From: daros10 Date: Wed, 18 Mar 2020 10:00:56 -0500 Subject: [PATCH 17/21] added clockIn in hover --- .../options-sidebar/time-clock/time-clock.component.html | 3 --- .../options-sidebar/time-clock/time-clock.component.ts | 1 + 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.html b/src/app/components/options-sidebar/time-clock/time-clock.component.html index b0bbe49ec..0b293f4d0 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.html +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.html @@ -42,10 +42,7 @@
Projects

Top

    - - -

diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.ts index 4176e7a15..598e022cf 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.ts +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.ts @@ -53,6 +53,7 @@ export class TimeClockComponent implements OnInit { } setShowFields(show: boolean) { + this.isClockIn = !this.isClockIn; this.showFields = show; } From d097ab15c8483c7ddcb80386fbd4fe39d9d06cf5 Mon Sep 17 00:00:00 2001 From: daros10 Date: Wed, 18 Mar 2020 10:05:15 -0500 Subject: [PATCH 18/21] change value in hover --- .../options-sidebar/time-clock/time-clock.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.ts index 598e022cf..126859216 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.ts +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.ts @@ -53,7 +53,7 @@ export class TimeClockComponent implements OnInit { } setShowFields(show: boolean) { - this.isClockIn = !this.isClockIn; + this.isClockIn = false; this.showFields = show; } From 2e0bc6b494f5eb0234151e172c43100b92c2c324 Mon Sep 17 00:00:00 2001 From: daros10 Date: Wed, 18 Mar 2020 10:26:22 -0500 Subject: [PATCH 19/21] remove spaces --- .../options-sidebar/time-clock/time-clock.component.html | 6 ++++-- .../options-sidebar/time-clock/time-clock.component.ts | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.html b/src/app/components/options-sidebar/time-clock/time-clock.component.html index 0b293f4d0..d92c43de2 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.html +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.html @@ -1,4 +1,5 @@
+ @@ -45,7 +46,7 @@
Projects

- +
@@ -80,4 +81,5 @@
Projects
-
\ No newline at end of file +
+
\ No newline at end of file diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.ts index 126859216..2a9c9a7f6 100644 --- a/src/app/components/options-sidebar/time-clock/time-clock.component.ts +++ b/src/app/components/options-sidebar/time-clock/time-clock.component.ts @@ -6,6 +6,7 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./time-clock.component.css'] }) export class TimeClockComponent implements OnInit { + projects = [ { id: 'P1', name: 'Project 1' }, { id: 'P2', name: 'Project 2' }, @@ -13,8 +14,6 @@ export class TimeClockComponent implements OnInit { { id: 'P4', name: 'Project 4' } ]; - showFields: boolean; - username = 'Dario'; clockInUsername = 'hh:mm:ss'; clockOutUsername = 'hh:mm:ss'; @@ -22,6 +21,7 @@ export class TimeClockComponent implements OnInit { isClockIn: boolean; isEnterTechnology: boolean; showAlertEnterTecnology: boolean; + showFields: boolean; constructor() { this.isClockIn = true; From d89956687a7b2c29c853d07be825071c9b30add1 Mon Sep 17 00:00:00 2001 From: Cristina Guncay Date: Tue, 17 Mar 2020 11:35:19 -0500 Subject: [PATCH 20/21] delete botton --- src/app/app.module.ts | 8 ++- .../project-management.component.html | 1 + .../project-management.component.ts | 24 +++++--- .../shared/modal/modal.component.css | 0 .../shared/modal/modal.component.html | 17 ++++++ .../shared/modal/modal.component.spec.ts | 25 +++++++++ .../shared/modal/modal.component.ts | 26 +++++++++ .../project-list/project-list.component.html | 55 +++++++++++++------ .../project-list/project-list.component.ts | 17 +++++- src/app/services/project.service.spec.ts | 16 ++++++ src/app/services/project.service.ts | 29 ++++++++++ src/assets/project.json | 16 ++++++ 12 files changed, 205 insertions(+), 29 deletions(-) create mode 100644 src/app/components/shared/modal/modal.component.css create mode 100644 src/app/components/shared/modal/modal.component.html create mode 100644 src/app/components/shared/modal/modal.component.spec.ts create mode 100644 src/app/components/shared/modal/modal.component.ts create mode 100644 src/app/services/project.service.spec.ts create mode 100644 src/app/services/project.service.ts create mode 100644 src/assets/project.json diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d211b1109..b611dc7bc 100644 --- a/src/app/app.module.ts +++ b/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] diff --git a/src/app/components/options-sidebar/project-management/project-management.component.html b/src/app/components/options-sidebar/project-management/project-management.component.html index ade840ad1..261ac240f 100644 --- a/src/app/components/options-sidebar/project-management/project-management.component.html +++ b/src/app/components/options-sidebar/project-management/project-management.component.html @@ -11,6 +11,7 @@
diff --git a/src/app/components/options-sidebar/project-management/project-management.component.ts b/src/app/components/options-sidebar/project-management/project-management.component.ts index 95dd40cb9..afbf1598f 100644 --- a/src/app/components/options-sidebar/project-management/project-management.component.ts +++ b/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,14 @@ 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) { + this.getProjects(); + } ngOnInit(): void { + this.getProjects(); } updateProject(projectData): void { @@ -44,7 +44,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; + }); + } } diff --git a/src/app/components/shared/modal/modal.component.css b/src/app/components/shared/modal/modal.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/components/shared/modal/modal.component.html b/src/app/components/shared/modal/modal.component.html new file mode 100644 index 000000000..8e07addaa --- /dev/null +++ b/src/app/components/shared/modal/modal.component.html @@ -0,0 +1,17 @@ +
+
+
+ + +
+
+ Are you sure you want to delete {{project.name}} project? +
+
+ + +
+
+
diff --git a/src/app/components/shared/modal/modal.component.spec.ts b/src/app/components/shared/modal/modal.component.spec.ts new file mode 100644 index 000000000..fc32a90f0 --- /dev/null +++ b/src/app/components/shared/modal/modal.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ModalComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/shared/modal/modal.component.ts b/src/app/components/shared/modal/modal.component.ts new file mode 100644 index 000000000..1180b9572 --- /dev/null +++ b/src/app/components/shared/modal/modal.component.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(); + } +} diff --git a/src/app/components/shared/project-list/project-list.component.html b/src/app/components/shared/project-list/project-list.component.html index 4edb05638..b7204311f 100644 --- a/src/app/components/shared/project-list/project-list.component.html +++ b/src/app/components/shared/project-list/project-list.component.html @@ -1,28 +1,47 @@

Project List

-
-
-
-

- - {{project.name}} - - -

-
+
+
+
+
+

+ + {{project.name}} + +
+ + +
+

+
-
-
-
Details:
-

{{project.details}}

-
Status:
-

{{project.status}}

-
Completed project:
-

{{project.completed ? 'Yes' : 'No'}}

+
+
+
Details:
+

{{project.details}}

+
Status:
+

{{project.status}}

+
Completed project:
+

{{project.completed ? 'Yes' : 'No'}}

+
+ +
+
+

There is no any project.

+
Please, create one.
+
+
+
+ + diff --git a/src/app/components/shared/project-list/project-list.component.ts b/src/app/components/shared/project-list/project-list.component.ts index 760dbf0c3..6fc799c95 100644 --- a/src/app/components/shared/project-list/project-list.component.ts +++ b/src/app/components/shared/project-list/project-list.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Input } from '@angular/core'; import { Output, EventEmitter } from '@angular/core'; +import { Project } from '../../../interfaces/project'; @Component({ selector: 'app-project-list', @@ -9,11 +10,25 @@ import { Output, EventEmitter } from '@angular/core'; }) export class ProjectListComponent implements OnInit { - @Input() projects: any[]; + @Input() projects: Project[] = []; @Output() editProject = new EventEmitter(); + @Output() deleteProject = new EventEmitter(); + + projectToDelete: Project; + openDeleteModal: Boolean = false; constructor() { } ngOnInit(): void { } + + openModal(projectData) { + this.projectToDelete = projectData; + this.openDeleteModal = true; + } + + removeProject(projectId) { + this.deleteProject.emit(projectId); + this.projectToDelete = null; + } } diff --git a/src/app/services/project.service.spec.ts b/src/app/services/project.service.spec.ts new file mode 100644 index 000000000..c70ac34bd --- /dev/null +++ b/src/app/services/project.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ProjectService } from './project.service'; + +describe('ProjectService', () => { + let service: ProjectService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ProjectService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts new file mode 100644 index 000000000..0e9c90218 --- /dev/null +++ b/src/app/services/project.service.ts @@ -0,0 +1,29 @@ +import { Injectable } from '@angular/core'; +import { Project } from '../interfaces/project'; +import { HttpClient } from '@angular/common/http'; +import { Observable, of } from 'rxjs'; +import { map, filter } from 'rxjs/operators'; + + + +@Injectable({ + providedIn: 'root' +}) +export class ProjectService { + + projects: Project[] = []; + url = 'assets/project.json'; + + constructor(private http: HttpClient) {} + + getProjects(): Observable { + return this.http.get(this.url); + } + + // getProject(projectId): Observable { + // return this.http.get(this.url).pipe( + // filter((project: Project) => project.id === projectId)[0] + // ); + // } + +} diff --git a/src/assets/project.json b/src/assets/project.json new file mode 100644 index 000000000..440418f9c --- /dev/null +++ b/src/assets/project.json @@ -0,0 +1,16 @@ +[ + { + "id": 1, + "name": "GoSpace", + "details": "This app help to improve your workspace.", + "status": "Active", + "completed": false + }, + { + "id": 2, + "name": "MidoPlay", + "details": "It's a good app to play Lottery", + "status": "Inactive", + "completed": true + } +] From 009975685315402dd5fd8b4b844b00b0795a626f Mon Sep 17 00:00:00 2001 From: Cristina Guncay Date: Wed, 18 Mar 2020 17:36:22 -0500 Subject: [PATCH 21/21] service test --- .../project-management.component.spec.ts | 55 ++++++++++++++++++- .../project-management.component.ts | 1 - src/app/services/project.service.spec.ts | 17 ++++-- src/app/services/project.service.ts | 12 +--- 4 files changed, 66 insertions(+), 19 deletions(-) diff --git a/src/app/components/options-sidebar/project-management/project-management.component.spec.ts b/src/app/components/options-sidebar/project-management/project-management.component.spec.ts index 1cd920886..99d961944 100644 --- a/src/app/components/options-sidebar/project-management/project-management.component.spec.ts +++ b/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; + 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); + }); }); diff --git a/src/app/components/options-sidebar/project-management/project-management.component.ts b/src/app/components/options-sidebar/project-management/project-management.component.ts index afbf1598f..b3404d6a3 100644 --- a/src/app/components/options-sidebar/project-management/project-management.component.ts +++ b/src/app/components/options-sidebar/project-management/project-management.component.ts @@ -16,7 +16,6 @@ export class ProjectManagementComponent implements OnInit { projects: Project[] = []; constructor(private projectService: ProjectService) { - this.getProjects(); } ngOnInit(): void { diff --git a/src/app/services/project.service.spec.ts b/src/app/services/project.service.spec.ts index c70ac34bd..856ff3780 100644 --- a/src/app/services/project.service.spec.ts +++ b/src/app/services/project.service.spec.ts @@ -1,4 +1,5 @@ -import { TestBed } from '@angular/core/testing'; +import { TestBed, inject, async } from '@angular/core/testing'; +import { HttpClientTestingModule } from '@angular/common/http/testing'; import { ProjectService } from './project.service'; @@ -6,11 +7,17 @@ describe('ProjectService', () => { let service: ProjectService; beforeEach(() => { - TestBed.configureTestingModule({}); + TestBed.configureTestingModule({ + imports: [HttpClientTestingModule] + }); service = TestBed.inject(ProjectService); }); - it('should be created', () => { - expect(service).toBeTruthy(); - }); + + it('should create', inject([HttpClientTestingModule, ProjectService], + (httpClient: HttpClientTestingModule, apiService: ProjectService) => { + expect(apiService).toBeTruthy(); + expect(httpClient).toBeTruthy(); + })); + }); diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts index 0e9c90218..33a2395b9 100644 --- a/src/app/services/project.service.ts +++ b/src/app/services/project.service.ts @@ -1,10 +1,7 @@ import { Injectable } from '@angular/core'; import { Project } from '../interfaces/project'; import { HttpClient } from '@angular/common/http'; -import { Observable, of } from 'rxjs'; -import { map, filter } from 'rxjs/operators'; - - +import { Observable } from 'rxjs'; @Injectable({ providedIn: 'root' @@ -19,11 +16,4 @@ export class ProjectService { getProjects(): Observable { return this.http.get(this.url); } - - // getProject(projectId): Observable { - // return this.http.get(this.url).pipe( - // filter((project: Project) => project.id === projectId)[0] - // ); - // } - }