Merge pull request #8 from lordvkrum/mocking-transactions

adding transactions home page and mocking all endpoints

src/app/app.module.ts

@@ -18,6 +18,7 @@ import { FormBuilderComponent } from '../components/formBuilder/formBuilder';
 import { FieldBuilderComponent } from '../components/fieldBuilder/fieldBuilder';
 import { LoginPage } from '../pages/login/login';
 import { HomePage } from '../pages/home/home';
+import { AddTransactionPage } from '../pages/addTransaction/addTransaction';
 import { OfferPage } from '../pages/offer/offer';
 import { OfferDetailPage } from '../pages/offerDetail/offerDetail';
 import { AddOfferPage } from '../pages/addOffer/addOffer';
@@ -37,6 +38,7 @@ import { ProfileEditPage } from '../pages/userProfileEdit/userProfileEdit';
     LetsApp,
     LoginPage,
     HomePage,
+    AddTransactionPage,
     OfferPage,
     OfferDetailPage,
     AddOfferPage,
@@ -63,6 +65,7 @@ import { ProfileEditPage } from '../pages/userProfileEdit/userProfileEdit';
     LetsApp,
     LoginPage,
     HomePage,
+    AddTransactionPage,
     OfferPage,
     OfferDetailPage,
     AddOfferPage,

src/app/app.scss

@@ -38,10 +38,13 @@ ion-menu {
 	}
 }
 
-.ui.card>.content{
-	.author {
-		text-align: right;
-		padding-top: 10px;
+.ui.card {
+	width: 100%;
+	&>.content{
+		.author {
+			text-align: right;
+			padding-top: 10px;
+		}
 	}
 }
 

src/app/app.settings.ts

@@ -3,7 +3,8 @@ import { Injectable } from '@angular/core';
 @Injectable()
 export class AppSettings {
 	public get SERVER_URL(): any {
-		return 'http://hamlets.communityforge.net/commex';
+		// return 'http://hamlets.communityforge.net/commex';
+		return 'http://northwind.servicestack.net/customers.json';
 	}
 
 	public get URL(): any {

src/pages/addTransaction/addTransaction.html

@@ -0,0 +1,15 @@
+<ion-header>
+  <ion-toolbar>
+    <h2 class="ui header">New Transaction</h2>
+    <ion-buttons start>
+      <button ion-button (click)="dismiss()">
+        <span color="primary" showWhen="ios">Cancel</span>
+        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
+      </button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  <form-builder-component [fields]="fields" (created)="onCreated($event)"></form-builder-component>
+</ion-content>

src/pages/addTransaction/addTransaction.scss

@@ -0,0 +1,3 @@
+page-add-transaction {
+
+}

src/pages/addTransaction/addTransaction.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import { ViewController } from 'ionic-angular';
+import { TransactionService } from '../../services/TransactionService';
+import { AlertService } from '../../services/AlertService';
+import { Transaction } from '../../domain/Transaction';
+
+@Component({
+	selector: 'page-add-transaction',
+	templateUrl: 'addTransaction.html'
+})
+export class AddTransactionPage implements OnInit {
+	private definitionTransaction: any;
+	private fields: Array<any>;
+	private transaction: Transaction;
+
+	constructor(private viewCtrl: ViewController,
+		private transactionService: TransactionService,
+		private alertService: AlertService) { }
+
+	ngOnInit(): void {
+		this.transactionService.describe()
+			.subscribe(
+			response => {
+				this.definitionTransaction = response;
+				this.fields = this.definitionTransaction.POST;
+			},
+			error => this.alertService.showError('Connection problem!')
+			);
+	}
+
+	onCreated(transaction: Transaction) {
+		this.transaction = transaction;
+		this.transactionService.post(this.transaction)
+			.subscribe(
+			response => this.viewCtrl.dismiss({
+				success: true
+			}),
+			error => this.alertService.showError(error)
+			);
+	}
+
+	dismiss() {
+		this.viewCtrl.dismiss();
+	}
+}

src/pages/home/home.html

@@ -8,33 +8,29 @@ <h2 class="ui header">Welcome, {{ username }}</h2>
 </ion-header>
 
 <ion-content padding>
-  <ion-card *ngFor="let transaction of transactions">
-    <ion-card-content>
-      <ion-card-title>
-        <ion-icon [name]="stateIcons[transaction.state]"></ion-icon>
-        {{ transaction.tags }}
-      </ion-card-title>
-      <p>
-        {{ transaction.payer }} paid {{ transaction.payee }}
-        {{ transaction.amount }} hour(s) for {{ transaction.description }}
-      </p>
-    </ion-card-content>
-    <ion-row>
-      <ion-col>
-        <button ion-button icon-left color="dark" clear small>
-          <ion-icon name="ios-information-circle"></ion-icon>
-        </button>
-      </ion-col>
-      <ion-col *ngIf="transaction.state==='pending'">
-        <button ion-button icon-left color="dark" clear small>
-          <ion-icon name="checkmark-circle"></ion-icon>
-        </button>
-      </ion-col>
-      <ion-col>
-        <button ion-button icon-left color="dark" clear small>
-          <ion-icon name="ios-close-circle"></ion-icon>
-        </button>
-      </ion-col>
-    </ion-row>
-  </ion-card>
+  <div class="ui success message" *ngIf="success">
+    <i class="close icon"></i>
+    <div class="header">Success!</div>
+    <p>New transaction created.</p>
+  </div>
+  <div class="ui one column grid">
+    <div class="ui column" *ngFor="let transaction of transactions">
+      <div class="ui card">
+        <div class="content">
+          <h3 class="ui header">{{ transaction.description }}</h3>
+          <div class="description">
+            <p><b (click)="showMember(transaction.payer)">{{ transaction.payer_name }}</b> paid <b (click)="showMember(transaction.payee)">{{ transaction.payee_name }}</b><br>
+            {{ transaction.amount }} hour(s)</p>
+          </div>
+        </div>
+        <div class="extra content">
+          <button class="ui small fluid green button">Action</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <button *ngIf="canPost" class="ui add-new button" (click)="addTransaction()">
+    <i class="plus icon"></i> New Transaction
+  </button>
+
 </ion-content>

src/pages/home/home.ts

@@ -1,19 +1,25 @@
 import { Component, OnInit } from '@angular/core';
-import { MenuController } from 'ionic-angular';
+import { MenuController, ModalController } from 'ionic-angular';
 import { AuthService } from '../../services/AuthService';
 import { TransactionService } from '../../services/TransactionService';
 import { AlertService } from '../../services/AlertService';
 import { Transaction } from '../../domain/Transaction';
+import { MemberDetailModal } from '../memberDetail/memberDetail';
+import { AddTransactionPage } from '../addTransaction/addTransaction';
 
 @Component({
 	selector: 'page-home',
 	templateUrl: 'home.html'
 })
 export class HomePage implements OnInit {
 	private username: string;
+	private canPost = false;
+	private success = false;
+	private definitionTransaction: any;
 	private transactions: Array<Transaction>;
 
 	constructor(private menuCtrl: MenuController,
+		private modalCtrl: ModalController,
 		private authService: AuthService,
 		private transactionService: TransactionService,
 		private alertService: AlertService) {
@@ -25,15 +31,38 @@ export class HomePage implements OnInit {
 	}
 
 	ngOnInit(): void {
+		this.transactionService.describe()
+			.subscribe(
+			response => {
+				this.definitionTransaction = response;
+				this.canPost = !!this.definitionTransaction.POST;
+			},
+			error => this.alertService.showError('Connection problem!')
+			);
+		this.loadTransactions();
+	}
+
+	loadTransactions() {
 		this.transactionService.list()
 			.subscribe(
 			response => this.transactions = response,
 			error => this.alertService.showError('Connection problem!')
 			);
 	}
 
-	stateIcons = {
-		'done': 'checkmark-circle',
-		'pending': 'ios-time'
+	showMember(userId) {
+		let modal = this.modalCtrl.create(MemberDetailModal, {
+			memberId: userId
+		});
+		modal.present();
+	}
+
+	addTransaction() {
+		let modal = this.modalCtrl.create(AddTransactionPage);
+		modal.onDidDismiss((data: any = {}) => {
+			this.success = data.success;
+			this.loadTransactions();
+		});
+		modal.present();
 	}
 }

src/pages/login/login.ts

@@ -36,7 +36,7 @@ export class LoginPage implements OnInit {
 		this.authService.login(this.username, this.password)
 			.subscribe(
 			response => this.navCtrl.setRoot(HomePage),
-			error => this.alertService.showError('Connection problem!')
+			error => this.alertService.showError('Error with credentials. Please try again.')
 			);
 	}
 

src/pages/members/members.html

@@ -3,7 +3,7 @@
     <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
-    <ion-title>Welcome to Member, {{ username }}</ion-title>
+    <h2 class="ui header">Members</h2>
   </ion-navbar>
 </ion-header>
 

src/services/AuthService.ts

@@ -4,6 +4,7 @@ import { ReplaySubject } from 'rxjs/ReplaySubject';
 import { AppSettings } from '../app/app.settings';
 import { HttpBasicAuth } from './HttpBasicAuth';
 import { Member } from '../domain/Member';
+import { MEMBERS } from '../test/mock-members';
 
 @Injectable()
 export class AuthService {
@@ -44,11 +45,14 @@ export class AuthService {
 	}
 
 	private requestUserInfo(username): Observable<Member> {
-		return this.httpBasicAuth
-			.getWithAuth(`${this.settings.URL.members}?fragment=${username}&depth=1`)
+		return this.httpBasicAuth.get(this.settings.URL.config)
+		// return this.httpBasicAuth
+		// 	.getWithAuth(`${this.settings.URL.members}?fragment=${username}&depth=1`)
 			.map(response => {
+				response = MEMBERS;
 				for (let id in response) {
 					this.storeToken(response[id]);
+					break;
 				}
 				return response;
 			});

src/services/ConfigService.ts

@@ -9,6 +9,7 @@ import { CategoriesService } from './CategoriesService';
 import { FieldTypesService } from './FieldTypesService';
 import { Config } from '../domain/Config';
 import { Category } from '../domain/Category';
+import { CONFIG } from '../test/mock-config';
 
 @Injectable()
 export class ConfigService {
@@ -27,6 +28,7 @@ export class ConfigService {
 	requestAppConfig(): Observable<Config> {
 		return this.httpBasicAuth.get(this.settings.URL.config)
 			.map((response: Config) => {
+				response = CONFIG;
 				this.categoriesService.setCategories(
 					lodash.map(<any>response.categories, (category: Category, id: string) => {
 						category.id = id;