diff --git a/package-lock.json b/package-lock.json index ca6e81b..a78a483 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1684,9 +1684,9 @@ } }, "@poweredsoft/ngx-data": { - "version": "0.0.16", - "resolved": "https://registry.npmjs.org/@poweredsoft/ngx-data/-/ngx-data-0.0.16.tgz", - "integrity": "sha512-hk5eNvzGkotTfu0GfksOK9KtLGVUtwc/9JSSKWRIejF04oaXeBZ6PZ6s62YRnZ/EEG5JA0bQdZSHiPlaEapeeQ==", + "version": "0.0.21", + "resolved": "https://registry.npmjs.org/@poweredsoft/ngx-data/-/ngx-data-0.0.21.tgz", + "integrity": "sha512-+g8plxcrivlnd5VBsHtGiqfXabRlDeYeyQI5lOCZRlfLt+IwIlCUB5kS0Hm3LvWZddyQvhg/stAzaeao0uyt3A==", "requires": { "tslib": "^1.9.0" } diff --git a/package.json b/package.json index 6fa2c8a..cb21677 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "@angular/router": "~9.1.4", "@ng-select/ng-select": "^4.0.1", "@poweredsoft/data": "0.0.30", - "@poweredsoft/ngx-data": "0.0.16", + "@poweredsoft/ngx-data": "0.0.21", "@poweredsoft/ngx-data-apollo": "0.0.10", "apollo-angular": "^1.8.0", "apollo-angular-link-http": "^1.9.0", diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/view/directives/view-content.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/view/directives/view-content.directive.ts new file mode 100644 index 0000000..35542c5 --- /dev/null +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/view/directives/view-content.directive.ts @@ -0,0 +1,10 @@ +import { Directive, TemplateRef } from '@angular/core'; + +@Directive({ + selector: '[psViewContent]' +}) +export class ViewContentDirective { + + constructor(public template: TemplateRef) { } + +} diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/view/directives/view-loading.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/view/directives/view-loading.directive.ts new file mode 100644 index 0000000..150b118 --- /dev/null +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/view/directives/view-loading.directive.ts @@ -0,0 +1,10 @@ +import { Directive, TemplateRef } from '@angular/core'; + +@Directive({ + selector: '[psViewLoading]' +}) +export class ViewLoadingDirective { + + constructor(public template: TemplateRef) { } + +} diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/view/directives/view-no-records.directive.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/view/directives/view-no-records.directive.ts new file mode 100644 index 0000000..9ef639b --- /dev/null +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/view/directives/view-no-records.directive.ts @@ -0,0 +1,10 @@ +import { Directive, TemplateRef } from '@angular/core'; + +@Directive({ + selector: '[psViewNoRecords]' +}) +export class ViewNoRecordsDirective { + + constructor(public template: TemplateRef) { } + +} diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/view/view.component.html b/projects/poweredsoft/ngx-cdk-ui/src/lib/view/view.component.html new file mode 100644 index 0000000..11c524c --- /dev/null +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/view/view.component.html @@ -0,0 +1,27 @@ + + + + + + {{ finalLoadingText }} + + + + + + + + + + + + + + + + +
{{noRecords}}
+ + \ No newline at end of file diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/view/view.component.scss b/projects/poweredsoft/ngx-cdk-ui/src/lib/view/view.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/view/view.component.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/view/view.component.ts new file mode 100644 index 0000000..36264b2 --- /dev/null +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/view/view.component.ts @@ -0,0 +1,84 @@ +import { Component, ContentChild, Input, OnDestroy, OnInit } from '@angular/core'; +import { IDataSource } from '@poweredsoft/data'; +import { Subscription } from 'rxjs'; +import { ViewContentDirective } from './directives/view-content.directive'; +import { ViewLoadingDirective } from './directives/view-loading.directive'; +import { ViewNoRecordsDirective } from './directives/view-no-records.directive'; + +@Component({ + selector: 'ps-view', + templateUrl: './view.component.html', + styleUrls: ['./view.component.scss'] +}) +export class ViewComponent implements OnInit, OnDestroy { + + + constructor() { } + + @Input() dataSource: IDataSource; + @Input() noRecordsText: string; + @Input() loadingText: string; + @Input() noRecordClasses: any; + + @ContentChild(ViewContentDirective) viewContent: ViewContentDirective; + @ContentChild(ViewLoadingDirective) viewLoading: ViewLoadingDirective; + @ContentChild(ViewNoRecordsDirective) viewNoRecords: ViewNoRecordsDirective; + + loading:boolean = false; + private _viewModel: any = null; + + private _dataSubscription: Subscription; + private _loadingSubscription: Subscription; + + ngOnDestroy(): void { + this._dataSubscription.unsubscribe(); + this._loadingSubscription.unsubscribe(); + } + + ngOnInit(): void { + this._dataSubscription = this.dataSource.data$.subscribe(newData => { + if (newData && newData.data && newData.data.length) + this._viewModel = newData.data[0]; + }); + + this._loadingSubscription = this.dataSource.loading$.subscribe(loading => { + this.loading = loading; + }); + } + + get noData(){ + return this._viewModel ? false : true; + } + + get viewModel() { + return this._viewModel; + } + + get noRecords(){ + return this.noRecordsText || "No records..."; + } + + get finalLoadingText() { + return this.loadingText || 'Loading ...'; + } + + getViewContentTemplate(){ + if(this.viewContent == null) + return null; + return this.viewContent.template; + } + + getViewNoRecordsTemplate(){ + if(this.viewNoRecords == null) + return null; + return this.viewNoRecords.template; + } + + getViewLoadingTemplate(){ + if(this.viewLoading == null) + return null; + return this.viewLoading.template; + } + +} + diff --git a/projects/poweredsoft/ngx-cdk-ui/src/lib/view/view.module.ts b/projects/poweredsoft/ngx-cdk-ui/src/lib/view/view.module.ts new file mode 100644 index 0000000..362a94a --- /dev/null +++ b/projects/poweredsoft/ngx-cdk-ui/src/lib/view/view.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { ViewComponent } from './view.component'; +import { ViewContentDirective } from './directives/view-content.directive'; +import { ViewLoadingDirective } from './directives/view-loading.directive'; +import { ViewNoRecordsDirective } from './directives/view-no-records.directive'; + + + +@NgModule({ + declarations: [ViewComponent, ViewContentDirective, ViewLoadingDirective, ViewNoRecordsDirective], + imports: [ + CommonModule + ], + exports: [ViewComponent, ViewContentDirective, ViewLoadingDirective, ViewNoRecordsDirective] +}) +export class ViewModule { } diff --git a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts index cfd6a68..8d86ba6 100644 --- a/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts +++ b/projects/poweredsoft/ngx-cdk-ui/src/public-api.ts @@ -2,6 +2,7 @@ * Public API Surface of ngx-cdk-ui */ +// data grid. export * from './lib/data-grid/data-grid.module'; export * from './lib/data-grid/data-grid/data-grid.component'; export * from './lib/data-grid/directives/data-grid-cell.directive'; @@ -21,9 +22,17 @@ export * from './lib/list-view/directives/list-view-header.directive'; export * from './lib/list-view/directives/list-view-footer.directive'; export * from './lib/list-view/directives/list-view-seperator.directive'; +// search export * from './lib/ds-search/ds-search.module'; export * from './lib/ds-search/ds-search.component'; // ds validation export * from './lib/ds-validation-error/ds-validation-error.module'; -export * from './lib/ds-validation-error/ds-validation-error.component'; \ No newline at end of file +export * from './lib/ds-validation-error/ds-validation-error.component'; + +// view +export * from './lib/view/view.module'; +export * from './lib/view/view.component'; +export * from './lib/view/directives/view-content.directive'; +export * from './lib/view/directives/view-loading.directive'; +export * from './lib/view/directives/view-no-records.directive'; \ No newline at end of file diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 0e892d8..cf15df7 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -12,6 +12,10 @@ const routes: Routes = [ path: 'data-grid', loadChildren: () => import('./data-grid-demo/data-grid-demo.module').then(m => m.DataGridDemoModule) }, + { + path: 'view', + loadChildren: () => import('./view-demo/view-demo.module').then(m => m.ViewDemoModule) + }, { path: 'list-view', loadChildren: () => import('./list-view-demo/list-view-demo.module').then(m => m.ListViewDemoModule) diff --git a/src/app/app.component.html b/src/app/app.component.html index 9a6dc95..02450bf 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -12,6 +12,9 @@
  • List View
    • +
  • + View +
  • Command Modal
    • diff --git a/src/app/view-demo/view-demo-page/view-demo-page.component.html b/src/app/view-demo/view-demo-page/view-demo-page.component.html new file mode 100644 index 0000000..002a193 --- /dev/null +++ b/src/app/view-demo/view-demo-page/view-demo-page.component.html @@ -0,0 +1,104 @@ +

    Found

    + + +
    +
    + + {{ model.firstName }} {{ model.lastName }} +
    +
    + Hey, thank you! +
    +
    +     + +
    + Could not find record that was requested.
    + +
    +     + +
    + + + + + + + + + + + + + + + + + + +

    Loading ...

    +
    + +     +     + +
    +

    Not found

    + + +
    +
    + + {{ model.firstName }} {{ model.lastName }} +
    +
    + Hey, thank you! +
    +
    +     + +
    + Could not find record that was requested.
    + +
    +     + +
    + + + + + + + + + + + + + + + + + + +

    Loading ...

    +
    + +     +     \ No newline at end of file diff --git a/src/app/view-demo/view-demo-page/view-demo-page.component.scss b/src/app/view-demo/view-demo-page/view-demo-page.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/view-demo/view-demo-page/view-demo-page.component.ts b/src/app/view-demo/view-demo-page/view-demo-page.component.ts new file mode 100644 index 0000000..f23d488 --- /dev/null +++ b/src/app/view-demo/view-demo-page/view-demo-page.component.ts @@ -0,0 +1,52 @@ +import { Component, OnInit } from '@angular/core'; +import { IDataSource } from '@poweredsoft/data'; +import { HttpDataSourceService } from '@poweredsoft/ngx-data'; +import { of } from 'rxjs'; + +interface OnePersonQuery { + personId: number +} + +interface Person { + id: number, + firstName: string, + lastName: string +} + +@Component({ + selector: 'ps-view-demo-page', + templateUrl: './view-demo-page.component.html', + styleUrls: ['./view-demo-page.component.scss'] +}) +export class ViewDemoPageComponent implements OnInit { + + dataSource: IDataSource; + dataSource2: IDataSource; + constructor(private hdss: HttpDataSourceService) { + this.dataSource = this.hdss.singleBuilder() + .keyResolver(m => m.id) + .queryUrl('https://localhost:5001/api/query/onePerson') + .beforeRead(_ => { + return of({ + personId: 1 + }) + }) + .createDataSource(); + + this.dataSource2 = this.hdss.singleBuilder() + .keyResolver(m => m.id) + .queryUrl('https://localhost:5001/api/query/onePerson') + .beforeRead(_ => { + return of({ + personId: 3 + }); + }) + .createDataSource(); + } + + ngOnInit(): void { + this.dataSource.refresh(); + this.dataSource2.refresh(); + } + +} diff --git a/src/app/view-demo/view-demo-routing.module.ts b/src/app/view-demo/view-demo-routing.module.ts new file mode 100644 index 0000000..2618c90 --- /dev/null +++ b/src/app/view-demo/view-demo-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { ViewDemoPageComponent } from './view-demo-page/view-demo-page.component'; + + +const routes: Routes = [ + { + path: '', + component: ViewDemoPageComponent + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class ViewDemoRoutingModule { } diff --git a/src/app/view-demo/view-demo.module.ts b/src/app/view-demo/view-demo.module.ts new file mode 100644 index 0000000..6cea06f --- /dev/null +++ b/src/app/view-demo/view-demo.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { ViewDemoRoutingModule } from './view-demo-routing.module'; +import { ViewDemoPageComponent } from './view-demo-page/view-demo-page.component'; +import { ViewModule } from '@poweredsoft/ngx-cdk-ui'; + + +@NgModule({ + declarations: [ViewDemoPageComponent], + imports: [ + CommonModule, + ViewDemoRoutingModule, + CommonModule, + ViewModule + ] +}) +export class ViewDemoModule { }