Using the JSDO and DataSource components in an Angular web app (Angular 6.x)

Angular Version: 6.1.0
JSDO Version: 6.0.0

Setup

• npm -g install @angular/[email protected]
• ng new jsdo-angular
• cd jsdo-angular
• npm install @progress/jsdo-angular
• ng serve

See https://cli.angular.io for info on Angular CLI.

Code for app.component.css

li:focus {
    background: lightgreen;
}

.active {
    background-color: lightgreen;
}

Code for app.component.html

<h2>{{title}}</h2>

<div>
    <div>
        <button (click)="newItem()">New</button>
        <button (click)="saveItem()">Save</button>
        <button (click)="deleteItem()">Delete</button>
    </div>
    <div style="background-color: lightcoral;">{{appMessage}}</div>
    <div style="width: 300px; float: left;">
        <ul style="list-style-type:none;">
            <li *ngFor="let item of items; let i = index" 
                [class.active]="isSelected(i)" 
                [attr.data-index]="i" 
                tabindex="1" (click)="selectItem(i)">{{item.Name}}</li>
        </ul>
    </div>
    <div style="margin-left: 300px;">
        <div style="width: 50%; padding: 10px;">
            <label>CustNum</label>
            <input [value]="customer.CustNum" disabled="false" />
        </div>
        <div style="width: 50%; padding: 10px;">
            <label>Name</label>
            <input [value]="customer.Name" (input)="customer.Name = $event.target.value" />
        </div>
        <div style="width: 50%; padding: 10px;">
            <label>State</label>
            <input [value]="customer.State" (input)="customer.State = $event.target.value" />
        </div>
        <div style="width: 50%; padding: 10px;">
                <label>Balance</label>
                <input [value]="customer.Balance" (input)="customer.Balance = $event.target.value" />
            </div>        
    </div>
    <div style="clear: both;"></div>
</div>

Code for app.component.ts

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { progress } from '@progress/jsdo-core';
import {
    DataResult,
    DataSource,
    DataSourceOptions } from '@progress/jsdo-angular';

const serviceURI = 'https://oemobiledemo.progress.com/OEMobileDemoServices';
const catalogURI = 'https://oemobiledemo.progress.com/OEMobileDemoServices/static/SportsService.json';

const CUSTOMER_TEMPLATE = {
    CustNum: '',
    Name: '(new customer)',
    State: 'HI',
    Balance: 0
};

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'Customers in Hawaii';
    appMessage = '';
    items;
    selectedItem;
    customer = CUSTOMER_TEMPLATE;

    private dataSource;

    constructor() {
        this.createSession();
    }

    createSession() {
        progress.data.getSession({
            serviceURI,
            catalogURI,
            authenticationModel: 'anonymous'
        }).then(() => {
            this.dataSource = new DataSource({
                jsdo: new progress.data.JSDO({
                    name: 'Customer'
                })
            });
            this.readCustomers();
        }, () => {
            console.log('Error while creating session.');
        });
    }

    isSelected(idx) {
        return this.selectedItem === idx;
    }

    selectItem(idx) {
        this.selectedItem = idx < this.items.length ? idx : 0;
        this.customer = this.items[this.selectedItem];
    }

    readCustomers() {
        this.appMessage = '';
        this.dataSource.read({
            filter: {
                field: 'State',
                operator: 'eq',
                value: 'HI'
            }
        }).subscribe((myData: DataResult) => {
            this.items = myData.data;
            this.selectItem(this.selectedItem);
        });
    }

    newItem() {
        this.appMessage = '';
        this.customer = CUSTOMER_TEMPLATE;
        this.items.unshift(this.customer);
    }

    saveItem() {
        this.appMessage = '';

        if (this.customer['_id']) {
            // Update record using the specified _id
            this.dataSource.update(this.customer);
        } else {
            // Create a new record if _id is not specified
            this.dataSource.create(this.customer);
        }
        this.dataSource.saveChanges().subscribe((myData) => {
            console.log('DEBUG: myData: ');
            console.log(myData);
            this.readCustomers();
        }, (error: Error) => {
            this.appMessage = 'Error: ' + error.message;
        });
    }

    deleteItem() {
        this.appMessage = '';

        this.dataSource.remove(this.customer);
        this.dataSource.saveChanges().subscribe((myData) => {
            console.log('DEBUG: myData: ');
            console.log(myData);
            this.readCustomers();
        }, (error: Error) => {
            this.appMessage = 'Error: ' + error.message;
        });
    }
}