in all in one
This commit is contained in:
Kham
@@ -1,12 +0,0 @@
|
|||||||
{
|
|
||||||
"version": 1,
|
|
||||||
"isRoot": true,
|
|
||||||
"tools": {
|
|
||||||
"dotnet-ef": {
|
|
||||||
"version": "5.0.9",
|
|
||||||
"commands": [
|
|
||||||
"dotnet-ef"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
# Editor configuration, see https://editorconfig.org
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
|
||||||
|
[*.ts]
|
||||||
|
quote_type = single
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
max_line_length = off
|
||||||
|
trim_trailing_whitespace = false
|
||||||
Vendored
+3
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"angular.enable-strict-mode-prompt": false
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
# CarParkValidation
|
||||||
|
|
||||||
|
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.2.3.
|
||||||
|
|
||||||
|
## Development server
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
## Code scaffolding
|
||||||
|
|
||||||
|
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`.
|
||||||
|
|
||||||
|
## Build
|
||||||
|
|
||||||
|
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
|
||||||
|
|
||||||
|
## Running unit tests
|
||||||
|
|
||||||
|
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||||
|
|
||||||
|
## Running end-to-end tests
|
||||||
|
|
||||||
|
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
|
||||||
|
|
||||||
|
## Further help
|
||||||
|
|
||||||
|
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.
|
||||||
+149
@@ -0,0 +1,149 @@
|
|||||||
|
{
|
||||||
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||||
|
"version": 1,
|
||||||
|
"newProjectRoot": "projects",
|
||||||
|
"projects": {
|
||||||
|
"CarParkValidation": {
|
||||||
|
"projectType": "application",
|
||||||
|
"schematics": {},
|
||||||
|
"root": "",
|
||||||
|
"sourceRoot": "src",
|
||||||
|
"prefix": "app",
|
||||||
|
"architect": {
|
||||||
|
"build": {
|
||||||
|
"builder": "@angular-devkit/build-angular:browser",
|
||||||
|
"options": {
|
||||||
|
"allowedCommonJsDependencies": [
|
||||||
|
"moment"
|
||||||
|
],
|
||||||
|
"outputPath": "dist/CarParkValidation",
|
||||||
|
"index": "src/index.html",
|
||||||
|
"main": "src/main.ts",
|
||||||
|
"polyfills": "src/polyfills.ts",
|
||||||
|
"tsConfig": "tsconfig.app.json",
|
||||||
|
"aot": true,
|
||||||
|
"assets": [
|
||||||
|
"src/favicon.ico",
|
||||||
|
"src/assets"
|
||||||
|
],
|
||||||
|
"styles": [
|
||||||
|
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
|
||||||
|
"src/styles.css",
|
||||||
|
"node_modules/material-design-icons/iconfont/material-icons.css",
|
||||||
|
"node_modules/primeflex/primeflex.css",
|
||||||
|
"node_modules/primeng/resources/primeng.min.css",
|
||||||
|
"node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css"
|
||||||
|
],
|
||||||
|
"scripts": []
|
||||||
|
},
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"fileReplacements": [
|
||||||
|
{
|
||||||
|
"replace": "src/environments/environment.ts",
|
||||||
|
"with": "src/environments/environment.prod.ts"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"optimization": true,
|
||||||
|
"outputHashing": "all",
|
||||||
|
"sourceMap": false,
|
||||||
|
"namedChunks": false,
|
||||||
|
"extractLicenses": true,
|
||||||
|
"vendorChunk": false,
|
||||||
|
"buildOptimizer": true,
|
||||||
|
"budgets": [
|
||||||
|
{
|
||||||
|
"type": "initial",
|
||||||
|
"maximumWarning": "3mb",
|
||||||
|
"maximumError": "5mb"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "anyComponentStyle",
|
||||||
|
"maximumWarning": "6kb",
|
||||||
|
"maximumError": "10kb"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"buildOptimizer": false,
|
||||||
|
"optimization": false,
|
||||||
|
"vendorChunk": true,
|
||||||
|
"extractLicenses": false,
|
||||||
|
"sourceMap": true,
|
||||||
|
"namedChunks": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"serve": {
|
||||||
|
"builder": "@angular-devkit/build-angular:dev-server",
|
||||||
|
"options": {
|
||||||
|
"buildTarget": "CarParkValidation:build"
|
||||||
|
},
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"buildTarget": "CarParkValidation:build:production"
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"buildTarget": "CarParkValidation:build:development"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultConfiguration": "development"
|
||||||
|
},
|
||||||
|
"extract-i18n": {
|
||||||
|
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||||
|
"options": {
|
||||||
|
"buildTarget": "CarParkValidation:build"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"test": {
|
||||||
|
"builder": "@angular-devkit/build-angular:karma",
|
||||||
|
"options": {
|
||||||
|
"main": "src/test.ts",
|
||||||
|
"polyfills": "src/polyfills.ts",
|
||||||
|
"tsConfig": "tsconfig.spec.json",
|
||||||
|
"karmaConfig": "karma.conf.js",
|
||||||
|
"assets": [
|
||||||
|
"src/favicon.ico",
|
||||||
|
"src/assets"
|
||||||
|
],
|
||||||
|
"styles": [
|
||||||
|
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
|
||||||
|
"src/styles.css",
|
||||||
|
"node_modules/material-design-icons/iconfont/material-icons.css",
|
||||||
|
"node_modules/primeflex/primeflex.css"
|
||||||
|
],
|
||||||
|
"scripts": []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lint": {
|
||||||
|
"builder": "@angular-devkit/build-angular:tslint",
|
||||||
|
"options": {
|
||||||
|
"tsConfig": [
|
||||||
|
"tsconfig.app.json",
|
||||||
|
"tsconfig.spec.json",
|
||||||
|
"e2e/tsconfig.json"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"**/node_modules/**"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"e2e": {
|
||||||
|
"builder": "@angular-devkit/build-angular:protractor",
|
||||||
|
"options": {
|
||||||
|
"protractorConfig": "e2e/protractor.conf.js",
|
||||||
|
"devServerTarget": "CarParkValidation:serve"
|
||||||
|
},
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"devServerTarget": "CarParkValidation:serve:production"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"cli": {
|
||||||
|
"analytics": false
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
// @ts-check
|
||||||
|
// Protractor configuration file, see link for more information
|
||||||
|
// https://github.com/angular/protractor/blob/master/lib/config.ts
|
||||||
|
|
||||||
|
const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type { import("protractor").Config }
|
||||||
|
*/
|
||||||
|
exports.config = {
|
||||||
|
allScriptsTimeout: 11000,
|
||||||
|
specs: [
|
||||||
|
'./src/**/*.e2e-spec.ts'
|
||||||
|
],
|
||||||
|
capabilities: {
|
||||||
|
browserName: 'chrome'
|
||||||
|
},
|
||||||
|
directConnect: true,
|
||||||
|
baseUrl: 'http://localhost:4200/',
|
||||||
|
framework: 'jasmine',
|
||||||
|
jasmineNodeOpts: {
|
||||||
|
showColors: true,
|
||||||
|
defaultTimeoutInterval: 30000,
|
||||||
|
print: function() {}
|
||||||
|
},
|
||||||
|
onPrepare() {
|
||||||
|
require('ts-node').register({
|
||||||
|
project: require('path').join(__dirname, './tsconfig.json')
|
||||||
|
});
|
||||||
|
jasmine.getEnv().addReporter(new SpecReporter({
|
||||||
|
spec: {
|
||||||
|
displayStacktrace: StacktraceOption.PRETTY
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import { AppPage } from './app.po';
|
||||||
|
import { browser, logging } from 'protractor';
|
||||||
|
|
||||||
|
describe('workspace-project App', () => {
|
||||||
|
let page: AppPage;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
page = new AppPage();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should display welcome message', () => {
|
||||||
|
page.navigateTo();
|
||||||
|
expect(page.getTitleText()).toEqual('CarParkValidation app is running!');
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(async () => {
|
||||||
|
// Assert that there are no errors emitted from the browser
|
||||||
|
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
|
||||||
|
expect(logs).not.toContain(jasmine.objectContaining({
|
||||||
|
level: logging.Level.SEVERE,
|
||||||
|
} as logging.Entry));
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { browser, by, element } from 'protractor';
|
||||||
|
|
||||||
|
export class AppPage {
|
||||||
|
navigateTo(): Promise<unknown> {
|
||||||
|
return browser.get(browser.baseUrl) as Promise<unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
getTitleText(): Promise<string> {
|
||||||
|
return element(by.css('app-root .content span')).getText() as Promise<string>;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||||
|
{
|
||||||
|
"extends": "../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../out-tsc/e2e",
|
||||||
|
"module": "commonjs",
|
||||||
|
"target": "es2018",
|
||||||
|
"types": [
|
||||||
|
"jasmine",
|
||||||
|
"jasminewd2",
|
||||||
|
"node"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
// Karma configuration file, see link for more information
|
||||||
|
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||||
|
|
||||||
|
module.exports = function (config) {
|
||||||
|
config.set({
|
||||||
|
basePath: '',
|
||||||
|
frameworks: ['jasmine', '@angular-devkit/build-angular'],
|
||||||
|
plugins: [
|
||||||
|
require('karma-jasmine'),
|
||||||
|
require('karma-chrome-launcher'),
|
||||||
|
require('karma-jasmine-html-reporter'),
|
||||||
|
require('karma-coverage-istanbul-reporter'),
|
||||||
|
require('@angular-devkit/build-angular/plugins/karma')
|
||||||
|
],
|
||||||
|
client: {
|
||||||
|
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||||
|
},
|
||||||
|
coverageIstanbulReporter: {
|
||||||
|
dir: require('path').join(__dirname, './coverage/CarParkValidation'),
|
||||||
|
reports: ['html', 'lcovonly', 'text-summary'],
|
||||||
|
fixWebpackSourcePaths: true
|
||||||
|
},
|
||||||
|
reporters: ['progress', 'kjhtml'],
|
||||||
|
port: 9876,
|
||||||
|
colors: true,
|
||||||
|
logLevel: config.LOG_INFO,
|
||||||
|
autoWatch: true,
|
||||||
|
browsers: ['Chrome'],
|
||||||
|
singleRun: false,
|
||||||
|
restartOnFileChange: true
|
||||||
|
});
|
||||||
|
};
|
||||||
Generated
+15185
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "car-park-validation",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"ng": "ng",
|
||||||
|
"start": "ng serve",
|
||||||
|
"build": "ng build",
|
||||||
|
"test": "ng test",
|
||||||
|
"lint": "ng lint",
|
||||||
|
"e2e": "ng e2e"
|
||||||
|
},
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@angular/animations": "^17.3.4",
|
||||||
|
"@angular/cdk": "^17.3.4",
|
||||||
|
"@angular/common": "^17.3.4",
|
||||||
|
"@angular/compiler": "^17.3.4",
|
||||||
|
"@angular/core": "^17.3.4",
|
||||||
|
"@angular/forms": "^17.3.4",
|
||||||
|
"@angular/material": "^17.3.4",
|
||||||
|
"@angular/material-moment-adapter": "^17.3.4",
|
||||||
|
"@angular/platform-browser": "^17.3.4",
|
||||||
|
"@angular/platform-browser-dynamic": "^17.3.4",
|
||||||
|
"@angular/router": "^17.3.4",
|
||||||
|
"material-design-icons": "^3.0.1",
|
||||||
|
"moment": "^2.29.1",
|
||||||
|
"primeflex": "^3.3.1",
|
||||||
|
"primeicons": "^7.0.0",
|
||||||
|
"primeng": "^17.13.0",
|
||||||
|
"rxjs": "~6.6.0",
|
||||||
|
"tslib": "^2.0.0",
|
||||||
|
"web-animations-js": "^2.3.2",
|
||||||
|
"zone.js": "~0.14.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@angular-devkit/build-angular": "^17.3.4",
|
||||||
|
"@angular/cli": "^17.3.4",
|
||||||
|
"@angular/compiler-cli": "^17.3.4",
|
||||||
|
"@types/jasmine": "~3.8.0",
|
||||||
|
"@types/jasminewd2": "~2.0.3",
|
||||||
|
"@types/node": "^12.11.1",
|
||||||
|
"codelyzer": "^6.0.0",
|
||||||
|
"jasmine-core": "~3.8.0",
|
||||||
|
"jasmine-spec-reporter": "~5.0.0",
|
||||||
|
"karma": "~6.4.1",
|
||||||
|
"karma-chrome-launcher": "~3.1.0",
|
||||||
|
"karma-coverage-istanbul-reporter": "~2.0.0",
|
||||||
|
"karma-jasmine": "~4.0.0",
|
||||||
|
"karma-jasmine-html-reporter": "^1.6.0",
|
||||||
|
"protractor": "~7.0.0",
|
||||||
|
"ts-node": "~8.3.0",
|
||||||
|
"tslint": "~6.1.0",
|
||||||
|
"typescript": "~5.4.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-form-field {
|
||||||
|
font-size: 14px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
td.mat-column-edit, .mat-column-delete {
|
||||||
|
width: 35px;
|
||||||
|
padding-right: 2px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
<div class="edit-content">
|
||||||
|
<h3>Application Administrators</h3>
|
||||||
|
<div class="addlink">
|
||||||
|
<a [routerLink]='["/home/adminuser", 0]' [queryParams]="{returnUrl:'/home/adminuser'}">
|
||||||
|
<i class="material-icons">playlist_add</i>
|
||||||
|
Add User
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<mat-form-field>
|
||||||
|
<mat-label>Filter</mat-label>
|
||||||
|
<input matInput (keyup)="applyFilter($event)" placeholder="Name all column" #input>
|
||||||
|
</mat-form-field>
|
||||||
|
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
|
||||||
|
|
||||||
|
<!-- Desciption Column -->
|
||||||
|
<ng-container matColumnDef="stafflinkNo">
|
||||||
|
<th mat-mdc-header-cell *matHeaderCellDef mat-sort-header>Stafflink Id</th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.stafflinkNo}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- name Column -->
|
||||||
|
<ng-container matColumnDef="name">
|
||||||
|
<th mat-mdc-header-cell *matHeaderCellDef mat-sort-header>Name</th>
|
||||||
|
<td mat-cell *matCellDef="let element">{{element.name}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- roleType Column -->
|
||||||
|
<ng-container matColumnDef="roleType">
|
||||||
|
<th mat-mdc-header-cell *matHeaderCellDef mat-sort-header>Role</th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.roleType}}
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
<!-- ValidationPoint Column -->
|
||||||
|
<ng-container matColumnDef="validationPoint">
|
||||||
|
<th mat-mdc-header-cell *matHeaderCellDef mat-sort-header>Validation Point</th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.validationPoint}}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container matColumnDef="edit" stickyEnd>
|
||||||
|
<th mat-mdc-header-cell *matHeaderCellDef>Edit</th>
|
||||||
|
<td mat-cell *matCellDef="let element">
|
||||||
|
<a [routerLink]='["/home/adminuser", element.id]' [queryParams]="{returnUrl:'/home/adminuser'}">
|
||||||
|
<mat-icon>edit</mat-icon>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
<!-- active Column -->
|
||||||
|
<ng-container matColumnDef="active">
|
||||||
|
<th mat-mdc-header-cell *matHeaderCellDef mat-sort-header>Active</th>
|
||||||
|
<td mat-cell *matCellDef="let element">
|
||||||
|
<mat-checkbox [checked]="element.active" name="active" color="primary">
|
||||||
|
</mat-checkbox>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="selection-pointer tr-mouseover"
|
||||||
|
(click)="showEdit(row)"></tr>
|
||||||
|
</table>
|
||||||
|
<mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 20]" showFirstLastButtons></mat-paginator>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
import { Component, Inject, OnInit, ViewChild, AfterViewInit } from '@angular/core';
|
||||||
|
|
||||||
|
import { AdminUserView } from '../models';
|
||||||
|
import { MatPaginator } from '@angular/material/paginator';
|
||||||
|
import { MatSort } from '@angular/material/sort';
|
||||||
|
import { MatTableDataSource } from '@angular/material/table';
|
||||||
|
|
||||||
|
import { take } from 'rxjs/operators';
|
||||||
|
import { Subscription } from 'rxjs';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { AdminUserService } from './adminuser.service';
|
||||||
|
import { MessageService } from 'primeng/api';
|
||||||
|
@Component({
|
||||||
|
selector: 'adminuser-list',
|
||||||
|
templateUrl: './adminuser.component.html',
|
||||||
|
styleUrls: ['./adminuser.component.css']
|
||||||
|
})
|
||||||
|
export class AdminUserComponent implements OnInit, AfterViewInit {
|
||||||
|
dataSource: MatTableDataSource<AdminUserView>;
|
||||||
|
private subscription: Subscription = new Subscription();
|
||||||
|
displayedColumns: string[] = ['stafflinkNo', 'name', 'roleType', 'validationPoint', 'active', 'edit'];
|
||||||
|
msg = "[AdminUser component]";
|
||||||
|
@ViewChild(MatSort) sort!: MatSort;
|
||||||
|
@ViewChild(MatPaginator) paginator!: MatPaginator;
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
private store: Store<appValidationState>
|
||||||
|
*/
|
||||||
|
constructor(
|
||||||
|
private adminUserService: AdminUserService,
|
||||||
|
private router: Router,
|
||||||
|
private messageService: MessageService,
|
||||||
|
) {
|
||||||
|
|
||||||
|
this.dataSource = new MatTableDataSource<AdminUserView>();
|
||||||
|
}
|
||||||
|
//KeyboardEvent
|
||||||
|
applyFilter(event: Event) {
|
||||||
|
const filterValue = (event.target as HTMLInputElement).value;
|
||||||
|
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.subscription.add(
|
||||||
|
this.adminUserService.loadAdminusers().subscribe(result => {
|
||||||
|
// console.log(this.msg + "onInit load Data", result);
|
||||||
|
this.dataSource.data = result.data;
|
||||||
|
}, error => {
|
||||||
|
|
||||||
|
console.log("error ", error);
|
||||||
|
})
|
||||||
|
|
||||||
|
);
|
||||||
|
|
||||||
|
/*
|
||||||
|
this.store.dispatch(validationActions.LoadValidationpoints());
|
||||||
|
this.store.pipe(select(validationSelector.getAllValidations)).subscribe(result => this.dataSource.data = result);
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
this.dataSource.sort = this.sort;
|
||||||
|
this.dataSource.paginator = this.paginator;
|
||||||
|
}
|
||||||
|
|
||||||
|
showEdit(item: AdminUserView) {
|
||||||
|
console.log(this.msg + "on row click", item);
|
||||||
|
this.router.navigate(['/home/adminuser/' + item.id], { queryParams: { returnUrl: '/home/adminuser' } });
|
||||||
|
}
|
||||||
|
deleteItem(id: number): void {
|
||||||
|
|
||||||
|
this.adminUserService.deleteAdminuser(id)
|
||||||
|
.pipe(take(1))
|
||||||
|
.subscribe(result => {
|
||||||
|
console.log(this.msg + " deleteItem success", result);
|
||||||
|
let data = this.dataSource.data;
|
||||||
|
let index: number = data.findIndex(d => d.id === id);
|
||||||
|
console.log(this.msg + "delete from datasource");
|
||||||
|
data.splice(index, 1)
|
||||||
|
this.dataSource.data = data;
|
||||||
|
},
|
||||||
|
error => console.error(error));
|
||||||
|
console.log(this.msg + "click button to delete");
|
||||||
|
}
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.subscription.unsubscribe();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-form-field {
|
||||||
|
font-size: 14px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
td.mat-column-edit, .mat-column-delete {
|
||||||
|
width: 35px;
|
||||||
|
padding-right: 2px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
<div class="edit-content">
|
||||||
|
<div class="title">
|
||||||
|
{{getEditText()}}
|
||||||
|
</div>
|
||||||
|
<form [formGroup]="adminuserForm" (ngSubmit)="onSubmit()" class="flex flex-column gap-2">
|
||||||
|
<div class="flex flex-column">
|
||||||
|
<mat-card>
|
||||||
|
<div>
|
||||||
|
<mat-form-field class="w-full" appearance="outline" [hideRequiredMarker]="true">
|
||||||
|
<mat-label>Stafflink Number<strong class="app-require">*</strong></mat-label>
|
||||||
|
<input matInput formControlName="stafflinkNo" (blur)="searchUser()" maxlength="10" name="stafflinkno"
|
||||||
|
placeholder="Stafflink Number" required #mystaffid>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<mat-form-field class="w-full" appearance="outline">
|
||||||
|
<mat-label>Name</mat-label>
|
||||||
|
<input matInput formControlName="name" maxlength="100" name="name" placeholder="Name" readonly>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<mat-form-field class="w-full" appearance="outline" [hideRequiredMarker]="true">
|
||||||
|
<mat-label>Role<strong class="app-require">*</strong></mat-label>
|
||||||
|
<mat-select formControlName="roleType" required>
|
||||||
|
<mat-option>--</mat-option>
|
||||||
|
<mat-option *ngFor="let role of Roles" [value]="role.id">
|
||||||
|
{{role.description}}
|
||||||
|
</mat-option>
|
||||||
|
</mat-select>
|
||||||
|
<mat-error *ngIf="f['roleType'].hasError('required')">Please choose Role</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<mat-form-field class="w-full" appearance="outline" [hideRequiredMarker]="true">
|
||||||
|
<mat-label>Validation Point<strong class="app-require">*</strong></mat-label>
|
||||||
|
<mat-select formControlName="validationPointId" required>
|
||||||
|
<mat-option>--</mat-option>
|
||||||
|
<mat-option *ngFor="let validationPoint of validationPoints" [value]="validationPoint.id">
|
||||||
|
{{validationPoint.description}}
|
||||||
|
</mat-option>
|
||||||
|
</mat-select>
|
||||||
|
<mat-error *ngIf="f['validationPointId'].hasError('required')">Please choose validation Point</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<mat-checkbox formControlName="active" color="primary">Active</mat-checkbox>
|
||||||
|
</div>
|
||||||
|
</mat-card>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-content-end mt-2">
|
||||||
|
<button type="submit" class="mr-2" mat-raised-button color="primary" [disabled]="isFieldsChange">Submit</button>
|
||||||
|
<button type="button" mat-raised-button color="primary" (click)="goBack()">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<!--pre>{{ adminuserForm.value|json}}</pre-->
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,178 @@
|
|||||||
|
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
|
||||||
|
import { Router, ActivatedRoute } from '@angular/router';
|
||||||
|
import { UntypedFormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||||
|
import { Subject, pipe, Subscription } from 'rxjs';
|
||||||
|
|
||||||
|
import { AdminUser, Lookup, userRole } from '../models';
|
||||||
|
import { LookupService, Utils } from '../shares';
|
||||||
|
import { AdminUserService } from './adminuser.service';
|
||||||
|
import { MessageService } from 'primeng/api';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
templateUrl: 'adminuser.edit.component.html',
|
||||||
|
selector: 'adminuser-edit',
|
||||||
|
styleUrls: ['adminuser.edit.component.css']
|
||||||
|
})
|
||||||
|
export class AdminUserEditComponent implements OnInit, OnDestroy {
|
||||||
|
returnUrl = '';
|
||||||
|
loginUser = '';
|
||||||
|
_id = -1;
|
||||||
|
Roles?: Lookup[];
|
||||||
|
validationPoints?: Lookup[];
|
||||||
|
msg = "[adminUser Component] ";
|
||||||
|
//for focus input
|
||||||
|
// @ViewChild('mystaffid') mystaffNo!: MatInput;
|
||||||
|
isChange = true; // disable use false//true for not disable. make sure it true is disable button.
|
||||||
|
private subscription: Subscription = new Subscription();
|
||||||
|
subChanged$ = new Subject<boolean>();
|
||||||
|
adminuserForm = this.formBuilder.group({
|
||||||
|
id: [0], //Validators.required
|
||||||
|
stafflinkNo: [''], //Validators.required
|
||||||
|
name: [''], //Validators.required
|
||||||
|
addedBy: [''], //Validators.required
|
||||||
|
addedOn: [], //Validators.required
|
||||||
|
active: [false], //Validators.required
|
||||||
|
roleType: [0, Validators.required],
|
||||||
|
validationPointId: [0, Validators.required]
|
||||||
|
});
|
||||||
|
constructor(private formBuilder: UntypedFormBuilder,
|
||||||
|
private adminUserService: AdminUserService,
|
||||||
|
private messageService: MessageService,
|
||||||
|
private lookupService: LookupService,
|
||||||
|
private router: Router, private route: ActivatedRoute,
|
||||||
|
) {
|
||||||
|
|
||||||
|
this.Roles = [];
|
||||||
|
let item: Lookup = { id: userRole.Admin, categoryId: userRole.Admin, description: 'Admin' };
|
||||||
|
this.Roles.push(item);
|
||||||
|
item = { id: userRole.Normal, categoryId: userRole.Normal, description: 'Normal' };
|
||||||
|
this.Roles.push(item);
|
||||||
|
this.subscription.add(this.lookupService.loadValidationPoint().subscribe(x => this.validationPoints = x.data,
|
||||||
|
error => console.error(error)));
|
||||||
|
}
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
|
||||||
|
const id = Number(this.route.snapshot.paramMap.get('id'));
|
||||||
|
// now load thing up
|
||||||
|
const user = Utils.getCurrentUser();
|
||||||
|
// console.log(this.msg + "current login user ", user);
|
||||||
|
if (user.username === '')
|
||||||
|
alert("you are not login.");
|
||||||
|
else
|
||||||
|
this.loginUser = user.firstName;
|
||||||
|
this._id = id;
|
||||||
|
//console.log(this.msg + " " + id );
|
||||||
|
this.subscription.add(this.adminuserForm.valueChanges.subscribe(x => this.isChange = false));
|
||||||
|
this.subscription.add(this.subChanged$.subscribe(x => this.isChange = x));
|
||||||
|
if (id > 0) {
|
||||||
|
this.subscription.add(this.adminUserService.loadAdminuserById(id).subscribe(x => this.assignValue(x.data), error =>
|
||||||
|
console.error(error.message)));
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
getEditText(): string {
|
||||||
|
if (this._id > 0)
|
||||||
|
return "Edit Admin User";
|
||||||
|
else
|
||||||
|
return "New Admin User";
|
||||||
|
}
|
||||||
|
// this for disable submit button
|
||||||
|
get isFieldsChange() {
|
||||||
|
const chan = this.isChange || !this.adminuserForm.valid; // this disable so need true valid = true not
|
||||||
|
//console.log(this.msg + 'is fields change', chan);
|
||||||
|
return chan;
|
||||||
|
}
|
||||||
|
searchUser(): void {
|
||||||
|
const staffid = this.adminuserForm.controls["stafflinkNo"].value;
|
||||||
|
// console.log(this.msg + " the staffid is ", staffid);
|
||||||
|
if (staffid != '') {
|
||||||
|
//this.form.controls['your form control name'].value
|
||||||
|
this.adminUserService.getStaffLinkId(staffid).subscribe(x => {
|
||||||
|
//console.log(this.msg + " this is stafflink no ", x);
|
||||||
|
// now get current user.
|
||||||
|
|
||||||
|
if (x.data) {
|
||||||
|
//this.error = true;
|
||||||
|
const fname = x.data.firstName + " " + x.data.lastName;
|
||||||
|
this.adminuserForm.patchValue({ name: fname, addedBy: this.loginUser });
|
||||||
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
|
||||||
|
this.messageService.add({ severity: 'error', summary: 'Error', detail: "can not find stafflinkNo:" + staffid });
|
||||||
|
// this.adminuserForm.patchValue({name:x.data.firstName + " " + x.data.lastName
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
|
||||||
|
console.log("error ", error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
|
||||||
|
this.messageService.add({ severity: 'error', summary: 'Error', detail: "please enter staff link no" });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
assignValue(adminuser: AdminUser): void {
|
||||||
|
this.adminuserForm.patchValue({
|
||||||
|
id: adminuser.id,
|
||||||
|
stafflinkNo: adminuser.stafflinkNo,
|
||||||
|
name: adminuser.name,
|
||||||
|
addedBy: adminuser.addedBy,
|
||||||
|
addedOn: adminuser.addedOn,
|
||||||
|
active: adminuser.active,
|
||||||
|
roleType: adminuser.roleType,
|
||||||
|
validationPointId: adminuser.validationPointId
|
||||||
|
});
|
||||||
|
// disable use false//true for not disable.
|
||||||
|
this.subChanged$.next(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
// convenience getter for easy access in form fields
|
||||||
|
get f() { return this.adminuserForm.controls; }
|
||||||
|
|
||||||
|
onSubmit(): void {
|
||||||
|
// if form valid then go save
|
||||||
|
//make sure
|
||||||
|
const okToSave = this.adminuserForm.valid;
|
||||||
|
if (okToSave) {
|
||||||
|
let adminuserValue = this.adminuserForm.value;
|
||||||
|
|
||||||
|
let adminuser: AdminUser = {
|
||||||
|
id: adminuserValue.id,
|
||||||
|
stafflinkNo: adminuserValue.stafflinkNo,
|
||||||
|
name: adminuserValue.name,
|
||||||
|
addedBy: adminuserValue.addedBy,
|
||||||
|
addedOn: new Date(),
|
||||||
|
active: adminuserValue.active,
|
||||||
|
roleType: adminuserValue.roleType,
|
||||||
|
validationPointId: adminuserValue.validationPointId,
|
||||||
|
};
|
||||||
|
this.subscription.add(
|
||||||
|
this.adminUserService.saveAdminuser(adminuser).subscribe(x => {
|
||||||
|
if (x.statusCode >= 1) {
|
||||||
|
this.messageService.add({ severity: 'success', summary: 'Success', detail: "Save is OK" });
|
||||||
|
this.router.navigate([this.returnUrl]);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
|
||||||
|
this.messageService.add({ severity: 'error', summary: 'Error', detail: "Fail to save" });
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
|
||||||
|
console.log("error ", error);
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
goBack(): void {
|
||||||
|
this.router.navigate([this.returnUrl]);
|
||||||
|
}
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.subscription.unsubscribe();
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
|
||||||
|
import { Injectable, Inject } from '@angular/core';
|
||||||
|
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
import { AdminUser, AdminUserView, ResultModel,ConfigureUrl,User } from '../models';
|
||||||
|
import { AppSettingService } from '../shares';
|
||||||
|
|
||||||
|
@Injectable({ providedIn: 'root' })
|
||||||
|
export class AdminUserService {
|
||||||
|
|
||||||
|
constructor(private http: HttpClient,
|
||||||
|
private appSetting :AppSettingService
|
||||||
|
) {}
|
||||||
|
loadAdminusers(): Observable<ResultModel<AdminUserView[]>> {
|
||||||
|
let config = { headers : { 'Content-Type': 'application/json' } };
|
||||||
|
//const baseUrl = ConfigureUrl.baseUrl + "/"+ ConfigureUrl.adminUserUrl;
|
||||||
|
const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.adminUserUrl;
|
||||||
|
return this.http.get<ResultModel<AdminUserView[]>>(baseUrl);
|
||||||
|
}
|
||||||
|
getStaffLinkId(staffid:string) :Observable<ResultModel<User>>{
|
||||||
|
const userUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.userByStaffIdUrl;
|
||||||
|
let params = new HttpParams().set("stafflinkNo", ""+staffid);
|
||||||
|
let headers = new HttpHeaders().set('Content-Type', 'application/json');
|
||||||
|
let options = {
|
||||||
|
headers: headers,
|
||||||
|
params: params
|
||||||
|
};
|
||||||
|
return this.http.get<ResultModel<User>>(userUrl, options);
|
||||||
|
}
|
||||||
|
loadAdminuserById(id:number): Observable<ResultModel<AdminUser>> {
|
||||||
|
const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.adminUserUrl;
|
||||||
|
let params = new HttpParams().set("id", ""+id);
|
||||||
|
let headers = new HttpHeaders().set('Content-Type', 'application/json');
|
||||||
|
let options = {
|
||||||
|
headers: headers,
|
||||||
|
params: params
|
||||||
|
};
|
||||||
|
//return this.http.get<AdminUser>(this.baseUrl + 'api/Adminuser/LoadAdminuserById',options);
|
||||||
|
return this.http.get<ResultModel<AdminUser>>(baseUrl + "/" + id);
|
||||||
|
}
|
||||||
|
saveAdminuser(jsData:AdminUser): Observable<ResultModel<number>> { //insert Adminuser
|
||||||
|
let config = { headers : { 'Content-Type': 'application/json' } };
|
||||||
|
const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.adminUserUrl;
|
||||||
|
return this.http.post<ResultModel<number>>(baseUrl, jsData, config);
|
||||||
|
}
|
||||||
|
deleteAdminuser(id:number): Observable<ResultModel<number>>{
|
||||||
|
const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.adminUserUrl;
|
||||||
|
let config = { headers : { 'Content-Type': 'application/json' } };
|
||||||
|
return this.http.delete<ResultModel<number>>(baseUrl + "/" + id);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
export * from './adminuser.component';
|
||||||
|
export * from './adminuser.edit.component';
|
||||||
|
export * from './adminuser.service';
|
||||||
|
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { RouterModule, Routes } from '@angular/router';
|
||||||
|
import { AdminUserComponent, AdminUserEditComponent } from './adminuser';
|
||||||
|
import { ConcessionTypeComponent, ConcessiontypeEditComponent} from './concessiontype';
|
||||||
|
import { ConcessionValidationComponent, ConcessionValidationEditComponent } from './concessionValidation';
|
||||||
|
import { HomeComponent } from './home';
|
||||||
|
import { LoginComponent } from './login';
|
||||||
|
import { ValidationPointComponent, ValidationpointEditComponent } from './validationPoint';
|
||||||
|
import { AuthGuard } from './route-guard';
|
||||||
|
import {ConcessionvalidationReportComponent} from './concessionvalidationreport';
|
||||||
|
const routes: Routes = [
|
||||||
|
|
||||||
|
{ path: 'login', component: LoginComponent },
|
||||||
|
{ path: 'home', component: HomeComponent ,
|
||||||
|
children: [
|
||||||
|
{ path: 'adminuser', component: AdminUserComponent, canActivate: [AuthGuard], data: { roleAllowed: 'Admin' }} ,
|
||||||
|
{ path: 'adminuser/:id', component: AdminUserEditComponent, canActivate: [AuthGuard], data: { roleAllowed: 'Admin' }},
|
||||||
|
{ path: 'validationpoint', component: ValidationPointComponent, canActivate: [AuthGuard], data: { roleAllowed: 'Admin' } },
|
||||||
|
{ path: 'validationpoint/:id', component: ValidationpointEditComponent,canActivate: [AuthGuard], data: { roleAllowed: 'Admin' } },
|
||||||
|
{ path: 'concessiontype', component:ConcessionTypeComponent, canActivate: [AuthGuard], data: { roleAllowed: 'Admin' }},
|
||||||
|
{ path: 'concessiontype/:id', component: ConcessiontypeEditComponent, canActivate: [AuthGuard], data: { roleAllowed: 'Admin' }},
|
||||||
|
{ path: 'concessionvalidation', component: ConcessionValidationComponent, canActivate: [AuthGuard]},
|
||||||
|
{ path: 'concessionvalidation/:id', component: ConcessionValidationEditComponent, canActivate: [AuthGuard]},
|
||||||
|
|
||||||
|
{ path: 'app-concessionvalidation-report', component: ConcessionvalidationReportComponent, canActivate: [AuthGuard], data: { roleAllowed: 'Admin' }},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// otherwise redirect to home
|
||||||
|
{ path: '', redirectTo: 'login', pathMatch: 'full' },
|
||||||
|
{ path: '**', redirectTo: 'login' },
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [RouterModule.forRoot(routes)],
|
||||||
|
exports: [RouterModule]
|
||||||
|
})
|
||||||
|
export class AppRoutingModule { }
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
.container {
|
||||||
|
display:flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-sidenav-container,.mat-sidenav-content {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-sidenav{
|
||||||
|
width:250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
padding-left:25px;
|
||||||
|
padding-right:15px;
|
||||||
|
justify-content:space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-toolbar {
|
||||||
|
justify-content: start;
|
||||||
|
}
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
<router-outlet></router-outlet>
|
||||||
|
<p-confirmDialog></p-confirmDialog>
|
||||||
|
<p-toast></p-toast>
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-root',
|
||||||
|
templateUrl: './app.component.html',
|
||||||
|
styleUrls: ['./app.component.css']
|
||||||
|
})
|
||||||
|
export class AppComponent {
|
||||||
|
title = 'CarParkValidation';
|
||||||
|
}
|
||||||
@@ -0,0 +1,113 @@
|
|||||||
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
|
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, APP_INITIALIZER } from '@angular/core';
|
||||||
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||||
|
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
|
||||||
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
|
|
||||||
|
import { AppMaterialModule } from './material/app.material.module';
|
||||||
|
import { MAT_DATE_LOCALE } from '@angular/material/core';
|
||||||
|
|
||||||
|
import { HomeComponent } from './home';
|
||||||
|
import { LoginComponent } from './login';
|
||||||
|
import { NavMenuComponent } from './nav-menu/nav-menu.component';
|
||||||
|
import { NavToolarComponent } from './nav-toolbar/nav-toolbar.component';
|
||||||
|
import { AuthenticationService } from './user-services/authentication.service';
|
||||||
|
import { AppRoutingModule } from './app-routing.module';
|
||||||
|
import { AppComponent } from './app.component';
|
||||||
|
//here the custom components
|
||||||
|
import { SetupModuleModule } from './setup-module/setup-module.module';
|
||||||
|
import { ConcessionvalidationReportComponent } from './concessionvalidationreport';
|
||||||
|
|
||||||
|
import { AppSettingService, ErrorInterceptor, JwtInterceptor } from './shares';
|
||||||
|
import { ConcessionValidationService, ConcessionValidationEditComponent, ConcessionValidationComponent } from './concessionValidation';
|
||||||
|
import { NotFoundComponent } from './not-found/not-found.component';
|
||||||
|
import { ServerErrorComponent } from './server-error/server-error.component';
|
||||||
|
import { ConfirmDialogModule } from 'primeng/confirmdialog';
|
||||||
|
import { ToastModule } from 'primeng/toast';
|
||||||
|
import { MessageService, ConfirmationService } from 'primeng/api'
|
||||||
|
import { CalendarModule } from 'primeng/calendar';
|
||||||
|
|
||||||
|
//and in the module providers
|
||||||
|
// { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS }
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [
|
||||||
|
AppComponent,
|
||||||
|
NavMenuComponent,
|
||||||
|
HomeComponent,
|
||||||
|
LoginComponent,
|
||||||
|
NavToolarComponent,
|
||||||
|
ConcessionValidationEditComponent,
|
||||||
|
ConcessionValidationComponent,
|
||||||
|
ConcessionvalidationReportComponent,
|
||||||
|
NotFoundComponent,
|
||||||
|
ServerErrorComponent,
|
||||||
|
],
|
||||||
|
imports: [
|
||||||
|
BrowserModule,
|
||||||
|
AppRoutingModule,
|
||||||
|
ReactiveFormsModule,
|
||||||
|
FormsModule,
|
||||||
|
HttpClientModule,
|
||||||
|
AppMaterialModule,
|
||||||
|
SetupModuleModule,
|
||||||
|
AppRoutingModule,
|
||||||
|
BrowserAnimationsModule,
|
||||||
|
|
||||||
|
ConfirmDialogModule,
|
||||||
|
ToastModule,
|
||||||
|
CalendarModule,
|
||||||
|
|
||||||
|
],
|
||||||
|
providers: [
|
||||||
|
MessageService,
|
||||||
|
ConfirmationService,
|
||||||
|
{
|
||||||
|
provide: APP_INITIALIZER,
|
||||||
|
multi: true,
|
||||||
|
deps: [AppSettingService],
|
||||||
|
useFactory: (appConfigService: AppSettingService) => () => appConfigService.loadAppSetting()
|
||||||
|
},
|
||||||
|
{ provide: MAT_DATE_LOCALE, useValue: 'en-GB', multi: true },
|
||||||
|
|
||||||
|
{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
|
||||||
|
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
|
||||||
|
],
|
||||||
|
bootstrap: [AppComponent]
|
||||||
|
})
|
||||||
|
export class AppModule { }
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
|
||||||
|
make star * small
|
||||||
|
check start expiry make the
|
||||||
|
the banner is red.
|
||||||
|
#e02c2c
|
||||||
|
*/
|
||||||
|
/*
|
||||||
|
ng build --base-href "/CarParkValidation/"
|
||||||
|
ng build --base-href "/CarParkValidation/" -c production
|
||||||
|
*/
|
||||||
|
/*
|
||||||
|
downgrade angular
|
||||||
|
ng --version
|
||||||
|
npm uninstall -g @angular/cli
|
||||||
|
npm cache clean --force
|
||||||
|
|
||||||
|
npm install -g @angular/cli@10 or 11
|
||||||
|
ng --version
|
||||||
|
|
||||||
|
|
||||||
|
ng add @angular/material@10
|
||||||
|
npm install ngx-toastr
|
||||||
|
npm install ngx-ui-loader
|
||||||
|
npm install moment
|
||||||
|
npm i @angular/material-moment-adapter@10
|
||||||
|
npm i @angular/flex-layout@10.0.0-beta.32
|
||||||
|
npm install --save classlist.js
|
||||||
|
npm install --save web-animations-js
|
||||||
|
in the tsconfig.json
|
||||||
|
change "target": "es2015", to target: es5 for IE
|
||||||
|
|
||||||
|
*/
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-form-field {
|
||||||
|
font-size: 14px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
td.mat-column-edit, .mat-column-delete {
|
||||||
|
width: 35px;
|
||||||
|
padding-right: 2px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,98 @@
|
|||||||
|
<div class="edit-content">
|
||||||
|
<h3>Concession Validation</h3>
|
||||||
|
<div *ngIf="isAdmin">
|
||||||
|
<div class="flex flex-row gap-2 w-full">
|
||||||
|
<mat-form-field>
|
||||||
|
<mat-label>Choose a from date</mat-label>
|
||||||
|
<input matInput [(ngModel)]="fromDate" (focus)="pickerfrom.open()" [matDatepicker]="pickerfrom">
|
||||||
|
<mat-datepicker-toggle matSuffix [for]="pickerfrom"></mat-datepicker-toggle>
|
||||||
|
<mat-datepicker #pickerfrom></mat-datepicker>
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-form-field>
|
||||||
|
<mat-label>Choose a to date</mat-label>
|
||||||
|
<input matInput [(ngModel)]="toDate" (focus)="pickerto.open()" [matDatepicker]="pickerto">
|
||||||
|
<mat-datepicker-toggle matSuffix [for]="pickerto"></mat-datepicker-toggle>
|
||||||
|
<mat-datepicker #pickerto></mat-datepicker>
|
||||||
|
</mat-form-field>
|
||||||
|
<button mat-mini-fab color="primary" aria-label="loading record" (click)="onLoad()" matTooltip="Loading">
|
||||||
|
<span class="material-icons">
|
||||||
|
flash_on
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="addlink">
|
||||||
|
<a [routerLink]='["/home/concessionvalidation", 0]' [queryParams]="{returnUrl:'/home/concessionvalidation'}"
|
||||||
|
(click)="setDate()">
|
||||||
|
<span class="inline-icon material-icons">add_task</span>
|
||||||
|
Add Concession Validation
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
|
||||||
|
<!-- validateDate Column -->
|
||||||
|
<ng-container matColumnDef="validateDate">
|
||||||
|
<th mat-mdc-header-cell *matHeaderCellDef mat-sort-header>Date </th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.validateDate | date: 'dd/MM/yyyy HH:mm'}} </td>
|
||||||
|
</ng-container>
|
||||||
|
<!-- concessionType Column -->
|
||||||
|
<ng-container matColumnDef="concessionType">
|
||||||
|
<th mat-mdc-header-cell *matHeaderCellDef mat-sort-header>Concession Type </th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.concessionType}} </td>
|
||||||
|
</ng-container>
|
||||||
|
<!-- concessionCard Column -->
|
||||||
|
<ng-container matColumnDef="concessionCard">
|
||||||
|
<th mat-mdc-header-cell *matHeaderCellDef mat-sort-header>Concession Card Number</th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.concessionCard}} </td>
|
||||||
|
</ng-container>
|
||||||
|
<!-- concessionHolder Column -->
|
||||||
|
<ng-container matColumnDef="concessionHolder">
|
||||||
|
<th mat-mdc-header-cell *matHeaderCellDef mat-sort-header>Concession Holder Name</th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.concessionHolder}} </td>
|
||||||
|
</ng-container>
|
||||||
|
<!-- validationPoint Column -->
|
||||||
|
<ng-container matColumnDef="validationPoint">
|
||||||
|
<th mat-mdc-header-cell *matHeaderCellDef mat-sort-header>Validation Point </th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.validationPoint}} </td>
|
||||||
|
</ng-container>
|
||||||
|
<!-- concessionExpiry Column -->
|
||||||
|
<ng-container matColumnDef="concessionExpiry">
|
||||||
|
<th mat-mdc-header-cell *matHeaderCellDef>Expiry date checked</th>
|
||||||
|
<td mat-cell *matCellDef="let element">
|
||||||
|
<mat-checkbox [checked]="element.concessionExpiry" name="concessionExpiry" color="primary">
|
||||||
|
</mat-checkbox>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
<div *ngIf="isAdmin">
|
||||||
|
<!-- staffFirstName Column -->
|
||||||
|
<ng-container matColumnDef="staffFirstName">
|
||||||
|
<th mat-mdc-header-cell *matHeaderCellDef mat-sort-header>Staff Name</th>
|
||||||
|
<td mat-cell *matCellDef="let element">{{element.staffFirstName}} {{element.staffLastName}} </td>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container matColumnDef="edit" stickyEnd>
|
||||||
|
<div *ngIf="isAdmin">
|
||||||
|
<th mat-mdc-header-cell *matHeaderCellDef>Edit</th>
|
||||||
|
<td mat-cell *matCellDef="let element">
|
||||||
|
|
||||||
|
<!--a [routerLink]='["/home/concessionvalidation", element.id]' [queryParams]="{returnUrl:'/home/concessionvalidation'}">
|
||||||
|
<mat-icon>edit</mat-icon>
|
||||||
|
</a-->
|
||||||
|
<button mat-icon-button (click)="showEdit(element)" matTooltip="Edit"><mat-icon>edit</mat-icon></button>
|
||||||
|
</td>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container matColumnDef="delete" stickyEnd>
|
||||||
|
<th mat-mdc-header-cell *matHeaderCellDef>Delete</th>
|
||||||
|
<td mat-cell *matCellDef="let element">
|
||||||
|
<a (click)='deleteItem(element.id)'>
|
||||||
|
<mat-icon matTooltip="Delete Record">delete</mat-icon>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="tr-mouseover"></tr>
|
||||||
|
</table>
|
||||||
|
<mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 20]" showFirstLastButtons></mat-paginator>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,166 @@
|
|||||||
|
import { Component, OnInit, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
|
||||||
|
|
||||||
|
import { ConcessionValidation } from '../models';
|
||||||
|
import { MatPaginator } from '@angular/material/paginator';
|
||||||
|
import { MatSort } from '@angular/material/sort';
|
||||||
|
import { MatTableDataSource } from '@angular/material/table';
|
||||||
|
import { Utils } from '../shares';
|
||||||
|
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { Subscription } from 'rxjs';
|
||||||
|
import { ConcessionValidationService } from './concessionvalidation.service';
|
||||||
|
|
||||||
|
import { MatDialog } from '@angular/material/dialog';
|
||||||
|
import { ConfirmationService, MessageService } from 'primeng/api';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'concessionvalidation-list',
|
||||||
|
templateUrl: './concessionvalidation.component.html',
|
||||||
|
styleUrls: ['./concessionvalidation.component.css']
|
||||||
|
})
|
||||||
|
export class ConcessionValidationComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||||
|
dataSource: MatTableDataSource<ConcessionValidation>;
|
||||||
|
isAdmin = false;
|
||||||
|
isAllowFilter = true;
|
||||||
|
fromDate = new Date();
|
||||||
|
toDate = new Date();
|
||||||
|
username = '';
|
||||||
|
private subscription: Subscription = new Subscription();
|
||||||
|
displayedColumns: string[] =
|
||||||
|
[
|
||||||
|
'validateDate',
|
||||||
|
'concessionType',
|
||||||
|
'concessionCard',
|
||||||
|
'concessionHolder',
|
||||||
|
'concessionExpiry',
|
||||||
|
'validationPoint',
|
||||||
|
];
|
||||||
|
msg = "[ConcessionValidation component]";
|
||||||
|
@ViewChild(MatSort) sort!: MatSort;
|
||||||
|
@ViewChild(MatPaginator) paginator!: MatPaginator;
|
||||||
|
|
||||||
|
/*
|
||||||
|
private store: Store<appValidationState>
|
||||||
|
*/
|
||||||
|
constructor(
|
||||||
|
private concessionValidationService: ConcessionValidationService,
|
||||||
|
private router: Router,
|
||||||
|
private messageService: MessageService,
|
||||||
|
private confirmationService: ConfirmationService,
|
||||||
|
public dialog: MatDialog,
|
||||||
|
) {
|
||||||
|
this.dataSource = new MatTableDataSource<ConcessionValidation>();
|
||||||
|
this.isAdmin = Utils.getIsAdmin();
|
||||||
|
if (this.isAdmin) {
|
||||||
|
this.displayedColumns =
|
||||||
|
[
|
||||||
|
'validateDate',
|
||||||
|
'concessionType',
|
||||||
|
'concessionCard',
|
||||||
|
'concessionHolder',
|
||||||
|
'concessionExpiry',
|
||||||
|
'validationPoint',
|
||||||
|
'staffFirstName',
|
||||||
|
'edit',
|
||||||
|
'delete'
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//KeyboardEvent
|
||||||
|
applyFilter(event: Event) {
|
||||||
|
const filterValue = (event.target as HTMLInputElement).value;
|
||||||
|
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||||
|
}
|
||||||
|
ngOnInit(): void {
|
||||||
|
const user = Utils.getCurrentUser();
|
||||||
|
// console.log(this.msg + "current login user ", user);
|
||||||
|
if (user.username === "") {
|
||||||
|
user.username = "60249360";
|
||||||
|
this.messageService.add({ severity: 'error', summary: 'Error', detail: "you are not login! using my number " + user.username });
|
||||||
|
}
|
||||||
|
this.username = user.username;
|
||||||
|
if (this.isAdmin)
|
||||||
|
this.username = '';
|
||||||
|
const dateRange = this.concessionValidationService.getDate();
|
||||||
|
// console.log("the date range for now ", dateRange);
|
||||||
|
if (dateRange.fromDate != '')
|
||||||
|
this.fromDate = dateRange.fromDate;
|
||||||
|
if (dateRange.toDate != '')
|
||||||
|
this.toDate = dateRange.toDate;
|
||||||
|
this.onLoad();
|
||||||
|
/*
|
||||||
|
this.store.dispatch(validationActions.LoadValidationpoints());
|
||||||
|
this.store.pipe(select(validationSelector.getAllValidations)).subscribe(result => this.dataSource.data = result);
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
this.dataSource.sort = this.sort;
|
||||||
|
this.dataSource.paginator = this.paginator;
|
||||||
|
}
|
||||||
|
onLoad(): void {
|
||||||
|
const cDate = this.fromDate;
|
||||||
|
const tDate = this.toDate;
|
||||||
|
|
||||||
|
this.subscription.add(
|
||||||
|
this.concessionValidationService.loadConcessionvalidationByStaffId(this.username, cDate, tDate).subscribe(result => {
|
||||||
|
//console.log(this.msg + "onInit load Data by staffId "+ this.username, result);
|
||||||
|
this.dataSource.data = result.data;
|
||||||
|
}, error => console.error(error.message))
|
||||||
|
);
|
||||||
|
|
||||||
|
//this.dataList$ = this.concessionValidationService.loadConcessionvalidationByStaffId(this.username, cDate, tDate)
|
||||||
|
// .pipe(catchError(err => {this.toastr.error(err.message); return EMPTY}));
|
||||||
|
}
|
||||||
|
setDate(): void {
|
||||||
|
this.concessionValidationService.setDateRange(this.fromDate, this.toDate);
|
||||||
|
}
|
||||||
|
showEdit(item: ConcessionValidation) {
|
||||||
|
// console.log(this.msg + "on row click", item);
|
||||||
|
this.setDate();
|
||||||
|
this.router.navigate(['/home/concessionvalidation/' + item.id], { queryParams: { returnUrl: '/home/concessionvalidation' } });
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteItem(id: number): void {
|
||||||
|
const message = "Are you sure you want to delete this?";
|
||||||
|
const title = " Confirmation";
|
||||||
|
this.confirmationService.confirm({
|
||||||
|
|
||||||
|
message: message,
|
||||||
|
header: title,
|
||||||
|
icon: 'pi pi-exclamation-triangle',
|
||||||
|
|
||||||
|
accept: () => {
|
||||||
|
this.concessionValidationService.deleteConcessionvalidation(id)
|
||||||
|
.subscribe(result => {
|
||||||
|
console.log(this.msg + " deleteItem success", result);
|
||||||
|
let data = this.dataSource.data;
|
||||||
|
let index: number = data.findIndex(d => d.id === id);
|
||||||
|
console.log(this.msg + "delete from datasource");
|
||||||
|
data.splice(index, 1)
|
||||||
|
this.dataSource.data = data;
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
|
||||||
|
|
||||||
|
console.log("error ", error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
reject: () => {
|
||||||
|
console.log(this.msg + "click on No to delete");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.subscription.unsubscribe();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-form-field {
|
||||||
|
font-size: 14px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
td.mat-column-edit, .mat-column-delete {
|
||||||
|
width: 35px;
|
||||||
|
padding-right: 2px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
<div class="edit-content">
|
||||||
|
<div class="title">
|
||||||
|
{{getEditText()}}
|
||||||
|
</div>
|
||||||
|
<form [formGroup]="concessionvalidationForm" (ngSubmit)="onSubmit()">
|
||||||
|
<div class="flex flex-column">
|
||||||
|
<mat-card>
|
||||||
|
<div class="m-2">
|
||||||
|
<mat-form-field class="w-full" appearance="outline" [hideRequiredMarker]="true">
|
||||||
|
<mat-label>Concession Card Number<strong class="app-require">*</strong></mat-label>
|
||||||
|
<input matInput formControlName="concessionCard" maxlength="60" name="concessionCard" (blur)="searchCard()"
|
||||||
|
placeholder="Concession Card Number" required>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="isAdmin" class="m-2">
|
||||||
|
<label for="time" class="mr-2">Current Date</label>
|
||||||
|
<p-calendar formControlName="validateDate" [showTime]="true" inputId="time"
|
||||||
|
dateFormat="dd/mm/yy"></p-calendar>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--end-->
|
||||||
|
<div class="m-2">
|
||||||
|
<mat-form-field class="w-full" appearance="outline" [hideRequiredMarker]="true">
|
||||||
|
<mat-label>Concession Type<strong class="app-require">*</strong></mat-label>
|
||||||
|
<mat-select formControlName="concessionTypeId" required>
|
||||||
|
<mat-option>--</mat-option>
|
||||||
|
<mat-option *ngFor="let concessionType of concessionTypes" [value]="concessionType.id">
|
||||||
|
{{concessionType.description}}
|
||||||
|
</mat-option>
|
||||||
|
</mat-select>
|
||||||
|
<mat-error *ngIf="f['concessionTypeId'].hasError('required')">Please choose concession Type</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="m-2">
|
||||||
|
<mat-form-field class="w-full" appearance="outline" [hideRequiredMarker]="true">
|
||||||
|
<mat-label>Concession Holder Name<strong class="app-require">*</strong></mat-label>
|
||||||
|
<input matInput formControlName="concessionHolder" maxlength="100" name=""
|
||||||
|
placeholder="Concession Holder Name" required>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
<div class="m-2">
|
||||||
|
|
||||||
|
<mat-checkbox formControlName="concessionExpiry" color="primary" required>Expiry date checked <strong
|
||||||
|
class="app-require">*</strong></mat-checkbox>
|
||||||
|
|
||||||
|
<div *ngIf="isAdmin">
|
||||||
|
<mat-form-field class="w-full" appearance="outline" [hideRequiredMarker]="true">
|
||||||
|
<mat-label>Validation Point<strong class="app-require">*</strong></mat-label>
|
||||||
|
<mat-select formControlName="validationPointId" required (selectionChange)="onSelectionChange($event)">
|
||||||
|
<mat-option>--</mat-option>
|
||||||
|
<mat-option *ngFor="let validationPoint of validationPoints" [value]="validationPoint.id">
|
||||||
|
{{validationPoint.description}}
|
||||||
|
</mat-option>
|
||||||
|
</mat-select>
|
||||||
|
<mat-error *ngIf="f['validationPointId'].hasError('required')">Please choose validation Point</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</mat-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-content-end mt-2">
|
||||||
|
<button class="mr-2" type="submit" mat-raised-button color="primary" [disabled]="isFieldsChange">Submit</button>
|
||||||
|
<button type="button" mat-raised-button color="primary" (click)="goBack()">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<!--pre>{{ concessionvalidationForm.value|json}}</pre-->
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,277 @@
|
|||||||
|
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
|
||||||
|
import { Router, ActivatedRoute } from '@angular/router';
|
||||||
|
import { UntypedFormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||||
|
|
||||||
|
import { ConcessionValidation, Lookup, ResultModel } from '../models';
|
||||||
|
import { Subject, Subscription } from 'rxjs';
|
||||||
|
import { LookupService } from '../shares';
|
||||||
|
import { ConcessionValidationService } from './concessionvalidation.service';
|
||||||
|
import { Utils } from '../shares';
|
||||||
|
import { MatSelectChange } from '@angular/material/select';
|
||||||
|
import * as moment from 'moment';
|
||||||
|
import { MatDialog } from '@angular/material/dialog';
|
||||||
|
|
||||||
|
import { ThemePalette } from '@angular/material/core';
|
||||||
|
import { ConfirmationService, MessageService } from 'primeng/api';
|
||||||
|
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
templateUrl: 'concessionvalidation.edit.component.html',
|
||||||
|
selector: 'concessionvalidation-edit',
|
||||||
|
styleUrls: ['concessionvalidation.edit.component.css']
|
||||||
|
})
|
||||||
|
export class ConcessionValidationEditComponent implements OnInit, OnDestroy {
|
||||||
|
returnUrl = "";
|
||||||
|
msg = "[concessionvalidation edit Component] "
|
||||||
|
isChange = true; // disable use false//true for not disable. make sure it true is disable button.
|
||||||
|
subChanged$ = new Subject<boolean>();
|
||||||
|
_id = -1;
|
||||||
|
isAdmin = false;
|
||||||
|
concessionTypes?: Lookup[];
|
||||||
|
validationPoints?: Lookup[];
|
||||||
|
public color: ThemePalette = 'primary';
|
||||||
|
public minDate: moment.Moment;
|
||||||
|
public maxDate: moment.Moment;
|
||||||
|
private subscription: Subscription = new Subscription();
|
||||||
|
concessionvalidationForm = this.formBuilder.group({
|
||||||
|
id: [0], //Validators.required
|
||||||
|
validateDate: [], //Validators.required
|
||||||
|
concessionCard: ['', Validators.required],
|
||||||
|
concessionHolder: ['', Validators.required],
|
||||||
|
concessionExpiry: [false, Validators.required], //Validators.required
|
||||||
|
concessionTypeId: [-1, Validators.min(1)],
|
||||||
|
stafflinkNo: [''], //Validators.required
|
||||||
|
validationPointId: [-1, Validators.min(1)],
|
||||||
|
validationPoint: [''], //Validators.required
|
||||||
|
staffFirstName: [''], //Validators.required
|
||||||
|
staffLastName: [''], //Validators.required
|
||||||
|
staffEmail: [''], //Validators.required
|
||||||
|
active: [false], //Validators.required
|
||||||
|
});
|
||||||
|
constructor(private formBuilder: UntypedFormBuilder,
|
||||||
|
private lookupService: LookupService,
|
||||||
|
private concessionValidationService: ConcessionValidationService,
|
||||||
|
private router: Router,
|
||||||
|
public dialog: MatDialog,
|
||||||
|
private confirmationService: ConfirmationService,
|
||||||
|
private messageService: MessageService,
|
||||||
|
private route: ActivatedRoute) {
|
||||||
|
/*
|
||||||
|
this.concessionTypes = [];
|
||||||
|
let item:Lookup = {id:1,categoryId:0, description:'Health Care Card'};
|
||||||
|
this.concessionTypes.push(item);
|
||||||
|
item = {id:3,categoryId:1, description:'Gold Veterans Affairs Card'};
|
||||||
|
this.concessionTypes.push(item);
|
||||||
|
item = {id:3,categoryId:1, description:'Pensioner Concession Card'};
|
||||||
|
this.concessionTypes.push(item);
|
||||||
|
*/
|
||||||
|
|
||||||
|
}
|
||||||
|
searchCard(): void {
|
||||||
|
const cardNo = this.concessionvalidationForm.controls["concessionCard"].value;
|
||||||
|
if (cardNo != "") {
|
||||||
|
const card$ = this.concessionValidationService.loadConcessionvalidationByCard(cardNo);
|
||||||
|
this.subscription.add(card$.subscribe({
|
||||||
|
next: x => {
|
||||||
|
if (x.statusCode == 1) {
|
||||||
|
const data = x.data;
|
||||||
|
this.concessionvalidationForm.patchValue({
|
||||||
|
concessionHolder: data.concessionHolder,
|
||||||
|
concessionTypeId: data.concessionTypeId,
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
|
||||||
|
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
|
||||||
|
const id = Number(this.route.snapshot.paramMap.get('id'));
|
||||||
|
|
||||||
|
// now load thing up
|
||||||
|
this._id = id;
|
||||||
|
|
||||||
|
this.isAdmin = Utils.getIsAdmin();
|
||||||
|
|
||||||
|
this.subscription.add(this.lookupService.loadConcessionType().subscribe(x => this.concessionTypes = x.data,
|
||||||
|
error => console.error(error)));
|
||||||
|
this.subscription.add(this.lookupService.loadValidationPoint().subscribe(x => this.validationPoints = x.data,
|
||||||
|
error => console.error(error)));
|
||||||
|
this.subscription.add(this.concessionvalidationForm.valueChanges.subscribe(x => this.isChange = false));
|
||||||
|
this.subscription.add(this.subChanged$.subscribe(x => this.isChange = x));
|
||||||
|
const user = Utils.getCurrentUser();
|
||||||
|
|
||||||
|
console.log(this.msg + "current login user ", user);
|
||||||
|
if (user.username === "") {
|
||||||
|
user.username = "60249360";
|
||||||
|
this.messageService.add({ severity: 'error', summary: 'Error', detail: "you are not login! using my number " + user.username });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this._id < 1) {
|
||||||
|
this.concessionvalidationForm.patchValue({
|
||||||
|
validateDate: new Date(),
|
||||||
|
stafflinkNo: user.username,
|
||||||
|
staffFirstName: user.firstName,
|
||||||
|
staffLastName: user.lastName,
|
||||||
|
staffEmail: user.email,
|
||||||
|
validationPointId: user.validationPointId,
|
||||||
|
active: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.subscription.add(
|
||||||
|
this.concessionValidationService.loadConcessionvalidationById(id)
|
||||||
|
.subscribe(x => this.assignValue(x.data), error => console.log(error.message)));
|
||||||
|
// console.log(this.msg + " load from db"+id);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
get isFieldsChange() {
|
||||||
|
const chan = this.isChange || !this.concessionvalidationForm.valid; // this disable so need true valid = true not
|
||||||
|
const fvalid = this.concessionvalidationForm.valid;
|
||||||
|
// console.log(this.msg + "is fields change is valid: " + fvalid , chan,);
|
||||||
|
return chan;
|
||||||
|
}
|
||||||
|
getEditText(): string {
|
||||||
|
if (this._id > 0)
|
||||||
|
return "Edit Concession Validation";
|
||||||
|
else
|
||||||
|
return "New Concession Validation";
|
||||||
|
}
|
||||||
|
onChangeValidation($event: Event) {
|
||||||
|
//$event.target.value
|
||||||
|
//this.selectedCar = (event.target as HTMLSelectElement).value;
|
||||||
|
var val = ($event.target as HTMLSelectElement).value;
|
||||||
|
// console.log("the log for val " , val);
|
||||||
|
}
|
||||||
|
onSelectionChange($event: MatSelectChange) {
|
||||||
|
const text = $event.source.triggerValue;
|
||||||
|
// console.log("this is selectionchange "+ "'" + text + "'");
|
||||||
|
this.concessionvalidationForm.patchValue({ validationPoint: text });
|
||||||
|
}
|
||||||
|
assignValue(concessionvalidation: ConcessionValidation): void {
|
||||||
|
this.concessionvalidationForm.patchValue({
|
||||||
|
id: concessionvalidation.id,
|
||||||
|
validateDate: moment(concessionvalidation.validateDate).toDate(),
|
||||||
|
concessionCard: concessionvalidation.concessionCard,
|
||||||
|
concessionHolder: concessionvalidation.concessionHolder,
|
||||||
|
concessionExpiry: concessionvalidation.concessionExpiry,
|
||||||
|
concessionTypeId: concessionvalidation.concessionTypeId,
|
||||||
|
stafflinkNo: concessionvalidation.stafflinkNo,
|
||||||
|
staffFirstName: concessionvalidation.staffFirstName,
|
||||||
|
staffLastName: concessionvalidation.staffLastName,
|
||||||
|
staffEmail: concessionvalidation.staffEmail,
|
||||||
|
validationPointId: concessionvalidation.validationPointId,
|
||||||
|
active: concessionvalidation.active,
|
||||||
|
});
|
||||||
|
// disable use false//true for not disable.
|
||||||
|
this.subChanged$.next(true);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// convenience getter for easy access in form fields
|
||||||
|
get f() { return this.concessionvalidationForm.controls; }
|
||||||
|
|
||||||
|
onSubmit(): void {
|
||||||
|
const OkToSave = this.concessionvalidationForm.valid;
|
||||||
|
if (OkToSave) {
|
||||||
|
const concessionvalidationValue = this.concessionvalidationForm.value;
|
||||||
|
const concessionvalidation: ConcessionValidation = {
|
||||||
|
id: concessionvalidationValue.id,
|
||||||
|
validateDate: moment(concessionvalidationValue.validateDate).toDate(),
|
||||||
|
concessionCard: concessionvalidationValue.concessionCard,
|
||||||
|
concessionHolder: concessionvalidationValue.concessionHolder,
|
||||||
|
concessionExpiry: concessionvalidationValue.concessionExpiry,
|
||||||
|
concessionTypeId: concessionvalidationValue.concessionTypeId,
|
||||||
|
stafflinkNo: concessionvalidationValue.stafflinkNo,
|
||||||
|
staffFirstName: concessionvalidationValue.staffFirstName,
|
||||||
|
staffLastName: concessionvalidationValue.staffLastName,
|
||||||
|
staffEmail: concessionvalidationValue.staffEmail,
|
||||||
|
validationPointId: concessionvalidationValue.validationPointId,
|
||||||
|
active: concessionvalidationValue.active,
|
||||||
|
};
|
||||||
|
// console.log(this.msg + "this is OKTOsave", concessionvalidation);
|
||||||
|
//if edit mode just save it don't check
|
||||||
|
if (concessionvalidation.id > 0) {
|
||||||
|
this.saveConcession(concessionvalidation);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
//check first only if new
|
||||||
|
this.checkAndSave(concessionvalidation);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// console.log(this.msg + "this is NOT OKTOsave");
|
||||||
|
this.messageService.add({ severity: 'error', summary: 'Error', detail: "please fill in the required fields" });
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkAndSave(concessionvalidation: ConcessionValidation): void {
|
||||||
|
const currentDate = moment(concessionvalidation.validateDate).format("YYYY-MM-DD");
|
||||||
|
const id = concessionvalidation.id;
|
||||||
|
this.subscription.add(
|
||||||
|
this.concessionValidationService.checkConcessionValidationByStaff(concessionvalidation.stafflinkNo,
|
||||||
|
concessionvalidation.concessionCard, currentDate, id)
|
||||||
|
.subscribe(x => {
|
||||||
|
let okTo = true;
|
||||||
|
if (x.data < 0) {
|
||||||
|
const message = "This card was used earlier today. Is it Ok to continue?";
|
||||||
|
const title = "Alert";
|
||||||
|
this.confirmationService.confirm({
|
||||||
|
message: message,
|
||||||
|
header: 'Confirmation',
|
||||||
|
icon: 'pi pi-exclamation-triangle',
|
||||||
|
accept: () => {
|
||||||
|
this.saveConcession(concessionvalidation);
|
||||||
|
},
|
||||||
|
reject: () => {
|
||||||
|
this.router.navigate([this.returnUrl]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.saveConcession(concessionvalidation);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
saveConcession(concessionvalidation: ConcessionValidation): void {
|
||||||
|
//console.log(this.msg + " Save Concession validation to server");
|
||||||
|
this.subscription.add(
|
||||||
|
this.concessionValidationService.saveConcessionvalidation(concessionvalidation)
|
||||||
|
.subscribe(x => {
|
||||||
|
if (x.statusCode >= 1) {
|
||||||
|
this.messageService.add({ severity: 'success', summary: 'Success', detail: "Save is OK" });
|
||||||
|
this.router.navigate([this.returnUrl]);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
this.messageService.add({ severity: 'error', summary: 'Fail to Save', detail: x.message });
|
||||||
|
|
||||||
|
}, error => {
|
||||||
|
const message = error || error.message;
|
||||||
|
this.messageService.add({ severity: 'error', summary: 'Fail to Save', detail: message });
|
||||||
|
console.log("error ", error);
|
||||||
|
}
|
||||||
|
));
|
||||||
|
}
|
||||||
|
|
||||||
|
goBack(): void {
|
||||||
|
this.router.navigate([this.returnUrl]);
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.subscription.unsubscribe();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
import { Injectable, Inject } from '@angular/core';
|
||||||
|
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
import { ConcessionValidation, ResultModel, ConfigureUrl } from '../models';
|
||||||
|
import * as moment from 'moment';
|
||||||
|
import { AppSettingService } from '../shares';
|
||||||
|
@Injectable({ providedIn: 'root' })
|
||||||
|
export class ConcessionValidationService {
|
||||||
|
private dateRange: any;
|
||||||
|
constructor(private http: HttpClient,
|
||||||
|
private appSetting: AppSettingService
|
||||||
|
) {
|
||||||
|
this.dateRange = {};
|
||||||
|
this.dateRange.fromDate = '';
|
||||||
|
this.dateRange.toDate = '';
|
||||||
|
console.log("constructor concessionValidationService daterange", this.dateRange);
|
||||||
|
}
|
||||||
|
public setDateRange(fromDate: any, toDate: any) {
|
||||||
|
this.dateRange.fromDate = moment(fromDate).toDate();
|
||||||
|
this.dateRange.toDate = moment(toDate).toDate();
|
||||||
|
// console.log("concessionValidationService setdaterange", this.dateRange);
|
||||||
|
}
|
||||||
|
public getDate(): any {
|
||||||
|
// console.log("concessionValidationService getdaterange", this.dateRange);
|
||||||
|
return this.dateRange;
|
||||||
|
}
|
||||||
|
loadConcessionvalidations(): Observable<ResultModel<ConcessionValidation[]>> {
|
||||||
|
const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.concessionValidationUrl;
|
||||||
|
let config = { headers: { 'Content-Type': 'application/json' } };
|
||||||
|
// console.log("the concession", baseUrl);
|
||||||
|
return this.http.get<ResultModel<ConcessionValidation[]>>(baseUrl);
|
||||||
|
}
|
||||||
|
loadConcessionvalidationByStaffId(staffLinkId: string, fromDate: Date, toDate: Date): Observable<ResultModel<ConcessionValidation[]>> {
|
||||||
|
this.setDateRange(fromDate, toDate);
|
||||||
|
const strDate = moment(fromDate).format("YYYY-MM-DD");
|
||||||
|
const strtoDate = moment(toDate).format("YYYY-MM-DD");
|
||||||
|
const url = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.concessionValidationByIdUrl;
|
||||||
|
const params = new HttpParams().set("staffLinkNo", staffLinkId)
|
||||||
|
.set("fromDate", strDate)
|
||||||
|
.set("toDate", strtoDate);
|
||||||
|
const headers = new HttpHeaders().set('Content-Type', 'application/json');
|
||||||
|
const options = {
|
||||||
|
headers: headers,
|
||||||
|
params: params
|
||||||
|
};
|
||||||
|
//console.log("loadConcessionvalidationByStaffId url", url);
|
||||||
|
return this.http.get<ResultModel<ConcessionValidation[]>>(url, options);
|
||||||
|
}
|
||||||
|
loadConcessionvalidationById(id: number): Observable<ResultModel<ConcessionValidation>> {
|
||||||
|
let params = new HttpParams().set("id", "" + id);
|
||||||
|
const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.concessionValidationUrl;
|
||||||
|
let headers = new HttpHeaders().set('Content-Type', 'application/json');
|
||||||
|
let options = {
|
||||||
|
headers: headers,
|
||||||
|
params: params
|
||||||
|
};
|
||||||
|
//return this.http.get<Concessionvalidation>(this.baseUrl + 'api/Concessionvalidation/LoadConcessionvalidationById',options);
|
||||||
|
return this.http.get<ResultModel<ConcessionValidation>>(baseUrl + "/" + id);
|
||||||
|
}
|
||||||
|
loadConcessionvalidationByCard(cardNo: string): Observable<ResultModel<ConcessionValidation>> {
|
||||||
|
const data = { cardNo };
|
||||||
|
const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.concessionValidationUrl + "/GetConcessionCard";
|
||||||
|
/*
|
||||||
|
let params = new HttpParams().set("id", "" + id);
|
||||||
|
|
||||||
|
let headers = new HttpHeaders().set('Content-Type', 'application/json');
|
||||||
|
let options = {
|
||||||
|
headers: headers,
|
||||||
|
params: params
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
//return this.http.get<Concessionvalidation>(this.baseUrl + 'api/Concessionvalidation/LoadConcessionvalidationById',options);
|
||||||
|
return this.http.post<ResultModel<ConcessionValidation>>(baseUrl, data);
|
||||||
|
}
|
||||||
|
checkConcessionValidationByStaff(staffLinkNo: string, concessionCard: string, currentDate: string, id: number): Observable<ResultModel<number>> {
|
||||||
|
let params = new HttpParams().set("staffLinkNo", staffLinkNo)
|
||||||
|
.set("concessionCard", concessionCard)
|
||||||
|
.set("currentDate", currentDate)
|
||||||
|
.set("id", "" + id);
|
||||||
|
|
||||||
|
let headers = new HttpHeaders().set('Content-Type', 'application/json');
|
||||||
|
let options = {
|
||||||
|
headers: headers,
|
||||||
|
params: params
|
||||||
|
};
|
||||||
|
const baseUrl = this.appSetting.appSetting.baseUrl;
|
||||||
|
const url = baseUrl + "/" + ConfigureUrl.CheckConcessionValidationByStaffUrl;
|
||||||
|
//return this.http.get<Concessionvalidation>(this.baseUrl + 'api/Concessionvalidation/LoadConcessionvalidationById',options);
|
||||||
|
return this.http.get<ResultModel<number>>(url, options);
|
||||||
|
}
|
||||||
|
saveConcessionvalidation(item: ConcessionValidation): Observable<ResultModel<number>> { //insert Concessionvalidation
|
||||||
|
let config = { headers: { 'Content-Type': 'application/json' } };
|
||||||
|
const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.concessionValidationUrl;
|
||||||
|
return this.http.post<ResultModel<number>>(baseUrl, item, config);
|
||||||
|
}
|
||||||
|
deleteConcessionvalidation(Id: number): Observable<ResultModel<number>> {
|
||||||
|
let config = { headers: { 'Content-Type': 'application/json' } };
|
||||||
|
const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.concessionValidationUrl;
|
||||||
|
return this.http.delete<ResultModel<number>>(baseUrl + "/" + Id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
export * from './concessionvalidation.component';
|
||||||
|
export * from './concessionvalidation.edit.component';
|
||||||
|
export * from './concessionvalidation.service';
|
||||||
|
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-form-field {
|
||||||
|
font-size: 14px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
td.mat-column-edit, .mat-column-delete {
|
||||||
|
width: 35px;
|
||||||
|
padding-right: 2px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
<div class="edit-content">
|
||||||
|
<h3>Concession Type</h3>
|
||||||
|
<div class="addlink">
|
||||||
|
<a [routerLink]='["/home/concessiontype", 0]' [queryParams]="{returnUrl:'/home/concessiontype'}">
|
||||||
|
<i class="material-icons">playlist_add</i>
|
||||||
|
Add Concession Type
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
|
||||||
|
|
||||||
|
<!-- Desciption Column -->
|
||||||
|
<ng-container matColumnDef="description">
|
||||||
|
<th mat-mdc-header-cell *matHeaderCellDef mat-sort-header>Concession Type</th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.description}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- active Column -->
|
||||||
|
<ng-container matColumnDef="active">
|
||||||
|
<th mat-mdc-header-cell *matHeaderCellDef mat-sort-header>Active</th>
|
||||||
|
<td mat-cell *matCellDef="let element">
|
||||||
|
<mat-checkbox [checked]="element.active" name="active" color="primary">
|
||||||
|
</mat-checkbox>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container matColumnDef="edit" stickyEnd>
|
||||||
|
<th mat-mdc-header-cell *matHeaderCellDef>Edit</th>
|
||||||
|
<td mat-cell *matCellDef="let element">
|
||||||
|
<a [routerLink]='["/home/concessiontype", element.id]' [queryParams]="{returnUrl:'/home/concessiontype'}">
|
||||||
|
<mat-icon>edit</mat-icon>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="selection-pointer tr-mouseover"
|
||||||
|
(click)="showEdit(row)"></tr>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
import { Component, Inject, OnInit, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
|
||||||
|
import { ConcessionTypeService } from './concessiontype.service';
|
||||||
|
import { ConcessionType } from '../models';
|
||||||
|
import { MatPaginator } from '@angular/material/paginator';
|
||||||
|
import { MatSort } from '@angular/material/sort';
|
||||||
|
import { MatTableDataSource } from '@angular/material/table';
|
||||||
|
|
||||||
|
/* ngRx
|
||||||
|
import { Store, select } from '@ngrx/store';
|
||||||
|
import * as validationActions from './store/actions/validationpoint.action';
|
||||||
|
import * as validationSelector from './store/selectors/validationpoint.selector';
|
||||||
|
import { appValidationState } from './store/reducers';
|
||||||
|
*/
|
||||||
|
import { take } from 'rxjs/operators';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { Subscription } from 'rxjs';
|
||||||
|
import { MessageService } from 'primeng/api';
|
||||||
|
@Component({
|
||||||
|
selector: 'concessiontype-list',
|
||||||
|
templateUrl: './concessiontype.component.html',
|
||||||
|
styleUrls: ['./concessiontype.component.css']
|
||||||
|
})
|
||||||
|
export class ConcessionTypeComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||||
|
dataSource: MatTableDataSource<ConcessionType>;
|
||||||
|
|
||||||
|
private subscription: Subscription = new Subscription();
|
||||||
|
|
||||||
|
displayedColumns: string[] = ['description', 'active', 'edit'];
|
||||||
|
msg = "[concessionType.com]";
|
||||||
|
@ViewChild(MatSort) sort!: MatSort;
|
||||||
|
@ViewChild(MatPaginator) paginator!: MatPaginator;
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
private store: Store<appValidationState>
|
||||||
|
*/
|
||||||
|
constructor(
|
||||||
|
private concessionTypeService: ConcessionTypeService,
|
||||||
|
private messageService: MessageService,
|
||||||
|
private router: Router
|
||||||
|
) {
|
||||||
|
|
||||||
|
this.dataSource = new MatTableDataSource<ConcessionType>();
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
applyFilter($event:any) {
|
||||||
|
const filterValue = $event.target.value;
|
||||||
|
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.subscription.add(
|
||||||
|
this.concessionTypeService.loadConcessiontypes().subscribe(result => {
|
||||||
|
// console.log(this.msg + "onInit", result);
|
||||||
|
this.dataSource.data = result.data;
|
||||||
|
}, error => {
|
||||||
|
|
||||||
|
console.log("error ", error);
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
/*
|
||||||
|
this.store.dispatch(validationActions.LoadValidationpoints());
|
||||||
|
this.store.pipe(select(validationSelector.getAllValidations)).subscribe(result => this.dataSource.data = result);
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
this.dataSource.sort = this.sort;
|
||||||
|
this.dataSource.paginator = this.paginator;
|
||||||
|
}
|
||||||
|
|
||||||
|
showEdit(item: ConcessionType) {
|
||||||
|
console.log(this.msg + "on row click", item);
|
||||||
|
this.router.navigate(['/home/concessiontype/' + item.id], { queryParams: { returnUrl: '/home/concessiontype' } });
|
||||||
|
}
|
||||||
|
deleteItem(id: number): void {
|
||||||
|
|
||||||
|
this.concessionTypeService.deleteConcessiontype(id)
|
||||||
|
.pipe(take(1))
|
||||||
|
.subscribe(result => {
|
||||||
|
// console.log(this.msg + " deleteItem success", result);
|
||||||
|
let data = this.dataSource.data;
|
||||||
|
let index: number = data.findIndex(d => d.id === id);
|
||||||
|
// console.log(this.msg + "delete from datasource");
|
||||||
|
data.splice(index, 1)
|
||||||
|
this.dataSource.data = data;
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
|
||||||
|
console.log("error ", error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
}
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.subscription.unsubscribe();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-form-field {
|
||||||
|
font-size: 14px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
td.mat-column-edit, .mat-column-delete {
|
||||||
|
width: 35px;
|
||||||
|
padding-right: 2px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
<div class="edit-content">
|
||||||
|
<div class="title"> {{getEditText()}} </div>
|
||||||
|
<form [formGroup]="concessiontypeForm" (ngSubmit)="onSubmit()">
|
||||||
|
<div class="flex flex-column">
|
||||||
|
<mat-card>
|
||||||
|
<input type="hidden" formControlName="id">
|
||||||
|
<div>
|
||||||
|
<mat-form-field class="w-full" appearance="outline" [hideRequiredMarker]="true">
|
||||||
|
<mat-label>Concession Type<strong class="app-require">*</strong></mat-label>
|
||||||
|
<input matInput formControlName="description" maxlength="80" name="Concession Type"
|
||||||
|
placeholder="description" required>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<mat-checkbox formControlName="active" color="primary">Active</mat-checkbox>
|
||||||
|
</div>
|
||||||
|
</mat-card>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-content-end mt-2">
|
||||||
|
<button class="mr-2" type="submit" mat-raised-button color="primary"
|
||||||
|
[disabled]="isFieldsChange">Submit</button>
|
||||||
|
<button type="button" mat-raised-button color="primary" (click)="goBack()">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<!--pre>{{ concessiontypeForm.value|json}}</pre-->
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,114 @@
|
|||||||
|
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||||
|
import { UntypedFormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||||
|
import { Router, ActivatedRoute } from '@angular/router';
|
||||||
|
|
||||||
|
import { ConcessionType } from '../models';
|
||||||
|
import { Subject, pipe, Subscription } from 'rxjs';
|
||||||
|
import { ConcessionTypeService } from './concessiontype.service';
|
||||||
|
import { MessageService } from 'primeng/api';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
templateUrl: 'concessiontype.edit.component.html',
|
||||||
|
selector: 'concessiontype-edit',
|
||||||
|
styleUrls: ['concessiontype.edit.component.css']
|
||||||
|
})
|
||||||
|
export class ConcessiontypeEditComponent implements OnInit {
|
||||||
|
returnUrl = '';
|
||||||
|
_id = -1;
|
||||||
|
msg = "[Concession type edit Component] ";
|
||||||
|
isChange = true; // disable use false//true for not disable. make sure it true is disable button.
|
||||||
|
private subscription: Subscription = new Subscription();
|
||||||
|
subChanged$ = new Subject<boolean>();
|
||||||
|
concessiontypeForm = this.formBuilder.group({
|
||||||
|
id: [0], //Validators.required
|
||||||
|
description: [''], //Validators.required
|
||||||
|
display: [''], //Validators.required
|
||||||
|
active: [false], //Validators.required
|
||||||
|
});
|
||||||
|
constructor(private formBuilder: UntypedFormBuilder,
|
||||||
|
private messageService: MessageService,
|
||||||
|
private concessionTypeService: ConcessionTypeService,
|
||||||
|
private route: ActivatedRoute, private router: Router) { }
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
|
||||||
|
const id = Number(this.route.snapshot.paramMap.get('id'));
|
||||||
|
// now load thing up
|
||||||
|
this.subscription.add(this.concessiontypeForm.valueChanges.subscribe(x => this.isChange = false));
|
||||||
|
this.subscription.add(this.subChanged$.subscribe(x => this.isChange = x));
|
||||||
|
if (id > 0) {
|
||||||
|
this.subscription.add(
|
||||||
|
this.concessionTypeService.loadConcessiontypeById(id).subscribe(x => {
|
||||||
|
this.assignValue(x.data)
|
||||||
|
}, error => {
|
||||||
|
|
||||||
|
console.log("error ", error);
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
getEditText(): string {
|
||||||
|
if (this._id > 0)
|
||||||
|
return "Edit Concession Type";
|
||||||
|
else
|
||||||
|
return "New Concession Type";
|
||||||
|
}
|
||||||
|
// this for disable submit button
|
||||||
|
get isFieldsChange() {
|
||||||
|
const chan = this.isChange || !this.concessiontypeForm.valid; // this disable so need true valid = true not
|
||||||
|
//console.log(this.msg + 'is fields change', chan);
|
||||||
|
return chan;
|
||||||
|
}
|
||||||
|
assignValue(concessiontype: ConcessionType): void {
|
||||||
|
this.concessiontypeForm.patchValue({
|
||||||
|
id: concessiontype.id,
|
||||||
|
description: concessiontype.description,
|
||||||
|
display: concessiontype.display,
|
||||||
|
active: concessiontype.active,
|
||||||
|
});
|
||||||
|
// disable use false//true for not disable.
|
||||||
|
this.subChanged$.next(true);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// convenience getter for easy access in form fields
|
||||||
|
get f() { return this.concessiontypeForm.controls; }
|
||||||
|
|
||||||
|
onSubmit(): void {
|
||||||
|
// if form valid then go save
|
||||||
|
//make sure
|
||||||
|
const okToSave = this.concessiontypeForm.valid;
|
||||||
|
if (okToSave) {
|
||||||
|
let concessiontypeValue = this.concessiontypeForm.value;
|
||||||
|
let concessiontype: ConcessionType = {
|
||||||
|
id: concessiontypeValue.id,
|
||||||
|
description: concessiontypeValue.description,
|
||||||
|
display: concessiontypeValue.display,
|
||||||
|
active: concessiontypeValue.active,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.subscription.add(this.concessionTypeService.saveConcessiontype(concessiontype).subscribe(x => {
|
||||||
|
//console.log("after save return is", x);
|
||||||
|
if (x.statusCode > 0) {
|
||||||
|
//alert("save ok");
|
||||||
|
|
||||||
|
this.messageService.add({ severity: 'success', summary: 'Success', detail: "Save is OK" });
|
||||||
|
this.router.navigate([this.returnUrl]);
|
||||||
|
//this.router.navigate(['/home/concessiontype'])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
|
||||||
|
console.log("error ", error);
|
||||||
|
}
|
||||||
|
));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
goBack(): void {
|
||||||
|
this.router.navigate([this.returnUrl]);
|
||||||
|
}
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.subscription.unsubscribe();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
|
||||||
|
import { Injectable, Inject } from '@angular/core';
|
||||||
|
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
import { ConcessionType, ResultModel, ConfigureUrl } from '../models';
|
||||||
|
import { AppSettingService } from '../shares';
|
||||||
|
|
||||||
|
@Injectable({ providedIn: 'root' })
|
||||||
|
export class ConcessionTypeService {
|
||||||
|
|
||||||
|
constructor(private http: HttpClient,
|
||||||
|
private appSetting :AppSettingService
|
||||||
|
) {}
|
||||||
|
loadConcessiontypes(): Observable<ResultModel<ConcessionType[]> > {
|
||||||
|
const baseUrl = this.appSetting.appSetting.baseUrl + "/" +ConfigureUrl.concessionTypeUrl;
|
||||||
|
let config = { headers : { 'Content-Type': 'application/json' } };
|
||||||
|
return this.http.get<ResultModel<ConcessionType[]>>(baseUrl);
|
||||||
|
}
|
||||||
|
loadConcessiontypeById(id:number): Observable<ResultModel<ConcessionType>> {
|
||||||
|
const baseUrl = this.appSetting.appSetting.baseUrl + "/" +ConfigureUrl.concessionTypeUrl;
|
||||||
|
let params = new HttpParams().set("id", ""+id);
|
||||||
|
let headers = new HttpHeaders().set('Content-Type', 'application/json');
|
||||||
|
let options = {
|
||||||
|
headers: headers,
|
||||||
|
params: params
|
||||||
|
};
|
||||||
|
|
||||||
|
return this.http.get<ResultModel<ConcessionType>>(baseUrl +"/"+id);
|
||||||
|
}
|
||||||
|
saveConcessiontype(concessType:ConcessionType): Observable<ResultModel<number>> { //insert Concessiontype
|
||||||
|
const baseUrl = this.appSetting.appSetting.baseUrl + "/" +ConfigureUrl.concessionTypeUrl;
|
||||||
|
let config = { headers : { 'Content-Type': 'application/json' } };
|
||||||
|
return this.http.post<ResultModel<number>>(baseUrl , concessType, config);
|
||||||
|
}
|
||||||
|
deleteConcessiontype(id:number): Observable<ResultModel<number>>{
|
||||||
|
const baseUrl = this.appSetting.appSetting.baseUrl + "/" +ConfigureUrl.concessionTypeUrl;
|
||||||
|
let config = { headers : { 'Content-Type': 'application/json' } };
|
||||||
|
return this.http.delete<ResultModel<number>>(baseUrl +"/" + id);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
export * from './concessiontype.component';
|
||||||
|
export * from './concessiontype.edit.component';
|
||||||
|
export * from './concessiontype.service';
|
||||||
|
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
<div class="edit-content">
|
||||||
|
<h3>Concession Validation Report</h3>
|
||||||
|
<form [formGroup]="concessionvalidationreportForm">
|
||||||
|
<div class="flex flex-row gap-2">
|
||||||
|
<mat-form-field appearance="outline">
|
||||||
|
<mat-label>Choose a from date</mat-label>
|
||||||
|
<input matInput formControlName="fromDate" (focus)="pickerfrom.open()" [matDatepicker]="pickerfrom">
|
||||||
|
<mat-datepicker-toggle matSuffix [for]="pickerfrom"></mat-datepicker-toggle>
|
||||||
|
<mat-datepicker #pickerfrom></mat-datepicker>
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-form-field appearance="outline">
|
||||||
|
<mat-label>Choose a to date</mat-label>
|
||||||
|
<input matInput formControlName="toDate" (focus)="pickerto.open()" [matDatepicker]="pickerto">
|
||||||
|
<mat-datepicker-toggle matSuffix [for]="pickerto"></mat-datepicker-toggle>
|
||||||
|
<mat-datepicker #pickerto></mat-datepicker>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button type="button" mat-raised-button color="primary" (click)="onDownload()">Download</button>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<h3>User Report</h3>
|
||||||
|
<div>
|
||||||
|
<button type="button" mat-raised-button color="primary" (click)="onDownloadUser()">Download Users</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { UntypedFormBuilder, Validators } from '@angular/forms';
|
||||||
|
import * as moment from 'moment';
|
||||||
|
import { HttpUtility, CommonUtilities } from '../shares';
|
||||||
|
import { catchError, finalize } from 'rxjs/operators';
|
||||||
|
import { EMPTY } from 'rxjs';
|
||||||
|
|
||||||
|
import { HttpResponse } from '@angular/common/http';
|
||||||
|
import { ActivatedRoute, Router } from '@angular/router';
|
||||||
|
import { MessageService } from 'primeng/api';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-concessionvalidation-report',
|
||||||
|
templateUrl: './concessionvalidationreport.component.html',
|
||||||
|
styleUrls: ['./concessionvalidationreport.component.css']
|
||||||
|
})
|
||||||
|
export class ConcessionvalidationReportComponent implements OnInit {
|
||||||
|
msg = "[concessionvalidation] ";
|
||||||
|
returnUrl = "";
|
||||||
|
concessionvalidationreportForm = this.formBuilder.group({
|
||||||
|
|
||||||
|
fromDate: [new Date()], //Validators.required
|
||||||
|
toDate: [new Date(), Validators.required],
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private formBuilder: UntypedFormBuilder,
|
||||||
|
private http: HttpUtility,
|
||||||
|
private router: Router,
|
||||||
|
private route: ActivatedRoute,
|
||||||
|
private messageService: MessageService
|
||||||
|
) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
onDownload(): void {
|
||||||
|
|
||||||
|
const constDate = this.concessionvalidationreportForm.value;
|
||||||
|
const fromDate = moment(constDate.fromDate).format("YYYY-MM-DD");
|
||||||
|
const toDate = moment(constDate.toDate).format("YYYY-MM-DD");
|
||||||
|
console.log(this.msg + "click on download", fromDate);
|
||||||
|
|
||||||
|
//GetReportFile
|
||||||
|
this.http.getFileResponse(`api/v1/ConcessionValidation/GetReportFile?fromDate=${fromDate}&toDate=${toDate}`).pipe(
|
||||||
|
catchError(err => {
|
||||||
|
|
||||||
|
return EMPTY;
|
||||||
|
}),
|
||||||
|
finalize(() => {
|
||||||
|
|
||||||
|
this.messageService.add({ severity: 'success', summary: 'Success', detail: "download completed ok to view now" });
|
||||||
|
})).subscribe((response: HttpResponse<Blob>) => {
|
||||||
|
if (response) {
|
||||||
|
console.log("the download report response", response);
|
||||||
|
CommonUtilities.downloadFile(response, 'report.xlsx');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
onDownloadUser(): void {
|
||||||
|
//GetReportFile
|
||||||
|
this.http.getFileResponse(`api/v1/Users/GetReportFile`).pipe(
|
||||||
|
catchError(err => {
|
||||||
|
|
||||||
|
return EMPTY;
|
||||||
|
}),
|
||||||
|
finalize(() => {
|
||||||
|
this.messageService.add({ severity: 'success', summary: 'Success', detail: "download completed ok to view now" });
|
||||||
|
})).subscribe((response: HttpResponse<Blob>) => {
|
||||||
|
if (response) {
|
||||||
|
console.log("the download user report response", response);
|
||||||
|
CommonUtilities.downloadFile(response, 'UserReport.xlsx');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
|
||||||
|
this.assignValue();
|
||||||
|
}
|
||||||
|
|
||||||
|
assignValue(): void {
|
||||||
|
this.concessionvalidationreportForm.patchValue({
|
||||||
|
fromDate: new Date(),
|
||||||
|
toDate: moment(new Date()).add(30, 'd')
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export * from './concessionvalidationreport.component';
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user