code cleanup, names refactoring
This commit is contained in:
parent
891a80fc70
commit
37778b6b47
GPG Key ID:
1C16CF05BAF9162D
28
README.md
28
README.md
@ -1,30 +1,4 @@
|
||||
# NgxCdkUi
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.4.
|
||||
|
||||
## Development server
|
||||
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
|
||||
> This project was originally initiated by [Powered Software Inc.](https://poweredsoft.com/) and was forked from the [ngx-ui](https://github.com/PoweredSoft/ngx-ui) Repository
|
||||
|
||||
## License
|
||||
|
||||
|
||||
70
angular.json
70
angular.json
@ -3,7 +3,7 @@
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"ngx-cdk-ui": {
|
||||
"demo": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
@ -125,38 +125,38 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@poweredsoft/ngx-cdk-ui": {
|
||||
"ngx-cdk-ui": {
|
||||
"projectType": "library",
|
||||
"root": "projects/poweredsoft/ngx-cdk-ui",
|
||||
"sourceRoot": "projects/poweredsoft/ngx-cdk-ui/src",
|
||||
"root": "projects/openharbor/ngx-cdk-ui",
|
||||
"sourceRoot": "projects/openharbor/ngx-cdk-ui/src",
|
||||
"prefix": "ps",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-ng-packagr:build",
|
||||
"options": {
|
||||
"tsConfig": "projects/poweredsoft/ngx-cdk-ui/tsconfig.lib.json",
|
||||
"project": "projects/poweredsoft/ngx-cdk-ui/ng-package.json"
|
||||
"tsConfig": "projects/openharbor/ngx-cdk-ui/tsconfig.lib.json",
|
||||
"project": "projects/openharbor/ngx-cdk-ui/ng-package.json"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"tsConfig": "projects/poweredsoft/ngx-cdk-ui/tsconfig.lib.prod.json"
|
||||
"tsConfig": "projects/openharbor/ngx-cdk-ui/tsconfig.lib.prod.json"
|
||||
}
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "projects/poweredsoft/ngx-cdk-ui/src/test.ts",
|
||||
"tsConfig": "projects/poweredsoft/ngx-cdk-ui/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/poweredsoft/ngx-cdk-ui/karma.conf.js"
|
||||
"main": "projects/openharbor/ngx-cdk-ui/src/test.ts",
|
||||
"tsConfig": "projects/openharbor/ngx-cdk-ui/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/openharbor/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"
|
||||
"projects/openharbor/ngx-cdk-ui/tsconfig.lib.json",
|
||||
"projects/openharbor/ngx-cdk-ui/tsconfig.spec.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
@ -165,38 +165,38 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@poweredsoft/ngx-bootstrap": {
|
||||
"ngx-bootstrap": {
|
||||
"projectType": "library",
|
||||
"root": "projects/poweredsoft/ngx-bootstrap",
|
||||
"sourceRoot": "projects/poweredsoft/ngx-bootstrap/src",
|
||||
"root": "projects/openharbor/ngx-bootstrap",
|
||||
"sourceRoot": "projects/openharbor/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"
|
||||
"tsConfig": "projects/openharbor/ngx-bootstrap/tsconfig.lib.json",
|
||||
"project": "projects/openharbor/ngx-bootstrap/ng-package.json"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"tsConfig": "projects/poweredsoft/ngx-bootstrap/tsconfig.lib.prod.json"
|
||||
"tsConfig": "projects/openharbor/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"
|
||||
"main": "projects/openharbor/ngx-bootstrap/src/test.ts",
|
||||
"tsConfig": "projects/openharbor/ngx-bootstrap/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/openharbor/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"
|
||||
"projects/openharbor/ngx-bootstrap/tsconfig.lib.json",
|
||||
"projects/openharbor/ngx-bootstrap/tsconfig.spec.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
@ -205,38 +205,38 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@poweredsoft/ng-select": {
|
||||
"ng-select": {
|
||||
"projectType": "library",
|
||||
"root": "projects/poweredsoft/ng-select",
|
||||
"sourceRoot": "projects/poweredsoft/ng-select/src",
|
||||
"root": "projects/openharbor/ng-select",
|
||||
"sourceRoot": "projects/openharbor/ng-select/src",
|
||||
"prefix": "ps-ng",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-ng-packagr:build",
|
||||
"options": {
|
||||
"tsConfig": "projects/poweredsoft/ng-select/tsconfig.lib.json",
|
||||
"project": "projects/poweredsoft/ng-select/ng-package.json"
|
||||
"tsConfig": "projects/openharbor/ng-select/tsconfig.lib.json",
|
||||
"project": "projects/openharbor/ng-select/ng-package.json"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"tsConfig": "projects/poweredsoft/ng-select/tsconfig.lib.prod.json"
|
||||
"tsConfig": "projects/openharbor/ng-select/tsconfig.lib.prod.json"
|
||||
}
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "projects/poweredsoft/ng-select/src/test.ts",
|
||||
"tsConfig": "projects/poweredsoft/ng-select/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/poweredsoft/ng-select/karma.conf.js"
|
||||
"main": "projects/openharbor/ng-select/src/test.ts",
|
||||
"tsConfig": "projects/openharbor/ng-select/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/openharbor/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"
|
||||
"projects/openharbor/ng-select/tsconfig.lib.json",
|
||||
"projects/openharbor/ng-select/tsconfig.spec.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
@ -245,5 +245,5 @@
|
||||
}
|
||||
}
|
||||
}},
|
||||
"defaultProject": "ngx-cdk-ui"
|
||||
"defaultProject": "demo"
|
||||
}
|
||||
|
||||
14901
package-lock.json
generated
14901
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "ngx-ui",
|
||||
"name": "demo",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
@ -9,7 +9,7 @@
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e",
|
||||
"clean": "rimraf dist",
|
||||
"start:app": "wait-on dist/poweredsoft/ngx-cdk-ui/fesm5 && dist/poweredsoft/ngx-bootstrap/fesm5 && ng serve --poll 2000",
|
||||
"start:app": "wait-on dist/openharbor/ngx-cdk-ui/fesm5 && dist/poweredsoft/ngx-bootstrap/fesm5 && ng serve --poll 2000",
|
||||
"watch:lib": "ng build @poweredsoft/ngx-cdk-ui --watch && ng build @poweredsoft/ngx-bootstrap --watch",
|
||||
"watch:all": "npm run clean && run-p watch:lib start:app"
|
||||
},
|
||||
@ -65,5 +65,6 @@
|
||||
"tslint": "~6.1.0",
|
||||
"typescript": "~3.8.3",
|
||||
"wait-on": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
|
||||
"dest": "../../../dist/poweredsoft/ngx-bootstrap",
|
||||
"dest": "../../../dist/openharbor/ngx-data-bootstrap-ui",
|
||||
"lib": {
|
||||
"entryFile": "src/public-api.ts"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@poweredsoft/ngx-bootstrap",
|
||||
"name": "@openharbor/ngx-data-bootstrap-ui",
|
||||
"version": "0.0.15",
|
||||
"description": "an internal use library for handling data sources grid filtering sorting, add commands etc",
|
||||
"keywords": [
|
||||
@ -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 { }
|
||||
@ -9,23 +9,23 @@ export class CommandModalService {
|
||||
}
|
||||
|
||||
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,23 @@
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title pull-left">{{ title }}</h4>
|
||||
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<ng-container [ngTemplateOutlet]="template"
|
||||
[ngTemplateOutletContext]="{ $implicit: commandModel, loading: loading, dataSource: dataSource }"></ng-container>
|
||||
<div *ngIf="hasError && !disableValidationSummary" class="alert alert-danger mt-2" style="white-space: pre-wrap">{{validationMessage}}</div>
|
||||
<div *ngIf="hasErrorMessage" class="alert alert-danger mt-2" style="white-space: pre-wrap">{{errorMessage}}</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-light" (click)="modalRef.hide()"
|
||||
[disabled]="loading">{{ cancelText }}</button>
|
||||
<button type="button" class="btn btn-{{btnClass}}" [disabled]="loading" (click)="onSubmit()">{{ commandText }}</button>
|
||||
<br>
|
||||
|
||||
<div class="progress" style="width: 100%" *ngIf="loading">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100"
|
||||
aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,3 @@
|
||||
.field-error{
|
||||
border: 1px solid red;
|
||||
}
|
||||
@ -1,17 +1,16 @@
|
||||
import { Component, OnInit, TemplateRef, OnDestroy, EventEmitter } from '@angular/core';
|
||||
import { 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, 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';
|
||||
|
||||
@Component({
|
||||
selector: 'psbx-command-modal',
|
||||
selector: 'bsx-command-modal',
|
||||
templateUrl: './command-modal.component.html',
|
||||
styleUrls: ['./command-modal.component.scss']
|
||||
})
|
||||
export class CommandModalComponent implements OnInit, OnDestroy {
|
||||
|
||||
title: string;
|
||||
template: TemplateRef<any>;
|
||||
command: string;
|
||||
@ -80,9 +79,4 @@ export class CommandModalComponent implements OnInit, OnDestroy {
|
||||
// you do not want to close on failure.. so just ignore..
|
||||
});
|
||||
}
|
||||
|
||||
attemptSave() {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -4,13 +4,11 @@ import { BsModalService } from 'ngx-bootstrap/modal';
|
||||
import { CommandModalComponent } from '../command-modal/command-modal.component';
|
||||
|
||||
@Directive({
|
||||
selector: '[psbxCommandModal]'
|
||||
selector: '[bsxCommandModal]'
|
||||
})
|
||||
export class CommandModalDirective {
|
||||
|
||||
constructor(private modalService: BsModalService) { }
|
||||
|
||||
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@Input() command: string;
|
||||
@Input() model: any;
|
||||
@ -56,7 +54,6 @@ export class CommandModalDirective {
|
||||
backdrop: this.backdrop === undefined ? true : this.backdrop,
|
||||
ignoreBackdropClick: this.ignoreBackdropClick === undefined ? false : this.ignoreBackdropClick
|
||||
});
|
||||
|
||||
}, error => {
|
||||
|
||||
});
|
||||
@ -0,0 +1,15 @@
|
||||
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,16 +1,14 @@
|
||||
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';
|
||||
import {Directive, EventEmitter, HostListener, Input, Output} from '@angular/core';
|
||||
import {IDataSource} from '@poweredsoft/data';
|
||||
import {finalize} from 'rxjs/operators';
|
||||
import {ConfirmModalService} from '../../confirm-modal/confirm-modal.service';
|
||||
|
||||
@Directive({
|
||||
selector: '[psbxCommand]'
|
||||
selector: '[bsxCommand]'
|
||||
})
|
||||
export class CommandDirective {
|
||||
|
||||
constructor(private confirmModalService: ConfirmModalService) { }
|
||||
|
||||
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@Input() command: string;
|
||||
@Input() model: any;
|
||||
@ -51,9 +49,9 @@ export class CommandDirective {
|
||||
this.failure.emit(commandError);
|
||||
}
|
||||
);
|
||||
}, resolveCommandError => {
|
||||
this.failure.emit(resolveCommandError);
|
||||
});
|
||||
}, resolveCommandError => {
|
||||
this.failure.emit(resolveCommandError);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
<div class="modal-body text-center">
|
||||
<p>{{ message }}</p>
|
||||
<button type="button" [ngClass]="yesButtonClass" (click)="confirm()">{{ yesText }}</button>
|
||||
|
||||
<button type="button" [ngClass]="noButtonClass" (click)="decline()">{{ noText }}</button>
|
||||
</div>
|
||||
@ -1,16 +1,15 @@
|
||||
import { Component, OnInit, TemplateRef, EventEmitter } from '@angular/core';
|
||||
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
|
||||
import { Observer } from 'rxjs';
|
||||
import {Component, Inject, OnInit} from '@angular/core';
|
||||
import {BsModalRef} from 'ngx-bootstrap/modal';
|
||||
import {Observer} from 'rxjs';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'psbx-confirm-modal',
|
||||
selector: 'bsx-confirm-modal',
|
||||
templateUrl: './confirm-modal.component.html',
|
||||
styleUrls: ['./confirm-modal.component.scss']
|
||||
})
|
||||
export class ConfirmModalComponent implements OnInit {
|
||||
|
||||
|
||||
export class ConfirmModalComponent {
|
||||
@Inject(BsModalRef) modelRef!: BsModalRef;
|
||||
yesText: string;
|
||||
noText: string;
|
||||
message: string;
|
||||
@ -18,14 +17,6 @@ export class ConfirmModalComponent implements OnInit {
|
||||
noClass: string;
|
||||
observer: Observer<boolean>;
|
||||
|
||||
constructor(private modelRef: BsModalRef) {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
}
|
||||
|
||||
get yesButtonClass() {
|
||||
return `btn btn-${this.yesClass}`
|
||||
}
|
||||
@ -39,11 +30,10 @@ export class ConfirmModalComponent implements OnInit {
|
||||
this.observer.next(true);
|
||||
this.observer.complete();
|
||||
}
|
||||
|
||||
|
||||
decline(): void {
|
||||
this.modelRef.hide();
|
||||
this.observer.next(false);
|
||||
this.observer.complete();
|
||||
}
|
||||
|
||||
}
|
||||
@ -14,13 +14,10 @@ export interface IConfirmModalOptions
|
||||
|
||||
@Injectable()
|
||||
export class ConfirmModalService {
|
||||
|
||||
constructor(private modalService: BsModalService) { }
|
||||
|
||||
confirm(options: IConfirmModalOptions) : Observable<boolean> {
|
||||
return Observable.create((o: Observer<boolean>) => {
|
||||
|
||||
|
||||
return new Observable<boolean>((o: Observer<boolean>) => {
|
||||
const initialState = {
|
||||
message: options.message,
|
||||
yesText: options.yesText || 'yes',
|
||||
@ -30,7 +27,7 @@ export class ConfirmModalService {
|
||||
observer: o
|
||||
};
|
||||
|
||||
const modal = this.modalService.show(ConfirmModalComponent, {
|
||||
this.modalService.show(ConfirmModalComponent, {
|
||||
initialState: initialState,
|
||||
animated: true,
|
||||
keyboard: false
|
||||
@ -0,0 +1,24 @@
|
||||
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>
|
||||
<div class="row mt-1 mb-1">
|
||||
<input *ngIf="!isRangeFilter"
|
||||
type="text"
|
||||
placeholder="Datepicker"
|
||||
class="form-control"
|
||||
bsDatepicker [(ngModel)]="filterValue" [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 *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 version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;" xml:space="preserve" fill-opacity="0.5" [tooltip]="showTooltip()" [tooltipEnable]="!filterPopUpOpened" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}" [popover]="popTemplate" [(isOpen)]="filterPopUpOpened" [outsideClick]="true" #pop="bs-popover">
|
||||
<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" 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 @@ viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;"
|
||||
V263.612l165.018-148.48c3.608-3.247,5.662-7.878,5.649-12.732V17.067C477.871,7.641,470.23,0,460.804,0z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
@ -1,37 +1,34 @@
|
||||
import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
|
||||
import { IDataSource, ISimpleFilter, ICompositeFilter, IFilter,FilterType } from '@poweredsoft/data';
|
||||
|
||||
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
|
||||
import {FilterType, ICompositeFilter, IDataSource, ISimpleFilter} from '@poweredsoft/data';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'psbx-ds-datetime-filter',
|
||||
selector: 'bsx-ds-datetime-filter',
|
||||
templateUrl: './data-source-datetime-filter.component.html',
|
||||
styleUrls: ['./data-source-datetime-filter.component.scss']
|
||||
})
|
||||
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];
|
||||
@ -45,23 +42,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,
|
||||
@ -69,26 +66,28 @@ 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,
|
||||
@ -97,45 +96,43 @@ 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;
|
||||
}
|
||||
}
|
||||
@ -143,8 +140,6 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
|
||||
this.dataSource.query({
|
||||
filters: filters,
|
||||
page: 1
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,62 @@
|
||||
<ng-template #popTemplate>
|
||||
<form (ngSubmit)="applyFilter()" novalidate>
|
||||
<div class="container" >
|
||||
<div class="row">
|
||||
<select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType" [ngModelOptions]="{standalone: true}">
|
||||
<option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="row mt-1 mb-1">
|
||||
<input type="number" class="form-control" placeholder="Value" aria-label="number"
|
||||
aria-describedby="basic-addon1" [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary mr-1">Filter</button>
|
||||
<button type="button" class="btn btn-warning" *ngIf="!isFiltering" (click)="pop.hide()">Hide</button>
|
||||
<button type="button" class="btn btn-dark" *ngIf="isFiltering" (click)="clearFilter()">Clear</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</ng-template>
|
||||
|
||||
<svg 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]="!filterIsOpened" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}" [popover]="popTemplate" [(isOpen)]="filterIsOpened" [outsideClick]="true" #pop="bs-popover">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c-0.004,4.842,2.05,9.458,5.649,12.698l165.018,148.514V460.8
|
||||
c-0.004,9.426,7.633,17.07,17.059,17.075c2.651,0.001,5.266-0.615,7.637-1.8l102.4-51.2c5.786-2.891,9.441-8.806,9.438-15.275
|
||||
V263.612l165.018-148.48c3.608-3.247,5.662-7.878,5.649-12.732V17.067C477.871,7.641,470.23,0,460.804,0z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
@ -1,35 +1,27 @@
|
||||
import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
|
||||
import { IDataSource,IFilter, ISimpleFilter } from '@poweredsoft/data';
|
||||
import {Component, Input} from '@angular/core';
|
||||
import {IDataSource, ISimpleFilter} from '@poweredsoft/data';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'psbx-ds-number-filter',
|
||||
selector: 'bsx-ds-number-filter',
|
||||
templateUrl: './data-source-number-filter.component.html',
|
||||
styleUrls: ['./data-source-number-filter.component.scss']
|
||||
})
|
||||
export class DataSourceNumberFilterComponent implements OnInit {
|
||||
@Input() dataSource : IDataSource<any>;
|
||||
@Input() path:string;
|
||||
|
||||
export class DataSourceNumberFilterComponent {
|
||||
@Input() dataSource : IDataSource<any>;
|
||||
@Input() path: string;
|
||||
|
||||
filterType: string = 'Equal';
|
||||
filterValue: number = 0;
|
||||
filterValue: number = 0;
|
||||
isFiltering: boolean;
|
||||
filterTypes = [
|
||||
{key:'Equals', value: 'Equal'},
|
||||
filterIsOpened: boolean = false;
|
||||
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;
|
||||
@ -54,7 +46,7 @@ export class DataSourceNumberFilterComponent implements OnInit {
|
||||
filters.push(<ISimpleFilter>{
|
||||
and: true,
|
||||
type: this.filterType,
|
||||
path: this.path,
|
||||
path: this.path,
|
||||
value: this.filterValue.toString()
|
||||
})
|
||||
}
|
||||
@ -1,25 +1,24 @@
|
||||
<ng-template #popTemplate>
|
||||
<form (ngSubmit)="applyFilter(pop)" novalidate>
|
||||
|
||||
<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>
|
||||
<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">
|
||||
@ -66,7 +65,7 @@
|
||||
</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">
|
||||
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]="!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
|
||||
@ -74,34 +73,34 @@ viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;"
|
||||
V263.612l165.018-148.48c3.608-3.247,5.662-7.878,5.649-12.732V17.067C477.871,7.641,470.23,0,460.804,0z"/>
|
||||
</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,36 +1,27 @@
|
||||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { IDataSource} from '@poweredsoft/data';
|
||||
import { ISimpleFilter } from '@poweredsoft/data';
|
||||
import { PopoverDirective } from 'ngx-bootstrap/popover';
|
||||
|
||||
import {Component, Input} from '@angular/core';
|
||||
import {IDataSource, ISimpleFilter} from '@poweredsoft/data';
|
||||
import {PopoverDirective} from 'ngx-bootstrap/popover';
|
||||
|
||||
@Component({
|
||||
selector: 'psbx-ds-text-filter',
|
||||
selector: 'bsx-ds-text-filter',
|
||||
templateUrl: './data-source-text-filter.component.html',
|
||||
styleUrls: ['./data-source-text-filter.component.scss']
|
||||
})
|
||||
export class DataSourceTextFilterComponent implements OnInit {
|
||||
export class DataSourceTextFilterComponent {
|
||||
@Input() dataSource : IDataSource<any>;
|
||||
@Input() path: string;
|
||||
|
||||
@Input() dataSource : IDataSource<any>;
|
||||
@Input() path:string;
|
||||
|
||||
filterType: string = 'Contains';
|
||||
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 = '';
|
||||
@ -55,7 +46,7 @@ export class DataSourceTextFilterComponent implements OnInit {
|
||||
filters.push(<ISimpleFilter>{
|
||||
and: true,
|
||||
type: this.filterType,
|
||||
path: this.path,
|
||||
path: this.path,
|
||||
value: this.filterValue
|
||||
})
|
||||
}
|
||||
@ -65,7 +56,7 @@ export class DataSourceTextFilterComponent implements OnInit {
|
||||
page: 1
|
||||
})
|
||||
|
||||
if (pop)
|
||||
if (pop)
|
||||
pop.hide();
|
||||
}
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
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,17 +1,15 @@
|
||||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { IDataSource } from '@poweredsoft/data';
|
||||
import {Component, Input} from '@angular/core';
|
||||
import {IDataSource} from '@poweredsoft/data';
|
||||
|
||||
@Component({
|
||||
selector: 'psbx-ds-sorting',
|
||||
selector: 'bsx-ds-sorting',
|
||||
templateUrl: './data-source-sorting.component.html',
|
||||
styleUrls: ['./data-source-sorting.component.scss']
|
||||
})
|
||||
export class DataSourceSortingComponent implements OnInit {
|
||||
|
||||
export class DataSourceSortingComponent {
|
||||
@Input() dataSource : IDataSource<any>;
|
||||
@Input() path:string;
|
||||
|
||||
|
||||
@Input() path: string;
|
||||
|
||||
get sort() {
|
||||
return this.dataSource.sorts.find(t => t.path == this.path);
|
||||
}
|
||||
@ -24,13 +22,7 @@ export class DataSourceSortingComponent implements OnInit {
|
||||
return !this.isSorting ? true : this.sort.ascending;
|
||||
}
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
sorting(){
|
||||
|
||||
if (!this.isSorting) {
|
||||
this.dataSource.sorts.push({
|
||||
path: this.path,
|
||||
@ -47,5 +39,4 @@ export class DataSourceSortingComponent implements OnInit {
|
||||
page: 1
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,9 +1,8 @@
|
||||
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';
|
||||
import {Directive, EventEmitter, HostListener, Inject, Input, Output, TemplateRef} from '@angular/core';
|
||||
import {IDataSource} from '@poweredsoft/data';
|
||||
import {BsModalService} from 'ngx-bootstrap/modal';
|
||||
import {FormGroupCommandModalComponent} from '../form-group-command-modal/form-group-command-modal.component';
|
||||
import {FormGroup} from '@angular/forms';
|
||||
|
||||
export interface IModelFormCreateEvent
|
||||
{
|
||||
@ -15,10 +14,10 @@ export interface IModelFormCreateEvent
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[psbxFormGroupCommandModal]'
|
||||
selector: '[bsxFormGroupCommandModal]'
|
||||
})
|
||||
export class FormGroupCommandModalDirective {
|
||||
|
||||
@Inject(BsModalService) private modalService!: BsModalService;
|
||||
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@Input() command: string;
|
||||
@ -32,14 +31,10 @@ 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({
|
||||
@ -73,7 +68,7 @@ export class FormGroupCommandModalDirective {
|
||||
commandModel:commandModel,
|
||||
successEmitter: this.success
|
||||
};
|
||||
|
||||
|
||||
this.modalService.show(FormGroupCommandModalComponent, {
|
||||
animated: this.animated === undefined ? true : this.animated,
|
||||
initialState,
|
||||
@ -85,5 +80,4 @@ export class FormGroupCommandModalDirective {
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
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,25 @@
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title pull-left">{{ title }}</h4>
|
||||
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="model-body">
|
||||
<ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ $implicit: modelForm, loading: loading }">
|
||||
</ng-container>
|
||||
|
||||
<div *ngIf="errorMessage" class="alert alert-danger mt-2" style="white-space: pre-wrap">{{ errorMessage }}</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-light" (click)="modalRef.hide()"
|
||||
[disabled]="loading">{{ cancelText }}</button>
|
||||
<button type="button" class="btn btn-primary" (click)="attemptSave()" [disabled]="loading">{{commandText}}</button>
|
||||
<br>
|
||||
|
||||
<div class="progress" style="width: 100%" *ngIf="loading">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100"
|
||||
aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,17 +1,17 @@
|
||||
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';
|
||||
import {Component, EventEmitter, Inject, OnDestroy, OnInit, TemplateRef} from '@angular/core';
|
||||
import {BsModalRef} from 'ngx-bootstrap/modal';
|
||||
import {IDataSource} from '@poweredsoft/data';
|
||||
import {finalize} from 'rxjs/operators';
|
||||
import {Subscription} from 'rxjs'
|
||||
import {FormGroup} from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'ps-form-group-command-modal',
|
||||
selector: 'bsx-form-group-command-modal',
|
||||
templateUrl: './form-group-command-modal.component.html',
|
||||
styleUrls: ['./form-group-command-modal.component.scss']
|
||||
})
|
||||
export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
|
||||
|
||||
@Inject(BsModalRef) public modalRef!: BsModalRef;
|
||||
|
||||
modelForm: FormGroup;
|
||||
title: string;
|
||||
@ -23,16 +23,12 @@ 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();
|
||||
@ -41,10 +37,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');
|
||||
@ -58,11 +54,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;
|
||||
@ -1,20 +1,20 @@
|
||||
import { Component, OnInit, Input, OnDestroy, ChangeDetectorRef } from '@angular/core';
|
||||
import { IDataSource } from '@poweredsoft/data';
|
||||
import { Subscription } from 'rxjs';
|
||||
import {ChangeDetectorRef, Component, Inject, Input, OnDestroy, OnInit} from '@angular/core';
|
||||
import {IDataSource} from '@poweredsoft/data';
|
||||
import {Subscription} from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'psbx-ds-pagination',
|
||||
selector: 'bsx-ds-pagination',
|
||||
templateUrl: './data-source-pagination.component.html',
|
||||
styleUrls: ['./data-source-pagination.component.scss']
|
||||
})
|
||||
export class DataSourcePaginationComponent implements OnInit, OnDestroy {
|
||||
|
||||
@Inject(ChangeDetectorRef) private cdf!: ChangeDetectorRef;
|
||||
|
||||
@Input() dataSource: IDataSource<any>
|
||||
|
||||
numberOfItems: number = 0;
|
||||
private dataSubscription: Subscription;
|
||||
|
||||
constructor(private cdf: ChangeDetectorRef) { }
|
||||
ngOnDestroy(): void {
|
||||
this.dataSubscription.unsubscribe();
|
||||
}
|
||||
@ -31,5 +31,4 @@ export class DataSourcePaginationComponent implements OnInit, OnDestroy {
|
||||
this.numberOfItems = 0;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import {NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {DataSourcePaginationComponent} from './data-source-pagination/data-source-pagination.component';
|
||||
import {PaginationModule as ValorPaginationModule} from 'ngx-bootstrap/pagination';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [DataSourcePaginationComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
ValorPaginationModule.forRoot(),
|
||||
FormsModule
|
||||
],
|
||||
exports: [DataSourcePaginationComponent]
|
||||
})
|
||||
export class PaginationModule { }
|
||||
@ -0,0 +1,13 @@
|
||||
import {NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {SpinnerComponent} from './spinner/spinner.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [SpinnerComponent],
|
||||
imports: [
|
||||
CommonModule
|
||||
],
|
||||
exports:[SpinnerComponent]
|
||||
})
|
||||
export class SpinnerModule { }
|
||||
@ -0,0 +1,10 @@
|
||||
<div class="center">
|
||||
<div class="spinner-grow text-primary" role="status">
|
||||
</div>
|
||||
<div class="spinner-grow text-secondary" role="status">
|
||||
</div>
|
||||
<div class="spinner-grow text-primary" role="status">
|
||||
</div>
|
||||
<div class="spinner-grow text-secondary" role="status">
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,6 @@
|
||||
.center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'bsx-spinner',
|
||||
templateUrl: './spinner.component.html',
|
||||
styleUrls: ['./spinner.component.scss']
|
||||
})
|
||||
export class SpinnerComponent {
|
||||
|
||||
}
|
||||
@ -7,7 +7,6 @@ export * from './lib/command-modal/command-modal.service';
|
||||
export * from './lib/command-modal/directives/command-modal.directive';
|
||||
export * from './lib/form-group-command-modal/form-group-command-modal.module';
|
||||
export * from './lib/form-group-command-modal/directives/form-group-command-modal.directive';
|
||||
export * from './lib/pagination/Pagination.module';
|
||||
export * from './lib/pagination/data-source-pagination/data-source-pagination.component';
|
||||
export * from './lib/confirm-modal/confirm-modal.module';
|
||||
export * from './lib/confirm-modal/confirm-modal.service';
|
||||
@ -21,3 +20,4 @@ export * from './lib/data-source-sorting/data-source-sorting.module';
|
||||
export * from './lib/data-source-sorting/ds-sorting/data-source-sorting.component';
|
||||
export * from './lib/command/command.module';
|
||||
export * from './lib/command/directives/command.directive';
|
||||
export * from './lib/pagination/pagination.module';
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
|
||||
"dest": "../../../dist/poweredsoft/ngx-cdk-ui",
|
||||
"dest": "../../../dist/openharbor/ngx-data-cdk-ui",
|
||||
"lib": {
|
||||
"entryFile": "src/public-api.ts"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@poweredsoft/ngx-cdk-ui",
|
||||
"name": "@openharbor/ngx-data-cdk-ui",
|
||||
"version": "0.0.18",
|
||||
"peerDependencies": {
|
||||
"@angular/common": "^9.1.9",
|
||||
@ -9,4 +9,4 @@
|
||||
"dependencies": {
|
||||
"tslib": "^1.10.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
import {NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {DataGridComponent} from './data-grid/data-grid.component';
|
||||
import {DataGridColDirective} from './directives/data-grid-col.directive';
|
||||
import {DataGridColHeaderDirective} from './directives/data-grid-col-header.directive';
|
||||
import {DataGridCellDirective} from './directives/data-grid-cell.directive';
|
||||
import {DataGridFooterDirective} from './directives/data-grid-footer.directive';
|
||||
import {DataGridHeaderDirective} from './directives/data-grid-header.directive';
|
||||
import {DataGridLoaderDirective} from './directives/data-grid-loader.directive';
|
||||
import {DataGridCellFilterDirective} from './directives/data-grid-cell-filter.directive';
|
||||
import {DataGridColSortDirective} from './directives/data-grid-col-sort.directive';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,
|
||||
DataGridCellDirective, DataGridFooterDirective, DataGridHeaderDirective,
|
||||
DataGridLoaderDirective, DataGridCellFilterDirective, DataGridColSortDirective,
|
||||
|
||||
],
|
||||
imports: [
|
||||
CommonModule
|
||||
],
|
||||
exports: [
|
||||
DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,
|
||||
DataGridCellDirective,DataGridFooterDirective, DataGridHeaderDirective,
|
||||
DataGridLoaderDirective,DataGridCellFilterDirective,DataGridColSortDirective]
|
||||
})
|
||||
export class DataGridModule { }
|
||||
@ -0,0 +1,77 @@
|
||||
<ng-container *ngIf="loading" [ngTemplateOutlet]="loadingTemplate"></ng-container>
|
||||
|
||||
<table [ngClass]="tableClasses">
|
||||
<thead [ngClass]="headerClasses">
|
||||
<tr *ngFor="let header of gridHeaders" >
|
||||
<th [attr.colspan]="columns.length">
|
||||
<ng-container [ngTemplateOutlet]="header.template"></ng-container>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th *ngFor="let column of columns">
|
||||
<div class="flex-container">
|
||||
<div class="flex-item">
|
||||
<ng-container *ngIf="hasHeaderTemplate(column)" >
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="getColumnHeaderTemplate(column)"
|
||||
></ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<div class="flex-item">
|
||||
|
||||
<ng-container *ngIf="hasSortingTemplate(column)">
|
||||
<ng-container [ngTemplateOutlet]="getSortingTemplate(column)"></ng-container>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="hasFilterTemplate(column)">
|
||||
<ng-container [ngTemplateOutlet]="getFilterTemplate(column)"></ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody *ngIf="!noData else noResultTemplate">
|
||||
<tr *ngFor="let rowModel of latestResult.data; let i = index; let first = first; let last = last; let odd = odd">
|
||||
<td *ngFor="let column of columns">
|
||||
<ng-container *ngIf="hasCellTemplate(column)">
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="getColumnCellTemplate(column)"
|
||||
[ngTemplateOutletContext]="{
|
||||
$implicit: rowModel,
|
||||
column: column,
|
||||
rowIndex: i,
|
||||
first: first,
|
||||
last: last,
|
||||
odd: odd
|
||||
}"
|
||||
></ng-container>
|
||||
</ng-container>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td *ngFor="let footer of gridFooters" [attr.colspan]="columns.length">
|
||||
<ng-container [ngTemplateOutlet]="footer.template"></ng-container>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
<ng-template #loadingTemplate>
|
||||
<ng-container *ngFor="let loader of loaders">
|
||||
<ng-container [ngTemplateOutlet]="loader.template"></ng-container>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
<ng-template #noResultTemplate>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td [attr.colspan]="columns.length">
|
||||
<p style="text-align: center;">{{ noRecordsDisplayText }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</ng-template>
|
||||
@ -1,10 +1,12 @@
|
||||
:host .flex-container{
|
||||
:host {
|
||||
.flex-container{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
:host .flex-item{
|
||||
.flex-item{
|
||||
margin-right: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,28 +1,37 @@
|
||||
import { Component, OnInit, ContentChildren, QueryList, Input, Output, EventEmitter, ContentChild, ChangeDetectorRef, OnDestroy } from '@angular/core';
|
||||
import { IQueryExecutionResult, IQueryExecutionGroupResult, IDataSource } from '@poweredsoft/data';
|
||||
import { DataGridColDirective } from '../directives/data-grid-col.directive';
|
||||
import { DataGridHeaderDirective } from '../directives/data-grid-header.directive';
|
||||
import { DataGridFooterDirective } from '../directives/data-grid-footer.directive';
|
||||
import { DataGridLoaderDirective } from '../directives/data-grid-loader.directive';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { DataGridCellFilterDirective } from '../directives/data-grid-cell-filter.directive';
|
||||
import { DataGridColSortDirective } from '../directives/data-grid-col-sort.directive';
|
||||
import {
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
ContentChildren,
|
||||
EventEmitter, Inject,
|
||||
Input,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
Output,
|
||||
QueryList
|
||||
} from '@angular/core';
|
||||
import {IDataSource, IQueryExecutionGroupResult, IQueryExecutionResult} from '@poweredsoft/data';
|
||||
import {DataGridColDirective} from '../directives/data-grid-col.directive';
|
||||
import {DataGridHeaderDirective} from '../directives/data-grid-header.directive';
|
||||
import {DataGridFooterDirective} from '../directives/data-grid-footer.directive';
|
||||
import {DataGridLoaderDirective} from '../directives/data-grid-loader.directive';
|
||||
import {Subscription} from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'ps-data-grid',
|
||||
selector: 'cdk-data-grid',
|
||||
templateUrl: './data-grid.component.html',
|
||||
styleUrls: ['./data-grid.component.scss']
|
||||
})
|
||||
export class DataGridComponent implements OnInit, OnDestroy {
|
||||
|
||||
latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
|
||||
loading:boolean;
|
||||
@Inject(ChangeDetectorRef) private cdr!: ChangeDetectorRef;
|
||||
|
||||
@ContentChildren(DataGridColDirective) columnDefinitions: QueryList<DataGridColDirective>;
|
||||
@ContentChildren(DataGridHeaderDirective) gridHeaders: QueryList<DataGridHeaderDirective>;
|
||||
@ContentChildren(DataGridFooterDirective) gridFooters: QueryList<DataGridFooterDirective>;
|
||||
@ContentChildren(DataGridLoaderDirective) loaders: QueryList<DataGridLoaderDirective>;
|
||||
|
||||
|
||||
latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any>;
|
||||
loading: boolean = false;
|
||||
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@Input() tableClasses: any;
|
||||
@Input() headerClasses: any;
|
||||
@ -32,8 +41,6 @@ export class DataGridComponent implements OnInit, OnDestroy {
|
||||
private _dataSubscription: Subscription;
|
||||
private _loadingSubscription: Subscription;
|
||||
|
||||
_fiters:any
|
||||
|
||||
@Input() set columns(value: string[]) {
|
||||
this._columns = value;
|
||||
this.columnsChange.emit(value);
|
||||
@ -41,31 +48,24 @@ export class DataGridComponent implements OnInit, OnDestroy {
|
||||
|
||||
get columns() {
|
||||
return this._columns;
|
||||
}
|
||||
}
|
||||
|
||||
@Output() columnsChange:EventEmitter<string []> = new EventEmitter<string []>();
|
||||
|
||||
|
||||
@Output() columnsChange: EventEmitter<string []> = new EventEmitter<string []>();
|
||||
|
||||
get noData() {
|
||||
return !this.latestResult || this.latestResult.totalRecords == 0;
|
||||
return !this.latestResult || this.latestResult.totalRecords == 0;
|
||||
}
|
||||
|
||||
get noRecordsDisplayText() {
|
||||
return this.noRecordsText || 'No records';
|
||||
}
|
||||
|
||||
constructor(private cdr: ChangeDetectorRef) {
|
||||
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this._dataSubscription.unsubscribe();
|
||||
this._loadingSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
this._dataSubscription = this.dataSource.data$.subscribe(newData => {
|
||||
this.latestResult = newData;
|
||||
});
|
||||
@ -74,31 +74,29 @@ export class DataGridComponent implements OnInit, OnDestroy {
|
||||
this.loading = isLoading;
|
||||
this.cdr.detectChanges();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
getSortingTemplate(columnName){
|
||||
getSortingTemplate(columnName: string){
|
||||
const ret = this.getColumn(columnName);
|
||||
if (ret && ret.sortTemplate)
|
||||
if (ret && ret.sortTemplate)
|
||||
return ret.sortTemplate.template;
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
getFilterTemplate(columnName){
|
||||
getFilterTemplate(columnName: string){
|
||||
const ret = this.getColumn(columnName);
|
||||
if (ret && ret.filterTemplate)
|
||||
if (ret && ret.filterTemplate)
|
||||
return ret.filterTemplate.template;
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
getColumn(columnName: string) {
|
||||
|
||||
if (!this.columnDefinitions)
|
||||
return null;
|
||||
|
||||
const ret = this.columnDefinitions.find(t =>
|
||||
const ret = this.columnDefinitions.find(t =>
|
||||
{
|
||||
return t.columnName == columnName;
|
||||
});
|
||||
@ -109,35 +107,33 @@ export class DataGridComponent implements OnInit, OnDestroy {
|
||||
|
||||
getColumnHeaderTemplate(columnName: string) {
|
||||
const ret = this.getColumn(columnName);
|
||||
if (ret && ret.headerTemplate)
|
||||
if (ret && ret.headerTemplate)
|
||||
return ret.headerTemplate.template;
|
||||
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
getColumnCellTemplate(columnName: string) {
|
||||
const ret = this.getColumn(columnName);
|
||||
if (ret && ret.cellTemplate)
|
||||
if (ret && ret.cellTemplate)
|
||||
return ret.cellTemplate.template;
|
||||
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
hasHeaderTemplate(columnName: string) {
|
||||
return this.getColumnHeaderTemplate(columnName) ? true :false;
|
||||
return this.getColumnHeaderTemplate(columnName) ? true : false;
|
||||
}
|
||||
|
||||
hasCellTemplate(columnName: string) {
|
||||
return this.getColumnCellTemplate(columnName) ? true :false;
|
||||
return this.getColumnCellTemplate(columnName) ? true : false;
|
||||
}
|
||||
|
||||
hasFilterTemplate(columnName: string) {
|
||||
return this.getFilterTemplate(columnName) ? true :false;
|
||||
return this.getFilterTemplate(columnName) ? true : false;
|
||||
}
|
||||
|
||||
hasSortingTemplate(columnName: string) {
|
||||
return this.getSortingTemplate(columnName) ? true :false;
|
||||
return this.getSortingTemplate(columnName) ? true : false;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDataGridCellFilter]'
|
||||
selector: '[cdkDataGridCellFilter]'
|
||||
})
|
||||
export class DataGridCellFilterDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDataGridCell]'
|
||||
selector: '[cdkDataGridCell]'
|
||||
})
|
||||
export class DataGridCellDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDataGridColHeader]'
|
||||
selector: '[cdkDataGridColHeader]'
|
||||
})
|
||||
export class DataGridColHeaderDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[cdkDataGridColSort]'
|
||||
})
|
||||
export class DataGridColSortDirective {
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
import {ContentChild, Directive, Input} from '@angular/core';
|
||||
import {DataGridColHeaderDirective} from './data-grid-col-header.directive';
|
||||
import {DataGridCellDirective} from './data-grid-cell.directive';
|
||||
import {DataGridCellFilterDirective} from './data-grid-cell-filter.directive';
|
||||
import {DataGridColSortDirective} from './data-grid-col-sort.directive';
|
||||
|
||||
@Directive({
|
||||
selector: '[cdkDataGridCol]'
|
||||
})
|
||||
export class DataGridColDirective {
|
||||
@Input('psDataGridCol') columnName: string;
|
||||
|
||||
@ContentChild(DataGridColHeaderDirective) headerTemplate: DataGridColHeaderDirective;
|
||||
@ContentChild(DataGridCellDirective) cellTemplate: DataGridCellDirective;
|
||||
@ContentChild(DataGridCellFilterDirective) filterTemplate: DataGridCellFilterDirective;
|
||||
@ContentChild(DataGridColSortDirective) sortTemplate: DataGridColSortDirective;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDataGridFooter]'
|
||||
selector: '[cdkDataGridFooter]'
|
||||
})
|
||||
export class DataGridFooterDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDataGridHeader]'
|
||||
selector: '[cdkDataGridHeader]'
|
||||
})
|
||||
export class DataGridHeaderDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDataGridLoader]'
|
||||
selector: '[cdkDataGridLoader]'
|
||||
})
|
||||
export class DataGridLoaderDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDsCommandContent]'
|
||||
selector: '[cdkDsCommandContent]'
|
||||
})
|
||||
export class DsCommandContentDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDsCommandError]'
|
||||
selector: '[cdkDsCommandError]'
|
||||
})
|
||||
export class DsCommandErrorDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDsCommandFooter]'
|
||||
selector: '[cdkDsCommandFooter]'
|
||||
})
|
||||
export class DsCommandFooterDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDsCommandNoCommand]'
|
||||
selector: '[cdkDsCommandNoCommand]'
|
||||
})
|
||||
export class DsCommandNoCommandDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
import {Directive, ElementRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[cdkDsCommandSubmit]'
|
||||
})
|
||||
export class DsCommandSubmitDirective {
|
||||
constructor(public element: ElementRef) { }
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDsCommandValidation]'
|
||||
selector: '[cdkDsCommandValidation]'
|
||||
})
|
||||
export class DsCommandValidationDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
<ng-container *ngIf="command; else noCommand">
|
||||
<ng-container *ngIf="hasContent" [ngTemplateOutlet]="contentTemplate"
|
||||
[ngTemplateOutletContext]="{ $implicit: command, loading: isLoading }">
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="lastValidationResult">
|
||||
<ng-container *ngIf="hasValidationTemplate" [ngTemplateOutlet]="validationTemplate"
|
||||
[ngTemplateOutletContext]="{ $implicit: lastValidationResult }">
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="lastErrorMessage && errorContent && errorContent.template">
|
||||
<ng-container [ngTemplateOutlet]="errorContent.template"
|
||||
[ngTemplateOutletContext]="{ $implicit: lastErrorMessage }">
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="hasFooterTemplate" [ngTemplateOutlet]="footerTemplate"
|
||||
[ngTemplateOutletContext]="{ $implicit: command, loading: isLoading }">
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<ng-template #noCommand>
|
||||
<ng-container *ngIf="noCommandContent && noCommandContent.template">
|
||||
<ng-container [ngTemplateOutlet]="noCommandContent.template">
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
@ -1,13 +1,24 @@
|
||||
import { Component, ContentChild, ContentChildren, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, QueryList } from '@angular/core';
|
||||
import { IDataSource, IDataSourceValidationError } from '@poweredsoft/data';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { finalize } from 'rxjs/operators';
|
||||
import { DsCommandContentDirective } from './directives/ds-command-content.directive';
|
||||
import { DsCommandErrorDirective } from './directives/ds-command-error.directive';
|
||||
import { DsCommandFooterDirective } from './directives/ds-command-footer.directive';
|
||||
import { DsCommandNoCommandDirective } from './directives/ds-command-no-command.directive';
|
||||
import { DsCommandSubmitDirective } from './directives/ds-command-submit.directive';
|
||||
import { DsCommandValidationDirective } from './directives/ds-command-validation.directive';
|
||||
import {
|
||||
Component,
|
||||
ContentChild,
|
||||
ContentChildren,
|
||||
EventEmitter,
|
||||
HostListener,
|
||||
Input,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
Output,
|
||||
QueryList
|
||||
} from '@angular/core';
|
||||
import {IDataSource} from '@poweredsoft/data';
|
||||
import {Subscription} from 'rxjs';
|
||||
import {finalize} from 'rxjs/operators';
|
||||
import {DsCommandContentDirective} from './directives/ds-command-content.directive';
|
||||
import {DsCommandErrorDirective} from './directives/ds-command-error.directive';
|
||||
import {DsCommandFooterDirective} from './directives/ds-command-footer.directive';
|
||||
import {DsCommandNoCommandDirective} from './directives/ds-command-no-command.directive';
|
||||
import {DsCommandSubmitDirective} from './directives/ds-command-submit.directive';
|
||||
import {DsCommandValidationDirective} from './directives/ds-command-validation.directive';
|
||||
|
||||
export interface DsCommandPropertyError
|
||||
{
|
||||
@ -16,27 +27,27 @@ export interface DsCommandPropertyError
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'ps-ds-command, [psDsCommand]',
|
||||
selector: 'cdk-ds-command, [cdkDsCommand]',
|
||||
templateUrl: './ds-command.component.html',
|
||||
styleUrls: ['./ds-command.component.scss']
|
||||
})
|
||||
export class DsCommandComponent implements OnInit, OnDestroy {
|
||||
|
||||
private _refreshOnSuccess: boolean = true;
|
||||
|
||||
@Input() params: any;
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@Input() name: string;
|
||||
@Input() model: any;
|
||||
@Input() resolveCommand: boolean;
|
||||
|
||||
@Input() set refreshOnSuccess(val: boolean) {
|
||||
this._refreshOnSuccess = val;
|
||||
}
|
||||
|
||||
get refreshOnSuccess() {
|
||||
return this._refreshOnSuccess;
|
||||
}
|
||||
|
||||
@Input() resolveCommand: boolean;
|
||||
|
||||
@Output() success = new EventEmitter<any>();
|
||||
@Output() loading = new EventEmitter<boolean>();
|
||||
@Output() commandChange = new EventEmitter<any>();
|
||||
@ -97,10 +108,6 @@ export class DsCommandComponent implements OnInit, OnDestroy {
|
||||
return this.commandContent.template;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
clearValidationError() {
|
||||
this.lastValidationResult = null;
|
||||
}
|
||||
@ -115,7 +122,6 @@ export class DsCommandComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
this._validationErrorSubscription = this.dataSource
|
||||
.validationError$.subscribe(validationResult => {
|
||||
this.lastValidationResult = Object.keys(validationResult.errors).reduce<DsCommandPropertyError[]>((prev, attr) => {
|
||||
@ -164,12 +170,11 @@ export class DsCommandComponent implements OnInit, OnDestroy {
|
||||
.toArray()
|
||||
.find(t => t.element.nativeElement == element);
|
||||
|
||||
if (found != null)
|
||||
if (found != null)
|
||||
this.execute()
|
||||
}
|
||||
|
||||
execute() {
|
||||
|
||||
// secure from double send.
|
||||
if (this._loading)
|
||||
return;
|
||||
@ -197,5 +202,4 @@ export class DsCommandComponent implements OnInit, OnDestroy {
|
||||
get isLoading() {
|
||||
return this._loading;
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
import {NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {DsCommandComponent} from './ds-command.component';
|
||||
import {DsCommandContentDirective} from './directives/ds-command-content.directive';
|
||||
import {DsCommandSubmitDirective} from './directives/ds-command-submit.directive';
|
||||
import {DsCommandValidationDirective} from './directives/ds-command-validation.directive';
|
||||
import {DsCommandFooterDirective} from './directives/ds-command-footer.directive';
|
||||
import {DsCommandErrorDirective} from './directives/ds-command-error.directive';
|
||||
import {DsCommandNoCommandDirective} from './directives/ds-command-no-command.directive';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [DsCommandComponent, DsCommandContentDirective, DsCommandSubmitDirective, DsCommandValidationDirective, DsCommandFooterDirective, DsCommandErrorDirective, DsCommandNoCommandDirective],
|
||||
imports: [
|
||||
CommonModule
|
||||
],
|
||||
exports: [DsCommandComponent, DsCommandContentDirective, DsCommandSubmitDirective, DsCommandValidationDirective, DsCommandFooterDirective, DsCommandErrorDirective, DsCommandNoCommandDirective]
|
||||
})
|
||||
export class DsCommandModule { }
|
||||
@ -0,0 +1,23 @@
|
||||
<ul>
|
||||
<li class="ds-pager-first" (click)="first()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
|
||||
</svg>
|
||||
</li>
|
||||
<li class="ds-pager-previous" (click)="previous()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</li>
|
||||
<li class="ds-pager-page" [class.ds-pager-current]="page == pr" *ngFor="let pr of pageRanges" (click)="page = pr">{{ pr }}</li>
|
||||
<li class="ds-pager-next" (click)="next()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</li>
|
||||
<li class="ds-pager-last" (click)="last()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
|
||||
</svg>
|
||||
</li>
|
||||
</ul>
|
||||
@ -0,0 +1,19 @@
|
||||
:host {
|
||||
ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 4px 2px;
|
||||
}
|
||||
|
||||
li.ds-pager-current {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,9 @@
|
||||
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
|
||||
import { IDataSource, IQueryExecutionGroupResult, IQueryExecutionResult } from '@poweredsoft/data';
|
||||
import { Subscription } from 'rxjs';
|
||||
import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
|
||||
import {IDataSource, IQueryExecutionGroupResult, IQueryExecutionResult} from '@poweredsoft/data';
|
||||
import {Subscription} from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'ps-ds-pager',
|
||||
selector: 'cdk-ds-pager',
|
||||
templateUrl: './ds-pager.component.html',
|
||||
styleUrls: ['./ds-pager.component.scss']
|
||||
})
|
||||
@ -38,10 +38,6 @@ export class DsPagerComponent implements OnInit, OnDestroy {
|
||||
public latestResult: IQueryExecutionResult<any> & IQueryExecutionGroupResult<any> = null;
|
||||
private dataSubscription: Subscription;
|
||||
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.dataSubscription = this.dataSource.data$.subscribe(result => {
|
||||
this.latestResult = result;
|
||||
@ -1,6 +1,6 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { DsPagerComponent } from './ds-pager.component';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {DsPagerComponent} from './ds-pager.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [DsPagerComponent],
|
||||
@ -0,0 +1,7 @@
|
||||
<form (submit)="applySearch()">
|
||||
<div [ngClass]="classes">
|
||||
<input type="search" (onSearch)="onSearch()" [placeholder]="finalSearchText" [ngClass]="searchClasses"
|
||||
[(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
|
||||
<button type="submit" [ngClass]="submitButtonClasses">{{ finalSearchText }}</button>
|
||||
</div>
|
||||
</form>
|
||||
@ -1,13 +1,12 @@
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { FilterType, ICompositeFilter, IDataSource, ISimpleFilter } from '@poweredsoft/data';
|
||||
import {Component, Input, OnInit} from '@angular/core';
|
||||
import {FilterType, ICompositeFilter, IDataSource, ISimpleFilter} from '@poweredsoft/data';
|
||||
|
||||
@Component({
|
||||
selector: 'ps-ds-search',
|
||||
selector: 'cdk-ds-search',
|
||||
templateUrl: './ds-search.component.html',
|
||||
styleUrls: ['./ds-search.component.scss']
|
||||
})
|
||||
export class DsSearchComponent implements OnInit {
|
||||
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@Input() filterType: string;
|
||||
@Input() filterPaths: string[];
|
||||
@ -0,0 +1,4 @@
|
||||
<ng-container *ngFor="let error of latestErrors; let isLast=last">
|
||||
{{ error }}
|
||||
<br *ngIf="!isLast" />
|
||||
</ng-container>
|
||||
@ -1,29 +1,26 @@
|
||||
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { IDataSource } from '@poweredsoft/data';
|
||||
import { Subscription } from 'rxjs';
|
||||
import {Component, Input, OnDestroy, OnInit} from '@angular/core';
|
||||
import {IDataSource} from '@poweredsoft/data';
|
||||
import {Subscription} from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'ps-ds-validation-error',
|
||||
selector: 'cdk-ds-validation-error',
|
||||
templateUrl: './ds-validation-error.component.html',
|
||||
styleUrls: ['./ds-validation-error.component.scss']
|
||||
})
|
||||
export class DsValidationErrorComponent implements OnInit, OnDestroy {
|
||||
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@Input() field: string;
|
||||
|
||||
validationErrorsSub: Subscription;
|
||||
commandStartedSub: Subscription;
|
||||
latestErrors: string[] = [];
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.validationErrorsSub?.unsubscribe();
|
||||
this.commandStartedSub?.unsubscribe();
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
this.commandStartedSub = this.dataSource.commandStarted$.subscribe(e => {
|
||||
this.latestErrors = [];
|
||||
});
|
||||
@ -35,7 +32,5 @@ export class DsValidationErrorComponent implements OnInit, OnDestroy {
|
||||
return prev.concat(validationErrors.errors[current]);
|
||||
}, []);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,7 +1,6 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { DsValidationErrorComponent } from './ds-validation-error.component';
|
||||
|
||||
import {NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {DsValidationErrorComponent} from './ds-validation-error.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
@ -1,10 +1,8 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psListViewFooter]'
|
||||
selector: '[cdkListViewFooter]'
|
||||
})
|
||||
export class ListViewFooterDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psListViewHeader]'
|
||||
selector: '[cdkListViewHeader]'
|
||||
})
|
||||
export class ListViewHeaderDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psListViewItem]'
|
||||
selector: '[cdkListViewItem]'
|
||||
})
|
||||
export class ListViewItemDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psDataGridColSort]'
|
||||
selector: '[cdkListViewSeparator]'
|
||||
})
|
||||
export class DataGridColSortDirective {
|
||||
|
||||
export class ListViewSeparatorDirective {
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
import {NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {ListViewComponent} from './list-view/list-view.component';
|
||||
import {ListViewItemDirective} from './directives/list-view-item.directive';
|
||||
import {ListViewHeaderDirective} from './directives/list-view-header.directive';
|
||||
import {ListViewFooterDirective} from './directives/list-view-footer.directive';
|
||||
import {ListViewSeparatorDirective} from './directives/list-view-separator.directive';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [ListViewComponent, ListViewItemDirective, ListViewHeaderDirective, ListViewFooterDirective, ListViewSeparatorDirective],
|
||||
imports: [
|
||||
CommonModule
|
||||
],
|
||||
exports: [
|
||||
ListViewComponent,
|
||||
ListViewItemDirective,
|
||||
ListViewHeaderDirective,
|
||||
ListViewFooterDirective,
|
||||
ListViewSeparatorDirective
|
||||
]
|
||||
})
|
||||
export class ListViewModule { }
|
||||
@ -1,21 +1,21 @@
|
||||
<ng-container [ngTemplateOutlet]="getViewHeaderTemplate()"></ng-container>
|
||||
<ng-container *ngIf="!noData else noResultTemplate">
|
||||
<div [ngClass]="listViewClasses">
|
||||
<ng-container *ngFor="let item of latestResult.data; let index = index; let first = first; let last = last; let odd = odd">
|
||||
<ng-container [ngTemplateOutlet]="getViewItemTemplate()" [ngTemplateOutletContext]="{
|
||||
<div [ngClass]="listViewClasses">
|
||||
<ng-container *ngFor="let item of latestResult.data; let index = index; let first = first; let last = last; let odd = odd">
|
||||
<ng-container [ngTemplateOutlet]="getViewItemTemplate()" [ngTemplateOutletContext]="{
|
||||
$implicit: item,
|
||||
index: index,
|
||||
first: first,
|
||||
last: last,
|
||||
odd: odd
|
||||
}">
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container [ngTemplateOutlet]="getViewFooterTemplate()"></ng-container>
|
||||
|
||||
|
||||
<ng-template #noResultTemplate>
|
||||
<div [ngClass]="noRecordClasses">{{noRecords}}</div>
|
||||
</ng-template>
|
||||
<div [ngClass]="noRecordClasses">{{noRecords}}</div>
|
||||
</ng-template>
|
||||
@ -1,17 +1,16 @@
|
||||
import { Component, OnInit, Input, OnDestroy, ContentChildren, QueryList, ContentChild } from '@angular/core';
|
||||
import { IDataSource, IQueryExecutionResult, IQueryExecutionGroupResult } from '@poweredsoft/data';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { ListViewItemDirective } from '../directives/list-view-item.directive';
|
||||
import { ListViewHeaderDirective } from '../directives/list-view-header.directive';
|
||||
import { ListViewFooterDirective } from '../directives/list-view-footer.directive';
|
||||
import {Component, ContentChild, Input, OnDestroy, OnInit} from '@angular/core';
|
||||
import {IDataSource, IQueryExecutionGroupResult, IQueryExecutionResult} from '@poweredsoft/data';
|
||||
import {Subscription} from 'rxjs';
|
||||
import {ListViewItemDirective} from '../directives/list-view-item.directive';
|
||||
import {ListViewHeaderDirective} from '../directives/list-view-header.directive';
|
||||
import {ListViewFooterDirective} from '../directives/list-view-footer.directive';
|
||||
|
||||
@Component({
|
||||
selector: 'ps-list-view',
|
||||
selector: 'cdk-list-view',
|
||||
templateUrl: './list-view.component.html',
|
||||
styleUrls: ['./list-view.component.scss']
|
||||
})
|
||||
export class ListViewComponent implements OnInit, OnDestroy {
|
||||
|
||||
@Input() dataSource: IDataSource<any>;
|
||||
@Input() noRecordsText: string;
|
||||
@Input() noRecordClasses: any;
|
||||
@ -21,22 +20,18 @@ export class ListViewComponent implements OnInit, OnDestroy {
|
||||
loading:boolean;
|
||||
|
||||
private _dataSubscription: Subscription;
|
||||
|
||||
@ContentChild(ListViewItemDirective) viewItem: ListViewItemDirective;
|
||||
@ContentChild(ListViewHeaderDirective) viewHeader: ListViewHeaderDirective;
|
||||
@ContentChild(ListViewFooterDirective) viewFooter: ListViewFooterDirective;
|
||||
//@ContentChildren(ViewDataDirective) viewData: QueryList<ViewDataDirective>;
|
||||
|
||||
constructor() {
|
||||
|
||||
}
|
||||
@ContentChild(ListViewItemDirective) viewItem: ListViewItemDirective;
|
||||
@ContentChild(ListViewHeaderDirective) viewHeader: ListViewHeaderDirective;
|
||||
@ContentChild(ListViewFooterDirective) viewFooter: ListViewFooterDirective;
|
||||
//@ContentChildren(ViewDataDirective) viewData: QueryList<ViewDataDirective>;
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this._dataSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this._dataSubscription = this.dataSource.data$.subscribe(newData => {
|
||||
this._dataSubscription = this.dataSource.data$.subscribe(newData => {
|
||||
this.latestResult = newData;
|
||||
});
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
import { Directive, TemplateRef } from '@angular/core';
|
||||
import {Directive, TemplateRef} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[psViewContent]'
|
||||
selector: '[cdkDsViewContent]'
|
||||
})
|
||||
export class ViewContentDirective {
|
||||
|
||||
constructor(public template: TemplateRef<any>) { }
|
||||
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user