tns-template-master-detail-progress-ng
Version:
Master-detail interface to display tables from a Progress backend and inspect and edit selected records.
253 lines (234 loc) • 10.3 kB
text/typescript
import { Component, OnInit } from "@angular/core";
import { ObservableArray } from "data/observable-array";
import { PageRoute, RouterExtensions } from "nativescript-angular/router";
import { alert, confirm } from "ui/dialogs";
import { ListPicker } from "ui/list-picker";
import { CustomerEditService } from "../shared/customer-edit.service";
import { Customer } from "../shared/customer.model";
import { CustomerService } from "../shared/customer.service";
import { State } from "../shared/state.model";
import { StateService } from "../shared/state.service";
/* ***********************************************************
* This is the item detail edit component.
* This component gets the selected data item, provides options to edit the item and saves the changes.
*************************************************************/
export class CustomerDetailEditComponent implements OnInit {
private _customer: Customer = new Customer({});
private _isBusy: boolean = false;
private _stateNameList: Array<string> = [];
private _stateList: Array<string> = [];
private _addMode: boolean = false;
private _stateIndexValue: number = 0;
private _editDetailTitle: string;
constructor(
private _customerService: CustomerService,
private _customerEditService: CustomerEditService,
private _pageRoute: PageRoute,
private _routerExtensions: RouterExtensions,
private _stateService: StateService
) { }
/* ***********************************************************
* Use the "ngOnInit" handler to get the data item id parameter passed through navigation.
* Get the data item details from the data service using this id and assign it to the
* private property that holds it inside the component.
*************************************************************/
ngOnInit(): void {
this.initializeEditOptions();
/* ***********************************************************
* Learn more about how to get navigation parameters in this documentation article:
* http://docs.nativescript.org/angular/core-concepts/angular-navigation.html#passing-parameter
*************************************************************/
this._pageRoute.activatedRoute
.switchMap((activatedRoute) => activatedRoute.params)
.forEach((params) => {
const customerId = params.id;
this._addMode = (params.addMode === "true" ? true : false);
this.editDetailTitle = ((this._addMode === true) ? "Create Customer" : "Edit Details");
// Note: startCreate() will create record client-side. This allows us to retreive initial values
this._customer = ((this._addMode === true) ? this._customerEditService.startCreate()
: this._customerEditService.startEdit(customerId));
const stateIndex = this._stateList.indexOf(this._customer.State);
this.stateIndexValue = (stateIndex >= 0) ? stateIndex : 0;
});
}
get isBusy(): boolean {
return this._isBusy;
}
get editDetailTitle(): string {
return this._editDetailTitle;
}
set editDetailTitle(value: string) {
this._editDetailTitle = value;
}
get customer(): Customer {
return this._customer;
}
get stateNames(): Array<string> {
if (this._stateNameList.length > 0) {
return this._stateNameList;
} else {
return null;
}
}
get stateIndexValue(): number {
return this._stateIndexValue;
}
set stateIndexValue(value: number) {
this._stateIndexValue = value;
}
get creditLimitValue(): number {
return this._customer.CreditLimit;
}
set creditLimitValue(value: number) {
// force iOS UISlider to work with discrete steps
this._customer.CreditLimit = Math.round(value);
}
get toggleAdd(): string {
if (!this._addMode) {
return "item-list-even text-red";
} else {
return " item-list-hidden text-white";
}
}
get toggleOdd(): string {
if (!this._addMode) {
return "item-list-odd";
} else {
return " item-list-hidden";
}
}
/* ***********************************************************
* The edit cancel button navigates back to:
* - the item details page for an edit
* - the list page for a create
*************************************************************/
onCancelButtonTap(): void {
if (this._addMode) {
this._routerExtensions.navigate(["/customers"], {
clearHistory: true,
animated: true,
transition: {
name: "slideBottom",
duration: 200,
curve: "ease"
}
});
} else {
this._routerExtensions.backToPreviousPage();
}
}
/* ***********************************************************
* The edit done button uses the data service to save the updated values
* of the data item details. An existing record is being updated, or
* a new record will be added.
* Check out the data service as customers/shared/customer.service.ts
*************************************************************/
onDoneButtonTap(): void {
this._isBusy = true;
// Update service with changes
this._customerService.update(this._customer)
.then((result) => {
this.successOnDone(result);
})
.catch((error) => {
this.failureOnDone(error);
});
}
successOnDone(result): void {
this._isBusy = false;
this._routerExtensions.navigate(["/customers"], {
clearHistory: true,
animated: true,
transition: {
name: "slideBottom",
duration: 200,
curve: "ease"
}
});
}
failureOnDone(error): void {
const errorMessage = ((error && error.message) ? error.message : "Unknown Error when changes sent to server");
this._isBusy = false;
alert({ title: "Error", message: errorMessage, okButtonText: "Ok" });
}
selectedIndexChanged(args) {
const picker = <ListPicker>args.object;
// List is displayed with State.StateNames, but Customer.State maps to State.State property
this._customer.State = this._stateList[picker.selectedIndex];
}
onDeleteButtonTap(): void {
if (!this._addMode) {
const customerItem = this._customer;
const customerName = customerItem.Name;
const options = {
title: "Delete",
message: "\"" + customerName + "\" will be deleted forever.",
okButtonText: "Delete",
cancelButtonText: "Cancel"
};
confirm(options)
.then((result: boolean) => {
// result can be true/false
if (result) {
this._isBusy = true;
this._customerService.delete(customerItem)
.then((result1) => {
this._isBusy = false;
this._routerExtensions.navigate(["/customers"], {
clearHistory: true,
animated: true,
transition: {
name: "slideBottom",
duration: 200,
curve: "ease"
}
});
}, (error) => {
this._isBusy = false;
if (error && error.message) {
alert({ title: "Error", message: error.message, okButtonText: "Ok" });
} else {
alert({
title: "Error", message: "Error deleting record.",
okButtonText: "Ok"
});
}
}).catch((e) => {
alert({ title: "Error", message: e.message, okButtonText: "Ok" });
this._isBusy = false;
});
}
}, (error) => {
this._isBusy = false;
alert({ title: "Error", message: "Error resolving deleted record.", okButtonText: "Ok" });
}).catch((e) => {
this._isBusy = false;
alert({ title: "Error", message: e.message, okButtonText: "Ok" });
});
}
}
private initializeEditOptions(): void {
// Get state data to be used by State ListPicker
this._stateService.load()
.finally(() => {
this._isBusy = false;
})
.subscribe((stateRecords: Array<State>) => {
for (const state of stateRecords) {
this._stateNameList.push(state.StateName);
this._stateList.push(state.State);
}
// Want to initialize ListPicker to current customer's state
const stateIndex = this._stateList.indexOf(this._customer.State);
this.stateIndexValue = (stateIndex >= 0) ? stateIndex : 0;
}, (error) => {
console.log("Error: " + error.message);
});
}
}