Compare commits
17 Commits
891a80fc70
...
3f1a33d2ad
| Author | SHA1 | Date | |
|---|---|---|---|
3f1a33d2ad
|
|||
|
d4eb3c135c
|
|||
|
11c4893d37
|
|||
|
8cd4ba1863
|
|||
|
3d78a94625
|
|||
|
df59b2240b
|
|||
|
c3136478c2
|
|||
|
ae968f00e7
|
|||
|
f371f7051c
|
|||
|
93835fdf86
|
|||
|
59473912e2
|
|||
|
f9049d34d9
|
|||
|
01b46d40d6
|
|||
|
f23ab15c0a
|
|||
|
6f4e2df3d3
|
|||
|
f8dff5dbbe
|
|||
|
37778b6b47
|
1
.gitignore
vendored
1
.gitignore
vendored
@ -32,6 +32,7 @@ speed-measure-plugin*.json
|
|||||||
.history/*
|
.history/*
|
||||||
|
|
||||||
# misc
|
# misc
|
||||||
|
/.angular/cache
|
||||||
/.sass-cache
|
/.sass-cache
|
||||||
/connect.lock
|
/connect.lock
|
||||||
/coverage
|
/coverage
|
||||||
|
|||||||
28
README.md
28
README.md
@ -1,30 +1,4 @@
|
|||||||
# NgxCdkUi
|
> This project was originally initiated by [Powered Software Inc.](https://poweredsoft.com/) and was forked from the [ngx-ui](https://github.com/PoweredSoft/ngx-ui) Repository
|
||||||
|
|
||||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.4.
|
|
||||||
|
|
||||||
## 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 README](https://github.com/angular/angular-cli/blob/master/README.md).
|
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
|||||||
185
angular.json
185
angular.json
@ -3,7 +3,7 @@
|
|||||||
"version": 1,
|
"version": 1,
|
||||||
"newProjectRoot": "projects",
|
"newProjectRoot": "projects",
|
||||||
"projects": {
|
"projects": {
|
||||||
"ngx-cdk-ui": {
|
"demo": {
|
||||||
"projectType": "application",
|
"projectType": "application",
|
||||||
"schematics": {
|
"schematics": {
|
||||||
"@schematics/angular:component": {
|
"@schematics/angular:component": {
|
||||||
@ -15,14 +15,16 @@
|
|||||||
"prefix": "ps",
|
"prefix": "ps",
|
||||||
"architect": {
|
"architect": {
|
||||||
"build": {
|
"build": {
|
||||||
"builder": "@angular-devkit/build-angular:browser",
|
"builder": "@angular-devkit/build-angular:application",
|
||||||
"options": {
|
"options": {
|
||||||
"outputPath": "dist/ngx-cdk-ui",
|
"outputPath": {
|
||||||
|
"base": "dist/ngx-cdk-ui"
|
||||||
|
},
|
||||||
"index": "src/index.html",
|
"index": "src/index.html",
|
||||||
"main": "src/main.ts",
|
"polyfills": [
|
||||||
"polyfills": "src/polyfills.ts",
|
"src/polyfills.ts"
|
||||||
|
],
|
||||||
"tsConfig": "tsconfig.app.json",
|
"tsConfig": "tsconfig.app.json",
|
||||||
"aot": true,
|
|
||||||
"assets": [
|
"assets": [
|
||||||
"src/favicon.ico",
|
"src/favicon.ico",
|
||||||
"src/assets"
|
"src/assets"
|
||||||
@ -31,7 +33,12 @@
|
|||||||
"node_modules/bootstrap/dist/css/bootstrap.min.css",
|
"node_modules/bootstrap/dist/css/bootstrap.min.css",
|
||||||
"src/styles.scss"
|
"src/styles.scss"
|
||||||
],
|
],
|
||||||
"scripts": []
|
"scripts": [],
|
||||||
|
"extractLicenses": false,
|
||||||
|
"sourceMap": true,
|
||||||
|
"optimization": false,
|
||||||
|
"namedChunks": true,
|
||||||
|
"browser": "src/main.ts"
|
||||||
},
|
},
|
||||||
"configurations": {
|
"configurations": {
|
||||||
"production": {
|
"production": {
|
||||||
@ -44,11 +51,8 @@
|
|||||||
"optimization": true,
|
"optimization": true,
|
||||||
"outputHashing": "all",
|
"outputHashing": "all",
|
||||||
"sourceMap": false,
|
"sourceMap": false,
|
||||||
"extractCss": true,
|
|
||||||
"namedChunks": false,
|
"namedChunks": false,
|
||||||
"extractLicenses": true,
|
"extractLicenses": true,
|
||||||
"vendorChunk": false,
|
|
||||||
"buildOptimizer": true,
|
|
||||||
"budgets": [
|
"budgets": [
|
||||||
{
|
{
|
||||||
"type": "initial",
|
"type": "initial",
|
||||||
@ -61,24 +65,29 @@
|
|||||||
"maximumError": "10kb"
|
"maximumError": "10kb"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
},
|
||||||
}
|
"development": {}
|
||||||
|
},
|
||||||
|
"defaultConfiguration": "production"
|
||||||
},
|
},
|
||||||
"serve": {
|
"serve": {
|
||||||
"builder": "@angular-devkit/build-angular:dev-server",
|
"builder": "@angular-devkit/build-angular:dev-server",
|
||||||
"options": {
|
"options": {
|
||||||
"browserTarget": "ngx-cdk-ui:build"
|
|
||||||
},
|
},
|
||||||
"configurations": {
|
"configurations": {
|
||||||
"production": {
|
"production": {
|
||||||
"browserTarget": "ngx-cdk-ui:build:production"
|
"buildTarget": "ngx-cdk-ui:build:production"
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"buildTarget": "ngx-cdk-ui:build:development"
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
"defaultConfiguration": "development"
|
||||||
},
|
},
|
||||||
"extract-i18n": {
|
"extract-i18n": {
|
||||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||||
"options": {
|
"options": {
|
||||||
"browserTarget": "ngx-cdk-ui:build"
|
"buildTarget": "ngx-cdk-ui:build"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"test": {
|
"test": {
|
||||||
@ -98,152 +107,112 @@
|
|||||||
"scripts": []
|
"scripts": []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"lint": {
|
|
||||||
"builder": "@angular-devkit/build-angular:tslint",
|
|
||||||
"options": {
|
|
||||||
"tsConfig": [
|
|
||||||
"tsconfig.app.json",
|
|
||||||
"tsconfig.spec.json",
|
|
||||||
"e2e/tsconfig.json"
|
|
||||||
],
|
|
||||||
"exclude": [
|
|
||||||
"**/node_modules/**"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"e2e": {
|
"e2e": {
|
||||||
"builder": "@angular-devkit/build-angular:protractor",
|
"builder": "@angular-devkit/build-angular:protractor",
|
||||||
"options": {
|
"options": {
|
||||||
"protractorConfig": "e2e/protractor.conf.js",
|
"protractorConfig": "e2e/protractor.conf.js"
|
||||||
"devServerTarget": "ngx-cdk-ui:serve"
|
|
||||||
},
|
},
|
||||||
"configurations": {
|
"configurations": {
|
||||||
"production": {
|
"production": {
|
||||||
"devServerTarget": "ngx-cdk-ui:serve:production"
|
"devServerTarget": "ngx-cdk-ui:serve:production"
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"devServerTarget": "ngx-cdk-ui:serve:development"
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
"defaultConfiguration": "development"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@poweredsoft/ngx-cdk-ui": {
|
"ngx-data-cdk-ui": {
|
||||||
"projectType": "library",
|
"projectType": "library",
|
||||||
"root": "projects/poweredsoft/ngx-cdk-ui",
|
"root": "projects/openharbor/ngx-data-cdk-ui",
|
||||||
"sourceRoot": "projects/poweredsoft/ngx-cdk-ui/src",
|
"sourceRoot": "projects/openharbor/ngx-data-cdk-ui/src",
|
||||||
"prefix": "ps",
|
"prefix": "cdk",
|
||||||
"architect": {
|
"architect": {
|
||||||
"build": {
|
"build": {
|
||||||
"builder": "@angular-devkit/build-ng-packagr:build",
|
"builder": "@angular-devkit/build-angular:ng-packagr",
|
||||||
"options": {
|
"options": {
|
||||||
"tsConfig": "projects/poweredsoft/ngx-cdk-ui/tsconfig.lib.json",
|
"tsConfig": "projects/openharbor/ngx-data-cdk-ui/tsconfig.lib.json",
|
||||||
"project": "projects/poweredsoft/ngx-cdk-ui/ng-package.json"
|
"project": "projects/openharbor/ngx-data-cdk-ui/ng-package.json"
|
||||||
},
|
},
|
||||||
"configurations": {
|
"configurations": {
|
||||||
"production": {
|
"production": {
|
||||||
"tsConfig": "projects/poweredsoft/ngx-cdk-ui/tsconfig.lib.prod.json"
|
"tsConfig": "projects/openharbor/ngx-data-cdk-ui/tsconfig.lib.prod.json"
|
||||||
}
|
},
|
||||||
}
|
"development": {}
|
||||||
|
},
|
||||||
|
"defaultConfiguration": "production"
|
||||||
},
|
},
|
||||||
"test": {
|
"test": {
|
||||||
"builder": "@angular-devkit/build-angular:karma",
|
"builder": "@angular-devkit/build-angular:karma",
|
||||||
"options": {
|
"options": {
|
||||||
"main": "projects/poweredsoft/ngx-cdk-ui/src/test.ts",
|
"main": "projects/openharbor/ngx-data-cdk-ui/src/test.ts",
|
||||||
"tsConfig": "projects/poweredsoft/ngx-cdk-ui/tsconfig.spec.json",
|
"tsConfig": "projects/openharbor/ngx-data-cdk-ui/tsconfig.spec.json",
|
||||||
"karmaConfig": "projects/poweredsoft/ngx-cdk-ui/karma.conf.js"
|
"karmaConfig": "projects/openharbor/ngx-data-cdk-ui/karma.conf.js"
|
||||||
}
|
|
||||||
},
|
|
||||||
"lint": {
|
|
||||||
"builder": "@angular-devkit/build-angular:tslint",
|
|
||||||
"options": {
|
|
||||||
"tsConfig": [
|
|
||||||
"projects/poweredsoft/ngx-cdk-ui/tsconfig.lib.json",
|
|
||||||
"projects/poweredsoft/ngx-cdk-ui/tsconfig.spec.json"
|
|
||||||
],
|
|
||||||
"exclude": [
|
|
||||||
"**/node_modules/**"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@poweredsoft/ngx-bootstrap": {
|
"ngx-data-bootstrap-ui": {
|
||||||
"projectType": "library",
|
"projectType": "library",
|
||||||
"root": "projects/poweredsoft/ngx-bootstrap",
|
"root": "projects/openharbor/ngx-data-bootstrap-ui",
|
||||||
"sourceRoot": "projects/poweredsoft/ngx-bootstrap/src",
|
"sourceRoot": "projects/openharbor/ngx-data-bootstrap-ui/src",
|
||||||
"prefix": "psbx",
|
"prefix": "bsx",
|
||||||
"architect": {
|
"architect": {
|
||||||
"build": {
|
"build": {
|
||||||
"builder": "@angular-devkit/build-ng-packagr:build",
|
"builder": "@angular-devkit/build-angular:ng-packagr",
|
||||||
"options": {
|
"options": {
|
||||||
"tsConfig": "projects/poweredsoft/ngx-bootstrap/tsconfig.lib.json",
|
"tsConfig": "projects/openharbor/ngx-data-bootstrap-ui/tsconfig.lib.json",
|
||||||
"project": "projects/poweredsoft/ngx-bootstrap/ng-package.json"
|
"project": "projects/openharbor/ngx-data-bootstrap-ui/ng-package.json"
|
||||||
},
|
},
|
||||||
"configurations": {
|
"configurations": {
|
||||||
"production": {
|
"production": {
|
||||||
"tsConfig": "projects/poweredsoft/ngx-bootstrap/tsconfig.lib.prod.json"
|
"tsConfig": "projects/openharbor/ngx-data-bootstrap-ui/tsconfig.lib.prod.json"
|
||||||
}
|
},
|
||||||
}
|
"development": {}
|
||||||
|
},
|
||||||
|
"defaultConfiguration": "production"
|
||||||
},
|
},
|
||||||
"test": {
|
"test": {
|
||||||
"builder": "@angular-devkit/build-angular:karma",
|
"builder": "@angular-devkit/build-angular:karma",
|
||||||
"options": {
|
"options": {
|
||||||
"main": "projects/poweredsoft/ngx-bootstrap/src/test.ts",
|
"main": "projects/openharbor/ngx-data-bootstrap-ui/src/test.ts",
|
||||||
"tsConfig": "projects/poweredsoft/ngx-bootstrap/tsconfig.spec.json",
|
"tsConfig": "projects/openharbor/ngx-data-bootstrap-ui/tsconfig.spec.json",
|
||||||
"karmaConfig": "projects/poweredsoft/ngx-bootstrap/karma.conf.js"
|
"karmaConfig": "projects/openharbor/ngx-data-bootstrap-ui/karma.conf.js"
|
||||||
}
|
|
||||||
},
|
|
||||||
"lint": {
|
|
||||||
"builder": "@angular-devkit/build-angular:tslint",
|
|
||||||
"options": {
|
|
||||||
"tsConfig": [
|
|
||||||
"projects/poweredsoft/ngx-bootstrap/tsconfig.lib.json",
|
|
||||||
"projects/poweredsoft/ngx-bootstrap/tsconfig.spec.json"
|
|
||||||
],
|
|
||||||
"exclude": [
|
|
||||||
"**/node_modules/**"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@poweredsoft/ng-select": {
|
"ngx-data-ng-select-ui": {
|
||||||
"projectType": "library",
|
"projectType": "library",
|
||||||
"root": "projects/poweredsoft/ng-select",
|
"root": "projects/openharbor/ngx-data-ng-select-ui",
|
||||||
"sourceRoot": "projects/poweredsoft/ng-select/src",
|
"sourceRoot": "projects/openharbor/ngx-data-ng-select-ui/src",
|
||||||
"prefix": "ps-ng",
|
"prefix": "ps-ng",
|
||||||
"architect": {
|
"architect": {
|
||||||
"build": {
|
"build": {
|
||||||
"builder": "@angular-devkit/build-ng-packagr:build",
|
"builder": "@angular-devkit/build-angular:ng-packagr",
|
||||||
"options": {
|
"options": {
|
||||||
"tsConfig": "projects/poweredsoft/ng-select/tsconfig.lib.json",
|
"tsConfig": "projects/openharbor/ngx-data-ng-select-ui/tsconfig.lib.json",
|
||||||
"project": "projects/poweredsoft/ng-select/ng-package.json"
|
"project": "projects/openharbor/ngx-data-ng-select-ui/ng-package.json"
|
||||||
},
|
},
|
||||||
"configurations": {
|
"configurations": {
|
||||||
"production": {
|
"production": {
|
||||||
"tsConfig": "projects/poweredsoft/ng-select/tsconfig.lib.prod.json"
|
"tsConfig": "projects/openharbor/ngx-data-ng-select-ui/tsconfig.lib.prod.json"
|
||||||
}
|
},
|
||||||
}
|
"development": {}
|
||||||
|
},
|
||||||
|
"defaultConfiguration": "production"
|
||||||
},
|
},
|
||||||
"test": {
|
"test": {
|
||||||
"builder": "@angular-devkit/build-angular:karma",
|
"builder": "@angular-devkit/build-angular:karma",
|
||||||
"options": {
|
"options": {
|
||||||
"main": "projects/poweredsoft/ng-select/src/test.ts",
|
"main": "projects/openharbor/ngx-data-ng-select-ui/src/test.ts",
|
||||||
"tsConfig": "projects/poweredsoft/ng-select/tsconfig.spec.json",
|
"tsConfig": "projects/openharbor/ngx-data-ng-select-ui/tsconfig.spec.json",
|
||||||
"karmaConfig": "projects/poweredsoft/ng-select/karma.conf.js"
|
"karmaConfig": "projects/openharbor/ngx-data-ng-select-ui/karma.conf.js"
|
||||||
}
|
|
||||||
},
|
|
||||||
"lint": {
|
|
||||||
"builder": "@angular-devkit/build-angular:tslint",
|
|
||||||
"options": {
|
|
||||||
"tsConfig": [
|
|
||||||
"projects/poweredsoft/ng-select/tsconfig.lib.json",
|
|
||||||
"projects/poweredsoft/ng-select/tsconfig.spec.json"
|
|
||||||
],
|
|
||||||
"exclude": [
|
|
||||||
"**/node_modules/**"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}},
|
}
|
||||||
"defaultProject": "ngx-cdk-ui"
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"outDir": "../out-tsc/e2e",
|
"outDir": "../out-tsc/e2e",
|
||||||
"module": "commonjs",
|
"module": "commonjs",
|
||||||
"target": "es5",
|
"target": "es2018",
|
||||||
"types": [
|
"types": [
|
||||||
"jasmine",
|
"jasmine",
|
||||||
"jasminewd2",
|
"jasminewd2",
|
||||||
|
|||||||
14901
package-lock.json
generated
14901
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
76
package.json
76
package.json
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "ngx-ui",
|
"name": "demo",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"ng": "ng",
|
"ng": "ng",
|
||||||
@ -9,23 +9,33 @@
|
|||||||
"lint": "ng lint",
|
"lint": "ng lint",
|
||||||
"e2e": "ng e2e",
|
"e2e": "ng e2e",
|
||||||
"clean": "rimraf dist",
|
"clean": "rimraf dist",
|
||||||
"start:app": "wait-on dist/poweredsoft/ngx-cdk-ui/fesm5 && dist/poweredsoft/ngx-bootstrap/fesm5 && ng serve --poll 2000",
|
|
||||||
|
"build-bootstrap": "ng build ngx-data-bootstrap-ui --configuration production",
|
||||||
|
"publish-bootstrap": "npm publish dist/openharbor/ngx-data-bootstrap-ui --access public",
|
||||||
|
|
||||||
|
"build-cdk": "ng build ngx-data-cdk-ui --configuration production",
|
||||||
|
"publish-cdk": "npm publish dist/openharbor/ngx-data-cdk-ui --access public",
|
||||||
|
|
||||||
|
"build-ng-select": "ng build ngx-data-ng-select-ui --configuration production",
|
||||||
|
"publish-ng-select": "npm publish dist/openharbor/ngx-data-ng-select-ui --access public",
|
||||||
|
|
||||||
|
"start:app": "wait-on dist/openharbor/ngx-cdk-ui/fesm5 && dist/poweredsoft/ngx-bootstrap/fesm5 && ng serve --poll 2000",
|
||||||
"watch:lib": "ng build @poweredsoft/ngx-cdk-ui --watch && ng build @poweredsoft/ngx-bootstrap --watch",
|
"watch:lib": "ng build @poweredsoft/ngx-cdk-ui --watch && ng build @poweredsoft/ngx-bootstrap --watch",
|
||||||
"watch:all": "npm run clean && run-p watch:lib start:app"
|
"watch:all": "npm run clean && run-p watch:lib start:app"
|
||||||
},
|
},
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@angular/animations": "~9.1.4",
|
"@angular/animations": "^18.2.1",
|
||||||
"@angular/common": "~9.1.4",
|
"@angular/common": "^18.2.1",
|
||||||
"@angular/compiler": "~9.1.4",
|
"@angular/compiler": "^18.2.1",
|
||||||
"@angular/core": "~9.1.4",
|
"@angular/core": "^18.2.1",
|
||||||
"@angular/forms": "~9.1.4",
|
"@angular/forms": "^18.2.1",
|
||||||
"@angular/platform-browser": "~9.1.4",
|
"@angular/platform-browser": "^18.2.1",
|
||||||
"@angular/platform-browser-dynamic": "~9.1.4",
|
"@angular/platform-browser-dynamic": "^18.2.1",
|
||||||
"@angular/router": "~9.1.4",
|
"@angular/router": "^18.2.1",
|
||||||
"@ng-select/ng-select": "^4.0.1",
|
"@ng-select/ng-select": "^13.0.0",
|
||||||
"@poweredsoft/data": "0.0.36",
|
"@openharbor/ngx-data": "^18.0.0-alpha.3",
|
||||||
"@poweredsoft/ngx-data": "0.0.22",
|
"@poweredsoft/data": "^0.0.36",
|
||||||
"@poweredsoft/ngx-data-apollo": "0.0.10",
|
"@poweredsoft/ngx-data-apollo": "0.0.10",
|
||||||
"apollo-angular": "^1.8.0",
|
"apollo-angular": "^1.8.0",
|
||||||
"apollo-angular-link-http": "^1.9.0",
|
"apollo-angular-link-http": "^1.9.0",
|
||||||
@ -35,35 +45,35 @@
|
|||||||
"bootstrap": "^4.5.0",
|
"bootstrap": "^4.5.0",
|
||||||
"graphql": "^14.5.0",
|
"graphql": "^14.5.0",
|
||||||
"graphql-tag": "^2.10.0",
|
"graphql-tag": "^2.10.0",
|
||||||
"ngx-bootstrap": "^5.6.1",
|
"ngx-bootstrap": "^18.0.0",
|
||||||
"rxjs": "~6.5.4",
|
"rxjs": "~6.5.4",
|
||||||
"tslib": "^1.10.0",
|
"tslib": "^2.0.0",
|
||||||
"zone.js": "~0.10.2"
|
"zone.js": "~0.14.10"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular-devkit/build-angular": "~0.901.4",
|
"@angular-devkit/build-angular": "^18.2.1",
|
||||||
"@angular-devkit/build-ng-packagr": "~0.901.7",
|
"@angular/cli": "^18.2.1",
|
||||||
"@angular/cli": "~9.1.4",
|
"@angular/compiler-cli": "^18.2.1",
|
||||||
"@angular/compiler-cli": "~9.1.4",
|
"@angular/language-service": "^18.2.1",
|
||||||
"@angular/language-service": "~9.1.4",
|
"@types/jasmine": "~3.6.0",
|
||||||
"@types/jasmine": "~3.5.0",
|
|
||||||
"@types/jasminewd2": "~2.0.3",
|
"@types/jasminewd2": "~2.0.3",
|
||||||
"@types/node": "^12.11.1",
|
"@types/node": "^12.11.1",
|
||||||
"codelyzer": "^5.1.2",
|
"codelyzer": "^6.0.0",
|
||||||
"jasmine-core": "~3.5.0",
|
"jasmine-core": "~3.6.0",
|
||||||
"jasmine-spec-reporter": "~4.2.1",
|
"jasmine-spec-reporter": "~5.0.0",
|
||||||
"karma": "~5.0.0",
|
"karma": "~6.4.4",
|
||||||
"karma-chrome-launcher": "~3.1.0",
|
"karma-chrome-launcher": "~3.1.0",
|
||||||
"karma-coverage-istanbul-reporter": "~2.1.0",
|
"karma-coverage-istanbul-reporter": "~3.0.2",
|
||||||
"karma-jasmine": "~3.0.1",
|
"karma-jasmine": "~4.0.0",
|
||||||
"karma-jasmine-html-reporter": "^1.4.2",
|
"karma-jasmine-html-reporter": "^1.5.0",
|
||||||
"ng-packagr": "^9.0.0",
|
"ng-packagr": "^18.2.1",
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.5",
|
||||||
"protractor": "~5.4.3",
|
"protractor": "~7.0.0",
|
||||||
"rimraf": "^3.0.2",
|
"rimraf": "^3.0.2",
|
||||||
"ts-node": "~8.3.0",
|
"ts-node": "~8.3.0",
|
||||||
"tslint": "~6.1.0",
|
"tslint": "~6.1.0",
|
||||||
"typescript": "~3.8.3",
|
"typescript": "~5.5.4",
|
||||||
"wait-on": "^5.0.1"
|
"wait-on": "^5.0.1"
|
||||||
}
|
},
|
||||||
|
"packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
|
||||||
}
|
}
|
||||||
|
|||||||
5
projects/openharbor/ngx-data-bootstrap-ui/README.md
Normal file
5
projects/openharbor/ngx-data-bootstrap-ui/README.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
> This project was originally initiated by [Powered Software Inc.](https://poweredsoft.com/) and was forked from the [ngx-ui](https://github.com/PoweredSoft/ngx-ui) Repository
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
This project is licensed under the [MIT License](LICENSE).
|
||||||
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
|
"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
|
||||||
"dest": "../../../dist/poweredsoft/ng-select",
|
"dest": "../../../dist/openharbor/ngx-data-bootstrap-ui",
|
||||||
"lib": {
|
"lib": {
|
||||||
"entryFile": "src/public-api.ts"
|
"entryFile": "src/public-api.ts"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
16
projects/openharbor/ngx-data-bootstrap-ui/package.json
Normal file
16
projects/openharbor/ngx-data-bootstrap-ui/package.json
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"name": "@openharbor/ngx-data-bootstrap-ui",
|
||||||
|
"version": "18.0.0-alpha.2",
|
||||||
|
"repository": "https://git.openharbor.io/Open-Harbor/ngx-data-ui",
|
||||||
|
"description": "an internal use library for handling data sources grid filtering sorting, add commands etc",
|
||||||
|
"keywords": [
|
||||||
|
"angular",
|
||||||
|
"ngx-bootstrap"
|
||||||
|
],
|
||||||
|
"peerDependencies": {
|
||||||
|
"@poweredsoft/data": "^0.0.36",
|
||||||
|
"@angular/common": "^18.0.0",
|
||||||
|
"@angular/core": "^18.0.0",
|
||||||
|
"ngx-bootstrap": "^18.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import {NgModule} from '@angular/core';
|
||||||
|
import {CommonModule} from '@angular/common';
|
||||||
|
import {ModalModule} from 'ngx-bootstrap/modal';
|
||||||
|
import {CommandModalDirective} from './directives/command-modal.directive';
|
||||||
|
import {CommandModalComponent} from './command-modal/command-modal.component';
|
||||||
|
import {FormsModule} from '@angular/forms';
|
||||||
|
import {CommandModalService} from './command-modal.service';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
ModalModule.forRoot(),
|
||||||
|
FormsModule
|
||||||
|
],
|
||||||
|
providers: [CommandModalService],
|
||||||
|
declarations: [CommandModalDirective, CommandModalComponent],
|
||||||
|
exports: [CommandModalDirective]
|
||||||
|
})
|
||||||
|
export class CommandModalModule { }
|
||||||
@ -3,29 +3,31 @@ import {EventEmitter, Injectable, TemplateRef} from '@angular/core';
|
|||||||
import {IDataSource} from '@poweredsoft/data';
|
import {IDataSource} from '@poweredsoft/data';
|
||||||
import {BsModalService} from 'ngx-bootstrap/modal';
|
import {BsModalService} from 'ngx-bootstrap/modal';
|
||||||
|
|
||||||
@Injectable()
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
export class CommandModalService {
|
export class CommandModalService {
|
||||||
constructor(private modalService: BsModalService) {
|
constructor(private modalService: BsModalService) {
|
||||||
}
|
}
|
||||||
|
|
||||||
spawn<TModel>(options: {
|
spawn<TModel>(options: {
|
||||||
dataSource: IDataSource<TModel>
|
dataSource: IDataSource<TModel>
|
||||||
command: string,
|
command: string,
|
||||||
model: TModel,
|
model: TModel,
|
||||||
template: TemplateRef<any>,
|
template: TemplateRef<any>,
|
||||||
commandTitle?: string,
|
commandTitle?: string,
|
||||||
refreshOnSuccess?: boolean,
|
refreshOnSuccess?: boolean,
|
||||||
commandText?: string,
|
commandText?: string,
|
||||||
cancelText?: string,
|
cancelText?: string,
|
||||||
animated?: boolean,
|
animated?: boolean,
|
||||||
btnClass?: string,
|
btnClass?: string,
|
||||||
modalSize?: string,
|
modalSize?: string,
|
||||||
disableValidationSummary?: boolean,
|
disableValidationSummary?: boolean,
|
||||||
backdrop?: boolean,
|
backdrop?: boolean,
|
||||||
ignoreBackdropClick?: boolean,
|
ignoreBackdropClick?: boolean,
|
||||||
params?: any,
|
params?: any,
|
||||||
success?: EventEmitter<any>
|
success?: EventEmitter<any>
|
||||||
}) {
|
}) {
|
||||||
options.dataSource.resolveCommandModelByName({
|
options.dataSource.resolveCommandModelByName({
|
||||||
command: options.command,
|
command: options.command,
|
||||||
model: options.model,
|
model: options.model,
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<div class="modal-header">
|
||||||
|
<h4 class="modal-title pull-left">{{ title }}</h4>
|
||||||
|
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<ng-container [ngTemplateOutlet]="template"
|
||||||
|
[ngTemplateOutletContext]="{ $implicit: commandModel, loading: loading, dataSource: dataSource }"></ng-container>
|
||||||
|
<div *ngIf="hasError && !disableValidationSummary" class="alert alert-danger mt-2" style="white-space: pre-wrap">{{validationMessage}}</div>
|
||||||
|
<div *ngIf="hasErrorMessage" class="alert alert-danger mt-2" style="white-space: pre-wrap">{{errorMessage}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-light" (click)="modalRef.hide()"
|
||||||
|
[disabled]="loading">{{ cancelText }}</button>
|
||||||
|
<button type="button" class="btn btn-{{btnClass}}" [disabled]="loading" (click)="onSubmit()">{{ commandText }}</button>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<div class="progress" style="width: 100%" *ngIf="loading">
|
||||||
|
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100"
|
||||||
|
aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
.field-error{
|
||||||
|
border: 1px solid red;
|
||||||
|
}
|
||||||
@ -1,17 +1,16 @@
|
|||||||
import { Component, OnInit, TemplateRef, OnDestroy, EventEmitter } from '@angular/core';
|
import {Component, EventEmitter, OnDestroy, OnInit, TemplateRef} from '@angular/core';
|
||||||
import { IDataSource } from '@poweredsoft/data';
|
import {IDataSource} from '@poweredsoft/data';
|
||||||
import { BsModalRef } from 'ngx-bootstrap/modal';
|
import {BsModalRef} from 'ngx-bootstrap/modal';
|
||||||
import { finalize} from 'rxjs/operators';
|
import {finalize} from 'rxjs/operators';
|
||||||
import { Subscription } from 'rxjs';
|
import {Subscription} from 'rxjs';
|
||||||
import { NgForm } from '@angular/forms';
|
import {NgForm} from '@angular/forms';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'psbx-command-modal',
|
selector: 'bsx-command-modal',
|
||||||
templateUrl: './command-modal.component.html',
|
templateUrl: './command-modal.component.html',
|
||||||
styleUrls: ['./command-modal.component.scss']
|
styleUrls: ['./command-modal.component.scss']
|
||||||
})
|
})
|
||||||
export class CommandModalComponent implements OnInit, OnDestroy {
|
export class CommandModalComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
title: string;
|
title: string;
|
||||||
template: TemplateRef<any>;
|
template: TemplateRef<any>;
|
||||||
command: string;
|
command: string;
|
||||||
@ -80,9 +79,4 @@ export class CommandModalComponent implements OnInit, OnDestroy {
|
|||||||
// you do not want to close on failure.. so just ignore..
|
// you do not want to close on failure.. so just ignore..
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
attemptSave() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -4,13 +4,11 @@ import { BsModalService } from 'ngx-bootstrap/modal';
|
|||||||
import { CommandModalComponent } from '../command-modal/command-modal.component';
|
import { CommandModalComponent } from '../command-modal/command-modal.component';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psbxCommandModal]'
|
selector: '[bsxCommandModal]'
|
||||||
})
|
})
|
||||||
export class CommandModalDirective {
|
export class CommandModalDirective {
|
||||||
|
|
||||||
constructor(private modalService: BsModalService) { }
|
constructor(private modalService: BsModalService) { }
|
||||||
|
|
||||||
|
|
||||||
@Input() dataSource: IDataSource<any>;
|
@Input() dataSource: IDataSource<any>;
|
||||||
@Input() command: string;
|
@Input() command: string;
|
||||||
@Input() model: any;
|
@Input() model: any;
|
||||||
@ -56,7 +54,6 @@ export class CommandModalDirective {
|
|||||||
backdrop: this.backdrop === undefined ? true : this.backdrop,
|
backdrop: this.backdrop === undefined ? true : this.backdrop,
|
||||||
ignoreBackdropClick: this.ignoreBackdropClick === undefined ? false : this.ignoreBackdropClick
|
ignoreBackdropClick: this.ignoreBackdropClick === undefined ? false : this.ignoreBackdropClick
|
||||||
});
|
});
|
||||||
|
|
||||||
}, error => {
|
}, error => {
|
||||||
|
|
||||||
});
|
});
|
||||||
@ -1,16 +1,15 @@
|
|||||||
import { Directive, Input, TemplateRef, HostListener, Output, EventEmitter } from '@angular/core';
|
import {Directive, EventEmitter, HostListener, Input, Output} from '@angular/core';
|
||||||
import { IDataSource } from '@poweredsoft/data';
|
import {IDataSource} from '@poweredsoft/data';
|
||||||
import { finalize } from 'rxjs/operators';
|
import {finalize} from 'rxjs/operators';
|
||||||
import { ConfirmModalService } from '../../confirm-modal/confirm-modal.service';
|
import {ConfirmModalService} from '../../confirm-modal/confirm-modal.service';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psbxCommand]'
|
selector: '[bsxCommand]',
|
||||||
|
standalone: true
|
||||||
})
|
})
|
||||||
export class CommandDirective {
|
export class CommandDirective {
|
||||||
|
|
||||||
constructor(private confirmModalService: ConfirmModalService) { }
|
constructor(private confirmModalService: ConfirmModalService) { }
|
||||||
|
|
||||||
|
|
||||||
@Input() dataSource: IDataSource<any>;
|
@Input() dataSource: IDataSource<any>;
|
||||||
@Input() command: string;
|
@Input() command: string;
|
||||||
@Input() model: any;
|
@Input() model: any;
|
||||||
@ -51,15 +50,14 @@ export class CommandDirective {
|
|||||||
this.failure.emit(commandError);
|
this.failure.emit(commandError);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}, resolveCommandError => {
|
}, resolveCommandError => {
|
||||||
this.failure.emit(resolveCommandError);
|
this.failure.emit(resolveCommandError);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@HostListener('click')
|
@HostListener('click')
|
||||||
wasClicked() {
|
wasClicked() {
|
||||||
|
|
||||||
if (this.confirm) {
|
if (this.confirm) {
|
||||||
this.confirmModalService.confirm({
|
this.confirmModalService.confirm({
|
||||||
message: this.confirmMessage,
|
message: this.confirmMessage,
|
||||||
@ -75,5 +73,4 @@ export class CommandDirective {
|
|||||||
this.doCommand();
|
this.doCommand();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<div class="modal-body text-center">
|
||||||
|
<p>{{ message }}</p>
|
||||||
|
<button type="button" [ngClass]="yesButtonClass" (click)="confirm()">{{ yesText }}</button>
|
||||||
|
|
||||||
|
<button type="button" [ngClass]="noButtonClass" (click)="decline()">{{ noText }}</button>
|
||||||
|
</div>
|
||||||
@ -1,16 +1,20 @@
|
|||||||
import { Component, OnInit, TemplateRef, EventEmitter } from '@angular/core';
|
import {Component, Inject} from '@angular/core';
|
||||||
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
|
import {BsModalRef} from 'ngx-bootstrap/modal';
|
||||||
import { Observer } from 'rxjs';
|
import {Observer} from 'rxjs';
|
||||||
|
import {CommonModule} from "@angular/common";
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'psbx-confirm-modal',
|
selector: 'bsx-confirm-modal',
|
||||||
templateUrl: './confirm-modal.component.html',
|
templateUrl: './confirm-modal.component.html',
|
||||||
styleUrls: ['./confirm-modal.component.scss']
|
styleUrls: ['./confirm-modal.component.scss'],
|
||||||
|
standalone: true,
|
||||||
|
imports: [
|
||||||
|
CommonModule
|
||||||
|
]
|
||||||
})
|
})
|
||||||
export class ConfirmModalComponent implements OnInit {
|
export class ConfirmModalComponent {
|
||||||
|
@Inject(BsModalRef) modelRef!: BsModalRef;
|
||||||
|
|
||||||
yesText: string;
|
yesText: string;
|
||||||
noText: string;
|
noText: string;
|
||||||
message: string;
|
message: string;
|
||||||
@ -18,14 +22,6 @@ export class ConfirmModalComponent implements OnInit {
|
|||||||
noClass: string;
|
noClass: string;
|
||||||
observer: Observer<boolean>;
|
observer: Observer<boolean>;
|
||||||
|
|
||||||
constructor(private modelRef: BsModalRef) {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
get yesButtonClass() {
|
get yesButtonClass() {
|
||||||
return `btn btn-${this.yesClass}`
|
return `btn btn-${this.yesClass}`
|
||||||
}
|
}
|
||||||
@ -39,11 +35,10 @@ export class ConfirmModalComponent implements OnInit {
|
|||||||
this.observer.next(true);
|
this.observer.next(true);
|
||||||
this.observer.complete();
|
this.observer.complete();
|
||||||
}
|
}
|
||||||
|
|
||||||
decline(): void {
|
decline(): void {
|
||||||
this.modelRef.hide();
|
this.modelRef.hide();
|
||||||
this.observer.next(false);
|
this.observer.next(false);
|
||||||
this.observer.complete();
|
this.observer.complete();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -12,15 +12,14 @@ export interface IConfirmModalOptions
|
|||||||
noText?: string;
|
noText?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
@Injectable()
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
export class ConfirmModalService {
|
export class ConfirmModalService {
|
||||||
|
|
||||||
constructor(private modalService: BsModalService) { }
|
constructor(private modalService: BsModalService) { }
|
||||||
|
|
||||||
confirm(options: IConfirmModalOptions) : Observable<boolean> {
|
confirm(options: IConfirmModalOptions) : Observable<boolean> {
|
||||||
return Observable.create((o: Observer<boolean>) => {
|
return new Observable<boolean>((o: Observer<boolean>) => {
|
||||||
|
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
message: options.message,
|
message: options.message,
|
||||||
yesText: options.yesText || 'yes',
|
yesText: options.yesText || 'yes',
|
||||||
@ -30,7 +29,7 @@ export class ConfirmModalService {
|
|||||||
observer: o
|
observer: o
|
||||||
};
|
};
|
||||||
|
|
||||||
const modal = this.modalService.show(ConfirmModalComponent, {
|
this.modalService.show(ConfirmModalComponent, {
|
||||||
initialState: initialState,
|
initialState: initialState,
|
||||||
animated: true,
|
animated: true,
|
||||||
keyboard: false
|
keyboard: false
|
||||||
@ -3,33 +3,33 @@
|
|||||||
<div class="container" >
|
<div class="container" >
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType" [ngModelOptions]="{standalone: true}">
|
<select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType" [ngModelOptions]="{standalone: true}">
|
||||||
<option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
|
<option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
|
||||||
<div class="row mt-1 mb-1">
|
|
||||||
<input *ngIf="!isRangeFilter"
|
|
||||||
type="text"
|
|
||||||
placeholder="Datepicker"
|
|
||||||
class="form-control"
|
|
||||||
bsDatepicker [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="row mt-1 mb-1">
|
||||||
|
<input *ngIf="!isRangeFilter"
|
||||||
|
type="text"
|
||||||
|
placeholder="Datepicker"
|
||||||
|
class="form-control"
|
||||||
|
bsDatepicker [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row mt-1 mb-1">
|
<div class="row mt-1 mb-1">
|
||||||
<input *ngIf="isRangeFilter" type="text"
|
<input *ngIf="isRangeFilter" type="text"
|
||||||
placeholder="Daterangepicker"
|
placeholder="Daterangepicker"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
bsDaterangepicker [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
|
bsDaterangepicker [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row mt-2">
|
<div class="row mt-2">
|
||||||
<button class="btn btn-primary mr-1" type="submit" >Filter</button>
|
<button class="btn btn-primary mr-1" type="submit" >Filter</button>
|
||||||
<button type="button" class="btn btn-warning" *ngIf="!isFiltering" (click)="pop.hide()">Hide</button>
|
<button type="button" class="btn btn-warning" *ngIf="!isFiltering" (click)="pop.hide()">Hide</button>
|
||||||
<button type="button" class="btn btn-dark" *ngIf="isFiltering" (click)="clearFilter()">Clear</button>
|
<button type="button" class="btn btn-dark" *ngIf="isFiltering" (click)="clearFilter()">Clear</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
|
||||||
<!-- <button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterPopUpOpened" [outsideClick]="true" #pop="bs-popover">
|
<!-- <button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterPopUpOpened" [outsideClick]="true" #pop="bs-popover">
|
||||||
@ -75,8 +75,8 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</button> -->
|
</button> -->
|
||||||
|
|
||||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||||
viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;" xml:space="preserve" fill-opacity="0.5" [tooltip]="showTooltip()" [tooltipEnable]="!filterPopUpOpened" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}" [popover]="popTemplate" [(isOpen)]="filterPopUpOpened" [outsideClick]="true" #pop="bs-popover">
|
viewBox="0 0 477.875 477.875" fill-opacity="0.5" [tooltip]="showTooltip()" [isDisabled]="filterPopUpOpened" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}" [popover]="popTemplate" [isOpen]="filterPopUpOpened" [outsideClick]="true" #pop="bs-popover">
|
||||||
<g>
|
<g>
|
||||||
<g>
|
<g>
|
||||||
<path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c-0.004,4.842,2.05,9.458,5.649,12.698l165.018,148.514V460.8
|
<path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c-0.004,4.842,2.05,9.458,5.649,12.698l165.018,148.514V460.8
|
||||||
@ -84,34 +84,34 @@ viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;"
|
|||||||
V263.612l165.018-148.48c3.608-3.247,5.662-7.878,5.649-12.732V17.067C477.871,7.641,470.23,0,460.804,0z"/>
|
V263.612l165.018-148.48c3.608-3.247,5.662-7.878,5.649-12.732V17.067C477.871,7.641,470.23,0,460.804,0z"/>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
<g>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
<g>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
<g>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
<g>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
<g>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
<g>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
<g>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
<g>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
<g>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
<g>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
<g>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
<g>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
<g>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
<g>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
<g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
@ -1,37 +1,47 @@
|
|||||||
import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
|
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
|
||||||
import { IDataSource, ISimpleFilter, ICompositeFilter, IFilter,FilterType } from '@poweredsoft/data';
|
import {FilterType, ICompositeFilter, IDataSource, ISimpleFilter} from '@poweredsoft/data';
|
||||||
|
import {FormsModule} from "@angular/forms";
|
||||||
|
import {BsDatepickerModule} from "ngx-bootstrap/datepicker";
|
||||||
|
import {TooltipModule} from "ngx-bootstrap/tooltip";
|
||||||
|
import {PopoverModule} from "ngx-bootstrap/popover";
|
||||||
|
import {CommonModule} from "@angular/common";
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'psbx-ds-datetime-filter',
|
selector: 'bsx-ds-datetime-filter',
|
||||||
templateUrl: './data-source-datetime-filter.component.html',
|
templateUrl: './data-source-datetime-filter.component.html',
|
||||||
styleUrls: ['./data-source-datetime-filter.component.scss']
|
styleUrls: ['./data-source-datetime-filter.component.scss'],
|
||||||
|
standalone: true,
|
||||||
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
FormsModule,
|
||||||
|
BsDatepickerModule,
|
||||||
|
TooltipModule,
|
||||||
|
PopoverModule
|
||||||
|
]
|
||||||
})
|
})
|
||||||
export class DataSourceDatetimeFilterComponent implements OnInit {
|
export class DataSourceDatetimeFilterComponent implements OnInit {
|
||||||
|
|
||||||
@Input() path: string;
|
@Input() path: string;
|
||||||
@Input() dataSource : IDataSource<any>;
|
@Input() dataSource : IDataSource<any>;
|
||||||
@Input() filterType: string;
|
@Input() filterType: string;
|
||||||
@Output() filterTypeChanged: EventEmitter<string> = new EventEmitter<string>();
|
@Output() filterTypeChanged: EventEmitter<string> = new EventEmitter<string>();
|
||||||
|
|
||||||
filterPopUpOpened: boolean = false;
|
filterPopUpOpened: boolean = false;
|
||||||
isFiltering: boolean;
|
isFiltering: boolean;
|
||||||
filterValue: Date = null;
|
filterValue: Date = null;
|
||||||
filterTypes = [
|
filterTypes = [
|
||||||
{key:'Equal', value: 'Equal'},
|
{key:'Equal', value: 'Equal'},
|
||||||
{key:'Greater Than', value: 'GreaterThan'},
|
{key:'Greater Than', value: 'GreaterThan'},
|
||||||
{key:'Less Than', value: 'LessThan'},
|
{key:'Less Than', value: 'LessThan'},
|
||||||
{key:'Greater Than Equal', value: 'GreaterThanOrEqual'},
|
{key:'Greater Than Equal', value: 'GreaterThanOrEqual'},
|
||||||
{key:'Less Than Equal', value: 'LessThanOrEqual'},
|
{key:'Less Than Equal', value: 'LessThanOrEqual'},
|
||||||
{key:'Range', value: FilterType.COMPOSITE }
|
{key:'Range', value: FilterType.COMPOSITE }
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
bsInlineValue = new Date();
|
bsInlineValue = new Date();
|
||||||
bsInlineRangeValue: Date[];
|
bsInlineRangeValue: Date[];
|
||||||
maxDate = new Date();
|
maxDate = new Date();
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this.maxDate.setDate(this.maxDate.getDate() + 7);
|
this.maxDate.setDate(this.maxDate.getDate() + 7);
|
||||||
this.bsInlineRangeValue = [this.bsInlineValue, this.maxDate];
|
this.bsInlineRangeValue = [this.bsInlineValue, this.maxDate];
|
||||||
@ -45,23 +55,23 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
|
|||||||
if (!this.filterType)
|
if (!this.filterType)
|
||||||
this.filterType = 'Equal';
|
this.filterType = 'Equal';
|
||||||
}
|
}
|
||||||
|
|
||||||
showTooltip(){
|
showTooltip(){
|
||||||
return "Filter by "+ this.path;
|
return "Filter by "+ this.path;
|
||||||
}
|
}
|
||||||
|
|
||||||
clearFilter() {
|
clearFilter() {
|
||||||
|
|
||||||
this.filterValue = null;
|
this.filterValue = null;
|
||||||
this.isFiltering = false;
|
this.isFiltering = false;
|
||||||
const existingFilter = this.dataSource.filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
|
const existingFilter = this.dataSource.filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
|
||||||
if (existingFilter) {
|
if (existingFilter) {
|
||||||
this.dataSource.query({
|
this.dataSource.query({
|
||||||
page: 1,
|
page: 1,
|
||||||
filters: this.dataSource.filters.filter(t => t != existingFilter)
|
filters: this.dataSource.filters.filter(t => t != existingFilter)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.isRangeFilter){
|
if (this.isRangeFilter) {
|
||||||
|
|
||||||
let existingFilter2 = this.dataSource.filters.find(t=> t.type == 'Composite');
|
let existingFilter2 = this.dataSource.filters.find(t=> t.type == 'Composite');
|
||||||
this.dataSource.query({
|
this.dataSource.query({
|
||||||
page: 1,
|
page: 1,
|
||||||
@ -69,26 +79,28 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
applyFilter(){
|
applyFilter(){
|
||||||
|
|
||||||
this.isFiltering = true;
|
this.isFiltering = true;
|
||||||
const filters = this.dataSource.filters;
|
const filters = this.dataSource.filters;
|
||||||
let compositeF: any = null;
|
let compositeF: any = null;
|
||||||
let freshFilter: ISimpleFilter = null;
|
let freshFilter: ISimpleFilter = null;
|
||||||
let startDate:Date;
|
let startDate: Date;
|
||||||
let endDate:Date;
|
let endDate: Date;
|
||||||
|
|
||||||
// TODO create filter here.
|
// TODO create filter here.
|
||||||
if(Array.isArray(this.filterValue)){ //check if it's a dateRange value
|
if(Array.isArray(this.filterValue)){ //check if it's a dateRange value
|
||||||
startDate = this.filterValue[0];
|
startDate = this.filterValue[0];
|
||||||
endDate = this.filterValue[1];
|
endDate = this.filterValue[1];
|
||||||
|
|
||||||
compositeF = {
|
compositeF = {
|
||||||
type: FilterType.COMPOSITE,
|
type: FilterType.COMPOSITE,
|
||||||
filters: [
|
filters: [
|
||||||
{
|
{
|
||||||
path: this.path,
|
path: this.path,
|
||||||
type: 'GREATERTHANOREQUAL',
|
type: 'GREATERTHANOREQUAL',
|
||||||
value: startDate,
|
value: startDate,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
and: true,
|
and: true,
|
||||||
@ -97,45 +109,43 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
|
|||||||
value: endDate,
|
value: endDate,
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
};
|
||||||
|
} else {
|
||||||
}else{
|
|
||||||
freshFilter = {
|
freshFilter = {
|
||||||
type: this.filterType,
|
type: this.filterType,
|
||||||
and: true,
|
and: true,
|
||||||
path: this.path,
|
path: this.path,
|
||||||
value: this.filterValue
|
value: this.filterValue
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO???
|
// TODO???
|
||||||
// set this for gql better handling of variant.
|
// set this for gql better handling of variant.
|
||||||
//(freshFilter as IGraphQLFilter).__gqlVariantType = 'DATETIME';
|
//(freshFilter as IGraphQLFilter).__gqlVariantType = 'DATETIME';
|
||||||
|
|
||||||
|
|
||||||
const existingFilterIndex = filters.findIndex(t => {
|
const existingFilterIndex = filters.findIndex(t => {
|
||||||
if (t.type == 'COMPOSITE') {
|
if (t.type == 'COMPOSITE') {
|
||||||
const compositeFilter = t as ICompositeFilter;
|
const compositeFilter = t as ICompositeFilter;
|
||||||
return compositeFilter.filters && compositeFilter.filters.length
|
return compositeFilter.filters && compositeFilter.filters.length
|
||||||
&& compositeFilter[0].path == this.path;
|
&& compositeFilter[0].path == this.path;
|
||||||
} else {
|
} else {
|
||||||
return (t as ISimpleFilter).path == this.path;
|
return (t as ISimpleFilter).path == this.path;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (existingFilterIndex == -1) {
|
if (existingFilterIndex == -1) {
|
||||||
// create it.
|
// create it.
|
||||||
if(compositeF){
|
if(compositeF) {
|
||||||
filters.push(compositeF);
|
filters.push(compositeF);
|
||||||
}else{
|
} else {
|
||||||
filters.push(freshFilter);
|
filters.push(freshFilter);
|
||||||
}
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
// replace it.
|
// replace it.
|
||||||
if(compositeF){
|
if (compositeF) {
|
||||||
filters[existingFilterIndex] = compositeF;
|
filters[existingFilterIndex] = compositeF;
|
||||||
}else{
|
} else {
|
||||||
filters[existingFilterIndex] = freshFilter;
|
filters[existingFilterIndex] = freshFilter;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -143,8 +153,6 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
|
|||||||
this.dataSource.query({
|
this.dataSource.query({
|
||||||
filters: filters,
|
filters: filters,
|
||||||
page: 1
|
page: 1
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
<ng-template #popTemplate>
|
||||||
|
<form (ngSubmit)="applyFilter()" novalidate>
|
||||||
|
<div class="container" >
|
||||||
|
<div class="row">
|
||||||
|
<select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType" [ngModelOptions]="{standalone: true}">
|
||||||
|
<option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row mt-1 mb-1">
|
||||||
|
<input type="number" class="form-control" placeholder="Value" aria-label="number"
|
||||||
|
aria-describedby="basic-addon1" [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="btn btn-primary mr-1">Filter</button>
|
||||||
|
<button type="button" class="btn btn-warning" *ngIf="!isFiltering" (click)="pop.hide()">Hide</button>
|
||||||
|
<button type="button" class="btn btn-dark" *ngIf="isFiltering" (click)="clearFilter()">Clear</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||||
|
viewBox="0 0 477.875 477.875" fill-opacity="0.5" [tooltip]="showTooltip()" [isDisabled]="filterIsOpened" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}" [popover]="popTemplate" [isOpen]="filterIsOpened" [outsideClick]="true" #pop="bs-popover">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c-0.004,4.842,2.05,9.458,5.649,12.698l165.018,148.514V460.8
|
||||||
|
c-0.004,9.426,7.633,17.07,17.059,17.075c2.651,0.001,5.266-0.615,7.637-1.8l102.4-51.2c5.786-2.891,9.441-8.806,9.438-15.275
|
||||||
|
V263.612l165.018-148.48c3.608-3.247,5.662-7.878,5.649-12.732V17.067C477.871,7.641,470.23,0,460.804,0z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
@ -1,35 +1,38 @@
|
|||||||
import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
|
import {Component, Input} from '@angular/core';
|
||||||
import { IDataSource,IFilter, ISimpleFilter } from '@poweredsoft/data';
|
import {IDataSource, ISimpleFilter} from '@poweredsoft/data';
|
||||||
|
import {FormsModule} from "@angular/forms";
|
||||||
|
import {CommonModule} from "@angular/common";
|
||||||
|
import {TooltipModule} from "ngx-bootstrap/tooltip";
|
||||||
|
import {PopoverModule} from "ngx-bootstrap/popover";
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'psbx-ds-number-filter',
|
selector: 'bsx-ds-number-filter',
|
||||||
templateUrl: './data-source-number-filter.component.html',
|
templateUrl: './data-source-number-filter.component.html',
|
||||||
styleUrls: ['./data-source-number-filter.component.scss']
|
styleUrls: ['./data-source-number-filter.component.scss'],
|
||||||
|
standalone: true,
|
||||||
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
FormsModule,
|
||||||
|
TooltipModule,
|
||||||
|
PopoverModule
|
||||||
|
]
|
||||||
})
|
})
|
||||||
export class DataSourceNumberFilterComponent implements OnInit {
|
export class DataSourceNumberFilterComponent {
|
||||||
@Input() dataSource : IDataSource<any>;
|
@Input() dataSource : IDataSource<any>;
|
||||||
@Input() path:string;
|
@Input() path: string;
|
||||||
|
|
||||||
filterType: string = 'Equal';
|
filterType: string = 'Equal';
|
||||||
filterValue: number = 0;
|
filterValue: number = 0;
|
||||||
isFiltering: boolean;
|
isFiltering: boolean;
|
||||||
filterTypes = [
|
filterIsOpened: boolean = false;
|
||||||
{key:'Equals', value: 'Equal'},
|
filterTypes = [
|
||||||
|
{key:'Equals', value: 'Equal'},
|
||||||
{key:'Greater Than', value: 'GreaterThan'},
|
{key:'Greater Than', value: 'GreaterThan'},
|
||||||
{key:'Less Than', value: 'LessThan'},
|
{key:'Less Than', value: 'LessThan'},
|
||||||
{key:'Greater Than Equal', value: 'GreaterThanOrEqual'},
|
{key:'Greater Than Equal', value: 'GreaterThanOrEqual'},
|
||||||
{key:'Less Than Equal', value: 'LessThanOrEqual'},
|
{key:'Less Than Equal', value: 'LessThanOrEqual'},
|
||||||
];
|
];
|
||||||
filterIsOpenned: boolean = false;
|
|
||||||
|
|
||||||
constructor() { }
|
|
||||||
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
clearFilter() {
|
clearFilter() {
|
||||||
this.filterValue = 0;
|
this.filterValue = 0;
|
||||||
@ -54,7 +57,7 @@ export class DataSourceNumberFilterComponent implements OnInit {
|
|||||||
filters.push(<ISimpleFilter>{
|
filters.push(<ISimpleFilter>{
|
||||||
and: true,
|
and: true,
|
||||||
type: this.filterType,
|
type: this.filterType,
|
||||||
path: this.path,
|
path: this.path,
|
||||||
value: this.filterValue.toString()
|
value: this.filterValue.toString()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -0,0 +1,106 @@
|
|||||||
|
<ng-template #popTemplate>
|
||||||
|
<form (ngSubmit)="applyFilter(pop)" novalidate>
|
||||||
|
|
||||||
|
<div class="container" >
|
||||||
|
<div class="row">
|
||||||
|
<select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType" [ngModelOptions]="{standalone: true}">
|
||||||
|
<option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row mt-1 mb-1">
|
||||||
|
<input type="text" class="form-control" placeholder="Value" aria-label="Username"
|
||||||
|
aria-describedby="basic-addon1" [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}" >
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="btn btn-primary mr-1" type="submit">Filter</button>
|
||||||
|
<button type="button" class="btn btn-warning" *ngIf="!isFiltering" (click)="pop.hide()">Hide</button>
|
||||||
|
<button type="button" class="btn btn-dark" *ngIf="isFiltering" (click)="clearFilter()">Clear</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
<!-- <button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterIsOpenned" [outsideClick]="true" #pop="bs-popover">
|
||||||
|
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;" xml:space="preserve" fill-opacity="0.5" [tooltip]="showTooltip()" [tooltipEnable]="!filterIsOpenned" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c-0.004,4.842,2.05,9.458,5.649,12.698l165.018,148.514V460.8
|
||||||
|
c-0.004,9.426,7.633,17.07,17.059,17.075c2.651,0.001,5.266-0.615,7.637-1.8l102.4-51.2c5.786-2.891,9.441-8.806,9.438-15.275
|
||||||
|
V263.612l165.018-148.48c3.608-3.247,5.662-7.878,5.649-12.732V17.067C477.871,7.641,470.23,0,460.804,0z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</button> -->
|
||||||
|
|
||||||
|
<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 477.875 477.875" fill-opacity="0.5" [tooltip]="showTooltip()" [isDisabled]="filterIsOpened" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}" [popover]="popTemplate" [isOpen]="filterIsOpened" [outsideClick]="true" #pop="bs-popover">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c-0.004,4.842,2.05,9.458,5.649,12.698l165.018,148.514V460.8
|
||||||
|
c-0.004,9.426,7.633,17.07,17.059,17.075c2.651,0.001,5.266-0.615,7.637-1.8l102.4-51.2c5.786-2.891,9.441-8.806,9.438-15.275
|
||||||
|
V263.612l165.018-148.48c3.608-3.247,5.662-7.878,5.649-12.732V17.067C477.871,7.641,470.23,0,460.804,0z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
@ -1,36 +1,37 @@
|
|||||||
import { Component, OnInit, Input } from '@angular/core';
|
import {Component, Input} from '@angular/core';
|
||||||
import { IDataSource} from '@poweredsoft/data';
|
import {IDataSource, ISimpleFilter} from '@poweredsoft/data';
|
||||||
import { ISimpleFilter } from '@poweredsoft/data';
|
import {PopoverDirective, PopoverModule} from 'ngx-bootstrap/popover';
|
||||||
import { PopoverDirective } from 'ngx-bootstrap/popover';
|
import {FormsModule} from "@angular/forms";
|
||||||
|
import {TooltipModule} from "ngx-bootstrap/tooltip";
|
||||||
|
import {CommonModule} from "@angular/common";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'psbx-ds-text-filter',
|
selector: 'bsx-ds-text-filter',
|
||||||
templateUrl: './data-source-text-filter.component.html',
|
templateUrl: './data-source-text-filter.component.html',
|
||||||
styleUrls: ['./data-source-text-filter.component.scss']
|
styleUrls: ['./data-source-text-filter.component.scss'],
|
||||||
|
standalone: true,
|
||||||
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
FormsModule,
|
||||||
|
TooltipModule,
|
||||||
|
PopoverModule,
|
||||||
|
]
|
||||||
})
|
})
|
||||||
export class DataSourceTextFilterComponent implements OnInit {
|
export class DataSourceTextFilterComponent {
|
||||||
|
@Input() dataSource : IDataSource<any>;
|
||||||
|
@Input() path: string;
|
||||||
|
|
||||||
@Input() dataSource : IDataSource<any>;
|
|
||||||
@Input() path:string;
|
|
||||||
|
|
||||||
filterType: string = 'Contains';
|
filterType: string = 'Contains';
|
||||||
filterValue: string = null;
|
filterValue: string = null;
|
||||||
isFiltering: boolean;
|
isFiltering: boolean;
|
||||||
|
filterIsOpened: boolean = false;
|
||||||
|
|
||||||
filterTypes = [
|
filterTypes = [
|
||||||
{key:'Contains', value: 'Contains'},
|
{key:'Contains', value: 'Contains'},
|
||||||
{key:'Equals', value: 'Equal'},
|
{key:'Equals', value: 'Equal'},
|
||||||
{key:'Starts With', value: 'startsWith'},
|
{key:'Starts With', value: 'startsWith'},
|
||||||
{key:'Ends With', value: 'endsWith'}
|
{key:'Ends With', value: 'endsWith'}
|
||||||
];
|
];
|
||||||
filterIsOpenned: boolean = false;
|
|
||||||
|
|
||||||
constructor() { }
|
|
||||||
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
clearFilter() {
|
clearFilter() {
|
||||||
this.filterValue = '';
|
this.filterValue = '';
|
||||||
@ -55,7 +56,7 @@ export class DataSourceTextFilterComponent implements OnInit {
|
|||||||
filters.push(<ISimpleFilter>{
|
filters.push(<ISimpleFilter>{
|
||||||
and: true,
|
and: true,
|
||||||
type: this.filterType,
|
type: this.filterType,
|
||||||
path: this.path,
|
path: this.path,
|
||||||
value: this.filterValue
|
value: this.filterValue
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -65,7 +66,7 @@ export class DataSourceTextFilterComponent implements OnInit {
|
|||||||
page: 1
|
page: 1
|
||||||
})
|
})
|
||||||
|
|
||||||
if (pop)
|
if (pop)
|
||||||
pop.hide();
|
pop.hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1,16 +1,16 @@
|
|||||||
:host span.dropdown-toggle.sort-desc{
|
:host span.dropdown-toggle.sort-desc{
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host span{
|
:host span{
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .not-sorting-state{
|
:host .not-sorting-state{
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .not-sorting-state:hover{
|
:host .not-sorting-state:hover{
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
@ -1,17 +1,18 @@
|
|||||||
import { Component, OnInit, Input } from '@angular/core';
|
import {Component, Input} from '@angular/core';
|
||||||
import { IDataSource } from '@poweredsoft/data';
|
import {IDataSource} from '@poweredsoft/data';
|
||||||
|
import {CommonModule} from "@angular/common";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'psbx-ds-sorting',
|
selector: 'bsx-ds-sorting',
|
||||||
templateUrl: './data-source-sorting.component.html',
|
templateUrl: './data-source-sorting.component.html',
|
||||||
styleUrls: ['./data-source-sorting.component.scss']
|
styleUrls: ['./data-source-sorting.component.scss'],
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule]
|
||||||
})
|
})
|
||||||
export class DataSourceSortingComponent implements OnInit {
|
export class DataSourceSortingComponent {
|
||||||
|
|
||||||
@Input() dataSource : IDataSource<any>;
|
@Input() dataSource : IDataSource<any>;
|
||||||
@Input() path:string;
|
@Input() path: string;
|
||||||
|
|
||||||
|
|
||||||
get sort() {
|
get sort() {
|
||||||
return this.dataSource.sorts.find(t => t.path == this.path);
|
return this.dataSource.sorts.find(t => t.path == this.path);
|
||||||
}
|
}
|
||||||
@ -24,13 +25,7 @@ export class DataSourceSortingComponent implements OnInit {
|
|||||||
return !this.isSorting ? true : this.sort.ascending;
|
return !this.isSorting ? true : this.sort.ascending;
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor() { }
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
|
||||||
}
|
|
||||||
|
|
||||||
sorting(){
|
sorting(){
|
||||||
|
|
||||||
if (!this.isSorting) {
|
if (!this.isSorting) {
|
||||||
this.dataSource.sorts.push({
|
this.dataSource.sorts.push({
|
||||||
path: this.path,
|
path: this.path,
|
||||||
@ -47,5 +42,4 @@ export class DataSourceSortingComponent implements OnInit {
|
|||||||
page: 1
|
page: 1
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,9 +1,8 @@
|
|||||||
import { Directive, Input, TemplateRef, HostListener, Output, EventEmitter } from '@angular/core';
|
import {Directive, EventEmitter, HostListener, Inject, Input, Output, TemplateRef} from '@angular/core';
|
||||||
import { IDataSource } from '@poweredsoft/data';
|
import {IDataSource} from '@poweredsoft/data';
|
||||||
import { BsModalService } from 'ngx-bootstrap/modal';
|
import {BsModalService} from 'ngx-bootstrap/modal';
|
||||||
import { FormGroupCommandModalComponent } from '../form-group-command-modal/form-group-command-modal.component';
|
import {FormGroupCommandModalComponent} from '../form-group-command-modal/form-group-command-modal.component';
|
||||||
import { FormGroup } from '@angular/forms';
|
import {UntypedFormGroup} from '@angular/forms';
|
||||||
import { ConfirmModalComponent } from '../../confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component';
|
|
||||||
|
|
||||||
export interface IModelFormCreateEvent
|
export interface IModelFormCreateEvent
|
||||||
{
|
{
|
||||||
@ -11,14 +10,15 @@ export interface IModelFormCreateEvent
|
|||||||
viewModel: any;
|
viewModel: any;
|
||||||
commandName: string;
|
commandName: string;
|
||||||
commandModel: any;
|
commandModel: any;
|
||||||
formGroup?: FormGroup;
|
formGroup?: UntypedFormGroup;
|
||||||
}
|
}
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psbxFormGroupCommandModal]'
|
selector: '[bsxFormGroupCommandModal]',
|
||||||
|
standalone: true
|
||||||
})
|
})
|
||||||
export class FormGroupCommandModalDirective {
|
export class FormGroupCommandModalDirective {
|
||||||
|
@Inject(BsModalService) private modalService!: BsModalService;
|
||||||
|
|
||||||
@Input() dataSource: IDataSource<any>;
|
@Input() dataSource: IDataSource<any>;
|
||||||
@Input() command: string;
|
@Input() command: string;
|
||||||
@ -32,14 +32,10 @@ export class FormGroupCommandModalDirective {
|
|||||||
@Input() backdrop: boolean;
|
@Input() backdrop: boolean;
|
||||||
@Input() ignoreBackdropClick: boolean;
|
@Input() ignoreBackdropClick: boolean;
|
||||||
@Input() params: any;
|
@Input() params: any;
|
||||||
|
|
||||||
@Output() formCreate: EventEmitter<IModelFormCreateEvent> = new EventEmitter<IModelFormCreateEvent>();
|
@Output() formCreate: EventEmitter<IModelFormCreateEvent> = new EventEmitter<IModelFormCreateEvent>();
|
||||||
|
|
||||||
@Output() success: EventEmitter<any> = new EventEmitter<any>();
|
@Output() success: EventEmitter<any> = new EventEmitter<any>();
|
||||||
|
|
||||||
|
|
||||||
constructor(private modalService: BsModalService) { }
|
|
||||||
|
|
||||||
@HostListener('click')
|
@HostListener('click')
|
||||||
wasClicked() {
|
wasClicked() {
|
||||||
this.dataSource.resolveCommandModelByName({
|
this.dataSource.resolveCommandModelByName({
|
||||||
@ -73,7 +69,7 @@ export class FormGroupCommandModalDirective {
|
|||||||
commandModel:commandModel,
|
commandModel:commandModel,
|
||||||
successEmitter: this.success
|
successEmitter: this.success
|
||||||
};
|
};
|
||||||
|
|
||||||
this.modalService.show(FormGroupCommandModalComponent, {
|
this.modalService.show(FormGroupCommandModalComponent, {
|
||||||
animated: this.animated === undefined ? true : this.animated,
|
animated: this.animated === undefined ? true : this.animated,
|
||||||
initialState,
|
initialState,
|
||||||
@ -85,5 +81,4 @@ export class FormGroupCommandModalDirective {
|
|||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
<div class="modal-header">
|
||||||
|
<h4 class="modal-title pull-left">{{ title }}</h4>
|
||||||
|
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="model-body">
|
||||||
|
<ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ $implicit: modelForm, loading: loading }">
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<div *ngIf="errorMessage" class="alert alert-danger mt-2" style="white-space: pre-wrap">{{ errorMessage }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-light" (click)="modalRef.hide()"
|
||||||
|
[disabled]="loading">{{ cancelText }}</button>
|
||||||
|
<button type="button" class="btn btn-primary" (click)="attemptSave()" [disabled]="loading">{{commandText}}</button>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<div class="progress" style="width: 100%" *ngIf="loading">
|
||||||
|
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100"
|
||||||
|
aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -1,19 +1,22 @@
|
|||||||
import { Component, OnInit, TemplateRef, OnDestroy, EventEmitter } from '@angular/core';
|
import {Component, EventEmitter, Inject, OnDestroy, OnInit, TemplateRef} from '@angular/core';
|
||||||
import { BsModalRef } from 'ngx-bootstrap/modal';
|
import {BsModalRef} from 'ngx-bootstrap/modal';
|
||||||
import { IDataSource } from '@poweredsoft/data';
|
import {IDataSource} from '@poweredsoft/data';
|
||||||
import { finalize } from 'rxjs/operators';
|
import {finalize} from 'rxjs/operators';
|
||||||
import { Subscription } from 'rxjs'
|
import {Subscription} from 'rxjs'
|
||||||
import { FormGroup, FormControl } from '@angular/forms';
|
import {UntypedFormGroup} from '@angular/forms';
|
||||||
|
import {CommonModule} from "@angular/common";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ps-form-group-command-modal',
|
selector: 'bsx-form-group-command-modal',
|
||||||
templateUrl: './form-group-command-modal.component.html',
|
templateUrl: './form-group-command-modal.component.html',
|
||||||
styleUrls: ['./form-group-command-modal.component.scss']
|
styleUrls: ['./form-group-command-modal.component.scss'],
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule]
|
||||||
})
|
})
|
||||||
export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
|
export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
|
||||||
|
@Inject(BsModalRef) public modalRef!: BsModalRef;
|
||||||
|
|
||||||
|
modelForm: UntypedFormGroup;
|
||||||
modelForm: FormGroup;
|
|
||||||
title: string;
|
title: string;
|
||||||
template: TemplateRef<any>;
|
template: TemplateRef<any>;
|
||||||
command: string;
|
command: string;
|
||||||
@ -23,16 +26,12 @@ export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
|
|||||||
commandText: string;
|
commandText: string;
|
||||||
cancelText: string;
|
cancelText: string;
|
||||||
errorMessage: string;
|
errorMessage: string;
|
||||||
commandModel:any;
|
commandModel: any;
|
||||||
successEmitter: EventEmitter<any>;
|
successEmitter: EventEmitter<any>;
|
||||||
|
|
||||||
private _notifyMessage: Subscription;
|
private _notifyMessage: Subscription;
|
||||||
private _validationError: Subscription;
|
private _validationError: Subscription;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
constructor(public modalRef: BsModalRef) { }
|
|
||||||
|
|
||||||
ngOnDestroy(): void {
|
ngOnDestroy(): void {
|
||||||
this._notifyMessage.unsubscribe();
|
this._notifyMessage.unsubscribe();
|
||||||
this._validationError.unsubscribe();
|
this._validationError.unsubscribe();
|
||||||
@ -41,10 +40,10 @@ export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
|
|||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.errorMessage = null;
|
this.errorMessage = null;
|
||||||
this._notifyMessage = this.dataSource.notifyMessage$.subscribe(message => {
|
this._notifyMessage = this.dataSource.notifyMessage$.subscribe(message => {
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
this._validationError = this.dataSource.validationError$.subscribe(validatorErrors => {
|
this._validationError = this.dataSource.validationError$.subscribe(validatorErrors => {
|
||||||
let validationSummary = '';
|
let validationSummary = '';
|
||||||
Object.getOwnPropertyNames(validatorErrors.errors).forEach(property => {
|
Object.getOwnPropertyNames(validatorErrors.errors).forEach(property => {
|
||||||
const errors = validatorErrors.errors[property].join('\n');
|
const errors = validatorErrors.errors[property].join('\n');
|
||||||
@ -58,11 +57,11 @@ export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
|
|||||||
// this.errorMessage = null;
|
// this.errorMessage = null;
|
||||||
// if (!this.modelForm.valid)
|
// if (!this.modelForm.valid)
|
||||||
// {
|
// {
|
||||||
// this.errorMessage = 'Form is not valid, please enter all required fields';
|
// this.errorMessage = 'Form is not valid, please enter all required fields';
|
||||||
// return;
|
// return;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
const finalModel = this.modelForm.value;
|
const finalModel = this.modelForm.value;
|
||||||
if(this.commandModel.id)
|
if(this.commandModel.id)
|
||||||
{
|
{
|
||||||
finalModel.id = this.commandModel.id;
|
finalModel.id = this.commandModel.id;
|
||||||
@ -1,20 +1,25 @@
|
|||||||
import { Component, OnInit, Input, OnDestroy, ChangeDetectorRef } from '@angular/core';
|
import {ChangeDetectorRef, Component, Inject, Input, OnDestroy, OnInit} from '@angular/core';
|
||||||
import { IDataSource } from '@poweredsoft/data';
|
import {IDataSource} from '@poweredsoft/data';
|
||||||
import { Subscription } from 'rxjs';
|
import {Subscription} from 'rxjs';
|
||||||
|
import {CommonModule} from "@angular/common";
|
||||||
|
import {PaginationModule} from "ngx-bootstrap/pagination";
|
||||||
|
import {FormsModule} from "@angular/forms";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'psbx-ds-pagination',
|
selector: 'bsx-ds-pagination',
|
||||||
templateUrl: './data-source-pagination.component.html',
|
templateUrl: './data-source-pagination.component.html',
|
||||||
styleUrls: ['./data-source-pagination.component.scss']
|
styleUrls: ['./data-source-pagination.component.scss'],
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule, PaginationModule, FormsModule]
|
||||||
})
|
})
|
||||||
export class DataSourcePaginationComponent implements OnInit, OnDestroy {
|
export class DataSourcePaginationComponent implements OnInit, OnDestroy {
|
||||||
|
@Inject(ChangeDetectorRef) private cdf!: ChangeDetectorRef;
|
||||||
|
|
||||||
@Input() dataSource: IDataSource<any>
|
@Input() dataSource: IDataSource<any>
|
||||||
|
|
||||||
numberOfItems: number = 0;
|
numberOfItems: number = 0;
|
||||||
private dataSubscription: Subscription;
|
private dataSubscription: Subscription;
|
||||||
|
|
||||||
constructor(private cdf: ChangeDetectorRef) { }
|
|
||||||
ngOnDestroy(): void {
|
ngOnDestroy(): void {
|
||||||
this.dataSubscription.unsubscribe();
|
this.dataSubscription.unsubscribe();
|
||||||
}
|
}
|
||||||
@ -31,5 +36,4 @@ export class DataSourcePaginationComponent implements OnInit, OnDestroy {
|
|||||||
this.numberOfItems = 0;
|
this.numberOfItems = 0;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<div class="center">
|
||||||
|
<div class="spinner-grow text-primary" role="status">
|
||||||
|
</div>
|
||||||
|
<div class="spinner-grow text-secondary" role="status">
|
||||||
|
</div>
|
||||||
|
<div class="spinner-grow text-primary" role="status">
|
||||||
|
</div>
|
||||||
|
<div class="spinner-grow text-secondary" role="status">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
.center {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import {Component} from '@angular/core';
|
||||||
|
import {CommonModule} from "@angular/common";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'bsx-spinner',
|
||||||
|
templateUrl: './spinner.component.html',
|
||||||
|
styleUrls: ['./spinner.component.scss'],
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule]
|
||||||
|
})
|
||||||
|
export class SpinnerComponent {
|
||||||
|
|
||||||
|
}
|
||||||
@ -5,19 +5,12 @@
|
|||||||
export * from './lib/command-modal/command-modal.module';
|
export * from './lib/command-modal/command-modal.module';
|
||||||
export * from './lib/command-modal/command-modal.service';
|
export * from './lib/command-modal/command-modal.service';
|
||||||
export * from './lib/command-modal/directives/command-modal.directive';
|
export * from './lib/command-modal/directives/command-modal.directive';
|
||||||
export * from './lib/form-group-command-modal/form-group-command-modal.module';
|
|
||||||
export * from './lib/form-group-command-modal/directives/form-group-command-modal.directive';
|
export * from './lib/form-group-command-modal/directives/form-group-command-modal.directive';
|
||||||
export * from './lib/pagination/Pagination.module';
|
|
||||||
export * from './lib/pagination/data-source-pagination/data-source-pagination.component';
|
export * from './lib/pagination/data-source-pagination/data-source-pagination.component';
|
||||||
export * from './lib/confirm-modal/confirm-modal.module';
|
|
||||||
export * from './lib/confirm-modal/confirm-modal.service';
|
export * from './lib/confirm-modal/confirm-modal.service';
|
||||||
export * from './lib/spinner/spinner.module';
|
|
||||||
export * from './lib/spinner/spinner/spinner.component';
|
export * from './lib/spinner/spinner/spinner.component';
|
||||||
export * from './lib/data-source-filter/data-source-filter.module';
|
|
||||||
export * from './lib/data-source-filter/text-filter/data-source-text-filter.component';
|
export * from './lib/data-source-filter/text-filter/data-source-text-filter.component';
|
||||||
export * from './lib/data-source-filter/number-filter/data-source-number-filter.component';
|
export * from './lib/data-source-filter/number-filter/data-source-number-filter.component';
|
||||||
export * from './lib/data-source-filter/datetime-filter/data-source-datetime-filter.component';
|
export * from './lib/data-source-filter/datetime-filter/data-source-datetime-filter.component';
|
||||||
export * from './lib/data-source-sorting/data-source-sorting.module';
|
|
||||||
export * from './lib/data-source-sorting/ds-sorting/data-source-sorting.component';
|
export * from './lib/data-source-sorting/ds-sorting/data-source-sorting.component';
|
||||||
export * from './lib/command/command.module';
|
|
||||||
export * from './lib/command/directives/command.directive';
|
export * from './lib/command/directives/command.directive';
|
||||||
@ -1,26 +1,17 @@
|
|||||||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||||
|
|
||||||
import 'zone.js/dist/zone';
|
import 'zone.js';
|
||||||
import 'zone.js/dist/zone-testing';
|
import 'zone.js/testing';
|
||||||
import { getTestBed } from '@angular/core/testing';
|
import { getTestBed } from '@angular/core/testing';
|
||||||
import {
|
import {
|
||||||
BrowserDynamicTestingModule,
|
BrowserDynamicTestingModule,
|
||||||
platformBrowserDynamicTesting
|
platformBrowserDynamicTesting
|
||||||
} from '@angular/platform-browser-dynamic/testing';
|
} from '@angular/platform-browser-dynamic/testing';
|
||||||
|
|
||||||
declare const require: {
|
|
||||||
context(path: string, deep?: boolean, filter?: RegExp): {
|
|
||||||
keys(): string[];
|
|
||||||
<T>(id: string): T;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
// First, initialize the Angular testing environment.
|
// First, initialize the Angular testing environment.
|
||||||
getTestBed().initTestEnvironment(
|
getTestBed().initTestEnvironment(
|
||||||
BrowserDynamicTestingModule,
|
BrowserDynamicTestingModule,
|
||||||
platformBrowserDynamicTesting()
|
platformBrowserDynamicTesting(), {
|
||||||
|
teardown: { destroyAfterEach: false }
|
||||||
|
}
|
||||||
);
|
);
|
||||||
// Then we find all the tests.
|
|
||||||
const context = require.context('./', true, /\.spec\.ts$/);
|
|
||||||
// And load the modules.
|
|
||||||
context.keys().map(context);
|
|
||||||
@ -2,7 +2,7 @@
|
|||||||
"extends": "../../../tsconfig.json",
|
"extends": "../../../tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"outDir": "../../../out-tsc/lib",
|
"outDir": "../../../out-tsc/lib",
|
||||||
"target": "es2015",
|
"declarationMap": true,
|
||||||
"declaration": true,
|
"declaration": true,
|
||||||
"inlineSources": true,
|
"inlineSources": true,
|
||||||
"types": [],
|
"types": [],
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"extends": "./tsconfig.lib.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"declarationMap": false
|
||||||
|
},
|
||||||
|
"angularCompilerOptions": {
|
||||||
|
"compilationMode": "partial"
|
||||||
|
}
|
||||||
|
}
|
||||||
5
projects/openharbor/ngx-data-cdk-ui/README.md
Normal file
5
projects/openharbor/ngx-data-cdk-ui/README.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
> This project was originally initiated by [Powered Software Inc.](https://poweredsoft.com/) and was forked from the [ngx-ui](https://github.com/PoweredSoft/ngx-ui) Repository
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
This project is licensed under the [MIT License](LICENSE).
|
||||||
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
|
"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
|
||||||
"dest": "../../../dist/poweredsoft/ngx-cdk-ui",
|
"dest": "../../../dist/openharbor/ngx-data-cdk-ui",
|
||||||
"lib": {
|
"lib": {
|
||||||
"entryFile": "src/public-api.ts"
|
"entryFile": "src/public-api.ts"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
10
projects/openharbor/ngx-data-cdk-ui/package.json
Normal file
10
projects/openharbor/ngx-data-cdk-ui/package.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"name": "@openharbor/ngx-data-cdk-ui",
|
||||||
|
"version": "18.0.0-alpha.2",
|
||||||
|
"repository": "https://git.openharbor.io/Open-Harbor/ngx-data-ui",
|
||||||
|
"peerDependencies": {
|
||||||
|
"@angular/common": "^18.0.0",
|
||||||
|
"@angular/core": "^18.0.0",
|
||||||
|
"@poweredsoft/data": "^0.0.36"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import {NgModule} from '@angular/core';
|
||||||
|
import {CommonModule} from '@angular/common';
|
||||||
|
import {DataGridComponent} from './data-grid/data-grid.component';
|
||||||
|
import {DataGridColDirective} from './directives/data-grid-col.directive';
|
||||||
|
import {DataGridColHeaderDirective} from './directives/data-grid-col-header.directive';
|
||||||
|
import {DataGridCellDirective} from './directives/data-grid-cell.directive';
|
||||||
|
import {DataGridFooterDirective} from './directives/data-grid-footer.directive';
|
||||||
|
import {DataGridHeaderDirective} from './directives/data-grid-header.directive';
|
||||||
|
import {DataGridLoaderDirective} from './directives/data-grid-loader.directive';
|
||||||
|
import {DataGridCellFilterDirective} from './directives/data-grid-cell-filter.directive';
|
||||||
|
import {DataGridColSortDirective} from './directives/data-grid-col-sort.directive';
|
||||||
|
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [
|
||||||
|
DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,
|
||||||
|
DataGridCellDirective, DataGridFooterDirective, DataGridHeaderDirective,
|
||||||
|
DataGridLoaderDirective, DataGridCellFilterDirective, DataGridColSortDirective,
|
||||||
|
|
||||||
|
],
|
||||||
|
imports: [
|
||||||
|
CommonModule
|
||||||
|
],
|
||||||
|
exports: [
|
||||||
|
DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,
|
||||||
|
DataGridCellDirective,DataGridFooterDirective, DataGridHeaderDirective,
|
||||||
|
DataGridLoaderDirective,DataGridCellFilterDirective,DataGridColSortDirective]
|
||||||
|
})
|
||||||
|
export class DataGridModule { }
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
<ng-container *ngIf="loading" [ngTemplateOutlet]="loadingTemplate"></ng-container>
|
||||||
|
|
||||||
|
<table [ngClass]="tableClasses">
|
||||||
|
<thead [ngClass]="headerClasses">
|
||||||
|
<tr *ngFor="let header of gridHeaders" >
|
||||||
|
<th [attr.colspan]="columns.length">
|
||||||
|
<ng-container [ngTemplateOutlet]="header.template"></ng-container>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th *ngFor="let column of columns">
|
||||||
|
<div class="flex-container">
|
||||||
|
<div class="flex-item">
|
||||||
|
<ng-container *ngIf="hasHeaderTemplate(column)" >
|
||||||
|
<ng-container
|
||||||
|
[ngTemplateOutlet]="getColumnHeaderTemplate(column)"
|
||||||
|
></ng-container>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-item">
|
||||||
|
<ng-container *ngIf="hasSortingTemplate(column)">
|
||||||
|
<ng-container [ngTemplateOutlet]="getSortingTemplate(column)"></ng-container>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container *ngIf="hasFilterTemplate(column)">
|
||||||
|
<ng-container [ngTemplateOutlet]="getFilterTemplate(column)"></ng-container>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody *ngIf="!noData else noResultTemplate">
|
||||||
|
<tr *ngFor="let rowModel of latestResult.data; let i = index; let first = first; let last = last; let odd = odd">
|
||||||
|
<td *ngFor="let column of columns">
|
||||||
|
<ng-container *ngIf="hasCellTemplate(column)">
|
||||||
|
<ng-container
|
||||||
|
[ngTemplateOutlet]="getColumnCellTemplate(column)"
|
||||||
|
[ngTemplateOutletContext]="{
|
||||||
|
$implicit: rowModel,
|
||||||
|
column: column,
|
||||||
|
rowIndex: i,
|
||||||
|
first: first,
|
||||||
|
last: last,
|
||||||
|
odd: odd
|
||||||
|
}"
|
||||||
|
></ng-container>
|
||||||
|
</ng-container>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td *ngFor="let footer of gridFooters" [attr.colspan]="columns.length">
|
||||||
|
<ng-container [ngTemplateOutlet]="footer.template"></ng-container>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<ng-template #loadingTemplate>
|
||||||
|
<ng-container *ngFor="let loader of loaders">
|
||||||
|
<ng-container [ngTemplateOutlet]="loader.template"></ng-container>
|
||||||
|
</ng-container>
|
||||||
|
</ng-template>
|
||||||
|
<ng-template #noResultTemplate>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td [attr.colspan]="columns.length">
|
||||||
|
<p style="text-align: center;">{{ noRecordsDisplayText }}</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</ng-template>
|
||||||
@ -1,10 +1,12 @@
|
|||||||
:host .flex-container{
|
:host {
|
||||||
|
.flex-container{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host .flex-item{
|
.flex-item{
|
||||||
margin-right: 1px;
|
margin-right: 1px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
@ -1,28 +1,37 @@
|
|||||||
import { Component, OnInit, ContentChildren, QueryList, Input, Output, EventEmitter, ContentChild, ChangeDetectorRef, OnDestroy } from '@angular/core';
|
import {
|
||||||
import { IQueryExecutionResult, IQueryExecutionGroupResult, IDataSource } from '@poweredsoft/data';
|
ChangeDetectorRef,
|
||||||
import { DataGridColDirective } from '../directives/data-grid-col.directive';
|
Component,
|
||||||
import { DataGridHeaderDirective } from '../directives/data-grid-header.directive';
|
ContentChildren,
|
||||||
import { DataGridFooterDirective } from '../directives/data-grid-footer.directive';
|
EventEmitter, Inject,
|
||||||
import { DataGridLoaderDirective } from '../directives/data-grid-loader.directive';
|
Input,
|
||||||
import { Subscription } from 'rxjs';
|
OnDestroy,
|
||||||
import { DataGridCellFilterDirective } from '../directives/data-grid-cell-filter.directive';
|
OnInit,
|
||||||
import { DataGridColSortDirective } from '../directives/data-grid-col-sort.directive';
|
Output,
|
||||||
|
QueryList
|
||||||
|
} from '@angular/core';
|
||||||
|
import {IDataSource, IQueryExecutionGroupResult, IQueryExecutionResult} from '@poweredsoft/data';
|
||||||
|
import {DataGridColDirective} from '../directives/data-grid-col.directive';
|
||||||
|
import {DataGridHeaderDirective} from '../directives/data-grid-header.directive';
|
||||||
|
import {DataGridFooterDirective} from '../directives/data-grid-footer.directive';
|
||||||
|
import {DataGridLoaderDirective} from '../directives/data-grid-loader.directive';
|
||||||
|
import {Subscription} from 'rxjs';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ps-data-grid',
|
selector: 'cdk-data-grid',
|
||||||
templateUrl: './data-grid.component.html',
|
templateUrl: './data-grid.component.html',
|
||||||
styleUrls: ['./data-grid.component.scss']
|
styleUrls: ['./data-grid.component.scss']
|
||||||
})
|
})
|
||||||
export class DataGridComponent implements OnInit, OnDestroy {
|
export class DataGridComponent implements OnInit, OnDestroy {
|
||||||
|
@Inject(ChangeDetectorRef) private cdr!: ChangeDetectorRef;
|
||||||
latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
|
|
||||||
loading:boolean;
|
|
||||||
|
|
||||||
@ContentChildren(DataGridColDirective) columnDefinitions: QueryList<DataGridColDirective>;
|
@ContentChildren(DataGridColDirective) columnDefinitions: QueryList<DataGridColDirective>;
|
||||||
@ContentChildren(DataGridHeaderDirective) gridHeaders: QueryList<DataGridHeaderDirective>;
|
@ContentChildren(DataGridHeaderDirective) gridHeaders: QueryList<DataGridHeaderDirective>;
|
||||||
@ContentChildren(DataGridFooterDirective) gridFooters: QueryList<DataGridFooterDirective>;
|
@ContentChildren(DataGridFooterDirective) gridFooters: QueryList<DataGridFooterDirective>;
|
||||||
@ContentChildren(DataGridLoaderDirective) loaders: QueryList<DataGridLoaderDirective>;
|
@ContentChildren(DataGridLoaderDirective) loaders: QueryList<DataGridLoaderDirective>;
|
||||||
|
|
||||||
|
latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
|
||||||
|
loading: boolean = false;
|
||||||
|
|
||||||
@Input() dataSource: IDataSource<any>;
|
@Input() dataSource: IDataSource<any>;
|
||||||
@Input() tableClasses: any;
|
@Input() tableClasses: any;
|
||||||
@Input() headerClasses: any;
|
@Input() headerClasses: any;
|
||||||
@ -32,8 +41,6 @@ export class DataGridComponent implements OnInit, OnDestroy {
|
|||||||
private _dataSubscription: Subscription;
|
private _dataSubscription: Subscription;
|
||||||
private _loadingSubscription: Subscription;
|
private _loadingSubscription: Subscription;
|
||||||
|
|
||||||
_fiters:any
|
|
||||||
|
|
||||||
@Input() set columns(value: string[]) {
|
@Input() set columns(value: string[]) {
|
||||||
this._columns = value;
|
this._columns = value;
|
||||||
this.columnsChange.emit(value);
|
this.columnsChange.emit(value);
|
||||||
@ -41,31 +48,24 @@ export class DataGridComponent implements OnInit, OnDestroy {
|
|||||||
|
|
||||||
get columns() {
|
get columns() {
|
||||||
return this._columns;
|
return this._columns;
|
||||||
}
|
}
|
||||||
|
|
||||||
@Output() columnsChange:EventEmitter<string []> = new EventEmitter<string []>();
|
@Output() columnsChange: EventEmitter<string []> = new EventEmitter<string []>();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
get noData() {
|
get noData() {
|
||||||
return !this.latestResult || this.latestResult.totalRecords == 0;
|
return !this.latestResult || this.latestResult.totalRecords == 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
get noRecordsDisplayText() {
|
get noRecordsDisplayText() {
|
||||||
return this.noRecordsText || 'No records';
|
return this.noRecordsText || 'No records';
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(private cdr: ChangeDetectorRef) {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnDestroy(): void {
|
ngOnDestroy(): void {
|
||||||
this._dataSubscription.unsubscribe();
|
this._dataSubscription.unsubscribe();
|
||||||
this._loadingSubscription.unsubscribe();
|
this._loadingSubscription.unsubscribe();
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
|
|
||||||
this._dataSubscription = this.dataSource.data$.subscribe(newData => {
|
this._dataSubscription = this.dataSource.data$.subscribe(newData => {
|
||||||
this.latestResult = newData;
|
this.latestResult = newData;
|
||||||
});
|
});
|
||||||
@ -74,31 +74,29 @@ export class DataGridComponent implements OnInit, OnDestroy {
|
|||||||
this.loading = isLoading;
|
this.loading = isLoading;
|
||||||
this.cdr.detectChanges();
|
this.cdr.detectChanges();
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getSortingTemplate(columnName){
|
getSortingTemplate(columnName: string){
|
||||||
const ret = this.getColumn(columnName);
|
const ret = this.getColumn(columnName);
|
||||||
if (ret && ret.sortTemplate)
|
if (ret && ret.sortTemplate)
|
||||||
return ret.sortTemplate.template;
|
return ret.sortTemplate.template;
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
getFilterTemplate(columnName){
|
getFilterTemplate(columnName: string){
|
||||||
const ret = this.getColumn(columnName);
|
const ret = this.getColumn(columnName);
|
||||||
if (ret && ret.filterTemplate)
|
if (ret && ret.filterTemplate)
|
||||||
return ret.filterTemplate.template;
|
return ret.filterTemplate.template;
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
getColumn(columnName: string) {
|
getColumn(columnName: string) {
|
||||||
|
|
||||||
if (!this.columnDefinitions)
|
if (!this.columnDefinitions)
|
||||||
return null;
|
return null;
|
||||||
|
|
||||||
const ret = this.columnDefinitions.find(t =>
|
const ret = this.columnDefinitions.find(t =>
|
||||||
{
|
{
|
||||||
return t.columnName == columnName;
|
return t.columnName == columnName;
|
||||||
});
|
});
|
||||||
@ -109,35 +107,33 @@ export class DataGridComponent implements OnInit, OnDestroy {
|
|||||||
|
|
||||||
getColumnHeaderTemplate(columnName: string) {
|
getColumnHeaderTemplate(columnName: string) {
|
||||||
const ret = this.getColumn(columnName);
|
const ret = this.getColumn(columnName);
|
||||||
if (ret && ret.headerTemplate)
|
if (ret && ret.headerTemplate)
|
||||||
return ret.headerTemplate.template;
|
return ret.headerTemplate.template;
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
getColumnCellTemplate(columnName: string) {
|
getColumnCellTemplate(columnName: string) {
|
||||||
const ret = this.getColumn(columnName);
|
const ret = this.getColumn(columnName);
|
||||||
if (ret && ret.cellTemplate)
|
if (ret && ret.cellTemplate)
|
||||||
return ret.cellTemplate.template;
|
return ret.cellTemplate.template;
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
hasHeaderTemplate(columnName: string) {
|
hasHeaderTemplate(columnName: string) {
|
||||||
return this.getColumnHeaderTemplate(columnName) ? true :false;
|
return this.getColumnHeaderTemplate(columnName) ? true : false;
|
||||||
}
|
}
|
||||||
|
|
||||||
hasCellTemplate(columnName: string) {
|
hasCellTemplate(columnName: string) {
|
||||||
return this.getColumnCellTemplate(columnName) ? true :false;
|
return this.getColumnCellTemplate(columnName) ? true : false;
|
||||||
}
|
}
|
||||||
|
|
||||||
hasFilterTemplate(columnName: string) {
|
hasFilterTemplate(columnName: string) {
|
||||||
return this.getFilterTemplate(columnName) ? true :false;
|
return this.getFilterTemplate(columnName) ? true : false;
|
||||||
}
|
}
|
||||||
|
|
||||||
hasSortingTemplate(columnName: string) {
|
hasSortingTemplate(columnName: string) {
|
||||||
return this.getSortingTemplate(columnName) ? true :false;
|
return this.getSortingTemplate(columnName) ? true : false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,10 +1,8 @@
|
|||||||
import { Directive, TemplateRef } from '@angular/core';
|
import {Directive, TemplateRef} from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psDataGridCellFilter]'
|
selector: '[cdkDataGridCellFilter]'
|
||||||
})
|
})
|
||||||
export class DataGridCellFilterDirective {
|
export class DataGridCellFilterDirective {
|
||||||
|
|
||||||
constructor(public template: TemplateRef<any>) { }
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,10 +1,8 @@
|
|||||||
import { Directive, TemplateRef } from '@angular/core';
|
import {Directive, TemplateRef} from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psDataGridCell]'
|
selector: '[cdkDataGridCell]'
|
||||||
})
|
})
|
||||||
export class DataGridCellDirective {
|
export class DataGridCellDirective {
|
||||||
|
|
||||||
constructor(public template: TemplateRef<any>) { }
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,10 +1,8 @@
|
|||||||
import { Directive, TemplateRef } from '@angular/core';
|
import {Directive, TemplateRef} from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psDataGridColHeader]'
|
selector: '[cdkDataGridColHeader]'
|
||||||
})
|
})
|
||||||
export class DataGridColHeaderDirective {
|
export class DataGridColHeaderDirective {
|
||||||
|
|
||||||
constructor(public template: TemplateRef<any>) { }
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
import {Directive, TemplateRef} from '@angular/core';
|
||||||
|
|
||||||
|
@Directive({
|
||||||
|
selector: '[cdkDataGridColSort]'
|
||||||
|
})
|
||||||
|
export class DataGridColSortDirective {
|
||||||
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import {ContentChild, Directive, Input} from '@angular/core';
|
||||||
|
import {DataGridColHeaderDirective} from './data-grid-col-header.directive';
|
||||||
|
import {DataGridCellDirective} from './data-grid-cell.directive';
|
||||||
|
import {DataGridCellFilterDirective} from './data-grid-cell-filter.directive';
|
||||||
|
import {DataGridColSortDirective} from './data-grid-col-sort.directive';
|
||||||
|
|
||||||
|
@Directive({
|
||||||
|
selector: '[cdkDataGridCol]'
|
||||||
|
})
|
||||||
|
export class DataGridColDirective {
|
||||||
|
@Input('psDataGridCol') columnName: string;
|
||||||
|
|
||||||
|
@ContentChild(DataGridColHeaderDirective) headerTemplate: DataGridColHeaderDirective;
|
||||||
|
@ContentChild(DataGridCellDirective) cellTemplate: DataGridCellDirective;
|
||||||
|
@ContentChild(DataGridCellFilterDirective) filterTemplate: DataGridCellFilterDirective;
|
||||||
|
@ContentChild(DataGridColSortDirective) sortTemplate: DataGridColSortDirective;
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
}
|
||||||
@ -1,10 +1,8 @@
|
|||||||
import { Directive, TemplateRef } from '@angular/core';
|
import {Directive, TemplateRef} from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psDataGridFooter]'
|
selector: '[cdkDataGridFooter]'
|
||||||
})
|
})
|
||||||
export class DataGridFooterDirective {
|
export class DataGridFooterDirective {
|
||||||
|
|
||||||
constructor(public template: TemplateRef<any>) { }
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,10 +1,8 @@
|
|||||||
import { Directive, TemplateRef } from '@angular/core';
|
import {Directive, TemplateRef} from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psDataGridHeader]'
|
selector: '[cdkDataGridHeader]'
|
||||||
})
|
})
|
||||||
export class DataGridHeaderDirective {
|
export class DataGridHeaderDirective {
|
||||||
|
|
||||||
constructor(public template: TemplateRef<any>) { }
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,10 +1,8 @@
|
|||||||
import { Directive, TemplateRef } from '@angular/core';
|
import {Directive, TemplateRef} from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psDataGridLoader]'
|
selector: '[cdkDataGridLoader]'
|
||||||
})
|
})
|
||||||
export class DataGridLoaderDirective {
|
export class DataGridLoaderDirective {
|
||||||
|
|
||||||
constructor(public template: TemplateRef<any>) { }
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,10 +1,8 @@
|
|||||||
import { Directive, TemplateRef } from '@angular/core';
|
import {Directive, TemplateRef} from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psDsCommandContent]'
|
selector: '[cdkDsCommandContent]'
|
||||||
})
|
})
|
||||||
export class DsCommandContentDirective {
|
export class DsCommandContentDirective {
|
||||||
|
|
||||||
constructor(public template: TemplateRef<any>) { }
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,10 +1,8 @@
|
|||||||
import { Directive, TemplateRef } from '@angular/core';
|
import {Directive, TemplateRef} from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psDsCommandError]'
|
selector: '[cdkDsCommandError]'
|
||||||
})
|
})
|
||||||
export class DsCommandErrorDirective {
|
export class DsCommandErrorDirective {
|
||||||
|
|
||||||
constructor(public template: TemplateRef<any>) { }
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,10 +1,8 @@
|
|||||||
import { Directive, TemplateRef } from '@angular/core';
|
import {Directive, TemplateRef} from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psDsCommandFooter]'
|
selector: '[cdkDsCommandFooter]'
|
||||||
})
|
})
|
||||||
export class DsCommandFooterDirective {
|
export class DsCommandFooterDirective {
|
||||||
|
|
||||||
constructor(public template: TemplateRef<any>) { }
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,10 +1,8 @@
|
|||||||
import { Directive, TemplateRef } from '@angular/core';
|
import {Directive, TemplateRef} from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psDsCommandNoCommand]'
|
selector: '[cdkDsCommandNoCommand]'
|
||||||
})
|
})
|
||||||
export class DsCommandNoCommandDirective {
|
export class DsCommandNoCommandDirective {
|
||||||
|
|
||||||
constructor(public template: TemplateRef<any>) { }
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
import {Directive, ElementRef} from '@angular/core';
|
||||||
|
|
||||||
|
@Directive({
|
||||||
|
selector: '[cdkDsCommandSubmit]'
|
||||||
|
})
|
||||||
|
export class DsCommandSubmitDirective {
|
||||||
|
constructor(public element: ElementRef) { }
|
||||||
|
}
|
||||||
@ -1,10 +1,8 @@
|
|||||||
import { Directive, TemplateRef } from '@angular/core';
|
import {Directive, TemplateRef} from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psDsCommandValidation]'
|
selector: '[cdkDsCommandValidation]'
|
||||||
})
|
})
|
||||||
export class DsCommandValidationDirective {
|
export class DsCommandValidationDirective {
|
||||||
|
|
||||||
constructor(public template: TemplateRef<any>) { }
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
<ng-container *ngIf="command; else noCommand">
|
||||||
|
<ng-container *ngIf="hasContent" [ngTemplateOutlet]="contentTemplate"
|
||||||
|
[ngTemplateOutletContext]="{ $implicit: command, loading: isLoading }">
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container *ngIf="lastValidationResult">
|
||||||
|
<ng-container *ngIf="hasValidationTemplate" [ngTemplateOutlet]="validationTemplate"
|
||||||
|
[ngTemplateOutletContext]="{ $implicit: lastValidationResult }">
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container *ngIf="lastErrorMessage && errorContent && errorContent.template">
|
||||||
|
<ng-container [ngTemplateOutlet]="errorContent.template"
|
||||||
|
[ngTemplateOutletContext]="{ $implicit: lastErrorMessage }">
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container *ngIf="hasFooterTemplate" [ngTemplateOutlet]="footerTemplate"
|
||||||
|
[ngTemplateOutletContext]="{ $implicit: command, loading: isLoading }">
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
|
||||||
|
<ng-template #noCommand>
|
||||||
|
<ng-container *ngIf="noCommandContent && noCommandContent.template">
|
||||||
|
<ng-container [ngTemplateOutlet]="noCommandContent.template">
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
</ng-template>
|
||||||
@ -1,13 +1,24 @@
|
|||||||
import { Component, ContentChild, ContentChildren, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, QueryList } from '@angular/core';
|
import {
|
||||||
import { IDataSource, IDataSourceValidationError } from '@poweredsoft/data';
|
Component,
|
||||||
import { Subscription } from 'rxjs';
|
ContentChild,
|
||||||
import { finalize } from 'rxjs/operators';
|
ContentChildren,
|
||||||
import { DsCommandContentDirective } from './directives/ds-command-content.directive';
|
EventEmitter,
|
||||||
import { DsCommandErrorDirective } from './directives/ds-command-error.directive';
|
HostListener,
|
||||||
import { DsCommandFooterDirective } from './directives/ds-command-footer.directive';
|
Input,
|
||||||
import { DsCommandNoCommandDirective } from './directives/ds-command-no-command.directive';
|
OnDestroy,
|
||||||
import { DsCommandSubmitDirective } from './directives/ds-command-submit.directive';
|
OnInit,
|
||||||
import { DsCommandValidationDirective } from './directives/ds-command-validation.directive';
|
Output,
|
||||||
|
QueryList
|
||||||
|
} from '@angular/core';
|
||||||
|
import {IDataSource} from '@poweredsoft/data';
|
||||||
|
import {Subscription} from 'rxjs';
|
||||||
|
import {finalize} from 'rxjs/operators';
|
||||||
|
import {DsCommandContentDirective} from './directives/ds-command-content.directive';
|
||||||
|
import {DsCommandErrorDirective} from './directives/ds-command-error.directive';
|
||||||
|
import {DsCommandFooterDirective} from './directives/ds-command-footer.directive';
|
||||||
|
import {DsCommandNoCommandDirective} from './directives/ds-command-no-command.directive';
|
||||||
|
import {DsCommandSubmitDirective} from './directives/ds-command-submit.directive';
|
||||||
|
import {DsCommandValidationDirective} from './directives/ds-command-validation.directive';
|
||||||
|
|
||||||
export interface DsCommandPropertyError
|
export interface DsCommandPropertyError
|
||||||
{
|
{
|
||||||
@ -16,27 +27,27 @@ export interface DsCommandPropertyError
|
|||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ps-ds-command, [psDsCommand]',
|
selector: 'cdk-ds-command, [cdkDsCommand]',
|
||||||
templateUrl: './ds-command.component.html',
|
templateUrl: './ds-command.component.html',
|
||||||
styleUrls: ['./ds-command.component.scss']
|
styleUrls: ['./ds-command.component.scss']
|
||||||
})
|
})
|
||||||
export class DsCommandComponent implements OnInit, OnDestroy {
|
export class DsCommandComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
private _refreshOnSuccess: boolean = true;
|
private _refreshOnSuccess: boolean = true;
|
||||||
|
|
||||||
@Input() params: any;
|
@Input() params: any;
|
||||||
@Input() dataSource: IDataSource<any>;
|
@Input() dataSource: IDataSource<any>;
|
||||||
@Input() name: string;
|
@Input() name: string;
|
||||||
@Input() model: any;
|
@Input() model: any;
|
||||||
|
@Input() resolveCommand: boolean;
|
||||||
|
|
||||||
@Input() set refreshOnSuccess(val: boolean) {
|
@Input() set refreshOnSuccess(val: boolean) {
|
||||||
this._refreshOnSuccess = val;
|
this._refreshOnSuccess = val;
|
||||||
}
|
}
|
||||||
|
|
||||||
get refreshOnSuccess() {
|
get refreshOnSuccess() {
|
||||||
return this._refreshOnSuccess;
|
return this._refreshOnSuccess;
|
||||||
}
|
}
|
||||||
|
|
||||||
@Input() resolveCommand: boolean;
|
|
||||||
|
|
||||||
@Output() success = new EventEmitter<any>();
|
@Output() success = new EventEmitter<any>();
|
||||||
@Output() loading = new EventEmitter<boolean>();
|
@Output() loading = new EventEmitter<boolean>();
|
||||||
@Output() commandChange = new EventEmitter<any>();
|
@Output() commandChange = new EventEmitter<any>();
|
||||||
@ -97,10 +108,6 @@ export class DsCommandComponent implements OnInit, OnDestroy {
|
|||||||
return this.commandContent.template;
|
return this.commandContent.template;
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
clearValidationError() {
|
clearValidationError() {
|
||||||
this.lastValidationResult = null;
|
this.lastValidationResult = null;
|
||||||
}
|
}
|
||||||
@ -115,7 +122,6 @@ export class DsCommandComponent implements OnInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
|
|
||||||
this._validationErrorSubscription = this.dataSource
|
this._validationErrorSubscription = this.dataSource
|
||||||
.validationError$.subscribe(validationResult => {
|
.validationError$.subscribe(validationResult => {
|
||||||
this.lastValidationResult = Object.keys(validationResult.errors).reduce<DsCommandPropertyError[]>((prev, attr) => {
|
this.lastValidationResult = Object.keys(validationResult.errors).reduce<DsCommandPropertyError[]>((prev, attr) => {
|
||||||
@ -164,12 +170,11 @@ export class DsCommandComponent implements OnInit, OnDestroy {
|
|||||||
.toArray()
|
.toArray()
|
||||||
.find(t => t.element.nativeElement == element);
|
.find(t => t.element.nativeElement == element);
|
||||||
|
|
||||||
if (found != null)
|
if (found != null)
|
||||||
this.execute()
|
this.execute()
|
||||||
}
|
}
|
||||||
|
|
||||||
execute() {
|
execute() {
|
||||||
|
|
||||||
// secure from double send.
|
// secure from double send.
|
||||||
if (this._loading)
|
if (this._loading)
|
||||||
return;
|
return;
|
||||||
@ -197,5 +202,4 @@ export class DsCommandComponent implements OnInit, OnDestroy {
|
|||||||
get isLoading() {
|
get isLoading() {
|
||||||
return this._loading;
|
return this._loading;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import {NgModule} from '@angular/core';
|
||||||
|
import {CommonModule} from '@angular/common';
|
||||||
|
import {DsCommandComponent} from './ds-command.component';
|
||||||
|
import {DsCommandContentDirective} from './directives/ds-command-content.directive';
|
||||||
|
import {DsCommandSubmitDirective} from './directives/ds-command-submit.directive';
|
||||||
|
import {DsCommandValidationDirective} from './directives/ds-command-validation.directive';
|
||||||
|
import {DsCommandFooterDirective} from './directives/ds-command-footer.directive';
|
||||||
|
import {DsCommandErrorDirective} from './directives/ds-command-error.directive';
|
||||||
|
import {DsCommandNoCommandDirective} from './directives/ds-command-no-command.directive';
|
||||||
|
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [DsCommandComponent, DsCommandContentDirective, DsCommandSubmitDirective, DsCommandValidationDirective, DsCommandFooterDirective, DsCommandErrorDirective, DsCommandNoCommandDirective],
|
||||||
|
imports: [
|
||||||
|
CommonModule
|
||||||
|
],
|
||||||
|
exports: [DsCommandComponent, DsCommandContentDirective, DsCommandSubmitDirective, DsCommandValidationDirective, DsCommandFooterDirective, DsCommandErrorDirective, DsCommandNoCommandDirective]
|
||||||
|
})
|
||||||
|
export class DsCommandModule { }
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<ul>
|
||||||
|
<li class="ds-pager-first" (click)="first()">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
</li>
|
||||||
|
<li class="ds-pager-previous" (click)="previous()">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
</li>
|
||||||
|
<li class="ds-pager-page" [class.ds-pager-current]="page == pr" *ngFor="let pr of pageRanges" (click)="page = pr">{{ pr }}</li>
|
||||||
|
<li class="ds-pager-next" (click)="next()">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</li>
|
||||||
|
<li class="ds-pager-last" (click)="last()">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
:host {
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 4px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li.ds-pager-current {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: 15px;
|
||||||
|
width: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,11 +1,14 @@
|
|||||||
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
|
import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
|
||||||
import { IDataSource, IQueryExecutionGroupResult, IQueryExecutionResult } from '@poweredsoft/data';
|
import {IDataSource, IQueryExecutionGroupResult, IQueryExecutionResult} from '@poweredsoft/data';
|
||||||
import { Subscription } from 'rxjs';
|
import {Subscription} from 'rxjs';
|
||||||
|
import {CommonModule} from "@angular/common";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ps-ds-pager',
|
selector: 'cdk-ds-pager',
|
||||||
templateUrl: './ds-pager.component.html',
|
templateUrl: './ds-pager.component.html',
|
||||||
styleUrls: ['./ds-pager.component.scss']
|
styleUrls: ['./ds-pager.component.scss'],
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule]
|
||||||
})
|
})
|
||||||
export class DsPagerComponent implements OnInit, OnDestroy {
|
export class DsPagerComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
@ -38,10 +41,6 @@ export class DsPagerComponent implements OnInit, OnDestroy {
|
|||||||
public latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any> = null;
|
public latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any> = null;
|
||||||
private dataSubscription: Subscription;
|
private dataSubscription: Subscription;
|
||||||
|
|
||||||
constructor() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.dataSubscription = this.dataSource.data$.subscribe(result => {
|
this.dataSubscription = this.dataSource.data$.subscribe(result => {
|
||||||
this.latestResult = result;
|
this.latestResult = result;
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<form (submit)="applySearch()">
|
||||||
|
<div [ngClass]="classes">
|
||||||
|
<input type="search" (input)="onSearch()" [placeholder]="finalSearchText" [ngClass]="searchClasses"
|
||||||
|
[(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
|
||||||
|
<button type="submit" [ngClass]="submitButtonClasses">{{ finalSearchText }}</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
@ -1,13 +1,16 @@
|
|||||||
import { Component, Input, OnInit } from '@angular/core';
|
import {Component, Input, OnInit} from '@angular/core';
|
||||||
import { FilterType, ICompositeFilter, IDataSource, ISimpleFilter } from '@poweredsoft/data';
|
import {FilterType, ICompositeFilter, IDataSource, ISimpleFilter} from '@poweredsoft/data';
|
||||||
|
import {CommonModule} from "@angular/common";
|
||||||
|
import {FormsModule} from "@angular/forms";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ps-ds-search',
|
selector: 'cdk-ds-search',
|
||||||
templateUrl: './ds-search.component.html',
|
templateUrl: './ds-search.component.html',
|
||||||
styleUrls: ['./ds-search.component.scss']
|
styleUrls: ['./ds-search.component.scss'],
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule, FormsModule]
|
||||||
})
|
})
|
||||||
export class DsSearchComponent implements OnInit {
|
export class DsSearchComponent {
|
||||||
|
|
||||||
@Input() dataSource: IDataSource<any>;
|
@Input() dataSource: IDataSource<any>;
|
||||||
@Input() filterType: string;
|
@Input() filterType: string;
|
||||||
@Input() filterPaths: string[];
|
@Input() filterPaths: string[];
|
||||||
@ -30,11 +33,10 @@ export class DsSearchComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onSearch() {
|
onSearch() {
|
||||||
this.applySearch();
|
this.applySearch();
|
||||||
}
|
}
|
||||||
|
|
||||||
applySearch() {
|
applySearch() {
|
||||||
|
|
||||||
const existingFilters = this.dataSource.filters;
|
const existingFilters = this.dataSource.filters;
|
||||||
|
|
||||||
|
|
||||||
@ -69,8 +71,4 @@ export class DsSearchComponent implements OnInit {
|
|||||||
filters: finalNewFilters
|
filters: finalNewFilters
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<ng-container *ngFor="let error of latestErrors; let isLast=last">
|
||||||
|
{{ error }}
|
||||||
|
<br *ngIf="!isLast" />
|
||||||
|
</ng-container>
|
||||||
@ -1,29 +1,29 @@
|
|||||||
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
|
import {Component, Input, OnDestroy, OnInit} from '@angular/core';
|
||||||
import { IDataSource } from '@poweredsoft/data';
|
import {IDataSource} from '@poweredsoft/data';
|
||||||
import { Subscription } from 'rxjs';
|
import {Subscription} from 'rxjs';
|
||||||
|
import {CommonModule} from "@angular/common";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ps-ds-validation-error',
|
selector: 'cdk-ds-validation-error',
|
||||||
templateUrl: './ds-validation-error.component.html',
|
templateUrl: './ds-validation-error.component.html',
|
||||||
styleUrls: ['./ds-validation-error.component.scss']
|
styleUrls: ['./ds-validation-error.component.scss'],
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule]
|
||||||
})
|
})
|
||||||
export class DsValidationErrorComponent implements OnInit, OnDestroy {
|
export class DsValidationErrorComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
@Input() dataSource: IDataSource<any>;
|
@Input() dataSource: IDataSource<any>;
|
||||||
@Input() field: string;
|
@Input() field: string;
|
||||||
|
|
||||||
validationErrorsSub: Subscription;
|
validationErrorsSub: Subscription;
|
||||||
commandStartedSub: Subscription;
|
commandStartedSub: Subscription;
|
||||||
latestErrors: string[] = [];
|
latestErrors: string[] = [];
|
||||||
|
|
||||||
constructor() { }
|
|
||||||
|
|
||||||
ngOnDestroy(): void {
|
ngOnDestroy(): void {
|
||||||
this.validationErrorsSub?.unsubscribe();
|
this.validationErrorsSub?.unsubscribe();
|
||||||
this.commandStartedSub?.unsubscribe();
|
this.commandStartedSub?.unsubscribe();
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
|
|
||||||
this.commandStartedSub = this.dataSource.commandStarted$.subscribe(e => {
|
this.commandStartedSub = this.dataSource.commandStarted$.subscribe(e => {
|
||||||
this.latestErrors = [];
|
this.latestErrors = [];
|
||||||
});
|
});
|
||||||
@ -35,7 +35,5 @@ export class DsValidationErrorComponent implements OnInit, OnDestroy {
|
|||||||
return prev.concat(validationErrors.errors[current]);
|
return prev.concat(validationErrors.errors[current]);
|
||||||
}, []);
|
}, []);
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,10 +1,8 @@
|
|||||||
import { Directive, TemplateRef } from '@angular/core';
|
import { Directive, TemplateRef } from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psListViewFooter]'
|
selector: '[cdkListViewFooter]'
|
||||||
})
|
})
|
||||||
export class ListViewFooterDirective {
|
export class ListViewFooterDirective {
|
||||||
|
|
||||||
constructor(public template: TemplateRef<any>) { }
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,10 +1,8 @@
|
|||||||
import { Directive, TemplateRef } from '@angular/core';
|
import {Directive, TemplateRef} from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psListViewHeader]'
|
selector: '[cdkListViewHeader]'
|
||||||
})
|
})
|
||||||
export class ListViewHeaderDirective {
|
export class ListViewHeaderDirective {
|
||||||
|
|
||||||
constructor(public template: TemplateRef<any>) { }
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,10 +1,8 @@
|
|||||||
import { Directive, TemplateRef } from '@angular/core';
|
import {Directive, TemplateRef} from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psListViewItem]'
|
selector: '[cdkListViewItem]'
|
||||||
})
|
})
|
||||||
export class ListViewItemDirective {
|
export class ListViewItemDirective {
|
||||||
|
|
||||||
constructor(public template: TemplateRef<any>) { }
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,10 +1,8 @@
|
|||||||
import { Directive, TemplateRef } from '@angular/core';
|
import { Directive, TemplateRef } from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psDataGridColSort]'
|
selector: '[cdkListViewSeparator]'
|
||||||
})
|
})
|
||||||
export class DataGridColSortDirective {
|
export class ListViewSeparatorDirective {
|
||||||
|
|
||||||
constructor(public template: TemplateRef<any>) { }
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import {NgModule} from '@angular/core';
|
||||||
|
import {CommonModule} from '@angular/common';
|
||||||
|
import {ListViewComponent} from './list-view/list-view.component';
|
||||||
|
import {ListViewItemDirective} from './directives/list-view-item.directive';
|
||||||
|
import {ListViewHeaderDirective} from './directives/list-view-header.directive';
|
||||||
|
import {ListViewFooterDirective} from './directives/list-view-footer.directive';
|
||||||
|
import {ListViewSeparatorDirective} from './directives/list-view-separator.directive';
|
||||||
|
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [ListViewComponent, ListViewItemDirective, ListViewHeaderDirective, ListViewFooterDirective, ListViewSeparatorDirective],
|
||||||
|
imports: [
|
||||||
|
CommonModule
|
||||||
|
],
|
||||||
|
exports: [
|
||||||
|
ListViewComponent,
|
||||||
|
ListViewItemDirective,
|
||||||
|
ListViewHeaderDirective,
|
||||||
|
ListViewFooterDirective,
|
||||||
|
ListViewSeparatorDirective
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class ListViewModule { }
|
||||||
@ -1,21 +1,21 @@
|
|||||||
<ng-container [ngTemplateOutlet]="getViewHeaderTemplate()"></ng-container>
|
<ng-container [ngTemplateOutlet]="getViewHeaderTemplate()"></ng-container>
|
||||||
<ng-container *ngIf="!noData else noResultTemplate">
|
<ng-container *ngIf="!noData else noResultTemplate">
|
||||||
<div [ngClass]="listViewClasses">
|
<div [ngClass]="listViewClasses">
|
||||||
<ng-container *ngFor="let item of latestResult.data; let index = index; let first = first; let last = last; let odd = odd">
|
<ng-container *ngFor="let item of latestResult.data; let index = index; let first = first; let last = last; let odd = odd">
|
||||||
<ng-container [ngTemplateOutlet]="getViewItemTemplate()" [ngTemplateOutletContext]="{
|
<ng-container [ngTemplateOutlet]="getViewItemTemplate()" [ngTemplateOutletContext]="{
|
||||||
$implicit: item,
|
$implicit: item,
|
||||||
index: index,
|
index: index,
|
||||||
first: first,
|
first: first,
|
||||||
last: last,
|
last: last,
|
||||||
odd: odd
|
odd: odd
|
||||||
}">
|
}">
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<ng-container [ngTemplateOutlet]="getViewFooterTemplate()"></ng-container>
|
<ng-container [ngTemplateOutlet]="getViewFooterTemplate()"></ng-container>
|
||||||
|
|
||||||
|
|
||||||
<ng-template #noResultTemplate>
|
<ng-template #noResultTemplate>
|
||||||
<div [ngClass]="noRecordClasses">{{noRecords}}</div>
|
<div [ngClass]="noRecordClasses">{{noRecords}}</div>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
@ -1,17 +1,16 @@
|
|||||||
import { Component, OnInit, Input, OnDestroy, ContentChildren, QueryList, ContentChild } from '@angular/core';
|
import {Component, ContentChild, Input, OnDestroy, OnInit} from '@angular/core';
|
||||||
import { IDataSource, IQueryExecutionResult, IQueryExecutionGroupResult } from '@poweredsoft/data';
|
import {IDataSource, IQueryExecutionGroupResult, IQueryExecutionResult} from '@poweredsoft/data';
|
||||||
import { Subscription } from 'rxjs';
|
import {Subscription} from 'rxjs';
|
||||||
import { ListViewItemDirective } from '../directives/list-view-item.directive';
|
import {ListViewItemDirective} from '../directives/list-view-item.directive';
|
||||||
import { ListViewHeaderDirective } from '../directives/list-view-header.directive';
|
import {ListViewHeaderDirective} from '../directives/list-view-header.directive';
|
||||||
import { ListViewFooterDirective } from '../directives/list-view-footer.directive';
|
import {ListViewFooterDirective} from '../directives/list-view-footer.directive';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ps-list-view',
|
selector: 'cdk-list-view',
|
||||||
templateUrl: './list-view.component.html',
|
templateUrl: './list-view.component.html',
|
||||||
styleUrls: ['./list-view.component.scss']
|
styleUrls: ['./list-view.component.scss']
|
||||||
})
|
})
|
||||||
export class ListViewComponent implements OnInit, OnDestroy {
|
export class ListViewComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
@Input() dataSource: IDataSource<any>;
|
@Input() dataSource: IDataSource<any>;
|
||||||
@Input() noRecordsText: string;
|
@Input() noRecordsText: string;
|
||||||
@Input() noRecordClasses: any;
|
@Input() noRecordClasses: any;
|
||||||
@ -21,22 +20,18 @@ export class ListViewComponent implements OnInit, OnDestroy {
|
|||||||
loading:boolean;
|
loading:boolean;
|
||||||
|
|
||||||
private _dataSubscription: Subscription;
|
private _dataSubscription: Subscription;
|
||||||
|
|
||||||
@ContentChild(ListViewItemDirective) viewItem: ListViewItemDirective;
|
|
||||||
@ContentChild(ListViewHeaderDirective) viewHeader: ListViewHeaderDirective;
|
|
||||||
@ContentChild(ListViewFooterDirective) viewFooter: ListViewFooterDirective;
|
|
||||||
//@ContentChildren(ViewDataDirective) viewData: QueryList<ViewDataDirective>;
|
|
||||||
|
|
||||||
constructor() {
|
@ContentChild(ListViewItemDirective) viewItem: ListViewItemDirective;
|
||||||
|
@ContentChild(ListViewHeaderDirective) viewHeader: ListViewHeaderDirective;
|
||||||
}
|
@ContentChild(ListViewFooterDirective) viewFooter: ListViewFooterDirective;
|
||||||
|
//@ContentChildren(ViewDataDirective) viewData: QueryList<ViewDataDirective>;
|
||||||
|
|
||||||
ngOnDestroy(): void {
|
ngOnDestroy(): void {
|
||||||
this._dataSubscription.unsubscribe();
|
this._dataSubscription.unsubscribe();
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this._dataSubscription = this.dataSource.data$.subscribe(newData => {
|
this._dataSubscription = this.dataSource.data$.subscribe(newData => {
|
||||||
this.latestResult = newData;
|
this.latestResult = newData;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -1,10 +1,8 @@
|
|||||||
import { Directive, TemplateRef } from '@angular/core';
|
import {Directive, TemplateRef} from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psViewContent]'
|
selector: '[cdkDsViewContent]'
|
||||||
})
|
})
|
||||||
export class ViewContentDirective {
|
export class ViewContentDirective {
|
||||||
|
|
||||||
constructor(public template: TemplateRef<any>) { }
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,10 +1,8 @@
|
|||||||
import { Directive, TemplateRef } from '@angular/core';
|
import {Directive, TemplateRef} from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psViewLoading]'
|
selector: '[cdkDsViewLoading]'
|
||||||
})
|
})
|
||||||
export class ViewLoadingDirective {
|
export class ViewLoadingDirective {
|
||||||
|
|
||||||
constructor(public template: TemplateRef<any>) { }
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,10 +1,8 @@
|
|||||||
import { Directive, TemplateRef } from '@angular/core';
|
import {Directive, TemplateRef} from '@angular/core';
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[psViewNoRecords]'
|
selector: '[cdkDsViewNoRecords]'
|
||||||
})
|
})
|
||||||
export class ViewNoRecordsDirective {
|
export class ViewNoRecordsDirective {
|
||||||
|
|
||||||
constructor(public template: TemplateRef<any>) { }
|
constructor(public template: TemplateRef<any>) { }
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
<ng-container *ngIf="loading; else notLoading">
|
||||||
|
<ng-container *ngIf="viewLoading">
|
||||||
|
<ng-container [ngTemplateOutlet]="getViewLoadingTemplate()"></ng-container>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container *ngIf="!viewLoading">
|
||||||
|
{{ finalLoadingText }}
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-template #notLoading>
|
||||||
|
<ng-container *ngIf="!noData else noResultTemplate">
|
||||||
|
<ng-container [ngTemplateOutlet]="getViewContentTemplate()"
|
||||||
|
[ngTemplateOutletContext]="{$implicit: viewModel}">
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
<ng-template #noResultTemplate>
|
||||||
|
<ng-container *ngIf="viewNoRecords">
|
||||||
|
<ng-container [ngTemplateOutlet]="getViewNoRecordsTemplate()"></ng-container>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container *ngIf="!viewNoRecords">
|
||||||
|
<div [ngClass]="noRecordClasses">{{noRecords}}</div>
|
||||||
|
</ng-container>
|
||||||
|
</ng-template>
|
||||||
@ -1,20 +1,16 @@
|
|||||||
import { Component, ContentChild, Input, OnDestroy, OnInit } from '@angular/core';
|
import {Component, ContentChild, Input, OnDestroy, OnInit} from '@angular/core';
|
||||||
import { IDataSource } from '@poweredsoft/data';
|
import {IDataSource} from '@poweredsoft/data';
|
||||||
import { Subscription } from 'rxjs';
|
import {Subscription} from 'rxjs';
|
||||||
import { ViewContentDirective } from './directives/view-content.directive';
|
import {ViewContentDirective} from './directives/view-content.directive';
|
||||||
import { ViewLoadingDirective } from './directives/view-loading.directive';
|
import {ViewLoadingDirective} from './directives/view-loading.directive';
|
||||||
import { ViewNoRecordsDirective } from './directives/view-no-records.directive';
|
import {ViewNoRecordsDirective} from './directives/view-no-records.directive';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ps-view',
|
selector: 'cdk-ds-view',
|
||||||
templateUrl: './view.component.html',
|
templateUrl: './view.component.html',
|
||||||
styleUrls: ['./view.component.scss']
|
styleUrls: ['./view.component.scss']
|
||||||
})
|
})
|
||||||
export class ViewComponent implements OnInit, OnDestroy {
|
export class ViewComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
|
|
||||||
constructor() { }
|
|
||||||
|
|
||||||
@Input() dataSource: IDataSource<any>;
|
@Input() dataSource: IDataSource<any>;
|
||||||
@Input() noRecordsText: string;
|
@Input() noRecordsText: string;
|
||||||
@Input() loadingText: string;
|
@Input() loadingText: string;
|
||||||
@ -24,7 +20,7 @@ export class ViewComponent implements OnInit, OnDestroy {
|
|||||||
@ContentChild(ViewLoadingDirective) viewLoading: ViewLoadingDirective;
|
@ContentChild(ViewLoadingDirective) viewLoading: ViewLoadingDirective;
|
||||||
@ContentChild(ViewNoRecordsDirective) viewNoRecords: ViewNoRecordsDirective;
|
@ContentChild(ViewNoRecordsDirective) viewNoRecords: ViewNoRecordsDirective;
|
||||||
|
|
||||||
loading:boolean = false;
|
loading: boolean = false;
|
||||||
private _viewModel: any = null;
|
private _viewModel: any = null;
|
||||||
|
|
||||||
private _dataSubscription: Subscription;
|
private _dataSubscription: Subscription;
|
||||||
@ -36,8 +32,8 @@ export class ViewComponent implements OnInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this._dataSubscription = this.dataSource.data$.subscribe(newData => {
|
this._dataSubscription = this.dataSource.data$.subscribe(newData => {
|
||||||
if (newData && newData.data && newData.data.length)
|
if (newData && newData.data && newData.data.length)
|
||||||
this._viewModel = newData.data[0];
|
this._viewModel = newData.data[0];
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -79,6 +75,5 @@ export class ViewComponent implements OnInit, OnDestroy {
|
|||||||
return null;
|
return null;
|
||||||
return this.viewLoading.template;
|
return this.viewLoading.template;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import {NgModule} from '@angular/core';
|
||||||
|
import {CommonModule} from '@angular/common';
|
||||||
|
import {ViewComponent} from './view.component';
|
||||||
|
import {ViewContentDirective} from './directives/view-content.directive';
|
||||||
|
import {ViewLoadingDirective} from './directives/view-loading.directive';
|
||||||
|
import {ViewNoRecordsDirective} from './directives/view-no-records.directive';
|
||||||
|
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [ViewComponent, ViewContentDirective, ViewLoadingDirective, ViewNoRecordsDirective],
|
||||||
|
imports: [
|
||||||
|
CommonModule
|
||||||
|
],
|
||||||
|
exports: [ViewComponent, ViewContentDirective, ViewLoadingDirective, ViewNoRecordsDirective]
|
||||||
|
})
|
||||||
|
export class ViewModule { }
|
||||||
@ -20,14 +20,12 @@ export * from './lib/list-view/list-view/list-view.component';
|
|||||||
export * from './lib/list-view/directives/list-view-item.directive';
|
export * from './lib/list-view/directives/list-view-item.directive';
|
||||||
export * from './lib/list-view/directives/list-view-header.directive';
|
export * from './lib/list-view/directives/list-view-header.directive';
|
||||||
export * from './lib/list-view/directives/list-view-footer.directive';
|
export * from './lib/list-view/directives/list-view-footer.directive';
|
||||||
export * from './lib/list-view/directives/list-view-seperator.directive';
|
export * from './lib/list-view/directives/list-view-separator.directive';
|
||||||
|
|
||||||
// search
|
// search
|
||||||
export * from './lib/ds-search/ds-search.module';
|
|
||||||
export * from './lib/ds-search/ds-search.component';
|
export * from './lib/ds-search/ds-search.component';
|
||||||
|
|
||||||
// ds validation
|
// ds validation
|
||||||
export * from './lib/ds-validation-error/ds-validation-error.module';
|
|
||||||
export * from './lib/ds-validation-error/ds-validation-error.component';
|
export * from './lib/ds-validation-error/ds-validation-error.component';
|
||||||
|
|
||||||
// view
|
// view
|
||||||
@ -48,5 +46,4 @@ export * from './lib/ds-command/directives/ds-command-no-command.directive';
|
|||||||
export * from './lib/ds-command/directives/ds-command-error.directive';
|
export * from './lib/ds-command/directives/ds-command-error.directive';
|
||||||
|
|
||||||
// ds-pager
|
// ds-pager
|
||||||
export * from './lib/ds-pager/ds-pager.module';
|
export * from './lib/ds-pager/ds-pager.component';
|
||||||
export * from './lib/ds-pager/ds-pager.component';
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user