├── libs
├── .gitkeep
├── fruit-basket
│ ├── index.ts
│ └── src
│ │ ├── counter-display
│ │ ├── counter-display.component.ts
│ │ └── counter-display.component.html
│ │ ├── basket-ui
│ │ ├── basket-ui.component.html
│ │ └── basket-ui.component.ts
│ │ ├── fruit-basket.module.ts
│ │ └── state
│ │ └── state.ts
├── employee-list
│ ├── index.ts
│ └── src
│ │ ├── employee-list.module.ts
│ │ └── employee-list
│ │ ├── employee-list.component.html
│ │ └── employee-list.component.ts
├── employee-search
│ ├── index.ts
│ └── src
│ │ ├── employee-search.module.ts
│ │ └── employee-list
│ │ ├── employee-list.component.html
│ │ └── employee-list.component.ts
├── retry-loader
│ ├── index.ts
│ └── src
│ │ ├── retry-loader.module.ts
│ │ ├── retry-loader.module.spec.ts
│ │ ├── faulty.ts
│ │ └── load-with-retry.ts
├── employee-display
│ ├── index.ts
│ └── src
│ │ ├── employee-display.module.spec.ts
│ │ ├── employee-detail-view
│ │ ├── employee-detail-view.component.html
│ │ └── employee-detail-view.component.ts
│ │ ├── employee-list-table-view
│ │ ├── employee-list-table-view.component.ts
│ │ └── employee-list-table-view.component.html
│ │ └── employee-display.module.ts
├── employee-management
│ ├── index.ts
│ └── src
│ │ ├── employee-management.module.spec.ts
│ │ ├── add-employee
│ │ ├── add-employee.component.html
│ │ └── add-employee.component.ts
│ │ ├── edit-employee
│ │ ├── edit-employee.component.html
│ │ └── edit-employee.component.ts
│ │ ├── employee-management.module.ts
│ │ ├── employee-management.routes.ts
│ │ ├── employee-fields
│ │ ├── employee-fields.component.ts
│ │ └── employee-fields.component.html
│ │ ├── employee-navigation.service.ts
│ │ └── management-screen
│ │ ├── management-screen.component.html
│ │ └── management-screen.component.ts
├── video-stat-dashboard
│ ├── index.ts
│ └── src
│ │ ├── top-list
│ │ ├── top-list-display.component.css
│ │ ├── top-list.component.html
│ │ ├── top-list-display.component.ts
│ │ ├── top-list-display.component.html
│ │ └── top-list.component.ts
│ │ ├── video-container
│ │ ├── video-container.component.html
│ │ ├── video-container-display.component.html
│ │ ├── video-container.component.ts
│ │ └── video-container-display.component.ts
│ │ ├── dashboard.component.css
│ │ ├── views-filter
│ │ ├── views-filter.component.ts
│ │ ├── views-filter.component.html
│ │ ├── views-filter-display.component.html
│ │ └── views-filter-display.component.ts
│ │ ├── services
│ │ ├── top-list.service.ts
│ │ ├── app.service.ts
│ │ ├── dashboard.service.ts
│ │ ├── views-filter.service.ts
│ │ ├── mock-video-list.ts
│ │ └── views-breakdown.service.ts
│ │ ├── +state
│ │ ├── video-stats.init.ts
│ │ ├── video-stats.effects.ts
│ │ ├── video-stats.interfaces.ts
│ │ ├── video-stats.actions.ts
│ │ └── video-stats.reducer.ts
│ │ ├── dashboard.component.ts
│ │ ├── dashboard.component.html
│ │ ├── views-breakdown
│ │ ├── views-breakdown-display.component.ts
│ │ ├── filter-state-display.component.ts
│ │ ├── filter-state-display.component.html
│ │ ├── views-breakdown.component.html
│ │ ├── views-breakdown.component.ts
│ │ └── views-breakdown-display.component.html
│ │ └── video-stat-dashboard.module.ts
├── age-range
│ ├── index.ts
│ └── src
│ │ ├── age-range.module.spec.ts
│ │ ├── age-range.module.ts
│ │ ├── age-ranges.ts
│ │ └── enum-to-range.pipe.ts
├── app-schema
│ ├── index.ts
│ ├── src
│ │ ├── employee-listing.ts
│ │ └── employee.ts
│ └── README.md
└── employee-api
│ ├── index.ts
│ └── src
│ ├── employee-api.module.spec.ts
│ ├── employee-api.module.ts
│ └── employee-api.service.ts
├── apps
├── .gitkeep
├── admin
│ ├── src
│ │ ├── assets
│ │ │ ├── .gitkeep
│ │ │ └── nx-logo.png
│ │ ├── app
│ │ │ ├── app.component.css
│ │ │ ├── app.component.ts
│ │ │ ├── app.component.html
│ │ │ ├── app.component.spec.ts
│ │ │ └── app.module.ts
│ │ ├── environments
│ │ │ ├── environment.prod.ts
│ │ │ └── environment.ts
│ │ ├── favicon.ico
│ │ ├── styles.css
│ │ ├── index.html
│ │ ├── main.ts
│ │ ├── tsconfig.app.json
│ │ └── polyfills.ts
│ ├── e2e
│ │ ├── app.po.ts
│ │ ├── app.e2e-spec.ts
│ │ └── tsconfig.e2e.json
│ └── README.md
├── agent
│ ├── src
│ │ ├── assets
│ │ │ ├── .gitkeep
│ │ │ └── nx-logo.png
│ │ ├── app
│ │ │ ├── app.component.css
│ │ │ ├── app.component.ts
│ │ │ ├── app.component.html
│ │ │ ├── app.component.spec.ts
│ │ │ └── app.module.ts
│ │ ├── environments
│ │ │ ├── environment.prod.ts
│ │ │ └── environment.ts
│ │ ├── styles.css
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ ├── main.ts
│ │ ├── tsconfig.app.json
│ │ └── polyfills.ts
│ ├── e2e
│ │ ├── app.po.ts
│ │ ├── app.e2e-spec.ts
│ │ └── tsconfig.e2e.json
│ └── README.md
└── portal
│ ├── src
│ ├── assets
│ │ ├── .gitkeep
│ │ └── nx-logo.png
│ ├── app
│ │ ├── app.component.css
│ │ ├── app.component.ts
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ └── app.module.ts
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── styles.css
│ ├── favicon.ico
│ ├── index.html
│ ├── tsconfig.app.json
│ ├── main.ts
│ └── polyfills.ts
│ ├── e2e
│ ├── app.po.ts
│ ├── app.e2e-spec.ts
│ └── tsconfig.e2e.json
│ └── README.md
├── servers
├── node
│ ├── .gitignore
│ ├── src
│ │ ├── rest
│ │ │ └── rest.ts
│ │ ├── sse
│ │ │ ├── sse.ts
│ │ │ ├── channels.ts
│ │ │ └── fx.ts
│ │ ├── main.ts
│ │ └── graphql
│ │ │ └── graphql.ts
│ ├── tsconfig.json
│ ├── package.json
│ ├── tslint.json
│ ├── README.md
│ └── db.json
└── README.md
├── .travis.yml
├── proxy.conf.json
├── .vscode
├── settings.json
└── tasks.json
├── .editorconfig
├── tsconfig.spec.json
├── tsconfig.compodoc.json
├── tsconfig.json
├── .gitignore
├── protractor.conf.js
├── test.js
├── LICENSE
├── karma.conf.js
├── package.json
├── tslint.json
├── README.md
└── .angular-cli.json
/libs/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/apps/.gitkeep:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/apps/admin/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/apps/agent/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/apps/portal/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/apps/admin/src/app/app.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/apps/agent/src/app/app.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/apps/portal/src/app/app.component.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/libs/fruit-basket/index.ts:
--------------------------------------------------------------------------------
1 | export { FruitBasketModule } from './src/fruit-basket.module';
2 |
--------------------------------------------------------------------------------
/servers/node/.gitignore:
--------------------------------------------------------------------------------
1 | build
2 | node_modules
3 | *.log
4 | typings
5 | *.zip
6 | *.log
7 |
--------------------------------------------------------------------------------
/libs/employee-list/index.ts:
--------------------------------------------------------------------------------
1 | export { EmployeeListModule } from './src/employee-list.module';
2 |
--------------------------------------------------------------------------------
/libs/employee-search/index.ts:
--------------------------------------------------------------------------------
1 | export { EmployeeSearchModule } from './src/employee-search.module';
2 |
--------------------------------------------------------------------------------
/libs/retry-loader/index.ts:
--------------------------------------------------------------------------------
1 | export * from './src/load-with-retry';
2 | export * from './src/faulty';
3 |
--------------------------------------------------------------------------------
/libs/employee-display/index.ts:
--------------------------------------------------------------------------------
1 | export { EmployeeDisplayModule } from './src/employee-display.module';
2 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "8"
4 | cache:
5 | yarn: true
6 | script: ./build.sh
7 |
--------------------------------------------------------------------------------
/apps/admin/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/apps/agent/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/apps/agent/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/apps/portal/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/apps/portal/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/libs/employee-management/index.ts:
--------------------------------------------------------------------------------
1 | export { EmployeeManagementModule } from './src/employee-management.module';
2 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/index.ts:
--------------------------------------------------------------------------------
1 | export { VideoStatDashboardModule } from './src/video-stat-dashboard.module';
2 |
3 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/top-list/top-list-display.component.css:
--------------------------------------------------------------------------------
1 | .active {
2 | color: #26a69a !important;
3 | }
4 |
--------------------------------------------------------------------------------
/apps/admin/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OasisDigital/angular-enterprise-example/HEAD/apps/admin/src/favicon.ico
--------------------------------------------------------------------------------
/apps/agent/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OasisDigital/angular-enterprise-example/HEAD/apps/agent/src/favicon.ico
--------------------------------------------------------------------------------
/apps/portal/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OasisDigital/angular-enterprise-example/HEAD/apps/portal/src/favicon.ico
--------------------------------------------------------------------------------
/libs/age-range/index.ts:
--------------------------------------------------------------------------------
1 | export { AgeRangeModule } from './src/age-range.module';
2 | export { ageRanges } from './src/age-ranges';
3 |
--------------------------------------------------------------------------------
/libs/app-schema/index.ts:
--------------------------------------------------------------------------------
1 | export { IEmployeeListing } from './src/employee-listing';
2 | export { IEmployee } from './src/employee';
3 |
--------------------------------------------------------------------------------
/apps/admin/src/assets/nx-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OasisDigital/angular-enterprise-example/HEAD/apps/admin/src/assets/nx-logo.png
--------------------------------------------------------------------------------
/apps/agent/src/assets/nx-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OasisDigital/angular-enterprise-example/HEAD/apps/agent/src/assets/nx-logo.png
--------------------------------------------------------------------------------
/apps/portal/src/assets/nx-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OasisDigital/angular-enterprise-example/HEAD/apps/portal/src/assets/nx-logo.png
--------------------------------------------------------------------------------
/apps/admin/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
3 | select {
4 | display: inherit;
5 | }
6 |
--------------------------------------------------------------------------------
/libs/app-schema/src/employee-listing.ts:
--------------------------------------------------------------------------------
1 | export interface IEmployeeListing {
2 | id: number;
3 | first_name: string;
4 | last_name: string;
5 | }
6 |
--------------------------------------------------------------------------------
/libs/employee-api/index.ts:
--------------------------------------------------------------------------------
1 | export { EmployeeApiModule } from './src/employee-api.module';
2 | export { EmployeeApi } from './src/employee-api.service';
3 |
--------------------------------------------------------------------------------
/proxy.conf.json:
--------------------------------------------------------------------------------
1 | {
2 | "/api/*": {
3 | "target": "http://localhost:8005",
4 | "pathRewrite": {"^/api": ""},
5 | "logLevel": "debug"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/video-container/video-container.component.html:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/libs/app-schema/src/employee.ts:
--------------------------------------------------------------------------------
1 | import { IEmployeeListing } from './employee-listing';
2 |
3 | export interface IEmployee extends IEmployeeListing {
4 | email: string;
5 | hours_worked: number;
6 | hourly_wage: number;
7 | }
8 |
--------------------------------------------------------------------------------
/libs/retry-loader/src/retry-loader.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | @NgModule({
5 | imports: [CommonModule]
6 | })
7 | export class RetryLoaderModule {}
8 |
--------------------------------------------------------------------------------
/servers/README.md:
--------------------------------------------------------------------------------
1 | # Server(s)
2 |
3 | Server applications go here.
4 |
5 | The ideal vision is to have ~3 servers in ~3 different languages/platforms. This
6 | would be a good microcosm of the complexity of many enterprise systems.
7 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/top-list/top-list.component.html:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/libs/age-range/src/age-range.module.spec.ts:
--------------------------------------------------------------------------------
1 | import { AgeRangeModule } from './age-range.module';
2 |
3 | describe('AgeRangeModule', () => {
4 | it('should work', () => {
5 | expect(new AgeRangeModule()).toBeDefined();
6 | });
7 | });
8 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/dashboard.component.css:
--------------------------------------------------------------------------------
1 | img {
2 | max-height: 106px;
3 | }
4 |
5 | /* Override Materialize */
6 | label {
7 | padding-left: 25px !important;
8 | }
9 |
10 | svg {
11 | display: block;
12 | margin: auto;
13 | }
14 |
--------------------------------------------------------------------------------
/libs/employee-api/src/employee-api.module.spec.ts:
--------------------------------------------------------------------------------
1 | import { EmployeeApiModule } from './employee-api.module';
2 |
3 | describe('EmployeeApiModule', () => {
4 | it('should work', () => {
5 | expect(new EmployeeApiModule()).toBeDefined();
6 | });
7 | });
8 |
--------------------------------------------------------------------------------
/libs/retry-loader/src/retry-loader.module.spec.ts:
--------------------------------------------------------------------------------
1 | import { RetryLoaderModule } from './retry-loader.module';
2 |
3 | describe('RetryLoaderModule', () => {
4 | it('should work', () => {
5 | expect(new RetryLoaderModule()).toBeDefined();
6 | });
7 | });
8 |
--------------------------------------------------------------------------------
/apps/admin/e2e/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, by } from 'protractor';
2 |
3 | export class AppPage {
4 | navigateTo() {
5 | return browser.get('/');
6 | }
7 |
8 | text() {
9 | return browser.findElement(by.css('body')).getText();
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/apps/agent/e2e/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, by } from 'protractor';
2 |
3 | export class AppPage {
4 | navigateTo() {
5 | return browser.get('/');
6 | }
7 |
8 | text() {
9 | return browser.findElement(by.css('body')).getText();
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/apps/portal/e2e/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, by } from 'protractor';
2 |
3 | export class AppPage {
4 | navigateTo() {
5 | return browser.get('/');
6 | }
7 |
8 | text() {
9 | return browser.findElement(by.css('body')).getText();
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | // Place your settings in this file to overwrite default and user settings.
2 | {
3 | "typescript.tsdk": "./node_modules/typescript/lib",
4 | "editor.detectIndentation": false,
5 | "editor.tabSize": 2,
6 | "vsicons.presets.angular": true
7 | }
8 |
--------------------------------------------------------------------------------
/libs/employee-display/src/employee-display.module.spec.ts:
--------------------------------------------------------------------------------
1 | import { EmployeeDisplayModule } from './employee-display.module';
2 |
3 | describe('EmployeeDisplayModule', () => {
4 | it('should work', () => {
5 | expect(new EmployeeDisplayModule()).toBeDefined();
6 | });
7 | });
8 |
--------------------------------------------------------------------------------
/libs/employee-display/src/employee-detail-view/employee-detail-view.component.html:
--------------------------------------------------------------------------------
1 | {{employee?.first_name}} {{employee?.last_name}}
2 |
Email: {{employee?.email}}
3 | Hours Worked: {{employee?.hours_worked}}
4 | Hourly Wage: {{employee?.hourly_wage}}
5 |
--------------------------------------------------------------------------------
/libs/employee-management/src/employee-management.module.spec.ts:
--------------------------------------------------------------------------------
1 | import { EmployeeManagementModule } from './employee-management.module';
2 |
3 | describe('EmployeeManagementModule', () => {
4 | it('should work', () => {
5 | expect(new EmployeeManagementModule()).toBeDefined();
6 | });
7 | });
8 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 |
--------------------------------------------------------------------------------
/libs/age-range/src/age-range.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { EnumToRangePipe } from './enum-to-range.pipe';
4 |
5 | @NgModule({
6 | declarations: [
7 | EnumToRangePipe
8 | ],
9 | exports: [
10 | EnumToRangePipe
11 | ]
12 | })
13 | export class AgeRangeModule { }
14 |
--------------------------------------------------------------------------------
/servers/node/src/rest/rest.ts:
--------------------------------------------------------------------------------
1 | const jsonServer = require('json-server');
2 | const router = jsonServer.router('db.json');
3 | const middlewares = jsonServer.defaults();
4 |
5 | export function addREST(server) {
6 | server.use(middlewares);
7 | server.use(jsonServer.bodyParser);
8 | server.use(router);
9 | }
10 |
--------------------------------------------------------------------------------
/apps/admin/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.css']
7 | })
8 | export class AppComponent implements OnInit {
9 | constructor() {}
10 |
11 | ngOnInit() {}
12 | }
13 |
--------------------------------------------------------------------------------
/apps/agent/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.css']
7 | })
8 | export class AppComponent implements OnInit {
9 | constructor() {}
10 |
11 | ngOnInit() {}
12 | }
13 |
--------------------------------------------------------------------------------
/apps/portal/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.css']
7 | })
8 | export class AppComponent implements OnInit {
9 | constructor() {}
10 |
11 | ngOnInit() {}
12 | }
13 |
--------------------------------------------------------------------------------
/apps/admin/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AppPage } from './app.po';
2 |
3 | describe('admin App', () => {
4 | let page: AppPage;
5 |
6 | beforeEach(() => {
7 | page = new AppPage();
8 | });
9 |
10 | it('should display welcome message', () => {
11 | page.navigateTo();
12 | expect(page.text()).toContain('Welcome');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/apps/agent/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AppPage } from './app.po';
2 |
3 | describe('agent App', () => {
4 | let page: AppPage;
5 |
6 | beforeEach(() => {
7 | page = new AppPage();
8 | });
9 |
10 | it('should display welcome message', () => {
11 | page.navigateTo();
12 | expect(page.text()).toContain('Welcome');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/apps/portal/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AppPage } from './app.po';
2 |
3 | describe('portal App', () => {
4 | let page: AppPage;
5 |
6 | beforeEach(() => {
7 | page = new AppPage();
8 | });
9 |
10 | it('should display welcome message', () => {
11 | page.navigateTo();
12 | expect(page.text()).toContain('Welcome');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/servers/node/src/sse/sse.ts:
--------------------------------------------------------------------------------
1 | import { lowfreqChannel, highfreqChannel } from './channels';
2 |
3 | export function addSSE(server) {
4 |
5 | server.get('/lowfreq', function (req, res) {
6 | lowfreqChannel.addClient(req, res);
7 | });
8 |
9 | server.get('/highfreq', function (req, res) {
10 | highfreqChannel.addClient(req, res);
11 | });
12 | }
13 |
--------------------------------------------------------------------------------
/apps/agent/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Agent
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/apps/admin/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Admin Application
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/apps/portal/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Employee Portal
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/libs/age-range/src/age-ranges.ts:
--------------------------------------------------------------------------------
1 | // Named like a variable because it might become configurable in the future.
2 | // Data is better than code.
3 |
4 | export const ageRanges = [
5 | { label: 'Under 18', lower: 0, upper: 18 },
6 | { label: '18 - 39', lower: 18, upper: 40 },
7 | { label: '40 - 59', lower: 40, upper: 60 },
8 | { label: '60 and up', lower: 60, upper: 999 }
9 | ];
10 |
--------------------------------------------------------------------------------
/apps/portal/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/apps/agent/README.md:
--------------------------------------------------------------------------------
1 | # Agent application
2 |
3 | This is the Agent application. It is intended to be used by a medium size number
4 | of people, for example all "agents" at a company. It has access to a partial
5 | subset of all the features of the system.
6 |
7 | Because essentially all of the features are delegated to libraries that are reused across this family related applications, there is very little code here.
8 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/views-filter/views-filter.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { ViewsFilterService } from '../services/views-filter.service';
4 |
5 | @Component({
6 | selector: 'views-filter',
7 | templateUrl: './views-filter.component.html'
8 | })
9 | export class ViewsFilterComponent {
10 |
11 | constructor(public vfs: ViewsFilterService) { }
12 | }
13 |
--------------------------------------------------------------------------------
/libs/employee-display/src/employee-detail-view/employee-detail-view.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 |
3 | import { IEmployee } from '@enterprise-example/app-schema';
4 |
5 | @Component({
6 | selector: 'employee-detail-view',
7 | templateUrl: './employee-detail-view.component.html'
8 | })
9 | export class EmployeeDetailViewComponent {
10 | @Input() employee: IEmployee;
11 | }
12 |
--------------------------------------------------------------------------------
/libs/fruit-basket/src/counter-display/counter-display.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, Output, EventEmitter } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'counter-display',
5 | templateUrl: './counter-display.component.html'
6 | })
7 | export class CounterDisplayComponent {
8 | @Input() label: string;
9 | @Input() counter: number;
10 | @Output() pick = new EventEmitter();
11 | }
12 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/views-filter/views-filter.component.html:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/libs/fruit-basket/src/counter-display/counter-display.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
{{label}}
4 | Current total: {{ counter }}
5 |
6 |
7 | Pick
8 | Pick 3
9 |
10 |
11 |
--------------------------------------------------------------------------------
/libs/employee-api/src/employee-api.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { HttpClientModule } from '@angular/common/http';
4 |
5 | import { EmployeeApi } from './employee-api.service';
6 |
7 | @NgModule({
8 | imports: [
9 | CommonModule,
10 | HttpClientModule
11 | ],
12 | providers: [EmployeeApi]
13 | })
14 | export class EmployeeApiModule { }
15 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/video-container/video-container-display.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
{{currentVideo.title}} - {{currentVideo.author}}
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/servers/node/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es6",
4 | "lib": [
5 | "es6"
6 | ],
7 | "module": "commonjs",
8 | "moduleResolution": "node",
9 | "skipLibCheck": true,
10 | "sourceMap": true,
11 | "outDir": "build",
12 | "noImplicitAny": false
13 | },
14 | "files": [
15 | "src/main.ts"
16 | ],
17 | "typeRoots": [
18 | "node_modules/@types"
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/apps/portal/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../../dist/out-tsc/apps/portal",
5 | "module": "es2015"
6 | },
7 | "include": [
8 | "**/*.ts"
9 | /* add all lazy-loaded libraries here: "../../../libs/my-lib/index.ts" */
10 |
11 | , "../../../libs/employee-search/index.ts"
12 | ],
13 | "exclude": [
14 | "**/*.spec.ts"
15 | ]
16 | }
17 |
--------------------------------------------------------------------------------
/apps/admin/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false
8 | };
9 |
--------------------------------------------------------------------------------
/apps/admin/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic()
12 | .bootstrapModule(AppModule)
13 | .catch(err => console.log(err));
14 |
--------------------------------------------------------------------------------
/apps/agent/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false
8 | };
9 |
--------------------------------------------------------------------------------
/apps/agent/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic()
12 | .bootstrapModule(AppModule)
13 | .catch(err => console.log(err));
14 |
--------------------------------------------------------------------------------
/apps/portal/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false
8 | };
9 |
--------------------------------------------------------------------------------
/apps/portal/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic()
12 | .bootstrapModule(AppModule)
13 | .catch(err => console.log(err));
14 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/services/top-list.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Store } from '@ngrx/store';
3 |
4 | import { VideoStatsState } from '../+state/video-stats.interfaces';
5 |
6 | @Injectable()
7 | export class TopListService {
8 |
9 | constructor(private store: Store) { }
10 |
11 | getTopList() {
12 | return this.store.select(state => state.videoStats.videoList);
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "./dist/out-tsc/spec",
5 | "module": "commonjs",
6 | "target": "es5",
7 | "types": [
8 | "jasmine",
9 | "node"
10 | ]
11 | },
12 | "include": [
13 | "**/*.ts"
14 | ],
15 | "exclude": [
16 | "**/e2e/*.ts",
17 | "**/*.e2e-spec.ts",
18 | "**/*.po.ts",
19 | "node_modules",
20 | "tmp"
21 | ]
22 | }
23 |
--------------------------------------------------------------------------------
/apps/agent/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/libs/age-range/src/enum-to-range.pipe.ts:
--------------------------------------------------------------------------------
1 | import { Pipe, PipeTransform } from '@angular/core';
2 |
3 | import { ageRanges } from './age-ranges';
4 |
5 | @Pipe({
6 | name: 'enumToRange'
7 | })
8 | export class EnumToRangePipe implements PipeTransform {
9 |
10 | transform(value: any, _args?: any): any {
11 | try {
12 | const index = parseInt(value, 10);
13 | return ageRanges[index].label;
14 | } catch (error) {
15 | return null;
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/servers/node/src/main.ts:
--------------------------------------------------------------------------------
1 | import { addSSE } from './sse/sse';
2 | import { addGraphQL } from './graphql/graphql';
3 | import { addREST } from './rest/rest';
4 | import * as express from 'express';
5 |
6 | const server = express().set('json spaces', 2);
7 |
8 | addSSE(server);
9 | addGraphQL(server);
10 | addREST(server);
11 |
12 | const port = process.env.PORT || 8005;
13 | server.listen(port, () => {
14 | console.log('JSON Server listening on http://localhost:%s/', port);
15 | });
16 |
--------------------------------------------------------------------------------
/apps/agent/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../../dist/out-tsc/apps/agent",
5 | "module": "es2015"
6 | },
7 | "include": [
8 | "**/*.ts"
9 | /* add all lazy-loaded libraries here: "../../../libs/my-lib/index.ts" */
10 |
11 | , "../../../libs/employee-list/index.ts"
12 |
13 | , "../../../libs/employee-search/index.ts"
14 | ],
15 | "exclude": [
16 | "**/*.spec.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/apps/agent/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../../dist/out-tsc/e2e/agent",
5 | "module": "commonjs",
6 | "target": "es5",
7 | "types": [
8 | "jasmine",
9 | "jasminewd2",
10 | "node"
11 | ]
12 | },
13 | "include": [
14 | "../**/*.ts"
15 | /* add all lazy-loaded libraries here: "../../../libs/my-lib/index.ts" */
16 | ],
17 | "exclude": [
18 | "**/*.spec.ts"
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/apps/portal/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../../dist/out-tsc/e2e/portal",
5 | "module": "commonjs",
6 | "target": "es5",
7 | "types": [
8 | "jasmine",
9 | "jasminewd2",
10 | "node"
11 | ]
12 | },
13 | "include": [
14 | "../**/*.ts"
15 | /* add all lazy-loaded libraries here: "../../../libs/my-lib/index.ts" */
16 | ],
17 | "exclude": [
18 | "**/*.spec.ts"
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/+state/video-stats.init.ts:
--------------------------------------------------------------------------------
1 | import { ViewsFilterState, ViewsBreakdownState } from './video-stats.interfaces';
2 | import * as moment from 'moment';
3 |
4 | export const viewsBreakdownStateInitial: ViewsBreakdownState = {
5 | selectedAxis: ['age']
6 | };
7 |
8 | export const viewsFilterInitialState: ViewsFilterState = {
9 | region: 'All',
10 | dateTo: moment().startOf('day').valueOf(),
11 | dateFrom: moment('1995-01-01').valueOf(),
12 | ageRanges: [true, true, true, true]
13 | };
14 |
--------------------------------------------------------------------------------
/tsconfig.compodoc.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "moduleResolution": "node",
4 | "emitDecoratorMetadata": true,
5 | "experimentalDecorators": true,
6 | "target": "es5",
7 | "typeRoots": [
8 | "node_modules/@types"
9 | ],
10 | "lib": [
11 | "es2017",
12 | "dom"
13 | ],
14 | "paths": {
15 | "@enterprise-example/*": [
16 | "libs/*"
17 | ]
18 | }
19 | },
20 | "include": [
21 | "apps/**/*.ts",
22 | "libs/**/*.ts"
23 | ]
24 | }
25 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/dashboard.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { AppService } from './services/app.service';
4 |
5 | @Component({
6 | selector: 'app-dashboard',
7 | templateUrl: './dashboard.component.html',
8 | styleUrls: ['./dashboard.component.css']
9 | })
10 | export class DashboardComponent {
11 |
12 | constructor(_appService: AppService) {
13 | // Have it injected for the side effect of triggering the data population.
14 | // This is an anti-pattern, right?
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/dashboard.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/libs/app-schema/README.md:
--------------------------------------------------------------------------------
1 | # The schema of the application (example)
2 |
3 | This reusable library is intended to express the idea that a family of related
4 | applications typically shares a certain amount of "schema". Within Angular at
5 | least, this usually takes the form of a set of typescript types, although it may
6 | also take the form of something like a GraphQL schema.
7 |
8 | This is the smallest of the example libraries, and has the greatest number of
9 | other libraries that depend on it; that is typical of a somewhat reasonable
10 | dependency graph.
11 |
--------------------------------------------------------------------------------
/libs/fruit-basket/src/basket-ui/basket-ui.component.html:
--------------------------------------------------------------------------------
1 | Fruit Basket
2 |
3 | Empty Cart
4 | Total Fruit: {{ total | async }}
5 |
6 |
7 |
12 |
13 |
14 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/+state/video-stats.effects.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | // import { Actions } from '@ngrx/effects';
3 |
4 | @Injectable()
5 | export class VideoStatsEffects {
6 | // I would prefer to do something roughly like this, but there is not yet an
7 | // automatic feature level initialization action provided by NgRx.
8 | // @Effect() startup = this.actions.ofType('@ngrx/store/init')
9 | // .pipe(map(_ => ({ type: 'VIDEOS_ARRIVED', payload: VIDEO_LIST })))
10 |
11 | // constructor(private actions: Actions) { }
12 | }
13 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/views-breakdown/views-breakdown-display.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 |
3 | import { Video } from '../+state/video-stats.interfaces';
4 | import { GraphData } from '../services/views-breakdown.service';
5 |
6 | @Component({
7 | selector: 'views-breakdown-display',
8 | templateUrl: './views-breakdown-display.component.html'
9 | })
10 | export class ViewsBreakdownDisplayComponent {
11 | @Input() currentVideo: Video;
12 | @Input() viewsBreakdown: string[];
13 | @Input() graphData: GraphData[];
14 | }
15 |
--------------------------------------------------------------------------------
/libs/employee-management/src/add-employee/add-employee.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Add employee
4 |
5 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/libs/employee-display/src/employee-list-table-view/employee-list-table-view.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, Output, EventEmitter } from '@angular/core';
2 |
3 | import { IEmployeeListing } from '@enterprise-example/app-schema';
4 |
5 | @Component({
6 | selector: 'employee-list-table-view',
7 | templateUrl: './employee-list-table-view.component.html'
8 | })
9 | export class EmployeeListTableViewComponent {
10 | @Input() list: IEmployeeListing[];
11 | @Input() selectedId: number;
12 | @Output() selectId = new EventEmitter();
13 |
14 | noop(e: MouseEvent) {
15 | e.preventDefault();
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/apps/portal/README.md:
--------------------------------------------------------------------------------
1 | # Portal application
2 |
3 | This is the portal application. It is intended to be an example of the smallest
4 | subset of functionality, likely to be used by the largest number of people,
5 | among the family of related applications.
6 |
7 | Because essentially all of the features are delegated to libraries that are reused across this family related applications, there is very little code here.
8 |
9 | Although this small example is very similar to the agent and admin applications,
10 | it would be more realistic if this were offered with extensive mobile support,
11 | additional attention to load time and size, etc.
12 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/video-container/video-container.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Observable } from 'rxjs/Observable';
3 |
4 | import { DashboardService } from '../services/dashboard.service';
5 | import { Video } from '../+state/video-stats.interfaces';
6 |
7 | @Component({
8 | selector: 'video-container',
9 | templateUrl: './video-container.component.html'
10 | })
11 | export class VideoContainerComponent {
12 |
13 | currentVideo: Observable;
14 |
15 | constructor(dashboardService: DashboardService) {
16 | this.currentVideo = dashboardService.currentVideo;
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/apps/admin/README.md:
--------------------------------------------------------------------------------
1 | # Admin application
2 |
3 | This admin application has access to "all" of the features of this example set.
4 | It is intended to be, as the name says, like a Admin application.
5 |
6 | Although in a sense matters like load time may not matter in an admin
7 | application (they are particularly used by a smaller number of people, on faster
8 | hardware, for longer sessions, compared to other kinds of software), nonetheless
9 | this one has lazy loading of all features.
10 |
11 | Because essentially all of the features are delegated to libraries that are reused across this family related applications, there is very little code here.
12 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/top-list/top-list-display.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, Output, EventEmitter } from '@angular/core';
2 |
3 | import { Video } from '../+state/video-stats.interfaces';
4 |
5 | @Component({
6 | selector: 'top-list-display',
7 | templateUrl: './top-list-display.component.html',
8 | styleUrls: ['./top-list-display.component.css']
9 | })
10 | export class TopListDisplayComponent {
11 |
12 | @Input() topList: Video[];
13 | @Input() currentSelectionID: string;
14 | @Output() setCurrentVideo = new EventEmitter();
15 |
16 | selectVideo(id: string) {
17 | this.setCurrentVideo.emit(id);
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/apps/admin/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../../dist/out-tsc/apps/admin",
5 | "module": "es2015"
6 | },
7 | "include": [
8 | "**/*.ts"
9 | /* add all lazy-loaded libraries here: "../../../libs/my-lib/index.ts" */
10 |
11 | , "../../../libs/employee-list/index.ts"
12 |
13 | , "../../../libs/employee-management/index.ts"
14 |
15 | , "../../../libs/employee-search/index.ts"
16 |
17 | , "../../../libs/fruit-basket/index.ts"
18 |
19 | , "../../../libs/video-stat-dashboard/index.ts"
20 | ],
21 | "exclude": [
22 | "**/*.spec.ts"
23 | ]
24 | }
25 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/services/app.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Store } from '@ngrx/store';
3 |
4 | import { VideoStatsState } from '../+state/video-stats.interfaces';
5 | import { VIDEO_LIST } from './mock-video-list';
6 |
7 | @Injectable()
8 | export class AppService {
9 |
10 | constructor(store: Store) {
11 | // Mock: Fetch list of videos and make them available.
12 | store.dispatch({ type: 'VIDEOS_ARRIVED', payload: VIDEO_LIST });
13 | // this logic should arguably be something automatic upon loading of the
14 | // "future", but that capability is not yet provided by NgRx.
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/apps/admin/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/libs/employee-display/src/employee-list-table-view/employee-list-table-view.component.html:
--------------------------------------------------------------------------------
1 |
16 |
17 |
20 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "sourceMap": true,
5 | "declaration": false,
6 | "moduleResolution": "node",
7 | "emitDecoratorMetadata": true,
8 | "experimentalDecorators": true,
9 | "noUnusedLocals": true,
10 | "noUnusedParameters": true,
11 | "target": "es5",
12 | "typeRoots": [
13 | "node_modules/@types"
14 | ],
15 | "lib": [
16 | "es2017",
17 | "dom"
18 | ],
19 | "baseUrl": ".",
20 | "paths": {
21 | "@enterprise-example/*": [
22 | "libs/*"
23 | ]
24 | }
25 | },
26 | "exclude": [
27 | "node_modules",
28 | "tmp"
29 | ]
30 | }
31 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/views-breakdown/filter-state-display.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, Output, EventEmitter } from '@angular/core';
2 |
3 | import { ageRanges } from '@enterprise-example/age-range';
4 |
5 | import { ViewsFilterState } from '../+state/video-stats.interfaces';
6 |
7 | @Component({
8 | selector: 'filter-state-display',
9 | templateUrl: './filter-state-display.component.html'
10 | })
11 | export class FilterStateDisplayComponent {
12 | @Input() viewsFilterState: ViewsFilterState;
13 | @Output() removeGroup = new EventEmitter();
14 | ageRanges = ageRanges;
15 |
16 | removeAgeGroup(group: number) {
17 | this.removeGroup.emit(group);
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
1 | // Available variables which can be used inside of strings.
2 | // ${workspaceRoot}: the root folder of the team
3 | // ${file}: the current opened file
4 | // ${fileBasename}: the current opened file's basename
5 | // ${fileDirname}: the current opened file's dirname
6 | // ${fileExtname}: the current opened file's extension
7 | // ${cwd}: the current working directory of the spawned process
8 |
9 | {
10 | "version": "0.1.0",
11 | "command": "node_modules/.bin/tsc",
12 | "isShellCommand": true,
13 | // Show the output window only if unrecognized errors occur.
14 | "showOutput": "silent",
15 | // Use this tsconfig
16 | "args": ["-p", ".", "--noEmit" ],
17 | "problemMatcher": "$tsc"
18 | }
19 |
--------------------------------------------------------------------------------
/libs/employee-management/src/edit-employee/edit-employee.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Edit employee
4 |
5 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 |
8 | # dependencies
9 | /node_modules
10 |
11 | # IDEs and editors
12 | /.idea
13 | .project
14 | .classpath
15 | .c9/
16 | *.launch
17 | .settings/
18 | *.sublime-workspace
19 |
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 |
27 | # misc
28 | /.sass-cache
29 | /connect.lock
30 | /coverage
31 | /libpeerconnection.log
32 | npm-debug.log
33 | testem.log
34 | /typings
35 |
36 | # e2e
37 | /e2e/*.js
38 | /e2e/*.map
39 |
40 | # System Files
41 | .DS_Store
42 | Thumbs.db
43 |
44 | NOTES.md
45 | *.log
46 | documentation
47 |
--------------------------------------------------------------------------------
/libs/employee-display/src/employee-display.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { ReactiveFormsModule } from '@angular/forms';
4 |
5 | import { EmployeeDetailViewComponent } from './employee-detail-view/employee-detail-view.component';
6 | import { EmployeeListTableViewComponent } from './employee-list-table-view/employee-list-table-view.component';
7 |
8 | @NgModule({
9 | declarations: [
10 | EmployeeDetailViewComponent,
11 | EmployeeListTableViewComponent
12 | ],
13 | imports: [
14 | CommonModule,
15 | ReactiveFormsModule
16 | ],
17 | exports: [
18 | EmployeeDetailViewComponent,
19 | EmployeeListTableViewComponent
20 | ]
21 | })
22 | export class EmployeeDisplayModule { }
23 |
--------------------------------------------------------------------------------
/apps/admin/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../../dist/out-tsc/e2e/admin",
5 | "module": "commonjs",
6 | "target": "es5",
7 | "types": [
8 | "jasmine",
9 | "jasminewd2",
10 | "node"
11 | ]
12 | },
13 | "include": [
14 | "../**/*.ts"
15 | /* add all lazy-loaded libraries here: "../../../libs/my-lib/index.ts" */
16 |
17 | , "../../../libs/employee-list/index.ts"
18 |
19 | , "../../../libs/employee-management/index.ts"
20 |
21 | , "../../../libs/employee-search/index.ts"
22 |
23 | , "../../../libs/fruit-basket/index.ts"
24 |
25 | , "../../../libs/video-stat-dashboard/index.ts"
26 | ],
27 | "exclude": [
28 | "**/*.spec.ts"
29 | ]
30 | }
31 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/views-breakdown/filter-state-display.component.html:
--------------------------------------------------------------------------------
1 |
2 |
Region:
3 |
{{viewsFilterState.region}}
4 |
5 |
Date Range:
6 | {{viewsFilterState.dateFrom | date:'shortDate'}}
7 | {{viewsFilterState.dateTo | date:'shortDate'}}
8 |
9 |
10 |
11 | Age Groups:
12 |
13 | {{ index }}
14 |
15 | {{index | enumToRange}}
16 | x
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/libs/employee-list/src/employee-list.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { RouterModule, Route } from '@angular/router';
4 |
5 | import { EmployeeDisplayModule } from '@enterprise-example/employee-display';
6 | import { EmployeeApiModule } from '@enterprise-example/employee-api';
7 |
8 | import { EmployeeListComponent } from './employee-list/employee-list.component';
9 |
10 | const ROUTES: Route[] = [
11 | { path: '', component: EmployeeListComponent }
12 | ];
13 |
14 | @NgModule({
15 | declarations: [
16 | EmployeeListComponent
17 | ],
18 | imports: [
19 | EmployeeDisplayModule,
20 | EmployeeApiModule,
21 | CommonModule,
22 | RouterModule.forChild(ROUTES)
23 | ]
24 | })
25 | export class EmployeeListModule { }
26 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/+state/video-stats.interfaces.ts:
--------------------------------------------------------------------------------
1 | export interface ViewsBreakdownState {
2 | selectedAxis: string[];
3 | }
4 |
5 | export interface View {
6 | age: number;
7 | region: string;
8 | date: string;
9 | }
10 |
11 | export interface Video {
12 | title: string;
13 | author: string;
14 | id: string;
15 | viewDetails: View[];
16 | }
17 |
18 | export interface ViewsFilterState {
19 | region: string;
20 | dateTo: number;
21 | dateFrom: number;
22 | ageRanges: boolean[]; // bit for each bracket
23 | }
24 |
25 | export interface VideoStats {
26 | videoList: Video[];
27 | viewsFilter: ViewsFilterState;
28 | currentVideo: string;
29 | viewsBreakdown: ViewsBreakdownState;
30 | topList: string[];
31 | }
32 |
33 | export interface VideoStatsState {
34 | readonly videoStats: VideoStats;
35 | }
36 |
--------------------------------------------------------------------------------
/apps/admin/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AppComponent } from './app.component';
4 | import { RouterTestingModule } from '@angular/router/testing';
5 |
6 | describe('AppComponent', () => {
7 | let component: AppComponent;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(
11 | async(() => {
12 | TestBed.configureTestingModule({
13 | imports: [RouterTestingModule],
14 | declarations: [AppComponent]
15 | }).compileComponents();
16 | })
17 | );
18 |
19 | beforeEach(() => {
20 | fixture = TestBed.createComponent(AppComponent);
21 | component = fixture.componentInstance;
22 | fixture.detectChanges();
23 | });
24 |
25 | it('should create', () => {
26 | expect(component).toBeTruthy();
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/apps/agent/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AppComponent } from './app.component';
4 | import { RouterTestingModule } from '@angular/router/testing';
5 |
6 | describe('AppComponent', () => {
7 | let component: AppComponent;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(
11 | async(() => {
12 | TestBed.configureTestingModule({
13 | imports: [RouterTestingModule],
14 | declarations: [AppComponent]
15 | }).compileComponents();
16 | })
17 | );
18 |
19 | beforeEach(() => {
20 | fixture = TestBed.createComponent(AppComponent);
21 | component = fixture.componentInstance;
22 | fixture.detectChanges();
23 | });
24 |
25 | it('should create', () => {
26 | expect(component).toBeTruthy();
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/apps/portal/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { AppComponent } from './app.component';
4 | import { RouterTestingModule } from '@angular/router/testing';
5 |
6 | describe('AppComponent', () => {
7 | let component: AppComponent;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(
11 | async(() => {
12 | TestBed.configureTestingModule({
13 | imports: [RouterTestingModule],
14 | declarations: [AppComponent]
15 | }).compileComponents();
16 | })
17 | );
18 |
19 | beforeEach(() => {
20 | fixture = TestBed.createComponent(AppComponent);
21 | component = fixture.componentInstance;
22 | fixture.detectChanges();
23 | });
24 |
25 | it('should create', () => {
26 | expect(component).toBeTruthy();
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/libs/employee-management/src/employee-management.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { ReactiveFormsModule } from '@angular/forms';
4 |
5 | import { EmployeeDisplayModule } from '@enterprise-example/employee-display';
6 | import { EmployeeApiModule } from '@enterprise-example/employee-api';
7 |
8 | import { ROUTER_MODULE, ROUTED_COMPONENTS } from './employee-management.routes';
9 | import { EmployeeNavigation } from './employee-navigation.service';
10 |
11 | @NgModule({
12 | declarations: [
13 | ...ROUTED_COMPONENTS
14 | ],
15 | imports: [
16 | EmployeeDisplayModule,
17 | CommonModule,
18 | ReactiveFormsModule,
19 | ROUTER_MODULE,
20 | EmployeeApiModule
21 | ],
22 | providers: [
23 | EmployeeNavigation
24 | ]
25 | })
26 | export class EmployeeManagementModule { }
27 |
--------------------------------------------------------------------------------
/libs/employee-management/src/employee-management.routes.ts:
--------------------------------------------------------------------------------
1 | import { RouterModule, Route } from '@angular/router';
2 |
3 | import { AddEmployeeComponent } from './add-employee/add-employee.component';
4 | import { EditEmployeeComponent } from './edit-employee/edit-employee.component';
5 | import { EmployeeFieldsComponent } from './employee-fields/employee-fields.component';
6 | import { ManagementScreenComponent } from './management-screen/management-screen.component';
7 |
8 | const ROUTES: Route[] = [
9 | { path: 'add', component: AddEmployeeComponent },
10 | { path: ':id', component: EditEmployeeComponent },
11 | { path: '', component: ManagementScreenComponent }
12 | ];
13 |
14 | export const ROUTER_MODULE = RouterModule.forChild(ROUTES);
15 |
16 | export const ROUTED_COMPONENTS = [
17 | ManagementScreenComponent,
18 | EmployeeFieldsComponent,
19 | AddEmployeeComponent,
20 | EditEmployeeComponent
21 | ];
22 |
--------------------------------------------------------------------------------
/libs/employee-search/src/employee-search.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { ReactiveFormsModule } from '@angular/forms';
4 | import { RouterModule, Route } from '@angular/router';
5 |
6 | import { EmployeeDisplayModule } from '@enterprise-example/employee-display';
7 | import { EmployeeApiModule } from '@enterprise-example/employee-api';
8 |
9 | import { EmployeeListComponent } from './employee-list/employee-list.component';
10 |
11 | const ROUTES: Route[] = [
12 | { path: '', component: EmployeeListComponent }
13 | ];
14 |
15 | @NgModule({
16 | declarations: [
17 | EmployeeListComponent
18 | ],
19 | imports: [
20 | EmployeeDisplayModule,
21 | CommonModule,
22 | ReactiveFormsModule,
23 | EmployeeApiModule,
24 | RouterModule.forChild(ROUTES)
25 | ],
26 | providers: []
27 | })
28 | export class EmployeeSearchModule { }
29 |
--------------------------------------------------------------------------------
/libs/employee-management/src/employee-fields/employee-fields.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { FormGroup, FormBuilder, Validators } from '@angular/forms';
3 |
4 | @Component({
5 | selector: 'employee-fields',
6 | templateUrl: './employee-fields.component.html'
7 | })
8 | export class EmployeeFieldsComponent implements OnInit {
9 | @Input() parentFormGroup: FormGroup;
10 |
11 | fg: FormGroup;
12 |
13 | constructor(fb: FormBuilder) {
14 | this.fg = fb.group({
15 | 'first_name': ['', Validators.required],
16 | 'last_name': ['', [Validators.required, Validators.minLength(3)]],
17 | 'email': [''],
18 | 'hours_worked': ['', [Validators.required, Validators.pattern('[0-9]+')]],
19 | 'hourly_wage': ['', [Validators.required, Validators.pattern('[0-9]+')]]
20 | });
21 | }
22 |
23 | ngOnInit() {
24 | this.parentFormGroup.addControl('employee', this.fg);
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/+state/video-stats.actions.ts:
--------------------------------------------------------------------------------
1 | import { Video } from './video-stats.interfaces';
2 |
3 | export interface AddNewGraphAxis {
4 | type: 'ADD_NEW_GRAPH_AXIS';
5 | payload: string;
6 | }
7 |
8 | export interface ChangeRegion {
9 | type: 'CHANGE_REGION';
10 | payload: string;
11 | }
12 |
13 | export interface ChangeDateFrom {
14 | type: 'CHANGE_DATE_FROM';
15 | payload: number;
16 | }
17 |
18 | export interface ChangeDateTo {
19 | type: 'CHANGE_DATE_TO';
20 | payload: number;
21 | }
22 |
23 | export interface ToggleAge {
24 | type: 'TOGGLE_AGE';
25 | payload: number;
26 | }
27 |
28 | export interface VideosArrived {
29 | type: 'VIDEOS_ARRIVED';
30 | payload: Video[];
31 | }
32 |
33 | export interface VideosSelected {
34 | type: 'VIDEO_SELECTED';
35 | payload: string;
36 | }
37 |
38 | export type VideoStatsAction = AddNewGraphAxis | ChangeRegion | ChangeDateFrom | ChangeDateTo | ToggleAge | VideosArrived | VideosSelected;
39 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/top-list/top-list-display.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Top 5 Preview
4 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/servers/node/src/sse/channels.ts:
--------------------------------------------------------------------------------
1 | // There are no typings for SseChannel yet, this is the way to use it in untyped
2 | // manner from TypeScript.
3 |
4 | // tslint:disable-next-line
5 | const SseChannel = require('sse-channel');
6 |
7 | import { startFxGenerator } from './fx';
8 |
9 | export const lowfreqChannel = new SseChannel({
10 | historySize: 100,
11 | cors: { origins: ['*'] },
12 | jsonEncode: true
13 | });
14 |
15 | export const highfreqChannel = new SseChannel({
16 | historySize: 100,
17 | cors: { origins: ['*'] },
18 | jsonEncode: true
19 | });
20 |
21 | // The low-frequency general will generate updates at a pace we could watch in
22 | // the console log without much difficulty.
23 | startFxGenerator(data => lowfreqChannel.send({ data }), 500);
24 |
25 | // The high-frequency channel will generate updates quite quickly, so that we can
26 | // experiment with screen update performance.
27 | startFxGenerator(data => highfreqChannel.send({ data }), 10);
28 |
--------------------------------------------------------------------------------
/libs/employee-list/src/employee-list/employee-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
Employees
6 |
7 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
Employee detail
19 |
Loading status: {{ status | async }}
20 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/top-list/top-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Observable } from 'rxjs/Observable';
3 | import { map } from 'rxjs/operators';
4 |
5 | import { TopListService } from '../services/top-list.service';
6 | import { DashboardService } from '../services/dashboard.service';
7 | import { Video } from '../+state/video-stats.interfaces';
8 |
9 | @Component({
10 | selector: 'top-list',
11 | templateUrl: './top-list.component.html'
12 | })
13 | export class TopListComponent {
14 |
15 | topList: Observable;
16 | currentSelectionID: Observable;
17 |
18 | constructor(topListService: TopListService, private dashboardService: DashboardService) {
19 | this.topList = topListService.getTopList();
20 | this.currentSelectionID = dashboardService.currentVideo
21 | .pipe(map(video => video && video.id));
22 | }
23 |
24 | setCurrentVideo(id) {
25 | this.dashboardService.setCurrentVideo(id);
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/libs/employee-management/src/employee-navigation.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Router, ActivatedRoute } from '@angular/router';
3 | import { Observable } from 'rxjs/Observable';
4 | import { map } from 'rxjs/operators';
5 |
6 | @Injectable()
7 | export class EmployeeNavigation {
8 | private baseRoute: ActivatedRoute;
9 |
10 | constructor(private router: Router) { }
11 |
12 | calculateModuleBaseRoute(route: ActivatedRoute) {
13 | this.baseRoute = route.pathFromRoot[1];
14 | }
15 |
16 | employeeId(componentRoute: ActivatedRoute): Observable {
17 | return componentRoute.params
18 | .pipe(map(params => params['id']));
19 | }
20 |
21 | list() {
22 | this.router.navigate(['.'], { relativeTo: this.baseRoute });
23 | }
24 |
25 | add() {
26 | this.router.navigate(['add'], { relativeTo: this.baseRoute });
27 | }
28 |
29 | edit(id: number) {
30 | this.router.navigate([id], { relativeTo: this.baseRoute });
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
3 |
4 | const { SpecReporter } = require('jasmine-spec-reporter');
5 | const { getAppDirectoryUsingCliConfig } = require('@nrwl/schematics/src/utils/cli-config-utils');
6 | const appDir = getAppDirectoryUsingCliConfig();
7 |
8 | exports.config = {
9 | allScriptsTimeout: 11000,
10 | specs: [
11 | appDir + '/e2e/**/*.e2e-spec.ts'
12 | ],
13 | capabilities: {
14 | 'browserName': 'chrome'
15 | },
16 | directConnect: true,
17 | baseUrl: 'http://localhost:4200/',
18 | framework: 'jasmine',
19 | jasmineNodeOpts: {
20 | showColors: true,
21 | defaultTimeoutInterval: 30000,
22 | print: function() {}
23 | },
24 | onPrepare() {
25 | require('ts-node').register({
26 | project: appDir + '/e2e/tsconfig.e2e.json'
27 | });
28 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
29 | }
30 | };
31 |
--------------------------------------------------------------------------------
/libs/employee-management/src/add-employee/add-employee.component.ts:
--------------------------------------------------------------------------------
1 | import { Component} from '@angular/core';
2 | import { FormGroup, FormBuilder } from '@angular/forms';
3 | import { ActivatedRoute } from '@angular/router';
4 |
5 | import { EmployeeApi } from '@enterprise-example/employee-api';
6 |
7 | import { EmployeeNavigation } from '../employee-navigation.service';
8 |
9 | @Component({
10 | selector: 'add-employee',
11 | templateUrl: './add-employee.component.html'
12 | })
13 | export class AddEmployeeComponent {
14 | containerFormGroup: FormGroup;
15 |
16 | constructor(private api: EmployeeApi, private nav: EmployeeNavigation,
17 | fb: FormBuilder, route: ActivatedRoute) {
18 | this.nav.calculateModuleBaseRoute(route);
19 | this.containerFormGroup = fb.group({});
20 | }
21 |
22 | cancelClicked() {
23 | this.nav.list();
24 | }
25 |
26 | saveClicked() {
27 | this.api.saveNew({
28 | ...this.containerFormGroup.value.employee
29 | }).subscribe(_x => this.nav.list());
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/services/dashboard.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Store } from '@ngrx/store';
3 | import { Observable } from 'rxjs/Observable';
4 | import { filter } from 'rxjs/operators';
5 | import { combineLatest } from 'rxjs/observable/combineLatest'
6 |
7 | import { VideoStatsState } from '../+state/video-stats.interfaces';
8 | import { Video } from '../+state/video-stats.interfaces';
9 |
10 | @Injectable()
11 | export class DashboardService {
12 |
13 | currentVideo: Observable;
14 |
15 | constructor(private store: Store) {
16 | this.currentVideo = combineLatest(
17 | this.store.select(appState => appState.videoStats.currentVideo),
18 | this.store.select(appState => appState.videoStats.videoList)
19 | .pipe(filter(x => !!x)),
20 | (id: string, list: Video[]) => list.find(video => video.id === id));
21 | }
22 |
23 | setCurrentVideo(id: string) {
24 | this.store.dispatch({
25 | type: 'VIDEO_SELECTED',
26 | payload: id
27 | });
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/libs/fruit-basket/src/basket-ui/basket-ui.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Store } from '@ngrx/store';
3 | import { Observable } from 'rxjs/Observable';
4 |
5 | import { PickBerryAction, AppState, PickApplesAction, EmptyCartAction } from '../state/state';
6 |
7 | @Component({
8 | selector: 'basket-ui',
9 | templateUrl: './basket-ui.component.html'
10 | })
11 | export class BasketUiComponent {
12 | berry: Observable;
13 | apple: Observable;
14 | total: Observable;
15 |
16 | constructor(public store: Store) {
17 | this.berry = store.select(state => state.fruit.berryCounter);
18 | this.apple = store.select(state => state.fruit.appleCounter);
19 | this.total = store.select(state => state.fruit.berryCounter + state.fruit.appleCounter);
20 | }
21 |
22 | pickBerry() {
23 | this.store.dispatch(new PickBerryAction());
24 | }
25 |
26 | pickApple(count: number) {
27 | this.store.dispatch(new PickApplesAction(count));
28 | }
29 |
30 | empty() {
31 | this.store.dispatch(new EmptyCartAction());
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/video-container/video-container-display.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
2 | import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
3 |
4 | import { Video } from '../+state/video-stats.interfaces';
5 |
6 | const URLPREFIX = 'https://www.youtube.com/embed/';
7 |
8 | @Component({
9 | selector: 'video-container-display',
10 | templateUrl: './video-container-display.component.html'
11 | })
12 | export class VideoContainerDisplayComponent implements OnChanges {
13 |
14 | @Input() currentVideo: Video;
15 | currentVideoUrl: SafeUrl;
16 |
17 | constructor(private sanitizer: DomSanitizer) { }
18 |
19 | ngOnChanges(changes: SimpleChanges) {
20 | // good use of ngOnChanges - wire data through, around default sanitization
21 | if (changes['currentVideo'] && changes['currentVideo'].currentValue) {
22 | const incomingVideo = changes['currentVideo'].currentValue as Video;
23 | this.currentVideoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(URLPREFIX + incomingVideo.id);
24 | }
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 | require('zone.js/dist/zone-testing');
3 | const getTestBed = require('@angular/core/testing').getTestBed;
4 | const BrowserDynamicTestingModule = require('@angular/platform-browser-dynamic/testing').BrowserDynamicTestingModule;
5 | const platformBrowserDynamicTesting = require('@angular/platform-browser-dynamic/testing').platformBrowserDynamicTesting;
6 |
7 | // Prevent Karma from running prematurely.
8 | __karma__.loaded = function () {};
9 |
10 | // First, initialize the Angular testing environment.
11 | getTestBed().initTestEnvironment(
12 | BrowserDynamicTestingModule,
13 | platformBrowserDynamicTesting()
14 | );
15 | // Then we find all the tests.
16 | const contextApps = require.context('./apps', true, /\.spec\.ts$/);
17 | // And load the modules.
18 | contextApps.keys().map(contextApps);
19 |
20 | const contextLibs = require.context('./libs', true, /\.spec\.ts$/);
21 | // And load the modules.
22 | contextLibs.keys().map(contextLibs);
23 |
24 | // Finally, start Karma to run the tests.
25 | __karma__.start();
26 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Kyle Cordes
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/libs/retry-loader/src/faulty.ts:
--------------------------------------------------------------------------------
1 | // This observable transformation can be used to simulate a faulty
2 | // network or backend service; it adds random delays and random
3 | // failure probability.
4 |
5 | // Wire it in to an observable stream with .let().
6 |
7 | import { Observable } from 'rxjs/Observable';
8 | import { defer } from 'rxjs/observable/defer';
9 | import { _throw } from 'rxjs/observable/throw';
10 | import { timer } from 'rxjs/observable/timer';
11 | import { flatMap } from 'rxjs/operators';
12 |
13 | export interface IFaultyOptions {
14 | errorProbability?: number;
15 | maxDelayMs?: number;
16 | }
17 |
18 | const DEFAULT_OPTIONS = {
19 | errorProbability: 0.3,
20 | maxDelayMs: 1000
21 | };
22 |
23 | export function faulty(options?: IFaultyOptions): (source: Observable) => Observable {
24 | options = Object.assign({}, DEFAULT_OPTIONS, options);
25 | return (source) => defer(() => {
26 | return timer(Math.random() * options.maxDelayMs)
27 | .pipe(flatMap(_value =>
28 | (Math.random() < options.errorProbability) ?
29 | _throw(new Error('Failed in faulty')) :
30 | source));
31 | });
32 | }
33 |
--------------------------------------------------------------------------------
/servers/node/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@enterprise-example/server",
3 | "version": "1.0.0",
4 | "private": true,
5 | "description": "",
6 | "main": "build/main.js",
7 | "scripts": {
8 | "clean": "rimraf build",
9 | "build": "npm run clean && tsc --outDir build",
10 | "prod": "npm run build",
11 | "prepublish": "npm run build",
12 | "lint": "tslint \"src/**/*.ts\"",
13 | "debug": "node-debug build/main.js",
14 | "start": "node build/main.js",
15 | "test": "echo \"Error: no test specified\" && exit 1",
16 | "go": "npm run build && npm run start"
17 | },
18 | "author": "Oasis Digital Solutions Inc. (https://oasisdigital.com)",
19 | "license": "MIT",
20 | "dependencies": {
21 | "body-parser": "^1.18.2",
22 | "express": "^4.16.2",
23 | "graphql": "^0.13.1",
24 | "graphql-server-express": "^1.3.2",
25 | "graphql-tools": "^2.21.0",
26 | "json-server": "^0.12.1",
27 | "rimraf": "^2.6.2",
28 | "sse-channel": "^3.0.1"
29 | },
30 | "devDependencies": {
31 | "@types/body-parser": "^1.16.8",
32 | "@types/express": "^4.11.1",
33 | "@types/node": "^9.4.6",
34 | "tslint": "~5.9.1",
35 | "typescript": "2.6.2"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | const { makeSureNoAppIsSelected } = require('@nrwl/schematics/src/utils/cli-config-utils');
5 | // Nx only supports running unit tests for all apps and libs.
6 | makeSureNoAppIsSelected();
7 |
8 | module.exports = function (config) {
9 | config.set({
10 | basePath: '',
11 | frameworks: ['jasmine', '@angular/cli'],
12 | plugins: [
13 | require('karma-jasmine'),
14 | require('karma-chrome-launcher'),
15 | require('karma-jasmine-html-reporter'),
16 | require('karma-coverage-istanbul-reporter'),
17 | require('@angular/cli/plugins/karma')
18 | ],
19 | client:{
20 | clearContext: false // leave Jasmine Spec Runner output visible in browser
21 | },
22 | coverageIstanbulReporter: {
23 | reports: [ 'html', 'lcovonly' ],
24 | fixWebpackSourcePaths: true
25 | },
26 | angularCli: {
27 | environment: 'dev'
28 | },
29 | reporters: ['progress', 'kjhtml'],
30 | port: 9876,
31 | colors: true,
32 | logLevel: config.LOG_INFO,
33 | autoWatch: true,
34 | browsers: ['Chrome'],
35 | singleRun: false
36 | });
37 | };
38 |
--------------------------------------------------------------------------------
/libs/employee-management/src/management-screen/management-screen.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
Employee management
6 |
7 |
8 |
9 | Name filter
10 |
11 |
12 |
13 | Sort by
14 |
15 | Last name
16 | Hours worked
17 |
18 |
19 |
20 |
21 |
Add employee
22 |
23 |
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/views-breakdown/views-breakdown.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Views Breakdown
4 |
5 |
9 |
10 |
15 |
16 |
17 |
18 |
19 |
Add New Graph
20 |
Select an x-axis and click Render
21 |
22 | Axis:
23 |
24 | Age
25 | Day
26 | Region
27 |
28 | Render
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/apps/portal/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { AppComponent } from './app.component';
3 | import { BrowserModule } from '@angular/platform-browser';
4 | import { NxModule } from '@nrwl/nx';
5 | import { RouterModule, Route } from '@angular/router';
6 | import { StoreModule } from '@ngrx/store';
7 | import { EffectsModule } from '@ngrx/effects';
8 | import { StoreDevtoolsModule } from '@ngrx/store-devtools';
9 | // import { StoreRouterConnectingModule } from '@ngrx/router-store';
10 |
11 | import { environment } from '../environments/environment';
12 |
13 | const ROUTES: Route[] = [
14 | {
15 | path: '',
16 | pathMatch: 'full',
17 | redirectTo: 'emp-search'
18 | },
19 | {
20 | path: 'emp-search',
21 | loadChildren: '@enterprise-example/employee-search#EmployeeSearchModule'
22 | }
23 | ];
24 |
25 | @NgModule({
26 | imports: [
27 | BrowserModule,
28 | NxModule.forRoot(),
29 | RouterModule.forRoot(ROUTES,
30 | { initialNavigation: 'enabled' }),
31 | StoreModule.forRoot({}),
32 | EffectsModule.forRoot([]),
33 | !environment.production ? StoreDevtoolsModule.instrument() : [],
34 | // StoreRouterConnectingModule
35 | ],
36 | declarations: [AppComponent],
37 | bootstrap: [AppComponent]
38 | })
39 | export class AppModule { }
40 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/services/views-filter.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Store } from '@ngrx/store';
3 |
4 | import { VideoStatsState } from '../+state/video-stats.interfaces';
5 |
6 | @Injectable()
7 | export class ViewsFilterService {
8 |
9 | filterState = this.store.select(state => state.videoStats.viewsFilter);
10 | region = this.store.select(state => state.videoStats.viewsFilter.region);
11 | dateFrom = this.store.select(state => state.videoStats.viewsFilter.dateFrom);
12 | dateTo = this.store.select(state => state.videoStats.viewsFilter.dateTo);
13 | age = this.store.select(state => state.videoStats.viewsFilter.ageRanges);
14 |
15 | constructor(private store: Store) { }
16 |
17 | setRegion(region: string) {
18 | this.store.dispatch({
19 | type: 'CHANGE_REGION',
20 | payload: region
21 | });
22 | }
23 |
24 | setDateFrom(dateFrom: number) {
25 | this.store.dispatch({
26 | type: 'CHANGE_DATE_FROM',
27 | payload: dateFrom
28 | });
29 | }
30 |
31 | setDateTo(dateTo: number) {
32 | this.store.dispatch({
33 | type: 'CHANGE_DATE_TO',
34 | payload: dateTo
35 | });
36 | }
37 |
38 | toggleAge(index: number) {
39 | this.store.dispatch({
40 | type: 'TOGGLE_AGE',
41 | payload: index
42 | });
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/libs/employee-search/src/employee-list/employee-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
Employees
6 |
7 |
8 |
9 | Name Filter
10 |
11 |
12 |
13 | Sort By
14 |
15 | Last Name
16 | Hours Worked
17 |
18 |
19 |
20 |
21 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
Employee detail
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/apps/agent/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { AppComponent } from './app.component';
3 | import { BrowserModule } from '@angular/platform-browser';
4 | import { NxModule } from '@nrwl/nx';
5 | import { RouterModule } from '@angular/router';
6 | import { StoreModule } from '@ngrx/store';
7 | import { EffectsModule } from '@ngrx/effects';
8 | import { StoreDevtoolsModule } from '@ngrx/store-devtools';
9 | import { environment } from '../environments/environment';
10 | // import { StoreRouterConnectingModule } from '@ngrx/router-store';
11 |
12 | const ROUTES = [
13 | {
14 | path: '',
15 | pathMatch: 'full',
16 | redirectTo: 'employee-search'
17 | },
18 | {
19 | path: 'employee-list',
20 | loadChildren: '@enterprise-example/employee-list#EmployeeListModule'
21 | },
22 | {
23 | path: 'employee-search',
24 | loadChildren: '@enterprise-example/employee-search#EmployeeSearchModule'
25 | }
26 | ];
27 |
28 | @NgModule({
29 | imports: [BrowserModule,
30 | NxModule.forRoot(),
31 | RouterModule.forRoot(ROUTES, { initialNavigation: 'enabled' }),
32 | StoreModule.forRoot({}),
33 | EffectsModule.forRoot([]),
34 | !environment.production ? StoreDevtoolsModule.instrument() : [],
35 | // StoreRouterConnectingModule
36 | ],
37 | declarations: [AppComponent],
38 | bootstrap: [AppComponent]
39 | })
40 | export class AppModule { }
41 |
--------------------------------------------------------------------------------
/libs/fruit-basket/src/fruit-basket.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule, InjectionToken } from '@angular/core';
2 | import { RouterModule, Route } from '@angular/router';
3 | import { CommonModule } from '@angular/common';
4 | import { StoreModule, ActionReducerMap } from '@ngrx/store';
5 |
6 | import { BasketUiComponent } from './basket-ui/basket-ui.component';
7 | import { CounterDisplayComponent } from './counter-display/counter-display.component';
8 | import { fruitReducerMap, FruitState } from './state/state';
9 |
10 | // The verbosity that replaced combineReducers is documented here:
11 | // https://github.com/ngrx/platform/blob/master/docs/store/api.md#injecting-reducers
12 |
13 | export const FEATURE_REDUCER_TOKEN =
14 | new InjectionToken>('Feature Reducers');
15 |
16 | export function getReducers(): ActionReducerMap {
17 | return fruitReducerMap;
18 | }
19 |
20 | const ROUTES: Route[] = [
21 | { path: '', pathMatch: 'full', component: BasketUiComponent }
22 | ];
23 |
24 | @NgModule({
25 | declarations: [
26 | BasketUiComponent,
27 | CounterDisplayComponent
28 | ],
29 | imports: [
30 | CommonModule,
31 | StoreModule.forFeature('fruit', FEATURE_REDUCER_TOKEN),
32 | RouterModule.forChild(ROUTES)
33 | ],
34 | providers: [
35 | {
36 | provide: FEATURE_REDUCER_TOKEN,
37 | useFactory: getReducers
38 | }
39 | ]
40 | })
41 | export class FruitBasketModule { }
42 |
--------------------------------------------------------------------------------
/libs/employee-list/src/employee-list/employee-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Observable } from 'rxjs/Observable';
3 | import { Subject } from 'rxjs/Subject';
4 | import { filter, map, share } from 'rxjs/operators';
5 |
6 | import { EmployeeApi } from '@enterprise-example/employee-api';
7 | import { IEmployeeListing } from '@enterprise-example/app-schema';
8 | import { StatusStrings, LoadResultStatus, loadWithRetry, faulty } from '@enterprise-example/retry-loader';
9 |
10 | @Component({
11 | selector: 'employee-list',
12 | templateUrl: './employee-list.component.html'
13 | })
14 | export class EmployeeListComponent {
15 | selectedEmployee: Observable;
16 | status: Observable;
17 | selectedEmployeeId = new Subject();
18 | employees: Observable;
19 | showEmployeeDetails: Observable;
20 |
21 | constructor(api: EmployeeApi) {
22 | this.employees = api.listAll();
23 |
24 | const loadResults = loadWithRetry(
25 | this.selectedEmployeeId,
26 | id => api.loadOne(id)
27 | .pipe(faulty()) // simulate bad connection
28 | ).pipe(share());
29 |
30 | this.status = loadResults
31 | .pipe(map(result => StatusStrings[result.status]));
32 |
33 | this.showEmployeeDetails = loadResults
34 | .pipe(map(result => result.status === LoadResultStatus.Success));
35 |
36 | this.selectedEmployee = loadResults
37 | .pipe(filter(result => result.status === LoadResultStatus.Success),
38 | map(result => result.data));
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/views-breakdown/views-breakdown.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Observable } from 'rxjs/Observable';
3 | import { FormControl } from '@angular/forms';
4 |
5 | import { ViewsFilterService } from '../services/views-filter.service';
6 | import { Video, ViewsFilterState } from '../+state/video-stats.interfaces';
7 | import { DashboardService } from '../services/dashboard.service';
8 | import { ViewsBreakdownService, GraphData } from '../services/views-breakdown.service';
9 |
10 | @Component({
11 | selector: 'views-breakdown',
12 | templateUrl: './views-breakdown.component.html'
13 | })
14 | export class ViewsBreakdownComponent {
15 | viewsFilterState: Observable;
16 | currentVideo: Observable;
17 | viewsBreakdown: Observable;
18 | graphData: Observable;
19 |
20 | // Could be used as ngModel example if desired.
21 | newGraph: FormControl = new FormControl('age');
22 |
23 | constructor(
24 | viewsFilterService: ViewsFilterService,
25 | dashboardService: DashboardService,
26 | private viewsBreakdownService: ViewsBreakdownService) {
27 | this.viewsFilterState = viewsFilterService.filterState;
28 | this.currentVideo = dashboardService.currentVideo;
29 | this.viewsBreakdown = viewsBreakdownService.getBreakdowns();
30 | this.graphData = viewsBreakdownService.getGraphData();
31 | }
32 |
33 | addNewGraph() {
34 | this.viewsBreakdownService.addNewGraphAxis(this.newGraph.value);
35 | }
36 |
37 | removeGroup(group: number) {
38 | this.viewsBreakdownService.removeGroup(group);
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/libs/employee-management/src/management-screen/management-screen.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { FormControl } from '@angular/forms';
3 | import { ActivatedRoute } from '@angular/router';
4 | import { Observable } from 'rxjs/Observable';
5 | import { sortBy } from 'lodash';
6 | import { combineLatest } from 'rxjs/observable/combineLatest'
7 | import { startWith, debounceTime, switchMap } from 'rxjs/operators'
8 |
9 | import { EmployeeApi } from '@enterprise-example/employee-api';
10 | import { IEmployee } from '@enterprise-example/app-schema';
11 |
12 | import { EmployeeNavigation } from '../employee-navigation.service';
13 |
14 | @Component({
15 | selector: 'management-screen',
16 | templateUrl: './management-screen.component.html'
17 | })
18 | export class ManagementScreenComponent {
19 | nameFilter = new FormControl('');
20 | sort = new FormControl('last_name');
21 | filteredList: Observable;
22 |
23 | constructor(api: EmployeeApi, private nav: EmployeeNavigation, route: ActivatedRoute) {
24 | this.nav.calculateModuleBaseRoute(route);
25 |
26 | const nameFilter$ = this.nameFilter.valueChanges.pipe(
27 | startWith(this.nameFilter.value),
28 | debounceTime(250));
29 | const sort$ = this.sort.valueChanges.pipe(
30 | startWith(this.sort.value));
31 |
32 | // List reacts to filter and sort changes
33 | this.filteredList = combineLatest(
34 | nameFilter$.pipe(switchMap(x => api.listFiltered(x))),
35 | sort$,
36 | (list, sort) => sortBy(list, sort)
37 | );
38 | }
39 |
40 | addClicked() {
41 | this.nav.add();
42 | }
43 |
44 | select(id: number) {
45 | this.nav.edit(id);
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/servers/node/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "arrow-return-shorthand": true,
4 | "callable-types": true,
5 | "class-name": true,
6 | "forin": true,
7 | "deprecation": {
8 | "severity": "warn"
9 | },
10 | "import-blacklist": [
11 | true,
12 | "rxjs",
13 | "rxjs/Rx"
14 | ],
15 | "interface-over-type-literal": true,
16 | "member-access": false,
17 | "member-ordering": [
18 | true,
19 | {
20 | "order": [
21 | "static-field",
22 | "instance-field",
23 | "static-method",
24 | "instance-method"
25 | ]
26 | }
27 | ],
28 | "no-arg": true,
29 | "no-bitwise": true,
30 | "no-console": [
31 | true,
32 | "debug",
33 | "info",
34 | "time",
35 | "timeEnd",
36 | "trace"
37 | ],
38 | "no-construct": true,
39 | "no-debugger": true,
40 | "no-duplicate-super": true,
41 | "no-empty": false,
42 | "no-empty-interface": true,
43 | "no-eval": true,
44 | "no-inferrable-types": [
45 | true,
46 | "ignore-params"
47 | ],
48 | "no-misused-new": true,
49 | "no-non-null-assertion": true,
50 | "no-shadowed-variable": true,
51 | "no-string-literal": false,
52 | "no-string-throw": true,
53 | "no-switch-case-fall-through": true,
54 | "no-unnecessary-initializer": true,
55 | "no-unused-expression": true,
56 | "no-use-before-declare": true,
57 | "no-var-keyword": true,
58 | "object-literal-sort-keys": false,
59 | "prefer-const": true,
60 | "radix": true,
61 | "triple-equals": [
62 | true,
63 | "allow-null-check"
64 | ],
65 | "unified-signatures": true,
66 | "variable-name": false
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/libs/fruit-basket/src/state/state.ts:
--------------------------------------------------------------------------------
1 | import { Action } from '@ngrx/store';
2 |
3 | // This example shows an older approach, which uses classes that are nonetheless
4 | // acceptable in the sense of being serializable and de-serializable, because
5 | // their class type/prototype does not actually matter. Just the data inside.
6 |
7 | export interface AppState {
8 | fruit: FruitState;
9 | }
10 |
11 | export interface FruitState {
12 | berryCounter: number;
13 | appleCounter: number;
14 | }
15 |
16 | const PICK_BERRY = 'PICK_BERRY';
17 | export class PickBerryAction implements Action {
18 | type = PICK_BERRY;
19 | }
20 |
21 | const PICK_APPLES = 'PICK_APPLES';
22 | export class PickApplesAction implements Action {
23 | type = PICK_APPLES;
24 | constructor(public payload: number) { }
25 | }
26 |
27 | const EMPTY_CART = 'EMPTY_CART';
28 | export class EmptyCartAction implements Action {
29 | type = EMPTY_CART;
30 | }
31 |
32 | function berryCounterReducer
33 | (value: number = 0, action: Action): number {
34 | switch (action.type) {
35 | case PICK_BERRY:
36 | return value + 1;
37 |
38 | case EMPTY_CART:
39 | return 0;
40 |
41 | default:
42 | return value;
43 | }
44 | }
45 |
46 | function appleCounterReducer(value: number = 0, action: Action): number {
47 | switch (action.type) {
48 | // If you have too many apples, they spill and you lose them all.
49 | case PICK_APPLES:
50 | const apples = value + (action as PickApplesAction).payload;
51 | return apples > 10 ? 0 : apples;
52 |
53 | case EMPTY_CART:
54 | return 0;
55 |
56 | default:
57 | return value;
58 | }
59 | }
60 |
61 | export const fruitReducerMap = {
62 | berryCounter: berryCounterReducer,
63 | appleCounter: appleCounterReducer
64 | };
65 |
--------------------------------------------------------------------------------
/servers/node/README.md:
--------------------------------------------------------------------------------
1 | # Example API server
2 |
3 | This is an example API server for this enterprise example project.
4 |
5 | Like a real enterprise project, it serves several different APIs used by different parts of an application suite.
6 |
7 | Unlike a real (2018) typical enterprise project, it is implemented all in a
8 | single Node server. It is done this way only for development and demo
9 | convenience. Most real systems built today with such widely disparate APIs would
10 | divide them into different code bases, and perhaps even deploy them as micro
11 | services.
12 |
13 | ## REST
14 |
15 | http://localhost:8005/
16 |
17 | Using json-server behind the scenes, a rest API is provided.
18 |
19 | ## SSE
20 |
21 | http://localhost:8005/lowfreq
22 |
23 | SSE is "server sent events"; you can think of it as like web sockets, but it
24 | works only in the downward direction, it is simpler than web sockets, and it
25 | fits through a greater variety of off-the-shelf HTTP-based infrastructure.
26 | Overall SSE is a very good choice for applications that push data from a server
27 | to connected pages, but otherwise use a more typical HTTP/POST/etc based
28 | approach for client/server communication.
29 |
30 | ### Fake FX Data
31 |
32 | The algorithm used here, to generate somewhat realistic looking fake FX data, is
33 | mostly borrowed from the following excellent book. However the code in that book
34 | for the algorithm was in PHP, so it is re-implemented here in TypeScript.
35 |
36 | http://shop.oreilly.com/product/0636920030928.do
37 |
38 | ## GraphQL
39 |
40 | http://localhost:8005/graphql
41 |
42 | http://localhost:8005/graphiql
43 |
44 | A GraphQL APIs also provided, again with very limited, fake data.
45 |
46 | ## Running
47 |
48 | ```
49 | yarn
50 | yarn start
51 | ```
52 |
--------------------------------------------------------------------------------
/libs/employee-search/src/employee-list/employee-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Observable } from 'rxjs/Observable';
3 | import { Subject } from 'rxjs/Subject';
4 | import { FormControl } from '@angular/forms';
5 | import { sortBy } from 'lodash';
6 | import { combineLatest } from 'rxjs/observable/combineLatest'
7 | import { debounceTime, publishReplay, startWith, switchMap, refCount } from 'rxjs/operators'
8 |
9 | import { EmployeeApi } from '@enterprise-example/employee-api';
10 | import { IEmployeeListing } from '@enterprise-example/app-schema';
11 |
12 | @Component({
13 | selector: 'employee-list',
14 | templateUrl: './employee-list.component.html'
15 | })
16 | export class EmployeeListComponent {
17 | nameFilter = new FormControl('');
18 | sort = new FormControl('last_name');
19 |
20 | filteredList: Observable;
21 | selectedId = new Subject();
22 | selectedEmployee: Observable;
23 |
24 | constructor(api: EmployeeApi) {
25 | // .valueChanges is missing the initial value; add it:
26 | const nameFilter$ = this.nameFilter.valueChanges
27 | .pipe(startWith(this.nameFilter.value));
28 | const sort$ = this.sort.valueChanges
29 | .pipe(startWith(this.sort.value));
30 |
31 | // List reacts to filter and sort changes
32 | this.filteredList = combineLatest(
33 | nameFilter$.pipe(
34 | debounceTime(250),
35 | switchMap(x => api.listFiltered(x))
36 | ),
37 | sort$,
38 | (list, sort) => sortBy(list, sort));
39 |
40 | // Detail reacts to selected employee changes
41 | this.selectedEmployee = this.selectedId
42 | .pipe(switchMap(id => api.loadOne(id)),
43 | publishReplay(1),
44 | refCount());
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/views-breakdown/views-breakdown-display.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Views by {{chart.xAxis}}
4 |
5 |
6 |
7 |
8 |
9 | Views
10 | {{chart.xAxis}}
11 | {{rect.value}}
12 |
13 |
15 | {{rect.count}}
16 |
17 |
18 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/apps/admin/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { AppComponent } from './app.component';
3 | import { BrowserModule } from '@angular/platform-browser';
4 | import { NxModule } from '@nrwl/nx';
5 | import { RouterModule } from '@angular/router';
6 | import { StoreModule } from '@ngrx/store';
7 | import { EffectsModule } from '@ngrx/effects';
8 | import { StoreDevtoolsModule } from '@ngrx/store-devtools';
9 | import { environment } from '../environments/environment';
10 | // import { StoreRouterConnectingModule } from '@ngrx/router-store';
11 |
12 | const ROUTES = [
13 | {
14 | path: '',
15 | pathMatch: 'full',
16 | redirectTo: 'video-stat-dashboard'
17 | },
18 | {
19 | path: 'employee-list',
20 | loadChildren: '@enterprise-example/employee-list#EmployeeListModule'
21 | },
22 | {
23 | path: 'employee-management',
24 | loadChildren: '@enterprise-example/employee-management#EmployeeManagementModule'
25 | },
26 | {
27 | path: 'employee-search',
28 | loadChildren: '@enterprise-example/employee-search#EmployeeSearchModule'
29 | },
30 | {
31 | path: 'fruit-basket',
32 | loadChildren: '@enterprise-example/fruit-basket#FruitBasketModule'
33 | },
34 | {
35 | path: 'video-stat-dashboard',
36 | loadChildren: '@enterprise-example/video-stat-dashboard#VideoStatDashboardModule'
37 | }
38 | ];
39 |
40 | @NgModule({
41 | imports: [
42 | BrowserModule,
43 | NxModule.forRoot(),
44 | RouterModule.forRoot(ROUTES, { initialNavigation: 'enabled' }),
45 | StoreModule.forRoot({}),
46 | EffectsModule.forRoot([]),
47 | !environment.production ? StoreDevtoolsModule.instrument() : [],
48 | // StoreRouterConnectingModule
49 | ],
50 | declarations: [AppComponent],
51 | bootstrap: [AppComponent]
52 | })
53 | export class AppModule { }
54 |
--------------------------------------------------------------------------------
/libs/employee-management/src/edit-employee/edit-employee.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnDestroy } from '@angular/core';
2 | import { FormGroup, FormBuilder } from '@angular/forms';
3 | import { ActivatedRoute } from '@angular/router';
4 | import { Subscription } from 'rxjs/Subscription';
5 | import { switchMap, share } from 'rxjs/operators';
6 |
7 | import { EmployeeApi } from '@enterprise-example/employee-api';
8 |
9 | import { EmployeeNavigation } from '../employee-navigation.service';
10 |
11 | @Component({
12 | selector: 'edit-employee',
13 | templateUrl: './edit-employee.component.html'
14 | })
15 | export class EditEmployeeComponent implements OnDestroy {
16 | containerFormGroup: FormGroup;
17 | sub: Subscription;
18 | id: number;
19 |
20 | constructor(private nav: EmployeeNavigation,
21 | private api: EmployeeApi, fb: FormBuilder, route: ActivatedRoute) {
22 | this.nav.calculateModuleBaseRoute(route);
23 | this.containerFormGroup = fb.group({});
24 |
25 | const employee$ = nav.employeeId(route)
26 | .pipe(switchMap(id => api.loadOne(id)),
27 | share());
28 |
29 | this.sub = employee$.subscribe(e => {
30 | this.id = e.id;
31 | const { first_name, last_name, email, hourly_wage } = e;
32 | const hours_worked = e.hours_worked || 0;
33 | this.containerFormGroup.setValue({
34 | employee: { first_name, last_name, email, hourly_wage, hours_worked }
35 | });
36 | });
37 | }
38 |
39 | ngOnDestroy() {
40 | this.sub.unsubscribe();
41 | }
42 |
43 | cancelClicked() {
44 | this.nav.list();
45 | }
46 |
47 | saveClicked() {
48 | this.api.save({
49 | ...this.containerFormGroup.value.employee,
50 | id: this.id
51 | }).subscribe(_x => this.nav.list());
52 | }
53 |
54 | deleteClicked() {
55 | this.api.delete(this.id).subscribe(_x => this.nav.list());
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/views-filter/views-filter-display.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Filter Views
4 |
52 |
53 |
54 |
58 |
59 |
--------------------------------------------------------------------------------
/libs/employee-api/src/employee-api.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { HttpClient, HttpParams } from '@angular/common/http';
3 | import { Observable } from 'rxjs/Observable';
4 | import { delayWhen } from 'rxjs/operators';
5 | import { of } from 'rxjs/observable/of';
6 |
7 | import { IEmployee, IEmployeeListing } from '@enterprise-example/app-schema';
8 |
9 | const API_URL = '/api';
10 | const EMP_URL = API_URL + '/employees';
11 |
12 | // Configure the amount of latency and jitter to simulate
13 | const API_LATENCY = 50;
14 |
15 | // Set to 3000 to see that out-of-order replies don't cause any problem:
16 | const API_JITTER = 250;
17 |
18 | // randomDelay() can be piped into an observable chain to add a (not
19 | // surprisingly) random delay to each value flowing through the observable. Note
20 | // that the delay must be calculated randomly for each value; otherwise the
21 | // notion of "jitter" would not work.
22 |
23 | function randomDelay() {
24 | return delayWhen(_x => of(Math.round(API_LATENCY + Math.random() * API_JITTER)));
25 | }
26 |
27 | @Injectable()
28 | export class EmployeeApi {
29 | constructor(private http: HttpClient) { }
30 |
31 | listAll(): Observable {
32 | return this.http.get(EMP_URL)
33 | .pipe(randomDelay());
34 | }
35 |
36 | listFiltered(searchText: string): Observable {
37 | const params = new HttpParams()
38 | .set('q', searchText)
39 | .set('_limit', '20');
40 | return this.http.get(EMP_URL, { params })
41 | .pipe(randomDelay());
42 | }
43 |
44 | loadOne(employeeId: number): Observable {
45 | return this.http.get(`${EMP_URL}/${employeeId}`)
46 | .pipe(randomDelay());
47 | }
48 |
49 | save(employee: IEmployee) {
50 | return this.http.put(`${EMP_URL}/${employee.id}`, employee)
51 | .pipe(randomDelay());
52 | }
53 |
54 | saveNew(employee: IEmployee) {
55 | return this.http.post(EMP_URL, employee)
56 | .pipe(randomDelay());
57 | }
58 |
59 | delete(id: number) {
60 | return this.http.delete(`${EMP_URL}/${id}`)
61 | .pipe(randomDelay());
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/libs/employee-management/src/employee-fields/employee-fields.component.html:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
first_name
8 |
12 |
Please enter a name
13 |
14 |
15 |
16 |
last_name
17 |
21 |
Please enter a name
22 |
23 |
24 |
25 |
email
26 |
30 |
Please enter email
31 |
32 |
33 |
34 |
hourly_wage
35 |
39 |
Please enter wage
40 |
41 |
42 |
43 |
hours_worked
44 |
48 |
Please enter hours
49 |
50 |
51 |
--------------------------------------------------------------------------------
/servers/node/src/sse/fx.ts:
--------------------------------------------------------------------------------
1 | // Generate vaguely life-like FX demo data,
2 |
3 | // Algorithm translated from an excellent book:
4 | // Data Push Apps with HTML5 SSE
5 | // Pragmatic Solutions for Real-World Clients
6 | // By Darren Cook
7 | // http://shop.oreilly.com/product/0636920030928.do
8 |
9 | class CurrencyPair {
10 |
11 | constructor(
12 | private symbol: string,
13 | private firstBid: number,
14 | private spread: number,
15 | private decimalPlaces: number,
16 | private longCycle: number,
17 | private shortCycle: number) { }
18 |
19 | public generate(msSince1970: number) {
20 | let bid = this.firstBid;
21 | bid += this.spread * 100 *
22 | Math.sin((360 / this.longCycle) * (deg2rad(msSince1970 / 1000 % this.longCycle)));
23 | bid += this.spread * 30 *
24 | Math.sin((360 / this.shortCycle) * (deg2rad(msSince1970 / 1000 % this.shortCycle)));
25 | bid += (randomIntInclusive(-1000, 1000) / 1000.0) * 10 * this.spread;
26 | const ask = bid + this.spread;
27 |
28 | return {
29 | timestamp: msSince1970,
30 | symbol: this.symbol,
31 | bid: bid.toFixed(this.decimalPlaces),
32 | ask: ask.toFixed(this.decimalPlaces)
33 | };
34 | }
35 | }
36 |
37 | function deg2rad(deg) {
38 | return deg * Math.PI / 180;
39 | }
40 |
41 | function randomIntInclusive(min, max) {
42 | min = Math.ceil(min);
43 | max = Math.floor(max);
44 | return Math.floor(Math.random() * (max - min + 1)) + min;
45 | }
46 |
47 | // Completely made up values, these are real currency identifiers
48 | // but the number ranges are not intended to be realistic.
49 |
50 | const symbols = [
51 | new CurrencyPair('EUR/USD', 1.610, 0.0001, 5, 360, 47),
52 | new CurrencyPair('USD/JPY', 85.10, 0.01, 3, 341, 55),
53 | new CurrencyPair('AUD/GBP', 1.823, 0.0002, 5, 319, 39),
54 | new CurrencyPair('NZD/USD', 1.45, 0.001, 4, 290, 41)
55 | ];
56 |
57 | export function startFxGenerator(cb, ms) {
58 | setInterval(() => {
59 | const t = Date.now(); // ms since 1970
60 | const ix = randomIntInclusive(0, symbols.length - 1);
61 | cb(symbols[ix].generate(t));
62 | }, randomIntInclusive(ms, ms * 1.5)); // simulate jitter
63 | }
64 |
65 | // command line demo:
66 | // startFxGenerator(console.log.bind(console), 250);
67 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/+state/video-stats.reducer.ts:
--------------------------------------------------------------------------------
1 | import { ViewsFilterState, ViewsBreakdownState, Video } from './video-stats.interfaces';
2 | import { VideoStatsAction } from './video-stats.actions';
3 | import { viewsFilterInitialState, viewsBreakdownStateInitial } from './video-stats.init';
4 |
5 | const viewsBreakdown =
6 | (prevState: ViewsBreakdownState = viewsBreakdownStateInitial, action: VideoStatsAction): ViewsBreakdownState => {
7 | switch (action.type) {
8 | case 'ADD_NEW_GRAPH_AXIS':
9 | const selectedAxis = [...prevState.selectedAxis, action.payload];
10 | return Object.assign({}, prevState, { selectedAxis });
11 | default:
12 | return prevState;
13 | }
14 | };
15 |
16 | const viewsFilter = (previousState: ViewsFilterState = viewsFilterInitialState,
17 | action: VideoStatsAction): ViewsFilterState => {
18 | switch (action.type) {
19 | case 'CHANGE_REGION':
20 | return Object.assign({}, previousState, { region: action.payload });
21 | case 'CHANGE_DATE_FROM':
22 | return Object.assign({}, previousState, { dateFrom: action.payload });
23 | case 'CHANGE_DATE_TO':
24 | return Object.assign({}, previousState, { dateTo: action.payload });
25 | case 'TOGGLE_AGE':
26 | const ageRanges = previousState.ageRanges.slice(); // clone
27 | ageRanges[action.payload] = !ageRanges[action.payload];
28 | return Object.assign({}, previousState, { ageRanges });
29 | default:
30 | return previousState;
31 | }
32 | };
33 |
34 | const videoList = (state: Video[] = [], action: VideoStatsAction) => {
35 | switch (action.type) {
36 | case 'VIDEOS_ARRIVED':
37 | return action.payload;
38 | default:
39 | return state;
40 | }
41 | };
42 |
43 | const currentVideo = (prevState: string = undefined, action: VideoStatsAction): string => {
44 | switch (action.type) {
45 | case 'VIDEO_SELECTED':
46 | return action.payload;
47 | default:
48 | return prevState;
49 | }
50 | };
51 |
52 | const topList = (prevState: string[] = [], action: VideoStatsAction): string[] => {
53 | switch (action.type) {
54 | default:
55 | return prevState;
56 | }
57 | };
58 |
59 | export const videoStatsReducerMap = {
60 | videoList,
61 | viewsFilter,
62 | currentVideo,
63 | viewsBreakdown,
64 | topList
65 | };
66 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "enterprise-example",
3 | "version": "0.5.0",
4 | "license": "MIT",
5 | "scripts": {
6 | "ng": "ng",
7 | "start": "ng serve --proxy-config proxy.conf.json",
8 | "build": "ng build",
9 | "test": "ng test",
10 | "lint": "ng lint",
11 | "e2e": "ng e2e",
12 | "compodoc": "compodoc -p tsconfig.compodoc.json",
13 | "compodoc:serve": "compodoc -p tsconfig.compodoc.json -s",
14 | "compodoc:deploy": "npm run compodoc && gh-pages -d documentation",
15 | "affected:apps": "./node_modules/.bin/nx affected apps",
16 | "affected:build": "./node_modules/.bin/nx affected build",
17 | "affected:e2e": "./node_modules/.bin/nx affected e2e",
18 | "format": "echo NOPE ./node_modules/.bin/nx format write",
19 | "format:write": "echo NOPE ./node_modules/.bin/nx format write",
20 | "format:check": "./node_modules/.bin/nx format check",
21 | "update": "./node_modules/.bin/nx update",
22 | "update:check": "./node_modules/.bin/nx update check",
23 | "update:skip": "./node_modules/.bin/nx update skip",
24 | "postinstall": "./node_modules/.bin/nx postinstall"
25 | },
26 | "private": true,
27 | "dependencies": {
28 | "@angular/animations": "5.2.7",
29 | "@angular/common": "5.2.7",
30 | "@angular/compiler": "5.2.7",
31 | "@angular/core": "5.2.7",
32 | "@angular/forms": "5.2.7",
33 | "@angular/platform-browser": "5.2.7",
34 | "@angular/platform-browser-dynamic": "5.2.7",
35 | "@angular/router": "5.2.7",
36 | "@compodoc/compodoc": "^1.0.8",
37 | "@ngrx/effects": "5.1.0",
38 | "@ngrx/router-store": "5.0.1",
39 | "@ngrx/store": "5.1.0",
40 | "@ngrx/store-devtools": "5.1.0",
41 | "@nrwl/nx": "0.8.0",
42 | "classlist.js": "^1.1.20150312",
43 | "core-js": "^2.4.1",
44 | "lodash": "4.17.4",
45 | "materialize-css": "0.98.2",
46 | "moment": "2.21.0",
47 | "rxjs": "^5.5.6",
48 | "web-animations-js": "^2.3.1",
49 | "zone.js": "^0.8.19"
50 | },
51 | "devDependencies": {
52 | "@angular/cli": "1.7.2",
53 | "@angular/compiler-cli": "5.2.7",
54 | "@angular/language-service": "5.2.7",
55 | "@nrwl/schematics": "0.8.0",
56 | "@types/jasmine": "~2.8.3",
57 | "@types/jasminewd2": "~2.0.2",
58 | "@types/node": "~6.0.60",
59 | "codelyzer": "^4.2.1",
60 | "gh-pages": "^1.1.0",
61 | "jasmine-core": "~2.8.0",
62 | "jasmine-spec-reporter": "~4.2.1",
63 | "karma": "~2.0.0",
64 | "karma-chrome-launcher": "~2.2.0",
65 | "karma-coverage-istanbul-reporter": "^1.2.1",
66 | "karma-jasmine": "~1.1.0",
67 | "karma-jasmine-html-reporter": "^0.2.2",
68 | "prettier": "1.10.2",
69 | "protractor": "~5.1.2",
70 | "ts-node": "~4.1.0",
71 | "tslint": "~5.9.1",
72 | "typescript": "2.6.2"
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/libs/retry-loader/src/load-with-retry.ts:
--------------------------------------------------------------------------------
1 | import { Observable } from 'rxjs/Observable';
2 | import { Subject } from 'rxjs/Subject';
3 | import { merge } from 'rxjs/observable/merge';
4 | import { of } from 'rxjs/observable/of';
5 | import { defer } from 'rxjs/observable/defer';
6 | import { timer } from 'rxjs/observable/timer';
7 | import { map, retryWhen, switchMap, tap, filter, delayWhen } from 'rxjs/operators';
8 |
9 | export enum LoadResultStatus {
10 | InProgress,
11 | Retrying,
12 | Waiting,
13 | Success,
14 | Error
15 | }
16 |
17 | export const StatusStrings = [
18 | 'In Progress',
19 | 'Retrying',
20 | 'Waiting to Retry',
21 | 'Success',
22 | 'Error'
23 | ];
24 |
25 | export interface LoadResult {
26 | status: LoadResultStatus;
27 | data?: T;
28 | error?: any;
29 | willRetry?: boolean;
30 | }
31 |
32 | export interface LoadWithRetryOptions {
33 | // To retry once after failure, use attempts=2
34 | attempts?: number;
35 | retryDelayMs?: number;
36 | retryBackoffCoefficient?: number;
37 | retryMaxDelayMs?: number;
38 | }
39 |
40 | const DEFAULT_OPTIONS: LoadWithRetryOptions = {
41 | attempts: 3,
42 | retryDelayMs: 2000,
43 | retryBackoffCoefficient: 1.5,
44 | retryMaxDelayMs: 30000
45 | };
46 |
47 | export function loadWithRetry(
48 | source: Observable,
49 | producer: (key: S) => Observable,
50 | options?: LoadWithRetryOptions
51 | ): Observable> {
52 | options = Object.assign({}, DEFAULT_OPTIONS, options);
53 |
54 | return source.pipe(switchMap(key => {
55 | const statusUpdates = new Subject>();
56 | let attempt = 0;
57 | return merge(
58 | of({ status: LoadResultStatus.InProgress }),
59 | statusUpdates,
60 | defer(() => {
61 | attempt++;
62 | return producer(key);
63 | })
64 | .pipe(retryWhen(errors => errors.pipe(
65 | tap(error =>
66 | statusUpdates.next({
67 | status: LoadResultStatus.Error,
68 | error,
69 | willRetry: attempt < options.attempts
70 | })),
71 | filter(_ => attempt < options.attempts),
72 | tap(_ => statusUpdates.next({ status: LoadResultStatus.Waiting })),
73 | delayWhen(() => retryDelay(options, attempt)),
74 | tap(_ => statusUpdates.next({ status: LoadResultStatus.Retrying }))
75 | )),
76 | map((data: T) => ({ status: LoadResultStatus.Success, data })))
77 | );
78 | }));
79 | }
80 |
81 | function retryDelay(options: LoadWithRetryOptions, attempt: number): Observable {
82 | const jitter = (Math.random() - .5) * options.retryDelayMs * .5;
83 | let delay = options.retryDelayMs * Math.pow(options.retryBackoffCoefficient, attempt - 1) + jitter;
84 | delay = Math.min(delay, options.retryMaxDelayMs);
85 | return timer(delay);
86 | }
87 |
--------------------------------------------------------------------------------
/apps/admin/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | import 'core-js/es6/symbol';
23 | import 'core-js/es6/object';
24 | import 'core-js/es6/function';
25 | import 'core-js/es6/parse-int';
26 | import 'core-js/es6/parse-float';
27 | import 'core-js/es6/number';
28 | import 'core-js/es6/math';
29 | import 'core-js/es6/string';
30 | import 'core-js/es6/date';
31 | import 'core-js/es6/array';
32 | import 'core-js/es6/regexp';
33 | import 'core-js/es6/map';
34 | import 'core-js/es6/weak-map';
35 | import 'core-js/es6/set';
36 |
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | import 'classlist.js'; // Run `npm install --save classlist.js`.
39 |
40 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | import 'core-js/es6/reflect';
42 |
43 | /** Evergreen browsers require these. **/
44 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
45 | import 'core-js/es7/reflect';
46 |
47 | /**
48 | * Required to support Web Animations `@angular/platform-browser/animations`.
49 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
50 | **/
51 | import 'web-animations-js'; // Run `npm install --save web-animations-js`.
52 |
53 | /***************************************************************************************************
54 | * Zone JS is required by Angular itself.
55 | */
56 | import 'zone.js/dist/zone'; // Included with Angular CLI.
57 |
58 | /***************************************************************************************************
59 | * APPLICATION IMPORTS
60 | */
61 |
62 | /**
63 | * Date, currency, decimal and percent pipes.
64 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
65 | */
66 | // import 'intl'; // Run `npm install --save intl`.
67 | /**
68 | * Need to import at least one locale-data with intl.
69 | */
70 | // import 'intl/locale-data/jsonp/en';
71 |
--------------------------------------------------------------------------------
/apps/agent/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | import 'core-js/es6/symbol';
23 | import 'core-js/es6/object';
24 | import 'core-js/es6/function';
25 | import 'core-js/es6/parse-int';
26 | import 'core-js/es6/parse-float';
27 | import 'core-js/es6/number';
28 | import 'core-js/es6/math';
29 | import 'core-js/es6/string';
30 | import 'core-js/es6/date';
31 | import 'core-js/es6/array';
32 | import 'core-js/es6/regexp';
33 | import 'core-js/es6/map';
34 | import 'core-js/es6/weak-map';
35 | import 'core-js/es6/set';
36 |
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | import 'classlist.js'; // Run `npm install --save classlist.js`.
39 |
40 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | import 'core-js/es6/reflect';
42 |
43 | /** Evergreen browsers require these. **/
44 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
45 | import 'core-js/es7/reflect';
46 |
47 | /**
48 | * Required to support Web Animations `@angular/platform-browser/animations`.
49 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
50 | **/
51 | import 'web-animations-js'; // Run `npm install --save web-animations-js`.
52 |
53 | /***************************************************************************************************
54 | * Zone JS is required by Angular itself.
55 | */
56 | import 'zone.js/dist/zone'; // Included with Angular CLI.
57 |
58 | /***************************************************************************************************
59 | * APPLICATION IMPORTS
60 | */
61 |
62 | /**
63 | * Date, currency, decimal and percent pipes.
64 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
65 | */
66 | // import 'intl'; // Run `npm install --save intl`.
67 | /**
68 | * Need to import at least one locale-data with intl.
69 | */
70 | // import 'intl/locale-data/jsonp/en';
71 |
--------------------------------------------------------------------------------
/apps/portal/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | import 'core-js/es6/symbol';
23 | import 'core-js/es6/object';
24 | import 'core-js/es6/function';
25 | import 'core-js/es6/parse-int';
26 | import 'core-js/es6/parse-float';
27 | import 'core-js/es6/number';
28 | import 'core-js/es6/math';
29 | import 'core-js/es6/string';
30 | import 'core-js/es6/date';
31 | import 'core-js/es6/array';
32 | import 'core-js/es6/regexp';
33 | import 'core-js/es6/map';
34 | import 'core-js/es6/weak-map';
35 | import 'core-js/es6/set';
36 |
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | import 'classlist.js'; // Run `npm install --save classlist.js`.
39 |
40 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | import 'core-js/es6/reflect';
42 |
43 | /** Evergreen browsers require these. **/
44 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
45 | import 'core-js/es7/reflect';
46 |
47 | /**
48 | * Required to support Web Animations `@angular/platform-browser/animations`.
49 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
50 | **/
51 | import 'web-animations-js'; // Run `npm install --save web-animations-js`.
52 |
53 | /***************************************************************************************************
54 | * Zone JS is required by Angular itself.
55 | */
56 | import 'zone.js/dist/zone'; // Included with Angular CLI.
57 |
58 | /***************************************************************************************************
59 | * APPLICATION IMPORTS
60 | */
61 |
62 | /**
63 | * Date, currency, decimal and percent pipes.
64 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
65 | */
66 | // import 'intl'; // Run `npm install --save intl`.
67 | /**
68 | * Need to import at least one locale-data with intl.
69 | */
70 | // import 'intl/locale-data/jsonp/en';
71 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/views-filter/views-filter-display.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnDestroy, Output, Input, EventEmitter } from '@angular/core';
2 | import { FormGroup, FormBuilder } from '@angular/forms';
3 | import { Subscription } from 'rxjs/Subscription';
4 | import * as moment from 'moment';
5 | import { mapValues, forEach } from 'lodash';
6 |
7 | @Component({
8 | selector: 'views-filter-display',
9 | templateUrl: './views-filter-display.component.html'
10 | })
11 | export class ViewsFilterDisplayComponent implements OnDestroy {
12 |
13 | filterFormGroup: FormGroup;
14 | @Input() set region(value: string) {
15 | this.filterFormGroup.controls['region'].setValue(value, { emitEvent: false });
16 | };
17 | @Input() set dateTo(value: number) {
18 | this.filterFormGroup.controls['dateTo'].setValue(moment(value).format('YYYY-MM-DD'), { emitEvent: false });
19 | };
20 | @Input() set dateFrom(value: number) {
21 | this.filterFormGroup.controls['dateFrom'].setValue(moment(value).format('YYYY-MM-DD'), { emitEvent: false });
22 | };
23 | @Input() set age(value: boolean[]) {
24 | const names = ['minor', 'adults', 'middleAged', 'retired'];
25 | names.forEach((name, index) =>
26 | this.filterFormGroup.controls[name].setValue(value[index], { emitEvent: false })
27 | );
28 | };
29 |
30 | @Output() regionChange = new EventEmitter();
31 | @Output() dateToChange = new EventEmitter();
32 | @Output() dateFromChange = new EventEmitter();
33 | @Output() ageToggle = new EventEmitter();
34 |
35 | private formSubs: Subscription[] = [];
36 |
37 | constructor(formBuilder: FormBuilder) {
38 | const fields = {
39 | region: makeField([], newRegion => this.regionChange.emit(newRegion)),
40 | dateTo: makeField([], newDateTo => this.dateToChange.emit(moment(newDateTo).valueOf())),
41 | dateFrom: makeField([], newDateFrom => this.dateFromChange.emit(moment(newDateFrom).valueOf())),
42 | minor: makeField([], _newMinor => this.ageToggle.emit(0)),
43 | adults: makeField([], _newAdults => this.ageToggle.emit(1)),
44 | middleAged: makeField([], _newAdults => this.ageToggle.emit(2)),
45 | retired: makeField([], _newRetired => this.ageToggle.emit(3))
46 | };
47 | // Set up the form group
48 | this.filterFormGroup = formBuilder.group(mapValues(fields, f => f.fieldConfig));
49 |
50 | // Observe changes on the form and pass to smart component
51 | forEach(fields, (v, k) => this.formSubs.push(this.filterFormGroup.controls[k].valueChanges
52 | .subscribe(v.changeHandler)));
53 | }
54 |
55 | // Tear down any subscriptions made while setting up the form
56 | ngOnDestroy() {
57 | this.formSubs.forEach(sub => sub.unsubscribe());
58 | }
59 | }
60 |
61 | function makeField(fieldConfig: any[], changeHandler: (any) => void) {
62 | return { fieldConfig, changeHandler };
63 | }
64 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer",
4 | "node_modules/@nrwl/schematics/src/tslint"
5 | ],
6 | "rules": {
7 | "arrow-return-shorthand": true,
8 | "callable-types": true,
9 | "class-name": true,
10 | "forin": true,
11 | "deprecation": {
12 | "severity": "warn"
13 | },
14 | "import-blacklist": [
15 | true,
16 | "rxjs",
17 | "rxjs/Rx"
18 | ],
19 | "interface-over-type-literal": true,
20 | "member-access": false,
21 | "member-ordering": [
22 | true,
23 | {
24 | "order": [
25 | "static-field",
26 | "instance-field",
27 | "static-method",
28 | "instance-method"
29 | ]
30 | }
31 | ],
32 | "no-arg": true,
33 | "no-bitwise": true,
34 | "no-console": [
35 | true,
36 | "debug",
37 | "info",
38 | "time",
39 | "timeEnd",
40 | "trace"
41 | ],
42 | "no-construct": true,
43 | "no-debugger": true,
44 | "no-duplicate-super": true,
45 | "no-empty": false,
46 | "no-empty-interface": true,
47 | "no-eval": true,
48 | "no-inferrable-types": [
49 | true,
50 | "ignore-params"
51 | ],
52 | "no-misused-new": true,
53 | "no-non-null-assertion": true,
54 | "no-shadowed-variable": true,
55 | "no-string-literal": false,
56 | "no-string-throw": true,
57 | "no-switch-case-fall-through": true,
58 | "no-unnecessary-initializer": true,
59 | "no-unused-expression": true,
60 | "no-use-before-declare": true,
61 | "no-var-keyword": true,
62 | "object-literal-sort-keys": false,
63 | "prefer-const": true,
64 | "radix": true,
65 | "triple-equals": [
66 | true,
67 | "allow-null-check"
68 | ],
69 | "unified-signatures": true,
70 | "variable-name": false,
71 | "directive-selector": [
72 | false,
73 | "attribute",
74 | "app",
75 | "camelCase"
76 | ],
77 | "component-selector": [
78 | false,
79 | "element",
80 | "app",
81 | "kebab-case"
82 | ],
83 | "no-output-on-prefix": true,
84 | "use-input-property-decorator": true,
85 | "use-output-property-decorator": true,
86 | "use-host-property-decorator": true,
87 | "no-input-rename": true,
88 | "no-output-rename": true,
89 | "use-life-cycle-interface": true,
90 | "use-pipe-transform-interface": true,
91 | "component-class-suffix": true,
92 | "directive-class-suffix": true,
93 | "nx-enforce-module-boundaries": [
94 | true,
95 | {
96 | "lazyLoad": [
97 | "employee-list",
98 | "employee-management",
99 | "employee-search",
100 | "fruit-basket",
101 | "video-stat-dashboard"
102 | ],
103 | "allow": []
104 | }
105 | ]
106 | }
107 | }
108 |
--------------------------------------------------------------------------------
/servers/node/src/graphql/graphql.ts:
--------------------------------------------------------------------------------
1 | // This is a very basic GraphQL server, serving only a few bits of static data;
2 | // its purpose is to demonstrate how a complex enterprise project will typically
3 | // have various different data services, even serving different protocols.
4 |
5 | import { graphqlExpress, graphiqlExpress } from 'graphql-server-express';
6 | import { makeExecutableSchema } from 'graphql-tools';
7 | import * as bodyParser from 'body-parser';
8 |
9 | const schema = `
10 | type Project {
11 | id: Int!
12 | kind: String!
13 | name: String!
14 | employees: [Employee]
15 | }
16 |
17 | type Employee {
18 | id: Int!
19 | name: String!
20 | ssn: String
21 | projects: [Project]
22 | }
23 |
24 | type Query {
25 | projects: [Project]
26 | project(id: Int!): Project
27 | employees: [Employee]
28 | employee(id: Int!): Employee
29 | }
30 |
31 | schema {
32 | query: Query
33 | }
34 | `;
35 |
36 | class Project {
37 |
38 | }
39 |
40 | const allProjects = [
41 | { id: 200, name: 'Covfefe' },
42 | { id: 201, name: 'Bark' },
43 | { id: 202, name: 'Woof' },
44 | { id: 203, name: 'Meow' },
45 | { id: 204, name: 'Dumpster Fire' },
46 | { id: 205, name: 'Nova Scotia' }
47 | ];
48 |
49 | const employeeProjects = [
50 | { emp: 100, proj: 200 },
51 | { emp: 100, proj: 201 },
52 | { emp: 102, proj: 202 },
53 | { emp: 102, proj: 203 },
54 | ];
55 |
56 | class Employee {
57 | constructor(
58 | public id: number,
59 | public name: string) { }
60 |
61 | projects(): Promise {
62 | console.log('calculating projects for emp ', this.id);
63 | return Promise.resolve(
64 | employeeProjects
65 | .filter(ep => ep.emp === this.id)
66 | .map(ep => ep.proj)
67 | .map(projId => allProjects.find(proj => proj.id === projId))
68 | );
69 | }
70 | }
71 |
72 | const employees = [
73 | new Employee(100, 'Adam'),
74 | new Employee(101, 'Betty'),
75 | new Employee(102, 'Chris'),
76 | new Employee(103, 'David')
77 | ];
78 |
79 | const resolvers = {
80 | Query: {
81 | employees(_obj, _params, _context): Promise {
82 | return Promise.resolve(employees);
83 | },
84 |
85 | employee(_obj, { id }: { id: number }, _context): Promise {
86 | return Promise.resolve(employees.find(p => p.id === id));
87 | },
88 |
89 | projects() {
90 | return allProjects;
91 | },
92 |
93 | project(_obj, { id }: { id: number }, _context): Promise {
94 | return Promise.resolve(allProjects.find(p => p.id === id));
95 | }
96 | }
97 | };
98 |
99 | const jsSchema = makeExecutableSchema({
100 | typeDefs: schema,
101 | resolvers
102 | });
103 |
104 | export function addGraphQL(server) {
105 | server.use('/graphql', bodyParser.json(),
106 | graphqlExpress({
107 | schema: jsSchema
108 | }));
109 |
110 | server.use('/graphiql', graphiqlExpress({
111 | endpointURL: '/graphql',
112 | }));
113 | }
114 |
115 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Angular Enterprise Example
2 |
3 | [](https://travis-ci.org/OasisDigital/scalable-enterprise-angular)
4 |
5 | This is a **work in progress**. It is likely to have many changes over time,
6 | particularly as all of the tools improve.
7 |
8 | Compodoc documentation is available at:
9 |
10 | https://oasisdigital.github.io/angular-enterprise-example/
11 |
12 | ## Goals
13 |
14 | 1. Show an example of a sprawling set of related Angular applications, divided
15 | into various libraries.
16 | 2. Manage complexity, size, and scale.
17 | 3. Provide a way to "bloat up" with numerous randomly generated additional
18 | modules/features/components, up to the size of the largest Angular
19 | applications.
20 | 4. Initially use Angular CLI and Nx.
21 | 5. Later, Bazel.
22 |
23 | ## Contents so far
24 |
25 | * 3 applications, using overlapping sets of...
26 | * 10 libraries
27 | * dependencies between the libraries
28 | * A Node server, which serves REST/JSON, SSE, and GraphQL
29 |
30 | ## Technologies used
31 |
32 | * Angular 5
33 | * Angular CLI
34 | * Nx
35 | * NgRx/Store, Store addons
36 | * RxJS
37 | * Lodash, Moment
38 | * REST
39 | * SSE (Server Sent Events)
40 | * GraphQL
41 |
42 | ### Example application(s)
43 |
44 | This set of example applications/features use Nx to wire up inter-project
45 | dependencies during development. Following the Nx convention, they are divided
46 | into "apps" and "libs".
47 |
48 | There is a many-to-many relationship between applications and modules, and
49 | modules can use other modules.
50 |
51 | In addition, there is a "servers" directory intended to contain one or more
52 | server-side example code bases that support the Angular example. These are not
53 | managed using Nx, which is Angular specific. However, in a sprawling set of
54 | related servers and libraries, Lerna could be used too much the same effect.
55 |
56 | The example applications are not very complex - certainly not complex enough to
57 | warrant the amount of complexity used to build it. Real application of this
58 | modest complexity could easily be written as a single project (each).
59 |
60 | Still, the example applications reuse blocks of functionality, so they show the
61 | value of this multi-package approach.
62 |
63 | There are three application to run:
64 |
65 | * Admin - bundles 5 feature modules
66 | * Agent - bundles 2 feature module
67 | * Portal - bundles 1 feature module
68 |
69 | To understand how they are cross wired, look at the tsconfig.json file for each.
70 |
71 | Two of the modules use ngrx/store for state management, With appropriate lazy
72 | loading of feature modules.
73 |
74 | ### Running
75 |
76 | In one window:
77 |
78 | ```
79 | yarn
80 | yarn start
81 | # add --app=agent or --app=portal if desired
82 | ```
83 |
84 | In another window:
85 |
86 | ```
87 | cd servers/node
88 | yarn
89 | yarn start
90 | ```
91 |
92 | ## Contact us
93 |
94 | Main author: [Kyle Cordes](http://kylecordes.com/)
95 |
96 | Much help from the team at: [Oasis Digital](https://oasisdigital.com/)
97 |
98 | ... who teach [Angular Boot Camp](https://angularbootcamp.com/)
99 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/video-stat-dashboard.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule, InjectionToken } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { FormsModule, ReactiveFormsModule } from '@angular/forms';
4 | import { RouterModule } from '@angular/router';
5 | import { StoreModule, ActionReducerMap } from '@ngrx/store';
6 | import { EffectsModule } from '@ngrx/effects';
7 |
8 | import { AgeRangeModule } from '@enterprise-example/age-range';
9 |
10 | import { AppService } from './services/app.service';
11 | import { videoStatsReducerMap } from './+state/video-stats.reducer';
12 | import { VideoStats } from './+state/video-stats.interfaces';
13 | import { VideoStatsEffects } from './+state/video-stats.effects';
14 | import { DashboardComponent } from './dashboard.component';
15 | import { DashboardService } from './services/dashboard.service';
16 | import { ViewsFilterService } from './services/views-filter.service';
17 | import { ViewsFilterComponent } from './views-filter/views-filter.component';
18 | import { ViewsFilterDisplayComponent } from './views-filter/views-filter-display.component';
19 | import { VideoContainerComponent } from './video-container/video-container.component';
20 | import { VideoContainerDisplayComponent } from './video-container/video-container-display.component';
21 | import { ViewsBreakdownComponent } from './views-breakdown/views-breakdown.component';
22 | import { ViewsBreakdownDisplayComponent } from './views-breakdown/views-breakdown-display.component';
23 | import { ViewsBreakdownService } from './services/views-breakdown.service';
24 | import { TopListComponent } from './top-list/top-list.component';
25 | import { TopListDisplayComponent } from './top-list/top-list-display.component';
26 | import { TopListService } from './services/top-list.service';
27 | import { FilterStateDisplayComponent } from './views-breakdown/filter-state-display.component';
28 |
29 | // The verbosity that replaced combineReducers is documented here:
30 | // https://github.com/ngrx/platform/blob/master/docs/store/api.md#injecting-reducers
31 |
32 | export const FEATURE_REDUCER_TOKEN =
33 | new InjectionToken>('Feature Reducers');
34 |
35 | export function getReducers(): ActionReducerMap {
36 | return videoStatsReducerMap;
37 | }
38 | @NgModule({
39 | declarations: [
40 | DashboardComponent,
41 | ViewsFilterComponent,
42 | ViewsFilterDisplayComponent,
43 | VideoContainerComponent,
44 | VideoContainerDisplayComponent,
45 | ViewsBreakdownComponent,
46 | ViewsBreakdownDisplayComponent,
47 | TopListComponent,
48 | TopListDisplayComponent,
49 | FilterStateDisplayComponent,
50 | ],
51 | imports: [
52 | CommonModule,
53 | FormsModule,
54 | ReactiveFormsModule,
55 | AgeRangeModule,
56 | RouterModule.forChild([
57 | { path: '', pathMatch: 'full', component: DashboardComponent }
58 | ]),
59 | StoreModule.forFeature('videoStats', FEATURE_REDUCER_TOKEN),
60 | EffectsModule.forFeature([VideoStatsEffects])
61 | ],
62 | providers: [
63 | {
64 | provide: FEATURE_REDUCER_TOKEN,
65 | useFactory: getReducers
66 | },
67 | AppService,
68 | TopListService,
69 | ViewsFilterService,
70 | DashboardService,
71 | ViewsBreakdownService,
72 | VideoStatsEffects
73 | ]
74 | })
75 | export class VideoStatDashboardModule { }
76 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/services/mock-video-list.ts:
--------------------------------------------------------------------------------
1 | import { Video } from '../+state/video-stats.interfaces';
2 |
3 | export const VIDEO_LIST: Video[] = [
4 | {
5 | 'title': 'video 1',
6 | 'author': 'Video Author 1',
7 | 'id': 'JPuqluYYa-o',
8 | 'viewDetails': [
9 | {
10 | 'age': 17,
11 | 'region': 'North America',
12 | 'date': '2016-03-23'
13 | }, {
14 | 'age': 27,
15 | 'region': 'North America',
16 | 'date': '2016-03-23'
17 | }, {
18 | 'age': 37,
19 | 'region': 'North America',
20 | 'date': '2016-03-23'
21 | }, {
22 | 'age': 47,
23 | 'region': 'Europe',
24 | 'date': '2016-03-24'
25 | }, {
26 | 'age': 37,
27 | 'region': 'North America',
28 | 'date': '2016-03-24'
29 | }, {
30 | 'age': 17,
31 | 'region': 'North America',
32 | 'date': '2016-03-25'
33 | }
34 | ]
35 | },
36 | {
37 | 'title': 'video 2',
38 | 'author': 'Video Author 2',
39 | 'id': 'CkK1BT6mMAw',
40 | 'viewDetails': [
41 | {
42 | 'age': 36,
43 | 'region': 'North America',
44 | 'date': '2016-06-23'
45 | }, {
46 | 'age': 30,
47 | 'region': 'North America',
48 | 'date': '2016-06-23'
49 | }, {
50 | 'age': 54,
51 | 'region': 'North America',
52 | 'date': '2016-07-23'
53 | }, {
54 | 'age': 43,
55 | 'region': 'Europe',
56 | 'date': '2016-0-24'
57 | }, {
58 | 'age': 32,
59 | 'region': 'North America',
60 | 'date': '2016-08-24'
61 | }, {
62 | 'age': 32,
63 | 'region': 'North America',
64 | 'date': '2016-08-25'
65 | }
66 | ]
67 | },
68 | {
69 | 'title': 'video 3',
70 | 'author': 'Video Author 3',
71 | 'id': 'eBLTz8QRg4Q',
72 | 'viewDetails': [
73 | {
74 | 'age': 17,
75 | 'region': 'North America',
76 | 'date': '2016-03-23'
77 | }, {
78 | 'age': 27,
79 | 'region': 'North America',
80 | 'date': '2016-03-23'
81 | }, {
82 | 'age': 37,
83 | 'region': 'North America',
84 | 'date': '2016-03-23'
85 | }, {
86 | 'age': 47,
87 | 'region': 'Europe',
88 | 'date': '2016-03-24'
89 | }, {
90 | 'age': 37,
91 | 'region': 'North America',
92 | 'date': '2016-03-24'
93 | }, {
94 | 'age': 17,
95 | 'region': 'North America',
96 | 'date': '2016-03-25'
97 | }
98 | ]
99 | },
100 | {
101 | 'title': 'video 4',
102 | 'author': 'Video Author 4',
103 | 'id': '4ENpTiHKyi4',
104 | 'viewDetails': [
105 | {
106 | 'age': 36,
107 | 'region': 'North America',
108 | 'date': '2016-06-23'
109 | }, {
110 | 'age': 30,
111 | 'region': 'North America',
112 | 'date': '2016-06-23'
113 | }, {
114 | 'age': 54,
115 | 'region': 'North America',
116 | 'date': '2016-07-23'
117 | }, {
118 | 'age': 43,
119 | 'region': 'Europe',
120 | 'date': '2016-0-24'
121 | }, {
122 | 'age': 32,
123 | 'region': 'North America',
124 | 'date': '2016-08-24'
125 | }, {
126 | 'age': 32,
127 | 'region': 'North America',
128 | 'date': '2016-08-25'
129 | }
130 | ]
131 | },
132 | {
133 | 'title': 'video 5',
134 | 'author': 'Video Author 5',
135 | 'id': 'NQOCQq6PLQg',
136 | 'viewDetails': [
137 | {
138 | 'age': 17,
139 | 'region': 'North America',
140 | 'date': '2016-03-23'
141 | }, {
142 | 'age': 27,
143 | 'region': 'North America',
144 | 'date': '2016-03-23'
145 | }, {
146 | 'age': 37,
147 | 'region': 'North America',
148 | 'date': '2016-03-23'
149 | }, {
150 | 'age': 47,
151 | 'region': 'Europe',
152 | 'date': '2016-03-24'
153 | }, {
154 | 'age': 37,
155 | 'region': 'North America',
156 | 'date': '2016-03-24'
157 | }, {
158 | 'age': 17,
159 | 'region': 'North America',
160 | 'date': '2016-03-25'
161 | }
162 | ]
163 | }
164 | ];
165 |
--------------------------------------------------------------------------------
/libs/video-stat-dashboard/src/services/views-breakdown.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Store } from '@ngrx/store';
3 | import { countBy, forEach, maxBy } from 'lodash';
4 | import * as moment from 'moment';
5 | import { combineLatest } from 'rxjs/observable/combineLatest'
6 |
7 | import { ageRanges } from '@enterprise-example/age-range';
8 |
9 | import { VideoStatsState } from '../+state/video-stats.interfaces';
10 | import { View, ViewsFilterState } from '../+state/video-stats.interfaces';
11 | import { DashboardService } from './dashboard.service';
12 | import { ViewsFilterService } from './views-filter.service';
13 |
14 | const GRAPH_HEIGHT = 200;
15 | const GRAPH_WIDTH = 500;
16 |
17 | export class Rect {
18 | x: number;
19 | y: number;
20 | width: number;
21 | height: number;
22 |
23 | constructor(public value: any, public count: number) { }
24 | }
25 |
26 | export class GraphData {
27 | rectList: Rect[];
28 | width: number;
29 | height: number;
30 |
31 | constructor(public xAxis: string, views: View[], viewsFilter: ViewsFilterState) {
32 | this.height = GRAPH_HEIGHT;
33 | this.width = GRAPH_WIDTH;
34 | this.rectList = this.calcRectList(views, viewsFilter);
35 | }
36 |
37 | // In order to create the bars in the bar chart we need to perform the following
38 | // 1. Filter any values based on user input
39 | // 2. Identify all of the unique values associated with the xAxis
40 | // 3. Count the number of views associated with each values
41 | // 4. Determine the largest of these categories
42 | // 5. Scale all counts based on largest and the graph height
43 | // 6. Divide the width of the graph amongst the number of unique values
44 | // 7. Assign widths and x positions accordingly
45 | calcRectList(views: View[], viewsFilter: ViewsFilterState) {
46 | const rects: Rect[] = [];
47 | const filteredViews = filterViews(views, viewsFilter);
48 | if (filteredViews.length) {
49 | const groups = countBy(filteredViews, this.xAxis);
50 | forEach(groups, (value, key) => {
51 | rects.push(new Rect(key, value));
52 | });
53 | // rects now have value and count
54 | const maxValue = maxBy(rects, 'count').count;
55 | const width = (GRAPH_WIDTH / rects.length) - 1;
56 | rects.forEach((rect, index) => {
57 | rect.height = calcHeight(maxValue, rect.count, GRAPH_HEIGHT);
58 | rect.y = GRAPH_HEIGHT - rect.height;
59 | rect.width = width;
60 | rect.x = index * width;
61 | });
62 | }
63 | return rects;
64 | }
65 | }
66 |
67 | @Injectable()
68 | export class ViewsBreakdownService {
69 |
70 | constructor(private store: Store,
71 | private dashboardService: DashboardService,
72 | private viewsFilterService: ViewsFilterService) { }
73 |
74 | getBreakdowns() {
75 | return this.store.select(state => state.videoStats.viewsBreakdown
76 | && state.videoStats.viewsBreakdown.selectedAxis);
77 | }
78 |
79 | getGraphData() {
80 | const currentVideo = this.dashboardService.currentVideo;
81 | const viewsFilter = this.viewsFilterService.filterState;
82 | return combineLatest(currentVideo, this.getBreakdowns(), viewsFilter,
83 | (cv, breakdowns, viewsFilterState) => {
84 | const graphs: GraphData[] = [];
85 | if (cv && cv.viewDetails) {
86 | breakdowns.forEach(breakDown => graphs.push(new GraphData(breakDown, cv.viewDetails, viewsFilterState)));
87 | }
88 | return graphs;
89 | });
90 | }
91 |
92 | addNewGraphAxis(axis: string) {
93 | this.store.dispatch({ type: 'ADD_NEW_GRAPH_AXIS', payload: axis });
94 | }
95 |
96 | removeGroup(group: number) {
97 | this.store.dispatch({ type: 'TOGGLE_AGE', payload: group });
98 | }
99 | }
100 |
101 | function calcHeight(maxValue: number, value: number, graphHeight: number) {
102 | return Math.floor(value / maxValue * graphHeight);
103 | }
104 |
105 | function filterViews(views: View[], viewsFilter: ViewsFilterState) {
106 | const fromDate = moment(viewsFilter.dateFrom);
107 | const toDate = moment(viewsFilter.dateTo);
108 |
109 | const filteredResults = views.filter(view => {
110 | // Age range
111 | if (!ageRanges.find((range, index) =>
112 | view.age >= range.lower && view.age < range.upper && viewsFilter.ageRanges[index])) {
113 | return false;
114 | }
115 |
116 | // Check the region
117 | if (viewsFilter.region !== view.region && viewsFilter.region !== 'All') {
118 | return false;
119 | }
120 |
121 | // Check the view date
122 | const videoDate = moment(view.date);
123 | return videoDate.isBetween(fromDate, toDate);
124 | });
125 | return filteredResults;
126 | }
127 |
--------------------------------------------------------------------------------
/.angular-cli.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@nrwl/schematics/src/schema.json",
3 | "project": {
4 | "name": "enterprise-example",
5 | "npmScope": "enterprise-example",
6 | "latestMigration": "20180227-cleanup-scripts"
7 | },
8 | "e2e": {
9 | "protractor": {
10 | "config": "./protractor.conf.js"
11 | }
12 | },
13 | "lint": [
14 | {
15 | "project": "./tsconfig.spec.json",
16 | "exclude": "**/node_modules/**"
17 | },
18 | {
19 | "project": "apps/admin/src/tsconfig.app.json",
20 | "exclude": "**/node_modules/**"
21 | },
22 | {
23 | "project": "apps/admin/e2e/tsconfig.e2e.json",
24 | "exclude": "**/node_modules/**"
25 | },
26 | {
27 | "project": "apps/agent/src/tsconfig.app.json",
28 | "exclude": "**/node_modules/**"
29 | },
30 | {
31 | "project": "apps/agent/e2e/tsconfig.e2e.json",
32 | "exclude": "**/node_modules/**"
33 | },
34 | {
35 | "project": "apps/portal/src/tsconfig.app.json",
36 | "exclude": "**/node_modules/**"
37 | },
38 | {
39 | "project": "apps/portal/e2e/tsconfig.e2e.json",
40 | "exclude": "**/node_modules/**"
41 | }
42 | ],
43 | "test": {
44 | "karma": {
45 | "config": "./karma.conf.js"
46 | }
47 | },
48 | "apps": [
49 | {
50 | "name": "admin",
51 | "root": "apps/admin/src",
52 | "outDir": "dist/apps/admin",
53 | "assets": [
54 | "assets",
55 | "favicon.ico"
56 | ],
57 | "index": "index.html",
58 | "main": "main.ts",
59 | "polyfills": "polyfills.ts",
60 | "test": "../../../test.js",
61 | "tsconfig": "tsconfig.app.json",
62 | "testTsconfig": "../../../tsconfig.spec.json",
63 | "prefix": "app",
64 | "styles": [
65 | "../../../node_modules/materialize-css/dist/css/materialize.css",
66 | "styles.css"
67 | ],
68 | "scripts": [],
69 | "environmentSource": "environments/environment.ts",
70 | "environments": {
71 | "dev": "environments/environment.ts",
72 | "prod": "environments/environment.prod.ts"
73 | }
74 | },
75 | {
76 | "name": "agent",
77 | "root": "apps/agent/src",
78 | "outDir": "dist/apps/agent",
79 | "assets": [
80 | "assets",
81 | "favicon.ico"
82 | ],
83 | "index": "index.html",
84 | "main": "main.ts",
85 | "polyfills": "polyfills.ts",
86 | "test": "../../../test.js",
87 | "tsconfig": "tsconfig.app.json",
88 | "testTsconfig": "../../../tsconfig.spec.json",
89 | "prefix": "app",
90 | "styles": [
91 | "../../../node_modules/materialize-css/dist/css/materialize.css",
92 | "styles.css"
93 | ],
94 | "scripts": [],
95 | "environmentSource": "environments/environment.ts",
96 | "environments": {
97 | "dev": "environments/environment.ts",
98 | "prod": "environments/environment.prod.ts"
99 | }
100 | },
101 | {
102 | "name": "portal",
103 | "root": "apps/portal/src",
104 | "outDir": "dist/apps/portal",
105 | "assets": [
106 | "assets",
107 | "favicon.ico"
108 | ],
109 | "index": "index.html",
110 | "main": "main.ts",
111 | "polyfills": "polyfills.ts",
112 | "test": "../../../test.js",
113 | "tsconfig": "tsconfig.app.json",
114 | "testTsconfig": "../../../tsconfig.spec.json",
115 | "prefix": "app",
116 | "styles": [
117 | "../../../node_modules/materialize-css/dist/css/materialize.css",
118 | "styles.css"
119 | ],
120 | "scripts": [],
121 | "environmentSource": "environments/environment.ts",
122 | "environments": {
123 | "dev": "environments/environment.ts",
124 | "prod": "environments/environment.prod.ts"
125 | }
126 | },
127 | {
128 | "name": "age-range",
129 | "root": "libs/age-range/src",
130 | "test": "../../../test.js",
131 | "appRoot": ""
132 | },
133 | {
134 | "name": "app-schema",
135 | "root": "libs/app-schema/src",
136 | "test": "../../../test.js",
137 | "appRoot": ""
138 | },
139 | {
140 | "name": "employee-api",
141 | "root": "libs/employee-api/src",
142 | "test": "../../../test.js",
143 | "appRoot": ""
144 | },
145 | {
146 | "name": "employee-display",
147 | "root": "libs/employee-display/src",
148 | "test": "../../../test.js",
149 | "appRoot": ""
150 | },
151 | {
152 | "name": "employee-list",
153 | "root": "libs/employee-list/src",
154 | "test": "../../../test.js",
155 | "appRoot": ""
156 | },
157 | {
158 | "name": "employee-management",
159 | "root": "libs/employee-management/src",
160 | "test": "../../../test.js",
161 | "appRoot": ""
162 | },
163 | {
164 | "name": "employee-search",
165 | "root": "libs/employee-search/src",
166 | "test": "../../../test.js",
167 | "appRoot": ""
168 | },
169 | {
170 | "name": "fruit-basket",
171 | "root": "libs/fruit-basket/src",
172 | "test": "../../../test.js",
173 | "appRoot": ""
174 | },
175 | {
176 | "name": "retry-loader",
177 | "root": "libs/retry-loader/src",
178 | "test": "../../../test.js",
179 | "appRoot": ""
180 | },
181 | {
182 | "name": "video-stat-dashboard",
183 | "root": "libs/video-stat-dashboard/src",
184 | "test": "../../../test.js",
185 | "appRoot": ""
186 | },
187 | {
188 | "name": "$workspaceRoot",
189 | "root": ".",
190 | "appRoot": ""
191 | }
192 | ],
193 | "defaults": {
194 | "schematics": {
195 | "collection": "@nrwl/schematics"
196 | },
197 | "styleExt": "css",
198 | "component": {}
199 | },
200 | "warnings": {
201 | "typescriptMismatch": false
202 | }
203 | }
204 |
--------------------------------------------------------------------------------
/servers/node/db.json:
--------------------------------------------------------------------------------
1 | {
2 | "companies": [
3 | {
4 | "name": "Acme Inc",
5 | "phone": "555-555-5555",
6 | "address": "123 Main St"
7 | },
8 | {
9 | "name": "USR",
10 | "phone": "101-010-0001",
11 | "address": "3 Laws St"
12 | },
13 | {
14 | "name": "Umbrella Corp.",
15 | "phone": "999-999-9999",
16 | "address": "9 Street"
17 | }
18 | ],
19 | "employees": [
20 | {
21 | "id": 1,
22 | "first_name": "Henry",
23 | "last_name": "Holmes",
24 | "email": "hholmes0@goodreads.com",
25 | "hours_worked": 29,
26 | "hourly_wage": 19
27 | },
28 | {
29 | "id": 2,
30 | "first_name": "Harold",
31 | "last_name": "Cox",
32 | "email": "hcox1@who.int",
33 | "hours_worked": 18,
34 | "hourly_wage": 11
35 | },
36 | {
37 | "id": 3,
38 | "first_name": "Brian",
39 | "last_name": "Garcia",
40 | "email": "bgarcia2@addthis.com",
41 | "hours_worked": 4,
42 | "hourly_wage": 17
43 | },
44 | {
45 | "id": 4,
46 | "first_name": "Patricia",
47 | "last_name": "Young",
48 | "email": "pyoung3@wix.com",
49 | "hours_worked": 47,
50 | "hourly_wage": 12
51 | },
52 | {
53 | "id": 5,
54 | "first_name": "Jose",
55 | "last_name": "Jacobs",
56 | "email": "jjacobs4@prweb.com",
57 | "hours_worked": 45,
58 | "hourly_wage": 12
59 | },
60 | {
61 | "first_name": "Rachel",
62 | "last_name": "Carter",
63 | "email": "rcarter5@t.com",
64 | "hours_worked": 34,
65 | "hourly_wage": 17,
66 | "id": 6
67 | },
68 | {
69 | "id": 7,
70 | "first_name": "Ashley",
71 | "last_name": "Reyes",
72 | "email": "areyes6@bing.com",
73 | "hours_worked": 60,
74 | "hourly_wage": 9
75 | },
76 | {
77 | "id": 8,
78 | "first_name": "Antonio",
79 | "last_name": "Cruz",
80 | "email": "acruz7@jigsy.com",
81 | "hours_worked": 38,
82 | "hourly_wage": 10
83 | },
84 | {
85 | "id": 9,
86 | "first_name": "Randy",
87 | "last_name": "Cook",
88 | "email": "rcook8@state.tx.us",
89 | "hours_worked": 22,
90 | "hourly_wage": 15
91 | },
92 | {
93 | "id": 10,
94 | "first_name": "Phillip",
95 | "last_name": "Long",
96 | "email": "plong9@un.org",
97 | "hours_worked": 39,
98 | "hourly_wage": 19
99 | },
100 | {
101 | "id": 11,
102 | "first_name": "Andrea",
103 | "last_name": "Simpson",
104 | "email": "asimpsona@is.gd",
105 | "hours_worked": 4,
106 | "hourly_wage": 10
107 | },
108 | {
109 | "id": 12,
110 | "first_name": "Tina",
111 | "last_name": "Rice",
112 | "email": "triceb@wisc.edu",
113 | "hours_worked": 18,
114 | "hourly_wage": 20
115 | },
116 | {
117 | "id": 13,
118 | "first_name": "Larry",
119 | "last_name": "Foster",
120 | "email": "lfosterc@wikia.com",
121 | "hours_worked": 26,
122 | "hourly_wage": 19
123 | },
124 | {
125 | "id": 14,
126 | "first_name": "Philip",
127 | "last_name": "Hall",
128 | "email": "phalld@vkontakte.ru",
129 | "hours_worked": 32,
130 | "hourly_wage": 10
131 | },
132 | {
133 | "id": 15,
134 | "first_name": "Annie",
135 | "last_name": "Gilbert",
136 | "email": "agilberte@ucsd.edu",
137 | "hours_worked": 57,
138 | "hourly_wage": 20
139 | },
140 | {
141 | "id": 16,
142 | "first_name": "Wanda",
143 | "last_name": "Myers",
144 | "email": "wmyersf@gravatar.com",
145 | "hours_worked": 14,
146 | "hourly_wage": 12
147 | },
148 | {
149 | "id": 17,
150 | "first_name": "Robert",
151 | "last_name": "Palmer",
152 | "email": "rpalmerg@usnews.com",
153 | "hours_worked": 30,
154 | "hourly_wage": 12
155 | },
156 | {
157 | "id": 18,
158 | "first_name": "Judith",
159 | "last_name": "King",
160 | "email": "jkingh@auda.org.au",
161 | "hours_worked": 39,
162 | "hourly_wage": 14
163 | },
164 | {
165 | "id": 19,
166 | "first_name": "Sarah",
167 | "last_name": "Mendoza",
168 | "email": "smendozai@fc2.com",
169 | "hours_worked": 16,
170 | "hourly_wage": 20
171 | },
172 | {
173 | "id": 20,
174 | "first_name": "Marilyn",
175 | "last_name": "Watson",
176 | "email": "mwatsonj@google.com.hk",
177 | "hours_worked": 19,
178 | "hourly_wage": 19
179 | },
180 | {
181 | "id": 21,
182 | "first_name": "Kelly",
183 | "last_name": "Payne",
184 | "email": "kpaynek@bluehost.com",
185 | "hours_worked": 12,
186 | "hourly_wage": 16
187 | },
188 | {
189 | "id": 22,
190 | "first_name": "Craig",
191 | "last_name": "Willis",
192 | "email": "cwillisl@google.pl",
193 | "hours_worked": 43,
194 | "hourly_wage": 13
195 | },
196 | {
197 | "id": 23,
198 | "first_name": "Samuel",
199 | "last_name": "Russell",
200 | "email": "srussellm@pinterest.com",
201 | "hours_worked": 41,
202 | "hourly_wage": 8
203 | },
204 | {
205 | "id": 24,
206 | "first_name": "Andrew",
207 | "last_name": "Willis",
208 | "email": "awillisn@deviantart.com",
209 | "hours_worked": 48,
210 | "hourly_wage": 14
211 | },
212 | {
213 | "id": 25,
214 | "first_name": "Ann",
215 | "last_name": "Davis",
216 | "email": "adaviso@merriam-webster.com",
217 | "hours_worked": 25,
218 | "hourly_wage": 13
219 | },
220 | {
221 | "id": 26,
222 | "first_name": "Katherine",
223 | "last_name": "Martinez",
224 | "email": "kmartinezp@npr.org",
225 | "hours_worked": 42,
226 | "hourly_wage": 18
227 | },
228 | {
229 | "id": 27,
230 | "first_name": "Larry",
231 | "last_name": "Hanson",
232 | "email": "lhansonq@google.ru",
233 | "hours_worked": 23,
234 | "hourly_wage": 17
235 | },
236 | {
237 | "id": 28,
238 | "first_name": "David",
239 | "last_name": "Collins",
240 | "email": "dcollinsr@deliciousdays.com",
241 | "hours_worked": 19,
242 | "hourly_wage": 13
243 | },
244 | {
245 | "id": 29,
246 | "first_name": "Marilyn",
247 | "last_name": "Fernandez",
248 | "email": "mfernandezs@xrea.com",
249 | "hours_worked": 3,
250 | "hourly_wage": 20
251 | },
252 | {
253 | "id": 30,
254 | "first_name": "Julia",
255 | "last_name": "Mendoza",
256 | "email": "jmendozat@chron.com",
257 | "hours_worked": 31,
258 | "hourly_wage": 18
259 | },
260 | {
261 | "id": 31,
262 | "first_name": "Anna",
263 | "last_name": "Bryant",
264 | "email": "abryantu@de.vu",
265 | "hours_worked": 56,
266 | "hourly_wage": 16
267 | },
268 | {
269 | "id": 32,
270 | "first_name": "Brandon",
271 | "last_name": "Ellis",
272 | "email": "bellisv@biglobe.ne.jp",
273 | "hours_worked": 36,
274 | "hourly_wage": 8
275 | },
276 | {
277 | "id": 33,
278 | "first_name": "Sharon",
279 | "last_name": "Hunt",
280 | "email": "shuntw@printfriendly.com",
281 | "hours_worked": 41,
282 | "hourly_wage": 13
283 | },
284 | {
285 | "id": 34,
286 | "first_name": "Juan",
287 | "last_name": "Mills",
288 | "email": "jmillsx@miibeian.gov.cn",
289 | "hours_worked": 11,
290 | "hourly_wage": 11
291 | },
292 | {
293 | "id": 35,
294 | "first_name": "Diane",
295 | "last_name": "Murray",
296 | "email": "dmurrayy@tmall.com",
297 | "hours_worked": 6,
298 | "hourly_wage": 10
299 | },
300 | {
301 | "id": 36,
302 | "first_name": "Harry",
303 | "last_name": "Coleman",
304 | "email": "hcolemanz@ocn.ne.jp",
305 | "hours_worked": 21,
306 | "hourly_wage": 8
307 | },
308 | {
309 | "id": 37,
310 | "first_name": "Michelle",
311 | "last_name": "Hunter",
312 | "email": "mhunter10@ebay.co.uk",
313 | "hours_worked": 59,
314 | "hourly_wage": 19
315 | },
316 | {
317 | "id": 38,
318 | "first_name": "Linda",
319 | "last_name": "Carter",
320 | "email": "lcarter11@cnet.com",
321 | "hours_worked": 38,
322 | "hourly_wage": 17
323 | },
324 | {
325 | "id": 39,
326 | "first_name": "Sean",
327 | "last_name": "Stephens",
328 | "email": "sstephens12@cloudflare.com",
329 | "hours_worked": 43,
330 | "hourly_wage": 19
331 | },
332 | {
333 | "id": 40,
334 | "first_name": "Angela",
335 | "last_name": "Barnes",
336 | "email": "abarnes13@1und1.de",
337 | "hours_worked": 35,
338 | "hourly_wage": 8
339 | },
340 | {
341 | "id": 41,
342 | "first_name": "Johnny",
343 | "last_name": "Mendoza",
344 | "email": "jmendoza14@eventbrite.com",
345 | "hours_worked": 52,
346 | "hourly_wage": 16
347 | },
348 | {
349 | "id": 42,
350 | "first_name": "Jean",
351 | "last_name": "Richards",
352 | "email": "jrichards15@earthlink.net",
353 | "hours_worked": 47,
354 | "hourly_wage": 18
355 | },
356 | {
357 | "id": 43,
358 | "first_name": "Timothy",
359 | "last_name": "Sims",
360 | "email": "tsims16@wsj.com",
361 | "hours_worked": 59,
362 | "hourly_wage": 17
363 | },
364 | {
365 | "id": 44,
366 | "first_name": "Diana",
367 | "last_name": "Simpson",
368 | "email": "dsimpson17@foxnews.com",
369 | "hours_worked": 46,
370 | "hourly_wage": 8
371 | },
372 | {
373 | "id": 45,
374 | "first_name": "Eric",
375 | "last_name": "Richards",
376 | "email": "erichards18@trellian.com",
377 | "hours_worked": 1,
378 | "hourly_wage": 18
379 | },
380 | {
381 | "id": 46,
382 | "first_name": "Diane",
383 | "last_name": "Hudson",
384 | "email": "dhudson19@blogspot.com",
385 | "hours_worked": 52,
386 | "hourly_wage": 15
387 | },
388 | {
389 | "id": 47,
390 | "first_name": "Paula",
391 | "last_name": "Dunn",
392 | "email": "pdunn1a@odnoklassniki.ru",
393 | "hours_worked": 4,
394 | "hourly_wage": 8
395 | },
396 | {
397 | "id": 48,
398 | "first_name": "Shirley",
399 | "last_name": "Watson",
400 | "email": "swatson1b@hatena.ne.jp",
401 | "hours_worked": 45,
402 | "hourly_wage": 11
403 | },
404 | {
405 | "id": 49,
406 | "first_name": "Alan",
407 | "last_name": "Willis",
408 | "email": "awillis1c@hubpages.com",
409 | "hours_worked": 52,
410 | "hourly_wage": 18
411 | },
412 | {
413 | "id": 50,
414 | "first_name": "Diane",
415 | "last_name": "Wright",
416 | "email": "dwright1d@paginegialle.it",
417 | "hours_worked": 56,
418 | "hourly_wage": 15
419 | },
420 | {
421 | "id": 51,
422 | "first_name": "Helen",
423 | "last_name": "Lewis",
424 | "email": "hlewis1e@scientificamerican.com",
425 | "hours_worked": 30,
426 | "hourly_wage": 10
427 | },
428 | {
429 | "id": 52,
430 | "first_name": "Sharon",
431 | "last_name": "Frazier",
432 | "email": "sfrazier1f@seattletimes.com",
433 | "hours_worked": 26,
434 | "hourly_wage": 8
435 | },
436 | {
437 | "id": 53,
438 | "first_name": "Theresa",
439 | "last_name": "Day",
440 | "email": "tday1g@topsy.com",
441 | "hours_worked": 56,
442 | "hourly_wage": 13
443 | },
444 | {
445 | "id": 54,
446 | "first_name": "Amy",
447 | "last_name": "Myers",
448 | "email": "amyers1h@feedburner.com",
449 | "hours_worked": 39,
450 | "hourly_wage": 20
451 | },
452 | {
453 | "id": 55,
454 | "first_name": "Jesse",
455 | "last_name": "Palmer",
456 | "email": "jpalmer1i@behance.net",
457 | "hours_worked": 34,
458 | "hourly_wage": 12
459 | },
460 | {
461 | "id": 56,
462 | "first_name": "Janice",
463 | "last_name": "Kennedy",
464 | "email": "jkennedy1j@so-net.ne.jp",
465 | "hours_worked": 15,
466 | "hourly_wage": 13
467 | },
468 | {
469 | "id": 57,
470 | "first_name": "Gerald",
471 | "last_name": "Lawrence",
472 | "email": "glawrence1k@adobe.com",
473 | "hours_worked": 30,
474 | "hourly_wage": 8
475 | },
476 | {
477 | "id": 58,
478 | "first_name": "Richard",
479 | "last_name": "Collins",
480 | "email": "rcollins1l@feedburner.com",
481 | "hours_worked": 56,
482 | "hourly_wage": 19
483 | },
484 | {
485 | "id": 59,
486 | "first_name": "Katherine",
487 | "last_name": "Garcia",
488 | "email": "kgarcia1m@goodreads.com",
489 | "hours_worked": 23,
490 | "hourly_wage": 9
491 | },
492 | {
493 | "id": 60,
494 | "first_name": "Ruby",
495 | "last_name": "Phillips",
496 | "email": "rphillips1n@shop-pro.jp",
497 | "hours_worked": 9,
498 | "hourly_wage": 8
499 | },
500 | {
501 | "id": 61,
502 | "first_name": "Judy",
503 | "last_name": "Young",
504 | "email": "jyoung1o@globo.com",
505 | "hours_worked": 7,
506 | "hourly_wage": 12
507 | },
508 | {
509 | "id": 62,
510 | "first_name": "William",
511 | "last_name": "Miller",
512 | "email": "wmiller1p@histats.com",
513 | "hours_worked": 43,
514 | "hourly_wage": 11
515 | },
516 | {
517 | "id": 63,
518 | "first_name": "Jeffrey",
519 | "last_name": "Jacobs",
520 | "email": "jjacobs1q@jiathis.com",
521 | "hours_worked": 16,
522 | "hourly_wage": 15
523 | },
524 | {
525 | "id": 64,
526 | "first_name": "Sean",
527 | "last_name": "Rogers",
528 | "email": "srogers1r@photobucket.com",
529 | "hours_worked": 25,
530 | "hourly_wage": 14
531 | },
532 | {
533 | "id": 65,
534 | "first_name": "Andrea",
535 | "last_name": "Meyer",
536 | "email": "ameyer1s@jalbum.net",
537 | "hours_worked": 42,
538 | "hourly_wage": 14
539 | },
540 | {
541 | "id": 66,
542 | "first_name": "Stephanie",
543 | "last_name": "Lawrence",
544 | "email": "slawrence1t@ft.com",
545 | "hours_worked": 36,
546 | "hourly_wage": 15
547 | },
548 | {
549 | "id": 67,
550 | "first_name": "Victor",
551 | "last_name": "Hawkins",
552 | "email": "vhawkins1u@simplemachines.org",
553 | "hours_worked": 58,
554 | "hourly_wage": 16
555 | },
556 | {
557 | "id": 68,
558 | "first_name": "Maria",
559 | "last_name": "Boyd",
560 | "email": "mboyd1v@about.com",
561 | "hours_worked": 33,
562 | "hourly_wage": 20
563 | },
564 | {
565 | "id": 69,
566 | "first_name": "Roy",
567 | "last_name": "Johnson",
568 | "email": "rjohnson1w@360.cn",
569 | "hours_worked": 56,
570 | "hourly_wage": 9
571 | },
572 | {
573 | "id": 70,
574 | "first_name": "Maria",
575 | "last_name": "Harrison",
576 | "email": "mharrison1x@ft.com",
577 | "hours_worked": 40,
578 | "hourly_wage": 10
579 | },
580 | {
581 | "id": 71,
582 | "first_name": "Joe",
583 | "last_name": "Dixon",
584 | "email": "jdixon1y@dedecms.com",
585 | "hours_worked": 57,
586 | "hourly_wage": 15
587 | },
588 | {
589 | "id": 72,
590 | "first_name": "Willie",
591 | "last_name": "Ryan",
592 | "email": "wryan1z@123-reg.co.uk",
593 | "hours_worked": 53,
594 | "hourly_wage": 13
595 | },
596 | {
597 | "id": 73,
598 | "first_name": "Earl",
599 | "last_name": "Myers",
600 | "email": "emyers20@arizona.edu",
601 | "hours_worked": 50,
602 | "hourly_wage": 17
603 | },
604 | {
605 | "id": 74,
606 | "first_name": "Billy",
607 | "last_name": "Ramirez",
608 | "email": "bramirez21@tinyurl.com",
609 | "hours_worked": 44,
610 | "hourly_wage": 18
611 | },
612 | {
613 | "id": 75,
614 | "first_name": "Judy",
615 | "last_name": "Henry",
616 | "email": "jhenry22@disqus.com",
617 | "hours_worked": 42,
618 | "hourly_wage": 19
619 | },
620 | {
621 | "id": 76,
622 | "first_name": "Russell",
623 | "last_name": "Fisher",
624 | "email": "rfisher23@vk.com",
625 | "hours_worked": 52,
626 | "hourly_wage": 9
627 | },
628 | {
629 | "id": 77,
630 | "first_name": "Kenneth",
631 | "last_name": "Fernandez",
632 | "email": "kfernandez24@uol.com.br",
633 | "hours_worked": 33,
634 | "hourly_wage": 16
635 | },
636 | {
637 | "first_name": "Rachel",
638 | "last_name": "Adams",
639 | "email": "radams25@moonfruit.com",
640 | "hours_worked": "05",
641 | "hourly_wage": "30",
642 | "id": 78
643 | },
644 | {
645 | "id": 79,
646 | "first_name": "Cynthia",
647 | "last_name": "Mcdonald",
648 | "email": "cmcdonald26@homestead.com",
649 | "hours_worked": 24,
650 | "hourly_wage": 12
651 | },
652 | {
653 | "id": 80,
654 | "first_name": "Henry",
655 | "last_name": "Owens",
656 | "email": "howens27@bing.com",
657 | "hours_worked": 23,
658 | "hourly_wage": 19
659 | },
660 | {
661 | "id": 81,
662 | "first_name": "Richard",
663 | "last_name": "Webb",
664 | "email": "rwebb28@unc.edu",
665 | "hours_worked": 5,
666 | "hourly_wage": 14
667 | },
668 | {
669 | "id": 82,
670 | "first_name": "Irene",
671 | "last_name": "Jordan",
672 | "email": "ijordan29@paypal.com",
673 | "hours_worked": 38,
674 | "hourly_wage": 13
675 | },
676 | {
677 | "id": 83,
678 | "first_name": "Patrick",
679 | "last_name": "Greene",
680 | "email": "pgreene2a@nasa.gov",
681 | "hours_worked": 58,
682 | "hourly_wage": 14
683 | },
684 | {
685 | "id": 84,
686 | "first_name": "Norma",
687 | "last_name": "Palmer",
688 | "email": "npalmer2b@scientificamerican.com",
689 | "hours_worked": 2,
690 | "hourly_wage": 19
691 | },
692 | {
693 | "id": 85,
694 | "first_name": "Daniel",
695 | "last_name": "Richards",
696 | "email": "drichards2c@samsung.com",
697 | "hours_worked": 32,
698 | "hourly_wage": 14
699 | },
700 | {
701 | "id": 86,
702 | "first_name": "Bobby",
703 | "last_name": "Hunter",
704 | "email": "bhunter2d@jalbum.net",
705 | "hours_worked": 49,
706 | "hourly_wage": 15
707 | },
708 | {
709 | "id": 87,
710 | "first_name": "Peter",
711 | "last_name": "Sanders",
712 | "email": "psanders2e@discuz.net",
713 | "hours_worked": 25,
714 | "hourly_wage": 17
715 | },
716 | {
717 | "id": 88,
718 | "first_name": "Shawn",
719 | "last_name": "Schmidt",
720 | "email": "sschmidt2f@diigo.com",
721 | "hours_worked": 7,
722 | "hourly_wage": 17
723 | },
724 | {
725 | "id": 89,
726 | "first_name": "Shawn",
727 | "last_name": "Clark",
728 | "email": "sclark2g@cargocollective.com",
729 | "hours_worked": 13,
730 | "hourly_wage": 8
731 | },
732 | {
733 | "id": 90,
734 | "first_name": "Marie",
735 | "last_name": "Lynch",
736 | "email": "mlynch2h@seattletimes.com",
737 | "hours_worked": 53,
738 | "hourly_wage": 8
739 | },
740 | {
741 | "id": 91,
742 | "first_name": "Jennifer",
743 | "last_name": "Palmer",
744 | "email": "jpalmer2i@sphinn.com",
745 | "hours_worked": 51,
746 | "hourly_wage": 19
747 | },
748 | {
749 | "id": 92,
750 | "first_name": "Amy",
751 | "last_name": "Cunningham",
752 | "email": "acunningham2j@goodreads.com",
753 | "hours_worked": 8,
754 | "hourly_wage": 15
755 | },
756 | {
757 | "id": 93,
758 | "first_name": "Anna",
759 | "last_name": "Rose",
760 | "email": "arose2k@unesco.org",
761 | "hours_worked": 55,
762 | "hourly_wage": 14
763 | },
764 | {
765 | "first_name": "Frances",
766 | "last_name": "Armstrong",
767 | "email": "farmstrong2l@salon.com",
768 | "hourly_wage": "125",
769 | "id": 94
770 | },
771 | {
772 | "id": 95,
773 | "first_name": "Kelly",
774 | "last_name": "Ferguson",
775 | "email": "kferguson2m@sciencedirect.com",
776 | "hours_worked": 1,
777 | "hourly_wage": 12
778 | },
779 | {
780 | "id": 96,
781 | "first_name": "Andrew",
782 | "last_name": "Hamilton",
783 | "email": "ahamilton2n@wsj.com",
784 | "hours_worked": 11,
785 | "hourly_wage": 17
786 | },
787 | {
788 | "id": 97,
789 | "first_name": "Harold",
790 | "last_name": "Hernandez",
791 | "email": "hhernandez2o@dmoz.org",
792 | "hours_worked": 27,
793 | "hourly_wage": 9
794 | },
795 | {
796 | "id": 98,
797 | "first_name": "Helen",
798 | "last_name": "Reid",
799 | "email": "hreid2p@homestead.com",
800 | "hours_worked": 27,
801 | "hourly_wage": 16
802 | },
803 | {
804 | "id": 99,
805 | "first_name": "Jacqueline",
806 | "last_name": "Mccoy",
807 | "email": "jmccoy2q@arstechnica.com",
808 | "hours_worked": 39,
809 | "hourly_wage": 19
810 | },
811 | {
812 | "id": 100,
813 | "first_name": "Christopher",
814 | "last_name": "Hunter",
815 | "email": "chunter2r@biblegateway.com",
816 | "hours_worked": 6,
817 | "hourly_wage": 9
818 | }
819 | ]
820 | }
--------------------------------------------------------------------------------