ds-command

src/app/app-routing.module.ts

@@ -19,6 +19,9 @@ const routes: Routes = [
   {
     path: 'list-view',
     loadChildren: () => import('./list-view-demo/list-view-demo.module').then(m => m.ListViewDemoModule)
+  },{
+    path: 'ds-command',
+    loadChildren: () => import('./ds-command-demo/ds-command-demo.module').then(m => m.DsCommandDemoModule)
   },
   {
     path: 'command-modal',

src/app/app.component.html

@@ -15,6 +15,9 @@
         <li class="nav-item">
           <a class="nav-link" routerLink="view">View</a>
         </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLink="ds-command">Data Source Command</a>
+        </li>
         <li class="nav-item">
           <a class="nav-link" routerLink="command-modal">Command Modal</a>
         </li>

src/app/ds-command-demo/ds-command-demo-page/ds-command-demo-page.component.html

@@ -0,0 +1,60 @@
+<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">
+                {{ model.number }}
+                <ng-container *ngIf="model.extension">
+                    ,{{model.extension}}
+                </ng-container>
+
+            </div>
+            <div class="card-footer">
+                <button class="btn btn-primary btn-sm" (click)="formActivated = true">Change Phone Number</button>
+
+            </div>
+        </div>
+
+        <div class="card mt-2" *ngIf="formActivated">
+            <div class="card-body">
+                <ps-ds-command [dataSource]="dataSource" name="changePhone" (success)="onSuccess($event)"
+                    [model]="model">
+                    <ng-container *psDsCommandContent="let command; let loading=loading">
+                        <div class="form-group">
+                            <label>Number</label>
+                            <input type="text" class="form-control" [(ngModel)]="command.number" />
+                            <ps-ds-validation-error class="text-danger" [dataSource]="dataSource" field="number">
+                            </ps-ds-validation-error>
+                        </div>
+
+                        <div class="form-group">
+                            <label>Extension</label>
+                            <input type="text" class="form-control" [(ngModel)]="command.extension" />
+                            <ps-ds-validation-error class="text-danger" [dataSource]="dataSource" field="extension">
+                            </ps-ds-validation-error>
+                        </div>
+                    </ng-container>
+
+                    <div class="alert alert-danger mt-2" *psDsCommandValidation="let validationResult">
+                        <ng-container *ngFor="let propertyErrors of validationResult">
+                            <ng-container *ngFor="let err of propertyErrors.errors">
+                                {{ err }}<br>
+                            </ng-container>
+                        </ng-container>
+                    </div>
+
+                    <ng-container *psDsCommandFooter="let command; let loading=loading">
+                        <button class="btn btn-info" [disabled]="loading"
+                            (click)="formActivated = false">Cancel</button>
+                        &nbsp;
+                        <button class="btn btn-primary" [disabled]="loading" psDsCommandSubmit>Save</button>
+
+                    </ng-container>
+
+                </ps-ds-command>
+            </div>
+        </div>
+    </ng-container>
+</ps-view>

src/app/ds-command-demo/ds-command-demo-page/ds-command-demo-page.component.ts

@@ -0,0 +1,81 @@
+import { Component, OnInit } from '@angular/core';
+import { IDataSource, IDataSourceValidationError } from '@poweredsoft/data';
+import { HttpDataSourceService } from '@poweredsoft/ngx-data';
+import { of, throwError } from 'rxjs';
+
+interface ContactQuery {
+  contactId: number
+}
+
+interface Contact {
+  id: number;
+  firstName: string,
+  lastName: string,
+  number: string,
+  extension: string;
+}
+
+interface ChangeContactPhone {
+  contactId: number,
+  number: string,
+  extension: string
+}
+
+@Component({
+  selector: 'ps-ds-command-demo-page',
+  templateUrl: './ds-command-demo-page.component.html',
+  styleUrls: ['./ds-command-demo-page.component.scss']
+})
+export class DsCommandDemoPageComponent implements OnInit {
+
+  private contact: Contact = {
+    id: 1,
+    firstName: "David",
+    lastName: "Lebee",
+    extension: null,
+    number: "514 448 8444"
+  };
+
+  formActivated: boolean = false;
+  dataSource: IDataSource<Contact>;
+
+  constructor(private hdss: HttpDataSourceService) {
+    this.dataSource = this.hdss.singleBuilder<ContactQuery, Contact, number>()
+      .keyResolver(m => m.id)
+      .queryHandler(_ => of(this.contact))
+      .addCommandByCallback<ChangeContactPhone, ChangeContactPhone>("changePhone", (command) => {
+
+        if (!command.number || command.number.length == 0) {
+          return throwError({
+            status: 400,
+            error: {
+                errors: {
+                number: ['number is required']
+              }
+            }
+          })
+        }
+
+        return of(command);
+      }, e => {
+        return of(<ChangeContactPhone>{
+          contactId: e.model.id,
+          number: e.model.number,
+          extension: e.model.extension
+        });
+      })
+      .createDataSource();
+
+  }
+
+  ngOnInit(): void {
+    this.dataSource.refresh();
+  }
+
+  onSuccess(command: ChangeContactPhone) {
+    this.contact.number = command.number;
+    this.contact.extension = command.extension;
+    this.formActivated = false;
+  }
+
+}

src/app/ds-command-demo/ds-command-demo-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { DsCommandDemoPageComponent } from './ds-command-demo-page/ds-command-demo-page.component';
+
+
+const routes: Routes = [
+  {
+    path: '',
+    component: DsCommandDemoPageComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class DsCommandDemoRoutingModule { }

src/app/ds-command-demo/ds-command-demo.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DsCommandDemoRoutingModule } from './ds-command-demo-routing.module';
+import { DsCommandDemoPageComponent } from './ds-command-demo-page/ds-command-demo-page.component';
+import { DsCommandModule, DsValidationErrorModule, ViewModule } from '@poweredsoft/ngx-cdk-ui';
+import { FormsModule } from '@angular/forms';
+
+
+@NgModule({
+  declarations: [DsCommandDemoPageComponent],
+  imports: [
+    CommonModule,
+    DsCommandDemoRoutingModule,
+    DsCommandModule,
+    ViewModule,
+    FormsModule,
+    DsValidationErrorModule
+  ]
+})
+export class DsCommandDemoModule { }