├── src
    ├── assets
    │   └── .gitkeep
    ├── app
    │   ├── app.component.scss
    │   ├── items
    │   │   ├── items.component.scss
    │   │   ├── items.component.html
    │   │   ├── items.component.spec.ts
    │   │   └── items.component.ts
    │   ├── app.component.html
    │   ├── table
    │   │   ├── table.component.scss
    │   │   ├── table.component.spec.ts
    │   │   ├── table.component.html
    │   │   └── table.component.ts
    │   ├── app.component.ts
    │   ├── app-routing.module.ts
    │   ├── shared
    │   │   ├── data.service.ts
    │   │   ├── log-register.service.ts
    │   │   └── web.service.ts
    │   ├── app.component.spec.ts
    │   └── app.module.ts
    ├── favicon.ico
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── styles.scss
    ├── main.ts
    ├── index.html
    ├── test.ts
    └── polyfills.ts
├── Interview
    └── Fazrin
    │   ├── Q4.txt
    │   ├── Q1.txt
    │   └── Q3.txt
├── .editorconfig
├── tsconfig.app.json
├── tsconfig.spec.json
├── .browserslistrc
├── .gitignore
├── tsconfig.json
├── README.md
├── package.json
├── karma.conf.js
└── angular.json


/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/items/items.component.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/items/items.component.html:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <router-outlet></router-outlet>
2 | 


--------------------------------------------------------------------------------
/src/app/table/table.component.scss:
--------------------------------------------------------------------------------
1 | .full-width-table {
2 |   width: 100%;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nirzaf/reporting-app/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | 
3 | html, body { height: 100%; }
4 | body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
5 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-root',
 5 |   templateUrl: './app.component.html',
 6 |   styleUrls: ['./app.component.scss']
 7 | })
 8 | export class AppComponent {
 9 |   title = 'reporting-app';
10 | }
11 | 


--------------------------------------------------------------------------------
/Interview/Fazrin/Q4.txt:
--------------------------------------------------------------------------------
1 | 
2 | SELECT [dbo].[Manufacturers].[ManufactureName], (MONTH([dbo].[Sales].[SaleDate])) AS SalesMonth FROM [dbo].[Manufacturers]
3 | INNER JOIN [dbo].[Cars]
4 | ON [dbo].[Cars].[ManufacturerID] = [dbo].[Manufacturers].[ManufacturerID]
5 | INNER JOIN [dbo].[Sales]
6 | ON [dbo].[Cars].[CarID] = [dbo].[Sales].[CarID]


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://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 | [*.ts]
12 | quote_type = single
13 | 
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/app",
 6 |     "types": []
 7 |   },
 8 |   "files": [
 9 |     "src/main.ts",
10 |     "src/polyfills.ts"
11 |   ],
12 |   "include": [
13 |     "src/**/*.d.ts"
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/spec",
 6 |     "types": [
 7 |       "jasmine"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts",
12 |     "src/polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "src/**/*.spec.ts",
16 |     "src/**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/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().bootstrapModule(AppModule)
12 |   .catch(err => console.error(err));
13 | 


--------------------------------------------------------------------------------
/Interview/Fazrin/Q1.txt:
--------------------------------------------------------------------------------
 1 | SELECT [dbo].[Manufacturers].[ManufactureName], Count(*) AS SoldCars FROM [dbo].[Manufacturers] 
 2 | INNER JOIN [dbo].[Cars] 
 3 | ON [dbo].[Cars].[ManufacturerID] = [dbo].[Manufacturers].[ManufacturerID]
 4 | INNER JOIN [dbo].[Sales]
 5 | ON [dbo].[Sales].[CarID] = [dbo].[Cars].[CarID]
 6 | WHERE [dbo].[Sales].[SaleDate] 
 7 | BETWEEN '2020-01-01' AND '2020-12-31'
 8 | GROUP BY [dbo].[Manufacturers].[ManufactureName] 
 9 | ORDER BY SoldCars DESC
10 | 


--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule, Routes } from '@angular/router';
 3 | import { ItemsComponent } from './items/items.component';
 4 | import { TableComponent } from './table/table.component';
 5 | 
 6 | 
 7 | const routes: Routes = [
 8 |   { path:'table', component:TableComponent },
 9 |   { path:'items', component: ItemsComponent },
10 | ];
11 | 
12 | @NgModule({
13 |   imports: [RouterModule.forRoot(routes)],
14 |   exports: [RouterModule]
15 | })
16 | export class AppRoutingModule { }
17 | 


--------------------------------------------------------------------------------
/Interview/Fazrin/Q3.txt:
--------------------------------------------------------------------------------
 1 | CREATE PROCEDURE InsertSales
 2 | 	-- Add the parameters for the stored procedure here
 3 | @SaleID int,
 4 | @CarID int,
 5 | @SalesDate DateTime
 6 | AS
 7 | BEGIN
 8 |     IF EXISTS (SELECT COUNT(*) FROM [dbo].[Sales] WHERE SaleID = @SaleID)
 9 | 		BEGIN 
10 | 			UPDATE [dbo].[Sales] SET [CarID] = @CarID, [SaleDate] = @SalesDate WHERE [SaleID] = @SaleID
11 | 		END
12 | 	ELSE
13 | 		BEGIN
14 | 			INSERT INTO [dbo].[Sales] ([SaleID],[CarID] ,[SaleDate]) 
15 | 			VALUES (@SaleID, @CarID, @SalesDate)
16 | 		END
17 | 	SELECT SCOPE_IDENTITY() AS SalesID
18 | 	END
19 | GO
20 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>ReportingApp</title>
 6 |   <base href="/">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 |   <link rel="preconnect" href="https://fonts.gstatic.com">
10 |   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
11 |   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
12 | </head>
13 | <body class="mat-typography">
14 |   <app-root></app-root>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/app/items/items.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { ItemsComponent } from './items.component';
 4 | 
 5 | describe('ItemsComponent', () => {
 6 |   let component: ItemsComponent;
 7 |   let fixture: ComponentFixture<ItemsComponent>;
 8 | 
 9 |   beforeEach(async () => {
10 |     await TestBed.configureTestingModule({
11 |       declarations: [ ItemsComponent ]
12 |     })
13 |     .compileComponents();
14 |   });
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(ItemsComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # For the full list of supported browsers by the Angular framework, please see:
 6 | # https://angular.io/guide/browser-support
 7 | 
 8 | # You can see what browsers were selected by your queries by running:
 9 | #   npx browserslist
10 | 
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
18 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false,
 7 |   baseUrl: 'http://145.239.206.89/Interview/api/test/',
 8 | };
 9 | 
10 | /*
11 |  * For easier debugging in development mode, you can import the following file
12 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
13 |  *
14 |  * This import should be commented out in production mode because it will have a negative impact
15 |  * on performance if an error is thrown.
16 |  */
17 | // import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
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 | # Only exists if Bazel was run
 8 | /bazel-out
 9 | 
10 | # dependencies
11 | /node_modules
12 | 
13 | # profiling files
14 | chrome-profiler-events*.json
15 | 
16 | # IDEs and editors
17 | /.idea
18 | .project
19 | .classpath
20 | .c9/
21 | *.launch
22 | .settings/
23 | *.sublime-workspace
24 | 
25 | # IDE - VSCode
26 | .vscode/*
27 | !.vscode/settings.json
28 | !.vscode/tasks.json
29 | !.vscode/launch.json
30 | !.vscode/extensions.json
31 | .history/*
32 | 
33 | # misc
34 | /.sass-cache
35 | /connect.lock
36 | /coverage
37 | /libpeerconnection.log
38 | npm-debug.log
39 | yarn-error.log
40 | testem.log
41 | /typings
42 | 
43 | # System Files
44 | .DS_Store
45 | Thumbs.db
46 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: {
11 |   context(path: string, deep?: boolean, filter?: RegExp): {
12 |     keys(): string[];
13 |     <T>(id: string): T;
14 |   };
15 | };
16 | 
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 |   BrowserDynamicTestingModule,
20 |   platformBrowserDynamicTesting()
21 | );
22 | // Then we find all the tests.
23 | const context = require.context('./', true, /\.spec\.ts$/);
24 | // And load the modules.
25 | context.keys().map(context);
26 | 


--------------------------------------------------------------------------------
/src/app/shared/data.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { Observable, throwError } from 'rxjs';
 3 | import { HttpClient } from '@angular/common/http';
 4 | import { environment } from 'src/environments/environment';
 5 | import { catchError, map } from 'rxjs/operators';
 6 | 
 7 | @Injectable({
 8 |   providedIn: 'root'
 9 | })
10 | 
11 | export class DataService {
12 |   constructor(private http:HttpClient) { }
13 | 
14 |    //fetch data from api
15 |    getItemDetails():Observable<any[]> {
16 |       return this.http.get( environment.baseUrl +'items/?fields=id,name,description,ItemCategory,DefaultPriceConcessionID,DefaultPriceConcessionName,active')
17 |       .pipe(
18 |         map((items:any)=>{
19 |           return items;
20 |         }),catchError(error=>{
21 |           return throwError(error);
22 |         }
23 |       )
24 |    }
25 | 
26 | }
27 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "compileOnSave": false,
 4 |   "compilerOptions": {
 5 |     "baseUrl": "./",
 6 |     "outDir": "./dist/out-tsc",
 7 |     "forceConsistentCasingInFileNames": true,
 8 |     "strict": true,
 9 |     "noImplicitReturns": true,
10 |     "noFallthroughCasesInSwitch": true,
11 |     "sourceMap": true,
12 |     "declaration": false,
13 |     "downlevelIteration": true,
14 |     "experimentalDecorators": true,
15 |     "moduleResolution": "node",
16 |     "importHelpers": true,
17 |     "target": "es2017",
18 |     "module": "es2020",
19 |     "lib": [
20 |       "es2018",
21 |       "dom"
22 |     ]
23 |   },
24 |   "angularCompilerOptions": {
25 |     "enableI18nLegacyMessageIdFormat": false,
26 |     "strictInjectionParameters": true,
27 |     "strictInputAccessModifiers": true,
28 |     "strictTemplates": true
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ReportingApp
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.1.4.
 4 | 
 5 | ## Development server
 6 | 
 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 8 | 
 9 | ## Code scaffolding
10 | 
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 | 
13 | ## Build
14 | 
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16 | 
17 | ## Running unit tests
18 | 
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 | 
21 | ## Running end-to-end tests
22 | 
23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24 | 
25 | ## Further help
26 | 
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
28 | 


--------------------------------------------------------------------------------
/src/app/table/table.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 3 | import { MatPaginatorModule } from '@angular/material/paginator';
 4 | import { MatSortModule } from '@angular/material/sort';
 5 | import { MatTableModule } from '@angular/material/table';
 6 | 
 7 | import { TableComponent } from './table.component';
 8 | 
 9 | describe('TableComponent', () => {
10 |   let component: TableComponent;
11 |   let fixture: ComponentFixture<TableComponent>;
12 | 
13 |   beforeEach(waitForAsync(() => {
14 |     TestBed.configureTestingModule({
15 |       declarations: [ TableComponent ],
16 |       imports: [
17 |         NoopAnimationsModule,
18 |         MatPaginatorModule,
19 |         MatSortModule,
20 |         MatTableModule,
21 |       ]
22 |     }).compileComponents();
23 |   }));
24 | 
25 |   beforeEach(() => {
26 |     fixture = TestBed.createComponent(TableComponent);
27 |     component = fixture.componentInstance;
28 |     fixture.detectChanges();
29 |   });
30 | 
31 |   it('should compile', () => {
32 |     expect(component).toBeTruthy();
33 |   });
34 | });
35 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | import { RouterTestingModule } from '@angular/router/testing';
 3 | import { AppComponent } from './app.component';
 4 | 
 5 | describe('AppComponent', () => {
 6 |   beforeEach(async () => {
 7 |     await TestBed.configureTestingModule({
 8 |       imports: [
 9 |         RouterTestingModule
10 |       ],
11 |       declarations: [
12 |         AppComponent
13 |       ],
14 |     }).compileComponents();
15 |   });
16 | 
17 |   it('should create the app', () => {
18 |     const fixture = TestBed.createComponent(AppComponent);
19 |     const app = fixture.componentInstance;
20 |     expect(app).toBeTruthy();
21 |   });
22 | 
23 |   it(`should have as title 'reporting-app'`, () => {
24 |     const fixture = TestBed.createComponent(AppComponent);
25 |     const app = fixture.componentInstance;
26 |     expect(app.title).toEqual('reporting-app');
27 |   });
28 | 
29 |   it('should render title', () => {
30 |     const fixture = TestBed.createComponent(AppComponent);
31 |     fixture.detectChanges();
32 |     const compiled = fixture.nativeElement as HTMLElement;
33 |     expect(compiled.querySelector('.content span')?.textContent).toContain('reporting-app app is running!');
34 |   });
35 | });
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "reporting-app",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build",
 8 |     "watch": "ng build --watch --configuration development",
 9 |     "test": "ng test"
10 |   },
11 |   "private": true,
12 |   "dependencies": {
13 |     "@angular/animations": "~12.1.0",
14 |     "@angular/cdk": "^12.2.1",
15 |     "@angular/common": "~12.1.0",
16 |     "@angular/compiler": "~12.1.0",
17 |     "@angular/core": "~12.1.0",
18 |     "@angular/forms": "~12.1.0",
19 |     "@angular/material": "^12.2.1",
20 |     "@angular/platform-browser": "~12.1.0",
21 |     "@angular/platform-browser-dynamic": "~12.1.0",
22 |     "@angular/router": "~12.1.0",
23 |     "rxjs": "~6.6.0",
24 |     "tslib": "^2.2.0",
25 |     "zone.js": "~0.11.4"
26 |   },
27 |   "devDependencies": {
28 |     "@angular-devkit/build-angular": "~12.1.4",
29 |     "@angular/cli": "~12.1.4",
30 |     "@angular/compiler-cli": "~12.1.0",
31 |     "@types/jasmine": "~3.8.0",
32 |     "@types/node": "^12.11.1",
33 |     "jasmine-core": "~3.8.0",
34 |     "karma": "~6.3.0",
35 |     "karma-chrome-launcher": "~3.1.0",
36 |     "karma-coverage": "~2.0.3",
37 |     "karma-jasmine": "~4.0.0",
38 |     "karma-jasmine-html-reporter": "~1.7.0",
39 |     "typescript": "~4.3.2"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/app/items/items.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import {environment} from "../../environments/environment";
 3 | import {TableItem} from "../table/table.component";
 4 | import {HttpClient} from "@angular/common/http";
 5 | import {LogRegisterService} from "../shared/log-register.service";
 6 | import {MatDialog} from "@angular/material/dialog";
 7 | 
 8 | @Component({
 9 |   selector: 'app-items',
10 |   templateUrl: './items.component.html',
11 |   styleUrls: ['./items.component.scss']
12 | })
13 | export class ItemsComponent implements OnInit {
14 |   constructor(private http:HttpClient,
15 |               private logger:LogRegisterService,
16 |               private dialog:MatDialog) { }
17 | 
18 |   ngOnInit(): void {
19 |   }
20 | 
21 | //   getPriceDetails(ConcessionID:any){
22 | //     let url = environment.baseUrl + 'items/?fields=id,name,description,ItemCategory,DefaultPriceConcessionID,DefaultPriceConcessionName,active';
23 | //     this.logger.print("Get data url:" + url);
24 | //     this.http.get(url)
25 | //       .subscribe( (items:any) => {
26 | //         this.dataSource.data = items.Data as TableItem[]
27 | //         for(let c in this.dataSource.data) {
28 | //           this.logger.print("Data Source:", this.dataSource.data[c]);
29 | //         }
30 | //       });
31 | //   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { BrowserModule } from '@angular/platform-browser';
 3 | import { HttpClientModule } from '@angular/common/http';
 4 | import { AppRoutingModule } from './app-routing.module';
 5 | import { AppComponent } from './app.component';
 6 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 7 | import { ItemsComponent } from './items/items.component';
 8 | import { TableComponent } from './table/table.component';
 9 | import { MatTableModule } from '@angular/material/table';
10 | import { MatPaginatorModule } from '@angular/material/paginator';
11 | import { MatSortModule } from '@angular/material/sort';
12 | import {MatExpansionModule} from "@angular/material/expansion";
13 | import {MatButtonModule} from "@angular/material/button";
14 | import {MatFormFieldModule} from "@angular/material/form-field";
15 | import {FormsModule} from "@angular/forms";
16 | import {MatInputModule} from "@angular/material/input";
17 | 
18 | @NgModule({
19 |   declarations: [
20 |     AppComponent,
21 |     ItemsComponent,
22 |     TableComponent
23 |   ],
24 |   imports: [
25 |     BrowserModule,
26 |     AppRoutingModule,
27 |     BrowserAnimationsModule,
28 |     MatTableModule,
29 |     MatPaginatorModule,
30 |     MatSortModule,
31 |     HttpClientModule,
32 |     MatExpansionModule,
33 |     MatButtonModule,
34 |     MatFormFieldModule,
35 |     FormsModule,
36 |     MatInputModule
37 |   ],
38 |   providers: [],
39 |   bootstrap: [AppComponent]
40 | })
41 | export class AppModule { }
42 | 


--------------------------------------------------------------------------------
/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 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       jasmine: {
17 |         // you can add configuration options for Jasmine here
18 |         // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 |         // for example, you can disable the random execution with `random: false`
20 |         // or set a specific seed with `seed: 4321`
21 |       },
22 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
23 |     },
24 |     jasmineHtmlReporter: {
25 |       suppressAll: true // removes the duplicated traces
26 |     },
27 |     coverageReporter: {
28 |       dir: require('path').join(__dirname, './coverage/reporting-app'),
29 |       subdir: '.',
30 |       reporters: [
31 |         { type: 'html' },
32 |         { type: 'text-summary' }
33 |       ]
34 |     },
35 |     reporters: ['progress', 'kjhtml'],
36 |     port: 9876,
37 |     colors: true,
38 |     logLevel: config.LOG_INFO,
39 |     autoWatch: true,
40 |     browsers: ['Chrome'],
41 |     singleRun: false,
42 |     restartOnFileChange: true
43 |   });
44 | };
45 | 


--------------------------------------------------------------------------------
/src/app/shared/log-register.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { environment } from 'src/environments/environment';
 3 | 
 4 | @Injectable({
 5 |   providedIn: 'root',
 6 | })
 7 | export class LogRegisterService {
 8 |   entryDate: Date = new Date();
 9 |   message: string = '';
10 |   extraInfo: any[] = [];
11 |   logWithDate: boolean = true;
12 | 
13 |   buildLogString(): string {
14 |     let ret: string = '';
15 |     if (this.logWithDate) {
16 |       ret = new Date() + ' - ';
17 |     }
18 |     ret += ' - Message: ' + this.message;
19 |     if (this.extraInfo.length) {
20 |       ret +=
21 |         ' - Extra Info: ' + LogRegisterService.formatParams(this.extraInfo);
22 |     }
23 |     return ret;
24 |   }
25 | 
26 |   private static formatParams(params: any[]): any {
27 |     if (params != undefined) {
28 |       let ret: string = params.join(',');
29 |       if (params.some((p) => typeof p == 'object')) {
30 |         ret = '';
31 |         for (let item of params) {
32 |           ret += JSON.stringify(item) + ',';
33 |         }
34 |       }
35 |       return ret;
36 |     }
37 |   }
38 | 
39 |   print(msg: string, ...optionalParams: any[]) {
40 |     if (!environment.production) this.writeToLog(msg, optionalParams);
41 |   }
42 | 
43 |   private writeToLog(msg: string, params: any[]) {
44 |     let entry: LogRegisterService = new LogRegisterService();
45 |     if (params != undefined) {
46 |       entry.message = msg;
47 |       entry.extraInfo = params;
48 |       entry.logWithDate = this.logWithDate;
49 |       console.log(entry.buildLogString());
50 |     } else {
51 |       console.log(msg + 'undefined');
52 |     }
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/app/table/table.component.html:
--------------------------------------------------------------------------------
 1 |   <mat-form-field [style.width.%]="100" style="background-color:gray;margin-left:25px">
 2 |     <mat-label>Search Items</mat-label>
 3 |     <input matInput type="text" placeholder="Search" (keyup) ="applyFilter($event.target)"
 4 |            name="search">
 5 |   </mat-form-field>
 6 | 
 7 |   <table mat-table class="full-width-table" [dataSource]="dataSource"  matSort aria-label="Elements">
 8 |     <!-- Item Column -->
 9 |     <ng-container matColumnDef="name">
10 |       <th mat-header-cell *matHeaderCellDef mat-sort-header>Item Name</th>
11 |       <td mat-cell *matCellDef="let element">{{element.Name}}</td>
12 |     </ng-container>
13 | 
14 |     <!-- Category Column -->
15 |     <ng-container matColumnDef="category">
16 |       <th mat-header-cell *matHeaderCellDef mat-sort-header>Category</th>
17 |       <td mat-cell *matCellDef="let element">{{element.ItemCategory}}</td>
18 |     </ng-container>
19 | 
20 |     <!-- Price ConcessionName Column -->
21 |     <ng-container matColumnDef="price">
22 |       <th mat-header-cell *matHeaderCellDef mat-sort-header>Default Price Concession</th>
23 |       <td mat-cell *matCellDef="let element">{{element.DefaultPriceConcessionName}}</td>
24 |     </ng-container>
25 | 
26 |     <!-- Price Column -->
27 |     <ng-container matColumnDef="action">
28 |       <th mat-header-cell *matHeaderCellDef mat-sort-header>View Price Details</th>
29 |       <mat-cell *matCellDef="let element">
30 |             <button mat-button>View Price</button>
31 |       </mat-cell>
32 |     </ng-container>
33 | 
34 | 
35 |     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
36 |     <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="viewPriceDetails(row)"></tr>
37 |   </table>
38 | 
39 | 


--------------------------------------------------------------------------------
/src/app/shared/web.service.ts:
--------------------------------------------------------------------------------
 1 | import { HttpClient, HttpHeaders } from '@angular/common/http';
 2 | import { Injectable } from '@angular/core';
 3 | import { environment } from 'src/environments/environment';
 4 | import { LogRegisterService } from './log-register.service';
 5 | 
 6 | @Injectable({
 7 |   providedIn: 'root',
 8 | })
 9 | export class WebService {
10 |   constructor(private http: HttpClient, private logger: LogRegisterService) {}
11 | 
12 |   commonMethod(url: string, data: any, method?: string): any {
13 |     method = method ? method : 'POST';
14 |     let headers = new HttpHeaders({
15 |       'Content-Type': 'application/json',
16 |       Accept: 'application/json',
17 |     });
18 | 
19 |     let endPoint = environment.baseUrl + url;
20 |     if (data != null) {
21 |       this.logger.print(
22 |         'Method Name : Common Method : API Request End Point => ' + endPoint,
23 |         data
24 |       );
25 |     } else {
26 |       this.logger.print(
27 |         'Method Name : Common Method : API Request End Point => ',
28 |         endPoint
29 |       );
30 |     }
31 |     if (method == 'POST') {
32 |       this.logger.print('POST URL :' + endPoint, data);
33 |       return this.http.post(endPoint, data, { headers });
34 |     } else if (method == 'GET') {
35 |       this.logger.print('GET URL :' + endPoint, headers);
36 |       return this.http.get(endPoint, { headers });
37 |     } else if (method == 'PUT') {
38 |       this.logger.print('PUT URL :' + endPoint, data);
39 |       return this.http.put(endPoint, data, { headers });
40 |     } else if (method == 'DELETE') {
41 |       const options = {
42 |         headers: headers,
43 |         body: data,
44 |       };
45 |       this.logger.print('DELETE URL :' + endPoint, data);
46 |       return this.http.delete(endPoint, options);
47 |     }
48 |   }
49 | 
50 |   baseURL(): string {
51 |     return environment.baseUrl;
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/app/table/table.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ViewChild} from '@angular/core';
 2 | import { MatPaginator } from '@angular/material/paginator';
 3 | import { MatSort } from '@angular/material/sort';
 4 | import { MatTable, MatTableDataSource} from '@angular/material/table';
 5 | import { HttpClient} from "@angular/common/http";
 6 | import { environment } from "../../environments/environment";
 7 | import { LogRegisterService } from '../shared/log-register.service';
 8 | import {MatDialog} from "@angular/material/dialog";
 9 | import {ItemsComponent} from "../items/items.component";
10 | 
11 | export interface TableItem {
12 |   Name : string;
13 |   ItemCategory: string;
14 |   DefaultPriceConcessionID: number;
15 |   DefaultPriceConcessionName: string;
16 | }
17 | 
18 | @Component({
19 |   selector: 'app-table',
20 |   templateUrl: './table.component.html',
21 |   styleUrls: ['./table.component.scss']
22 | })
23 | 
24 | export class TableComponent implements OnInit {
25 |   @ViewChild(MatPaginator) paginator!: MatPaginator;
26 |   @ViewChild(MatSort) sort!: MatSort;
27 |   @ViewChild(MatTable) table!: MatTable<TableItem>;
28 | 
29 |   itemData: TableItem[]=[];
30 |   displayedColumns = ['name', 'category', 'price', 'action'];
31 |   dataSource = new MatTableDataSource<TableItem>(this.itemData);
32 | 
33 |   constructor(private http:HttpClient,
34 |               private logger:LogRegisterService,
35 |               private dialog:MatDialog) {}
36 |   ngOnInit(): void {
37 |     this.getItemDetails();
38 |   }
39 | 
40 |   getItemDetails(){
41 |     let url = environment.baseUrl + 'items/?fields=id,name,description,ItemCategory,DefaultPriceConcessionID,DefaultPriceConcessionName,active';
42 |     this.logger.print("Get data url:" + url);
43 |     this.http.get(url)
44 |       .subscribe( (items:any) => {
45 |         this.dataSource.data = items.Data as TableItem[]
46 |         for(let c in this.dataSource.data) {
47 |           this.logger.print("Data Source:", this.dataSource.data[c]);
48 |         }
49 |       });
50 |   }
51 | 
52 |   viewPriceDetails(row:any) {
53 |     this.logger.print( this.constructor.name + "=> ViewUser => row : ", row);
54 |     const dialogRef = this.dialog.open(ItemsComponent, {
55 |       data: {
56 |         ConcessionID: row.DefaultPriceConcessionID
57 |       },
58 |       autoFocus: false
59 |     });
60 |     dialogRef.afterClosed().subscribe(() => {
61 |       this.getItemDetails();
62 |     });
63 |   }
64 | 
65 |   applyFilter(filterValue: any) {
66 |     this.dataSource.filter = filterValue.value.trim().toLowerCase();
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/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/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /**
22 |  * IE11 requires the following for NgClass support on SVG elements
23 |  */
24 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
25 | 
26 | /**
27 |  * Web Animations `@angular/platform-browser/animations`
28 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
29 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
30 |  */
31 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
32 | 
33 | /**
34 |  * By default, zone.js will patch all possible macroTask and DomEvents
35 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
36 |  * because those flags need to be set before `zone.js` being loaded, and webpack
37 |  * will put import in the top of bundle, so user need to create a separate file
38 |  * in this directory (for example: zone-flags.ts), and put the following flags
39 |  * into that file, and then add the following code before importing zone.js.
40 |  * import './zone-flags';
41 |  *
42 |  * The flags allowed in zone-flags.ts are listed here.
43 |  *
44 |  * The following flags will work for all browsers.
45 |  *
46 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
47 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
48 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
49 |  *
50 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
51 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
52 |  *
53 |  *  (window as any).__Zone_enable_cross_context_check = true;
54 |  *
55 |  */
56 | 
57 | /***************************************************************************************************
58 |  * Zone JS is required by default for Angular itself.
59 |  */
60 | import 'zone.js';  // Included with Angular CLI.
61 | 
62 | 
63 | /***************************************************************************************************
64 |  * APPLICATION IMPORTS
65 |  */
66 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "cli": {
  4 |     "analytics": "955c2258-1ec2-46d0-9d74-1b6023683bf0"
  5 |   },
  6 |   "version": 1,
  7 |   "newProjectRoot": "projects",
  8 |   "projects": {
  9 |     "reporting-app": {
 10 |       "projectType": "application",
 11 |       "schematics": {
 12 |         "@schematics/angular:component": {
 13 |           "style": "scss"
 14 |         },
 15 |         "@schematics/angular:application": {
 16 |           "strict": true
 17 |         }
 18 |       },
 19 |       "root": "",
 20 |       "sourceRoot": "src",
 21 |       "prefix": "app",
 22 |       "architect": {
 23 |         "build": {
 24 |           "builder": "@angular-devkit/build-angular:browser",
 25 |           "options": {
 26 |             "outputPath": "dist/reporting-app",
 27 |             "index": "src/index.html",
 28 |             "main": "src/main.ts",
 29 |             "polyfills": "src/polyfills.ts",
 30 |             "tsConfig": "tsconfig.app.json",
 31 |             "inlineStyleLanguage": "scss",
 32 |             "assets": [
 33 |               "src/favicon.ico",
 34 |               "src/assets"
 35 |             ],
 36 |             "styles": [
 37 |               "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
 38 |               "src/styles.scss"
 39 |             ],
 40 |             "scripts": []
 41 |           },
 42 |           "configurations": {
 43 |             "production": {
 44 |               "budgets": [
 45 |                 {
 46 |                   "type": "initial",
 47 |                   "maximumWarning": "500kb",
 48 |                   "maximumError": "1mb"
 49 |                 },
 50 |                 {
 51 |                   "type": "anyComponentStyle",
 52 |                   "maximumWarning": "2kb",
 53 |                   "maximumError": "4kb"
 54 |                 }
 55 |               ],
 56 |               "fileReplacements": [
 57 |                 {
 58 |                   "replace": "src/environments/environment.ts",
 59 |                   "with": "src/environments/environment.prod.ts"
 60 |                 }
 61 |               ],
 62 |               "outputHashing": "all"
 63 |             },
 64 |             "development": {
 65 |               "buildOptimizer": false,
 66 |               "optimization": false,
 67 |               "vendorChunk": true,
 68 |               "extractLicenses": false,
 69 |               "sourceMap": true,
 70 |               "namedChunks": true
 71 |             }
 72 |           },
 73 |           "defaultConfiguration": "production"
 74 |         },
 75 |         "serve": {
 76 |           "builder": "@angular-devkit/build-angular:dev-server",
 77 |           "configurations": {
 78 |             "production": {
 79 |               "browserTarget": "reporting-app:build:production"
 80 |             },
 81 |             "development": {
 82 |               "browserTarget": "reporting-app:build:development"
 83 |             }
 84 |           },
 85 |           "defaultConfiguration": "development"
 86 |         },
 87 |         "extract-i18n": {
 88 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 89 |           "options": {
 90 |             "browserTarget": "reporting-app:build"
 91 |           }
 92 |         },
 93 |         "test": {
 94 |           "builder": "@angular-devkit/build-angular:karma",
 95 |           "options": {
 96 |             "main": "src/test.ts",
 97 |             "polyfills": "src/polyfills.ts",
 98 |             "tsConfig": "tsconfig.spec.json",
 99 |             "karmaConfig": "karma.conf.js",
100 |             "inlineStyleLanguage": "scss",
101 |             "assets": [
102 |               "src/favicon.ico",
103 |               "src/assets"
104 |             ],
105 |             "styles": [
106 |               "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
107 |               "src/styles.scss"
108 |             ],
109 |             "scripts": []
110 |           }
111 |         }
112 |       }
113 |     }
114 |   },
115 |   "defaultProject": "reporting-app"
116 | }
117 | 


--------------------------------------------------------------------------------