Compare commits
No commits in common. "3f1a33d2ad279a92d2d80d1914e6b016c147e9c5" and "891a80fc70a4164db353266f4d857d88da9abd1f" have entirely different histories.
3f1a33d2ad
...
891a80fc70
1
.gitignore
vendored
1
.gitignore
vendored
@ -32,7 +32,6 @@ speed-measure-plugin*.json
|
||||
.history/*
|
||||
|
||||
# misc
|
||||
/.angular/cache
|
||||
/.sass-cache
|
||||
/connect.lock
|
||||
/coverage
|
||||
|
||||
28
README.md
28
README.md
@ -1,4 +1,30 @@
|
||||
> 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
|
||||
# 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).
|
||||
|
||||
## License
|
||||
|
||||
|
||||
213
angular.json
213
angular.json
@ -3,7 +3,7 @@
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"demo": {
|
||||
"ngx-cdk-ui": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
@ -15,16 +15,14 @@
|
||||
"prefix": "ps",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:application",
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"outputPath": {
|
||||
"base": "dist/ngx-cdk-ui"
|
||||
},
|
||||
"outputPath": "dist/ngx-cdk-ui",
|
||||
"index": "src/index.html",
|
||||
"polyfills": [
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"main": "src/main.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"aot": true,
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
@ -33,12 +31,7 @@
|
||||
"node_modules/bootstrap/dist/css/bootstrap.min.css",
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": [],
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"optimization": false,
|
||||
"namedChunks": true,
|
||||
"browser": "src/main.ts"
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
@ -51,8 +44,11 @@
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"extractCss": true,
|
||||
"namedChunks": false,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
@ -65,29 +61,24 @@
|
||||
"maximumError": "10kb"
|
||||
}
|
||||
]
|
||||
},
|
||||
"development": {}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
}
|
||||
}
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "ngx-cdk-ui:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "ngx-cdk-ui:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "ngx-cdk-ui:build:development"
|
||||
"browserTarget": "ngx-cdk-ui:build:production"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
}
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"buildTarget": "ngx-cdk-ui:build"
|
||||
"browserTarget": "ngx-cdk-ui:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
@ -107,112 +98,152 @@
|
||||
"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"
|
||||
"protractorConfig": "e2e/protractor.conf.js",
|
||||
"devServerTarget": "ngx-cdk-ui:serve"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"devServerTarget": "ngx-cdk-ui:serve:production"
|
||||
},
|
||||
"development": {
|
||||
"devServerTarget": "ngx-cdk-ui:serve:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
}
|
||||
}
|
||||
},
|
||||
"ngx-data-cdk-ui": {
|
||||
"projectType": "library",
|
||||
"root": "projects/openharbor/ngx-data-cdk-ui",
|
||||
"sourceRoot": "projects/openharbor/ngx-data-cdk-ui/src",
|
||||
"prefix": "cdk",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:ng-packagr",
|
||||
"options": {
|
||||
"tsConfig": "projects/openharbor/ngx-data-cdk-ui/tsconfig.lib.json",
|
||||
"project": "projects/openharbor/ngx-data-cdk-ui/ng-package.json"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"tsConfig": "projects/openharbor/ngx-data-cdk-ui/tsconfig.lib.prod.json"
|
||||
},
|
||||
"development": {}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"ngx-data-bootstrap-ui": {
|
||||
"@poweredsoft/ngx-cdk-ui": {
|
||||
"projectType": "library",
|
||||
"root": "projects/openharbor/ngx-data-bootstrap-ui",
|
||||
"sourceRoot": "projects/openharbor/ngx-data-bootstrap-ui/src",
|
||||
"prefix": "bsx",
|
||||
"root": "projects/poweredsoft/ngx-cdk-ui",
|
||||
"sourceRoot": "projects/poweredsoft/ngx-cdk-ui/src",
|
||||
"prefix": "ps",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:ng-packagr",
|
||||
"builder": "@angular-devkit/build-ng-packagr:build",
|
||||
"options": {
|
||||
"tsConfig": "projects/openharbor/ngx-data-bootstrap-ui/tsconfig.lib.json",
|
||||
"project": "projects/openharbor/ngx-data-bootstrap-ui/ng-package.json"
|
||||
"tsConfig": "projects/poweredsoft/ngx-cdk-ui/tsconfig.lib.json",
|
||||
"project": "projects/poweredsoft/ngx-cdk-ui/ng-package.json"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"tsConfig": "projects/openharbor/ngx-data-bootstrap-ui/tsconfig.lib.prod.json"
|
||||
},
|
||||
"development": {}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
"tsConfig": "projects/poweredsoft/ngx-cdk-ui/tsconfig.lib.prod.json"
|
||||
}
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"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"
|
||||
"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/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"ngx-data-ng-select-ui": {
|
||||
"@poweredsoft/ngx-bootstrap": {
|
||||
"projectType": "library",
|
||||
"root": "projects/openharbor/ngx-data-ng-select-ui",
|
||||
"sourceRoot": "projects/openharbor/ngx-data-ng-select-ui/src",
|
||||
"root": "projects/poweredsoft/ngx-bootstrap",
|
||||
"sourceRoot": "projects/poweredsoft/ngx-bootstrap/src",
|
||||
"prefix": "psbx",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-ng-packagr:build",
|
||||
"options": {
|
||||
"tsConfig": "projects/poweredsoft/ngx-bootstrap/tsconfig.lib.json",
|
||||
"project": "projects/poweredsoft/ngx-bootstrap/ng-package.json"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"tsConfig": "projects/poweredsoft/ngx-bootstrap/tsconfig.lib.prod.json"
|
||||
}
|
||||
}
|
||||
},
|
||||
"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/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@poweredsoft/ng-select": {
|
||||
"projectType": "library",
|
||||
"root": "projects/poweredsoft/ng-select",
|
||||
"sourceRoot": "projects/poweredsoft/ng-select/src",
|
||||
"prefix": "ps-ng",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:ng-packagr",
|
||||
"builder": "@angular-devkit/build-ng-packagr:build",
|
||||
"options": {
|
||||
"tsConfig": "projects/openharbor/ngx-data-ng-select-ui/tsconfig.lib.json",
|
||||
"project": "projects/openharbor/ngx-data-ng-select-ui/ng-package.json"
|
||||
"tsConfig": "projects/poweredsoft/ng-select/tsconfig.lib.json",
|
||||
"project": "projects/poweredsoft/ng-select/ng-package.json"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"tsConfig": "projects/openharbor/ngx-data-ng-select-ui/tsconfig.lib.prod.json"
|
||||
},
|
||||
"development": {}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
"tsConfig": "projects/poweredsoft/ng-select/tsconfig.lib.prod.json"
|
||||
}
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"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"
|
||||
"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/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}},
|
||||
"defaultProject": "ngx-cdk-ui"
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/e2e",
|
||||
"module": "commonjs",
|
||||
"target": "es2018",
|
||||
"target": "es5",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"jasminewd2",
|
||||
|
||||
14901
package-lock.json
generated
Normal file
14901
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
76
package.json
76
package.json
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "demo",
|
||||
"name": "ngx-ui",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
@ -9,33 +9,23 @@
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e",
|
||||
"clean": "rimraf dist",
|
||||
|
||||
"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",
|
||||
"start:app": "wait-on dist/poweredsoft/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": "^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",
|
||||
"@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",
|
||||
"@poweredsoft/ngx-data-apollo": "0.0.10",
|
||||
"apollo-angular": "^1.8.0",
|
||||
"apollo-angular-link-http": "^1.9.0",
|
||||
@ -45,35 +35,35 @@
|
||||
"bootstrap": "^4.5.0",
|
||||
"graphql": "^14.5.0",
|
||||
"graphql-tag": "^2.10.0",
|
||||
"ngx-bootstrap": "^18.0.0",
|
||||
"ngx-bootstrap": "^5.6.1",
|
||||
"rxjs": "~6.5.4",
|
||||
"tslib": "^2.0.0",
|
||||
"zone.js": "~0.14.10"
|
||||
"tslib": "^1.10.0",
|
||||
"zone.js": "~0.10.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@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",
|
||||
"@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",
|
||||
"@types/jasminewd2": "~2.0.3",
|
||||
"@types/node": "^12.11.1",
|
||||
"codelyzer": "^6.0.0",
|
||||
"jasmine-core": "~3.6.0",
|
||||
"jasmine-spec-reporter": "~5.0.0",
|
||||
"karma": "~6.4.4",
|
||||
"codelyzer": "^5.1.2",
|
||||
"jasmine-core": "~3.5.0",
|
||||
"jasmine-spec-reporter": "~4.2.1",
|
||||
"karma": "~5.0.0",
|
||||
"karma-chrome-launcher": "~3.1.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",
|
||||
"karma-coverage-istanbul-reporter": "~2.1.0",
|
||||
"karma-jasmine": "~3.0.1",
|
||||
"karma-jasmine-html-reporter": "^1.4.2",
|
||||
"ng-packagr": "^9.0.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"protractor": "~7.0.0",
|
||||
"protractor": "~5.4.3",
|
||||
"rimraf": "^3.0.2",
|
||||
"ts-node": "~8.3.0",
|
||||
"tslint": "~6.1.0",
|
||||
"typescript": "~5.5.4",
|
||||
"typescript": "~3.8.3",
|
||||
"wait-on": "^5.0.1"
|
||||
},
|
||||
"packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
> 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,16 +0,0 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
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 { }
|
||||
@ -1,23 +0,0 @@
|
||||
<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>
|
||||
@ -1,3 +0,0 @@
|
||||
.field-error{
|
||||
border: 1px solid red;
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
<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,62 +0,0 @@
|
||||
<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,106 +0,0 @@
|
||||
<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,25 +0,0 @@
|
||||
<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,10 +0,0 @@
|
||||
<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>
|
||||
@ -1,6 +0,0 @@
|
||||
.center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
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 {
|
||||
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"extends": "./tsconfig.lib.json",
|
||||
"compilerOptions": {
|
||||
"declarationMap": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"compilationMode": "partial"
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
> 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,10 +0,0 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
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 { }
|
||||
@ -1,75 +0,0 @@
|
||||
<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,8 +0,0 @@
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[cdkDataGridCell]'
|
||||
})
|
||||
export class DataGridCellDirective {
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
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,8 +0,0 @@
|
||||
import {Directive, ElementRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[cdkDsCommandSubmit]'
|
||||
})
|
||||
export class DsCommandSubmitDirective {
|
||||
constructor(public element: ElementRef) { }
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
<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,19 +0,0 @@
|
||||
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 { }
|
||||
@ -1,23 +0,0 @@
|
||||
<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>
|
||||
@ -1,19 +0,0 @@
|
||||
:host {
|
||||
ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 4px 2px;
|
||||
}
|
||||
|
||||
li.ds-pager-current {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
<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,4 +0,0 @@
|
||||
<ng-container *ngFor="let error of latestErrors; let isLast=last">
|
||||
{{ error }}
|
||||
<br *ngIf="!isLast" />
|
||||
</ng-container>
|
||||
@ -1,23 +0,0 @@
|
||||
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,25 +0,0 @@
|
||||
<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,16 +0,0 @@
|
||||
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 { }
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"extends": "./tsconfig.lib.json",
|
||||
"compilerOptions": {
|
||||
"declarationMap": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"compilationMode": "partial"
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
> 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,9 +0,0 @@
|
||||
{
|
||||
"name": "@openharbor/ngx-data-ng-select-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"
|
||||
}
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
import {NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {NgSelectComponent} from './ng-select/ng-select.component';
|
||||
import {MultiSelectComponent} from './multi-select/multi-select.component';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {NgSelectModule} from '@ng-select/ng-select';
|
||||
import {SelectLabelTemplateDirective} from './directives/select-label-template.directive';
|
||||
import {SelectOptionTemplateDirective} from './directives/select-option-template.directive';
|
||||
import {NotFoundTemplateDirective} from './directives/not-found-template.directive';
|
||||
import {SelectFooterTemplateDirective} from './directives/select-footer-template.directive';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [NgSelectComponent, MultiSelectComponent, SelectLabelTemplateDirective, SelectOptionTemplateDirective, NotFoundTemplateDirective, SelectFooterTemplateDirective],
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
NgSelectModule,
|
||||
],
|
||||
exports: [
|
||||
NgSelectComponent,
|
||||
MultiSelectComponent,
|
||||
SelectLabelTemplateDirective,
|
||||
SelectOptionTemplateDirective,
|
||||
SelectFooterTemplateDirective,
|
||||
NotFoundTemplateDirective
|
||||
]
|
||||
})
|
||||
export class NgxDataNgSelectUIModule { }
|
||||
@ -1,11 +0,0 @@
|
||||
/*
|
||||
* Public API Surface of ng-select
|
||||
*/
|
||||
|
||||
export * from './lib/ng-select-ds/ngx-data-ng-select-ui.module';
|
||||
export * from './lib/ng-select-ds/ng-select/ng-select.component';
|
||||
export * from './lib/ng-select-ds/multi-select/multi-select.component';
|
||||
export * from './lib/ng-select-ds/directives/select-label-template.directive';
|
||||
export * from './lib/ng-select-ds/directives/select-option-template.directive';
|
||||
export * from './lib/ng-select-ds/directives/select-footer-template.directive';
|
||||
export * from './lib/ng-select-ds/directives/not-found-template.directive';
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"extends": "./tsconfig.lib.json",
|
||||
"compilerOptions": {
|
||||
"declarationMap": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"compilationMode": "partial"
|
||||
}
|
||||
}
|
||||
24
projects/poweredsoft/ng-select/README.md
Normal file
24
projects/poweredsoft/ng-select/README.md
Normal file
@ -0,0 +1,24 @@
|
||||
# NgSelect
|
||||
|
||||
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.9.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name --project ng-select` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ng-select`.
|
||||
> Note: Don't forget to add `--project ng-select` or else it will be added to the default project in your `angular.json` file.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build ng-select` to build the project. The build artifacts will be stored in the `dist/` directory.
|
||||
|
||||
## Publishing
|
||||
|
||||
After building your library with `ng build ng-select`, go to the dist folder `cd dist/ng-select` and run `npm publish`.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test ng-select` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## 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).
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
|
||||
"dest": "../../../dist/openharbor/ngx-data-cdk-ui",
|
||||
"dest": "../../../dist/poweredsoft/ng-select",
|
||||
"lib": {
|
||||
"entryFile": "src/public-api.ts"
|
||||
}
|
||||
}
|
||||
}
|
||||
11
projects/poweredsoft/ng-select/package.json
Normal file
11
projects/poweredsoft/ng-select/package.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "@poweredsoft/ng-select",
|
||||
"version": "0.0.6",
|
||||
"peerDependencies": {
|
||||
"@angular/common": "^9.1.9",
|
||||
"@angular/core": "^9.1.9"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": "^1.10.0"
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,11 @@
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
|
||||
|
||||
@Directive({
|
||||
selector: '[ngSelectDsNotFoundTemplate]'
|
||||
selector: '[psNgNotFoundTemplate]'
|
||||
})
|
||||
export class NotFoundTemplateDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,9 +1,10 @@
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
|
||||
|
||||
@Directive({
|
||||
selector: '[ngSelectDsFooter]'
|
||||
selector: '[psNgSelectFooter]'
|
||||
})
|
||||
export class SelectFooterTemplateDirective {
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[ngSelectDsLabel]'
|
||||
selector: '[psNgSelectLabel]'
|
||||
})
|
||||
export class SelectLabelTemplateDirective {
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
@ -1,8 +1,10 @@
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[ngSelectDsOption]'
|
||||
selector: '[psNgSelectOption]'
|
||||
})
|
||||
export class SelectOptionTemplateDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,28 +1,18 @@
|
||||
import {
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
ContentChild,
|
||||
EventEmitter,
|
||||
forwardRef,
|
||||
Input,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
Output,
|
||||
ViewChild
|
||||
} from '@angular/core';
|
||||
import {SelectLabelTemplateDirective} from '../directives/select-label-template.directive';
|
||||
import {IDataSource, ISimpleFilter, ISort} from '@poweredsoft/data';
|
||||
import {Observable, Subject, Subscription} from 'rxjs';
|
||||
import {debounceTime, distinctUntilChanged, map} from 'rxjs/operators';
|
||||
import {NgSelectComponent as SelectComponent} from '@ng-select/ng-select';
|
||||
import {NG_VALUE_ACCESSOR} from '@angular/forms';
|
||||
import {SelectOptionTemplateDirective} from '../directives/select-option-template.directive';
|
||||
import {NotFoundTemplateDirective} from '../directives/not-found-template.directive';
|
||||
import {SelectFooterTemplateDirective} from '../directives/select-footer-template.directive';
|
||||
import { Component, OnInit, ContentChild, ViewChild, Input, Output, EventEmitter, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
|
||||
import { SelectLabelTemplateDirective } from '../directives/select-label-template.directive';
|
||||
import { IDataSource, ISimpleFilter, ISort } from '@poweredsoft/data';
|
||||
import { Observable, Subject, Subscription } from 'rxjs';
|
||||
import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
|
||||
import { NgSelectComponent as SelectComponent } from '@ng-select/ng-select';
|
||||
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||
import { SelectOptionTemplateDirective } from '../directives/select-option-template.directive';
|
||||
import { NotFoundTemplateDirective } from '../directives/not-found-template.directive';
|
||||
import { NgFooterTemplateDirective } from '@ng-select/ng-select/lib/ng-templates.directive';
|
||||
import { SelectFooterTemplateDirective } from '../directives/select-footer-template.directive';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'ng-select-ds',
|
||||
selector: 'ps-ng-select',
|
||||
templateUrl: './ng-select.component.html',
|
||||
providers: [{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
@ -32,13 +22,15 @@ import {SelectFooterTemplateDirective} from '../directives/select-footer-templat
|
||||
styleUrls: ['./ng-select.component.scss']
|
||||
})
|
||||
export class NgSelectComponent implements OnInit, OnDestroy {
|
||||
@ViewChild(SelectComponent, { static: true }) selectComponent: SelectComponent;
|
||||
|
||||
@ContentChild(SelectOptionTemplateDirective) optionTemplate: SelectOptionTemplateDirective;
|
||||
@ContentChild(SelectLabelTemplateDirective) labelTemplate: SelectLabelTemplateDirective;
|
||||
@ContentChild(NotFoundTemplateDirective) notFoundTemplate: NotFoundTemplateDirective;
|
||||
@ContentChild(SelectFooterTemplateDirective) footerTemplate: SelectFooterTemplateDirective;
|
||||
|
||||
|
||||
|
||||
@ViewChild(SelectComponent, { static: true }) selectComponent: SelectComponent;
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@Input() searchPath: string | string[];
|
||||
@Input() searchType: string;
|
||||
@ -59,6 +51,7 @@ export class NgSelectComponent implements OnInit, OnDestroy {
|
||||
|
||||
constructor(private cdr: ChangeDetectorRef) {
|
||||
this.trackFn = this.trackBy.bind(this);
|
||||
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
@ -72,6 +65,7 @@ export class NgSelectComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
valueChanged(event) {
|
||||
this.changeEvent.emit(event);
|
||||
}
|
||||
@ -98,6 +92,7 @@ export class NgSelectComponent implements OnInit, OnDestroy {
|
||||
this._loadingSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
|
||||
dataFetching() {
|
||||
this.data$ = this.dataSource.data$.pipe(
|
||||
map(t => {
|
||||
@ -0,0 +1,30 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgSelectComponent } from './ng-select/ng-select.component';
|
||||
import { MultiSelectComponent } from './multi-select/multi-select.component';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { NgSelectModule } from '@ng-select/ng-select';
|
||||
import { SelectLabelTemplateDirective } from './directives/select-label-template.directive';
|
||||
import { SelectOptionTemplateDirective } from './directives/select-option-template.directive';
|
||||
import { NotFoundTemplateDirective } from './directives/not-found-template.directive';
|
||||
import { SelectFooterTemplateDirective } from './directives/select-footer-template.directive';
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [NgSelectComponent, MultiSelectComponent, SelectLabelTemplateDirective, SelectOptionTemplateDirective, NotFoundTemplateDirective, SelectFooterTemplateDirective],
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
NgSelectModule,
|
||||
],
|
||||
exports:[
|
||||
NgSelectComponent,
|
||||
MultiSelectComponent,
|
||||
SelectLabelTemplateDirective,
|
||||
SelectOptionTemplateDirective,
|
||||
SelectFooterTemplateDirective,
|
||||
NotFoundTemplateDirective
|
||||
]
|
||||
})
|
||||
export class PsNgSelectModule { }//NGSELECT
|
||||
11
projects/poweredsoft/ng-select/src/public-api.ts
Normal file
11
projects/poweredsoft/ng-select/src/public-api.ts
Normal file
@ -0,0 +1,11 @@
|
||||
/*
|
||||
* Public API Surface of ng-select
|
||||
*/
|
||||
|
||||
export * from './lib/ps-ng-select/ps-ng-select.module';
|
||||
export * from './lib/ps-ng-select/ng-select/ng-select.component';
|
||||
export * from './lib/ps-ng-select/multi-select/multi-select.component';
|
||||
export * from './lib/ps-ng-select/directives/select-label-template.directive';
|
||||
export * from './lib/ps-ng-select/directives/select-option-template.directive';
|
||||
export * from './lib/ps-ng-select/directives/select-footer-template.directive';
|
||||
export * from './lib/ps-ng-select/directives/not-found-template.directive';
|
||||
@ -1,17 +1,26 @@
|
||||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||
|
||||
import 'zone.js';
|
||||
import 'zone.js/testing';
|
||||
import 'zone.js/dist/zone';
|
||||
import 'zone.js/dist/zone-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(), {
|
||||
teardown: { destroyAfterEach: false }
|
||||
}
|
||||
platformBrowserDynamicTesting()
|
||||
);
|
||||
// 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",
|
||||
"declarationMap": true,
|
||||
"target": "es2015",
|
||||
"declaration": true,
|
||||
"inlineSources": true,
|
||||
"types": [],
|
||||
6
projects/poweredsoft/ng-select/tsconfig.lib.prod.json
Normal file
6
projects/poweredsoft/ng-select/tsconfig.lib.prod.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"extends": "./tsconfig.lib.json",
|
||||
"angularCompilerOptions": {
|
||||
"enableIvy": false
|
||||
}
|
||||
}
|
||||
17
projects/poweredsoft/ng-select/tslint.json
Normal file
17
projects/poweredsoft/ng-select/tslint.json
Normal file
@ -0,0 +1,17 @@
|
||||
{
|
||||
"extends": "../../../tslint.json",
|
||||
"rules": {
|
||||
"directive-selector": [
|
||||
true,
|
||||
"attribute",
|
||||
"lib",
|
||||
"camelCase"
|
||||
],
|
||||
"component-selector": [
|
||||
true,
|
||||
"element",
|
||||
"lib",
|
||||
"kebab-case"
|
||||
]
|
||||
}
|
||||
}
|
||||
24
projects/poweredsoft/ngx-bootstrap/README.md
Normal file
24
projects/poweredsoft/ngx-bootstrap/README.md
Normal file
@ -0,0 +1,24 @@
|
||||
# NgxBootstrap
|
||||
|
||||
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.9.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name --project ngx-bootstrap` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-bootstrap`.
|
||||
> Note: Don't forget to add `--project ngx-bootstrap` or else it will be added to the default project in your `angular.json` file.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build ngx-bootstrap` to build the project. The build artifacts will be stored in the `dist/` directory.
|
||||
|
||||
## Publishing
|
||||
|
||||
After building your library with `ng build ngx-bootstrap`, go to the dist folder `cd dist/ngx-bootstrap` and run `npm publish`.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test ngx-bootstrap` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## 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).
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
|
||||
"dest": "../../../dist/openharbor/ngx-data-ng-select-ui",
|
||||
"dest": "../../../dist/poweredsoft/ngx-bootstrap",
|
||||
"lib": {
|
||||
"entryFile": "src/public-api.ts"
|
||||
}
|
||||
}
|
||||
}
|
||||
18
projects/poweredsoft/ngx-bootstrap/package.json
Normal file
18
projects/poweredsoft/ngx-bootstrap/package.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "@poweredsoft/ngx-bootstrap",
|
||||
"version": "0.0.15",
|
||||
"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": "^9.1.9",
|
||||
"@angular/core": "^9.1.9",
|
||||
"ngx-bootstrap": "^5.6.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": "^1.10.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,31 +3,29 @@ import {EventEmitter, Injectable, TemplateRef} from '@angular/core';
|
||||
import {IDataSource} from '@poweredsoft/data';
|
||||
import {BsModalService} from 'ngx-bootstrap/modal';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
@Injectable()
|
||||
export class CommandModalService {
|
||||
constructor(private modalService: BsModalService) {
|
||||
}
|
||||
|
||||
spawn<TModel>(options: {
|
||||
dataSource: IDataSource<TModel>
|
||||
command: string,
|
||||
model: TModel,
|
||||
template: TemplateRef<any>,
|
||||
commandTitle?: string,
|
||||
refreshOnSuccess?: boolean,
|
||||
commandText?: string,
|
||||
cancelText?: string,
|
||||
animated?: boolean,
|
||||
btnClass?: string,
|
||||
modalSize?: string,
|
||||
disableValidationSummary?: boolean,
|
||||
backdrop?: boolean,
|
||||
ignoreBackdropClick?: boolean,
|
||||
params?: any,
|
||||
success?: EventEmitter<any>
|
||||
}) {
|
||||
dataSource: IDataSource<TModel>
|
||||
command: string,
|
||||
model: TModel,
|
||||
template: TemplateRef<any>,
|
||||
commandTitle?: string,
|
||||
refreshOnSuccess?: boolean,
|
||||
commandText?: string,
|
||||
cancelText?: string,
|
||||
animated?: boolean,
|
||||
btnClass?: string,
|
||||
modalSize?: string,
|
||||
disableValidationSummary?: boolean,
|
||||
backdrop?: boolean,
|
||||
ignoreBackdropClick?: boolean,
|
||||
params?: any,
|
||||
success?: EventEmitter<any>
|
||||
}) {
|
||||
options.dataSource.resolveCommandModelByName({
|
||||
command: options.command,
|
||||
model: options.model,
|
||||
@ -0,0 +1,24 @@
|
||||
<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,16 +1,17 @@
|
||||
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';
|
||||
import {Subscription} from 'rxjs';
|
||||
import {NgForm} from '@angular/forms';
|
||||
import { Component, OnInit, TemplateRef, OnDestroy, EventEmitter } from '@angular/core';
|
||||
import { IDataSource } from '@poweredsoft/data';
|
||||
import { BsModalRef } from 'ngx-bootstrap/modal';
|
||||
import { finalize} from 'rxjs/operators';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { NgForm } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'bsx-command-modal',
|
||||
selector: 'psbx-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;
|
||||
@ -79,4 +80,9 @@ export class CommandModalComponent implements OnInit, OnDestroy {
|
||||
// you do not want to close on failure.. so just ignore..
|
||||
});
|
||||
}
|
||||
|
||||
attemptSave() {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -4,11 +4,13 @@ import { BsModalService } from 'ngx-bootstrap/modal';
|
||||
import { CommandModalComponent } from '../command-modal/command-modal.component';
|
||||
|
||||
@Directive({
|
||||
selector: '[bsxCommandModal]'
|
||||
selector: '[psbxCommandModal]'
|
||||
})
|
||||
export class CommandModalDirective {
|
||||
|
||||
constructor(private modalService: BsModalService) { }
|
||||
|
||||
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@Input() command: string;
|
||||
@Input() model: any;
|
||||
@ -54,6 +56,7 @@ export class CommandModalDirective {
|
||||
backdrop: this.backdrop === undefined ? true : this.backdrop,
|
||||
ignoreBackdropClick: this.ignoreBackdropClick === undefined ? false : this.ignoreBackdropClick
|
||||
});
|
||||
|
||||
}, error => {
|
||||
|
||||
});
|
||||
@ -0,0 +1,16 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CommandDirective } from './directives/command.directive';
|
||||
import { ConfirmModalModule } from '../confirm-modal/confirm-modal.module';
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [CommandDirective],
|
||||
imports: [
|
||||
CommonModule,
|
||||
ConfirmModalModule
|
||||
],
|
||||
exports:[CommandDirective]
|
||||
})
|
||||
export class CommandModule { }
|
||||
@ -1,15 +1,16 @@
|
||||
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';
|
||||
import { Directive, Input, TemplateRef, HostListener, Output, EventEmitter } from '@angular/core';
|
||||
import { IDataSource } from '@poweredsoft/data';
|
||||
import { finalize } from 'rxjs/operators';
|
||||
import { ConfirmModalService } from '../../confirm-modal/confirm-modal.service';
|
||||
|
||||
@Directive({
|
||||
selector: '[bsxCommand]',
|
||||
standalone: true
|
||||
selector: '[psbxCommand]'
|
||||
})
|
||||
export class CommandDirective {
|
||||
|
||||
constructor(private confirmModalService: ConfirmModalService) { }
|
||||
|
||||
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@Input() command: string;
|
||||
@Input() model: any;
|
||||
@ -50,14 +51,15 @@ export class CommandDirective {
|
||||
this.failure.emit(commandError);
|
||||
}
|
||||
);
|
||||
}, resolveCommandError => {
|
||||
this.failure.emit(resolveCommandError);
|
||||
});
|
||||
}, resolveCommandError => {
|
||||
this.failure.emit(resolveCommandError);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@HostListener('click')
|
||||
wasClicked() {
|
||||
|
||||
if (this.confirm) {
|
||||
this.confirmModalService.confirm({
|
||||
message: this.confirmMessage,
|
||||
@ -73,4 +75,5 @@ 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,20 +1,16 @@
|
||||
import {Component, Inject} from '@angular/core';
|
||||
import {BsModalRef} from 'ngx-bootstrap/modal';
|
||||
import {Observer} from 'rxjs';
|
||||
import {CommonModule} from "@angular/common";
|
||||
import { Component, OnInit, TemplateRef, EventEmitter } from '@angular/core';
|
||||
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
|
||||
import { Observer } from 'rxjs';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'bsx-confirm-modal',
|
||||
selector: 'psbx-confirm-modal',
|
||||
templateUrl: './confirm-modal.component.html',
|
||||
styleUrls: ['./confirm-modal.component.scss'],
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule
|
||||
]
|
||||
styleUrls: ['./confirm-modal.component.scss']
|
||||
})
|
||||
export class ConfirmModalComponent {
|
||||
@Inject(BsModalRef) modelRef!: BsModalRef;
|
||||
export class ConfirmModalComponent implements OnInit {
|
||||
|
||||
|
||||
yesText: string;
|
||||
noText: string;
|
||||
message: string;
|
||||
@ -22,6 +18,14 @@ export class ConfirmModalComponent {
|
||||
noClass: string;
|
||||
observer: Observer<boolean>;
|
||||
|
||||
constructor(private modelRef: BsModalRef) {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
}
|
||||
|
||||
get yesButtonClass() {
|
||||
return `btn btn-${this.yesClass}`
|
||||
}
|
||||
@ -35,10 +39,11 @@ export class ConfirmModalComponent {
|
||||
this.observer.next(true);
|
||||
this.observer.complete();
|
||||
}
|
||||
|
||||
|
||||
decline(): void {
|
||||
this.modelRef.hide();
|
||||
this.observer.next(false);
|
||||
this.observer.complete();
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
import {NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {ConfirmModalComponent} from './confirm-modal-components/confirm-modal/confirm-modal.component';
|
||||
import {ModalModule} from 'ngx-bootstrap/modal';
|
||||
import {ConfirmModalService} from './confirm-modal.service';
|
||||
|
||||
@NgModule({
|
||||
declarations: [ConfirmModalComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
ModalModule.forRoot(),
|
||||
],
|
||||
exports: [],
|
||||
providers: [ConfirmModalService]
|
||||
})
|
||||
export class ConfirmModalModule { }
|
||||
@ -12,14 +12,15 @@ export interface IConfirmModalOptions
|
||||
noText?: string;
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
@Injectable()
|
||||
export class ConfirmModalService {
|
||||
|
||||
constructor(private modalService: BsModalService) { }
|
||||
|
||||
confirm(options: IConfirmModalOptions) : Observable<boolean> {
|
||||
return new Observable<boolean>((o: Observer<boolean>) => {
|
||||
return Observable.create((o: Observer<boolean>) => {
|
||||
|
||||
|
||||
const initialState = {
|
||||
message: options.message,
|
||||
yesText: options.yesText || 'yes',
|
||||
@ -29,7 +30,7 @@ export class ConfirmModalService {
|
||||
observer: o
|
||||
};
|
||||
|
||||
this.modalService.show(ConfirmModalComponent, {
|
||||
const modal = this.modalService.show(ConfirmModalComponent, {
|
||||
initialState: initialState,
|
||||
animated: true,
|
||||
keyboard: false
|
||||
@ -0,0 +1,27 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { DataSourceTextFilterComponent } from './text-filter/data-source-text-filter.component';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { DataSourceNumberFilterComponent } from './number-filter/data-source-number-filter.component';
|
||||
import { DataSourceDatetimeFilterComponent } from './datetime-filter/data-source-datetime-filter.component';
|
||||
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
|
||||
import { PopoverModule } from 'ngx-bootstrap/popover';
|
||||
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
||||
import { TooltipModule } from 'ngx-bootstrap/tooltip';
|
||||
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [DataSourceTextFilterComponent, DataSourceNumberFilterComponent,DataSourceDatetimeFilterComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
BsDatepickerModule.forRoot(),
|
||||
PopoverModule.forRoot(),
|
||||
BsDropdownModule.forRoot(),
|
||||
TooltipModule.forRoot()
|
||||
],
|
||||
exports: [DataSourceTextFilterComponent, DataSourceNumberFilterComponent,DataSourceDatetimeFilterComponent]
|
||||
})
|
||||
export class DataSourceFilterModule { }
|
||||
@ -3,33 +3,33 @@
|
||||
<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>
|
||||
<option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
|
||||
</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}">
|
||||
<input *ngIf="!isRangeFilter"
|
||||
type="text"
|
||||
placeholder="Datepicker"
|
||||
class="form-control"
|
||||
bsDatepicker [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row mt-1 mb-1">
|
||||
<input *ngIf="isRangeFilter" type="text"
|
||||
placeholder="Daterangepicker"
|
||||
class="form-control"
|
||||
bsDaterangepicker [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
|
||||
</div>
|
||||
|
||||
placeholder="Daterangepicker"
|
||||
class="form-control"
|
||||
bsDaterangepicker [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
|
||||
</div>
|
||||
|
||||
<div class="row mt-2">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
</ng-template>
|
||||
|
||||
<!-- <button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterPopUpOpened" [outsideClick]="true" #pop="bs-popover">
|
||||
@ -75,8 +75,8 @@
|
||||
</svg>
|
||||
</button> -->
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<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
|
||||
@ -84,34 +84,34 @@
|
||||
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>
|
||||
</svg>
|
||||
</svg>
|
||||
@ -1,47 +1,37 @@
|
||||
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";
|
||||
import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
|
||||
import { IDataSource, ISimpleFilter, ICompositeFilter, IFilter,FilterType } from '@poweredsoft/data';
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'bsx-ds-datetime-filter',
|
||||
selector: 'psbx-ds-datetime-filter',
|
||||
templateUrl: './data-source-datetime-filter.component.html',
|
||||
styleUrls: ['./data-source-datetime-filter.component.scss'],
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
BsDatepickerModule,
|
||||
TooltipModule,
|
||||
PopoverModule
|
||||
]
|
||||
styleUrls: ['./data-source-datetime-filter.component.scss']
|
||||
})
|
||||
export class DataSourceDatetimeFilterComponent implements OnInit {
|
||||
|
||||
@Input() path: string;
|
||||
@Input() dataSource : IDataSource<any>;
|
||||
@Input() dataSource : IDataSource<any>;
|
||||
@Input() filterType: string;
|
||||
@Output() filterTypeChanged: EventEmitter<string> = new EventEmitter<string>();
|
||||
|
||||
filterPopUpOpened: boolean = false;
|
||||
filterPopUpOpened: boolean = false;
|
||||
isFiltering: boolean;
|
||||
filterValue: Date = null;
|
||||
filterValue: Date = null;
|
||||
filterTypes = [
|
||||
{key:'Equal', value: 'Equal'},
|
||||
{key:'Greater Than', value: 'GreaterThan'},
|
||||
{key:'Less Than', value: 'LessThan'},
|
||||
{key:'Less Than', value: 'LessThan'},
|
||||
{key:'Greater Than Equal', value: 'GreaterThanOrEqual'},
|
||||
{key:'Less Than Equal', value: 'LessThanOrEqual'},
|
||||
{key:'Less Than Equal', value: 'LessThanOrEqual'},
|
||||
{key:'Range', value: FilterType.COMPOSITE }
|
||||
];
|
||||
|
||||
|
||||
bsInlineValue = new Date();
|
||||
bsInlineRangeValue: Date[];
|
||||
maxDate = new Date();
|
||||
|
||||
|
||||
constructor() {
|
||||
this.maxDate.setDate(this.maxDate.getDate() + 7);
|
||||
this.bsInlineRangeValue = [this.bsInlineValue, this.maxDate];
|
||||
@ -55,23 +45,23 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
|
||||
if (!this.filterType)
|
||||
this.filterType = 'Equal';
|
||||
}
|
||||
|
||||
showTooltip(){
|
||||
return "Filter by "+ this.path;
|
||||
}
|
||||
|
||||
clearFilter() {
|
||||
|
||||
this.filterValue = null;
|
||||
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) {
|
||||
this.dataSource.query({
|
||||
page: 1,
|
||||
filters: this.dataSource.filters.filter(t => t != existingFilter)
|
||||
})
|
||||
}
|
||||
|
||||
if (this.isRangeFilter) {
|
||||
|
||||
if (this.isRangeFilter){
|
||||
|
||||
let existingFilter2 = this.dataSource.filters.find(t=> t.type == 'Composite');
|
||||
this.dataSource.query({
|
||||
page: 1,
|
||||
@ -79,28 +69,26 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
applyFilter(){
|
||||
|
||||
this.isFiltering = true;
|
||||
const filters = this.dataSource.filters;
|
||||
let compositeF: any = null;
|
||||
let freshFilter: ISimpleFilter = null;
|
||||
let startDate: Date;
|
||||
let endDate: Date;
|
||||
let startDate:Date;
|
||||
let endDate:Date;
|
||||
|
||||
// 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];
|
||||
endDate = this.filterValue[1];
|
||||
|
||||
compositeF = {
|
||||
type: FilterType.COMPOSITE,
|
||||
filters: [
|
||||
{
|
||||
path: this.path,
|
||||
type: 'GREATERTHANOREQUAL',
|
||||
value: startDate,
|
||||
value: startDate,
|
||||
},
|
||||
{
|
||||
and: true,
|
||||
@ -109,43 +97,45 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
|
||||
value: endDate,
|
||||
}
|
||||
]
|
||||
};
|
||||
} else {
|
||||
}
|
||||
|
||||
}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;
|
||||
return compositeFilter.filters && compositeFilter.filters.length
|
||||
&& compositeFilter[0].path == this.path;
|
||||
} else {
|
||||
return (t as ISimpleFilter).path == this.path;
|
||||
}
|
||||
if (t.type == 'COMPOSITE') {
|
||||
const compositeFilter = t as ICompositeFilter;
|
||||
return compositeFilter.filters && compositeFilter.filters.length
|
||||
&& compositeFilter[0].path == this.path;
|
||||
} else {
|
||||
return (t as ISimpleFilter).path == this.path;
|
||||
}
|
||||
});
|
||||
|
||||
if (existingFilterIndex == -1) {
|
||||
// create it.
|
||||
if(compositeF) {
|
||||
if(compositeF){
|
||||
filters.push(compositeF);
|
||||
} else {
|
||||
}else{
|
||||
filters.push(freshFilter);
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
// replace it.
|
||||
if (compositeF) {
|
||||
if(compositeF){
|
||||
filters[existingFilterIndex] = compositeF;
|
||||
} else {
|
||||
}else{
|
||||
filters[existingFilterIndex] = freshFilter;
|
||||
}
|
||||
}
|
||||
@ -153,6 +143,8 @@ 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 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'}" [popover]="popTemplate" [(isOpen)]="filterIsOpenned" [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,38 +1,35 @@
|
||||
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";
|
||||
import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
|
||||
import { IDataSource,IFilter, ISimpleFilter } from '@poweredsoft/data';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'bsx-ds-number-filter',
|
||||
selector: 'psbx-ds-number-filter',
|
||||
templateUrl: './data-source-number-filter.component.html',
|
||||
styleUrls: ['./data-source-number-filter.component.scss'],
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
TooltipModule,
|
||||
PopoverModule
|
||||
]
|
||||
styleUrls: ['./data-source-number-filter.component.scss']
|
||||
})
|
||||
export class DataSourceNumberFilterComponent {
|
||||
@Input() dataSource : IDataSource<any>;
|
||||
@Input() path: string;
|
||||
|
||||
export class DataSourceNumberFilterComponent implements OnInit {
|
||||
@Input() dataSource : IDataSource<any>;
|
||||
@Input() path:string;
|
||||
|
||||
filterType: string = 'Equal';
|
||||
filterValue: number = 0;
|
||||
filterValue: number = 0;
|
||||
isFiltering: boolean;
|
||||
filterIsOpened: boolean = false;
|
||||
filterTypes = [
|
||||
{key:'Equals', value: 'Equal'},
|
||||
filterTypes = [
|
||||
{key:'Equals', value: 'Equal'},
|
||||
{key:'Greater Than', value: 'GreaterThan'},
|
||||
{key:'Less Than', value: 'LessThan'},
|
||||
{key:'Less Than', value: 'LessThan'},
|
||||
{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() {
|
||||
this.filterValue = 0;
|
||||
@ -57,7 +54,7 @@ export class DataSourceNumberFilterComponent {
|
||||
filters.push(<ISimpleFilter>{
|
||||
and: true,
|
||||
type: this.filterType,
|
||||
path: this.path,
|
||||
path: this.path,
|
||||
value: this.filterValue.toString()
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,107 @@
|
||||
<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 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'}" [popover]="popTemplate" [(isOpen)]="filterIsOpenned" [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,37 +1,36 @@
|
||||
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";
|
||||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { IDataSource} from '@poweredsoft/data';
|
||||
import { ISimpleFilter } from '@poweredsoft/data';
|
||||
import { PopoverDirective } from 'ngx-bootstrap/popover';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'bsx-ds-text-filter',
|
||||
selector: 'psbx-ds-text-filter',
|
||||
templateUrl: './data-source-text-filter.component.html',
|
||||
styleUrls: ['./data-source-text-filter.component.scss'],
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
TooltipModule,
|
||||
PopoverModule,
|
||||
]
|
||||
styleUrls: ['./data-source-text-filter.component.scss']
|
||||
})
|
||||
export class DataSourceTextFilterComponent {
|
||||
@Input() dataSource : IDataSource<any>;
|
||||
@Input() path: string;
|
||||
export class DataSourceTextFilterComponent implements OnInit {
|
||||
|
||||
@Input() dataSource : IDataSource<any>;
|
||||
@Input() path:string;
|
||||
|
||||
filterType: string = 'Contains';
|
||||
filterValue: string = null;
|
||||
filterValue: string = null;
|
||||
isFiltering: boolean;
|
||||
filterIsOpened: boolean = false;
|
||||
|
||||
filterTypes = [
|
||||
{key:'Contains', value: 'Contains'},
|
||||
{key:'Equals', value: 'Equal'},
|
||||
{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 = '';
|
||||
@ -56,7 +55,7 @@ export class DataSourceTextFilterComponent {
|
||||
filters.push(<ISimpleFilter>{
|
||||
and: true,
|
||||
type: this.filterType,
|
||||
path: this.path,
|
||||
path: this.path,
|
||||
value: this.filterValue
|
||||
})
|
||||
}
|
||||
@ -66,7 +65,7 @@ export class DataSourceTextFilterComponent {
|
||||
page: 1
|
||||
})
|
||||
|
||||
if (pop)
|
||||
if (pop)
|
||||
pop.hide();
|
||||
}
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { DataSourceSortingComponent } from './ds-sorting/data-source-sorting.component';
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [DataSourceSortingComponent],
|
||||
imports: [
|
||||
CommonModule
|
||||
],
|
||||
exports:[DataSourceSortingComponent]
|
||||
})
|
||||
export class DataSourceSortingModule { }
|
||||
@ -1,16 +1,16 @@
|
||||
:host span.dropdown-toggle.sort-desc{
|
||||
transform: rotate(180deg);
|
||||
display: inline-block;
|
||||
transform: rotate(180deg);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
:host span{
|
||||
margin: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
:host .not-sorting-state{
|
||||
opacity: 0.3;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
:host .not-sorting-state:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
opacity: 1;
|
||||
}
|
||||
@ -1,18 +1,17 @@
|
||||
import {Component, Input} from '@angular/core';
|
||||
import {IDataSource} from '@poweredsoft/data';
|
||||
import {CommonModule} from "@angular/common";
|
||||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { IDataSource } from '@poweredsoft/data';
|
||||
|
||||
@Component({
|
||||
selector: 'bsx-ds-sorting',
|
||||
selector: 'psbx-ds-sorting',
|
||||
templateUrl: './data-source-sorting.component.html',
|
||||
styleUrls: ['./data-source-sorting.component.scss'],
|
||||
standalone: true,
|
||||
imports: [CommonModule]
|
||||
styleUrls: ['./data-source-sorting.component.scss']
|
||||
})
|
||||
export class DataSourceSortingComponent {
|
||||
@Input() dataSource : IDataSource<any>;
|
||||
@Input() path: string;
|
||||
export class DataSourceSortingComponent implements OnInit {
|
||||
|
||||
@Input() dataSource : IDataSource<any>;
|
||||
@Input() path:string;
|
||||
|
||||
|
||||
get sort() {
|
||||
return this.dataSource.sorts.find(t => t.path == this.path);
|
||||
}
|
||||
@ -25,7 +24,13 @@ export class DataSourceSortingComponent {
|
||||
return !this.isSorting ? true : this.sort.ascending;
|
||||
}
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
sorting(){
|
||||
|
||||
if (!this.isSorting) {
|
||||
this.dataSource.sorts.push({
|
||||
path: this.path,
|
||||
@ -42,4 +47,5 @@ export class DataSourceSortingComponent {
|
||||
page: 1
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,8 +1,9 @@
|
||||
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 {UntypedFormGroup} from '@angular/forms';
|
||||
import { Directive, Input, TemplateRef, HostListener, Output, EventEmitter } 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';
|
||||
|
||||
export interface IModelFormCreateEvent
|
||||
{
|
||||
@ -10,15 +11,14 @@ export interface IModelFormCreateEvent
|
||||
viewModel: any;
|
||||
commandName: string;
|
||||
commandModel: any;
|
||||
formGroup?: UntypedFormGroup;
|
||||
formGroup?: FormGroup;
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[bsxFormGroupCommandModal]',
|
||||
standalone: true
|
||||
selector: '[psbxFormGroupCommandModal]'
|
||||
})
|
||||
export class FormGroupCommandModalDirective {
|
||||
@Inject(BsModalService) private modalService!: BsModalService;
|
||||
|
||||
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@Input() command: string;
|
||||
@ -32,10 +32,14 @@ export class FormGroupCommandModalDirective {
|
||||
@Input() backdrop: boolean;
|
||||
@Input() ignoreBackdropClick: boolean;
|
||||
@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({
|
||||
@ -69,7 +73,7 @@ export class FormGroupCommandModalDirective {
|
||||
commandModel:commandModel,
|
||||
successEmitter: this.success
|
||||
};
|
||||
|
||||
|
||||
this.modalService.show(FormGroupCommandModalComponent, {
|
||||
animated: this.animated === undefined ? true : this.animated,
|
||||
initialState,
|
||||
@ -81,4 +85,5 @@ export class FormGroupCommandModalDirective {
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormGroupCommandModalComponent } from './form-group-command-modal/form-group-command-modal.component';
|
||||
import { FormGroupCommandModalDirective } from './directives/form-group-command-modal.directive';
|
||||
import { ModalModule } from 'ngx-bootstrap/modal';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
ModalModule.forRoot(),
|
||||
ReactiveFormsModule
|
||||
],
|
||||
declarations: [FormGroupCommandModalComponent, FormGroupCommandModalDirective],
|
||||
exports: [FormGroupCommandModalDirective]
|
||||
})
|
||||
export class FormGroupCommandModalModule { }
|
||||
@ -0,0 +1,29 @@
|
||||
|
||||
|
||||
<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,22 +1,19 @@
|
||||
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 {UntypedFormGroup} from '@angular/forms';
|
||||
import {CommonModule} from "@angular/common";
|
||||
import { Component, OnInit, TemplateRef, OnDestroy, EventEmitter } 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';
|
||||
|
||||
@Component({
|
||||
selector: 'bsx-form-group-command-modal',
|
||||
selector: 'ps-form-group-command-modal',
|
||||
templateUrl: './form-group-command-modal.component.html',
|
||||
styleUrls: ['./form-group-command-modal.component.scss'],
|
||||
standalone: true,
|
||||
imports: [CommonModule]
|
||||
styleUrls: ['./form-group-command-modal.component.scss']
|
||||
})
|
||||
export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
|
||||
@Inject(BsModalRef) public modalRef!: BsModalRef;
|
||||
|
||||
modelForm: UntypedFormGroup;
|
||||
|
||||
modelForm: FormGroup;
|
||||
title: string;
|
||||
template: TemplateRef<any>;
|
||||
command: string;
|
||||
@ -26,12 +23,16 @@ export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
|
||||
commandText: string;
|
||||
cancelText: string;
|
||||
errorMessage: string;
|
||||
commandModel: any;
|
||||
commandModel:any;
|
||||
successEmitter: EventEmitter<any>;
|
||||
|
||||
private _notifyMessage: Subscription;
|
||||
private _validationError: Subscription;
|
||||
|
||||
|
||||
|
||||
constructor(public modalRef: BsModalRef) { }
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this._notifyMessage.unsubscribe();
|
||||
this._validationError.unsubscribe();
|
||||
@ -40,10 +41,10 @@ export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
|
||||
ngOnInit(): void {
|
||||
this.errorMessage = null;
|
||||
this._notifyMessage = this.dataSource.notifyMessage$.subscribe(message => {
|
||||
|
||||
|
||||
});
|
||||
|
||||
this._validationError = this.dataSource.validationError$.subscribe(validatorErrors => {
|
||||
|
||||
this._validationError = this.dataSource.validationError$.subscribe(validatorErrors => {
|
||||
let validationSummary = '';
|
||||
Object.getOwnPropertyNames(validatorErrors.errors).forEach(property => {
|
||||
const errors = validatorErrors.errors[property].join('\n');
|
||||
@ -57,11 +58,11 @@ export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
|
||||
// this.errorMessage = null;
|
||||
// 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;
|
||||
// }
|
||||
|
||||
const finalModel = this.modelForm.value;
|
||||
const finalModel = this.modelForm.value;
|
||||
if(this.commandModel.id)
|
||||
{
|
||||
finalModel.id = this.commandModel.id;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user