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/*
|
||||
|
||||
# misc
|
||||
/.angular/cache
|
||||
/.sass-cache
|
||||
/connect.lock
|
||||
/coverage
|
||||
|
||||
28
README.md
28
README.md
@ -1,30 +1,4 @@
|
||||
# NgxCdkUi
|
||||
|
||||
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).
|
||||
> 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
|
||||
|
||||
|
||||
185
angular.json
185
angular.json
@ -3,7 +3,7 @@
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"ngx-cdk-ui": {
|
||||
"demo": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
@ -15,14 +15,16 @@
|
||||
"prefix": "ps",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"builder": "@angular-devkit/build-angular:application",
|
||||
"options": {
|
||||
"outputPath": "dist/ngx-cdk-ui",
|
||||
"outputPath": {
|
||||
"base": "dist/ngx-cdk-ui"
|
||||
},
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"polyfills": [
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"aot": true,
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
@ -31,7 +33,12 @@
|
||||
"node_modules/bootstrap/dist/css/bootstrap.min.css",
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": []
|
||||
"scripts": [],
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"optimization": false,
|
||||
"namedChunks": true,
|
||||
"browser": "src/main.ts"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
@ -44,11 +51,8 @@
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"extractCss": true,
|
||||
"namedChunks": false,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
@ -61,24 +65,29 @@
|
||||
"maximumError": "10kb"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"development": {}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "ngx-cdk-ui:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "ngx-cdk-ui:build:production"
|
||||
}
|
||||
"buildTarget": "ngx-cdk-ui:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "ngx-cdk-ui:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "ngx-cdk-ui:build"
|
||||
"buildTarget": "ngx-cdk-ui:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
@ -98,152 +107,112 @@
|
||||
"scripts": []
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"tsconfig.app.json",
|
||||
"tsconfig.spec.json",
|
||||
"e2e/tsconfig.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
]
|
||||
}
|
||||
},
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
"protractorConfig": "e2e/protractor.conf.js",
|
||||
"devServerTarget": "ngx-cdk-ui:serve"
|
||||
"protractorConfig": "e2e/protractor.conf.js"
|
||||
},
|
||||
"configurations": {
|
||||
"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",
|
||||
"root": "projects/poweredsoft/ngx-cdk-ui",
|
||||
"sourceRoot": "projects/poweredsoft/ngx-cdk-ui/src",
|
||||
"prefix": "ps",
|
||||
"root": "projects/openharbor/ngx-data-cdk-ui",
|
||||
"sourceRoot": "projects/openharbor/ngx-data-cdk-ui/src",
|
||||
"prefix": "cdk",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-ng-packagr:build",
|
||||
"builder": "@angular-devkit/build-angular:ng-packagr",
|
||||
"options": {
|
||||
"tsConfig": "projects/poweredsoft/ngx-cdk-ui/tsconfig.lib.json",
|
||||
"project": "projects/poweredsoft/ngx-cdk-ui/ng-package.json"
|
||||
"tsConfig": "projects/openharbor/ngx-data-cdk-ui/tsconfig.lib.json",
|
||||
"project": "projects/openharbor/ngx-data-cdk-ui/ng-package.json"
|
||||
},
|
||||
"configurations": {
|
||||
"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": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "projects/poweredsoft/ngx-cdk-ui/src/test.ts",
|
||||
"tsConfig": "projects/poweredsoft/ngx-cdk-ui/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/poweredsoft/ngx-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/**"
|
||||
]
|
||||
"main": "projects/openharbor/ngx-data-cdk-ui/src/test.ts",
|
||||
"tsConfig": "projects/openharbor/ngx-data-cdk-ui/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/openharbor/ngx-data-cdk-ui/karma.conf.js"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@poweredsoft/ngx-bootstrap": {
|
||||
"ngx-data-bootstrap-ui": {
|
||||
"projectType": "library",
|
||||
"root": "projects/poweredsoft/ngx-bootstrap",
|
||||
"sourceRoot": "projects/poweredsoft/ngx-bootstrap/src",
|
||||
"prefix": "psbx",
|
||||
"root": "projects/openharbor/ngx-data-bootstrap-ui",
|
||||
"sourceRoot": "projects/openharbor/ngx-data-bootstrap-ui/src",
|
||||
"prefix": "bsx",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-ng-packagr:build",
|
||||
"builder": "@angular-devkit/build-angular:ng-packagr",
|
||||
"options": {
|
||||
"tsConfig": "projects/poweredsoft/ngx-bootstrap/tsconfig.lib.json",
|
||||
"project": "projects/poweredsoft/ngx-bootstrap/ng-package.json"
|
||||
"tsConfig": "projects/openharbor/ngx-data-bootstrap-ui/tsconfig.lib.json",
|
||||
"project": "projects/openharbor/ngx-data-bootstrap-ui/ng-package.json"
|
||||
},
|
||||
"configurations": {
|
||||
"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": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "projects/poweredsoft/ngx-bootstrap/src/test.ts",
|
||||
"tsConfig": "projects/poweredsoft/ngx-bootstrap/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/poweredsoft/ngx-bootstrap/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/**"
|
||||
]
|
||||
"main": "projects/openharbor/ngx-data-bootstrap-ui/src/test.ts",
|
||||
"tsConfig": "projects/openharbor/ngx-data-bootstrap-ui/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/openharbor/ngx-data-bootstrap-ui/karma.conf.js"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@poweredsoft/ng-select": {
|
||||
"ngx-data-ng-select-ui": {
|
||||
"projectType": "library",
|
||||
"root": "projects/poweredsoft/ng-select",
|
||||
"sourceRoot": "projects/poweredsoft/ng-select/src",
|
||||
"root": "projects/openharbor/ngx-data-ng-select-ui",
|
||||
"sourceRoot": "projects/openharbor/ngx-data-ng-select-ui/src",
|
||||
"prefix": "ps-ng",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-ng-packagr:build",
|
||||
"builder": "@angular-devkit/build-angular:ng-packagr",
|
||||
"options": {
|
||||
"tsConfig": "projects/poweredsoft/ng-select/tsconfig.lib.json",
|
||||
"project": "projects/poweredsoft/ng-select/ng-package.json"
|
||||
"tsConfig": "projects/openharbor/ngx-data-ng-select-ui/tsconfig.lib.json",
|
||||
"project": "projects/openharbor/ngx-data-ng-select-ui/ng-package.json"
|
||||
},
|
||||
"configurations": {
|
||||
"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": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "projects/poweredsoft/ng-select/src/test.ts",
|
||||
"tsConfig": "projects/poweredsoft/ng-select/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/poweredsoft/ng-select/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/**"
|
||||
]
|
||||
"main": "projects/openharbor/ngx-data-ng-select-ui/src/test.ts",
|
||||
"tsConfig": "projects/openharbor/ngx-data-ng-select-ui/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/openharbor/ngx-data-ng-select-ui/karma.conf.js"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}},
|
||||
"defaultProject": "ngx-cdk-ui"
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/e2e",
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"target": "es2018",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"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",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
@ -9,23 +9,33 @@
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e",
|
||||
"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:all": "npm run clean && run-p watch:lib start:app"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "~9.1.4",
|
||||
"@angular/common": "~9.1.4",
|
||||
"@angular/compiler": "~9.1.4",
|
||||
"@angular/core": "~9.1.4",
|
||||
"@angular/forms": "~9.1.4",
|
||||
"@angular/platform-browser": "~9.1.4",
|
||||
"@angular/platform-browser-dynamic": "~9.1.4",
|
||||
"@angular/router": "~9.1.4",
|
||||
"@ng-select/ng-select": "^4.0.1",
|
||||
"@poweredsoft/data": "0.0.36",
|
||||
"@poweredsoft/ngx-data": "0.0.22",
|
||||
"@angular/animations": "^18.2.1",
|
||||
"@angular/common": "^18.2.1",
|
||||
"@angular/compiler": "^18.2.1",
|
||||
"@angular/core": "^18.2.1",
|
||||
"@angular/forms": "^18.2.1",
|
||||
"@angular/platform-browser": "^18.2.1",
|
||||
"@angular/platform-browser-dynamic": "^18.2.1",
|
||||
"@angular/router": "^18.2.1",
|
||||
"@ng-select/ng-select": "^13.0.0",
|
||||
"@openharbor/ngx-data": "^18.0.0-alpha.3",
|
||||
"@poweredsoft/data": "^0.0.36",
|
||||
"@poweredsoft/ngx-data-apollo": "0.0.10",
|
||||
"apollo-angular": "^1.8.0",
|
||||
"apollo-angular-link-http": "^1.9.0",
|
||||
@ -35,35 +45,35 @@
|
||||
"bootstrap": "^4.5.0",
|
||||
"graphql": "^14.5.0",
|
||||
"graphql-tag": "^2.10.0",
|
||||
"ngx-bootstrap": "^5.6.1",
|
||||
"ngx-bootstrap": "^18.0.0",
|
||||
"rxjs": "~6.5.4",
|
||||
"tslib": "^1.10.0",
|
||||
"zone.js": "~0.10.2"
|
||||
"tslib": "^2.0.0",
|
||||
"zone.js": "~0.14.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.901.4",
|
||||
"@angular-devkit/build-ng-packagr": "~0.901.7",
|
||||
"@angular/cli": "~9.1.4",
|
||||
"@angular/compiler-cli": "~9.1.4",
|
||||
"@angular/language-service": "~9.1.4",
|
||||
"@types/jasmine": "~3.5.0",
|
||||
"@angular-devkit/build-angular": "^18.2.1",
|
||||
"@angular/cli": "^18.2.1",
|
||||
"@angular/compiler-cli": "^18.2.1",
|
||||
"@angular/language-service": "^18.2.1",
|
||||
"@types/jasmine": "~3.6.0",
|
||||
"@types/jasminewd2": "~2.0.3",
|
||||
"@types/node": "^12.11.1",
|
||||
"codelyzer": "^5.1.2",
|
||||
"jasmine-core": "~3.5.0",
|
||||
"jasmine-spec-reporter": "~4.2.1",
|
||||
"karma": "~5.0.0",
|
||||
"codelyzer": "^6.0.0",
|
||||
"jasmine-core": "~3.6.0",
|
||||
"jasmine-spec-reporter": "~5.0.0",
|
||||
"karma": "~6.4.4",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
"karma-coverage-istanbul-reporter": "~2.1.0",
|
||||
"karma-jasmine": "~3.0.1",
|
||||
"karma-jasmine-html-reporter": "^1.4.2",
|
||||
"ng-packagr": "^9.0.0",
|
||||
"karma-coverage-istanbul-reporter": "~3.0.2",
|
||||
"karma-jasmine": "~4.0.0",
|
||||
"karma-jasmine-html-reporter": "^1.5.0",
|
||||
"ng-packagr": "^18.2.1",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"protractor": "~5.4.3",
|
||||
"protractor": "~7.0.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"ts-node": "~8.3.0",
|
||||
"tslint": "~6.1.0",
|
||||
"typescript": "~3.8.3",
|
||||
"typescript": "~5.5.4",
|
||||
"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,6 +1,6 @@
|
||||
{
|
||||
"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
|
||||
"dest": "../../../dist/poweredsoft/ng-select",
|
||||
"dest": "../../../dist/openharbor/ngx-data-bootstrap-ui",
|
||||
"lib": {
|
||||
"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,7 +3,9 @@ import {EventEmitter, Injectable, TemplateRef} from '@angular/core';
|
||||
import {IDataSource} from '@poweredsoft/data';
|
||||
import {BsModalService} from 'ngx-bootstrap/modal';
|
||||
|
||||
@Injectable()
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class CommandModalService {
|
||||
constructor(private modalService: BsModalService) {
|
||||
}
|
||||
@ -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,4 +1,4 @@
|
||||
import { Component, OnInit, TemplateRef, OnDestroy, EventEmitter } from '@angular/core';
|
||||
import {Component, EventEmitter, OnDestroy, OnInit, TemplateRef} from '@angular/core';
|
||||
import {IDataSource} from '@poweredsoft/data';
|
||||
import {BsModalRef} from 'ngx-bootstrap/modal';
|
||||
import {finalize} from 'rxjs/operators';
|
||||
@ -6,12 +6,11 @@ import { Subscription } from 'rxjs';
|
||||
import {NgForm} from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'psbx-command-modal',
|
||||
selector: 'bsx-command-modal',
|
||||
templateUrl: './command-modal.component.html',
|
||||
styleUrls: ['./command-modal.component.scss']
|
||||
})
|
||||
export class CommandModalComponent implements OnInit, OnDestroy {
|
||||
|
||||
title: string;
|
||||
template: TemplateRef<any>;
|
||||
command: string;
|
||||
@ -80,9 +79,4 @@ export class CommandModalComponent implements OnInit, OnDestroy {
|
||||
// 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';
|
||||
|
||||
@Directive({
|
||||
selector: '[psbxCommandModal]'
|
||||
selector: '[bsxCommandModal]'
|
||||
})
|
||||
export class CommandModalDirective {
|
||||
|
||||
constructor(private modalService: BsModalService) { }
|
||||
|
||||
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@Input() command: string;
|
||||
@Input() model: any;
|
||||
@ -56,7 +54,6 @@ export class CommandModalDirective {
|
||||
backdrop: this.backdrop === undefined ? true : this.backdrop,
|
||||
ignoreBackdropClick: this.ignoreBackdropClick === undefined ? false : this.ignoreBackdropClick
|
||||
});
|
||||
|
||||
}, 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 {finalize} from 'rxjs/operators';
|
||||
import {ConfirmModalService} from '../../confirm-modal/confirm-modal.service';
|
||||
|
||||
@Directive({
|
||||
selector: '[psbxCommand]'
|
||||
selector: '[bsxCommand]',
|
||||
standalone: true
|
||||
})
|
||||
export class CommandDirective {
|
||||
|
||||
constructor(private confirmModalService: ConfirmModalService) { }
|
||||
|
||||
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@Input() command: string;
|
||||
@Input() model: any;
|
||||
@ -59,7 +58,6 @@ export class CommandDirective {
|
||||
|
||||
@HostListener('click')
|
||||
wasClicked() {
|
||||
|
||||
if (this.confirm) {
|
||||
this.confirmModalService.confirm({
|
||||
message: this.confirmMessage,
|
||||
@ -75,5 +73,4 @@ export class CommandDirective {
|
||||
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 { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
|
||||
import {Component, Inject} from '@angular/core';
|
||||
import {BsModalRef} from 'ngx-bootstrap/modal';
|
||||
import {Observer} from 'rxjs';
|
||||
import {CommonModule} from "@angular/common";
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'psbx-confirm-modal',
|
||||
selector: 'bsx-confirm-modal',
|
||||
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;
|
||||
noText: string;
|
||||
message: string;
|
||||
@ -18,14 +22,6 @@ export class ConfirmModalComponent implements OnInit {
|
||||
noClass: string;
|
||||
observer: Observer<boolean>;
|
||||
|
||||
constructor(private modelRef: BsModalRef) {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
}
|
||||
|
||||
get yesButtonClass() {
|
||||
return `btn btn-${this.yesClass}`
|
||||
}
|
||||
@ -45,5 +41,4 @@ export class ConfirmModalComponent implements OnInit {
|
||||
this.observer.next(false);
|
||||
this.observer.complete();
|
||||
}
|
||||
|
||||
}
|
||||
@ -12,15 +12,14 @@ export interface IConfirmModalOptions
|
||||
noText?: string;
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ConfirmModalService {
|
||||
|
||||
constructor(private modalService: BsModalService) { }
|
||||
|
||||
confirm(options: IConfirmModalOptions) : Observable<boolean> {
|
||||
return Observable.create((o: Observer<boolean>) => {
|
||||
|
||||
|
||||
return new Observable<boolean>((o: Observer<boolean>) => {
|
||||
const initialState = {
|
||||
message: options.message,
|
||||
yesText: options.yesText || 'yes',
|
||||
@ -30,7 +29,7 @@ export class ConfirmModalService {
|
||||
observer: o
|
||||
};
|
||||
|
||||
const modal = this.modalService.show(ConfirmModalComponent, {
|
||||
this.modalService.show(ConfirmModalComponent, {
|
||||
initialState: initialState,
|
||||
animated: true,
|
||||
keyboard: false
|
||||
@ -75,8 +75,8 @@
|
||||
</svg>
|
||||
</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"
|
||||
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">
|
||||
<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]="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>
|
||||
<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
|
||||
@ -1,15 +1,26 @@
|
||||
import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
|
||||
import { IDataSource, ISimpleFilter, ICompositeFilter, IFilter,FilterType } from '@poweredsoft/data';
|
||||
|
||||
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
|
||||
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({
|
||||
selector: 'psbx-ds-datetime-filter',
|
||||
selector: 'bsx-ds-datetime-filter',
|
||||
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 {
|
||||
|
||||
@Input() path: string;
|
||||
@Input() dataSource : IDataSource<any>;
|
||||
@Input() filterType: string;
|
||||
@ -27,7 +38,6 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
|
||||
{key:'Range', value: FilterType.COMPOSITE }
|
||||
];
|
||||
|
||||
|
||||
bsInlineValue = new Date();
|
||||
bsInlineRangeValue: Date[];
|
||||
maxDate = new Date();
|
||||
@ -45,11 +55,12 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
|
||||
if (!this.filterType)
|
||||
this.filterType = 'Equal';
|
||||
}
|
||||
|
||||
showTooltip(){
|
||||
return "Filter by "+ this.path;
|
||||
}
|
||||
clearFilter() {
|
||||
|
||||
clearFilter() {
|
||||
this.filterValue = null;
|
||||
this.isFiltering = false;
|
||||
const existingFilter = this.dataSource.filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
|
||||
@ -61,7 +72,6 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
|
||||
}
|
||||
|
||||
if (this.isRangeFilter) {
|
||||
|
||||
let existingFilter2 = this.dataSource.filters.find(t=> t.type == 'Composite');
|
||||
this.dataSource.query({
|
||||
page: 1,
|
||||
@ -69,6 +79,7 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
applyFilter(){
|
||||
|
||||
this.isFiltering = true;
|
||||
@ -82,6 +93,7 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
|
||||
if(Array.isArray(this.filterValue)){ //check if it's a dateRange value
|
||||
startDate = this.filterValue[0];
|
||||
endDate = this.filterValue[1];
|
||||
|
||||
compositeF = {
|
||||
type: FilterType.COMPOSITE,
|
||||
filters: [
|
||||
@ -97,22 +109,20 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
|
||||
value: endDate,
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
};
|
||||
} else {
|
||||
freshFilter = {
|
||||
type: this.filterType,
|
||||
and: true,
|
||||
path: this.path,
|
||||
value: this.filterValue
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// TODO???
|
||||
// set this for gql better handling of variant.
|
||||
//(freshFilter as IGraphQLFilter).__gqlVariantType = 'DATETIME';
|
||||
|
||||
|
||||
const existingFilterIndex = filters.findIndex(t => {
|
||||
if (t.type == 'COMPOSITE') {
|
||||
const compositeFilter = t as ICompositeFilter;
|
||||
@ -143,8 +153,6 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
|
||||
this.dataSource.query({
|
||||
filters: filters,
|
||||
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,19 +1,31 @@
|
||||
import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
|
||||
import { IDataSource,IFilter, ISimpleFilter } from '@poweredsoft/data';
|
||||
import {Component, Input} from '@angular/core';
|
||||
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({
|
||||
selector: 'psbx-ds-number-filter',
|
||||
selector: 'bsx-ds-number-filter',
|
||||
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() path: string;
|
||||
|
||||
filterType: string = 'Equal';
|
||||
filterValue: number = 0;
|
||||
isFiltering: boolean;
|
||||
filterIsOpened: boolean = false;
|
||||
filterTypes = [
|
||||
{key:'Equals', value: 'Equal'},
|
||||
{key:'Greater Than', value: 'GreaterThan'},
|
||||
@ -21,15 +33,6 @@ export class DataSourceNumberFilterComponent implements OnInit {
|
||||
{key:'Greater Than Equal', value: 'GreaterThanOrEqual'},
|
||||
{key:'Less Than Equal', value: 'LessThanOrEqual'},
|
||||
];
|
||||
filterIsOpenned: boolean = false;
|
||||
|
||||
constructor() { }
|
||||
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
|
||||
}
|
||||
|
||||
clearFilter() {
|
||||
this.filterValue = 0;
|
||||
@ -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 { IDataSource} from '@poweredsoft/data';
|
||||
import { ISimpleFilter } from '@poweredsoft/data';
|
||||
import { PopoverDirective } from 'ngx-bootstrap/popover';
|
||||
|
||||
import {Component, Input} from '@angular/core';
|
||||
import {IDataSource, ISimpleFilter} from '@poweredsoft/data';
|
||||
import {PopoverDirective, PopoverModule} from 'ngx-bootstrap/popover';
|
||||
import {FormsModule} from "@angular/forms";
|
||||
import {TooltipModule} from "ngx-bootstrap/tooltip";
|
||||
import {CommonModule} from "@angular/common";
|
||||
|
||||
@Component({
|
||||
selector: 'psbx-ds-text-filter',
|
||||
selector: 'bsx-ds-text-filter',
|
||||
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;
|
||||
|
||||
filterType: string = 'Contains';
|
||||
filterValue: string = null;
|
||||
isFiltering: boolean;
|
||||
filterIsOpened: boolean = false;
|
||||
|
||||
filterTypes = [
|
||||
{key:'Contains', value: 'Contains'},
|
||||
{key:'Equals', value: 'Equal'},
|
||||
{key:'Starts With', value: 'startsWith'},
|
||||
{key:'Ends With', value: 'endsWith'}
|
||||
];
|
||||
filterIsOpenned: boolean = false;
|
||||
|
||||
constructor() { }
|
||||
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
}
|
||||
|
||||
clearFilter() {
|
||||
this.filterValue = '';
|
||||
@ -1,17 +1,18 @@
|
||||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import {Component, Input} from '@angular/core';
|
||||
import {IDataSource} from '@poweredsoft/data';
|
||||
import {CommonModule} from "@angular/common";
|
||||
|
||||
@Component({
|
||||
selector: 'psbx-ds-sorting',
|
||||
selector: 'bsx-ds-sorting',
|
||||
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() path: string;
|
||||
|
||||
|
||||
get sort() {
|
||||
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;
|
||||
}
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
sorting(){
|
||||
|
||||
if (!this.isSorting) {
|
||||
this.dataSource.sorts.push({
|
||||
path: this.path,
|
||||
@ -47,5 +42,4 @@ export class DataSourceSortingComponent implements OnInit {
|
||||
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 {BsModalService} from 'ngx-bootstrap/modal';
|
||||
import {FormGroupCommandModalComponent} from '../form-group-command-modal/form-group-command-modal.component';
|
||||
import { FormGroup } from '@angular/forms';
|
||||
import { ConfirmModalComponent } from '../../confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component';
|
||||
import {UntypedFormGroup} from '@angular/forms';
|
||||
|
||||
export interface IModelFormCreateEvent
|
||||
{
|
||||
@ -11,14 +10,15 @@ export interface IModelFormCreateEvent
|
||||
viewModel: any;
|
||||
commandName: string;
|
||||
commandModel: any;
|
||||
formGroup?: FormGroup;
|
||||
formGroup?: UntypedFormGroup;
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[psbxFormGroupCommandModal]'
|
||||
selector: '[bsxFormGroupCommandModal]',
|
||||
standalone: true
|
||||
})
|
||||
export class FormGroupCommandModalDirective {
|
||||
|
||||
@Inject(BsModalService) private modalService!: BsModalService;
|
||||
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@Input() command: string;
|
||||
@ -34,12 +34,8 @@ export class FormGroupCommandModalDirective {
|
||||
@Input() params: any;
|
||||
|
||||
@Output() formCreate: EventEmitter<IModelFormCreateEvent> = new EventEmitter<IModelFormCreateEvent>();
|
||||
|
||||
@Output() success: EventEmitter<any> = new EventEmitter<any>();
|
||||
|
||||
|
||||
constructor(private modalService: BsModalService) { }
|
||||
|
||||
@HostListener('click')
|
||||
wasClicked() {
|
||||
this.dataSource.resolveCommandModelByName({
|
||||
@ -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 {IDataSource} from '@poweredsoft/data';
|
||||
import {finalize} from 'rxjs/operators';
|
||||
import {Subscription} from 'rxjs'
|
||||
import { FormGroup, FormControl } from '@angular/forms';
|
||||
import {UntypedFormGroup} from '@angular/forms';
|
||||
import {CommonModule} from "@angular/common";
|
||||
|
||||
@Component({
|
||||
selector: 'ps-form-group-command-modal',
|
||||
selector: 'bsx-form-group-command-modal',
|
||||
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 {
|
||||
@Inject(BsModalRef) public modalRef!: BsModalRef;
|
||||
|
||||
|
||||
modelForm: FormGroup;
|
||||
modelForm: UntypedFormGroup;
|
||||
title: string;
|
||||
template: TemplateRef<any>;
|
||||
command: string;
|
||||
@ -29,10 +32,6 @@ export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
|
||||
private _notifyMessage: Subscription;
|
||||
private _validationError: Subscription;
|
||||
|
||||
|
||||
|
||||
constructor(public modalRef: BsModalRef) { }
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this._notifyMessage.unsubscribe();
|
||||
this._validationError.unsubscribe();
|
||||
@ -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 {Subscription} from 'rxjs';
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {PaginationModule} from "ngx-bootstrap/pagination";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
|
||||
@Component({
|
||||
selector: 'psbx-ds-pagination',
|
||||
selector: 'bsx-ds-pagination',
|
||||
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 {
|
||||
|
||||
@Inject(ChangeDetectorRef) private cdf!: ChangeDetectorRef;
|
||||
|
||||
@Input() dataSource: IDataSource<any>
|
||||
|
||||
numberOfItems: number = 0;
|
||||
private dataSubscription: Subscription;
|
||||
|
||||
constructor(private cdf: ChangeDetectorRef) { }
|
||||
ngOnDestroy(): void {
|
||||
this.dataSubscription.unsubscribe();
|
||||
}
|
||||
@ -31,5 +36,4 @@ export class DataSourcePaginationComponent implements OnInit, OnDestroy {
|
||||
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.service';
|
||||
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/pagination/Pagination.module';
|
||||
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/spinner/spinner.module';
|
||||
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/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-sorting/data-source-sorting.module';
|
||||
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';
|
||||
@ -1,26 +1,17 @@
|
||||
// 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/dist/zone-testing';
|
||||
import 'zone.js';
|
||||
import 'zone.js/testing';
|
||||
import { getTestBed } from '@angular/core/testing';
|
||||
import {
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting
|
||||
} 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.
|
||||
getTestBed().initTestEnvironment(
|
||||
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",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../../out-tsc/lib",
|
||||
"target": "es2015",
|
||||
"declarationMap": true,
|
||||
"declaration": true,
|
||||
"inlineSources": true,
|
||||
"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,6 +1,6 @@
|
||||
{
|
||||
"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
|
||||
"dest": "../../../dist/poweredsoft/ngx-cdk-ui",
|
||||
"dest": "../../../dist/openharbor/ngx-data-cdk-ui",
|
||||
"lib": {
|
||||
"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;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:host .flex-item{
|
||||
.flex-item{
|
||||
margin-right: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@ -1,28 +1,37 @@
|
||||
import { Component, OnInit, ContentChildren, QueryList, Input, Output, EventEmitter, ContentChild, ChangeDetectorRef, OnDestroy } from '@angular/core';
|
||||
import { IQueryExecutionResult, IQueryExecutionGroupResult, IDataSource } from '@poweredsoft/data';
|
||||
import {
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
ContentChildren,
|
||||
EventEmitter, Inject,
|
||||
Input,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
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';
|
||||
import { DataGridCellFilterDirective } from '../directives/data-grid-cell-filter.directive';
|
||||
import { DataGridColSortDirective } from '../directives/data-grid-col-sort.directive';
|
||||
|
||||
@Component({
|
||||
selector: 'ps-data-grid',
|
||||
selector: 'cdk-data-grid',
|
||||
templateUrl: './data-grid.component.html',
|
||||
styleUrls: ['./data-grid.component.scss']
|
||||
})
|
||||
export class DataGridComponent implements OnInit, OnDestroy {
|
||||
|
||||
latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
|
||||
loading:boolean;
|
||||
@Inject(ChangeDetectorRef) private cdr!: ChangeDetectorRef;
|
||||
|
||||
@ContentChildren(DataGridColDirective) columnDefinitions: QueryList<DataGridColDirective>;
|
||||
@ContentChildren(DataGridHeaderDirective) gridHeaders: QueryList<DataGridHeaderDirective>;
|
||||
@ContentChildren(DataGridFooterDirective) gridFooters: QueryList<DataGridFooterDirective>;
|
||||
@ContentChildren(DataGridLoaderDirective) loaders: QueryList<DataGridLoaderDirective>;
|
||||
|
||||
latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
|
||||
loading: boolean = false;
|
||||
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@Input() tableClasses: any;
|
||||
@Input() headerClasses: any;
|
||||
@ -32,8 +41,6 @@ export class DataGridComponent implements OnInit, OnDestroy {
|
||||
private _dataSubscription: Subscription;
|
||||
private _loadingSubscription: Subscription;
|
||||
|
||||
_fiters:any
|
||||
|
||||
@Input() set columns(value: string[]) {
|
||||
this._columns = value;
|
||||
this.columnsChange.emit(value);
|
||||
@ -45,8 +52,6 @@ export class DataGridComponent implements OnInit, OnDestroy {
|
||||
|
||||
@Output() columnsChange: EventEmitter<string []> = new EventEmitter<string []>();
|
||||
|
||||
|
||||
|
||||
get noData() {
|
||||
return !this.latestResult || this.latestResult.totalRecords == 0;
|
||||
}
|
||||
@ -55,17 +60,12 @@ export class DataGridComponent implements OnInit, OnDestroy {
|
||||
return this.noRecordsText || 'No records';
|
||||
}
|
||||
|
||||
constructor(private cdr: ChangeDetectorRef) {
|
||||
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this._dataSubscription.unsubscribe();
|
||||
this._loadingSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
this._dataSubscription = this.dataSource.data$.subscribe(newData => {
|
||||
this.latestResult = newData;
|
||||
});
|
||||
@ -74,10 +74,9 @@ export class DataGridComponent implements OnInit, OnDestroy {
|
||||
this.loading = isLoading;
|
||||
this.cdr.detectChanges();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
getSortingTemplate(columnName){
|
||||
getSortingTemplate(columnName: string){
|
||||
const ret = this.getColumn(columnName);
|
||||
if (ret && ret.sortTemplate)
|
||||
return ret.sortTemplate.template;
|
||||
@ -85,7 +84,7 @@ export class DataGridComponent implements OnInit, OnDestroy {
|
||||
return null;
|
||||
}
|
||||
|
||||
getFilterTemplate(columnName){
|
||||
getFilterTemplate(columnName: string){
|
||||
const ret = this.getColumn(columnName);
|
||||
if (ret && ret.filterTemplate)
|
||||
return ret.filterTemplate.template;
|
||||
@ -94,7 +93,6 @@ export class DataGridComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
getColumn(columnName: string) {
|
||||
|
||||
if (!this.columnDefinitions)
|
||||
return null;
|
||||
|
||||
@ -138,6 +136,4 @@ export class DataGridComponent implements OnInit, OnDestroy {
|
||||
hasSortingTemplate(columnName: string) {
|
||||
return this.getSortingTemplate(columnName) ? true : false;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDataGridCellFilter]'
|
||||
selector: '[cdkDataGridCellFilter]'
|
||||
})
|
||||
export class DataGridCellFilterDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDataGridCell]'
|
||||
selector: '[cdkDataGridCell]'
|
||||
})
|
||||
export class DataGridCellDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDataGridColHeader]'
|
||||
selector: '[cdkDataGridColHeader]'
|
||||
})
|
||||
export class DataGridColHeaderDirective {
|
||||
|
||||
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';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDataGridFooter]'
|
||||
selector: '[cdkDataGridFooter]'
|
||||
})
|
||||
export class DataGridFooterDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDataGridHeader]'
|
||||
selector: '[cdkDataGridHeader]'
|
||||
})
|
||||
export class DataGridHeaderDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDataGridLoader]'
|
||||
selector: '[cdkDataGridLoader]'
|
||||
})
|
||||
export class DataGridLoaderDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDsCommandContent]'
|
||||
selector: '[cdkDsCommandContent]'
|
||||
})
|
||||
export class DsCommandContentDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDsCommandError]'
|
||||
selector: '[cdkDsCommandError]'
|
||||
})
|
||||
export class DsCommandErrorDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDsCommandFooter]'
|
||||
selector: '[cdkDsCommandFooter]'
|
||||
})
|
||||
export class DsCommandFooterDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDsCommandNoCommand]'
|
||||
selector: '[cdkDsCommandNoCommand]'
|
||||
})
|
||||
export class DsCommandNoCommandDirective {
|
||||
|
||||
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';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDsCommandValidation]'
|
||||
selector: '[cdkDsCommandValidation]'
|
||||
})
|
||||
export class DsCommandValidationDirective {
|
||||
|
||||
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,5 +1,16 @@
|
||||
import { Component, ContentChild, ContentChildren, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, QueryList } from '@angular/core';
|
||||
import { IDataSource, IDataSourceValidationError } from '@poweredsoft/data';
|
||||
import {
|
||||
Component,
|
||||
ContentChild,
|
||||
ContentChildren,
|
||||
EventEmitter,
|
||||
HostListener,
|
||||
Input,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
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';
|
||||
@ -16,27 +27,27 @@ export interface DsCommandPropertyError
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'ps-ds-command, [psDsCommand]',
|
||||
selector: 'cdk-ds-command, [cdkDsCommand]',
|
||||
templateUrl: './ds-command.component.html',
|
||||
styleUrls: ['./ds-command.component.scss']
|
||||
})
|
||||
export class DsCommandComponent implements OnInit, OnDestroy {
|
||||
|
||||
private _refreshOnSuccess: boolean = true;
|
||||
|
||||
@Input() params: any;
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@Input() name: string;
|
||||
@Input() model: any;
|
||||
@Input() resolveCommand: boolean;
|
||||
|
||||
@Input() set refreshOnSuccess(val: boolean) {
|
||||
this._refreshOnSuccess = val;
|
||||
}
|
||||
|
||||
get refreshOnSuccess() {
|
||||
return this._refreshOnSuccess;
|
||||
}
|
||||
|
||||
@Input() resolveCommand: boolean;
|
||||
|
||||
@Output() success = new EventEmitter<any>();
|
||||
@Output() loading = new EventEmitter<boolean>();
|
||||
@Output() commandChange = new EventEmitter<any>();
|
||||
@ -97,10 +108,6 @@ export class DsCommandComponent implements OnInit, OnDestroy {
|
||||
return this.commandContent.template;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
clearValidationError() {
|
||||
this.lastValidationResult = null;
|
||||
}
|
||||
@ -115,7 +122,6 @@ export class DsCommandComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
this._validationErrorSubscription = this.dataSource
|
||||
.validationError$.subscribe(validationResult => {
|
||||
this.lastValidationResult = Object.keys(validationResult.errors).reduce<DsCommandPropertyError[]>((prev, attr) => {
|
||||
@ -169,7 +175,6 @@ export class DsCommandComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
execute() {
|
||||
|
||||
// secure from double send.
|
||||
if (this._loading)
|
||||
return;
|
||||
@ -197,5 +202,4 @@ export class DsCommandComponent implements OnInit, OnDestroy {
|
||||
get isLoading() {
|
||||
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 {IDataSource, IQueryExecutionGroupResult, IQueryExecutionResult} from '@poweredsoft/data';
|
||||
import {Subscription} from 'rxjs';
|
||||
import {CommonModule} from "@angular/common";
|
||||
|
||||
@Component({
|
||||
selector: 'ps-ds-pager',
|
||||
selector: 'cdk-ds-pager',
|
||||
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 {
|
||||
|
||||
@ -38,10 +41,6 @@ export class DsPagerComponent implements OnInit, OnDestroy {
|
||||
public latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any> = null;
|
||||
private dataSubscription: Subscription;
|
||||
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.dataSubscription = this.dataSource.data$.subscribe(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 {FilterType, ICompositeFilter, IDataSource, ISimpleFilter} from '@poweredsoft/data';
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
|
||||
@Component({
|
||||
selector: 'ps-ds-search',
|
||||
selector: 'cdk-ds-search',
|
||||
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() filterType: string;
|
||||
@Input() filterPaths: string[];
|
||||
@ -34,7 +37,6 @@ export class DsSearchComponent implements OnInit {
|
||||
}
|
||||
|
||||
applySearch() {
|
||||
|
||||
const existingFilters = this.dataSource.filters;
|
||||
|
||||
|
||||
@ -69,8 +71,4 @@ export class DsSearchComponent implements OnInit {
|
||||
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 {IDataSource} from '@poweredsoft/data';
|
||||
import {Subscription} from 'rxjs';
|
||||
import {CommonModule} from "@angular/common";
|
||||
|
||||
@Component({
|
||||
selector: 'ps-ds-validation-error',
|
||||
selector: 'cdk-ds-validation-error',
|
||||
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 {
|
||||
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@Input() field: string;
|
||||
|
||||
validationErrorsSub: Subscription;
|
||||
commandStartedSub: Subscription;
|
||||
latestErrors: string[] = [];
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.validationErrorsSub?.unsubscribe();
|
||||
this.commandStartedSub?.unsubscribe();
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
this.commandStartedSub = this.dataSource.commandStarted$.subscribe(e => {
|
||||
this.latestErrors = [];
|
||||
});
|
||||
@ -35,7 +35,5 @@ export class DsValidationErrorComponent implements OnInit, OnDestroy {
|
||||
return prev.concat(validationErrors.errors[current]);
|
||||
}, []);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psListViewFooter]'
|
||||
selector: '[cdkListViewFooter]'
|
||||
})
|
||||
export class ListViewFooterDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psListViewHeader]'
|
||||
selector: '[cdkListViewHeader]'
|
||||
})
|
||||
export class ListViewHeaderDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psListViewItem]'
|
||||
selector: '[cdkListViewItem]'
|
||||
})
|
||||
export class ListViewItemDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDataGridColSort]'
|
||||
selector: '[cdkListViewSeparator]'
|
||||
})
|
||||
export class DataGridColSortDirective {
|
||||
|
||||
export class ListViewSeparatorDirective {
|
||||
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,17 +1,16 @@
|
||||
import { Component, OnInit, Input, OnDestroy, ContentChildren, QueryList, ContentChild } from '@angular/core';
|
||||
import { IDataSource, IQueryExecutionResult, IQueryExecutionGroupResult } from '@poweredsoft/data';
|
||||
import {Component, ContentChild, Input, OnDestroy, OnInit} from '@angular/core';
|
||||
import {IDataSource, IQueryExecutionGroupResult, IQueryExecutionResult} from '@poweredsoft/data';
|
||||
import {Subscription} from 'rxjs';
|
||||
import {ListViewItemDirective} from '../directives/list-view-item.directive';
|
||||
import {ListViewHeaderDirective} from '../directives/list-view-header.directive';
|
||||
import {ListViewFooterDirective} from '../directives/list-view-footer.directive';
|
||||
|
||||
@Component({
|
||||
selector: 'ps-list-view',
|
||||
selector: 'cdk-list-view',
|
||||
templateUrl: './list-view.component.html',
|
||||
styleUrls: ['./list-view.component.scss']
|
||||
})
|
||||
export class ListViewComponent implements OnInit, OnDestroy {
|
||||
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@Input() noRecordsText: string;
|
||||
@Input() noRecordClasses: any;
|
||||
@ -27,10 +26,6 @@ export class ListViewComponent implements OnInit, OnDestroy {
|
||||
@ContentChild(ListViewFooterDirective) viewFooter: ListViewFooterDirective;
|
||||
//@ContentChildren(ViewDataDirective) viewData: QueryList<ViewDataDirective>;
|
||||
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this._dataSubscription.unsubscribe();
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psViewContent]'
|
||||
selector: '[cdkDsViewContent]'
|
||||
})
|
||||
export class ViewContentDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psViewLoading]'
|
||||
selector: '[cdkDsViewLoading]'
|
||||
})
|
||||
export class ViewLoadingDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psViewNoRecords]'
|
||||
selector: '[cdkDsViewNoRecords]'
|
||||
})
|
||||
export class ViewNoRecordsDirective {
|
||||
|
||||
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>
|
||||
@ -6,15 +6,11 @@ import { ViewLoadingDirective } from './directives/view-loading.directive';
|
||||
import {ViewNoRecordsDirective} from './directives/view-no-records.directive';
|
||||
|
||||
@Component({
|
||||
selector: 'ps-view',
|
||||
selector: 'cdk-ds-view',
|
||||
templateUrl: './view.component.html',
|
||||
styleUrls: ['./view.component.scss']
|
||||
})
|
||||
export class ViewComponent implements OnInit, OnDestroy {
|
||||
|
||||
|
||||
constructor() { }
|
||||
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@Input() noRecordsText: string;
|
||||
@Input() loadingText: string;
|
||||
@ -79,6 +75,5 @@ export class ViewComponent implements OnInit, OnDestroy {
|
||||
return null;
|
||||
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-header.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
|
||||
export * from './lib/ds-search/ds-search.module';
|
||||
export * from './lib/ds-search/ds-search.component';
|
||||
|
||||
// ds validation
|
||||
export * from './lib/ds-validation-error/ds-validation-error.module';
|
||||
export * from './lib/ds-validation-error/ds-validation-error.component';
|
||||
|
||||
// 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';
|
||||
|
||||
// ds-pager
|
||||
export * from './lib/ds-pager/ds-pager.module';
|
||||
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