view ready :)
This commit is contained in:
David Lebee
@@ -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)
|
||||
|
||||
@@ -12,6 +12,9 @@
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLink="list-view">List View</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLink="view">View</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLink="command-modal">Command Modal</a>
|
||||
</li>
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
<h1>Found</h1>
|
||||
<ps-view [dataSource]="dataSource">
|
||||
<ng-container *psViewContent="let model">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
|
||||
{{ model.firstName }} {{ model.lastName }}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Hey, thank you!
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *psViewNoRecords>
|
||||
<div class="alert alert-info text-center">
|
||||
Could not find record that was requested.<br>
|
||||
<svg style="height: 100px; width: 100px;" fill="none" stroke="#000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *psViewLoading>
|
||||
<div class="text-center mt-3">
|
||||
<svg style="height: 100px; "version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100"
|
||||
enable-background="new 0 0 100 100" xml:space="preserve">
|
||||
<rect fill="#000" width="3" height="100" transform="translate(0) rotate(180 3 50)">
|
||||
<animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
|
||||
repeatCount="indefinite" />
|
||||
</rect>
|
||||
<rect x="17" fill="#000" width="3" height="100" transform="translate(0) rotate(180 20 50)">
|
||||
<animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
|
||||
repeatCount="indefinite" begin="0.1s" />
|
||||
</rect>
|
||||
<rect x="40" fill="#000" width="3" height="100" transform="translate(0) rotate(180 40 50)">
|
||||
<animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
|
||||
repeatCount="indefinite" begin="0.3s" />
|
||||
</rect>
|
||||
<rect x="60" fill="#000" width="3" height="100" transform="translate(0) rotate(180 58 50)">
|
||||
<animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
|
||||
repeatCount="indefinite" begin="0.5s" />
|
||||
</rect>
|
||||
<rect x="80" fill="#000" width="3" height="100" transform="translate(0) rotate(180 76 50)">
|
||||
<animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
|
||||
repeatCount="indefinite" begin="0.1s" />
|
||||
</rect>
|
||||
</svg>
|
||||
|
||||
<h1 class="mt-3">Loading ...</h1>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
</ps-view>
|
||||
|
||||
<hr>
|
||||
<h1>Not found</h1>
|
||||
<ps-view [dataSource]="dataSource2">
|
||||
<ng-container *psViewContent="let model">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
|
||||
{{ model.firstName }} {{ model.lastName }}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Hey, thank you!
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *psViewNoRecords>
|
||||
<div class="alert alert-info text-center">
|
||||
Could not find record that was requested.<br>
|
||||
<svg style="height: 100px; width: 100px;" fill="none" stroke="#000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *psViewLoading>
|
||||
<div class="text-center mt-3">
|
||||
<svg style="height: 100px; "version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100"
|
||||
enable-background="new 0 0 100 100" xml:space="preserve">
|
||||
<rect fill="#000" width="3" height="100" transform="translate(0) rotate(180 3 50)">
|
||||
<animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
|
||||
repeatCount="indefinite" />
|
||||
</rect>
|
||||
<rect x="17" fill="#000" width="3" height="100" transform="translate(0) rotate(180 20 50)">
|
||||
<animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
|
||||
repeatCount="indefinite" begin="0.1s" />
|
||||
</rect>
|
||||
<rect x="40" fill="#000" width="3" height="100" transform="translate(0) rotate(180 40 50)">
|
||||
<animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
|
||||
repeatCount="indefinite" begin="0.3s" />
|
||||
</rect>
|
||||
<rect x="60" fill="#000" width="3" height="100" transform="translate(0) rotate(180 58 50)">
|
||||
<animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
|
||||
repeatCount="indefinite" begin="0.5s" />
|
||||
</rect>
|
||||
<rect x="80" fill="#000" width="3" height="100" transform="translate(0) rotate(180 76 50)">
|
||||
<animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30"
|
||||
repeatCount="indefinite" begin="0.1s" />
|
||||
</rect>
|
||||
</svg>
|
||||
|
||||
<h1 class="mt-3">Loading ...</h1>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
</ps-view>
|
||||
@@ -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<Person>;
|
||||
dataSource2: IDataSource<Person>;
|
||||
constructor(private hdss: HttpDataSourceService) {
|
||||
this.dataSource = this.hdss.singleBuilder<OnePersonQuery, Person, number>()
|
||||
.keyResolver(m => m.id)
|
||||
.queryUrl('https://localhost:5001/api/query/onePerson')
|
||||
.beforeRead(_ => {
|
||||
return of({
|
||||
personId: 1
|
||||
})
|
||||
})
|
||||
.createDataSource();
|
||||
|
||||
this.dataSource2 = this.hdss.singleBuilder<OnePersonQuery, Person, number>()
|
||||
.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();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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 { }
|
||||
@@ -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 { }
|
||||
Reference in New Issue
Block a user