diff --git a/angular.json b/angular.json index c28fc2e..c83e8ec 100644 --- a/angular.json +++ b/angular.json @@ -28,6 +28,7 @@ "src/assets" ], "styles": [ + "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss" ], "scripts": [] @@ -203,6 +204,46 @@ } } } + }, + "@poweredsoft/ng-select": { + "projectType": "library", + "root": "projects/poweredsoft/ng-select", + "sourceRoot": "projects/poweredsoft/ng-select/src", + "prefix": "ps-ng", + "architect": { + "build": { + "builder": "@angular-devkit/build-ng-packagr:build", + "options": { + "tsConfig": "projects/poweredsoft/ng-select/tsconfig.lib.json", + "project": "projects/poweredsoft/ng-select/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "projects/poweredsoft/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" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "projects/poweredsoft/ng-select/tsconfig.lib.json", + "projects/poweredsoft/ng-select/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } }}, "defaultProject": "ngx-cdk-ui" } diff --git a/package-lock.json b/package-lock.json index c3334f8..ed812a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1644,6 +1644,14 @@ } } }, + "@ng-select/ng-select": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-4.0.1.tgz", + "integrity": "sha512-f5NzrKRvswOvxa8BzBgAUOpzl0B8SrlVQHQLB2zPymuZlzC2dWUi9mUhgu6s2igwdClmrZ8bysNBBNpgqHskyA==", + "requires": { + "tslib": "^1.10.0" + } + }, "@ngtools/webpack": { "version": "9.1.7", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-9.1.7.tgz", @@ -1668,9 +1676,9 @@ } }, "@poweredsoft/data": { - "version": "0.0.26", - "resolved": "https://registry.npmjs.org/@poweredsoft/data/-/data-0.0.26.tgz", - "integrity": "sha512-JogKJQ01w4hTQr4EDSoYp2KfJzBbzC8trc7iHCxw7tjF6kB9nqWxu8gvRxX5pqzDK6ORz0Ieuw7i0hEZusW+ww==", + "version": "0.0.30", + "resolved": "https://registry.npmjs.org/@poweredsoft/data/-/data-0.0.30.tgz", + "integrity": "sha512-lKojW+yCKPSrdohqhuoEUTo196Z1cHs+SkOZ9N43N7MUcbIR0SA6Uz6k4QZtbmbXmR5AvDKPrDp37nqPXGZFYA==", "requires": { "tslib": "^1.9.0" } @@ -1684,9 +1692,9 @@ } }, "@poweredsoft/ngx-data-apollo": { - "version": "0.0.8", - "resolved": "https://registry.npmjs.org/@poweredsoft/ngx-data-apollo/-/ngx-data-apollo-0.0.8.tgz", - "integrity": "sha512-8nIlvHTnbLyG9aNxkSYOHIbNBBSjj92v0BeFTq4xkttp3UmYzhOO7lkgo1cEIDUuYo+ITAYoZbKwrd4CbnBgcA==", + "version": "0.0.10", + "resolved": "https://registry.npmjs.org/@poweredsoft/ngx-data-apollo/-/ngx-data-apollo-0.0.10.tgz", + "integrity": "sha512-0HjJthjXstNXS/T9u6t9VTWtQO/LUzGsbT/m0tjj8y0YuivMzfK76EyQldvjGXDYGfIL12kEhsKEbiOPXyCXcA==", "requires": { "tslib": "^1.9.0" } diff --git a/package.json b/package.json index 2d27be7..03cac8b 100644 --- a/package.json +++ b/package.json @@ -23,9 +23,10 @@ "@angular/platform-browser": "~9.1.4", "@angular/platform-browser-dynamic": "~9.1.4", "@angular/router": "~9.1.4", - "@poweredsoft/data": "0.0.26", + "@ng-select/ng-select": "^4.0.1", + "@poweredsoft/data": "0.0.30", "@poweredsoft/ngx-data": "0.0.13", - "@poweredsoft/ngx-data-apollo": "0.0.8", + "@poweredsoft/ngx-data-apollo": "0.0.10", "apollo-angular": "^1.8.0", "apollo-angular-link-http": "^1.9.0", "apollo-cache-inmemory": "^1.6.0", diff --git a/projects/poweredsoft/ng-select/README.md b/projects/poweredsoft/ng-select/README.md new file mode 100644 index 0000000..26c0003 --- /dev/null +++ b/projects/poweredsoft/ng-select/README.md @@ -0,0 +1,24 @@ +# NgSelect + +This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.9. + +## Code scaffolding + +Run `ng generate component component-name --project ng-select` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ng-select`. +> Note: Don't forget to add `--project ng-select` or else it will be added to the default project in your `angular.json` file. + +## Build + +Run `ng build ng-select` to build the project. The build artifacts will be stored in the `dist/` directory. + +## Publishing + +After building your library with `ng build ng-select`, go to the dist folder `cd dist/ng-select` and run `npm publish`. + +## Running unit tests + +Run `ng test ng-select` to execute the unit tests via [Karma](https://karma-runner.github.io). + +## Further help + +To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). diff --git a/projects/poweredsoft/ng-select/karma.conf.js b/projects/poweredsoft/ng-select/karma.conf.js new file mode 100644 index 0000000..1b4e689 --- /dev/null +++ b/projects/poweredsoft/ng-select/karma.conf.js @@ -0,0 +1,32 @@ +// Karma configuration file, see link for more information +// https://karma-runner.github.io/1.0/config/configuration-file.html + +module.exports = function (config) { + config.set({ + basePath: '', + frameworks: ['jasmine', '@angular-devkit/build-angular'], + plugins: [ + require('karma-jasmine'), + require('karma-chrome-launcher'), + require('karma-jasmine-html-reporter'), + require('karma-coverage-istanbul-reporter'), + require('@angular-devkit/build-angular/plugins/karma') + ], + client: { + clearContext: false // leave Jasmine Spec Runner output visible in browser + }, + coverageIstanbulReporter: { + dir: require('path').join(__dirname, '../../../coverage/poweredsoft/ng-select'), + reports: ['html', 'lcovonly', 'text-summary'], + fixWebpackSourcePaths: true + }, + reporters: ['progress', 'kjhtml'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['Chrome'], + singleRun: false, + restartOnFileChange: true + }); +}; diff --git a/projects/poweredsoft/ng-select/ng-package.json b/projects/poweredsoft/ng-select/ng-package.json new file mode 100644 index 0000000..70f4cbd --- /dev/null +++ b/projects/poweredsoft/ng-select/ng-package.json @@ -0,0 +1,7 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../dist/poweredsoft/ng-select", + "lib": { + "entryFile": "src/public-api.ts" + } +} \ No newline at end of file diff --git a/projects/poweredsoft/ng-select/package.json b/projects/poweredsoft/ng-select/package.json new file mode 100644 index 0000000..e724836 --- /dev/null +++ b/projects/poweredsoft/ng-select/package.json @@ -0,0 +1,11 @@ +{ + "name": "@poweredsoft/ng-select", + "version": "0.0.1", + "peerDependencies": { + "@angular/common": "^9.1.9", + "@angular/core": "^9.1.9" + }, + "dependencies": { + "tslib": "^1.10.0" + } +} \ No newline at end of file diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/directives/not-found-template.directive.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/directives/not-found-template.directive.ts new file mode 100644 index 0000000..dce5e7b --- /dev/null +++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/directives/not-found-template.directive.ts @@ -0,0 +1,11 @@ +import { Directive, TemplateRef } from '@angular/core'; + + +@Directive({ + selector: '[psNgNotFoundTemplate]' +}) +export class NotFoundTemplateDirective { + + constructor(public template: TemplateRef) { } + +} diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/directives/select-label-template.directive.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/directives/select-label-template.directive.ts new file mode 100644 index 0000000..7c667a0 --- /dev/null +++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/directives/select-label-template.directive.ts @@ -0,0 +1,9 @@ +import { Directive, TemplateRef } from '@angular/core'; + +@Directive({ + selector: '[psNgSelectLabel]' +}) +export class SelectLabelTemplateDirective { + constructor(public template: TemplateRef) { } + +} diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/directives/select-option-template.directive.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/directives/select-option-template.directive.ts new file mode 100644 index 0000000..1b79579 --- /dev/null +++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/directives/select-option-template.directive.ts @@ -0,0 +1,10 @@ +import { Directive, TemplateRef } from '@angular/core'; + +@Directive({ + selector: '[psNgSelectOption]' +}) +export class SelectOptionTemplateDirective { + + constructor(public template: TemplateRef) { } + +} diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.html b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.html new file mode 100644 index 0000000..f907a74 --- /dev/null +++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.html @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.scss b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts new file mode 100644 index 0000000..c976dfa --- /dev/null +++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts @@ -0,0 +1,153 @@ +import { Component, OnInit, ContentChild, ViewChild, Input, Output, EventEmitter, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core'; +import { SelectLabelTemplateDirective } from '../directives/select-label-template.directive'; +import { IDataSource, ISimpleFilter } from '@poweredsoft/data'; +import { Observable, Subject, Subscription } from 'rxjs'; +import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators'; +import { NgSelectComponent as SelectComponent } from '@ng-select/ng-select'; +import { NG_VALUE_ACCESSOR } from '@angular/forms'; +import { SelectOptionTemplateDirective } from '../directives/select-option-template.directive'; + +@Component({ + selector: 'ps-ng-multi-select', + templateUrl: './multi-select.component.html', + providers: [{ + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => MultiSelectComponent), + multi: true +}], + styleUrls: ['./multi-select.component.scss'] +}) +export class MultiSelectComponent implements OnInit,OnDestroy { + + + @ContentChild(SelectOptionTemplateDirective) optionTemplate: SelectOptionTemplateDirective; + @ContentChild(SelectLabelTemplateDirective) labelTemplate: SelectLabelTemplateDirective; + + @ViewChild(SelectComponent, { static: true }) selectComponent: SelectComponent; + @Input() dataSource: IDataSource; + @Input() searchPath: string; + @Input() searchType: string; + @Input() sortingPath: string; + @Input() serverFiltering:boolean; + @Input() bindLabel:string; + @Input() bindValue: string; + + @Output('change') changeEvent = new EventEmitter(); + + trackFn: (item: any) => any; + data$ : Observable; + isLoading:boolean = false; + searchInput$ = new Subject(); + + private _loadingSubscription: Subscription; + + constructor(private cdr: ChangeDetectorRef) { + this.trackFn = this.trackBy.bind(this); + + } + + trackBy(item: any) { + return this.dataSource.resolveIdField(item); + } + + valueChanged(event) { + this.changeEvent.emit(event); + } + + writeValue(obj: any): void { + this.selectComponent.writeValue(obj); + } + registerOnChange(fn: any): void { + this.selectComponent.registerOnChange(fn); + } + registerOnTouched(fn: any): void { + this.selectComponent.registerOnTouched(fn); + } + setDisabledState?(isDisabled: boolean): void { + if (this.selectComponent.setDisabledState) + this.selectComponent.setDisabledState(isDisabled); + } + ngOnDestroy(): void { + this._loadingSubscription.unsubscribe(); + } + + ngOnInit(): void { + this.dataFetching(); + this.detectLoading(); + if(this.serverFiltering){ + this.searchOnServer(); + }else{ + this.refreshDataSource(); + } + } + + dataFetching(){ + this.data$ = this.dataSource.data$.pipe( + map(t => { + if (t == null) + return []; + return t.data; + }) + ); + } + + detectLoading(){ + this._loadingSubscription = this.dataSource.loading$.subscribe(loading => { + this.isLoading = loading; + this.cdr.detectChanges(); + }); + } + + searchOnServer(){ + this.searchInput$.pipe( + distinctUntilChanged(), // emit the difference from previous input + debounceTime(500) // this is for delaying searching speed + ).subscribe(searchTerm => this.refreshDataSource(searchTerm, 1, 100)); // page: 1, pageSize: 50 + + this.refreshDataSource(); //send the query to server to sorting & filtering by default + } + + get selectedModel() { + return this.selectComponent.selectedItems.map(t => t.value); + } + + refreshDataSource(searchTerm:any = null, page:number = null, pageSize:number = null){ + let searchfilters:ISimpleFilter[] = null; + if(searchTerm){ + searchfilters = [{ + path: this.searchPath || this.bindLabel, + type: this.searchType || 'Contains', // Default: Contains + value: searchTerm + }] + } + this.dataSource.query({ + page: page, + pageSize: pageSize, + filters:searchfilters, + sorts:[ + {path: this.sortingPath || this.bindLabel, ascending: true} + ] + }) + } + + get hasOptionTemplate() { + return this.optionTemplate ? true : false; + } + + get selectOptionTemplate(){ + if (this.optionTemplate) + return this.optionTemplate.template; + return null; + } + + get hasLabelTemplate() { + return this.labelTemplate ? true : false; + } + + get selectLabelTemplate(){ + if (this.labelTemplate) + return this.labelTemplate.template; + return null; + } + +} diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.html b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.html new file mode 100644 index 0000000..f218c4f --- /dev/null +++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.html @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.scss b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts new file mode 100644 index 0000000..971ed6b --- /dev/null +++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts @@ -0,0 +1,170 @@ +import { Component, OnInit, ContentChild, ViewChild, Input, Output, EventEmitter, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core'; +import { SelectLabelTemplateDirective } from '../directives/select-label-template.directive'; +import { IDataSource, ISimpleFilter } from '@poweredsoft/data'; +import { Observable, Subject, Subscription } from 'rxjs'; +import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators'; +import { NgSelectComponent as SelectComponent } from '@ng-select/ng-select'; +import { NG_VALUE_ACCESSOR } from '@angular/forms'; +import { SelectOptionTemplateDirective } from '../directives/select-option-template.directive'; +import { NotFoundTemplateDirective } from '../directives/not-found-template.directive'; + + +@Component({ + selector: 'ps-ng-select', + templateUrl: './ng-select.component.html', + providers: [{ + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => NgSelectComponent), + multi: true +}], + styleUrls: ['./ng-select.component.scss'] +}) +export class NgSelectComponent implements OnInit,OnDestroy { + + @ContentChild(SelectOptionTemplateDirective) optionTemplate: SelectOptionTemplateDirective; + @ContentChild(SelectLabelTemplateDirective) labelTemplate: SelectLabelTemplateDirective; + @ContentChild(NotFoundTemplateDirective) notFoundTemplate: NotFoundTemplateDirective; + + + + @ViewChild(SelectComponent, { static: true }) selectComponent: SelectComponent; + @Input() dataSource: IDataSource; + @Input() searchPath: string; + @Input() searchType: string; + @Input() sortingPath: string; + @Input() serverFiltering:boolean; + @Input() bindLabel:string; + @Input() bindValue: string; + + @Output('change') changeEvent = new EventEmitter(); + + trackFn: (item: any) => any; + data$ : Observable; + isLoading:boolean = false; + searchInput$ = new Subject(); + + private _loadingSubscription: Subscription; + + constructor(private cdr: ChangeDetectorRef) { + this.trackFn = this.trackBy.bind(this); + + } + + ngOnInit(): void { + this.dataFetching(); + this.detectLoading(); + + if(this.serverFiltering){ + this.searchOnServer(); + }else{ + this.refreshDataSource(); + } + } + + + valueChanged(event) { + this.changeEvent.emit(event); + } + + writeValue(obj: any): void { + this.selectComponent.writeValue(obj); + } + registerOnChange(fn: any): void { + this.selectComponent.registerOnChange(fn); + } + registerOnTouched(fn: any): void { + this.selectComponent.registerOnTouched(fn); + } + setDisabledState?(isDisabled: boolean): void { + if (this.selectComponent.setDisabledState) + this.selectComponent.setDisabledState(isDisabled); + } + + trackBy(item: any) { + return this.dataSource.resolveIdField(item); + } + + ngOnDestroy(): void { + this._loadingSubscription.unsubscribe(); + } + + + dataFetching(){ + this.data$ = this.dataSource.data$.pipe( + map(t => { + if (t == null) + return []; + return t.data; + }) + ); + } + + detectLoading(){ + this._loadingSubscription = this.dataSource.loading$.subscribe(loading => { + this.isLoading = loading; + this.cdr.detectChanges(); + }); + } + + searchOnServer(){ + this.searchInput$.pipe( + distinctUntilChanged(), // emit the difference from previous input + debounceTime(500) // this is for delaying searching speed + ).subscribe(searchTerm => this.refreshDataSource(searchTerm, 1, 100)); // page: 1, pageSize: 50 + + this.refreshDataSource(); //send the query to server to sorting & filtering by default + } + + get selectedModel() { + return this.selectComponent.hasValue ? this.selectComponent.selectedItems[0] : null; + } + + refreshDataSource(searchTerm:any = null, page:number = null, pageSize:number = null){ + let searchfilters:ISimpleFilter[] = null; + if(searchTerm){ + searchfilters = [{ + path: this.searchPath || this.bindLabel, + type: this.searchType || 'Contains', // Default: Contains + value: searchTerm + }] + } + this.dataSource.query({ + page: page, + pageSize: pageSize, + filters:searchfilters, + sorts:[ + {path: this.sortingPath || this.bindLabel, ascending: true} + ] + }) + } + + get hasOptionTemplate() { + return this.optionTemplate ? true : false; + } + + get selectOptionTemplate(){ + if (this.optionTemplate) + return this.optionTemplate.template; + return null; + } + + get hasLabelTemplate() { + return this.labelTemplate ? true : false; + } + + get selectLabelTemplate(){ + if (this.labelTemplate) + return this.labelTemplate.template; + return null; + } + + get hasNotFoundTemplate() { + return this.notFoundTemplate ? true : false; + } + + get selectNotFoundTemplate(){ + if(this.notFoundTemplate) + return this.notFoundTemplate.template; + return null; + } +} diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ps-ng-select.module.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ps-ng-select.module.ts new file mode 100644 index 0000000..3b89b59 --- /dev/null +++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ps-ng-select.module.ts @@ -0,0 +1,28 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { NgSelectComponent } from './ng-select/ng-select.component'; +import { MultiSelectComponent } from './multi-select/multi-select.component'; +import { FormsModule } from '@angular/forms'; +import { NgSelectModule } from '@ng-select/ng-select'; +import { SelectLabelTemplateDirective } from './directives/select-label-template.directive'; +import { SelectOptionTemplateDirective } from './directives/select-option-template.directive'; +import { NotFoundTemplateDirective } from './directives/not-found-template.directive'; + + + +@NgModule({ + declarations: [NgSelectComponent, MultiSelectComponent, SelectLabelTemplateDirective, SelectOptionTemplateDirective, NotFoundTemplateDirective], + imports: [ + CommonModule, + FormsModule, + NgSelectModule, + ], + exports:[ + NgSelectComponent, + MultiSelectComponent, + SelectLabelTemplateDirective, + SelectOptionTemplateDirective, + NotFoundTemplateDirective + ] +}) +export class PsNgSelectModule { }//NGSELECT diff --git a/projects/poweredsoft/ng-select/src/public-api.ts b/projects/poweredsoft/ng-select/src/public-api.ts new file mode 100644 index 0000000..7a883ee --- /dev/null +++ b/projects/poweredsoft/ng-select/src/public-api.ts @@ -0,0 +1,10 @@ +/* + * Public API Surface of ng-select + */ + +export * from './lib/ps-ng-select/ps-ng-select.module'; +export * from './lib/ps-ng-select/ng-select/ng-select.component'; +export * from './lib/ps-ng-select/multi-select/multi-select.component'; +export * from './lib/ps-ng-select/directives/select-label-template.directive'; +export * from './lib/ps-ng-select/directives/select-option-template.directive'; +export * from './lib/ps-ng-select/directives/not-found-template.directive'; diff --git a/projects/poweredsoft/ng-select/src/test.ts b/projects/poweredsoft/ng-select/src/test.ts new file mode 100644 index 0000000..303b32a --- /dev/null +++ b/projects/poweredsoft/ng-select/src/test.ts @@ -0,0 +1,26 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import 'zone.js/dist/zone'; +import 'zone.js/dist/zone-testing'; +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +declare const require: { + context(path: string, deep?: boolean, filter?: RegExp): { + keys(): string[]; + (id: string): T; + }; +}; + +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting() +); +// Then we find all the tests. +const context = require.context('./', true, /\.spec\.ts$/); +// And load the modules. +context.keys().map(context); diff --git a/projects/poweredsoft/ng-select/tsconfig.lib.json b/projects/poweredsoft/ng-select/tsconfig.lib.json new file mode 100644 index 0000000..38a679b --- /dev/null +++ b/projects/poweredsoft/ng-select/tsconfig.lib.json @@ -0,0 +1,23 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "outDir": "../../../out-tsc/lib", + "target": "es2015", + "declaration": true, + "inlineSources": true, + "types": [], + "lib": [ + "dom", + "es2018" + ] + }, + "angularCompilerOptions": { + "skipTemplateCodegen": true, + "strictMetadataEmit": true, + "enableResourceInlining": true + }, + "exclude": [ + "src/test.ts", + "**/*.spec.ts" + ] +} diff --git a/projects/poweredsoft/ng-select/tsconfig.lib.prod.json b/projects/poweredsoft/ng-select/tsconfig.lib.prod.json new file mode 100644 index 0000000..cbae794 --- /dev/null +++ b/projects/poweredsoft/ng-select/tsconfig.lib.prod.json @@ -0,0 +1,6 @@ +{ + "extends": "./tsconfig.lib.json", + "angularCompilerOptions": { + "enableIvy": false + } +} diff --git a/projects/poweredsoft/ng-select/tsconfig.spec.json b/projects/poweredsoft/ng-select/tsconfig.spec.json new file mode 100644 index 0000000..4acf941 --- /dev/null +++ b/projects/poweredsoft/ng-select/tsconfig.spec.json @@ -0,0 +1,17 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "outDir": "../../../out-tsc/spec", + "types": [ + "jasmine", + "node" + ] + }, + "files": [ + "src/test.ts" + ], + "include": [ + "**/*.spec.ts", + "**/*.d.ts" + ] +} diff --git a/projects/poweredsoft/ng-select/tslint.json b/projects/poweredsoft/ng-select/tslint.json new file mode 100644 index 0000000..3aa2f4c --- /dev/null +++ b/projects/poweredsoft/ng-select/tslint.json @@ -0,0 +1,17 @@ +{ + "extends": "../../../tslint.json", + "rules": { + "directive-selector": [ + true, + "attribute", + "lib", + "camelCase" + ], + "component-selector": [ + true, + "element", + "lib", + "kebab-case" + ] + } +} diff --git a/projects/poweredsoft/ngx-bootstrap/package.json b/projects/poweredsoft/ngx-bootstrap/package.json index a3c3207..f84b055 100644 --- a/projects/poweredsoft/ngx-bootstrap/package.json +++ b/projects/poweredsoft/ngx-bootstrap/package.json @@ -1,6 +1,6 @@ { "name": "@poweredsoft/ngx-bootstrap", - "version": "0.0.1", + "version": "0.0.3", "peerDependencies": { "@angular/common": "^9.1.9", "@angular/core": "^9.1.9", diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts index 0940f87..c80c5da 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts @@ -3,7 +3,7 @@ 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 { InputValidatorDirective } from './directives/input-validator.directive'; + import { FormsModule } from '@angular/forms'; @NgModule({ @@ -12,7 +12,7 @@ import { FormsModule } from '@angular/forms'; ModalModule.forRoot(), FormsModule ], - declarations: [CommandModalDirective, CommandModalComponent, InputValidatorDirective], + declarations: [CommandModalDirective, CommandModalComponent], exports: [CommandModalDirective] }) export class CommandModalModule { } diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html index 2c11963..875fd6d 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html @@ -12,7 +12,7 @@
- +
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.spec.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.spec.ts deleted file mode 100644 index 89276ef..0000000 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { CommandModalComponent } from './command-modal.component'; - -describe('CommandModalComponent', () => { - let component: CommandModalComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ CommandModalComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(CommandModalComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts index 4408a68..1119e17 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core'; +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'; @@ -23,6 +23,8 @@ export class CommandModalComponent implements OnInit, OnDestroy { cancelText: string; form:NgForm; validationMessage:string ; + btnClass:string; + successEmitter: EventEmitter; private _notifyMessage: Subscription; private _validationError: Subscription; @@ -62,11 +64,12 @@ export class CommandModalComponent implements OnInit, OnDestroy { this.loading = false; }) ) - .subscribe(success => { + .subscribe(commandResult => { if (this.refreshOnSuccess) this.dataSource.refresh(); this.modalRef.hide(); + this.successEmitter.emit(commandResult); }, fail => { // you do not want to close on failure.. so just ignore.. }); diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts index c7c7418..291f44f 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts @@ -1,4 +1,4 @@ -import { Directive, HostListener, Input, TemplateRef } from '@angular/core'; +import { Directive, HostListener, Input, TemplateRef, Output, EventEmitter } from '@angular/core'; import { IDataSource } from '@poweredsoft/data'; import { BsModalService } from 'ngx-bootstrap/modal'; import { CommandModalComponent } from '../command-modal/command-modal.component'; @@ -20,6 +20,9 @@ export class CommandModalDirective { @Input() commandText: string; @Input() cancelText: string; @Input() animated: boolean; + @Input() btnClass:string; + + @Output() success: EventEmitter = new EventEmitter(); @HostListener('click') wasClicked() { @@ -35,7 +38,9 @@ export class CommandModalDirective { title: this.commandTitle, refreshOnSuccess: this.refreshOnSuccess === undefined ? true : this.refreshOnSuccess, commandText: this.commandText || 'OK', - cancelText: this.cancelText || 'Cancel' + cancelText: this.cancelText || 'Cancel', + successEmitter: this.success, + btnClass: this.btnClass || 'primary' }; this.modalService.show(CommandModalComponent, { animated: this.animated === undefined ? true : this.animated, diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/input-validator.directive.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/input-validator.directive.ts deleted file mode 100644 index 8fb46d8..0000000 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/input-validator.directive.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Directive } from '@angular/core'; -import { Validator, AbstractControl, ValidationErrors, NG_VALIDATORS } from '@angular/forms'; - -@Directive({ - selector: '[psbxInputValidator]', - providers: [{ provide: NG_VALIDATORS, useExisting: InputValidatorDirective, multi: true }] -}) -export class InputValidatorDirective implements Validator{ - - constructor() { } - - validate(control: AbstractControl): ValidationErrors { - throw new Error("Method not implemented."); - } - registerOnValidatorChange?(fn: () => void): void { - throw new Error("Method not implemented."); - } - -} diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command/command.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command/command.module.ts new file mode 100644 index 0000000..4ce5b10 --- /dev/null +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command/command.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { CommandDirective } from './directives/command.directive'; +import { ConfirmModalModule } from '../confirm-modal/confirm-modal.module'; + + + +@NgModule({ + declarations: [CommandDirective], + imports: [ + CommonModule, + ConfirmModalModule + ], + exports:[CommandDirective] +}) +export class CommandModule { } diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command/directives/command.directive.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command/directives/command.directive.ts new file mode 100644 index 0000000..5d042ba --- /dev/null +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command/directives/command.directive.ts @@ -0,0 +1,70 @@ +import { Directive, Input, TemplateRef, HostListener, Output, EventEmitter } from '@angular/core'; +import { IDataSource } from '@poweredsoft/data'; +import { ConfirmModalService } from '../../confirm-modal/confirm-modal.service'; + +@Directive({ + selector: '[psbxCommand]' +}) +export class CommandDirective { + + constructor(private confirmModalService: ConfirmModalService) { } + + + @Input() dataSource: IDataSource; + @Input() command: string; + @Input() model: any; + @Input() refreshOnSuccess: boolean; + @Input() animated: boolean; + + @Input() confirm: boolean; + @Input() confirmMessage: string; + @Input() yesText: string; + @Input() noText: string; + @Input() yesClass: string; + @Input() noClass: string; + + @Output() success: EventEmitter = new EventEmitter(); + @Output() failure: EventEmitter = new EventEmitter(); + + private doCommand() { + this.dataSource.resolveCommandModelByName({ + command: this.command, + model: this.model + }).subscribe(commandModel => { + this.dataSource.executeCommandByName(this.command, commandModel).subscribe( + commandResult => { + if (this.refreshOnSuccess !== false) + this.dataSource.refresh(); + + this.success.emit(commandResult); + }, + commandError => { + this.failure.emit(commandError); + } + ); + }, resolveCommandError => { + this.failure.emit(resolveCommandError); + }); + } + + + @HostListener('click') + wasClicked() { + + if (this.confirm) { + this.confirmModalService.confirm({ + message: this.confirmMessage, + yesText: this.yesText || 'yes', + yesClass: this.yesClass || 'danger', + noText: this.noText || 'no', + noClass: this.noClass || 'light', + }).subscribe(result => { + if (result) + this.doCommand(); + }) + } else { + this.doCommand(); + } + } + +} diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.ts index 288bb69..3047239 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.ts +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal-components/confirm-modal/confirm-modal.component.ts @@ -1,6 +1,5 @@ -import { Component, OnInit, TemplateRef } from '@angular/core'; +import { Component, OnInit, TemplateRef, EventEmitter } from '@angular/core'; import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; -import { ConfirmModalService } from '../../confirm-modal.service'; import { Observer } from 'rxjs'; @@ -19,7 +18,7 @@ export class ConfirmModalComponent implements OnInit { noClass: string; observer: Observer; - constructor(private modelRef: BsModalRef, private actionService: ConfirmModalService) { + constructor(private modelRef: BsModalRef) { } @@ -28,11 +27,11 @@ export class ConfirmModalComponent implements OnInit { } get yesButtonClass() { - return `btn btn-sm btn-${this.yesClass}` + return `btn btn-${this.yesClass}` } get noButtonClass() { - return `btn btn-sm btn-${this.noClass}` + return `btn btn-${this.noClass}` } confirm(): void { diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.directive.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.directive.ts deleted file mode 100644 index ce53863..0000000 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.directive.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { Directive, Input, TemplateRef, HostListener } from '@angular/core'; -import { ConfirmModalService } from './confirm-modal.service'; -import { IDataSource } from '@poweredsoft/data'; - -@Directive({ - selector: '[psbxConfirmModal]' -}) -export class ConfirmModalDirective { - - constructor(private confirmModalService: ConfirmModalService) { } - - - @Input() dataSource: IDataSource; - @Input() command: string; - @Input() model: any; - @Input() template: TemplateRef; - @Input() commandTitle: string; - @Input() refreshOnSuccess: boolean; - @Input() commandText: string; - @Input() cancelText: string; - @Input() animated: boolean; - - - @HostListener('click') - wasClicked() { - this.dataSource.resolveCommandModelByName({ - command: this.command, - model: this.model - }).subscribe(commandModel => { - this.confirmModalService.confirm({ - message: 'Do you want to delete this merchant?', - yesText: 'yes delete this merchant', - yesClass: 'danger', - noText: 'no please dont', - noClass: 'light' - }).subscribe(result => { - if(result){ - this.dataSource.executeCommandByName(this.command, commandModel).subscribe( - res => { - this.dataSource.refresh(); - }, - err => { - console.log(err); - alert('failed'); - } - ); - } - }) - - }, error => { - - }); - } - -} diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.module.ts index fcfda3a..94314af 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.module.ts +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/confirm-modal/confirm-modal.module.ts @@ -3,18 +3,20 @@ import { CommonModule } from '@angular/common'; import { ConfirmModalComponent } from './confirm-modal-components/confirm-modal/confirm-modal.component'; import { ModalModule } from 'ngx-bootstrap/modal'; import { ConfirmModalService } from './confirm-modal.service'; -import { ConfirmModalDirective } from './confirm-modal.directive'; +import { CommandModule } from '../command/command.module'; + @NgModule({ - declarations: [ConfirmModalComponent, ConfirmModalDirective], + declarations: [ConfirmModalComponent], imports: [ CommonModule, + //CommandModule, ModalModule.forRoot(), ], - exports:[ConfirmModalDirective], + exports:[], providers: [ConfirmModalService] }) export class ConfirmModalModule { } diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/data-source-filter.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/data-source-filter.module.ts new file mode 100644 index 0000000..ca1bb73 --- /dev/null +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/data-source-filter.module.ts @@ -0,0 +1,27 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { DataSourceTextFilterComponent } from './text-filter/data-source-text-filter.component'; +import { FormsModule } from '@angular/forms'; +import { DataSourceNumberFilterComponent } from './number-filter/data-source-number-filter.component'; +import { DataSourceDatetimeFilterComponent } from './datetime-filter/data-source-datetime-filter.component'; +import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'; +import { PopoverModule } from 'ngx-bootstrap/popover'; +import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; +import { TooltipModule } from 'ngx-bootstrap/tooltip'; + + + + +@NgModule({ + declarations: [DataSourceTextFilterComponent, DataSourceNumberFilterComponent,DataSourceDatetimeFilterComponent], + imports: [ + CommonModule, + FormsModule, + BsDatepickerModule.forRoot(), + PopoverModule.forRoot(), + BsDropdownModule.forRoot(), + TooltipModule.forRoot() + ], + exports: [DataSourceTextFilterComponent, DataSourceNumberFilterComponent,DataSourceDatetimeFilterComponent] +}) +export class DataSourceFilterModule { } \ No newline at end of file diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.html new file mode 100644 index 0000000..0913396 --- /dev/null +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.html @@ -0,0 +1,76 @@ + +
+
+
+ +
+
+ +
+ +
+ +
+ +
+ + + +
+
+
+ + + + + \ No newline at end of file diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.scss b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.ts new file mode 100644 index 0000000..bc096f6 --- /dev/null +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.ts @@ -0,0 +1,150 @@ +import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; +import { IDataSource, ISimpleFilter, ICompositeFilter, IFilter,FilterType } from '@poweredsoft/data'; + + + +@Component({ + selector: 'psbx-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; + @Input() filterType: string; + @Output() filterTypeChanged: EventEmitter = new EventEmitter(); + + filterPopUpOpened: boolean = false; + isFiltering: boolean; + filterValue: Date = null; + filterTypes = [ + {key:'Equal', value: 'Equal'}, + {key:'Greater Than', value: 'GreaterThan'}, + {key:'Less Than', value: 'LessThan'}, + {key:'Greater Than Equal', value: 'GreaterThanOrEqual'}, + {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]; + } + + get isRangeFilter() { + return this.filterType == FilterType.COMPOSITE; + } + + ngOnInit(): void { + 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; + if (existingFilter) { + this.dataSource.query({ + page: 1, + filters: this.dataSource.filters.filter(t => t != existingFilter) + }) + } + + if (this.isRangeFilter){ + + let existingFilter2 = this.dataSource.filters.find(t=> t.type == 'Composite'); + this.dataSource.query({ + page: 1, + filters: this.dataSource.filters.filter(t => t != existingFilter2) + }) + } + } + applyFilter(){ + + this.isFiltering = true; + const filters = this.dataSource.filters; + let compositeF: any = null; + let freshFilter: ISimpleFilter = null; + let startDate:Date; + let endDate:Date; + + // TODO create filter here. + 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, + }, + { + and: true, + path: this.path, + type: 'LESSTHANOREQUAL', + value: endDate, + } + ] + } + + }else{ + freshFilter = { + type: this.filterType, + and: true, + path: this.path, + value: this.filterValue + } + } + + // TODO??? + // set this for gql better handling of variant. + //(freshFilter as IGraphQLFilter).__gqlVariantType = 'DATETIME'; + + + const existingFilterIndex = filters.findIndex(t => { + if (t.type == 'COMPOSITE') { + const compositeFilter = t as ICompositeFilter; + 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){ + filters.push(compositeF); + }else{ + filters.push(freshFilter); + } + + } else { + // replace it. + if(compositeF){ + filters[existingFilterIndex] = compositeF; + }else{ + filters[existingFilterIndex] = freshFilter; + } + } + + this.dataSource.query({ + filters: filters, + page: 1 + }) + } + + +} diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/number-filter/data-source-number-filter.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/number-filter/data-source-number-filter.component.html new file mode 100644 index 0000000..9a547c4 --- /dev/null +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/number-filter/data-source-number-filter.component.html @@ -0,0 +1,64 @@ + +
+
+
+ +
+ +
+ +
+ + + + + +
+
+ + + \ No newline at end of file diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/number-filter/data-source-number-filter.component.scss b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/number-filter/data-source-number-filter.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/number-filter/data-source-number-filter.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/number-filter/data-source-number-filter.component.ts new file mode 100644 index 0000000..c46f15c --- /dev/null +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/number-filter/data-source-number-filter.component.ts @@ -0,0 +1,71 @@ +import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core'; +import { IDataSource,IFilter, ISimpleFilter } from '@poweredsoft/data'; + + +@Component({ + selector: 'psbx-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; + @Input() path:string; + + filterType: string = 'Equal'; + filterValue: number = 0; + isFiltering: boolean; + filterTypes = [ + {key:'Equals', value: 'Equal'}, + {key:'Greater Than', value: 'GreaterThan'}, + {key:'Less Than', value: 'LessThan'}, + {key:'Greater Than Equal', value: 'GreaterThanOrEqual'}, + {key:'Less Than Equal', value: 'LessThanOrEqual'}, + ]; + filterIsOpenned: boolean = false; + + constructor() { } + + + ngOnInit(): void { + + + } + + clearFilter() { + this.filterValue = 0; + this.isFiltering = false; + 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) + }) + } + } + + applyFilter(){ + this.isFiltering = true; + const filters = this.dataSource.filters; + const existingFilter = filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter; + if (existingFilter) { + existingFilter.type = this.filterType; + existingFilter.value =this.filterValue.toString(); + } else { + filters.push({ + and: true, + type: this.filterType, + path: this.path, + value: this.filterValue.toString() + }) + } + + this.dataSource.query({ + filters: filters, + page: 1 + }) + } + + showTooltip(){ + return "Filter by "+ this.path; + } +} diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/text-filter/data-source-text-filter.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/text-filter/data-source-text-filter.component.html new file mode 100644 index 0000000..5f3c7bf --- /dev/null +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/text-filter/data-source-text-filter.component.html @@ -0,0 +1,66 @@ + + +
+ +
+
+ +
+ +
+ +
+ + + + + +
+
+ + + \ No newline at end of file diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/text-filter/data-source-text-filter.component.scss b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/text-filter/data-source-text-filter.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/text-filter/data-source-text-filter.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/text-filter/data-source-text-filter.component.ts new file mode 100644 index 0000000..012fd4e --- /dev/null +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/text-filter/data-source-text-filter.component.ts @@ -0,0 +1,75 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { IDataSource} from '@poweredsoft/data'; +import { ISimpleFilter } from '@poweredsoft/data'; +import { PopoverDirective } from 'ngx-bootstrap/popover'; + + +@Component({ + selector: 'psbx-ds-text-filter', + templateUrl: './data-source-text-filter.component.html', + styleUrls: ['./data-source-text-filter.component.scss'] +}) +export class DataSourceTextFilterComponent implements OnInit { + + @Input() dataSource : IDataSource; + @Input() path:string; + + filterType: string = 'Contains'; + filterValue: string = null; + isFiltering: boolean; + filterTypes = [ + {key:'Contains', value: 'Contains'}, + {key:'Equals', value: 'Equal'}, + {key:'Starts With', value: 'startsWith'}, + {key:'Ends With', value: 'endsWith'} + ]; + filterIsOpenned: boolean = false; + + constructor() { } + + + ngOnInit(): void { + + } + + clearFilter() { + this.filterValue = ''; + this.isFiltering = false; + 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) + }) + } + } + + applyFilter(pop: PopoverDirective = null){ + this.isFiltering = true; + const filters = this.dataSource.filters; + const existingFilter = filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter; + if (existingFilter) { + existingFilter.type = this.filterType; + existingFilter.value = this.filterValue; + } else { + filters.push({ + and: true, + type: this.filterType, + path: this.path, + value: this.filterValue + }) + } + + this.dataSource.query({ + filters: filters, + page: 1 + }) + + if (pop) + pop.hide(); + } + + showTooltip(){ + return "Filter by "+ this.path; + } +} diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/data-source-sorting.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/data-source-sorting.module.ts new file mode 100644 index 0000000..a4597b0 --- /dev/null +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/data-source-sorting.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { DataSourceSortingComponent } from './ds-sorting/data-source-sorting.component'; + + + +@NgModule({ + declarations: [DataSourceSortingComponent], + imports: [ + CommonModule + ], + exports:[DataSourceSortingComponent] +}) +export class DataSourceSortingModule { } diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/ds-sorting/data-source-sorting.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/ds-sorting/data-source-sorting.component.html new file mode 100644 index 0000000..b9e62bb --- /dev/null +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/ds-sorting/data-source-sorting.component.html @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/ds-sorting/data-source-sorting.component.scss b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/ds-sorting/data-source-sorting.component.scss new file mode 100644 index 0000000..3194e43 --- /dev/null +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/ds-sorting/data-source-sorting.component.scss @@ -0,0 +1,16 @@ +:host span.dropdown-toggle.sort-desc{ + transform: rotate(180deg); + display: inline-block; +} + +:host span{ + margin: 10px; +} + +:host .not-sorting-state{ + opacity: 0.3; +} + +:host .not-sorting-state:hover{ + opacity: 1; +} \ No newline at end of file diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/ds-sorting/data-source-sorting.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/ds-sorting/data-source-sorting.component.ts new file mode 100644 index 0000000..1b57287 --- /dev/null +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-sorting/ds-sorting/data-source-sorting.component.ts @@ -0,0 +1,38 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { IDataSource } from '@poweredsoft/data'; + +@Component({ + selector: 'psbx-ds-sorting', + templateUrl: './data-source-sorting.component.html', + styleUrls: ['./data-source-sorting.component.scss'] +}) +export class DataSourceSortingComponent implements OnInit { + + @Input() dataSource : IDataSource; + @Input() path:string; + isSorting: boolean =false; + isAscending:boolean = false; + constructor() { } + + ngOnInit(): void { + } + + sorting(){ + this.isSorting = true; + this.isAscending = !this.isAscending; + const existingSort = this.dataSource.sorts.find(t => t.path == this.path); + if (existingSort){ + existingSort.ascending = (this.isAscending)? true : false; + }else{ + this.dataSource.sorts.push({ + path: this.path, + ascending: (this.isAscending)? true : false + }) + } + this.dataSource.query({ + sorts: this.dataSource.sorts, + page: 1 + }) + } + +} diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/directives/form-group-command-modal.directive.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/directives/form-group-command-modal.directive.ts index c037cd1..e9be622 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/directives/form-group-command-modal.directive.ts +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/directives/form-group-command-modal.directive.ts @@ -29,9 +29,10 @@ export class FormGroupCommandModalDirective { @Input() refreshOnSuccess: boolean; @Input() commandText: string; @Input() cancelText: string; - @Input() isConfirmModal:boolean; @Output() formCreate: EventEmitter = new EventEmitter(); + @Output() success: EventEmitter = new EventEmitter(); + constructor(private modalService: BsModalService) { } @HostListener('click') @@ -47,25 +48,6 @@ export class FormGroupCommandModalDirective { shouldSetCommandModel: true } - if(this.isConfirmModal){ - - const initialState = { - dataSource: this.dataSource, - command: this.command, - template: this.template, - title: this.commandTitle, - refreshOnSuccess: this.refreshOnSuccess === undefined ? true : this.refreshOnSuccess, - commandText: this.commandText || 'OK', - cancelText: this.cancelText || 'Cancel', - commandModel:commandModel - }; - - this.modalService.show(ConfirmModalComponent, { - animated: this.animated === undefined ? true : this.animated, - initialState - }); - - }else{ this.formCreate.emit(event); if (event.formGroup == null) throw new Error('form group should be set, after form createEvent'); @@ -82,61 +64,18 @@ export class FormGroupCommandModalDirective { commandText: this.commandText || 'OK', cancelText: this.cancelText || 'Cancel', modelForm: event.formGroup, - commandModel:commandModel + commandModel:commandModel, + successEmitter: this.success }; this.modalService.show(FormGroupCommandModalComponent, { animated: this.animated === undefined ? true : this.animated, initialState }); - } + }, error => { }); } - // @HostListener('click') - // wasClicked() { - // this.dataSource.resolveCommandModelByName({ - // command: this.command, - // model: this.model - // }).subscribe(commandModel => { - // debugger; - // const event = { - // commandName: this.command, - // viewModel: this.model, - // commandModel: commandModel, - // shouldSetCommandModel: true - // } - - // this.formCreate.emit(event); - - // if (event.formGroup == null) - // throw new Error('form group should be set, after form createEvent'); - - // if (event.shouldSetCommandModel) - // event.formGroup.patchValue(commandModel); - - // const initialState = { - // dataSource: this.dataSource, - // command: this.command, - // template: this.template, - // title: this.commandTitle, - // refreshOnSuccess: this.refreshOnSuccess === undefined ? true : this.refreshOnSuccess, - // commandText: this.commandText || 'OK', - // cancelText: this.cancelText || 'Cancel', - // modelForm: event.formGroup, - // commandModel:commandModel - // }; - - // this.modalService.show(FormGroupCommandModalComponent, { - // animated: this.animated === undefined ? true : this.animated, - // initialState - // }); - - // }, error => { - - // }); - // } - } diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts index fd1766f..ad36c10 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, TemplateRef } from '@angular/core'; +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'; @@ -10,7 +10,7 @@ import { FormGroup, FormControl } from '@angular/forms'; templateUrl: './form-group-command-modal.component.html', styleUrls: ['./form-group-command-modal.component.scss'] }) -export class FormGroupCommandModalComponent implements OnInit { +export class FormGroupCommandModalComponent implements OnInit, OnDestroy { modelForm: FormGroup; @@ -24,10 +24,13 @@ export class FormGroupCommandModalComponent implements OnInit { cancelText: string; errorMessage: string; commandModel:any; - + successEmitter: EventEmitter; + private _notifyMessage: Subscription; private _validationError: Subscription; + + constructor(public modalRef: BsModalRef) { } ngOnDestroy(): void { @@ -37,9 +40,9 @@ export class FormGroupCommandModalComponent implements OnInit { ngOnInit(): void { this.errorMessage = null; - // this._notifyMessage = this.dataSource.notifyMessage$.subscribe(message => { + this._notifyMessage = this.dataSource.notifyMessage$.subscribe(message => { - // }); + }); this._validationError = this.dataSource.validationError$.subscribe(validatorErrors => { let validationSummary = ''; @@ -71,11 +74,12 @@ export class FormGroupCommandModalComponent implements OnInit { this.loading = false; }) ) - .subscribe(success => { + .subscribe(commandResult => { if (this.refreshOnSuccess) this.dataSource.refresh(); this.modalRef.hide(); + this.successEmitter.emit(commandResult); }, fail => { // you do not want to close on failure.. so just ignore.. }); diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/pagination/psbxPagination.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/pagination/pagination.module.ts similarity index 71% rename from projects/poweredsoft/ngx-bootstrap/src/lib/pagination/psbxPagination.module.ts rename to projects/poweredsoft/ngx-bootstrap/src/lib/pagination/pagination.module.ts index d083a02..af0621b 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/pagination/psbxPagination.module.ts +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/pagination/pagination.module.ts @@ -1,7 +1,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DataSourcePaginationComponent } from './data-source-pagination/data-source-pagination.component'; -import { PaginationModule } from 'ngx-bootstrap/pagination'; +import { PaginationModule as ValorPaginationModule } from 'ngx-bootstrap/pagination'; import { FormsModule } from '@angular/forms'; @@ -9,9 +9,9 @@ import { FormsModule } from '@angular/forms'; declarations: [DataSourcePaginationComponent], imports: [ CommonModule, - PaginationModule.forRoot(), + ValorPaginationModule.forRoot(), FormsModule ], exports:[DataSourcePaginationComponent] }) -export class psbxPaginationModule { } +export class PaginationModule { } diff --git a/projects/poweredsoft/ngx-bootstrap/src/public-api.ts b/projects/poweredsoft/ngx-bootstrap/src/public-api.ts index 3be61ff..1a78a1d 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/public-api.ts +++ b/projects/poweredsoft/ngx-bootstrap/src/public-api.ts @@ -6,10 +6,17 @@ export * from './lib/command-modal/command-modal.module'; 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/psbxPagination.module'; +export * from './lib/pagination/Pagination.module'; export * from './lib/pagination/data-source-pagination/data-source-pagination.component'; export * from './lib/confirm-modal/confirm-modal.module'; export * from './lib/confirm-modal/confirm-modal.service'; -export * from './lib/confirm-modal/confirm-modal.directive'; export * from './lib/spinner/spinner.module'; -export * from './lib/spinner/spinner/spinner.component'; \ No newline at end of file +export * from './lib/spinner/spinner/spinner.component'; +export * from './lib/data-source-filter/data-source-filter.module'; +export * from './lib/data-source-filter/text-filter/data-source-text-filter.component'; +export * from './lib/data-source-filter/number-filter/data-source-number-filter.component'; +export * from './lib/data-source-filter/datetime-filter/data-source-datetime-filter.component'; +export * from './lib/data-source-sorting/data-source-sorting.module'; +export * from './lib/data-source-sorting/ds-sorting/data-source-sorting.component'; +export * from './lib/command/command.module'; +export * from './lib/command/directives/command.directive'; \ No newline at end of file diff --git a/projects/poweredsoft/ngx-cdk-ui/package.json b/projects/poweredsoft/ngx-cdk-ui/package.json index f048475..b6e56ab 100644 --- a/projects/poweredsoft/ngx-cdk-ui/package.json +++ b/projects/poweredsoft/ngx-cdk-ui/package.json @@ -1,6 +1,6 @@ { "name": "@poweredsoft/ngx-cdk-ui", - "version": "0.0.1", + "version": "0.0.2", "peerDependencies": { "@angular/common": "^9.1.9", "@angular/core": "^9.1.9" diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts index f2fc2b8..40e579a 100644 --- a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts @@ -7,6 +7,8 @@ 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'; @@ -16,7 +18,7 @@ import { DataGridLoaderDirective } from './directives/data-grid-loader.directive declarations: [ DataGridComponent,DataGridColDirective,DataGridColHeaderDirective, DataGridCellDirective, DataGridFooterDirective, DataGridHeaderDirective, - DataGridLoaderDirective, + DataGridLoaderDirective, DataGridCellFilterDirective, DataGridColSortDirective, ], imports: [ @@ -25,6 +27,6 @@ import { DataGridLoaderDirective } from './directives/data-grid-loader.directive exports: [ DataGridComponent,DataGridColDirective,DataGridColHeaderDirective, DataGridCellDirective,DataGridFooterDirective, DataGridHeaderDirective, - DataGridLoaderDirective] + DataGridLoaderDirective,DataGridCellFilterDirective,DataGridColSortDirective] }) export class DataGridModule { } diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html index 28017fa..b50289b 100644 --- a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html @@ -2,18 +2,34 @@ - - + diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.scss b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.scss index e69de29..f8c69f8 100644 --- a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.scss +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.scss @@ -0,0 +1,10 @@ +:host .flex-container{ + display: flex; + justify-content: space-between; + align-items: center; +} + +:host .flex-item{ + margin-right: 1px; + height: 100%; +} \ No newline at end of file diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts index 1022f05..7d9124f 100644 --- a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts @@ -5,6 +5,8 @@ import { DataGridHeaderDirective } from '../directives/data-grid-header.directiv import { DataGridFooterDirective } from '../directives/data-grid-footer.directive'; import { DataGridLoaderDirective } from '../directives/data-grid-loader.directive'; import { Subscription } from 'rxjs'; +import { DataGridCellFilterDirective } from '../directives/data-grid-cell-filter.directive'; +import { DataGridColSortDirective } from '../directives/data-grid-col-sort.directive'; @Component({ selector: 'ps-data-grid', @@ -23,12 +25,15 @@ export class DataGridComponent implements OnInit, OnDestroy { @Input() dataSource: IDataSource; @Input() tableClasses: any; + @Input() headerClasses: any; @Input() noRecordsText: string; private _columns: string[]; private _dataSubscription: Subscription; private _loadingSubscription: Subscription; + _fiters:any + @Input() set columns(value: string[]) { this._columns = value; this.columnsChange.emit(value); @@ -69,12 +74,27 @@ export class DataGridComponent implements OnInit, OnDestroy { this.loading = isLoading; this.cdr.detectChanges(); }); + + } - console.log(this.loaders); + getSortingTemplate(columnName){ + const ret = this.getColumn(columnName); + if (ret && ret.sortTemplate) + return ret.sortTemplate.template; + + return null; + } + + getFilterTemplate(columnName){ + const ret = this.getColumn(columnName); + if (ret && ret.filterTemplate) + return ret.filterTemplate.template; + + return null; } getColumn(columnName: string) { - + if (!this.columnDefinitions) return null; @@ -86,6 +106,7 @@ export class DataGridComponent implements OnInit, OnDestroy { return ret; } + getColumnHeaderTemplate(columnName: string) { const ret = this.getColumn(columnName); if (ret && ret.headerTemplate) @@ -110,5 +131,13 @@ export class DataGridComponent implements OnInit, OnDestroy { return this.getColumnCellTemplate(columnName) ? true :false; } + hasFilterTemplate(columnName: string) { + return this.getFilterTemplate(columnName) ? true :false; + } + + hasSortingTemplate(columnName: string) { + return this.getSortingTemplate(columnName) ? true :false; + } + } diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-cell-filter.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-cell-filter.directive.ts new file mode 100644 index 0000000..5b77b36 --- /dev/null +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-cell-filter.directive.ts @@ -0,0 +1,10 @@ +import { Directive, TemplateRef } from '@angular/core'; + +@Directive({ + selector: '[psDataGridCellFilter]' +}) +export class DataGridCellFilterDirective { + + constructor(public template: TemplateRef) { } + +} diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col-sort.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col-sort.directive.ts new file mode 100644 index 0000000..c3eac1b --- /dev/null +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col-sort.directive.ts @@ -0,0 +1,10 @@ +import { Directive, TemplateRef } from '@angular/core'; + +@Directive({ + selector: '[psDataGridColSort]' +}) +export class DataGridColSortDirective { + + constructor(public template: TemplateRef) { } + +} diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col.directive.ts index 545a5fb..a7e15c8 100644 --- a/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col.directive.ts +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col.directive.ts @@ -1,6 +1,9 @@ -import { Directive, Input, ContentChild } from '@angular/core'; +import { Directive, Input, ContentChild, ContentChildren } 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: '[psDataGridCol]' @@ -10,6 +13,8 @@ export class DataGridColDirective { @Input('psDataGridCol') columnName:string; @ContentChild(DataGridColHeaderDirective) headerTemplate:DataGridColHeaderDirective; @ContentChild(DataGridCellDirective) cellTemplate:DataGridCellDirective; + @ContentChild(DataGridCellFilterDirective) filterTemplate: DataGridCellFilterDirective; + @ContentChild(DataGridColSortDirective) sortTemplate: DataGridColSortDirective; constructor() { } diff --git a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts index 6b98962..fc3e30d 100644 --- a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts +++ b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts @@ -9,4 +9,7 @@ export * from './lib/data-grid/directives/data-grid-col.directive'; export * from './lib/data-grid/directives/data-grid-col-header.directive'; export * from './lib/data-grid/directives/data-grid-header.directive'; export * from './lib/data-grid/directives/data-grid-footer.directive'; -export * from './lib/data-grid/directives/data-grid-loader.directive'; \ No newline at end of file +export * from './lib/data-grid/directives/data-grid-loader.directive'; +export * from './lib/data-grid/directives/data-grid-cell-filter.directive'; +export * from './lib/data-grid/directives/data-grid-col-sort.directive'; + diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index abeccd4..0e892d8 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -27,6 +27,14 @@ const routes: Routes = [ { path: 'pagination-demo', loadChildren: ()=> import('./pagination-demo/pagination-demo.module').then(m => m.PaginationDemoModule) + }, + { + path: 'grid-filter', + loadChildren: ()=> import('./grid-filter&sorting-demo/grid-filter-demo.module').then(m => m.GridFilterDemoModule) + }, + { + path: 'select', + loadChildren: ()=> import('./ng-select-demo/ng-select-demo.module').then(m => m.NgSelectDemoModule) } ]; diff --git a/src/app/app.component.html b/src/app/app.component.html index 1353de0..9a6dc95 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -21,9 +21,15 @@
  • pagination Demo
    • +
  • + Fitering Demo +
    • +
  • + NG-select +
    • -
    +
    diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 07accdd..8db6dce 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -10,6 +10,8 @@ import { HttpLink, HttpLinkModule } from 'apollo-angular-link-http'; import { DefaultOptions } from 'apollo-client'; import { InMemoryCache } from 'apollo-cache-inmemory'; import { HttpClientModule } from '@angular/common/http'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + export function app_Init(apollo: Apollo, httpLink: HttpLink) { return async () => { @@ -49,6 +51,7 @@ export function app_Init(apollo: Apollo, httpLink: HttpLink) { declarations: [ AppComponent, HomeComponent, + //SelectLabelTemplateDirective, ], imports: [ @@ -56,7 +59,8 @@ export function app_Init(apollo: Apollo, httpLink: HttpLink) { AppRoutingModule, HttpClientModule, ApolloModule, - HttpLinkModule + HttpLinkModule, + BrowserAnimationsModule ], providers: [ { diff --git a/src/app/command-modal-demo/command-modal-demo.module.ts b/src/app/command-modal-demo/command-modal-demo.module.ts index 1838a43..887a085 100644 --- a/src/app/command-modal-demo/command-modal-demo.module.ts +++ b/src/app/command-modal-demo/command-modal-demo.module.ts @@ -5,7 +5,7 @@ import { CommandModalDemoRoutingModule } from './command-modal-demo-routing.modu import { DataGridModule } from '@poweredsoft/ngx-cdk-ui'; import {FormsModule} from '@angular/forms'; -import { CommandModalModule, psbxPaginationModule, ConfirmModalModule } from '@poweredsoft/ngx-bootstrap'; +import { CommandModalModule, PaginationModule, ConfirmModalModule,CommandModule } from '@poweredsoft/ngx-bootstrap'; @NgModule({ declarations: [CommandModalDemoComponent], imports: [ @@ -14,8 +14,9 @@ import { CommandModalModule, psbxPaginationModule, ConfirmModalModule } from '@p DataGridModule, CommandModalModule, FormsModule, - psbxPaginationModule, - ConfirmModalModule + PaginationModule, + ConfirmModalModule, + CommandModule ] }) export class CommandModalDemoModule { } diff --git a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html index d3bfc3e..300292c 100644 --- a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html +++ b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html @@ -4,8 +4,10 @@ - + @@ -24,11 +26,26 @@ Actions +
    + + - + + +
    @@ -46,11 +63,13 @@ -
    + Name Address + Date +     \ No newline at end of file diff --git a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts index f0263ec..7ce5488 100644 --- a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts +++ b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts @@ -1,23 +1,28 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { IDataSource } from '@poweredsoft/data'; import { IMerchant } from 'src/app/data/services/IMerchant'; import { MerchantService } from 'src/app/data/services/merchant.service'; import { BsModalRef } from 'ngx-bootstrap/modal'; +import { Subscription } from 'rxjs'; @Component({ selector: 'ps-command-modal-demo', templateUrl: './command-modal-demo.component.html', styleUrls: ['./command-modal-demo.component.scss'] }) -export class CommandModalDemoComponent implements OnInit { +export class CommandModalDemoComponent implements OnInit,OnDestroy { columns = ['id','name', 'address', 'commands']; pages:any; merchantDataSource: IDataSource; + private _dataSubscription: Subscription; constructor(private merchantService: MerchantService){ this.merchantDataSource = this.createDataSource(); } + ngOnDestroy(): void { + this._dataSubscription.unsubscribe(); + } newMerchant(name: string) { this.merchantDataSource.executeCommandByName('addMerchant', { @@ -40,7 +45,7 @@ export class CommandModalDemoComponent implements OnInit { ngOnInit() { this.merchantDataSource.refresh(); - this.merchantDataSource.data$.subscribe(newData => { + this._dataSubscription = this.merchantDataSource.data$.subscribe(newData => { if (newData) this.pages = new Array(newData.numberOfPages); }); diff --git a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html index c63e8a7..2babb94 100644 --- a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html +++ b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html @@ -2,14 +2,11 @@ This is a demo for a grid. - - + + -

    Hey!

    -

    Welcome to my Grid!

    - - - + Some header
    ID
    @@ -27,11 +24,10 @@ Actions - + - Footer works!     \ No newline at end of file diff --git a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts index b6307fc..fe3c3d3 100644 --- a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts +++ b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts @@ -1,22 +1,29 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { DataSource, IDataSource, IQueryExecutionResult, IQueryExecutionGroupResult } from '@poweredsoft/data'; import { IMerchant } from 'src/app/data/services/IMerchant'; import { MerchantService } from 'src/app/data/services/merchant.service'; +import { Subscription } from 'rxjs'; @Component({ selector: 'ps-data-grid-demo-home', templateUrl: './data-grid-demo-home.component.html', styleUrls: ['./data-grid-demo-home.component.scss'] }) -export class DataGridDemoHomeComponent implements OnInit { +export class DataGridDemoHomeComponent implements OnInit, OnDestroy { title = 'cdkDemo'; columns = ['id','name', 'address', 'commands'] merchantDataSource: IDataSource; + private _dataSubscription: Subscription; + private _loading: Subscription; constructor(private merchantService: MerchantService){ this.merchantDataSource = this.createDataSource(); } + ngOnDestroy(): void { + this._dataSubscription.unsubscribe(); + this._loading.unsubscribe(); + } @@ -41,11 +48,11 @@ export class DataGridDemoHomeComponent implements OnInit { } ngOnInit() { - this.merchantDataSource.loading$.subscribe(isLoading => { + this._loading = this.merchantDataSource.loading$.subscribe(isLoading => { console.log('merchant data source event loading', isLoading); }); - this.merchantDataSource.data$.subscribe(receivedData => { + this._dataSubscription = this.merchantDataSource.data$.subscribe(receivedData => { console.log('new data is coming from the server', receivedData); }); this.merchantDataSource.refresh(); diff --git a/src/app/data/services/IChangeMerchantNameCommand.ts b/src/app/data/services/IChangeMerchantCommand.ts similarity index 69% rename from src/app/data/services/IChangeMerchantNameCommand.ts rename to src/app/data/services/IChangeMerchantCommand.ts index 4cc391d..6a5d769 100644 --- a/src/app/data/services/IChangeMerchantNameCommand.ts +++ b/src/app/data/services/IChangeMerchantCommand.ts @@ -1,11 +1,13 @@ -export interface IChangeMerchantNameCommand { +export interface IChangeMerchantCommand { id: string; name: string; address: string; + ordering: number; } export interface IAddMerchantCommand { name: string; address: string; + ordering: number; } export interface IRemoveMerchantCommand { diff --git a/src/app/data/services/IMerchant.ts b/src/app/data/services/IMerchant.ts index 98cd34f..7785995 100644 --- a/src/app/data/services/IMerchant.ts +++ b/src/app/data/services/IMerchant.ts @@ -2,4 +2,6 @@ export interface IMerchant { id: string; name: string; address: string; + ordering:number; + openDate: Date; } diff --git a/src/app/data/services/merchant.service.ts b/src/app/data/services/merchant.service.ts index eaed80f..9e689c9 100644 --- a/src/app/data/services/merchant.service.ts +++ b/src/app/data/services/merchant.service.ts @@ -4,7 +4,7 @@ import { IDataSource, DataSource } from '@poweredsoft/data'; import { Apollo } from 'apollo-angular'; import gql from 'graphql-tag'; import { of } from 'rxjs'; -import { IChangeMerchantNameCommand, IAddMerchantCommand, IRemoveMerchantCommand } from './IChangeMerchantNameCommand'; +import { IChangeMerchantCommand as IChangeMerchantCommand, IAddMerchantCommand, IRemoveMerchantCommand } from './IChangeMerchantCommand'; import { IMerchant } from './IMerchant'; @Injectable({ @@ -23,7 +23,7 @@ export class MerchantService { >( 'merchants', 'GraphQLAdvanceQueryOfMerchantInput', - 'id, name, address', + 'id, name, address, ordering, openDate', (model) => model.id, { page: 1, @@ -31,8 +31,8 @@ export class MerchantService { }, true ); - - builder.addMutation( + + builder.addMutation( 'changeMerchant', //<-- command name 'changeMerchant', //<-- graph ql mutation name @@ -51,10 +51,11 @@ export class MerchantService { }, // viewModel -> transform to the form model for that command -> IChangeMerchantName - e => of({ + e => of({ id: e.model.id, name: e.model.name, - address: e.model.address + address: e.model.address, + ordering:e.model.ordering, }) ); @@ -80,7 +81,8 @@ export class MerchantService { // viewModel -> transform to the form model for that command -> IChangeMerchantName e => of({ name: 'A New merchant', - address: '' + address: '', + ordering: 11 }) ); diff --git a/src/app/form-group-modal-demo/form-group-modal-demo.module.ts b/src/app/form-group-modal-demo/form-group-modal-demo.module.ts index 03652ca..99abb13 100644 --- a/src/app/form-group-modal-demo/form-group-modal-demo.module.ts +++ b/src/app/form-group-modal-demo/form-group-modal-demo.module.ts @@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common'; import { FormGroupModalDemoComponent } from './form-group-modal-demo/form-group-modal-demo.component'; import { FormGroupModalDemoRoutingModule } from './form-group-modal-demo-routing.module' import { DataGridModule } from '@poweredsoft/ngx-cdk-ui'; -import { FormGroupCommandModalModule,CommandModalModule, psbxPaginationModule } from '@poweredsoft/ngx-bootstrap'; +import { FormGroupCommandModalModule, PaginationModule, CommandModule } from '@poweredsoft/ngx-bootstrap'; import { ReactiveFormsModule } from '@angular/forms'; import { ConfirmModalModule } from 'projects/poweredsoft/ngx-bootstrap/src/public-api'; @@ -17,8 +17,9 @@ import { ConfirmModalModule } from 'projects/poweredsoft/ngx-bootstrap/src/publi DataGridModule, FormGroupCommandModalModule, ReactiveFormsModule, - psbxPaginationModule, + PaginationModule, ConfirmModalModule, + CommandModule ] }) diff --git a/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html index 02442e8..a08fc2d 100644 --- a/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html +++ b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.html @@ -4,7 +4,7 @@ + (formCreate)="onFormCreate($event)" [template]="theModal">Create New Records
    ID
    @@ -19,16 +19,32 @@
    {{model.address}}
     + Actions - - - - - +
    + + + +
    diff --git a/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts index d6fb703..80a6ca9 100644 --- a/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts +++ b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts @@ -1,16 +1,18 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { IDataSource } from '@poweredsoft/data'; import { IMerchant } from 'src/app/data/services/IMerchant'; import { MerchantService } from 'src/app/data/services/merchant.service'; import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; import { IModelFormCreateEvent } from 'projects/poweredsoft/ngx-bootstrap/src/public-api'; +import { Subscription } from 'rxjs'; +import { THIS_EXPR } from '@angular/compiler/src/output/output_ast'; @Component({ selector: 'ps-form-group-modal-demo', templateUrl: './form-group-modal-demo.component.html', styleUrls: ['./form-group-modal-demo.component.scss'] }) -export class FormGroupModalDemoComponent implements OnInit { +export class FormGroupModalDemoComponent implements OnInit,OnDestroy { createDataSource(): IDataSource { return this.merchantService.createDataSource(); @@ -18,14 +20,18 @@ export class FormGroupModalDemoComponent implements OnInit { pages:any; merchantDataSource: IDataSource; + private _dataSubscription: Subscription; columns = ['id','name', 'address', 'actions']; constructor(private merchantService: MerchantService, private fb: FormBuilder) { this.merchantDataSource = this.createDataSource(); } + ngOnDestroy(): void { + this._dataSubscription.unsubscribe(); + } ngOnInit(): void { this.merchantDataSource.refresh(); - this.merchantDataSource.data$.subscribe(newData => { + this._dataSubscription = this.merchantDataSource.data$.subscribe(newData => { if (newData) this.pages = new Array(newData.numberOfPages); }); diff --git a/src/app/grid-filter&sorting-demo/grid-filter-demo-routing.module.ts b/src/app/grid-filter&sorting-demo/grid-filter-demo-routing.module.ts new file mode 100644 index 0000000..e5f8f53 --- /dev/null +++ b/src/app/grid-filter&sorting-demo/grid-filter-demo-routing.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { GridFilterDemoComponent } from './grid-filter-demo/grid-filter-demo.component'; + + +const routes: Routes = [{ + path: '', + component: GridFilterDemoComponent +}]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class GridFilterDemoRoutingModule { } diff --git a/src/app/grid-filter&sorting-demo/grid-filter-demo.module.ts b/src/app/grid-filter&sorting-demo/grid-filter-demo.module.ts new file mode 100644 index 0000000..a2e831e --- /dev/null +++ b/src/app/grid-filter&sorting-demo/grid-filter-demo.module.ts @@ -0,0 +1,26 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { GridFilterDemoRoutingModule } from './grid-filter-demo-routing.module'; +import { GridFilterDemoComponent } from './grid-filter-demo/grid-filter-demo.component'; +import { DataSourceFilterModule, PaginationModule, CommandModalModule, ConfirmModalModule, SpinnerModule, DataSourceSortingModule, CommandModule } from '@poweredsoft/ngx-bootstrap'; +import { DataGridModule } from '@poweredsoft/ngx-cdk-ui'; +import { FormsModule } from '@angular/forms'; + +@NgModule({ + declarations: [GridFilterDemoComponent], + imports: [ + CommonModule, + GridFilterDemoRoutingModule, + DataSourceFilterModule, + PaginationModule, + DataGridModule, + CommandModalModule, + ConfirmModalModule, + FormsModule, + SpinnerModule, + DataSourceSortingModule, + CommandModule + ] +}) +export class GridFilterDemoModule { } diff --git a/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.html b/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.html new file mode 100644 index 0000000..34ca93a --- /dev/null +++ b/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.html @@ -0,0 +1,105 @@ +

    grid-filter-demo works!

    + + + + + + + + + + + ID + + + {{model.id}} + + + + Name + + + {{model.name}} + + + + Address + {{model.address}} + + + + + + + Priority + {{model.ordering}} + + + + + + + Open Date + {{model.openDate}} + + + + + + + Actions + +
    + +
    + +     +     + + + +     + + + + + + + + + + + + + + + + +
    +

    Do you want to confirm?

    + + +
    +     + + + diff --git a/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.scss b/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.ts b/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.ts new file mode 100644 index 0000000..d950b97 --- /dev/null +++ b/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.ts @@ -0,0 +1,35 @@ +import { Component, OnInit } from '@angular/core'; +import { IDataSource, ISimpleFilter } from '@poweredsoft/data'; +import { IMerchant } from 'src/app/data/services/IMerchant'; +import { MerchantService } from 'src/app/data/services/merchant.service'; +import { ConfirmModalService } from '@poweredsoft/ngx-bootstrap'; + +@Component({ + selector: 'ps-grid-filter-demo', + templateUrl: './grid-filter-demo.component.html', + styleUrls: ['./grid-filter-demo.component.scss'] +}) +export class GridFilterDemoComponent implements OnInit { + + columns = ['id','name', 'address', 'ordering','openDate', 'commands'] + merchantDataSource: IDataSource; + constructor(private merchantService: MerchantService){ + this.merchantDataSource = this.createDataSource(); + } + + pages:any; + filteredResults:any; + somefilter:any; + + createDataSource(): IDataSource { + return this.merchantService.createDataSource(); + + } + + ngOnInit() { + this.merchantDataSource.refresh(); + + } + + +} diff --git a/src/app/ng-select-demo/ng-select-demo-routing.module.ts b/src/app/ng-select-demo/ng-select-demo-routing.module.ts new file mode 100644 index 0000000..d6cee6c --- /dev/null +++ b/src/app/ng-select-demo/ng-select-demo-routing.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from "@angular/core"; +import { RouterModule, Routes } from '@angular/router'; +import { NgSelectDemoComponent } from './ng-select-demo/ng-select-demo.component'; + + +const routes: Routes =[ + { + path: '', + component: NgSelectDemoComponent + } +] + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class NgSelectDemoRoutingModule { + +} \ No newline at end of file diff --git a/src/app/ng-select-demo/ng-select-demo.module.ts b/src/app/ng-select-demo/ng-select-demo.module.ts new file mode 100644 index 0000000..97d13e3 --- /dev/null +++ b/src/app/ng-select-demo/ng-select-demo.module.ts @@ -0,0 +1,26 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { NgSelectDemoComponent } from './ng-select-demo/ng-select-demo.component'; +import { NgSelectDemoRoutingModule } from './ng-select-demo-routing.module'; +import { NgSelectModule } from '@ng-select/ng-select'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { PsNgSelectModule } from '@poweredsoft/ng-select'; +import { CommandModule, CommandModalModule } from '@poweredsoft/ngx-bootstrap'; + + + + +@NgModule({ + declarations: [NgSelectDemoComponent], + imports: [ + CommonModule, + NgSelectModule, + FormsModule, + ReactiveFormsModule, + NgSelectDemoRoutingModule, + PsNgSelectModule, + CommandModule, + CommandModalModule + ] +}) +export class NgSelectDemoModule { } diff --git a/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html b/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html new file mode 100644 index 0000000..c2335b3 --- /dev/null +++ b/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html @@ -0,0 +1,69 @@ +

    Single Select Demo | ngModel | option template

    + +
    + {{ item.name }} - {{ item.address }} +
    +     + +selected: {{ myValue | json }} + +

    Single Select With Form | formGroup | option template

    +
    + +
    + Merchant: {{ item.name }} - Address: {{ item.address }} +
    +     + +selected: {{ myForm.value | json }} + +

    Single Select Demo | label Template

    + +
    + Merchant: {{ item.name }} - Address: {{ item.address }} +
    + +
    + Name: {{ item.name }} - Address: {{item.address }} +
    +     +selected: {{ myValue3 | json }} + +

    Single Select Demo | notFound Template

    + +
    +
    + No data found for "{{searchTerm}}" + +
    +
    +     +selected: {{ myValue2 | json }} + +

    Multi-Select Demo

    + +
    + Name: {{ item.name }} - Address: {{item.address }} +
    + + {{ item.name }} + +     +selected: {{ myValue4 | json }} + + +
    + Name + + Address + + +     \ No newline at end of file diff --git a/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.scss b/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.ts b/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.ts new file mode 100644 index 0000000..ba2add8 --- /dev/null +++ b/src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.ts @@ -0,0 +1,47 @@ +import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; +import { MerchantService } from 'src/app/data/services/merchant.service'; + +import { IMerchant } from 'src/app/data/services/IMerchant'; +import { Observable, Subject } from 'rxjs'; +import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators'; +import { IDataSource, ISimpleFilter } from '@poweredsoft/data'; +import { FormBuilder, FormGroup } from '@angular/forms'; + +@Component({ + selector: 'ps-ng-select-demo', + templateUrl: './ng-select-demo.component.html', + styleUrls: ['./ng-select-demo.component.scss'] +}) +export class NgSelectDemoComponent implements OnInit { + + merchantDataSource: IDataSource; + merchantDataSource2: IDataSource; + merchantDataSource3: IDataSource; + merchantDataSource4: IDataSource; + + selectedValue: IMerchant; + + myForm: FormGroup; + myValue: string; + myValue2: string; + myValue3: string; + myValue4: string; + + constructor(private merchantService: MerchantService, private fb: FormBuilder + ) { + this.merchantDataSource = merchantService.createDataSource(); //Assign the dataSource + this.merchantDataSource2 = merchantService.createDataSource(); + this.merchantDataSource3 = merchantService.createDataSource(); + this.merchantDataSource4 = merchantService.createDataSource(); + this.myForm = fb.group({ + 'merchantId': [null] + }) + } + + ngOnInit(): void { + + } + + + +} diff --git a/src/app/pagination-demo/pagination-demo.module.ts b/src/app/pagination-demo/pagination-demo.module.ts index fa4b050..90736d9 100644 --- a/src/app/pagination-demo/pagination-demo.module.ts +++ b/src/app/pagination-demo/pagination-demo.module.ts @@ -4,7 +4,7 @@ import { CommonModule } from '@angular/common'; import { PaginationDemoRoutingModule } from './pagination-demo-routing.module'; import { PaginationDemoComponent } from './pagination-demo/pagination/pagination-demo.component'; import { DataGridModule } from '@poweredsoft/ngx-cdk-ui'; -import { psbxPaginationModule, CommandModalModule, ConfirmModalModule,SpinnerModule } from '@poweredsoft/ngx-bootstrap'; +import { PaginationModule, CommandModalModule, ConfirmModalModule,SpinnerModule, CommandModule } from '@poweredsoft/ngx-bootstrap'; import { FormsModule } from '@angular/forms'; import { ModalModule } from 'ngx-bootstrap/modal'; @@ -16,12 +16,13 @@ import { ModalModule } from 'ngx-bootstrap/modal'; imports: [ CommonModule, PaginationDemoRoutingModule, - psbxPaginationModule, + PaginationModule, DataGridModule, CommandModalModule, ConfirmModalModule, FormsModule, - SpinnerModule + SpinnerModule, + CommandModule ] }) diff --git a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html index fad970a..73d1713 100644 --- a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html +++ b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.html @@ -16,18 +16,6 @@
    ID
    {{model.id}}
    - - - -     @@ -42,8 +30,29 @@ Actions - +
    + + + +
    +     @@ -63,7 +72,6 @@ - ; + private _dataSubscription: Subscription; constructor(private merchantService: MerchantService, private confirmModalService: ConfirmModalService){ this.merchantDataSource = this.createDataSource(); } + ngOnDestroy(): void { + this._dataSubscription.unsubscribe(); + } pages:any; - - // removeMerchant(id:string) { - // this.confirmModalService.confirm({ - // message: 'Do you want to delete this merchant?', - // yesText: 'yes delete this merchant', - // yesClass: 'danger', - // noText: 'no please dont', - // noClass: 'light' - // }).subscribe(result => { - // if(result){ - // this.merchantDataSource.executeCommandByName('removeMerchant', { - // id: id - // }).subscribe( - // res => { - // this.merchantDataSource.refresh(); - // }, - // err => { - // console.log(err); - // alert('failed'); - // } - // ); - // } - // }) - // } - createDataSource(): IDataSource { return this.merchantService.createDataSource(); @@ -51,7 +31,7 @@ export class PaginationDemoComponent implements OnInit { ngOnInit() { this.merchantDataSource.refresh(); - this.merchantDataSource.data$.subscribe(newData => { + this._dataSubscription = this.merchantDataSource.data$.subscribe(newData => { if (newData) this.pages = new Array(newData.numberOfPages); }); diff --git a/src/assets/32x32-blue.png b/src/assets/32x32-blue.png new file mode 100644 index 0000000..076fcfa Binary files /dev/null and b/src/assets/32x32-blue.png differ diff --git a/src/assets/avatar.png b/src/assets/avatar.png new file mode 100644 index 0000000..796e320 Binary files /dev/null and b/src/assets/avatar.png differ diff --git a/src/styles.scss b/src/styles.scss index 5a3eeda..a013fb2 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,2 +1,4 @@ /* You can add global styles to this file, and also import other style files */ -@import '~bootstrap/scss/bootstrap'; \ No newline at end of file +@import '~bootstrap/scss/bootstrap'; +@import '~ngx-bootstrap/datepicker/bs-datepicker.css'; +@import "~@ng-select/ng-select/themes/default.theme.css"; \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 8259035..ba18609 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,6 +23,10 @@ "@poweredsoft/ngx-bootstrap": [ "dist/poweredsoft/ngx-bootstrap/poweredsoft-ngx-bootstrap", "dist/poweredsoft/ngx-bootstrap" + ], + "@poweredsoft/ng-select": [ + "dist/poweredsoft/ng-select/poweredsoft-ng-select", + "dist/poweredsoft/ng-select" ] } },
    +
    - - - +
    +
    + + + +
    + +
    + + + + + + + + +
    + +